ai12z 3.13.3 → 3.14.2

package/dist/cjs/styleSheetRegistry-7aecMygn.js

@@ -0,0 +1,175 @@
+'use strict';
+
+var utils = require('./utils-BAJarpnb.js');
+
+/**
+ * styleSheetRegistry — single source of truth for custom CSS/JS injection.
+ *
+ * APPROACH
+ * --------
+ * CSS  — One CSSStyleSheet object is constructed per URL (Constructable
+ *        Stylesheets API).  Any shadow root that needs the styles calls
+ *        adoptStyleSheet(url, shadowRoot); the same object is pushed onto
+ *        adoptedStyleSheets so the browser parses the rules exactly once,
+ *        regardless of how many roots adopt it.  The parent knowledge-box
+ *        triggers the first fetch; child chat-message calls re-use the
+ *        already-resolved Promise and adopt the cached sheet at zero cost.
+ *
+ * JS   — Scripts are injected into the caller's shadow root (or element)
+ *        exactly once per root per URL via a two-level cache: a WeakMap
+ *        tracks which URLs have been appended to each root, and a url →
+ *        Promise map shares the single load event across all roots so the
+ *        network request fires only once.  Concurrent callers await the same
+ *        load event; subsequent callers for the same URL in the same root
+ *        return immediately.
+ *
+ * SINGLE CODE PATH
+ * ----------------
+ * Both ai12z-knowledge-box and ai12z-chat-message import from this module.
+ * The parent box makes the first call (triggering the fetch / DOM append).
+ * Child calls get the cached result with no side-effects.
+ * There is no third injection point; do not add one here.
+ */
+// ---------------------------------------------------------------------------
+// CSS – Constructable Stylesheets
+// ---------------------------------------------------------------------------
+/**
+ * True when the browser supports the Constructable Stylesheets API:
+ *   - CSSStyleSheet.replace()  (required to build sheets from text)
+ *   - Document.adoptedStyleSheets  (required to attach them)
+ * Safari 15 and Safari 16.0 fail both checks; they get the <link> fallback.
+ */
+const supportsConstructable = typeof CSSStyleSheet !== 'undefined' &&
+    'replace' in CSSStyleSheet.prototype &&
+    'adoptedStyleSheets' in Document.prototype;
+const _cssCache = new Map();
+/** Per-shadow-root set of URLs already injected via the <link> fallback path. */
+const _linkFallbackCache = new WeakMap();
+/**
+ * Fetch `url` exactly once, build a CSSStyleSheet from its text, and adopt
+ * it in `shadowRoot`.  Safe to call from multiple components / shadow roots —
+ * repeated calls for the same URL share the cached sheet.
+ */
+function adoptStyleSheet(url, shadowRoot) {
+    if (!url || !shadowRoot || !utils.isValidHttpsUrl(url))
+        return Promise.resolve();
+    // ── Legacy fallback for Safari 15 / Safari 16.0 ──────────────────────────
+    // Constructable Stylesheets are not supported; append a <link> element to
+    // the shadow root instead.  The WeakMap cache ensures one <link> per URL
+    // per shadow root, mirroring the once-per-URL guarantee of the main path.
+    if (!supportsConstructable) {
+        let adopted = _linkFallbackCache.get(shadowRoot);
+        if (!adopted) {
+            adopted = new Set();
+            _linkFallbackCache.set(shadowRoot, adopted);
+        }
+        if (!adopted.has(url)) {
+            adopted.add(url);
+            const linkEl = document.createElement('link');
+            linkEl.rel = 'stylesheet';
+            linkEl.href = url;
+            shadowRoot.appendChild(linkEl);
+        }
+        return Promise.resolve();
+    }
+    // ── Constructable Stylesheets path (Chrome, Firefox, Safari 16.4+) ────────
+    if (!_cssCache.has(url)) {
+        const sheetPromise = fetch(url)
+            .then(r => {
+            if (!r.ok)
+                throw new Error(`[ai12z] adoptStyleSheet: HTTP ${r.status} for ${url}`);
+            return r.text();
+        })
+            .then(css => {
+            const sheet = new CSSStyleSheet();
+            return sheet.replace(css).then(() => sheet);
+        })
+            .catch(err => {
+            _cssCache.delete(url); // allow a retry on next call
+            return Promise.reject(err);
+        });
+        _cssCache.set(url, sheetPromise);
+    }
+    return _cssCache.get(url)
+        .then(sheet => {
+        if (!shadowRoot.adoptedStyleSheets.includes(sheet)) {
+            shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, sheet];
+        }
+    })
+        .catch(err => {
+        console.error('[ai12z] adoptStyleSheet failed for', url, err);
+    });
+}
+// ---------------------------------------------------------------------------
+// JS – shadow-root-level, exactly-once injection per root
+// ---------------------------------------------------------------------------
+/**
+ * Global load-event cache: url → Promise.  The network request fires only
+ * once regardless of how many roots call loadScriptOnce for the same URL.
+ */
+const _scriptLoadCache = new Map();
+/**
+ * Per-root injection tracker: mirrors _linkFallbackCache for CSS.
+ * Ensures each shadow root / element gets the <script> appended exactly once.
+ */
+const _scriptRootCache = new WeakMap();
+/**
+ * Append `url` as a <script> into `el` (shadow root or element) exactly once
+ * per root per URL.  The underlying network request is shared across all roots
+ * via a url → Promise cache, so the script is only fetched once.
+ */
+function loadScriptOnce(url, el) {
+    if (!url || !utils.isValidHttpsUrl(url)) {
+        if (url)
+            console.warn('[ai12z] Blocked script injection — URL must use HTTPS.', url);
+        return Promise.resolve();
+    }
+    // ── Per-root deduplication ──────────────────────────────────────────────
+    let rootSet = _scriptRootCache.get(el);
+    if (!rootSet) {
+        rootSet = new Set();
+        _scriptRootCache.set(el, rootSet);
+    }
+    if (rootSet.has(url)) {
+        // Already injected into this root.  Return the shared load Promise.
+        // If the load cache no longer has an entry (stale rootSet marker after a
+        // previous error), remove it and fall through to re-inject rather than
+        // resolving early and letting callers assume the script is ready.
+        const cached = _scriptLoadCache.get(url);
+        if (cached)
+            return cached;
+        rootSet.delete(url);
+    }
+    rootSet.add(url);
+    // ── Append script element into this root ────────────────────────────────
+    if (!_scriptLoadCache.has(url)) {
+        // First root to request this URL — track the load event.
+        const p = new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = url;
+            script.async = false;
+            script.onload = () => resolve();
+            script.onerror = () => reject(new Error(`[ai12z] Failed to load script: ${url}`));
+            el.appendChild(script);
+        });
+        _scriptLoadCache.set(url, p.catch(err => {
+            _scriptLoadCache.delete(url);
+            rootSet.delete(url);
+            return Promise.reject(err);
+        }));
+    }
+    else {
+        // Already loading/loaded globally; inject into this root without a new
+        // load listener (the shared Promise already tracks completion).
+        const script = document.createElement('script');
+        script.src = url;
+        script.async = false;
+        el.appendChild(script);
+    }
+    return _scriptLoadCache.get(url).catch(err => {
+        console.warn('[ai12z] loadScriptOnce:', err);
+    });
+}
+
+exports.adoptStyleSheet = adoptStyleSheet;
+exports.loadScriptOnce = loadScriptOnce;

