ai12z 3.15.1 → 3.16.1-alpha.2

package/dist/cjs/{SearchResult-DirxAsMi.js → SearchResult-CvTJr55G.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Ct2DwlDF.js');
+var index = require('./index-v8T1EJAJ.js');
 
 function SearchResult(props) {
     let results = props.results || props;

package/dist/cjs/ai12z-bot.cjs.entry.js

@@ -1,20 +1,20 @@
 'use strict';
 
-var index = require('./index-Ct2DwlDF.js');
+var index = require('./index-v8T1EJAJ.js');
 var responseAdapter = require('./response-adapter-CKKyyhMj.js');
-var processCarouselData = require('./processCarouselData-6FLCPOVT.js');
-var logger$1 = require('./logger-B_JTV5L8.js');
-var utils = require('./utils-BkemWeq3.js');
-var index$1 = require('./index-7yvwbcAl.js');
+var processCarouselData = require('./processCarouselData-kCVPE4mw.js');
+var logger$1 = require('./logger-2ZBZCKdM.js');
+var utils = require('./utils-7C5_GnyF.js');
+var index$1 = require('./index-CKLC7f4y.js');
 var globalStore = require('./global-store-R6x06KvJ.js');
-var reCaptchaHelpers = require('./reCaptchaHelpers-BIbBtULr.js');
+var reCaptchaHelpers = require('./reCaptchaHelpers-sfktrnTF.js');
 var botHelpers = require('./botHelpers-D5Dj7TRA.js');
-var surveyHelpers = require('./surveyHelpers-CnSWyzvp.js');
-var scriptStyleLoader = require('./scriptStyleLoader-8VXGYoY8.js');
-var keyboardShortcuts = require('./keyboard-shortcuts-WOyQOe62.js');
-var ctaHelpers = require('./ctaHelpers-C155mCQE.js');
-var appStore = require('./app-store-D249GRTi.js');
-var parseHelper = require('./parseHelper-DjDPCQ3f.js');
+var surveyHelpers = require('./surveyHelpers-DohugkWP.js');
+var scriptStyleLoader = require('./scriptStyleLoader-D-bqKqSb.js');
+var keyboardShortcuts = require('./keyboard-shortcuts-BWprLtLj.js');
+var ctaHelpers = require('./ctaHelpers-DUPj5SnE.js');
+var appStore = require('./app-store-BtkiHvcw.js');
+var parseHelper = require('./parseHelper-5fRVefLm.js');
 require('./_commonjsHelpers-MBWFX2dn.js');
 
 // ILiveAgentProvider.ts
@@ -406,6 +406,7 @@ class SalesforceLiveAgentProvider {
         return "unknown";
     }
     handleSessionStatusChange(event) {
+        var _a;
         try {
             if (!event.data)
                 return;
@@ -416,6 +417,18 @@ class SalesforceLiveAgentProvider {
             if ((entryPayload === null || entryPayload === void 0 ? void 0 : entryPayload.sessionStatus) === "Active") {
                 ChatEventBus.emit("AGENT_SESSION_CREATED", true);
             }
+            else if ((entryPayload === null || entryPayload === void 0 ? void 0 : entryPayload.sessionStatus) === "Ended") {
+                // The agent (or system) ended the session. Salesforce's authoritative
+                // CloseConversation event can lag by minutes, so end the live-agent
+                // session now — otherwise the user is stuck in "Type a message to the
+                // agent" mode with no indication the agent left. This is transfer-safe:
+                // a transfer keeps the session "Active", only a real end reports "Ended".
+                ChatEventBus.emit("CONVERSATION_CLOSED", true);
+                // Mirror the CloseConversation case: tear down the SSE connection too.
+                // Closing halts delivery of the registered named listeners, so the now-
+                // redundant (and delayed) CloseConversation event won't reopen this path.
+                (_a = this.eventSource) === null || _a === void 0 ? void 0 : _a.close();
+            }
         }
         catch (error) {
             logger.error("Error handling session status change event:", error);
@@ -423,19 +436,31 @@ class SalesforceLiveAgentProvider {
         }
     }
     listenToMessages() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         logger.debug("Listening to messages from Salesforce Live Agent");
         // this.endpointSSE = "http://localhost:5050"
-        const eventSource = new EventSource(`${this.endpointSSE}/bot/liveagent/sse?token=${(_a = this.sessionContext) === null || _a === void 0 ? void 0 : _a.accessToken}&org_id=${(_b = this.configSettings) === null || _b === void 0 ? void 0 : _b.orgId}&sse_url=${(_c = this.configSettings) === null || _c === void 0 ? void 0 : _c.instanceUrl}`, {
+        // Close any existing connection before opening a new one (e.g. on resume)
+        // so we don't leak a dangling SSE stream.
+        (_a = this.eventSource) === null || _a === void 0 ? void 0 : _a.close();
+        const eventSource = new EventSource(`${this.endpointSSE}/bot/liveagent/sse?token=${(_b = this.sessionContext) === null || _b === void 0 ? void 0 : _b.accessToken}&org_id=${(_c = this.configSettings) === null || _c === void 0 ? void 0 : _c.orgId}&sse_url=${(_d = this.configSettings) === null || _d === void 0 ? void 0 : _d.instanceUrl}`, {
             withCredentials: true,
         });
         if (!eventSource) {
             logger.error("Failed to create EventSource");
             throw new Error("Failed to create EventSource");
         }
-        eventSource.onerror = () => {
-            logger.error("❌ SSE Error: Connection lost or error occurred");
-            // Handle error, e.g., retry connection or notify user
+        this.eventSource = eventSource;
+        eventSource.onerror = (event) => {
+            // Native EventSource routes BOTH transport failures and any server-sent
+            // `event: error` frame to this same "error" channel (WHATWG spec: a frame
+            // with `event: error` dispatches a MessageEvent of type "error"). A server
+            // frame carries `.data`; a transport failure is a bare Event. Read the data
+            // when present so an upstream rejection is logged with its status rather
+            // than as a generic "connection lost". (The proxy also sends a dedicated
+            // `upstream_error` event — see below — which is the preferred, unambiguous
+            // channel; this stays as a defensive fallback.)
+            const data = event === null || event === void 0 ? void 0 : event.data;
+            logger.error(typeof data === "string" && data ? `❌ SSE server error frame: ${data}` : "❌ SSE Error: Connection lost or error occurred");
             ChatEventBus.emit("AGENT_ERROR", true);
             // Optionally, you can close the EventSource if needed
             eventSource.close();
@@ -444,7 +469,7 @@ class SalesforceLiveAgentProvider {
             logger.debug("✅ SSE Connection Established");
             // ChatEventBus.emit("liveAgentReady", undefined)
         };
-        eventSource.onmessage = event => {
+        const handleSSEMessage = (event) => {
             var _a, _b;
             try {
                 const parsedEventData = JSON.parse(event.data);
@@ -508,6 +533,45 @@ class SalesforceLiveAgentProvider {
                 return;
             }
         };
+        // Salesforce MIAW delivers NAMED SSE events (event:CONVERSATION_*), which do
+        // NOT trigger EventSource.onmessage — that only fires for unnamed "message"
+        // events. Register the handler for each named conversation event (and keep
+        // onmessage as a fallback) so the lifecycle events are actually processed.
+        // Without this the widget never sees SessionStatusChanged/ParticipantChanged,
+        // never emits AGENT_SESSION_CREATED, times out, and tears down the session.
+        //
+        // Single source of truth: every conversationEntry.entryType the handleSSEMessage
+        // switch above handles maps 1:1 to its named CONVERSATION_* event here. Keep
+        // this map in sync with the switch — a missing entry means that event is
+        // silently never delivered (that is exactly what happened to StreamingToken /
+        // ProgressIndicator before this map existed).
+        const SF_ENTRY_EVENT_MAP = {
+            Message: "CONVERSATION_MESSAGE",
+            RoutingResult: "CONVERSATION_ROUTING_RESULT",
+            RoutingWorkResult: "CONVERSATION_ROUTING_WORK_RESULT",
+            ParticipantChanged: "CONVERSATION_PARTICIPANT_CHANGED",
+            TypingStartedIndicator: "CONVERSATION_TYPING_STARTED_INDICATOR",
+            TypingStoppedIndicator: "CONVERSATION_TYPING_STOPPED_INDICATOR",
+            DeliveryAcknowledgement: "CONVERSATION_DELIVERY_ACKNOWLEDGEMENT",
+            ReadAcknowledgement: "CONVERSATION_READ_ACKNOWLEDGEMENT",
+            CloseConversation: "CONVERSATION_CLOSE_CONVERSATION",
+            StreamingToken: "CONVERSATION_STREAMING_TOKEN",
+            ProgressIndicator: "CONVERSATION_PROGRESS_INDICATOR",
+            SessionStatusChanged: "CONVERSATION_SESSION_STATUS_CHANGED",
+        };
+        Object.values(SF_ENTRY_EVENT_MAP).forEach(type => eventSource.addEventListener(type, handleSSEMessage));
+        eventSource.onmessage = handleSSEMessage;
+        // The SSE proxy signals a Salesforce upstream rejection (non-200) with a
+        // dedicated named event carrying a plain-text reason. It is deliberately NOT
+        // named `error`, which would collide with EventSource's native error channel
+        // (onerror) and be indistinguishable from a transport failure. Handle it here
+        // so the specific status is logged and the user is notified. NOTE: the data is
+        // plain text ("upstream returned 503"), so do NOT JSON.parse it.
+        eventSource.addEventListener("upstream_error", (event) => {
+            logger.error("❌ Live agent SSE upstream error:", event.data);
+            ChatEventBus.emit("AGENT_ERROR", true);
+            eventSource.close();
+        });
     }
     /** Interface Implementation */
     /**
@@ -679,14 +743,17 @@ class SalesforceLiveAgentProvider {
      * It sends a POST request to the Salesforce MIAW API to close the conversation.
      */
     async endChat(_sessionId) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         (_a = this.availabilityAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        // Tear down the SSE stream on an explicit end so the connection and its
+        // registered named listeners don't leak past the session.
+        (_b = this.eventSource) === null || _b === void 0 ? void 0 : _b.close();
         // console.log("this.sessionContext?.conversationId", this.sessionContext?.conversationId)
-        if ((_b = this.sessionContext) === null || _b === void 0 ? void 0 : _b.conversationId) {
-            const res = await fetch(`${(_c = this.configSettings) === null || _c === void 0 ? void 0 : _c.instanceUrl}/iamessage/api/v2/conversation/${(_d = this.sessionContext) === null || _d === void 0 ? void 0 : _d.conversationId}?esDeveloperName=${(_e = this.configSettings) === null || _e === void 0 ? void 0 : _e.messagingChannelId}`, {
+        if ((_c = this.sessionContext) === null || _c === void 0 ? void 0 : _c.conversationId) {
+            const res = await fetch(`${(_d = this.configSettings) === null || _d === void 0 ? void 0 : _d.instanceUrl}/iamessage/api/v2/conversation/${(_e = this.sessionContext) === null || _e === void 0 ? void 0 : _e.conversationId}?esDeveloperName=${(_f = this.configSettings) === null || _f === void 0 ? void 0 : _f.messagingChannelId}`, {
                 method: "DELETE",
                 headers: {
-                    "Authorization": `Bearer ${(_f = this.sessionContext) === null || _f === void 0 ? void 0 : _f.accessToken}`,
+                    "Authorization": `Bearer ${(_g = this.sessionContext) === null || _g === void 0 ? void 0 : _g.accessToken}`,
                     "Content-Type": "application/json",
                 },
             });
@@ -961,7 +1028,7 @@ function deleteJsonCookie(name, options = {}) {
 
 const ai12zBotCss = () => `:host{font-family:var(--ai12zBot-v2-font-family) !important;font-size:var(--ai12zBot-v2-font-size) !important;color:var(--ai12zBot-v2-font-color, black);text-align:var(--ai12zBot-v2-text-align, left)}.chat-body{height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:10px;overflow-x:hidden}.chat-body::-webkit-scrollbar{width:5px;height:5px;}.chat-body::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;}.message{padding:10px;border-radius:15px;font-size:14px;line-height:1.4;word-wrap:break-word}span.prose{font-size:14px;}.image-Container{position:relative;display:inline-block;margin-right:10px}.delete-image{opacity:3;position:absolute;right:3px;top:0;cursor:pointer;line-height:10px}.ai12zBtn{background-color:var(--ai12zBot-v2-button-background) !important;color:var(--ai12zBot-v2-button-font-color);padding:5px 10px;border:none;border-radius:5px;cursor:pointer;text-decoration:none;margin:5px}.ai12z-btn{background-color:var(--ai12zBot-v2-button-background) !important;color:var(--ai12zBot-v2-button-font-color);padding:5px 10px;border:none;border-radius:5px;cursor:pointer;text-decoration:none;margin:5px}.custom-privacy{color:var(--ai12z-bot-privacy-color);padding-bottom:10px;padding-left:5px;margin-top:auto;}@media (max-width: 768px){.hide-chatbot{display:none !important}}`;
 
-const ai12zChatbotCss = () => `:host{--wes-c-icon-color:#fff;--fab-bottom:26px;--xsf-ai12z-zindex-isexpanded-10:20020;--ai-toolbar-icon-color:#2095ae;--xsf-ai12z-zindex-0:19979;--xsf-ai12z-zindex-10:19989;--xsf-ai12z-fab-bottom:26px}.modal-overlay{position:absolute;height:100%;width:100%;z-index:var(--xsf-ai12z-zindex-0);background-color:#2e2e2e99}.layout{pointer-events:none;position:fixed;inset:0;height:100dvh;width:99dvw;justify-content:flex-end;grid-template-rows:auto 1fr auto;grid-template-areas:"left toolbar right"     "left main right"     "left footer right";padding-top:96px;transition-property:grid-template-columns, padding-top;z-index:19979}.layout.is-open .modal{pointer-events:auto}.layout.is-expanded ai12z-bot{pointer-events:auto}.layout.is-open.is-expanded .modal{border-top-left-radius:0.75rem;border-top-right-radius:0.75rem;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);z-index:var(--xsf-ai12z-zindex-isexpanded-10)}.layout.is-open .user-input-fieldset{background-image:none;padding:0px;background:none}.layout.is-expanded .user-input-fieldset{border-top-left-radius:0.75rem;border-top-right-radius:0.75rem}.layout.is-open .grow-wrap>.textarea,.layout.is-open .grow-wrap>button,.layout.is-open .grow-wrap:after{border-color:var(--ai12zBot-v2-searchbar-open-border-color);}.layout.is-expanded .grow-wrap:after{display:none}.layout.is-open.is-expanded .user-input{z-index:var(--xsf-ai12z-zindex-isexpanded-10)}.layout.is-open .user-input{z-index:var(--xsf-ai12z-zindex-10)}.text-body2{font-size:16px;line-height:1.5;letter-spacing:-0.12px;font-weight:400}.modal-toolbar-icon{color:var(--ai12zBot-v2-toolbar-icon-color, inherit);width:1rem;height:1rem}.search-flex{flex:1 1 0%}.show-grid{display:grid}.hide-title{padding:0px;opacity:0;height:0px}.user-msg{background-color:var(--ai12zBot-v2-user-bubble-background);color:var(--ai12zBot-v2-user-bubble-font-color)}.text-body4{font-size:var(--ai12zBot-v2-timestamp-font-size);line-height:1.5;letter-spacing:0.03px;font-weight:400;color:var(--ai12zBot-v2-timestamp-font-color)}.isContent{background:var(--ai12zBot-v2-content-background);padding:10px}.default-botAvatar{color:var(--ai12zBot-v2-default-avatar-color)}.searchform{opacity:1;transform:none}.user-input{margin-left:auto;margin-right:auto;width:100%;max-width:840px;min-width:340px;grid-area:footer}.main{margin-left:auto;margin-right:auto;width:100%;max-width:840px;min-width:340px;margin-top:7px}.heading{color:var(--ai12zBot-v2-title-color)}.dropdown-item-button{display:flex;width:100%;cursor:pointer;align-items:center;-moz-column-gap:8px;column-gap:8px;border-radius:0.25rem;--tw-border-opacity:1;--tw-bg-opacity:1;background-color:var(--ai12zBot-v2-dropdown-bgcolor);padding:8px 24px;font-weight:500;--tw-text-opacity:1;color:var(--ai12zBot-v2-dropdown-font-color);transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:75ms}.helptext{padding:0px;opacity:0;height:0px}.minimize-input{transform:translateY(calc(-100% - 4px))}.ai-text-caption{font-size:12px;line-height:1.5;letter-spacing:0.2px;font-weight:400}.fab>button{background:var(--ai12zBot-v2-fab-button-background);}.user-input-fieldset{background:var(--ai12zBot-v2-searchbar-background)}.return-text-color{color:rgb(255, 255, 255)}.ai-minimize-icon svg{fill:currentColor;height:1em;width:1em}.hide-form{opacity:0;transform:none}.show-form{opacity:1;transform:none}.ai-minimize-icon{color:var(--wes-c-icon-color, inherit)}.fab{bottom:var(--fab-bottom, 30px)}.text-body1{font-size:var(--ai12zBot-v2-title-font-size);line-height:1.5;letter-spacing:-0.12px;font-weight:400}#message-submit{margin-right:6px;margin-bottom:7px;background-color:var(--ai12zBot-v2-searchbar-submit-bgcolor)}.ai-icon{color:var(--ai12zBot-v2-searchbar-submit-color);font-size:24px;width:1.5rem;height:1.5rem}.plus-icon{color:var(--ai12zBot-v2-searchbar-plus-icon-color);font-size:24px;width:1.5rem;height:1.5rem}.grow-wrap>.textarea,.grow-wrap:after{min-height:48px;align-content:center;border-radius:1.5rem;border-width:1px;border-style:solid;border:1px solid var(--ai12zBot-v2-searchbar-border-color);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:8px 48px;text-indent:2px;font-size:16px;line-height:1.5;letter-spacing:-0.12px;font-weight:400;--tw-text-opacity:1;color:rgb(46 46 46 / var(--tw-text-opacity, 1));--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-ring-inset:inset;--tw-ring-offset-width:0px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:0.15s}.grow-wrap>.textarea,.grow-wrap:after{grid-area:1 / 1 / 2 / 2}.modal{position:relative;grid-column:span 1 / span 1;grid-column-start:2;grid-row:span 3 / span 3;grid-row-start:1;display:grid;border-top-left-radius:0;border-top-right-radius:0;background-position:center;box-shadow:0 16px 32px -4px #18181829,     0 12px 24px -4px #18181814;background-image:var(--ai12zBot-v2-modal-backgroundImage);background-repeat:no-repeat;background-size:100vw 100vh;grid-template-columns:subgrid;grid-template-rows:subgrid;z-index:var(--xsf-ai12z-zindex-10);transition:0.3sease-out;transition-property:grid-template-columns}.dropdown-menu{pointer-events:none;opacity:0;z-index:10;background-color:var(--ai12zBot-v2-dropdown-bgcolor);transform:translateY(-10px);transition:opacity 0.3s ease,     transform 0.3s ease}.dropdown-menu.show{pointer-events:auto;opacity:1;pointer-events:auto;transform:translateY(0);background-color:var(--ai12zBot-v2-dropdown-bgcolor)}.copy-btn{color:var(--ai12zBot-v2-copy-btn-color)}.thumbs-up{fill:var(--ai12zBot-v2-feedback-selected);width:1.5rem}.thumbs-down{fill:var(  --ai12zBot-v2-feedback-selected);width:1.5rem}.chat-thumbs-up{color:var(--ai12zBot-v2-feedback-color)}.thumbs-container{justify-content:flex-start;align-items:center}.back-btn svg{fill:var(--ai12zBot-v2-back-button-color)}.dropdown-item{background-color:var(--ai12zBot-v2-dropdown-bgcolor)}button:focus-visible{outline:2px solid var(--ai12zBot-v2-focus-visible-color, #0A2A43);outline-offset:2px}button.bot-btn-primary:focus-visible{outline:2px solid var(--ai12zBot-v2-focus-visible-color-primary, var(--ai12zBot-v2-focus-visible-color, #0A2A43));outline-offset:2px}button.bot-btn-secondary:focus-visible{outline:2px solid var(--ai12zBot-v2-focus-visible-color-secondary, var(--ai12zBot-v2-focus-visible-color, #0A2A43))}.bot-name{color:var(--ai12zBot-v2-fab-name-color, var(--ai12zBot-v2-bot-name-color));font-weight:var(--ai12zBot-v2-fab-font-weight, var(--ai12zBot-v2-bot-name-font-weight))}.ai12z-link{color:var(--ai12zBot-v2-link-color);text-decoration:underline}.ai12z-link:hover{color:var(--ai12zBot-v2-link-hover-color);text-decoration:underline}.toolbar{height:52px;border:#fff;grid-area:toolbar}.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:10px;top:10px;width:auto;height:auto;z-index:1000}.enter-tip{font-size:12px;color:#666;margin-left:10px}.skip-links.hidden{position:absolute;left:-9999px;}.skip-links.visible{left:auto;position:static;}.error-message-container{margin-top:0.25rem}.error-msg{color:#dc2626;font-size:0.75rem;display:block;animation:slideIn 0.2s ease-out}.ai12z-form-honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}@keyframes slideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (min-width: 1024px){.modal{background-size:80vw 100vh}}@media (min-width: 1024px){.layout.is-expanded{grid-template-columns:1fr minmax(340px, 80dvw) 1fr !important}}@media (min-width: 768px){.layout.is-expanded{-moz-column-gap:48px;column-gap:48px}}@media (max-width: 767px){.layout.is-open{padding-top:0px !important;grid-template-columns:0fr minmax(340px, 1fr) 0fr !important}}@media (max-width: 767px){.fab{right:30px;bottom:var(--xsf-ai12z-fab-bottom, 26px)}}`;
+const ai12zChatbotCss = () => `:host{--wes-c-icon-color:#fff;--fab-bottom:26px;--xsf-ai12z-zindex-isexpanded-10:20020;--ai-toolbar-icon-color:#2095ae;--xsf-ai12z-zindex-0:19979;--xsf-ai12z-zindex-10:19989;--xsf-ai12z-fab-bottom:26px}.modal-overlay{position:absolute;height:100%;width:100%;z-index:var(--xsf-ai12z-zindex-0);background-color:#2e2e2e99}.layout{pointer-events:none;position:fixed;inset:0;height:100dvh;width:99dvw;justify-content:flex-end;grid-template-rows:auto 1fr auto;grid-template-areas:"left toolbar right"     "left main right"     "left footer right";padding-top:96px;transition-property:grid-template-columns, padding-top;z-index:19979}.layout.is-open .modal{pointer-events:auto}.layout.is-expanded ai12z-bot{pointer-events:auto}.layout.is-open.is-expanded .modal{border-top-left-radius:12px;border-top-right-radius:12px;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);z-index:var(--xsf-ai12z-zindex-isexpanded-10)}.layout.is-open .user-input-fieldset{background-image:none;padding:0px;background:none}.layout.is-expanded .user-input-fieldset{border-top-left-radius:12px;border-top-right-radius:12px}.layout.is-open .grow-wrap>.textarea,.layout.is-open .grow-wrap>button,.layout.is-open .grow-wrap:after{border-color:var(--ai12zBot-v2-searchbar-open-border-color);}.layout.is-expanded .grow-wrap:after{display:none}.layout.is-open.is-expanded .user-input{z-index:var(--xsf-ai12z-zindex-isexpanded-10)}.layout.is-open .user-input{z-index:var(--xsf-ai12z-zindex-10)}.text-body2{font-size:16px;line-height:1.5;letter-spacing:-0.12px;font-weight:400}.modal-toolbar-icon{color:var(--ai12zBot-v2-toolbar-icon-color, inherit);width:16px;height:16px}.search-flex{flex:1 1 0%}.show-grid{display:grid}.hide-title{padding:0px;opacity:0;height:0px}.user-msg{background-color:var(--ai12zBot-v2-user-bubble-background);color:var(--ai12zBot-v2-user-bubble-font-color)}.text-body4{font-size:var(--ai12zBot-v2-timestamp-font-size);line-height:1.5;letter-spacing:0.03px;font-weight:400;color:var(--ai12zBot-v2-timestamp-font-color)}.isContent{background:var(--ai12zBot-v2-content-background);padding:10px}.default-botAvatar{color:var(--ai12zBot-v2-default-avatar-color)}.searchform{opacity:1;transform:none}.user-input{margin-left:auto;margin-right:auto;width:100%;max-width:840px;min-width:340px;grid-area:footer}.main{margin-left:auto;margin-right:auto;width:100%;max-width:840px;min-width:340px;margin-top:7px}.heading{color:var(--ai12zBot-v2-title-color)}.dropdown-item-button{display:flex;width:100%;cursor:pointer;align-items:center;-moz-column-gap:8px;column-gap:8px;border-radius:4px;--tw-border-opacity:1;--tw-bg-opacity:1;background-color:var(--ai12zBot-v2-dropdown-bgcolor);padding:8px 24px;font-weight:500;--tw-text-opacity:1;color:var(--ai12zBot-v2-dropdown-font-color);transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:75ms}.helptext{padding:0px;opacity:0;height:0px}.minimize-input{transform:translateY(calc(-100% - 4px))}.ai-text-caption{font-size:12px;line-height:1.5;letter-spacing:0.2px;font-weight:400}.fab>button{background:var(--ai12zBot-v2-fab-button-background);}.user-input-fieldset{background:var(--ai12zBot-v2-searchbar-background)}.return-text-color{color:rgb(255, 255, 255)}.ai-minimize-icon svg{fill:currentColor;height:1em;width:1em}.hide-form{opacity:0;transform:none}.show-form{opacity:1;transform:none}.ai-minimize-icon{color:var(--wes-c-icon-color, inherit)}.fab{bottom:var(--fab-bottom, 30px)}.text-body1{font-size:var(--ai12zBot-v2-title-font-size);line-height:1.5;letter-spacing:-0.12px;font-weight:400}#message-submit{margin-right:6px;margin-bottom:7px;background-color:var(--ai12zBot-v2-searchbar-submit-bgcolor)}.ai-icon{color:var(--ai12zBot-v2-searchbar-submit-color);font-size:24px;width:24px;height:24px}.plus-icon{color:var(--ai12zBot-v2-searchbar-plus-icon-color);font-size:24px;width:24px;height:24px}.grow-wrap>.textarea,.grow-wrap:after{min-height:48px;align-content:center;border-radius:24px;border-width:1px;border-style:solid;border:1px solid var(--ai12zBot-v2-searchbar-border-color);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:8px 48px;text-indent:2px;font-size:16px;line-height:1.5;letter-spacing:-0.12px;font-weight:400;--tw-text-opacity:1;color:rgb(46 46 46 / var(--tw-text-opacity, 1));--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-ring-inset:inset;--tw-ring-offset-width:0px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:0.15s}.grow-wrap>.textarea,.grow-wrap:after{grid-area:1 / 1 / 2 / 2}.modal{position:relative;grid-column:span 1 / span 1;grid-column-start:2;grid-row:span 3 / span 3;grid-row-start:1;display:grid;border-top-left-radius:0;border-top-right-radius:0;background-position:center;box-shadow:0 16px 32px -4px #18181829,     0 12px 24px -4px #18181814;background-image:var(--ai12zBot-v2-modal-backgroundImage);background-repeat:no-repeat;background-size:100vw 100vh;grid-template-columns:subgrid;grid-template-rows:subgrid;z-index:var(--xsf-ai12z-zindex-10);transition:0.3sease-out;transition-property:grid-template-columns}.dropdown-menu{pointer-events:none;opacity:0;z-index:10;background-color:var(--ai12zBot-v2-dropdown-bgcolor);transform:translateY(-10px);transition:opacity 0.3s ease,     transform 0.3s ease}.dropdown-menu.show{pointer-events:auto;opacity:1;pointer-events:auto;transform:translateY(0);background-color:var(--ai12zBot-v2-dropdown-bgcolor)}.copy-btn{color:var(--ai12zBot-v2-copy-btn-color)}.thumbs-up{fill:var(--ai12zBot-v2-feedback-selected);width:24px}.thumbs-down{fill:var(  --ai12zBot-v2-feedback-selected);width:24px}.chat-thumbs-up{color:var(--ai12zBot-v2-feedback-color)}.thumbs-container{justify-content:flex-start;align-items:center}.back-btn svg{fill:var(--ai12zBot-v2-back-button-color)}.dropdown-item{background-color:var(--ai12zBot-v2-dropdown-bgcolor)}button:focus-visible{outline:2px solid var(--ai12zBot-v2-focus-visible-color, #0A2A43);outline-offset:2px}button.bot-btn-primary:focus-visible{outline:2px solid var(--ai12zBot-v2-focus-visible-color-primary, var(--ai12zBot-v2-focus-visible-color, #0A2A43));outline-offset:2px}button.bot-btn-secondary:focus-visible{outline:2px solid var(--ai12zBot-v2-focus-visible-color-secondary, var(--ai12zBot-v2-focus-visible-color, #0A2A43))}.bot-name{color:var(--ai12zBot-v2-fab-name-color, var(--ai12zBot-v2-bot-name-color));font-weight:var(--ai12zBot-v2-fab-font-weight, var(--ai12zBot-v2-bot-name-font-weight))}.ai12z-link{color:var(--ai12zBot-v2-link-color);text-decoration:underline}.ai12z-link:hover{color:var(--ai12zBot-v2-link-hover-color);text-decoration:underline}.toolbar{height:52px;border:#fff;grid-area:toolbar}.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:10px;top:10px;width:auto;height:auto;z-index:1000}.enter-tip{font-size:12px;color:#666;margin-left:10px}.skip-links.hidden{position:absolute;left:-9999px;}.skip-links.visible{left:auto;position:static;}.error-message-container{margin-top:4px}.error-msg{color:#dc2626;font-size:12px;display:block;animation:slideIn 0.2s ease-out}.ai12z-form-honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}@keyframes slideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (min-width: 1024px){.modal{background-size:80vw 100vh}}@media (min-width: 1024px){.layout.is-expanded{grid-template-columns:1fr minmax(340px, 80dvw) 1fr !important}}@media (min-width: 768px){.layout.is-expanded{-moz-column-gap:48px;column-gap:48px}}@media (max-width: 767px){.layout.is-open{padding-top:0px !important;grid-template-columns:0fr minmax(340px, 1fr) 0fr !important}}@media (max-width: 767px){.fab{right:30px;bottom:var(--xsf-ai12z-fab-bottom, 26px)}}`;
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -988,7 +1055,10 @@ const Ai12zBot = class {
         this.isElementAvailable = index.createEvent(this, "isElementAvailable", 7);
         this.cdnPath = "https://cdn.ai12z.net/assets/bot";
         this.surveyCDNPath = "https://cdn.ai12z.net/pkg/surveyjs";
-        this.styles = [`https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.11.1/styles/default.min.css`, `https://cdn.ai12z.net/assets/bot/v2/tailwind.min.css`];
+        this.styles = [
+            `https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.11.1/styles/default.min.css`,
+            `https://cdn.ai12z.net/assets/bot/${index.Env.CDN_PATH}/tailwind.min.css`
+        ];
         this.liveAgentEventHandler = new LiveAgentEventHandler();
         this.customStyle = "";
         this.customJS = "";
@@ -1262,49 +1332,51 @@ const Ai12zBot = class {
             // }
         };
         this.agentMessageCreated = (message) => {
-            if (this.currentDomId === "") {
-                // Get the last message in the messages array
-                const lastMessage = this.messages[this.messages.length - 1];
-                // check if last message is from user or agent
-                if (!lastMessage.sender || lastMessage.sender === null || lastMessage.type === "system") {
-                    // Generate a new temporary message object
-                    const tempMsg = utils.generateMessage(this.conversationId);
-                    // Generate a unique ID for the new message
-                    this.currentDomId = `chatbot-${utils.generateUUID()}`;
-                    tempMsg.id = this.currentDomId;
-                    tempMsg.isLoading = false;
-                    // Set sender to 'agent' for live agent messages
-                    this.messages = [...this.messages, tempMsg];
-                }
-                else {
-                    // If the last message is from the user or already has a sender, update its ID
-                    const { id, idChanged } = parseHelper.ensureMessageId(this.currentDomId, this.messages, "chatbot");
-                    this.currentDomId = id;
-                    if (idChanged)
-                        this.messages = [...this.messages];
-                }
-            }
+            var _a;
             const retMessage = this.liveAgentEventHandler.handleAgentMessage(message);
-            if (retMessage) {
-                this.announce("New message received from live agent");
-                // ✅ Wait for DOM to update before querying
-                requestAnimationFrame(() => {
-                    var _a;
-                    const aiMessageBubble = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#${this.currentDomId}`);
-                    if (aiMessageBubble) {
-                        const converter = new processCarouselData.showdown.Converter();
-                        let bubbleText = aiMessageBubble.getAttribute("data-bubbleText") || "";
-                        bubbleText = `${bubbleText} \n\n ${retMessage}`;
-                        aiMessageBubble.setAttribute("data-bubbleText", bubbleText);
-                        let html = converter.makeHtml(bubbleText);
-                        this.updateConversations(html, message[0]);
-                        this.updateBotState();
-                    }
-                    setTimeout(() => {
-                        this.scrollToBottom();
-                    }, 10);
-                });
-            }
+            if (!retMessage)
+                return;
+            this.announce("New message received from live agent");
+            // Render agent messages declaratively through component state (the same way
+            // agentEventHandler renders the "agent joined" banner) instead of writing
+            // into a DOM bubble that Stencil may not have rendered yet. The old code
+            // added an empty bubble to state then, one requestAnimationFrame later,
+            // queried `#currentDomId` in the shadow DOM to write the text — but Stencil's
+            // re-render is async, so for the first agent message(s) the element didn't
+            // exist yet, the querySelector returned null, and the text was dropped
+            // entirely (never stored in state). It only "worked after" a user reply
+            // forced a re-render. Building the message in state removes that race.
+            const converter = new processCarouselData.showdown.Converter();
+            const finalHtml = converter.makeHtml(retMessage);
+            const entry = Array.isArray(message) ? message[0] : message;
+            // Behavior change vs. pre-#2493: each agent message now renders as its own
+            // bubble. The previous code concatenated consecutive agent messages that
+            // arrived before a user reply into one growing bubble (via a persistent
+            // currentDomId + string concat). One-bubble-per-message is intentional here —
+            // it matches how bot/user messages already render and avoids the DOM-append
+            // race this PR fixes. To restore merged bubbles, append to the last agent
+            // message's `text` in state (when the last message is the same sender and no
+            // user message interrupted) instead of always pushing a new entry.
+            const agentMsg = {
+                id: `chatbot-${utils.generateUUID()}`,
+                text: finalHtml,
+                isUser: false,
+                isLoading: false,
+                timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+                images: [],
+                conversationId: this.conversationId,
+                formModel: {},
+                surveyDomId: "",
+                thumbsId: `${utils.generateUUID()}`,
+                showIcon: true,
+                hideThumbsUpandDown: true,
+                insightId: null,
+                sender: (_a = entry === null || entry === void 0 ? void 0 : entry.sender) !== null && _a !== void 0 ? _a : { role: "agent", displayName: "Agent" },
+            };
+            this.messages = [...this.messages, agentMsg];
+            this.currentDomId = "";
+            this.updateBotState();
+            this.scheduleAutoScroll();
         };
         this.addEventMessage = (_message) => {
             const agentEventMessages = this.liveAgentEventHandler.addAgentEventMessage([
@@ -1356,10 +1428,42 @@ const Ai12zBot = class {
             this.announce("Live agent connection failed");
         };
         this.handleAgentConversationEnded = () => {
-            // Only show the closed message if an agent was actually connected;
-            // suppress it when the session timed out with no agent available
+            // Only notify if an agent was actually connected; suppress when the session
+            // timed out with no agent available.
+            //
+            // This can be invoked more than once — the sessionStatus="Ended" path and the
+            // delayed CloseConversation both emit CONVERSATION_CLOSED. That double-fire is
+            // handled by the isLiveAgent gate below, NOT by alreadyNotified: isLiveAgent is
+            // set false synchronously in this same call, so any later invocation skips the
+            // whole block (JS is single-threaded; no await runs in between).
+            //
+            // alreadyNotified guards a different case: when the agent leaving already
+            // produced a "<name> has left the chat" participant banner, don't stack a
+            // near-duplicate "The live agent has left the conversation." notice on top.
             if (this.isLiveAgent) {
-                this.addEventMessage("Conversation closed with Live Agent");
+                const last = this.messages[this.messages.length - 1];
+                const alreadyNotified = (last === null || last === void 0 ? void 0 : last.type) === "system" && typeof (last === null || last === void 0 ? void 0 : last.text) === "string" && last.text.toLowerCase().includes("left");
+                if (!alreadyNotified) {
+                    // Render the banner through state (like agentEventHandler) rather than
+                    // the DOM-query addEventMessage, which silently no-ops when the target
+                    // bubble isn't rendered — that's why the "ended" notice never showed.
+                    this.messages = [
+                        ...this.messages,
+                        {
+                            id: `system-${utils.generateUUID()}`,
+                            text: "The live agent has left the conversation.",
+                            type: "system",
+                            isUser: false,
+                            isLoading: false,
+                            timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+                            images: [],
+                            conversationId: this.conversationId,
+                            formModel: {},
+                            surveyDomId: "",
+                            sender: null,
+                        },
+                    ];
+                }
                 this.announce("Live agent chat ended");
             }
             this.isLiveAgent = false;
@@ -1367,7 +1471,10 @@ const Ai12zBot = class {
             this.liveAgentConversationId = "";
             this.isTypingIndicatorVisible = false;
             this.liveAgentButtonText = "Talk to a Live Agent";
+            this.currentDomId = "";
             this.clearEvents();
+            this.updateBotState();
+            this.scheduleAutoScroll();
         };
         this.agentEventHandler = event => {
             this.isTypingIndicatorVisible = false;
@@ -1394,6 +1501,10 @@ const Ai12zBot = class {
                     this.inputEl.value = "";
                 }
                 this.currentDomId = "";
+                // Scroll the new banner (e.g. "… has joined the chat") into view — but only
+                // when the user is already near the bottom (see scheduleAutoScroll), so we
+                // don't yank them down mid-scroll during a join/leave burst.
+                this.scheduleAutoScroll();
             }
         };
         this.handleAgentSessionCreated = () => {
@@ -2212,6 +2323,7 @@ const Ai12zBot = class {
             controlType: data.controlType,
             thumbsId: `${utils.generateUUID()}`,
             showIcon: !data.controlType && !this.surveyDomId,
+            hideThumbsUpandDown: this.isLiveAgent ? true : false,
             insightId: (_f = data === null || data === void 0 ? void 0 : data.insightId) !== null && _f !== void 0 ? _f : null,
             sender: (_g = data === null || data === void 0 ? void 0 : data.sender) !== null && _g !== void 0 ? _g : null,
             itemComponent: data,
@@ -2533,6 +2645,29 @@ const Ai12zBot = class {
             this.unreadCount = 0;
         }
     }
+    /** True when the chat is scrolled to (or within `threshold`px of) the bottom. */
+    isNearBottom(threshold = 150) {
+        var _a;
+        const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".chat-body");
+        if (!container)
+            return true;
+        return container.scrollHeight - container.scrollTop - container.clientHeight <= threshold;
+    }
+    /**
+     * Auto-scroll for the live-agent path (agent messages + join/leave banners).
+     * Unlike scrollToBottom(), this (1) only scrolls when the user is already near
+     * the bottom, so a burst never yanks the view down while they read history, and
+     * (2) coalesces rapid messages into a single scroll via a short debounce.
+     * The near-bottom check is captured now, before Stencil re-renders and grows the
+     * container — if they weren't near the bottom, their position is left alone.
+     */
+    scheduleAutoScroll() {
+        if (!this.isNearBottom())
+            return;
+        if (this.autoScrollTimer)
+            clearTimeout(this.autoScrollTimer);
+        this.autoScrollTimer = setTimeout(() => this.scrollToBottom(), 60);
+    }
     checkLiveAgentMode() {
         var _a, _b, _c, _d;
         const isLiveAgentConfigured = ((_b = (_a = this.botSettings) === null || _a === void 0 ? void 0 : _a.liveagent) === null || _b === void 0 ? void 0 : _b.providers) && Object.keys((_d = (_c = this.botSettings) === null || _c === void 0 ? void 0 : _c.liveagent) === null || _d === void 0 ? void 0 : _d.providers).length > 0;
@@ -2924,7 +3059,7 @@ const Ai12zBot = class {
                 this.errorMessage = errorMsg.detail;
                 this.showErrorMessage = true;
                 this.announce(errorMsg.detail || "Image upload failed");
-            }, ref: el => (this.imageUploaderRef = el) })))))), index.h("div", { class: `textarea` }, this.imagesBase64List.length > 0 && (index.h("div", { class: "flex flex-wrap gap-2 mx-1 mt-2.5 mb-1" }, this.imagesBase64List.map((img, idx) => (index.h("div", { class: "image-Container sc-ai12z-input-form", key: idx }, index.h("img", { src: img, style: { width: "70px", height: "50px", borderRadius: ".75rem" }, alt: "uploaded image" }), index.h("span", { class: "delete-image sc-ai12z-input-form cursor-pointer ml-1", onClick: () => {
+            }, ref: el => (this.imageUploaderRef = el) })))))), index.h("div", { class: `textarea` }, this.imagesBase64List.length > 0 && (index.h("div", { class: "flex flex-wrap gap-2 mx-1 mt-2.5 mb-1" }, this.imagesBase64List.map((img, idx) => (index.h("div", { class: "image-Container sc-ai12z-input-form", key: idx }, index.h("img", { src: img, style: { width: "70px", height: "50px", borderRadius: "12px" }, alt: "uploaded image" }), index.h("span", { class: "delete-image sc-ai12z-input-form cursor-pointer ml-1", onClick: () => {
                 this.imagesBase64List = this.imagesBase64List.filter((_, i) => i !== idx);
                 // console.log("upload imageuloaderred", this.imageUploaderRef)
                 if (this.imageUploaderRef && typeof this.imageUploaderRef.removeImageAtIndex === "function") {

package/dist/cjs/ai12z-category_2.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-Ct2DwlDF.js');
-var SearchResult = require('./SearchResult-DirxAsMi.js');
-var utils = require('./utils-BkemWeq3.js');
+var index = require('./index-v8T1EJAJ.js');
+var SearchResult = require('./SearchResult-CvTJr55G.js');
+var utils = require('./utils-7C5_GnyF.js');
 var _commonjsHelpers = require('./_commonjsHelpers-MBWFX2dn.js');
-var appStore = require('./app-store-D249GRTi.js');
-var parseHelper = require('./parseHelper-DjDPCQ3f.js');
-require('./ctaHelpers-C155mCQE.js');
-require('./logger-B_JTV5L8.js');
+var appStore = require('./app-store-BtkiHvcw.js');
+var parseHelper = require('./parseHelper-5fRVefLm.js');
+require('./ctaHelpers-DUPj5SnE.js');
+require('./logger-2ZBZCKdM.js');
 
 const categoryCss = () => `ai12z-category{font-family:var(--ai12z-font-family) !important;font-size:var(--ai12z-search-font-size, var(--ai12z-font-size)) !important}.custom-title{font-size:var(--ai12z-category-font-size);color:var(--ai12z-category-font-color)}`;
 

package/dist/cjs/ai12z-chat-message.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Ct2DwlDF.js');
+var index = require('./index-v8T1EJAJ.js');
 var botHelpers = require('./botHelpers-D5Dj7TRA.js');
-var styleSheetRegistry = require('./styleSheetRegistry-Cf6kOnS3.js');
-require('./utils-BkemWeq3.js');
+var styleSheetRegistry = require('./styleSheetRegistry-CaWjqgX7.js');
+require('./utils-7C5_GnyF.js');
 
 const ai12zChatMessageCss = () => `.show-more-btn{background:none;color:var(--ai12z-knowledge-box-show-more-color, #4a8aff);font-size:16px;cursor:pointer;font-weight:500;border-radius:6px;transition:color 0.2s ease,     background 0.2s ease;border:1px solid var(--ai12z-knowledge-box-show-more-border, blue);padding:10px;border-radius:20px;align-items:center;justify-content:center;margin:auto;display:block;z-index:20;position:relative;width:30%}.show-more-btn:hover{color:var(--ai12z-knowledge-box-show-more-hover-color, #1a73e8);background:rgba(74, 138, 255, 0.08)}.show-more-btn:active{background:rgba(74, 138, 255, 0.15)}.show-more-btn svg{vertical-align:middle;gap:5px;transition:transform 0.3s ease-in-out;display:inline-block;margin-left:10px;font-size:20}.message-text{line-height:1.55;font-size:15px;color:var(--ai12z-knowledge-box-text-color, #1e1e1e);transition:max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}.fade-overlay{position:absolute;bottom:0;left:0;right:0;height:100px;z-index:10;pointer-events:none;opacity:1;transition:opacity 0.3s ease-in-out;background:linear-gradient(     to bottom,     rgba(255, 255, 255, 0) 0%,      var(--ai12z-knowledge-box-bg-color, #ffffff) 85%    )}.chat-message{position:relative;}.custom-line-clamp{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp);line-clamp:var(--line-clamp)}.ai12z-form-honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.ai12zBtn{background-color:var(--ai12z-knowledge-box-primary-color);color:white;padding:5px 10px;border:none;border-radius:5px;cursor:pointer;text-decoration:none;margin:5px}`;
 
@@ -55,18 +55,10 @@ const Ai12zChatMessage = class {
         botHelpers.initializeScript(event.detail.id, this.mainObject);
     }
     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) {
-            styleSheetRegistry.adoptStyleSheet(this.kbSettings.customCSS, this.el.shadowRoot);
-        }
-        if ((_b = this.kbSettings) === null || _b === void 0 ? void 0 : _b.customJS) {
-            styleSheetRegistry.loadScriptOnce(this.kbSettings.customJS, this.el.shadowRoot);
-        }
     }
     componentDidLoad() {
+        var _a, _b;
         // Initialise the ai12z global exactly once; never overwrite an existing value.
         if (!window["ai12z"]) {
             window["ai12z"] = {};
@@ -75,6 +67,14 @@ const Ai12zChatMessage = class {
         ai12zHeading.text = `var ai12zChat = window["ai12z"] = {}`;
         this.el.shadowRoot.appendChild(ai12zHeading);
         this.checkOverflow();
+        // 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) {
+            styleSheetRegistry.adoptStyleSheet(this.kbSettings.customCSS, this.el.shadowRoot);
+        }
+        if ((_b = this.kbSettings) === null || _b === void 0 ? void 0 : _b.customJS) {
+            styleSheetRegistry.loadScriptOnce(this.kbSettings.customJS, this.el.shadowRoot);
+        }
     }
     async loadScriptsSequentially() {
         try {
@@ -156,9 +156,9 @@ const Ai12zChatMessage = class {
     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 (index.h("div", { key: '54f51ffb7c06bbb20fc1088c0fb63a8669d7ba45', class: "chat-message" }, index.h("div", { key: '281bc75361bcfadb4611eefeb9697d525b9e2d27', ref: (el) => this.messageRef = el, class: { 'message-text': true, "custom-line-clamp": !this.isExpanded && !this.isCollapsing && this.showButton }, style: {
+        return (index.h("div", { key: '2d24739583f2f73daa28590c6c121531cf6ab4ce', class: "chat-message" }, index.h("div", { key: '9e8ca0a62a0de746f367164ff51ea9b9a22e93a0', 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 && index.h("div", { key: 'd6e262dbca0934b97fafb3dd7723b3b9333d8e10', class: "fade-overlay" }), this.showButton && this.canExpand && index.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 ? index.h("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { points: "6 9 12 15 18 9" })) : index.h("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { points: "18 15 12 9 6 15" })))));
+            }, innerHTML: this.text, onClick: this.showButton ? this.toggleExpand : undefined }), !this.isExpanded && this.showButton && this.canExpand && index.h("div", { key: '12f386a03fc84f97d2e585ea21cf4f8d31964c34', class: "fade-overlay" }), this.showButton && this.canExpand && index.h("button", { key: '1633be8cd35334eae64f75d7ce5fd87b30054849', 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 ? index.h("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { points: "6 9 12 15 18 9" })) : index.h("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { points: "18 15 12 9 6 15" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {