806 lines
38 KiB
JavaScript
806 lines
38 KiB
JavaScript
/**
|
||
* branding.js — Nexus One AI White-Label Branding + Tier Feature Gating
|
||
* Fetches /api/settings/branding (public, no auth) and:
|
||
* 1. Applies org name, logo, accent color, and page title across all pages.
|
||
* 2. Locks nav items that require a higher tier, showing an upgrade prompt.
|
||
* Inject BEFORE </body> on every portal page.
|
||
*/
|
||
(function () {
|
||
'use strict';
|
||
|
||
// ── Tier hierarchy ──────────────────────────────────────────────────────────
|
||
var TIER_RANK = { starter: 0, basic: 1, pro: 2, max: 3 };
|
||
|
||
// ── Feature → minimum tier required ────────────────────────────────────────
|
||
// Keyed by partial href match (filename). Value = minimum slug to access.
|
||
var FEATURE_TIERS = {
|
||
// Basic-only features (not available on Starter)
|
||
'analytics.html': 'basic',
|
||
'api-keys.html': 'basic',
|
||
'benchmark.html': 'basic',
|
||
'chat-multi.html': 'basic',
|
||
'feedback.html': 'basic',
|
||
'notifications.html': 'basic',
|
||
'prompt-studio.html': 'basic',
|
||
'model-compare.html': 'basic',
|
||
|
||
// Pro-only features
|
||
'agents.html': 'pro',
|
||
'api-playground.html':'pro',
|
||
'chatrooms.html': 'pro',
|
||
'connectors.html': 'pro',
|
||
'evals.html': 'pro',
|
||
'guardrails.html': 'pro',
|
||
'meeting.html': 'pro',
|
||
'rag-quality.html': 'pro',
|
||
'router.html': 'pro',
|
||
'schedules.html': 'pro',
|
||
'teams.html': 'pro',
|
||
'training.html': 'pro',
|
||
'workflows.html': 'pro',
|
||
};
|
||
|
||
// Human-readable tier names for the upgrade prompt (Server S/M/L/Max are the
|
||
// commercial labels for the same starter/basic/pro/max ranks used above —
|
||
// slugs and TIER_RANK are unchanged for backward compatibility).
|
||
var TIER_NAMES = {
|
||
starter: 'Server S',
|
||
basic: 'Server M',
|
||
pro: 'Server L',
|
||
max: 'Server Max',
|
||
};
|
||
|
||
var PRODUCT_VOCABULARY = Object.freeze({
|
||
companyAttribution: 'Powered by Cezen',
|
||
workstation: 'Nexus One AI Workstation',
|
||
server: 'Nexus One AI Server',
|
||
tiers: Object.freeze({ starter: 'Server S', basic: 'Server M', pro: 'Server L', max: 'Server Max' }),
|
||
capabilityReasons: Object.freeze({
|
||
licensed: 'Included in the current license',
|
||
not_licensed: 'Not included in the current license',
|
||
not_provisioned: 'Licensed but not installed on this appliance',
|
||
unsupported_hardware: 'Not supported by the detected hardware',
|
||
degraded: 'Temporarily degraded',
|
||
unavailable: 'Currently unavailable'
|
||
})
|
||
});
|
||
window.NexusOneVocabulary = PRODUCT_VOCABULARY;
|
||
|
||
var SERVICE_PORTS = {
|
||
'3001': { name: 'open-webui', label: 'Open WebUI' },
|
||
'11434': { name: 'ollama', label: 'Ollama' },
|
||
'8000': { name: 'chromadb', label: 'ChromaDB' },
|
||
'8888': { name: 'jupyter', label: 'Jupyter' },
|
||
'8080': { name: 'cezen-api', label: 'Nexus API' },
|
||
};
|
||
|
||
// ── Upgrade modal (injected once into the DOM) ──────────────────────────────
|
||
function ensureModal() {
|
||
if (document.getElementById('cezen-upgrade-modal')) return;
|
||
var modal = document.createElement('div');
|
||
modal.id = 'cezen-upgrade-modal';
|
||
modal.innerHTML = [
|
||
'<div id="cezen-upgrade-backdrop"></div>',
|
||
'<div id="cezen-upgrade-box">',
|
||
' <div id="cezen-upgrade-icon"><span class="icon-svg icon-2xl" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span></div>',
|
||
' <h3 id="cezen-upgrade-title">Feature Locked</h3>',
|
||
' <p id="cezen-upgrade-body"></p>',
|
||
' <div id="cezen-upgrade-actions">',
|
||
' <a href="mailto:sales@cezentech.com" id="cezen-upgrade-cta">Contact Sales to Upgrade</a>',
|
||
' <button id="cezen-upgrade-close">Close</button>',
|
||
' </div>',
|
||
'</div>',
|
||
].join('');
|
||
document.body.appendChild(modal);
|
||
document.getElementById('cezen-upgrade-close').onclick = closeModal;
|
||
document.getElementById('cezen-upgrade-backdrop').onclick = closeModal;
|
||
}
|
||
|
||
function openModal(featureName, requiredTier) {
|
||
ensureModal();
|
||
var name = TIER_NAMES[requiredTier] || requiredTier;
|
||
document.getElementById('cezen-upgrade-title').textContent = featureName + ' — Upgrade Required';
|
||
document.getElementById('cezen-upgrade-body').textContent =
|
||
'This feature is available on the ' + name + ' tier and above. ' +
|
||
'Contact Cezentech to upgrade your Nexus One AI package.';
|
||
document.getElementById('cezen-upgrade-modal').classList.add('cezen-modal-open');
|
||
}
|
||
|
||
function openServiceModal(label) {
|
||
ensureModal();
|
||
document.getElementById('cezen-upgrade-title').textContent = label + ' is not running';
|
||
document.getElementById('cezen-upgrade-body').textContent =
|
||
'This service is not currently available on this appliance. Check the home page service status, or ask the administrator to enable and start the service for this tier.';
|
||
document.getElementById('cezen-upgrade-cta').style.display = 'none';
|
||
document.getElementById('cezen-upgrade-modal').classList.add('cezen-modal-open');
|
||
}
|
||
|
||
function closeModal() {
|
||
var m = document.getElementById('cezen-upgrade-modal');
|
||
if (m) m.classList.remove('cezen-modal-open');
|
||
var cta = document.getElementById('cezen-upgrade-cta');
|
||
if (cta) cta.style.display = '';
|
||
}
|
||
|
||
function currentBaseForPort(port) {
|
||
var protocol = location.protocol === 'https:' ? 'https:' : 'http:';
|
||
var host = location.hostname || 'ai.local';
|
||
return protocol + '//' + host + ':' + port;
|
||
}
|
||
|
||
function rewriteAiLocalText(value) {
|
||
if (!value || value.indexOf('ai.local') === -1) return value;
|
||
return value
|
||
.replace(/https?:\/\/ai\.local:3001/g, currentBaseForPort('3001'))
|
||
.replace(/https?:\/\/ai\.local:11434/g, currentBaseForPort('11434'))
|
||
.replace(/https?:\/\/ai\.local:8000/g, currentBaseForPort('8000'))
|
||
.replace(/https?:\/\/ai\.local:8888/g, currentBaseForPort('8888'))
|
||
.replace(/https?:\/\/ai\.local:8080/g, currentBaseForPort('8080'));
|
||
}
|
||
|
||
function normalizeApplianceLinks() {
|
||
document.querySelectorAll('a[href]').forEach(function (link) {
|
||
var href = link.getAttribute('href') || '';
|
||
if (href.indexOf('ai.local') !== -1) link.setAttribute('href', rewriteAiLocalText(href));
|
||
});
|
||
|
||
var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
|
||
acceptNode: function (node) {
|
||
var tag = node.parentNode && node.parentNode.tagName;
|
||
if (tag === 'SCRIPT' || tag === 'STYLE') return NodeFilter.FILTER_REJECT;
|
||
return node.nodeValue.indexOf('ai.local') !== -1 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
|
||
}
|
||
});
|
||
var textNodes = [];
|
||
while (walker.nextNode()) textNodes.push(walker.currentNode);
|
||
textNodes.forEach(function (node) { node.nodeValue = rewriteAiLocalText(node.nodeValue); });
|
||
}
|
||
|
||
function serviceForHref(href) {
|
||
try {
|
||
var u = new URL(href, location.href);
|
||
return SERVICE_PORTS[u.port || (u.protocol === 'https:' ? '443' : '80')];
|
||
} catch (e) {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function applyServiceAvailability() {
|
||
fetch('/api/services', { credentials: 'include' })
|
||
.then(function (r) { return r.ok ? r.json() : []; })
|
||
.then(function (services) {
|
||
var online = {};
|
||
services.forEach(function (svc) { online[svc.name] = !!svc.ok; });
|
||
document.querySelectorAll('a[href]').forEach(function (link) {
|
||
var svc = serviceForHref(link.getAttribute('href') || '');
|
||
if (!svc || online[svc.name]) return;
|
||
if (link.classList.contains('cezen-service-unavailable')) return;
|
||
link.classList.add('cezen-service-unavailable');
|
||
link.setAttribute('title', svc.label + ' is not running on this appliance');
|
||
link.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
openServiceModal(svc.label);
|
||
});
|
||
});
|
||
})
|
||
.catch(function () { /* Public pages or offline backend: leave links unchanged. */ });
|
||
}
|
||
|
||
// ── Apply tier locks to all nav links ──────────────────────────────────────
|
||
function applyTierGating(tierSlug) {
|
||
var rank = TIER_RANK[tierSlug] !== undefined ? TIER_RANK[tierSlug] : 1;
|
||
|
||
document.querySelectorAll('a[href]').forEach(function (link) {
|
||
var href = link.getAttribute('href') || '';
|
||
var file = href.split('/').pop().split('?')[0];
|
||
var minTier = FEATURE_TIERS[file];
|
||
if (!minTier) return;
|
||
|
||
var minRank = TIER_RANK[minTier] !== undefined ? TIER_RANK[minTier] : 99;
|
||
if (rank >= minRank) return; // user has access — do nothing
|
||
|
||
// Mark the link as locked
|
||
if (link.classList.contains('cezen-locked')) return; // already processed
|
||
link.classList.add('cezen-locked');
|
||
|
||
// Add lock badge after the link text (if not already there)
|
||
var badge = document.createElement('span');
|
||
badge.className = 'cezen-lock-badge';
|
||
badge.setAttribute('title', 'Requires ' + TIER_NAMES[minTier] + ' tier');
|
||
badge.innerHTML = '<span class="icon-svg icon-xs" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>';
|
||
link.appendChild(badge);
|
||
|
||
// Intercept click — show upgrade modal instead of navigating
|
||
var featureName = (link.textContent || file).trim();
|
||
link.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
openModal(featureName, minTier);
|
||
});
|
||
});
|
||
}
|
||
|
||
// ── Main branding apply ─────────────────────────────────────────────────────
|
||
function applyBranding(b) {
|
||
var orgName = b.org_name || 'Nexus One AI';
|
||
var stackName = b.stack_name || 'Nexus One AI';
|
||
var logoUrl = b.logo_url || '';
|
||
var accent = b.accent_color || '#0D9488';
|
||
var footer = b.footer_text || 'Powered by Cezen';
|
||
var tier = b.tier_label || 'Basic Tier';
|
||
var tierSlug = b.tier_slug || 'basic';
|
||
|
||
ensureApplianceNavLink();
|
||
ensureAboutNavLink();
|
||
normalizeApplianceLinks();
|
||
applyServiceAvailability();
|
||
|
||
// ── Accent color CSS variable ───────────────────────────────────────────
|
||
document.documentElement.style.setProperty('--accent', accent);
|
||
document.documentElement.style.setProperty('--accent-dark', shadeColor(accent, -20));
|
||
|
||
// ── Page <title> ────────────────────────────────────────────────────────
|
||
if (document.title) {
|
||
document.title = document.title
|
||
.replace(/Cezen AI Suite/gi, stackName)
|
||
.replace(/Cezen AI/gi, orgName)
|
||
.replace(/Nexus One AI/gi, stackName);
|
||
}
|
||
|
||
// ── data-brand text nodes ───────────────────────────────────────────────
|
||
document.querySelectorAll('[data-brand="org"]').forEach(function (el) {
|
||
el.textContent = orgName;
|
||
});
|
||
document.querySelectorAll('[data-brand="stack"]').forEach(function (el) {
|
||
el.textContent = stackName;
|
||
});
|
||
document.querySelectorAll('[data-brand="tier"]').forEach(function (el) {
|
||
el.textContent = tier;
|
||
// Set slug for CSS tier-colour targeting
|
||
if (el.classList.contains('nav-tier-badge')) {
|
||
el.setAttribute('data-tier-slug', tierSlug);
|
||
}
|
||
});
|
||
document.querySelectorAll('[data-brand="footer"]').forEach(function (el) {
|
||
el.textContent = footer;
|
||
});
|
||
|
||
// ── Replace hardcoded text strings ─────────────────────────────────────
|
||
replaceText('.sidebar-brand-text, .brand-name, .navbar-brand', 'Cezen AI Suite', stackName);
|
||
replaceText('.sidebar-brand-text, .brand-name, .navbar-brand', 'Cezen AI', orgName);
|
||
replaceText('.sidebar-brand-text, .brand-name, .navbar-brand', 'Nexus One AI', orgName);
|
||
replaceText('.tier-badge, .tier-label', 'Basic Tier', tier);
|
||
replaceText('.tier-badge, .tier-label', 'Starter Tier', tier);
|
||
replaceText('footer, .footer-text', 'Powered by Cezen', footer);
|
||
|
||
// ── Logo ────────────────────────────────────────────────────────────────
|
||
if (logoUrl) {
|
||
var navLogoSlot = document.getElementById('nav-org-logo');
|
||
if (navLogoSlot) {
|
||
var navImg = document.createElement('img');
|
||
navImg.src = logoUrl;
|
||
navImg.alt = orgName + ' Logo';
|
||
navLogoSlot.innerHTML = '';
|
||
navLogoSlot.appendChild(navImg);
|
||
}
|
||
document.querySelectorAll('.brand-logo, [data-brand="logo"]').forEach(function (el) {
|
||
if (el.tagName === 'IMG') {
|
||
el.src = logoUrl;
|
||
el.alt = orgName + ' Logo';
|
||
} else {
|
||
var img = document.createElement('img');
|
||
img.src = logoUrl;
|
||
img.alt = orgName + ' Logo';
|
||
img.style.cssText = 'max-height:36px;width:auto;object-fit:contain;';
|
||
el.innerHTML = '';
|
||
el.appendChild(img);
|
||
}
|
||
});
|
||
}
|
||
|
||
// ── Accent <style> block ────────────────────────────────────────────────
|
||
var style = document.getElementById('cezen-brand-style');
|
||
if (!style) {
|
||
style = document.createElement('style');
|
||
style.id = 'cezen-brand-style';
|
||
document.head.appendChild(style);
|
||
}
|
||
style.textContent = [
|
||
':root { --accent: ' + accent + '; --accent-dark: ' + shadeColor(accent, -20) + '; }',
|
||
'a.brand-accent { color: ' + accent + ' !important; }',
|
||
/* btn-primary intentionally excluded — brand colour is fixed in style.css */
|
||
'.btn-accent { background: ' + accent + ' !important; border-color: ' + accent + ' !important; }',
|
||
'.btn-accent:hover { background: ' + shadeColor(accent, -20) + ' !important; }',
|
||
'.sidebar-nav .nav-link.active { border-left-color: ' + accent + ' !important; color: ' + accent + ' !important; }',
|
||
'.progress-bar { background-color: ' + accent + ' !important; }',
|
||
].join('\n');
|
||
|
||
// ── Tier feature gating ─────────────────────────────────────────────────
|
||
applyTierGating(tierSlug);
|
||
injectTierGatingStyles();
|
||
}
|
||
|
||
// ── Tier gating CSS (injected once) ────────────────────────────────────────
|
||
function injectTierGatingStyles() {
|
||
if (document.getElementById('cezen-tier-style')) return;
|
||
var s = document.createElement('style');
|
||
s.id = 'cezen-tier-style';
|
||
s.textContent = [
|
||
/* Locked nav links */
|
||
'a.cezen-locked {',
|
||
' opacity: 0.55;',
|
||
' cursor: not-allowed !important;',
|
||
' position: relative;',
|
||
'}',
|
||
'a.cezen-locked:hover { opacity: 0.7; }',
|
||
|
||
'a.cezen-service-unavailable {',
|
||
' opacity: 0.58;',
|
||
' cursor: not-allowed !important;',
|
||
'}',
|
||
'a.cezen-service-unavailable::after {',
|
||
' content: " offline";',
|
||
' display: inline-block;',
|
||
' margin-left: 6px;',
|
||
' color: #dc2626;',
|
||
' font-size: 0.75em;',
|
||
' font-weight: 700;',
|
||
'}',
|
||
|
||
/* Lock badge */
|
||
'.cezen-lock-badge {',
|
||
' font-size: 0.65em;',
|
||
' margin-left: 5px;',
|
||
' vertical-align: middle;',
|
||
' pointer-events: none;',
|
||
'}',
|
||
|
||
/* Upgrade modal backdrop */
|
||
'#cezen-upgrade-modal {',
|
||
' display: none;',
|
||
' position: fixed;',
|
||
' inset: 0;',
|
||
' z-index: 99999;',
|
||
' align-items: center;',
|
||
' justify-content: center;',
|
||
'}',
|
||
'#cezen-upgrade-modal.cezen-modal-open { display: flex; }',
|
||
|
||
'#cezen-upgrade-backdrop {',
|
||
' position: absolute;',
|
||
' inset: 0;',
|
||
' background: rgba(15,23,42,0.65);',
|
||
' backdrop-filter: blur(3px);',
|
||
'}',
|
||
|
||
/* Modal box */
|
||
'#cezen-upgrade-box {',
|
||
' position: relative;',
|
||
' background: var(--surface, #fff);',
|
||
' border-radius: var(--radius-lg, 14px);',
|
||
' padding: 40px 36px 32px;',
|
||
' max-width: 420px;',
|
||
' width: 90%;',
|
||
' text-align: center;',
|
||
' box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,0.22));',
|
||
' animation: cezen-modal-in 0.2s ease;',
|
||
'}',
|
||
'@keyframes cezen-modal-in {',
|
||
' from { opacity:0; transform: scale(0.92) translateY(12px); }',
|
||
' to { opacity:1; transform: scale(1) translateY(0); }',
|
||
'}',
|
||
|
||
'#cezen-upgrade-icon { color: var(--brand, #0D9488); margin-bottom: 10px; display: flex; justify-content: center; }',
|
||
|
||
'#cezen-upgrade-title {',
|
||
' font-size: 1.15rem;',
|
||
' font-weight: 700;',
|
||
' color: var(--text-primary, #0f172a);',
|
||
' margin: 0 0 10px;',
|
||
'}',
|
||
|
||
'#cezen-upgrade-body {',
|
||
' font-size: 0.9rem;',
|
||
' color: var(--text-secondary, #475569);',
|
||
' line-height: 1.55;',
|
||
' margin: 0 0 24px;',
|
||
'}',
|
||
|
||
'#cezen-upgrade-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }',
|
||
|
||
'#cezen-upgrade-cta {',
|
||
' display: inline-block;',
|
||
' background: var(--accent, #0D9488);',
|
||
' color: #fff !important;',
|
||
' padding: 9px 20px;',
|
||
' border-radius: var(--radius-md, 7px);',
|
||
' font-size: 0.875rem;',
|
||
' font-weight: 600;',
|
||
' text-decoration: none;',
|
||
' transition: background 0.18s;',
|
||
'}',
|
||
'#cezen-upgrade-cta:hover { background: var(--accent-dark, #0b7a6f); }',
|
||
|
||
'#cezen-upgrade-close {',
|
||
' background: var(--bg, #f1f5f9);',
|
||
' border: none;',
|
||
' border-radius: var(--radius-md, 7px);',
|
||
' padding: 9px 20px;',
|
||
' font-size: 0.875rem;',
|
||
' color: var(--text-secondary, #334155);',
|
||
' cursor: pointer;',
|
||
' transition: background 0.18s;',
|
||
'}',
|
||
'#cezen-upgrade-close:hover { background: var(--border, #e2e8f0); }',
|
||
].join('\n');
|
||
document.head.appendChild(s);
|
||
}
|
||
|
||
function replaceText(selector, from, to) {
|
||
try {
|
||
document.querySelectorAll(selector).forEach(function (el) {
|
||
if (el.childNodes.length === 1 && el.childNodes[0].nodeType === Node.TEXT_NODE) {
|
||
el.textContent = el.textContent.replace(
|
||
new RegExp(from.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), to
|
||
);
|
||
}
|
||
});
|
||
} catch (e) { /* selector may not exist */ }
|
||
}
|
||
|
||
function ensureApplianceNavLink() {
|
||
if (document.querySelector('a[href="appliance.html"]')) return;
|
||
document.querySelectorAll('.nav-drop-cat').forEach(function (cat) {
|
||
if ((cat.textContent || '').trim().toUpperCase() !== 'SYSTEM /') return;
|
||
var next = cat.nextElementSibling;
|
||
var link = document.createElement('a');
|
||
link.href = 'appliance.html';
|
||
link.textContent = 'Appliance Ops';
|
||
if (location.pathname.endsWith('/appliance.html')) link.className = 'active';
|
||
cat.parentNode.insertBefore(link, next || null);
|
||
});
|
||
}
|
||
|
||
// Adds "About" to the end of the SYSTEM nav group on every page (except
|
||
// about.html itself, which already has it hardcoded and marked active).
|
||
function ensureAboutNavLink() {
|
||
if (document.querySelector('a[href="about.html"]')) return;
|
||
document.querySelectorAll('.nav-drop-cat').forEach(function (cat) {
|
||
if ((cat.textContent || '').trim().toUpperCase() !== 'SYSTEM /') return;
|
||
var sib = cat.nextElementSibling;
|
||
while (sib && sib.tagName === 'A') { sib = sib.nextElementSibling; }
|
||
var link = document.createElement('a');
|
||
link.href = 'about.html';
|
||
link.textContent = 'About';
|
||
cat.parentNode.insertBefore(link, sib || null);
|
||
});
|
||
}
|
||
|
||
// ── License status labels (window.licenseStatusLabel) ──────────────────────
|
||
// Raw codes from the backend's license evaluation (valid/missing/expired/
|
||
// invalid_signature/not_yet_valid/machine_mismatch) aren't meant for display
|
||
// — translate them the same way /api/health does, everywhere the portal
|
||
// shows a license status to a user.
|
||
var LICENSE_STATUS_LABELS = {
|
||
valid: 'Valid',
|
||
missing: 'No license installed (field-staging mode)',
|
||
expired: 'Expired — contact support@cezentech.com',
|
||
invalid_signature: 'Invalid signature — re-upload a valid signed license',
|
||
not_yet_valid: 'Not yet in its valid date range',
|
||
machine_mismatch: 'Bound to different hardware — contact support@cezentech.com',
|
||
};
|
||
window.licenseStatusLabel = function (status) {
|
||
return LICENSE_STATUS_LABELS[status] || (status || 'Unknown');
|
||
};
|
||
|
||
function shadeColor(hex, pct) {
|
||
var num = parseInt(hex.replace('#', ''), 16);
|
||
var r = Math.min(255, Math.max(0, (num >> 16) + Math.round(2.55 * pct)));
|
||
var g = Math.min(255, Math.max(0, ((num >> 8) & 0xff) + Math.round(2.55 * pct)));
|
||
var b = Math.min(255, Math.max(0, (num & 0xff) + Math.round(2.55 * pct)));
|
||
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
||
}
|
||
|
||
// ── Shared toast notifications (window.showToast) ──────────────────────────
|
||
// Single source of truth for transient messages — replaces the assorted
|
||
// per-page toast divs and native alert() calls. See style.css for
|
||
// #cezen-toast-stack / .cezen-toast styling.
|
||
var TOAST_ICONS = {
|
||
success: '<svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>',
|
||
error: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>',
|
||
warn: '<svg viewBox="0 0 24 24"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
|
||
info: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
|
||
};
|
||
|
||
function ensureToastStack() {
|
||
var stack = document.getElementById('cezen-toast-stack');
|
||
if (!stack) {
|
||
stack = document.createElement('div');
|
||
stack.id = 'cezen-toast-stack';
|
||
document.body.appendChild(stack);
|
||
}
|
||
return stack;
|
||
}
|
||
|
||
window.showToast = function (message, type, opts) {
|
||
type = TOAST_ICONS[type] ? type : 'info';
|
||
opts = opts || {};
|
||
var duration = opts.duration !== undefined ? opts.duration : (type === 'error' ? 6000 : 4000);
|
||
var stack = ensureToastStack();
|
||
var el = document.createElement('div');
|
||
el.className = 'cezen-toast ' + type;
|
||
el.innerHTML =
|
||
'<span class="icon-svg icon-sm" aria-hidden="true">' + TOAST_ICONS[type] + '</span>' +
|
||
'<span class="cezen-toast-body"></span>' +
|
||
'<button class="cezen-toast-close" aria-label="Dismiss">×</button>';
|
||
el.querySelector('.cezen-toast-body').textContent = message;
|
||
function remove() {
|
||
el.classList.add('leaving');
|
||
setTimeout(function () { if (el.parentNode) el.remove(); }, 160);
|
||
}
|
||
el.querySelector('.cezen-toast-close').onclick = remove;
|
||
stack.appendChild(el);
|
||
if (duration > 0) setTimeout(remove, duration);
|
||
return el;
|
||
};
|
||
|
||
// ── Shared confirmation modal (window.showConfirm) ──────────────────────────
|
||
// Replaces native confirm() with a styled, on-brand modal.
|
||
// Usage: showConfirm('Delete user?', 'This cannot be undone.', {danger:true})
|
||
// .then(function (ok) { if (ok) { ...proceed... } });
|
||
function ensureConfirmModal() {
|
||
var modal = document.getElementById('cezen-confirm-modal');
|
||
if (modal) return modal;
|
||
modal = document.createElement('div');
|
||
modal.id = 'cezen-confirm-modal';
|
||
modal.innerHTML =
|
||
'<div id="cezen-confirm-backdrop"></div>' +
|
||
'<div id="cezen-confirm-box">' +
|
||
' <div id="cezen-confirm-title"></div>' +
|
||
' <div id="cezen-confirm-body"></div>' +
|
||
' <div id="cezen-confirm-actions">' +
|
||
' <button id="cezen-confirm-cancel" class="btn-secondary">Cancel</button>' +
|
||
' <button id="cezen-confirm-ok" class="btn-primary">Confirm</button>' +
|
||
' </div>' +
|
||
'</div>';
|
||
document.body.appendChild(modal);
|
||
return modal;
|
||
}
|
||
|
||
window.showConfirm = function (title, body, opts) {
|
||
opts = opts || {};
|
||
return new Promise(function (resolve) {
|
||
var modal = ensureConfirmModal();
|
||
modal.querySelector('#cezen-confirm-title').textContent = title || 'Are you sure?';
|
||
modal.querySelector('#cezen-confirm-body').textContent = body || '';
|
||
var okBtn = modal.querySelector('#cezen-confirm-ok');
|
||
var cancelBtn = modal.querySelector('#cezen-confirm-cancel');
|
||
okBtn.textContent = opts.confirmLabel || 'Confirm';
|
||
cancelBtn.textContent = opts.cancelLabel || 'Cancel';
|
||
okBtn.className = opts.danger ? 'btn-danger' : 'btn-primary';
|
||
var backdrop = modal.querySelector('#cezen-confirm-backdrop');
|
||
function close(result) {
|
||
modal.classList.remove('cezen-modal-open');
|
||
okBtn.onclick = null; cancelBtn.onclick = null; backdrop.onclick = null;
|
||
resolve(result);
|
||
}
|
||
okBtn.onclick = function () { close(true); };
|
||
cancelBtn.onclick = function () { close(false); };
|
||
backdrop.onclick = function () { close(false); };
|
||
modal.classList.add('cezen-modal-open');
|
||
});
|
||
};
|
||
|
||
// ── Global command palette (window search / Ctrl+K) ─────────────────────────
|
||
// No global or cross-entity search existed anywhere in the portal — only a
|
||
// handful of pages had a local filter box. This adds a lightweight, static
|
||
// "jump to" index of every page in the product, reachable from any screen
|
||
// via Ctrl/Cmd+K or the search icon in the top nav. It's navigation search,
|
||
// not a live database query — no new API surface, matches the rest of
|
||
// branding.js's pattern of injecting shared UI once per page load.
|
||
var CMDK_PAGES = [
|
||
{ label: 'Home', href: 'index.html', cat: 'General' },
|
||
{ label: 'Quick Start', href: 'quickstart.html', cat: 'General' },
|
||
{ label: 'Prompt Library', href: 'prompts.html', cat: 'General' },
|
||
{ label: 'Use Cases', href: 'usecases.html', cat: 'General' },
|
||
{ label: 'Model Library', href: 'models.html', cat: 'Learn' },
|
||
{ label: 'Troubleshooting', href: 'troubleshooting.html', cat: 'Support' },
|
||
{ label: 'FAQ', href: 'faq.html', cat: 'Support' },
|
||
{ label: 'Glossary', href: 'glossary.html', cat: 'More' },
|
||
{ label: "What's New", href: 'whats-new.html', cat: 'More' },
|
||
{ label: 'Security & Privacy', href: 'security.html', cat: 'Docs' },
|
||
{ label: 'Admin Guide', href: 'admin.html', cat: 'Docs' },
|
||
{ label: 'Dashboard', href: 'dashboard.html', cat: 'Monitor' },
|
||
{ label: 'Usage Analytics', href: 'analytics.html', cat: 'Monitor' },
|
||
{ label: 'Governance & Audit', href: 'audit.html', cat: 'Monitor' },
|
||
{ label: 'Health Center', href: 'health.html', cat: 'Monitor', keywords: 'status services gpu database' },
|
||
{ label: 'Feedback & Ratings', href: 'feedback.html', cat: 'Monitor' },
|
||
{ label: 'Users', href: 'users.html', cat: 'Manage', keywords: 'user management accounts' },
|
||
{ label: 'Teams', href: 'teams.html', cat: 'Manage' },
|
||
{ label: 'Model Catalog', href: 'models-admin.html', cat: 'Manage', keywords: 'models install pull upload' },
|
||
{ label: 'Training', href: 'training.html', cat: 'Manage', keywords: 'fine-tune qlora' },
|
||
{ label: 'Knowledge Base', href: 'knowledge.html', cat: 'Manage', keywords: 'rag documents collections kb' },
|
||
{ label: 'API Keys', href: 'apikeys.html', cat: 'Tools' },
|
||
{ label: 'Benchmarking', href: 'benchmark.html', cat: 'Tools', keywords: 'model benchmark speed tokens' },
|
||
{ label: 'Model Compare', href: 'model-compare.html', cat: 'Tools' },
|
||
{ label: 'API Playground', href: 'api-playground.html', cat: 'Tools' },
|
||
{ label: 'Guardrails', href: 'guardrails.html', cat: 'Tools', keywords: 'content filters pii keyword' },
|
||
{ label: 'RAG Quality', href: 'rag-quality.html', cat: 'Tools' },
|
||
{ label: 'Model Router', href: 'router.html', cat: 'Tools' },
|
||
{ label: 'MCP & Enterprise Connectors', href: 'connectors.html', cat: 'Tools', keywords: 'database folder connector integration' },
|
||
{ label: 'Console', href: 'console.html', cat: 'System' },
|
||
{ label: 'Settings', href: 'settings.html', cat: 'System' },
|
||
{ label: 'Appliance Ops', href: 'appliance.html', cat: 'System' },
|
||
{ label: 'Document Intelligence', href: 'documents.html', cat: 'AI Tools' },
|
||
{ label: 'AI Workspace', href: 'chat-multi.html', cat: 'AI Tools', keywords: 'multimodal chat' },
|
||
{ label: 'Prompt Studio', href: 'prompt-studio.html', cat: 'AI Tools' },
|
||
{ label: 'Meeting Assistant', href: 'meeting.html', cat: 'AI Tools' },
|
||
{ label: 'Agent Studio', href: 'agents.html', cat: 'AI Tools', keywords: 'agents automation' },
|
||
{ label: 'Scheduled Jobs', href: 'schedules.html', cat: 'AI Tools', keywords: 'cron automation jobs' },
|
||
{ label: 'Workflow Designer', href: 'workflows.html', cat: 'AI Tools', keywords: 'automation pipeline' },
|
||
{ label: 'AI Eval Suite', href: 'evals.html', cat: 'AI Tools', keywords: 'evaluation test suite' },
|
||
{ label: 'Chat Rooms', href: 'chatrooms.html', cat: 'AI Tools' },
|
||
{ label: 'Notifications', href: 'notifications.html', cat: 'General' },
|
||
];
|
||
|
||
function ensureCmdPalette() {
|
||
var modal = document.getElementById('cezen-cmdk');
|
||
if (modal) return modal;
|
||
modal = document.createElement('div');
|
||
modal.id = 'cezen-cmdk';
|
||
modal.innerHTML =
|
||
'<div id="cezen-cmdk-backdrop"></div>' +
|
||
'<div id="cezen-cmdk-box">' +
|
||
' <div id="cezen-cmdk-input-wrap">' +
|
||
' <span class="icon-svg icon-sm" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></span>' +
|
||
' <input id="cezen-cmdk-input" type="text" placeholder="Jump to a page…" autocomplete="off">' +
|
||
' <span id="cezen-cmdk-hint">Esc</span>' +
|
||
' </div>' +
|
||
' <div id="cezen-cmdk-results"></div>' +
|
||
'</div>';
|
||
document.body.appendChild(modal);
|
||
var input = modal.querySelector('#cezen-cmdk-input');
|
||
modal.querySelector('#cezen-cmdk-backdrop').onclick = closeCmdPalette;
|
||
input.addEventListener('input', function () { renderCmdResults(input.value); });
|
||
input.addEventListener('keydown', function (e) {
|
||
var results = modal.querySelectorAll('.cezen-cmdk-item');
|
||
if (!results.length) return;
|
||
var activeIdx = -1;
|
||
results.forEach(function (r, i) { if (r.classList.contains('active')) activeIdx = i; });
|
||
if (e.key === 'ArrowDown') {
|
||
e.preventDefault();
|
||
activeIdx = (activeIdx + 1) % results.length;
|
||
results.forEach(function (r, i) { r.classList.toggle('active', i === activeIdx); });
|
||
results[activeIdx].scrollIntoView({ block: 'nearest' });
|
||
} else if (e.key === 'ArrowUp') {
|
||
e.preventDefault();
|
||
activeIdx = activeIdx <= 0 ? results.length - 1 : activeIdx - 1;
|
||
results.forEach(function (r, i) { r.classList.toggle('active', i === activeIdx); });
|
||
results[activeIdx].scrollIntoView({ block: 'nearest' });
|
||
} else if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
var target = modal.querySelector('.cezen-cmdk-item.active') || results[0];
|
||
if (target) target.click();
|
||
}
|
||
});
|
||
return modal;
|
||
}
|
||
|
||
function renderCmdResults(query) {
|
||
var modal = document.getElementById('cezen-cmdk');
|
||
var resultsEl = modal.querySelector('#cezen-cmdk-results');
|
||
var q = (query || '').trim().toLowerCase();
|
||
var matches = CMDK_PAGES.filter(function (p) {
|
||
if (!q) return true;
|
||
var hay = (p.label + ' ' + p.cat + ' ' + (p.keywords || '')).toLowerCase();
|
||
return hay.indexOf(q) !== -1;
|
||
}).slice(0, 8);
|
||
if (!matches.length) {
|
||
resultsEl.innerHTML = '<div id="cezen-cmdk-empty">No pages match "' + escapeHtml(query) + '".</div>';
|
||
return;
|
||
}
|
||
resultsEl.innerHTML = matches.map(function (p, i) {
|
||
return '<a class="cezen-cmdk-item' + (i === 0 ? ' active' : '') + '" href="' + p.href + '">' +
|
||
'<span class="cezen-cmdk-item-label">' + escapeHtml(p.label) + '</span>' +
|
||
'<span class="cezen-cmdk-item-cat">' + escapeHtml(p.cat) + '</span></a>';
|
||
}).join('');
|
||
}
|
||
|
||
function escapeHtml(s) {
|
||
return (s || '').replace(/[&<>"']/g, function (c) {
|
||
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
|
||
});
|
||
}
|
||
|
||
function openCmdPalette() {
|
||
var modal = ensureCmdPalette();
|
||
modal.classList.add('cezen-cmdk-open');
|
||
var input = modal.querySelector('#cezen-cmdk-input');
|
||
input.value = '';
|
||
renderCmdResults('');
|
||
setTimeout(function () { input.focus(); }, 0);
|
||
}
|
||
|
||
function closeCmdPalette() {
|
||
var modal = document.getElementById('cezen-cmdk');
|
||
if (modal) modal.classList.remove('cezen-cmdk-open');
|
||
}
|
||
|
||
function injectCmdPaletteTrigger() {
|
||
if (document.querySelector('.nav-search-btn')) return;
|
||
var topnav = document.querySelector('.topnav');
|
||
if (!topnav) return; // page has no shared topnav (e.g. login) — skip
|
||
var navMenu = topnav.querySelector(':scope > nav');
|
||
if (!navMenu) return;
|
||
var btn = document.createElement('button');
|
||
btn.className = 'nav-icon-btn nav-search-btn';
|
||
btn.type = 'button';
|
||
btn.setAttribute('aria-label', 'Search (Ctrl+K)');
|
||
btn.title = 'Search (Ctrl+K)';
|
||
btn.innerHTML = '<span class="icon-svg icon-sm" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></span>';
|
||
btn.onclick = openCmdPalette;
|
||
topnav.insertBefore(btn, navMenu.nextSibling);
|
||
}
|
||
|
||
// Two topnav markup variants exist across the portal: some pages wrap the
|
||
// logo/tier-badge/notification-bell trio in a .nav-right div (in that DOM
|
||
// order), others place the same three elements as flat topnav children in
|
||
// the REVERSE order (bell, badge, logo). Relying on CSS `order` to reconcile
|
||
// this is fragile because .nav-right is itself a nested flex container, so
|
||
// `order` values only resolve within whichever flex context an element
|
||
// actually sits in. Instead, physically move all four icon-cluster elements
|
||
// into one canonical container in one canonical DOM order, so every page's
|
||
// rendered markup is identical after this runs — no reliance on `order` math.
|
||
function normalizeNavIconCluster() {
|
||
var topnav = document.querySelector('.topnav');
|
||
if (!topnav) return;
|
||
var search = topnav.querySelector('.nav-search-btn');
|
||
var bell = topnav.querySelector('a.nav-icon-btn[href="notifications.html"]');
|
||
var badge = topnav.querySelector('[data-brand="tier"]');
|
||
var logo = topnav.querySelector('#nav-org-logo');
|
||
if (!bell && !badge && !logo) return; // nothing to normalize on this page
|
||
|
||
var cluster = topnav.querySelector('.nav-right');
|
||
if (!cluster) {
|
||
cluster = document.createElement('div');
|
||
cluster.className = 'nav-right';
|
||
topnav.appendChild(cluster);
|
||
}
|
||
// Canonical left-to-right order: search, bell, tier badge, org logo.
|
||
// appendChild on an already-attached node MOVES it, so this deterministically
|
||
// reorders in place regardless of the page's original markup pattern.
|
||
[search, bell, badge, logo].forEach(function (el) {
|
||
if (el) cluster.appendChild(el);
|
||
});
|
||
}
|
||
|
||
document.addEventListener('keydown', function (e) {
|
||
var isMeta = e.metaKey || e.ctrlKey;
|
||
if (isMeta && e.key.toLowerCase() === 'k') {
|
||
e.preventDefault();
|
||
var modal = document.getElementById('cezen-cmdk');
|
||
if (modal && modal.classList.contains('cezen-cmdk-open')) closeCmdPalette();
|
||
else openCmdPalette();
|
||
return;
|
||
}
|
||
if (e.key === 'Escape') {
|
||
var m = document.getElementById('cezen-cmdk');
|
||
if (m && m.classList.contains('cezen-cmdk-open')) closeCmdPalette();
|
||
}
|
||
});
|
||
|
||
function setupTopnavIcons() {
|
||
injectCmdPaletteTrigger();
|
||
normalizeNavIconCluster();
|
||
}
|
||
document.addEventListener('DOMContentLoaded', setupTopnavIcons);
|
||
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
||
setupTopnavIcons();
|
||
}
|
||
|
||
// ── Fetch branding and apply ────────────────────────────────────────────────
|
||
fetch('/api/settings/branding', { credentials: 'include' })
|
||
.then(function (r) { return r.ok ? r.json() : {}; })
|
||
.then(function (data) { applyBranding(data); })
|
||
.catch(function () { applyBranding({}); }); // fallback: apply defaults silently
|
||
})();
|