package/dist/collection/components/ai12z-bot/ai12z-bot.js

@@ -375,6 +375,7 @@ export class Ai12zBot {
                 if (currentDomElement) {
                     // Append the agent event messages to the current message bubble
                     currentDomElement.parentNode.appendChild(agentEventMessages);
+                    this.currentDomId = "";
                     return agentEventMessages;
                 }
             }
@@ -424,9 +425,6 @@ export class Ai12zBot {
         this.agentEventHandler = event => {
             this.isTypingIndicatorVisible = false;
             if ((event === null || event === void 0 ? void 0 : event.length) > 0) {
-                if (this.isLiveAgentEnabled && this.currentDomId === "") {
-                    this.currentDomId = this.messages[this.messages.length - 1].id;
-                }
                 // Persist each system event into this.messages so they survive page reload
                 const systemMessages = event.map((evt) => ({
                     id: evt.id || `system-${generateUUID()}`,
@@ -468,6 +466,16 @@ export class Ai12zBot {
             this.isLiveAgent = true;
             this.updateBotState();
         };
+        this.handleAgentUnavailable = () => {
+            this.addEventMessage("Live Agent is currently unavailable. Please try again later.");
+            this.isTypingIndicatorVisible = false;
+            this.isLiveAgent = false;
+            this.liveAgentSessionId = "";
+            this.liveAgentConversationId = "";
+            this.updateBotState();
+            this.announce("Live agent is currently unavailable");
+            this.clearEvents();
+        };
         this.toggleBot = _e => {
             // e.stopPropagation()
             this.isToggled = !this.isToggled;
@@ -1140,6 +1148,9 @@ export class Ai12zBot {
         this.socket.on(endEvent, async (rawData) => {
             // For v2, adapt the response format to match legacy expectations
             const data = protocol === "v2" ? adaptCompleteToLegacy(rawData) : rawData;
+            if (data.showInput !== undefined && typeof data.showInput === "boolean") {
+                this.botSettings.showInput = data.showInput;
+            }
             this.unreadCount++;
             const { id, idChanged, orphaned } = ensureMessageId(this.currentDomId, this.messages, "chatbot");
             this.currentDomId = id;
@@ -1623,7 +1634,9 @@ export class Ai12zBot {
         this.liveAgentSessionId = "";
         this.liveAgentConversationId = "";
         this.liveAgentButtonText = "Talk to a Live Agent";
-        this.sendMessage(((_a = this.botSettings) === null || _a === void 0 ? void 0 : _a.llmMessageOnDisconnect) !== "" ? (_b = this.botSettings) === null || _b === void 0 ? void 0 : _b.llmMessageOnDisconnect : "The live agent has been disconnected. Please do not initiate the live agent directive again.", ((_c = this.botSettings) === null || _c === void 0 ? void 0 : _c.userMessageOnDisconnect) !== "" ? (_d = this.botSettings) === null || _d === void 0 ? void 0 : _d.userMessageOnDisconnect : "The live agent has ended the conversation.", { isLiveChatEnded: true });
+        this.sendMessage(((_a = this.botSettings) === null || _a === void 0 ? void 0 : _a.llmMessageOnDisconnect) !== ""
+            ? (_b = this.botSettings) === null || _b === void 0 ? void 0 : _b.llmMessageOnDisconnect
+            : "The live agent has been disconnected. Please do not initiate the live agent directive again.", ((_c = this.botSettings) === null || _c === void 0 ? void 0 : _c.userMessageOnDisconnect) !== "" ? (_d = this.botSettings) === null || _d === void 0 ? void 0 : _d.userMessageOnDisconnect : "The live agent has ended the conversation.", { isLiveChatEnded: true });
         this.announce("Live agent chat ended");
         this.clearEvents();
     }
@@ -1644,6 +1657,7 @@ export class Ai12zBot {
         this.liveAgentListenersRegistered = true;
         ChatEventBus.on("FINDING_AGENT", this.findingAgent);
         ChatEventBus.on("AGENT_EVENT", this.agentEventHandler);
+        ChatEventBus.on("AGENT_UNAVAILABLE", this.handleAgentUnavailable);
         ChatEventBus.on("TYPING_STARTED", this.handleTypingStarted);
         ChatEventBus.on("TYPING_STOPPED", this.handleTypingStopped);
         ChatEventBus.on("AGENT_MESSAGE", this.agentMessageCreated);
@@ -1655,6 +1669,7 @@ export class Ai12zBot {
         this.liveAgentListenersRegistered = false;
         ChatEventBus.off("FINDING_AGENT", this.findingAgent);
         ChatEventBus.off("AGENT_EVENT", this.agentEventHandler);
+        ChatEventBus.off("AGENT_UNAVAILABLE", this.handleAgentUnavailable);
         ChatEventBus.off("AGENT_MESSAGE", this.agentMessageCreated);
         ChatEventBus.off("AGENT_ERROR", this.handleAgentError);
         ChatEventBus.off("CONVERSATION_CLOSED", this.handleAgentConversationEnded);
@@ -1866,7 +1881,7 @@ export class Ai12zBot {
         }
     }
     render() {
-        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _w, _x, _y;
+        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _w, _x, _y, _z;
         if (!this.canRender) {
             return (h(Host, null, h("span", { style: { display: "none" } }, "Failed to load ai12z bot control due to insufficient fund")));
         }
@@ -1949,7 +1964,11 @@ export class Ai12zBot {
                         "opacity-90": !this.isProse,
                         "max-w-full break-words @md:text-body2 box-border @md:pr-4 flex-1 rounded-lg text-gray-30 pr-2 text-body3": true,
                     }, innerHTML: message.text, id: message.id }, message.isLoading && (h("div", { class: "w-full rounded-md", id: "spinner" }, h("div", { class: "flex animate-pulse space-x-4" }, h("div", { class: "flex-1 space-y-3 py-1" }, h("div", { class: "h-4 rounded bg-gray-200" }), h("div", { class: "space-y-3" }, h("div", { class: "grid grid-cols-3 gap-4" }, h("div", { class: "col-span-2 h-4 rounded bg-gray-200" }), h("div", { class: "col-span-1 h-4 rounded bg-gray-200" })), h("div", { class: "h-4 rounded bg-gray-200" }))))))), message.text !== "" && message.showIcon && ((_c = this.botSettings.showMessageIcons) !== null && _c !== void 0 ? _c : true) && (h("interaction-buttons", { message: message, chatArray: this.messages, currentIndex: idx, dataKey: this.dataKey, dataMode: this.dataMode, voice: this.voice, voiceType: this.voiceType, source: "bot", conversationId: this.conversationId, projectId: ((_d = this.botSettings) === null || _d === void 0 ? void 0 : _d.pId) || "" })), h("div", { class: "text-gray-30 pt-2 text-body4" }, this.botSettings.botName, " \u2022 ", message.timestamp)))));
-            }), this.showHistory && (h("chatbot-history", { chatList: this.conversationHistory, botName: (_s = this.botSettings) === null || _s === void 0 ? void 0 : _s.botName, styles: this.customStyle, scripts: this.customJS })), h("div", { class: "h-px pt-2px", style: { overflowAnchor: "auto" } })), h("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", class: "sr-only" }, this.announceMessage)))), h("form", { "data-testid": "user-input", class: `relative pointer-events-auto ${this.isOpened ? "p-2.5" : ""} searchform user-input`, "aria-label": "Message Area", "aria-hidden": "false", style: { opacity: !this.isMinimized ? "1" : "0", transform: "translateX(0)", pointerEvents: !this.isMinimized ? "auto" : "none" } }, !this.isOpened && (h("div", { class: `absolute right-4 md:right-0 border-2 border-white border-solid rounded-full ${this.isContent ? "" : "top-0"} minimize-input` }, h("button", { class: "rounded-full flex items-center justify-center disabled:cursor-not-allowed bg-gray-500 bg-opacity-60 hover:bg-opacity-80 h-5 w-5 bot-btn-primary", "aria-label": "Minimize Bot", tabindex: "0", onClick: e => {
+            }), this.showHistory && (h("chatbot-history", { chatList: this.conversationHistory, botName: (_s = this.botSettings) === null || _s === void 0 ? void 0 : _s.botName, styles: this.customStyle, scripts: this.customJS })), h("div", { class: "h-px pt-2px", style: { overflowAnchor: "auto" } })), h("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", class: "sr-only" }, this.announceMessage)))), ((_t = this.botSettings) === null || _t === void 0 ? void 0 : _t.showInput) !== false && (h("form", { "data-testid": "user-input", class: `relative pointer-events-auto ${this.isOpened ? "p-2.5" : ""} searchform user-input`, "aria-label": "Message Area", "aria-hidden": "false", style: {
+                opacity: !this.isMinimized ? "1" : "0",
+                transform: "translateX(0)",
+                pointerEvents: !this.isMinimized ? "auto" : "none",
+            } }, !this.isOpened && (h("div", { class: `absolute right-4 md:right-0 border-2 border-white border-solid rounded-full ${this.isContent ? "" : "top-0"} minimize-input` }, h("button", { class: "rounded-full flex items-center justify-center disabled:cursor-not-allowed bg-gray-500 bg-opacity-60 hover:bg-opacity-80 h-5 w-5 bot-btn-primary", "aria-label": "Minimize Bot", tabindex: "0", onClick: e => {
                 e.preventDefault();
                 this.isMinimized = !this.isMinimized;
                 this.isOpened = !this.isMinimized;
@@ -1981,12 +2000,12 @@ export class Ai12zBot {
                 .filter(Boolean)
                 .join(" "), "aria-placeholder": this.isLiveAgent
                 ? "Type a message to the agent..."
-                : ((_t = this.botSettings) === null || _t === void 0 ? void 0 : _t.botPlaceholderText) !== ""
-                    ? (_u = this.botSettings) === null || _u === void 0 ? void 0 : _u.botPlaceholderText
+                : ((_u = this.botSettings) === null || _u === void 0 ? void 0 : _u.botPlaceholderText) !== ""
+                    ? (_w = this.botSettings) === null || _w === void 0 ? void 0 : _w.botPlaceholderText
                     : "Ask me anything", "aria-label": "Type your message here", class: `resize-none overflow-hidden text-ellipsis focus:outline-none w-full custom-input ${this.hideAllButtons ? "hidden" : ""}`, "data-testid": "user-input-textarea", rows: this.rowCount, name: "userMessage", placeholder: this.isLiveAgent
                 ? "Type a message to the agent..."
-                : ((_w = this.botSettings) === null || _w === void 0 ? void 0 : _w.botPlaceholderText) !== ""
-                    ? (_x = this.botSettings) === null || _x === void 0 ? void 0 : _x.botPlaceholderText
+                : ((_x = this.botSettings) === null || _x === void 0 ? void 0 : _x.botPlaceholderText) !== ""
+                    ? (_y = this.botSettings) === null || _y === void 0 ? void 0 : _y.botPlaceholderText
                     : "Ask me anything", ref: el => (this.inputEl = el), onKeyUp: _e => {
                 this.adjustHeight();
             }, onKeyDown: e => {
@@ -2038,7 +2057,7 @@ export class Ai12zBot {
                 this.isOpened = true;
                 this.isContent = false;
                 this.handleSend(button.label);
-            } }, button.label)))))))), h("div", {
+            } }, button.label))))))))), h("div", {
             // slot="bot"
             class: "pointer-events-auto fixed right-7 whitespace-nowrap transition-transform duration-300 ease-in-out fab", style: {
                 opacity: this.isMinimized ? "1" : "0",
@@ -2048,8 +2067,8 @@ export class Ai12zBot {
             }, onClick: () => {
                 this.openChat();
             }
-        }, this.isBot && h("slot", { name: "bot" }), !this.isBot && (h("button", { class: "rounded-full flex cursor-pointer items-center pr-[14px]  md:gap-x-3 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-focused bot-btn-primary", tabindex: "0", "aria-label": "open Bot" }, h("div", { class: "w-10 h-10 flex items-center justify-center bg-white rounded-full border relative" }, this.botSettings.botLaunchIcon && h("img", { src: this.botSettings.botLaunchIcon, alt: "bot icon", class: "w-8 h-8 rounded-lg" }), !this.botSettings.botLaunchIcon && (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "#2095ae", "aria-hidden": "true" }, h("g", { "stroke-width": "0" }), h("g", { "stroke-linecap": "round", "stroke-linejoin": "round" }), h("g", null, " ", h("path", { d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", stroke: "#2095ae", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), " ")))), h("span", { class: "bot-name" }, " ", (_y = this.botSettings) === null || _y === void 0 ? void 0 :
-            _y.botName, " ")))))), h("keyboard-shortcuts-dialog", { show: this.showShortcutsDialog, shortcuts: this.shortcuts, onCloseDialog: () => {
+        }, this.isBot && h("slot", { name: "bot" }), !this.isBot && (h("button", { class: "rounded-full flex cursor-pointer items-center pr-[14px]  md:gap-x-3 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-focused bot-btn-primary", tabindex: "0", "aria-label": "open Bot" }, h("div", { class: "w-10 h-10 flex items-center justify-center bg-white rounded-full border relative" }, this.botSettings.botLaunchIcon && h("img", { src: this.botSettings.botLaunchIcon, alt: "bot icon", class: "w-8 h-8 rounded-lg" }), !this.botSettings.botLaunchIcon && (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "#2095ae", "aria-hidden": "true" }, h("g", { "stroke-width": "0" }), h("g", { "stroke-linecap": "round", "stroke-linejoin": "round" }), h("g", null, " ", h("path", { d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", stroke: "#2095ae", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), " ")))), h("span", { class: "bot-name" }, " ", (_z = this.botSettings) === null || _z === void 0 ? void 0 :
+            _z.botName, " ")))))), h("keyboard-shortcuts-dialog", { show: this.showShortcutsDialog, shortcuts: this.shortcuts, onCloseDialog: () => {
                 this.showShortcutsDialog = false;
             } }), h("delete-confirmation-modal", { show: this.showLiveAgentEndDialog, dialogTitle: "End live agent chat?", message: "You are about to end the current live agent conversation. You can continue chatting with the bot after ending it.", confirmButtonText: "End", onConfirmDelete: () => {
                 this.confirmEndLiveAgent();

package/dist/collection/components/ai12z-knowledge-box/ai12z-knowledge-box.js

@@ -1,5 +1,6 @@
 import { h, Env } from "@stencil/core";
-import { sendFeedback, getConfig, submitForm, insertStyles, isValidHttpsUrl } from "../../utils/utils";
+import { sendFeedback, getConfig, submitForm } from "../../utils/utils";
+import { adoptStyleSheet, loadScriptOnce } from "../../utils/styleSheetRegistry";
 import { io } from "socket.io-client";
 import showdown from "showdown";
 import { getEndpoint, getBackendProtocol, generateUUID, updateButtonEvents, splitContentMultiple, getMetaInfo } from "../../utils/utils";
@@ -31,7 +32,6 @@ export class Ai12zKnowledgeBox {
         this.welcomeReady = true;
         this.cdnPath = "https://cdn.ai12z.net/assets/kb";
         this.initializeScript = id => {
-            console.log("Initializing script for ID:", id);
             setTimeout(() => {
                 this.initializeScripts.emit({ id });
             }, 1000);
@@ -234,7 +234,7 @@ export class Ai12zKnowledgeBox {
         };
         getConfig(payload, this.dataMode)
             .then(async (data) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e;
             if (data) {
                 this.kbSettings = data;
                 switch ((_a = this.kbSettings) === null || _a === void 0 ? void 0 : _a.questionType) {
@@ -254,10 +254,10 @@ export class Ai12zKnowledgeBox {
                         this.addEventListeners(`.ai12z-kb-wrapper`);
                         const welcomeLoads = [];
                         if ((_d = this.kbSettings.welcome) === null || _d === void 0 ? void 0 : _d.scripts) {
-                            welcomeLoads.push(this.insertScriptAsync(this.kbSettings.welcome.scripts));
+                            welcomeLoads.push(loadScriptOnce(this.kbSettings.welcome.scripts, this.el.shadowRoot));
                         }
                         if ((_e = this.kbSettings.welcome) === null || _e === void 0 ? void 0 : _e.styles) {
-                            welcomeLoads.push(this.insertStylesAsync(this.kbSettings.welcome.styles));
+                            welcomeLoads.push(adoptStyleSheet(this.kbSettings.welcome.styles, this.el.shadowRoot));
                         }
                         if (welcomeLoads.length > 0) {
                             await Promise.all(welcomeLoads);
@@ -279,18 +279,10 @@ export class Ai12zKnowledgeBox {
                     document.head.appendChild(linkEl);
                 }
                 if (this.kbSettings.customCSS) {
-                    this.insertStyles(this.kbSettings.customCSS);
+                    adoptStyleSheet(this.kbSettings.customCSS, this.el.shadowRoot);
                 }
                 if (this.kbSettings.customJS) {
-                    if (!isValidHttpsUrl(this.kbSettings.customJS)) {
-                        console.warn("[ai12z] Blocked customJS injection: URL must use HTTPS.", this.kbSettings.customJS);
-                    }
-                    else {
-                        const scriptEl = document.createElement("script");
-                        scriptEl.setAttribute("type", "text/javascript");
-                        scriptEl.setAttribute("src", this.kbSettings.customJS);
-                        (_f = this.el.shadowRoot) === null || _f === void 0 ? void 0 : _f.appendChild(scriptEl);
-                    }
+                    loadScriptOnce(this.kbSettings.customJS, this.el.shadowRoot);
                 }
             }
         })
@@ -300,49 +292,6 @@ export class Ai12zKnowledgeBox {
             this.errored.emit(error);
         });
     }
-    insertStyles(linkURL) {
-        const linkEl = document.createElement("link");
-        linkEl.setAttribute("rel", "stylesheet");
-        linkEl.setAttribute("href", linkURL);
-        const shadowRoot = this.el.shadowRoot;
-        if (shadowRoot) {
-            shadowRoot.appendChild(linkEl);
-        }
-    }
-    insertStylesAsync(linkURL) {
-        return new Promise(resolve => {
-            const shadowRoot = this.el.shadowRoot;
-            if (!shadowRoot) {
-                resolve();
-                return;
-            }
-            const linkEl = document.createElement("link");
-            linkEl.setAttribute("rel", "stylesheet");
-            linkEl.setAttribute("href", linkURL);
-            linkEl.addEventListener("load", () => resolve());
-            linkEl.addEventListener("error", () => resolve());
-            shadowRoot.appendChild(linkEl);
-        });
-    }
-    insertScriptAsync(scriptURL) {
-        if (!isValidHttpsUrl(scriptURL)) {
-            console.warn("[ai12z] Blocked script injection: URL must use HTTPS.", scriptURL);
-            return Promise.resolve();
-        }
-        return new Promise(resolve => {
-            const shadowRoot = this.el.shadowRoot;
-            if (!shadowRoot) {
-                resolve();
-                return;
-            }
-            const scriptEl = document.createElement("script");
-            scriptEl.setAttribute("type", "text/javascript");
-            scriptEl.setAttribute("src", scriptURL);
-            scriptEl.addEventListener("load", () => resolve());
-            scriptEl.addEventListener("error", () => resolve());
-            shadowRoot.appendChild(scriptEl);
-        });
-    }
     getResults(type) {
         var _a, _b;
         // console.log("Getting results for question:", this.question)
@@ -456,9 +405,14 @@ export class Ai12zKnowledgeBox {
         }
     }
     componentWillLoad() {
-        insertStyles(`https://cdn.ai12z.net/assets/bot/v2/tailwind.min.css`, this.el);
+        adoptStyleSheet(`https://cdn.ai12z.net/assets/bot/v2/tailwind.min.css`, this.el.shadowRoot);
         this.socketConnection();
         this.getConfig();
+        const w = window;
+        if (!w.ai12z)
+            w.ai12z = {};
+        if (!w.ai12zChat)
+            w.ai12zChat = w.ai12z;
     }
     disconnectedCallback() {
         if (this.socket) {
@@ -647,7 +601,7 @@ export class Ai12zKnowledgeBox {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '3cdd49ad1529a41420730a5e7e557c4947cd7ff5', class: "ai12z-kb-wrapper" }, this.error ? h("p", { class: "ai12z-suggest-error-msg" }, "Error please try again!") : null, this.items.map(item => {
+        return (h("div", { key: 'f26a34215a56acd7d3f393a4f0d23727c74ba40a', class: "ai12z-kb-wrapper" }, this.error ? h("p", { class: "ai12z-suggest-error-msg" }, "Error please try again!") : null, this.items.map(item => {
             var _a, _b, _c, _d;
             return (h("div", { class: "prose max-w-none ai12z-suggest-container" }, h("div", null, h("div", null, h("div", { class: "flex flex-row gap-1" }, h("div", { class: "flex items-center gap-2 mb-3", style: { width: "90%" } }, ((_a = this.kbSettings) === null || _a === void 0 ? void 0 : _a.showTitle) && (h("svg", { width: "28", height: "28", viewBox: "0 0 48 48", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", class: "diamond-icon" + (this.isLoading && !this.finalResponse ? " loading" : "") }, h("path", { d: "M24 2c-3 8-8 13-16 16 8 3 13 8 16 16 3-8 8-13 16-16-8-3-13-8-16-16z" }))), ((_b = this.kbSettings) === null || _b === void 0 ? void 0 : _b.showTitle) && (h("h5", { class: "text-lg font-semibold text-gray-800 m-0" }, !this.finalResponse ? "Generating..." : (_c = this.kbSettings.title) !== null && _c !== void 0 ? _c : "AI Overview"))), item.thumbsUpDown && !this.isLoading && (h("div", null, h("button", { id: `thumbsUp_${item.insightId}`, onClick: () => {
                     var _a;
@@ -668,7 +622,7 @@ export class Ai12zKnowledgeBox {
                         questionText: this.question,
                     });
                 }, class: "chat-thumbs-down", "aria-label": "Thumbs Down" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "w-6 h-6" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M7.498 15.25H4.372c-1.026 0-1.945-.694-2.054-1.715a12.137 12.137 0 0 1-.068-1.285c0-2.848.992-5.464 2.649-7.521C5.287 4.247 5.886 4 6.504 4h4.016a4.5 4.5 0 0 1 1.423.23l3.114 1.04a4.5 4.5 0 0 0 1.423.23h1.294M7.498 15.25c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.75 2.25 2.25 0 0 0 9.75 22a.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384m-10.253 1.5H9.7m8.075-9.75c.01.05.027.1.05.148.593 1.2.925 2.55.925 3.977 0 1.487-.36 2.89-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398-.306.774-1.086 1.227-1.918 1.227h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54" }))))))), !this.isLoading && (h("div", null, ((_d = this.searchResults) === null || _d === void 0 ? void 0 : _d.controlType) !== "form" && (h("ai12z-chat-message", { id: item.id, text: this.currentStreamingText, kbSettings: this.kbSettings, "show-button": this.showButton, streaming: this.isStreaming && item.id === this.domId })), h("div", { class: { "ai12z-suggest-relevance": true, "ai12z-suggest-hide": !item["isRelevance"] } }, h("a", { href: "" }, item["relevanceScore"])), h("div", { class: "custom-privacy" }, h("slot", { name: "custom-privacy" })))), this.isLoading && (h("div", { class: "w-full rounded-md", id: "spinner" }, h("div", { class: "flex animate-pulse space-x-4" }, h("div", { class: "flex-1 space-y-3 py-1" }, h("div", { class: "h-4 rounded bg-gray-200" }), h("div", { class: "space-y-3" }, h("div", { class: "grid grid-cols-3 gap-4" }, h("div", { class: "col-span-2 h-4 rounded bg-gray-200" }), h("div", { class: "col-span-1 h-4 rounded bg-gray-200" })), h("div", { class: "h-4 rounded bg-gray-200" })))))))));
-        }), ((_a = this.kbSettings) === null || _a === void 0 ? void 0 : _a.questionType) === "staticHtml" && this.items.length === 0 && this.welcomeReady && (h("div", { key: '44a9c38a2e21f6dac59d9f587deeb205db57a913', class: "ai12z-suggest-answer", innerHTML: (_b = this.kbSettings.welcome) === null || _b === void 0 ? void 0 : _b.message }))));
+        }), ((_a = this.kbSettings) === null || _a === void 0 ? void 0 : _a.questionType) === "staticHtml" && this.items.length === 0 && this.welcomeReady && (h("div", { key: '340c562562715563715e5a103019dd19458c994f', class: "ai12z-suggest-answer", innerHTML: (_b = this.kbSettings.welcome) === null || _b === void 0 ? void 0 : _b.message }))));
     }
     static get is() { return "ai12z-knowledge-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ai12z-knowledge-box/components/ai12z-chat-message.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { initializeScript as initializeScriptHelper } from "../../../utils/botHelpers/botHelpers";
-import { insertStyles } from "../../../utils/utils";
+import { adoptStyleSheet, loadScriptOnce } from "../../../utils/styleSheetRegistry";
 export class Ai12zChatMessage {
     constructor() {
         this.text = ""; // incoming markdown/html
@@ -49,69 +49,39 @@ export class Ai12zChatMessage {
     }
     componentWillLoad() {
         var _a, _b;
+        this.loadScriptsSequentially();
+        // Adopt customCSS in this shadow root using the shared CSSStyleSheet
+        // already constructed by the parent knowledge-box (zero extra fetches).
         if ((_a = this.kbSettings) === null || _a === void 0 ? void 0 : _a.customCSS) {
-            insertStyles(this.kbSettings.customCSS, this.el);
+            adoptStyleSheet(this.kbSettings.customCSS, this.el.shadowRoot);
         }
         if ((_b = this.kbSettings) === null || _b === void 0 ? void 0 : _b.customJS) {
-            this.loadScript(this.kbSettings.customJS);
+            loadScriptOnce(this.kbSettings.customJS, this.el.shadowRoot);
         }
-        this.loadScriptsSequentially();
     }
     componentDidLoad() {
-        // Initialize ai12z global object if it doesn't exist, but DON'T reset it
+        // Initialise the ai12z global exactly once; never overwrite an existing value.
         if (!window["ai12z"]) {
             window["ai12z"] = {};
         }
         const ai12zHeading = document.createElement("script");
-        ai12zHeading.text = `
-      var ai12zChat = window["ai12z"] = {}
-    `;
-        document.head.appendChild(ai12zHeading);
+        ai12zHeading.text = `var ai12zChat = window["ai12z"] = {}`;
         this.el.shadowRoot.appendChild(ai12zHeading);
         this.checkOverflow();
-        this.injectCustomAssets();
-    }
-    injectCustomAssets() {
-        var _a, _b;
-        if ((_a = this.kbSettings) === null || _a === void 0 ? void 0 : _a.customCSS) {
-            insertStyles(this.kbSettings.customCSS, this.el);
-        }
-        if ((_b = this.kbSettings) === null || _b === void 0 ? void 0 : _b.customJS) {
-            this.loadScript(this.kbSettings.customJS).catch(err => console.warn('customJS load failed:', err));
-        }
     }
     async loadScriptsSequentially() {
         try {
-            // 2. Load Survey Core
-            await this.loadScript(`${this.surveyCDNPath}/survey-core@2.3.4/survey.core.min.js`);
-            // 3. Load Survey i18n
-            await this.loadScript(`${this.surveyCDNPath}/survey-core@2.3.4/survey.i18n.min.js`);
-            // 4. Load Survey themes
-            await this.loadScript(`${this.surveyCDNPath}/survey-core@2.3.4/themes/index.min.js`);
-            // 6. Load Survey UI
-            await this.loadScript(`${this.surveyCDNPath}/survey-js-ui@2.3.4/survey-js-ui.min.js`);
-            // console.log("All Survey.js scripts loaded successfully")
+            // Survey.js scripts are loaded into shadowRoot exactly once
+            // (loadScriptOnce deduplicates across all component instances).
+            await loadScriptOnce(`${this.surveyCDNPath}/survey-core@2.3.4/survey.core.min.js`, this.el.shadowRoot);
+            await loadScriptOnce(`${this.surveyCDNPath}/survey-core@2.3.4/survey.i18n.min.js`, this.el.shadowRoot);
+            await loadScriptOnce(`${this.surveyCDNPath}/survey-core@2.3.4/themes/index.min.js`, this.el.shadowRoot);
+            await loadScriptOnce(`${this.surveyCDNPath}/survey-js-ui@2.3.4/survey-js-ui.min.js`, this.el.shadowRoot);
         }
         catch (error) {
             console.error("Failed to load Survey.js scripts:", error);
         }
     }
-    loadScript(src) {
-        return new Promise((resolve, reject) => {
-            if (document.querySelector(`script[src="${src}"]`)) {
-                resolve();
-                return;
-            }
-            const script = document.createElement("script");
-            script.src = src;
-            script.async = false;
-            script.onload = () => resolve();
-            script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
-            // Load in document head for global access
-            // document.head.appendChild(script)
-            this.el.shadowRoot.appendChild(script);
-        });
-    }
     onTextChange() {
         // if (!this.isExpanded && !this.streaming) {
         //   this.updateCollapsedHeight();
@@ -179,9 +149,9 @@ export class Ai12zChatMessage {
     render() {
         var _a, _b, _c, _d;
         const lineClamp = (_b = (_a = this.kbSettings) === null || _a === void 0 ? void 0 : _a.numberOfLines) !== null && _b !== void 0 ? _b : 10;
-        return (h("div", { key: 'a4fe4839e87dc21f62d4f640ae51e90f4fafe1ed', class: "chat-message" }, h("div", { key: '73bf7a3062733de61360dbc1d9290765898303ec', ref: (el) => this.messageRef = el, class: { 'message-text': true, "custom-line-clamp": !this.isExpanded && !this.isCollapsing && this.showButton }, style: {
+        return (h("div", { key: '54f51ffb7c06bbb20fc1088c0fb63a8669d7ba45', class: "chat-message" }, h("div", { key: '281bc75361bcfadb4611eefeb9697d525b9e2d27', ref: (el) => this.messageRef = el, class: { 'message-text': true, "custom-line-clamp": !this.isExpanded && !this.isCollapsing && this.showButton }, style: {
                 "--line-clamp": `${lineClamp}`,
-            }, innerHTML: this.text, onClick: this.showButton ? this.toggleExpand : undefined }), !this.isExpanded && this.showButton && this.canExpand && h("div", { key: '00dfb0fb141261e775cf9188775fa4ada9591bfa', class: "fade-overlay" }), this.showButton && this.canExpand && h("button", { key: '4a1401b8dc7f8b23ea85e509e93b1c80ecfcea15', class: "show-more-btn", onClick: this.toggleExpand }, this.isExpanded ? (((_c = this.kbSettings) === null || _c === void 0 ? void 0 : _c.showLessButtonLabel) || "Show less") : (((_d = this.kbSettings) === null || _d === void 0 ? void 0 : _d.showMoreButtonLabel) || "Show more"), this.isExpanded ? h("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })) : h("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "18 15 12 9 6 15" })))));
+            }, innerHTML: this.text, onClick: this.showButton ? this.toggleExpand : undefined }), !this.isExpanded && this.showButton && this.canExpand && h("div", { key: 'd6e262dbca0934b97fafb3dd7723b3b9333d8e10', class: "fade-overlay" }), this.showButton && this.canExpand && h("button", { key: 'e1e711b71656763ecdeb1cb6f73166528f023914', class: "show-more-btn", onClick: this.toggleExpand }, this.isExpanded ? (((_c = this.kbSettings) === null || _c === void 0 ? void 0 : _c.showLessButtonLabel) || "Show less") : (((_d = this.kbSettings) === null || _d === void 0 ? void 0 : _d.showMoreButtonLabel) || "Show more"), this.isExpanded ? h("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })) : h("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "18 15 12 9 6 15" })))));
     }
     static get is() { return "ai12z-chat-message"; }
     static get encapsulation() { return "shadow"; }