@cognitiondesk/widget 1.2.0 → 1.2.2

package/dist/react.es.js

@@ -1,6 +1,6 @@
-import { jsx as S } from "react/jsx-runtime";
-import { forwardRef as N, useRef as M, useImperativeHandle as I, useEffect as C } from "react";
-const P = "https://mounaji-backendv3.onrender.com", B = `
+import { jsx as P } from "react/jsx-runtime";
+import { forwardRef as I, useRef as E, useImperativeHandle as N, useEffect as x } from "react";
+const j = "https://mounaji-backendv3.onrender.com", z = `
   :host {
     all: initial;
     font-family: system-ui, sans-serif;
@@ -246,84 +246,174 @@ const P = "https://mounaji-backendv3.onrender.com", B = `
       font-size: 16px;
     }
   }
-`, x = {
+`, w = {
   chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
   close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
   send: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>'
 };
-function z() {
+function B() {
   return "cd_" + Math.random().toString(36).slice(2) + Date.now().toString(36);
 }
 let D = class {
+  /**
+   * @param {Object} config
+   * @param {string}  config.apiKey           - Required. Your CognitionDesk API key.
+   * @param {string}  [config.widgetId]        - Widget ID from the dashboard. Enables remote config.
+   * @param {string}  [config.assistantId]     - Assistant ID (overrides server value if set).
+   * @param {string}  [config.backendUrl]      - Custom backend URL.
+   * @param {string}  [config.theme]           - 'light' | 'dark' | 'auto'
+   * @param {string}  [config.primaryColor]    - Hex color for buttons / header.
+   * @param {string}  [config.botName]         - Display name shown in the header.
+   * @param {string}  [config.botEmoji]        - Emoji shown as avatar.
+   * @param {string}  [config.welcomeMessage]  - First message shown to the user.
+   * @param {string}  [config.placeholder]     - Textarea placeholder text.
+   * @param {string}  [config.position]        - 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+   * @param {boolean} [config.streaming]       - Enable streaming responses (default: true).
+   * @param {Object}  [config.overrideSettings]
+   *   Explicit code-level overrides. Any key listed here takes precedence over
+   *   the server-side dashboard config. Use this when you want to manage
+   *   specific settings from code rather than the CognitionDesk dashboard.
+   *
+   *   Example — let the dashboard control everything except color:
+   *     overrideSettings: { primaryColor: '#e11d48' }
+   *
+   *   Example — full code control (dashboard settings ignored):
+   *     overrideSettings: {
+   *       primaryColor: '#e11d48', botName: 'Aria', welcomeMessage: 'Hi!'
+   *     }
+   *
+   *   When omitted (default), ALL settings come from the dashboard.
+   */
   constructor(t = {}) {
-    var e, a, s, r, n;
+    var e, i, s, a, n;
     if (!t.apiKey) throw new Error("[CognitionDesk] apiKey is required");
-    this._cfg = {
+    this._overrides = new Set(
+      t.overrideSettings ? Object.keys(t.overrideSettings) : []
+    ), this._cfg = {
       apiKey: t.apiKey,
       widgetId: t.widgetId || null,
       assistantId: t.assistantId || null,
-      backendUrl: t.backendUrl || P,
+      backendUrl: t.backendUrl || j,
       primaryColor: t.primaryColor || "#2563eb",
       theme: t.theme || "light",
-      // 'light' | 'dark' | 'auto'
       botName: t.botName || "AI Assistant",
       botEmoji: t.botEmoji || "🤖",
       welcomeMessage: t.welcomeMessage || "Hello! How can I help you today?",
       placeholder: t.placeholder || "Type a message…",
       position: t.position || "bottom-right",
       streaming: t.streaming !== !1,
-      // default: true
-      // Rate limiting — can be overridden by inline config or merged from server config
       rateLimiting: {
         enabled: ((e = t.rateLimiting) == null ? void 0 : e.enabled) !== !1,
-        maxMessagesPerSession: ((a = t.rateLimiting) == null ? void 0 : a.maxMessagesPerSession) ?? 0,
+        maxMessagesPerSession: ((i = t.rateLimiting) == null ? void 0 : i.maxMessagesPerSession) ?? 0,
         maxMessagesPerMinute: ((s = t.rateLimiting) == null ? void 0 : s.maxMessagesPerMinute) ?? 0,
-        limitReachedMessage: ((r = t.rateLimiting) == null ? void 0 : r.limitReachedMessage) || "You've reached the message limit for this session.",
+        limitReachedMessage: ((a = t.rateLimiting) == null ? void 0 : a.limitReachedMessage) || "You've reached the message limit for this session.",
         rateLimitMessage: ((n = t.rateLimiting) == null ? void 0 : n.rateLimitMessage) || "You're sending messages too quickly. Please wait a moment."
-      }
-    }, this._sessionId = z(), this._messageCount = 0, this._minuteCount = 0, this._minuteStart = Date.now(), this._messages = [], this._open = !1, this._loading = !1, this._container = null, this._shadow = null, this._panel = null, this._messagesEl = null, this._textarea = null, this._sendBtn = null, this._viewportHandler = null;
+      },
+      // Store overrides for re-application after each config refresh
+      overrideSettings: t.overrideSettings || null
+    }, t.overrideSettings && this._applyOverrides(t.overrideSettings), this._sessionId = B(), this._messageCount = 0, this._minuteCount = 0, this._minuteStart = Date.now(), this._messages = [], this._open = !1, this._loading = !1, this._container = null, this._shadow = null, this._panel = null, this._messagesEl = null, this._textarea = null, this._sendBtn = null, this._viewportHandler = null, this._refreshPending = !1;
   }
   // ── Public API ──────────────────────────────────────────────────────────────
   /**
    * Mount the widget.
-   * If `widgetId` was provided, fetches the server-side config first (async).
-   * Returns a Promise so callers can await full initialisation.
+   * If `widgetId` is set, fetches server config first (async).
+   * Returns a Promise so callers can `await widget.mount()`.
    */
   mount(t) {
     const e = () => {
-      const a = t || document.body;
-      this._container = document.createElement("div"), this._container.setAttribute("data-cognitiondesk", ""), a.appendChild(this._container), this._shadow = this._container.attachShadow({ mode: "open" });
+      const i = t || document.body;
+      this._container = document.createElement("div"), this._container.setAttribute("data-cognitiondesk", ""), i.appendChild(this._container), this._shadow = this._container.attachShadow({ mode: "open" });
       const s = document.createElement("style");
-      s.textContent = B, this._shadow.appendChild(s), this._buildDOM(), this._applyTheme(), this._syncViewportMetrics(), this._bindViewportMetrics(), this._bindEvents(), this._cfg.welcomeMessage && this._appendMessage("assistant", this._cfg.welcomeMessage, !1);
+      s.textContent = z, this._shadow.appendChild(s), this._buildDOM(), this._applyConfig(), this._syncViewportMetrics(), this._bindViewportMetrics(), this._bindEvents(), this._cfg.welcomeMessage && this._appendMessage("assistant", this._cfg.welcomeMessage, !1);
     };
     return this._cfg.widgetId ? this._fetchWidgetConfig().then(() => e()).catch(() => e()) : (e(), Promise.resolve(this));
   }
+  /**
+   * Programmatically update settings at runtime.
+   * Merges `newSettings` into `overrideSettings` and re-applies to the live DOM.
+   * Use this to change colors, bot name, etc. without remounting.
+   *
+   *   widget.updateSettings({ primaryColor: '#dc2626', botName: 'Support Bot' });
+   */
+  updateSettings(t) {
+    if (!t || typeof t != "object") return;
+    const e = { ...this._cfg.overrideSettings || {}, ...t };
+    this._cfg.overrideSettings = e, this._overrides = new Set(Object.keys(e)), this._applyOverrides(e), this._applyConfig();
+  }
+  /**
+   * Fetch fresh config from the dashboard right now and apply it.
+   * Useful after the user changes settings in the CognitionDesk dashboard
+   * and wants them reflected immediately without reloading the page.
+   */
+  async refreshConfig() {
+    this._cfg.widgetId && (await this._fetchWidgetConfig(), this._applyConfig());
+  }
+  // ── Config internals ────────────────────────────────────────────────────────
+  /**
+   * Returns true if `key` is explicitly controlled by `overrideSettings`.
+   * Those keys are immune to server config overwrites.
+   */
+  _userSet(t) {
+    return this._overrides.has(t);
+  }
   /**
    * Fetch public widget config from the platform and merge into this._cfg.
-   * Only fields not already overridden by the constructor are applied.
+   * Server values apply to any key NOT present in `overrideSettings`.
+   * After merging, overrides are re-applied so they always win.
    */
   async _fetchWidgetConfig() {
     var e;
     const t = `${this._cfg.backendUrl}/platforms/web-widget/public/${this._cfg.widgetId}`;
     try {
-      const a = await fetch(t);
-      if (!a.ok) return;
-      const { config: s } = await a.json();
+      const i = await fetch(t);
+      if (!i.ok) return;
+      const { config: s } = await i.json();
       if (!s) return;
-      s.botName && !this._userSet("botName") && (this._cfg.botName = s.botName), s.welcomeMessage && !this._userSet("welcomeMessage") && (this._cfg.welcomeMessage = s.welcomeMessage), s.primaryColor && !this._userSet("primaryColor") && (this._cfg.primaryColor = s.primaryColor), s.placeholder && !this._userSet("placeholder") && (this._cfg.placeholder = s.placeholder), s.assistantId && !this._cfg.assistantId && (this._cfg.assistantId = s.assistantId), (e = s.avatar) != null && e.value && !this._userSet("botEmoji") && (this._cfg.botEmoji = s.avatar.value), s.rateLimiting && (this._cfg.rateLimiting = { ...this._cfg.rateLimiting, ...s.rateLimiting });
+      const a = (n, o) => {
+        o != null && !this._userSet(n) && (this._cfg[n] = o);
+      };
+      a("botName", s.botName), a("welcomeMessage", s.welcomeMessage), a("primaryColor", s.primaryColor), a("secondaryColor", s.secondaryColor), a("placeholder", s.placeholder), a("theme", s.theme), a("position", s.position), a("style", s.style), a("size", s.size), s.assistantId && !this._cfg.assistantId && (this._cfg.assistantId = s.assistantId), (e = s.avatar) != null && e.value && !this._userSet("botEmoji") && (this._cfg.botEmoji = s.avatar.value), s.rateLimiting && (this._cfg.rateLimiting = { ...this._cfg.rateLimiting, ...s.rateLimiting }), this._cfg.overrideSettings && this._applyOverrides(this._cfg.overrideSettings);
     } catch {
     }
   }
-  // eslint-disable-next-line no-unused-vars
-  _userSet(t) {
-    return !1;
+  /**
+   * Write override values into this._cfg (flat fields only; rateLimiting is merged).
+   */
+  _applyOverrides(t) {
+    for (const [e, i] of Object.entries(t))
+      e === "rateLimiting" && typeof i == "object" ? this._cfg.rateLimiting = { ...this._cfg.rateLimiting, ...i } : this._cfg[e] = i;
+  }
+  /**
+   * Update live DOM elements to reflect the current this._cfg.
+   * Safe to call before or after mounting.
+   */
+  _applyConfig() {
+    var s, a, n, o, d, c, l;
+    const t = this._cfg.theme === "dark" || this._cfg.theme === "auto" && ((s = window.matchMedia) == null ? void 0 : s.call(window, "(prefers-color-scheme: dark)").matches);
+    (a = this._root) == null || a.classList.toggle("cd-dark", t), (n = this._root) == null || n.style.setProperty("--cd-primary", this._cfg.primaryColor), (o = this._panel) == null || o.style.setProperty("--cd-primary", this._cfg.primaryColor), (d = this._toggleBtn) == null || d.style.setProperty("--cd-primary", this._cfg.primaryColor);
+    const e = (c = this._shadow) == null ? void 0 : c.querySelector(".cd-header-avatar");
+    e && (e.textContent = this._cfg.botEmoji);
+    const i = (l = this._shadow) == null ? void 0 : l.querySelector(".cd-header-name");
+    i && (i.textContent = this._cfg.botName), this._textarea && (this._textarea.placeholder = this._cfg.placeholder);
+  }
+  /**
+   * Silently refresh config from server in the background.
+   * Called each time the panel opens so dashboard changes
+   * are reflected without reloading the page.
+   * Uses a debounce flag to avoid concurrent fetches.
+   */
+  _silentRefresh() {
+    !this._cfg.widgetId || this._refreshPending || (this._refreshPending = !0, this._fetchWidgetConfig().then(() => this._applyConfig()).catch(() => {
+    }).finally(() => {
+      this._refreshPending = !1;
+    }));
   }
   unmount() {
     this._unbindViewportMetrics(), this._container && (this._container.remove(), this._container = null);
   }
   open() {
     var t, e;
-    this._open = !0, this._syncViewportMetrics(), (t = this._panel) == null || t.classList.add("open"), (e = this._textarea) == null || e.focus();
+    this._open = !0, this._syncViewportMetrics(), (t = this._panel) == null || t.classList.add("open"), (e = this._textarea) == null || e.focus(), this._silentRefresh();
   }
   close() {
     var t;
@@ -340,9 +430,9 @@ let D = class {
     const t = document.createElement("div");
     t.className = "cd-root";
     const e = document.createElement("button");
-    e.className = "cd-widget-btn", e.innerHTML = x.chat, e.setAttribute("aria-label", "Open chat"), e.style.setProperty("--cd-primary", this._cfg.primaryColor), this._toggleBtn = e;
-    const a = document.createElement("div");
-    a.className = "cd-panel", this._panel = a;
+    e.className = "cd-widget-btn", e.innerHTML = w.chat, e.setAttribute("aria-label", "Open chat"), e.style.setProperty("--cd-primary", this._cfg.primaryColor), this._toggleBtn = e;
+    const i = document.createElement("div");
+    i.className = "cd-panel", this._panel = i;
     const s = document.createElement("div");
     s.className = "cd-header", s.innerHTML = `
       <div class="cd-header-avatar">${this._cfg.botEmoji}</div>
@@ -353,22 +443,22 @@ let D = class {
         </div>
       </div>
     `;
-    const r = document.createElement("button");
-    r.className = "cd-close-btn", r.innerHTML = x.close, r.setAttribute("aria-label", "Close chat"), s.appendChild(r), this._closeBtn = r;
+    const a = document.createElement("button");
+    a.className = "cd-close-btn", a.innerHTML = w.close, a.setAttribute("aria-label", "Close chat"), s.appendChild(a), this._closeBtn = a;
     const n = document.createElement("div");
     n.className = "cd-messages", n.setAttribute("role", "log"), n.setAttribute("aria-live", "polite"), this._messagesEl = n;
-    const d = document.createElement("div");
-    d.className = "cd-input-area";
-    const o = document.createElement("textarea");
-    o.className = "cd-textarea", o.rows = 1, o.placeholder = this._cfg.placeholder, this._textarea = o;
+    const o = document.createElement("div");
+    o.className = "cd-input-area";
+    const d = document.createElement("textarea");
+    d.className = "cd-textarea", d.rows = 1, d.placeholder = this._cfg.placeholder, this._textarea = d;
     const c = document.createElement("button");
-    c.className = "cd-send-btn", c.innerHTML = x.send, c.setAttribute("aria-label", "Send"), this._sendBtn = c, d.appendChild(o), d.appendChild(c);
+    c.className = "cd-send-btn", c.innerHTML = w.send, c.setAttribute("aria-label", "Send"), this._sendBtn = c, o.appendChild(d), o.appendChild(c);
     const l = document.createElement("div");
-    l.className = "cd-powered", l.innerHTML = 'Powered by <a href="https://cognitiondesk.com" target="_blank" rel="noopener">CognitionDesk</a>', a.appendChild(s), a.appendChild(n), a.appendChild(d), a.appendChild(l), t.appendChild(e), t.appendChild(a), this._shadow.appendChild(t), this._root = t;
+    l.className = "cd-powered", l.innerHTML = 'Powered by <a href="https://cognitiondesk.com" target="_blank" rel="noopener">CognitionDesk</a>', i.appendChild(s), i.appendChild(n), i.appendChild(o), i.appendChild(l), t.appendChild(e), t.appendChild(i), this._shadow.appendChild(t), this._root = t;
   }
   _applyTheme() {
-    var e, a, s;
-    (this._cfg.theme === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : this._cfg.theme) === "dark" && ((e = this._root) == null || e.classList.add("cd-dark")), (a = this._root) == null || a.style.setProperty("--cd-primary", this._cfg.primaryColor), (s = this._panel) == null || s.style.setProperty("--cd-primary", this._cfg.primaryColor);
+    var e, i, s;
+    (this._cfg.theme === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : this._cfg.theme) === "dark" && ((e = this._root) == null || e.classList.add("cd-dark")), (i = this._root) == null || i.style.setProperty("--cd-primary", this._cfg.primaryColor), (s = this._panel) == null || s.style.setProperty("--cd-primary", this._cfg.primaryColor);
   }
   // ── Events ──────────────────────────────────────────────────────────────────
   _bindEvents() {
@@ -389,12 +479,12 @@ let D = class {
   _syncViewportMetrics() {
     const t = this._root || this._container;
     if (!t) return;
-    const e = window.visualViewport, a = e ? e.height : window.innerHeight;
-    t.style.setProperty("--cd-viewport-height", `${Math.round(a)}px`);
+    const e = window.visualViewport, i = e ? e.height : window.innerHeight;
+    t.style.setProperty("--cd-viewport-height", `${Math.round(i)}px`);
   }
   // ── Chat ────────────────────────────────────────────────────────────────────
   async _sendMessage() {
-    var a;
+    var i;
     const t = this._textarea.value.trim();
     if (!t || this._loading) return;
     const e = this._cfg.rateLimiting;
@@ -414,13 +504,13 @@ let D = class {
       if (this._cfg.streaming)
         await this._callApiStream();
       else {
-        const s = this._showTyping(), r = await this._callApi();
-        this._removeTyping(s), this._messages.push({ role: "assistant", content: r }), this._appendMessage("assistant", r, !0);
+        const s = this._showTyping(), a = await this._callApi();
+        this._removeTyping(s), this._messages.push({ role: "assistant", content: a }), this._appendMessage("assistant", a, !0);
       }
     } catch (s) {
-      if (s.status === 429 || (a = s.message) != null && a.includes("429")) {
-        const r = s.rateLimitMessage || (e == null ? void 0 : e.rateLimitMessage) || "You're sending messages too quickly. Please wait a moment.";
-        this._appendMessage("error", r, !1);
+      if (s.status === 429 || (i = s.message) != null && i.includes("429")) {
+        const a = s.rateLimitMessage || (e == null ? void 0 : e.rateLimitMessage) || "You're sending messages too quickly. Please wait a moment.";
+        this._appendMessage("error", a, !1);
       } else
         this._appendMessage("error", "Sorry, something went wrong. Please try again.", !1);
       console.error("[CognitionDesk]", s);
@@ -448,56 +538,56 @@ let D = class {
       body: JSON.stringify({ ...this._buildRequestBody(), stream: !0 })
     });
     if (!e.ok) {
-      const o = await e.json().catch(() => ({})), c = new Error(o.message || `HTTP ${e.status}`);
-      throw c.status = e.status, c.rateLimitMessage = o.message, c;
+      const d = await e.json().catch(() => ({})), c = new Error(d.message || `HTTP ${e.status}`);
+      throw c.status = e.status, c.rateLimitMessage = d.message, c;
     }
-    const a = document.createElement("div");
-    a.className = "cd-msg assistant", a.innerHTML = '<div class="cd-typing"><span></span><span></span><span></span></div>', this._messagesEl.appendChild(a), this._scrollToBottom();
-    const s = e.body.getReader(), r = new TextDecoder();
-    let n = "", d = !1;
+    const i = document.createElement("div");
+    i.className = "cd-msg assistant", i.innerHTML = '<div class="cd-typing"><span></span><span></span><span></span></div>', this._messagesEl.appendChild(i), this._scrollToBottom();
+    const s = e.body.getReader(), a = new TextDecoder();
+    let n = "", o = !1;
     try {
       for (; ; ) {
-        const { done: o, value: c } = await s.read();
-        if (o) break;
-        const l = r.decode(c, { stream: !0 });
-        for (const g of l.split(`
+        const { done: d, value: c } = await s.read();
+        if (d) break;
+        const l = a.decode(c, { stream: !0 });
+        for (const f of l.split(`
 `)) {
-          if (!g.startsWith("data: ")) continue;
-          const m = g.slice(6).trim();
+          if (!f.startsWith("data: ")) continue;
+          const m = f.slice(6).trim();
           if (m === "[DONE]") break;
-          let h;
+          let p;
           try {
-            h = JSON.parse(m);
+            p = JSON.parse(m);
           } catch {
             continue;
           }
-          h.type === "content" && h.data && (d || (a.innerHTML = "", d = !0), n += h.data, a.innerHTML = this._renderMarkdown(n), this._scrollToBottom());
+          p.type === "content" && p.data && (o || (i.innerHTML = "", o = !0), n += p.data, i.innerHTML = this._renderMarkdown(n), this._scrollToBottom());
         }
       }
     } finally {
       s.releaseLock();
     }
-    d || (a.innerHTML = this._renderMarkdown("No response")), n && this._messages.push({ role: "assistant", content: n });
+    o || (i.innerHTML = this._renderMarkdown("No response")), n && this._messages.push({ role: "assistant", content: n });
   }
   /** Non-streaming fallback path */
   async _callApi() {
-    var s, r, n;
+    var s, a, n;
     const t = `${this._cfg.backendUrl}/chat-apiKeyAuth/chat`, e = await fetch(t, {
       method: "POST",
       headers: { "Content-Type": "application/json", "x-api-key": this._cfg.apiKey },
       body: JSON.stringify(this._buildRequestBody())
     });
     if (!e.ok) {
-      const d = await e.json().catch(() => ({})), o = new Error(d.message || `HTTP ${e.status}`);
-      throw o.status = e.status, o.rateLimitMessage = d.message, o;
+      const o = await e.json().catch(() => ({})), d = new Error(o.message || `HTTP ${e.status}`);
+      throw d.status = e.status, d.rateLimitMessage = o.message, d;
     }
-    const a = await e.json();
-    return a.response || a.message || a.content || ((n = (r = (s = a.choices) == null ? void 0 : s[0]) == null ? void 0 : r.message) == null ? void 0 : n.content) || "No response";
+    const i = await e.json();
+    return i.response || i.message || i.content || ((n = (a = (s = i.choices) == null ? void 0 : s[0]) == null ? void 0 : a.message) == null ? void 0 : n.content) || "No response";
   }
   // ── DOM helpers ─────────────────────────────────────────────────────────────
