universal-chatbot-saas 1.0.0

package/public/chatbot.js

@@ -0,0 +1,987 @@
+(() => {
+  if (window.UniversalChatbotWidget) {
+    return;
+  }
+
+  function safeJsonParse(value, fallback) {
+    try {
+      return JSON.parse(value);
+    } catch {
+      return fallback;
+    }
+  }
+
+  function toPositiveInteger(value, fallback) {
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed) || parsed <= 0) {
+      return fallback;
+    }
+    return Math.floor(parsed);
+  }
+
+  function escapeHtml(value) {
+    return String(value)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/\"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  function escapeAttribute(value) {
+    return escapeHtml(String(value).replace(/`/g, ""));
+  }
+
+  function isSafeUrl(url) {
+    try {
+      const parsed = new URL(url, location.href);
+      return ["http:", "https:", "mailto:", "tel:"].includes(parsed.protocol);
+    } catch {
+      return false;
+    }
+  }
+
+  function markdownToSafeHtml(text) {
+    const source = String(text || "");
+    const placeholders = [];
+
+    const withPlaceholders = source.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (full, label, url) => {
+      const safe = isSafeUrl(url);
+      const html = safe
+        ? `<a href="${escapeAttribute(url)}" target="_blank" rel="noopener noreferrer nofollow">${escapeHtml(label)}</a>`
+        : escapeHtml(full);
+      const marker = `__UCB_LINK_${placeholders.length}__`;
+      placeholders.push(html);
+      return marker;
+    });
+
+    let html = escapeHtml(withPlaceholders);
+    html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+    html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+    html = html.replace(/(^|\s)\*([^*]+)\*(?=\s|$)/g, "$1<em>$2</em>");
+    html = html.replace(/\n/g, "<br>");
+
+    for (let i = 0; i < placeholders.length; i += 1) {
+      html = html.replace(`__UCB_LINK_${i}__`, placeholders[i]);
+    }
+
+    return html;
+  }
+
+  function toSiteSlug(value) {
+    return String(value || "")
+      .trim()
+      .toLowerCase()
+      .replace(/https?:\/\//g, "")
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 80);
+  }
+
+  function deriveSiteIdentity(dataset) {
+    const explicitSiteId = String(dataset.siteId || dataset.siteKey || "").trim();
+    const siteName = String(dataset.siteName || "").trim();
+    const siteUrl = String(dataset.siteUrl || location.origin || "").trim();
+
+    if (explicitSiteId) {
+      return {
+        siteId: explicitSiteId,
+        siteKey: String(dataset.siteKey || explicitSiteId).trim(),
+        siteName,
+        siteUrl
+      };
+    }
+
+    let derivedId = "";
+    try {
+      const parsed = new URL(siteUrl, location.href);
+      const hostSlug = toSiteSlug(parsed.hostname || "");
+      const pathSlug = toSiteSlug(parsed.pathname || "");
+      derivedId = pathSlug ? `${hostSlug}-${pathSlug}` : hostSlug;
+    } catch {
+      derivedId = toSiteSlug(siteName || siteUrl || location.host || "default-site");
+    }
+
+    const fallbackId = derivedId || toSiteSlug(siteName || "default-site") || "default-site";
+
+    return {
+      siteId: fallbackId,
+      siteKey: fallbackId,
+      siteName,
+      siteUrl
+    };
+  }
+
+  function normalizePosition(rawPosition) {
+    const value = String(rawPosition || "").trim().toLowerCase();
+    if (value === "left" || value === "bottom-left") {
+      return "left";
+    }
+    return "right";
+  }
+
+  function createWidgetSessionId() {
+    if (window.crypto && typeof window.crypto.randomUUID === "function") {
+      return `sess_${window.crypto.randomUUID()}`;
+    }
+    return `sess_${Date.now()}_${Math.random().toString(36).slice(2, 12)}`;
+  }
+
+  function getOrCreateSessionId(storageKey, explicitSessionId) {
+    const direct = String(explicitSessionId || "").trim();
+    if (direct) {
+      return direct;
+    }
+
+    const sessionStorageKey = `${storageKey}_session_id`;
+    try {
+      const existing = String(localStorage.getItem(sessionStorageKey) || "").trim();
+      if (existing) {
+        return existing;
+      }
+      const next = createWidgetSessionId();
+      localStorage.setItem(sessionStorageKey, next);
+      return next;
+    } catch {
+      return createWidgetSessionId();
+    }
+  }
+
+  const scriptEl = document.currentScript;
+  const dataset = (scriptEl && scriptEl.dataset) || {};
+  const derivedSite = deriveSiteIdentity(dataset);
+  const requestedAiModel = (dataset.aimodel || "").trim();
+  const normalizedAiModel = requestedAiModel.toLowerCase();
+  const providerFromAiModel = ["claude", "openai", "groq", "mistral"].includes(normalizedAiModel)
+    ? normalizedAiModel
+    : "";
+
+  const config = {
+    botName: dataset.botName || "Aria",
+    color: dataset.color || "#0ea5a4",
+    welcome: dataset.welcome || "Hi. How can I help today?",
+    apiBase: dataset.apiBase || "http://localhost:8787",
+    placeholder: dataset.placeholder || "Type your question...",
+    systemPrompt: dataset.systemPrompt || "You are a helpful support agent.",
+    knowledge: (() => {
+      const rawKnowledge = String(dataset.knowledgeJson || dataset.knowledge || "").trim();
+      if (!rawKnowledge) {
+        return null;
+      }
+      return safeJsonParse(rawKnowledge, rawKnowledge);
+    })(),
+    knowledgeUrl: String(dataset.knowledgeUrl || "").trim(),
+    knowledgeClientFetch: String(dataset.knowledgeClientFetch || "false").toLowerCase() === "true",
+    knowledgeQuery: safeJsonParse(dataset.knowledgeQueryJson || dataset.knowledgeQuery || "{}", {}),
+    includeKnowledgeContext: String(dataset.knowledgeUrlIncludeContext || "true").toLowerCase() !== "false",
+    knowledgeSyncMs: Math.max(
+      toPositiveInteger(dataset.knowledgeSyncMs || dataset.knowledgeRefreshMs || "60000", 60000),
+      5000
+    ),
+    knowledgeSyncOnLoad: String(dataset.knowledgeSyncOnLoad || "true").toLowerCase() !== "false",
+    model: dataset.model || (providerFromAiModel ? "" : requestedAiModel),
+    provider: dataset.provider || providerFromAiModel || "claude",
+    authToken: dataset.authToken || dataset.aiApikey || dataset.aiApiKey || dataset.apikey || "",
+    botId: dataset.botId || dataset.bot_id || "",
+    botApiKey: dataset.botApiKey || dataset.bot_api_key || "",
+    tenantId: dataset.tenantId || dataset.tenant || "",
+    userId: dataset.userId || dataset.visitorId || "",
+    visitorId: dataset.visitorId || dataset.userId || "",
+    userHandle: dataset.userHandle || dataset.user || "default",
+    siteId: derivedSite.siteId,
+    siteKey: derivedSite.siteKey,
+    siteName: derivedSite.siteName,
+    siteUrl: derivedSite.siteUrl,
+    pageUrl: location.href,
+    pageOrigin: location.origin,
+    referrer: document.referrer || "",
+    position: normalizePosition(dataset.position),
+    customCss: (dataset.customCss || "").trim(),
+    storageKey: dataset.storageKey || `chatbot_history_${location.host}_${derivedSite.siteId}`,
+    sessionId: ""
+  };
+
+  config.sessionId = getOrCreateSessionId(config.storageKey, dataset.sessionId || dataset.chatSessionId);
+
+  const root = document.createElement("div");
+  root.className = "ucb-root";
+  root.setAttribute("data-position", config.position);
+
+  function applyRootPosition() {
+    root.style.setProperty("position", "fixed", "important");
+    // root.style.setProperty("top", "auto", "important");
+    // root.style.setProperty("bottom", "20px", "important");
+    // if (config.position === "left") {
+    //   root.style.setProperty("left", "20px", "important");
+    //   root.style.setProperty("right", "auto", "important");
+    // } else {
+    //   root.style.setProperty("right", "20px", "important");
+    //   root.style.setProperty("left", "auto", "important");
+    // }
+  }
+
+  applyRootPosition();
+
+  root.innerHTML = `
+    <button class="ucb-fab" aria-label="Open ${escapeHtml(config.botName)} chat">
+      <span class="ucb-fab-icon">\u2709</span>
+    </button>
+
+    <section class="ucb-panel" aria-live="polite">
+      <header class="ucb-header">
+        <div class="ucb-title-wrap">
+          <div class="ucb-dot"></div>
+          <div class="ucb-title-meta">
+            <h2 class="ucb-title">${escapeHtml(config.botName)}</h2>
+            <p class="ucb-subtitle">Online now</p>
+          </div>
+        </div>
+        <div class="ucb-header-actions">
+          <button class="ucb-clear" type="button" aria-label="Clear chat">Clear</button>
+          <button class="ucb-close" type="button" aria-label="Close chat">\u2715</button>
+        </div>
+      </header>
+
+      <div class="ucb-messages"></div>
+
+      <div class="ucb-typing" hidden>
+        <span></span><span></span><span></span>
+      </div>
+
+      <form class="ucb-input-row">
+        <input class="ucb-input" type="text" autocomplete="off" placeholder="${escapeHtml(config.placeholder)}" />
+        <button class="ucb-send" type="submit">Send</button>
+      </form>
+    </section>
+  `;
+
+  const style = document.createElement("style");
+  style.textContent = `
+    .ucb-root {
+      --ucb-color: ${config.color};
+      --ucb-text: #0f172a;
+      --ucb-soft: #f8fafc;
+      --ucb-border: #e2e8f0;
+      --ucb-muted: #64748b;
+      --ucb-shadow: 0 18px 50px rgba(2, 6, 23, 0.16);
+      position: fixed;
+      bottom: 20px;
+      top: auto;
+      left: auto;
+      right: auto;
+      z-index: 2147483000;
+      font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: flex-end;
+      gap: 12px;
+    }
+
+    .ucb-root,
+    .ucb-root * {
+      box-sizing: border-box;
+    }
+
+    .ucb-root[data-position="right"] {
+      right: 20px;
+      left: auto;
+      top: auto;
+    }
+
+    .ucb-root[data-position="left"] {
+      left: 20px;
+      right: auto;
+      top: auto;
+    }
+
+    .ucb-fab {
+      width: 58px;
+      height: 58px;
+      border: 0;
+      border-radius: 999px;
+      position: relative;
+      top: auto;
+      right: auto;
+      left: auto;
+      bottom: auto;
+      background: linear-gradient(135deg, var(--ucb-color), #0b1220);
+      color: #fff;
+      cursor: pointer;
+      box-shadow: var(--ucb-shadow);
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      transition: transform 180ms ease;
+    }
+
+    .ucb-fab:hover { transform: translateY(-2px); }
+
+    .ucb-fab-icon {
+      font-size: 20px;
+      line-height: 1;
+      position: static !important;
+      top: auto !important;
+      right: auto !important;
+      bottom: auto !important;
+      left: auto !important;
+      transform: none !important;
+      display: inline-block;
+    }
+
+    .ucb-panel {
+      width: min(370px, calc(100vw - 28px));
+      height: min(580px, calc(100vh - 96px));
+      background: linear-gradient(180deg, #ffffff, #f8fbff);
+      border: 1px solid var(--ucb-border);
+      border-radius: 20px;
+      box-shadow: var(--ucb-shadow);
+      display: grid;
+      grid-template-rows: auto 1fr auto auto;
+      margin-bottom: 0;
+      overflow: hidden;
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+      pointer-events: none;
+      transition: opacity 200ms ease, transform 200ms ease;
+    }
+
+    .ucb-root.ucb-open .ucb-panel {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      pointer-events: auto;
+    }
+
+    .ucb-header {
+      background: linear-gradient(180deg, #f8fafc, #eef3f9);
+      border-bottom: 1px solid var(--ucb-border);
+      padding: 14px 14px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .ucb-title-wrap {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ucb-title-meta {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+    }
+
+    .ucb-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 999px;
+      background: var(--ucb-color);
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--ucb-color) 18%, transparent);
+    }
+
+    .ucb-title {
+      margin: 0;
+      color: var(--ucb-text);
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .ucb-subtitle {
+      margin: 0;
+      color: var(--ucb-muted);
+      font-size: 11px;
+      line-height: 1.3;
+    }
+
+    .ucb-header-actions {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .ucb-clear {
+      border: 1px solid #dbe5f0;
+      background: #fff;
+      color: #334155;
+      cursor: pointer;
+      font-size: 12px;
+      padding: 5px 8px;
+      border-radius: 8px;
+      line-height: 1;
+    }
+
+    .ucb-clear:hover {
+      background: #f8fafc;
+      border-color: #cbd5e1;
+    }
+
+    .ucb-close {
+      border: 0;
+      background: transparent;
+      color: #64748b;
+      cursor: pointer;
+      font-size: 16px;
+      width: 28px;
+      height: 28px;
+      border-radius: 8px;
+    }
+
+    .ucb-close:hover {
+      background: #eef2f7;
+      color: #1e293b;
+    }
+
+    .ucb-messages {
+      overflow-y: auto;
+      padding: 14px;
+      background:
+        radial-gradient(120% 80% at 50% 0%, rgba(14, 165, 164, 0.06), rgba(255, 255, 255, 0) 55%),
+        linear-gradient(180deg, #ffffff, #f8fafc);
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .ucb-message {
+      max-width: 88%;
+      border-radius: 14px;
+      padding: 10px 12px;
+      font-size: 14px;
+      line-height: 1.45;
+      white-space: pre-wrap;
+      word-break: break-word;
+      animation: ucb-pop 170ms ease;
+    }
+
+    .ucb-message.user {
+      align-self: flex-end;
+      color: #fff;
+      background: var(--ucb-color);
+      border-bottom-right-radius: 4px;
+    }
+
+    .ucb-message.assistant {
+      align-self: flex-start;
+      color: #0f172a;
+      background: #fff;
+      border: 1px solid var(--ucb-border);
+      border-bottom-left-radius: 4px;
+    }
+
+    .ucb-message.assistant a {
+      color: #0f766e;
+      text-decoration: underline;
+    }
+
+    .ucb-message.assistant code {
+      background: #f1f5f9;
+      border: 1px solid #e2e8f0;
+      border-radius: 5px;
+      padding: 1px 4px;
+      font-family: Consolas, "Courier New", monospace;
+      font-size: 12px;
+    }
+
+    .ucb-typing {
+      height: 20px;
+      padding: 0 16px 8px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .ucb-typing span {
+      width: 7px;
+      height: 7px;
+      border-radius: 999px;
+      background: #cbd5e1;
+      animation: ucb-bounce 1s infinite ease-in-out;
+    }
+
+    .ucb-typing span:nth-child(2) { animation-delay: 0.16s; }
+    .ucb-typing span:nth-child(3) { animation-delay: 0.32s; }
+
+    @keyframes ucb-bounce {
+      0%, 80%, 100% { transform: scale(0.75); opacity: 0.6; }
+      40% { transform: scale(1); opacity: 1; }
+    }
+
+    @keyframes ucb-pop {
+      from {
+        opacity: 0;
+        transform: translateY(4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .ucb-input-row {
+      padding: 10px;
+      border-top: 1px solid var(--ucb-border);
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 8px;
+      background: #fff;
+    }
+
+    .ucb-input {
+      border: 1px solid var(--ucb-border);
+      border-radius: 10px;
+      padding: 10px 11px;
+      font-size: 14px;
+      outline: none;
+    }
+
+    .ucb-input:focus {
+      border-color: var(--ucb-color);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ucb-color) 18%, transparent);
+    }
+
+    .ucb-send {
+      border: 0;
+      border-radius: 10px;
+      padding: 10px 14px;
+      font-size: 13px;
+      font-weight: 600;
+      color: #fff;
+      background: var(--ucb-color);
+      cursor: pointer;
+    }
+
+    .ucb-send:disabled {
+      opacity: 0.65;
+      cursor: wait;
+    }
+
+    @media (max-width: 600px) {
+      /* Closed state: keep launcher pinned to bottom-right. */
+      .ucb-root[data-position="right"]:not(.ucb-open) {
+        right: 12px !important;
+        left: auto !important;
+        bottom: 12px !important;
+        top: auto !important;
+        align-items: flex-end;
+      }
+
+      .ucb-root[data-position="left"]:not(.ucb-open) {
+        left: 12px !important;
+        right: auto !important;
+        bottom: 12px !important;
+        top: auto !important;
+        align-items: flex-start;
+      }
+
+      /* Open state: show a usable bottom-sheet style panel on mobile. */
+      .ucb-root.ucb-open[data-position="right"],
+      .ucb-root.ucb-open[data-position="left"] {
+        left: max(12px, env(safe-area-inset-left)) !important;
+        right: max(12px, env(safe-area-inset-right)) !important;
+        bottom: 12px !important;
+        top: auto !important;
+        align-items: stretch;
+      }
+
+      .ucb-root.ucb-open .ucb-panel {
+        width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
+        max-width: 100%;
+        height: min(72vh, 620px);
+      }
+
+      .ucb-root.ucb-open .ucb-fab {
+        display: none;
+      }
+    }
+  `;
+
+  document.head.appendChild(style);
+  if (config.customCss) {
+    const customCssStyle = document.createElement("style");
+    customCssStyle.setAttribute("data-ucb-custom-css", "inline");
+    customCssStyle.textContent = config.customCss;
+    document.head.appendChild(customCssStyle);
+  }
+
+  document.body.appendChild(root);
+
+  const fab = root.querySelector(".ucb-fab");
+  const panel = root.querySelector(".ucb-panel");
+  const closeBtn = root.querySelector(".ucb-close");
+  const clearBtn = root.querySelector(".ucb-clear");
+  const form = root.querySelector(".ucb-input-row");
+  const input = root.querySelector(".ucb-input");
+  const messagesEl = root.querySelector(".ucb-messages");
+  const sendBtn = root.querySelector(".ucb-send");
+  const typingEl = root.querySelector(".ucb-typing");
+
+  let messages = safeJsonParse(localStorage.getItem(config.storageKey), []);
+  let inFlight = false;
+  let knowledgeUrlCache = null;
+  let knowledgeUrlInFlight = null;
+  let knowledgeUrlCacheAt = 0;
+  let knowledgeSyncTimer = null;
+
+  if (!Array.isArray(messages) || !messages.length) {
+    messages = [{ role: "assistant", content: config.welcome }];
+    persistMessages();
+  }
+
+  renderMessages();
+
+  if (config.knowledgeClientFetch && config.knowledgeUrl && isSafeUrl(config.knowledgeUrl) && config.knowledgeSyncOnLoad) {
+    loadKnowledgeFromUrl({ force: true }).catch(() => {});
+
+    knowledgeSyncTimer = setInterval(() => {
+      loadKnowledgeFromUrl({ force: true }).catch(() => {});
+    }, config.knowledgeSyncMs);
+
+    window.addEventListener("beforeunload", () => {
+      if (knowledgeSyncTimer) {
+        clearInterval(knowledgeSyncTimer);
+      }
+    });
+  }
+
+  fab.addEventListener("click", () => {
+    root.classList.toggle("ucb-open");
+    if (root.classList.contains("ucb-open")) {
+      input.focus();
+    }
+  });
+
+  closeBtn.addEventListener("click", () => {
+    root.classList.remove("ucb-open");
+  });
+
+  clearBtn.addEventListener("click", () => {
+    messages = [{ role: "assistant", content: config.welcome }];
+    persistMessages();
+    renderMessages();
+    input.focus();
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      root.classList.remove("ucb-open");
+    }
+  });
+
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    if (inFlight) {
+      return;
+    }
+
+    const content = input.value.trim();
+    if (!content) {
+      return;
+    }
+
+    input.value = "";
+    messages.push({ role: "user", content });
+    persistMessages();
+    renderMessages();
+
+    inFlight = true;
+    sendBtn.disabled = true;
+    typingEl.hidden = false;
+
+    const assistantMessage = { role: "assistant", content: "" };
+    messages.push(assistantMessage);
+    renderMessages();
+
+    try {
+      await streamAssistantReply(messages, (token) => {
+        assistantMessage.content += token;
+        updateLastAssistantMessage(assistantMessage.content);
+      });
+      persistMessages();
+    } catch (error) {
+      assistantMessage.content = `Sorry, there was a problem: ${error.message || "unknown error"}`;
+      updateLastAssistantMessage(assistantMessage.content);
+      persistMessages();
+    } finally {
+      inFlight = false;
+      sendBtn.disabled = false;
+      typingEl.hidden = true;
+      scrollToBottom();
+    }
+  });
+
+  function persistMessages() {
+    localStorage.setItem(config.storageKey, JSON.stringify(messages.slice(-40)));
+  }
+
+  function scrollToBottom() {
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+  }
+
+  function renderMessages() {
+    messagesEl.innerHTML = "";
+    for (const message of messages) {
+      const messageEl = document.createElement("div");
+      messageEl.className = `ucb-message ${message.role}`;
+      if (message.role === "assistant") {
+        messageEl.innerHTML = markdownToSafeHtml(message.content);
+      } else {
+        messageEl.textContent = message.content;
+      }
+      messagesEl.appendChild(messageEl);
+    }
+    scrollToBottom();
+  }
+
+  function updateLastAssistantMessage(content) {
+    const last = messagesEl.lastElementChild;
+    if (!last || !last.classList.contains("assistant")) {
+      renderMessages();
+      return;
+    }
+    last.innerHTML = markdownToSafeHtml(content);
+    scrollToBottom();
+  }
+
+  function toKnowledgeEntries(inputValue, sourceLabel) {
+    if (!inputValue) {
+      return [];
+    }
+
+    if (Array.isArray(inputValue)) {
+      return inputValue;
+    }
+
+    if (typeof inputValue === "object") {
+      return Array.isArray(inputValue.knowledge)
+        ? inputValue.knowledge
+        : Array.isArray(inputValue.items)
+          ? inputValue.items
+          : [inputValue];
+    }
+
+    const text = String(inputValue).trim();
+    if (!text) {
+      return [];
+    }
+
+    return [{ title: "Knowledge", content: text, source: sourceLabel }];
+  }
+
+  function appendKnowledgeUrlParams(baseUrl) {
+    if (!isSafeUrl(baseUrl)) {
+      return baseUrl;
+    }
+
+    const url = new URL(baseUrl, location.href);
+
+    if (config.includeKnowledgeContext) {
+      const contextParams = {
+        tenantId: config.tenantId,
+        userId: config.userId,
+        userHandle: config.userHandle,
+        siteId: config.siteId,
+        siteKey: config.siteKey,
+        siteName: config.siteName,
+        siteUrl: config.siteUrl,
+        pageUrl: config.pageUrl,
+        origin: config.pageOrigin,
+        referrer: config.referrer
+      };
+
+      Object.entries(contextParams).forEach(([key, value]) => {
+        const text = String(value || "").trim();
+        if (text && !url.searchParams.has(key)) {
+          url.searchParams.set(key, text);
+        }
+      });
+    }
+
+    if (config.knowledgeQuery && typeof config.knowledgeQuery === "object") {
+      Object.entries(config.knowledgeQuery).forEach(([key, value]) => {
+        if (value === null || value === undefined) {
+          return;
+        }
+        if (!url.searchParams.has(key)) {
+          url.searchParams.set(key, String(value));
+        }
+      });
+    }
+
+    return url.toString();
+  }
+
+  async function loadKnowledgeFromUrl(options) {
+    const opts = options && typeof options === "object" ? options : {};
+    const forceRefresh = opts.force === true;
+
+    // Default behavior: keep knowledge URL hidden from browser network.
+    if (!config.knowledgeClientFetch) {
+      return [];
+    }
+
+    if (!config.knowledgeUrl || !isSafeUrl(config.knowledgeUrl)) {
+      return [];
+    }
+
+    const cacheIsFresh =
+      knowledgeUrlCache &&
+      knowledgeUrlCacheAt > 0 &&
+      Date.now() - knowledgeUrlCacheAt < config.knowledgeSyncMs;
+
+    if (!forceRefresh && cacheIsFresh) {
+      return knowledgeUrlCache;
+    }
+
+    if (knowledgeUrlInFlight) {
+      return knowledgeUrlInFlight;
+    }
+
+    knowledgeUrlInFlight = (async () => {
+      try {
+        const resolvedKnowledgeUrl = appendKnowledgeUrlParams(config.knowledgeUrl);
+        const response = await fetch(resolvedKnowledgeUrl, {
+          method: "GET",
+          headers: {
+            Accept: "application/json"
+          }
+        });
+
+        if (!response.ok) {
+          throw new Error(`Knowledge URL request failed with status ${response.status}`);
+        }
+
+        const payload = await response.json();
+        knowledgeUrlCache = toKnowledgeEntries(payload, "knowledge-url");
+        knowledgeUrlCacheAt = Date.now();
+        return knowledgeUrlCache;
+      } catch (error) {
+        console.warn("Unable to load data-knowledge-url:", error?.message || error);
+        if (!knowledgeUrlCache) {
+          knowledgeUrlCache = [];
+        }
+        return knowledgeUrlCache;
+      } finally {
+        knowledgeUrlInFlight = null;
+      }
+    })();
+
+    return knowledgeUrlInFlight;
+  }
+
+  async function streamAssistantReply(fullHistory, onToken) {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+
+    if (config.authToken) {
+      headers.Authorization = `Bearer ${config.authToken}`;
+    }
+
+    const inlineKnowledge = toKnowledgeEntries(config.knowledge, "inline");
+    const remoteKnowledge = await loadKnowledgeFromUrl();
+    const mergedKnowledge = [...inlineKnowledge, ...remoteKnowledge];
+
+    const requestBody = {
+      messages: fullHistory,
+      sessionId: config.sessionId,
+      siteConfig: {
+        userHandle: config.userHandle,
+        provider: config.provider,
+        systemPrompt: config.systemPrompt,
+        knowledge: mergedKnowledge,
+        model: config.model,
+        siteId: config.siteId,
+        siteKey: config.siteKey,
+        siteName: config.siteName,
+        siteUrl: config.siteUrl,
+        pageUrl: config.pageUrl,
+        pageOrigin: config.pageOrigin,
+        referrer: config.referrer,
+        visitorId: config.visitorId,
+        userId: config.userId
+      }
+    };
+
+    // Add bot credentials if provided
+    if (config.botId) {
+      requestBody.botId = config.botId;
+    }
+    if (config.botApiKey) {
+      requestBody.apiKey = config.botApiKey;
+    }
+
+    const response = await fetch(`${config.apiBase.replace(/\/$/, "")}/api/chat/stream`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(requestBody)
+    });
+
+    if (!response.ok || !response.body) {
+      const text = await response.text();
+      throw new Error(text || "Request failed");
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+
+      buffer += decoder.decode(value, { stream: true });
+      const events = buffer.split("\n\n");
+      buffer = events.pop() || "";
+
+      for (const block of events) {
+        let eventName = "message";
+        let dataRaw = "{}";
+
+        for (const line of block.split("\n")) {
+          if (line.startsWith("event:")) {
+            eventName = line.slice(6).trim();
+          }
+          if (line.startsWith("data:")) {
+            dataRaw = line.slice(5).trim();
+          }
+        }
+
+        let data;
+        try {
+          data = JSON.parse(dataRaw);
+        } catch {
+          data = {};
+        }
+
+        if (eventName === "token" && typeof data.token === "string") {
+          onToken(data.token);
+        }
+
+        if (eventName === "error") {
+          throw new Error(data.error || "Streaming error");
+        }
+      }
+    }
+  }
+
+  window.UniversalChatbotWidget = {
+    open() {
+      root.classList.add("ucb-open");
+      input.focus();
+    },
+    close() {
+      root.classList.remove("ucb-open");
+    },
+    refreshKnowledge() {
+      return loadKnowledgeFromUrl({ force: true });
+    },
+    clear() {
+      messages = [{ role: "assistant", content: config.welcome }];
+      persistMessages();
+      renderMessages();
+    }
+  };
+})();