-  _appendMessage(t, e, a = !0) {
+  _appendMessage(t, e, i = !0) {
     const s = document.createElement("div");
-    s.className = `cd-msg ${t}`, a && t !== "user" ? s.innerHTML = this._renderMarkdown(e) : s.textContent = e, this._messagesEl.appendChild(s), this._scrollToBottom();
+    s.className = `cd-msg ${t}`, i && t !== "user" ? s.innerHTML = this._renderMarkdown(e) : s.textContent = e, this._messagesEl.appendChild(s), this._scrollToBottom();
   }
   /** Minimal, safe markdown → HTML renderer (no dependencies). */
   _renderMarkdown(t) {
@@ -505,7 +595,7 @@ let D = class {
     let e = this._escHtml(t);
     return e = e.replace(
       /```[\w]*\n?([\s\S]*?)```/g,
-      (a, s) => `<pre style="background:#0f172a;color:#e2e8f0;padding:10px;border-radius:6px;font-size:12px;overflow-x:auto;margin:6px 0;white-space:pre-wrap">${s.trim()}</pre>`
+      (i, s) => `<pre style="background:#0f172a;color:#e2e8f0;padding:10px;border-radius:6px;font-size:12px;overflow-x:auto;margin:6px 0;white-space:pre-wrap">${s.trim()}</pre>`
     ), e = e.replace(/`([^`]+)`/g, '<code style="background:rgba(0,0,0,.08);padding:1px 5px;border-radius:4px;font-size:.9em">$1</code>'), e = e.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>"), e = e.replace(/__([^_]+)__/g, "<strong>$1</strong>"), e = e.replace(/\*([^*]+)\*/g, "<em>$1</em>"), e = e.replace(/_([^_]+)_/g, "<em>$1</em>"), e = e.replace(
       /\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g,
       '<a href="$2" target="_blank" rel="noopener" style="color:var(--cd-primary,#2563eb)">$1</a>'
@@ -525,88 +615,96 @@ let D = class {
     return String(t).replace(/[&<>"']/g, (e) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[e]);
   }
 };
-const V = N(function(t, e) {
+const V = I(function(t, e) {
   const {
-    apiKey: a,
+    apiKey: i,
     widgetId: s,
-    assistantId: r,
+    assistantId: a,
     theme: n = "light",
-    primaryColor: d = "#2563eb",
-    botName: o = "AI Assistant",
+    primaryColor: o = "#2563eb",
+    botName: d = "AI Assistant",
     botEmoji: c = "🤖",
     welcomeMessage: l = "Hello! How can I help you today?",
-    placeholder: g = "Type a message…",
+    placeholder: f = "Type a message…",
     defaultOpen: m = !1,
-    streaming: h = !0,
-    backendUrl: w,
+    streaming: p = !0,
+    backendUrl: y,
     // Rate limiting — 0 means unlimited
-    maxMessagesPerSession: L = 0,
+    maxMessagesPerSession: S = 0,
     maxMessagesPerMinute: H = 0,
-    limitReachedMessage: v,
-    rateLimitMessage: y,
-    onOpen: f,
-    onClose: u
-  } = t, p = M(null), k = M(null);
-  return I(e, () => ({
+    limitReachedMessage: k,
+    rateLimitMessage: M,
+    onOpen: u,
+    onClose: _,
+    // Fields listed here are owned by code and won't be overwritten by
+    // dashboard config refreshes. Pass an object whose keys match widget
+    // config fields, e.g. { primaryColor: '#7c3aed', botName: 'Aria' }.
+    overrideSettings: g
+  } = t, h = E(null), C = E(null);
+  return N(e, () => ({
     open: () => {
-      var i;
-      return (i = p.current) == null ? void 0 : i.open();
+      var r;
+      return (r = h.current) == null ? void 0 : r.open();
     },
     close: () => {
-      var i;
-      return (i = p.current) == null ? void 0 : i.close();
+      var r;
+      return (r = h.current) == null ? void 0 : r.close();
     },
     toggle: () => {
-      var i;
-      return (i = p.current) == null ? void 0 : i.toggle();
+      var r;
+      return (r = h.current) == null ? void 0 : r.toggle();
     },
     clearHistory: () => {
-      var i;
-      return (i = p.current) == null ? void 0 : i.clearHistory();
+      var r;
+      return (r = h.current) == null ? void 0 : r.clearHistory();
     }
-  }), []), C(() => {
-    if (!a) {
+  }), []), x(() => {
+    if (!i) {
       console.error("[CognitionDesk] apiKey prop is required");
       return;
     }
-    const i = new D({
-      apiKey: a,
+    const r = new D({
+      apiKey: i,
       widgetId: s,
-      assistantId: r,
+      assistantId: a,
       theme: n,
-      primaryColor: d,
-      botName: o,
+      primaryColor: o,
+      botName: d,
       botEmoji: c,
       welcomeMessage: l,
-      placeholder: g,
-      streaming: h,
-      ...w ? { backendUrl: w } : {},
+      placeholder: f,
+      streaming: p,
+      ...y ? { backendUrl: y } : {},
+      ...g ? { overrideSettings: g } : {},
       rateLimiting: {
         enabled: !0,
-        maxMessagesPerSession: L,
+        maxMessagesPerSession: S,
         maxMessagesPerMinute: H,
-        ...v ? { limitReachedMessage: v } : {},
-        ...y ? { rateLimitMessage: y } : {}
+        ...k ? { limitReachedMessage: k } : {},
+        ...M ? { rateLimitMessage: M } : {}
       }
     });
-    if (f || u) {
-      const _ = i.open.bind(i), T = i.close.bind(i);
-      i.open = (...b) => {
-        _(...b), f == null || f();
-      }, i.close = (...b) => {
-        T(...b), u == null || u();
+    if (u || _) {
+      const b = r.open.bind(r), T = r.close.bind(r);
+      r.open = (...v) => {
+        b(...v), u == null || u();
+      }, r.close = (...v) => {
+        T(...v), _ == null || _();
       };
     }
-    return Promise.resolve(i.mount(k.current)).then(() => {
-      p.current = i, m && i.open();
+    return Promise.resolve(r.mount(C.current)).then(() => {
+      h.current = r, m && r.open();
     }), () => {
-      i.unmount(), p.current = null;
+      r.unmount(), h.current = null;
     };
-  }, [a, s, r]), C(() => {
-    var _;
-    const i = p.current;
-    i && (i._cfg.theme = n, i._cfg.primaryColor = d, (_ = i._applyTheme) == null || _.call(i));
-  }, [n, d]), /* @__PURE__ */ S("div", { ref: k, "data-cognitiondesk-root": "" });
+  }, [i, s, a]), x(() => {
+    var b;
+    const r = h.current;
+    r && (r._cfg.theme = n, r._cfg.primaryColor = o, (b = r._applyConfig) == null || b.call(r));
+  }, [n, o]), x(() => {
+    const r = h.current;
+    !r || !g || r.updateSettings(g);
+  }, [g]), /* @__PURE__ */ P("div", { ref: C, "data-cognitiondesk-root": "" });
 });
 export {
   V as CognitionDeskWidget,