ai12z 3.13.1-alpha.9 → 3.13.3

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

@@ -2,19 +2,19 @@
 
 var index = require('./index-Ct2DwlDF.js');
 var responseAdapter = require('./response-adapter-CKKyyhMj.js');
-var processCarouselData = require('./processCarouselData-ByvOv0xP.js');
-var logger$1 = require('./logger-DX9yB2Q4.js');
-var utils = require('./utils-CVz8XUlb.js');
-var index$1 = require('./index-BxQS1tNc.js');
+var processCarouselData = require('./processCarouselData-YEoGs649.js');
+var logger$1 = require('./logger-B_JTV5L8.js');
+var utils = require('./utils-BAJarpnb.js');
+var index$1 = require('./index-C-xyfB2W.js');
 var globalStore = require('./global-store-R6x06KvJ.js');
-var reCaptchaHelpers = require('./reCaptchaHelpers-BUylaRCH.js');
-var botHelpers = require('./botHelpers-aCoootcN.js');
-var surveyHelpers = require('./surveyHelpers-Bmju2R9I.js');
+var reCaptchaHelpers = require('./reCaptchaHelpers-C5ato8kF.js');
+var botHelpers = require('./botHelpers-D5Dj7TRA.js');
+var surveyHelpers = require('./surveyHelpers-D4qhA3pY.js');
 var scriptStyleLoader = require('./scriptStyleLoader-8VXGYoY8.js');
-var keyboardShortcuts = require('./keyboard-shortcuts-Cr_wfa5f.js');
-var ctaHelpers = require('./ctaHelpers-CDVojcwO.js');
+var keyboardShortcuts = require('./keyboard-shortcuts-CwJb0TM7.js');
+var ctaHelpers = require('./ctaHelpers-_6HvZZie.js');
 var appStore = require('./app-store-D249GRTi.js');
-var parseHelper = require('./parseHelper-BpdC7wTC.js');
+var parseHelper = require('./parseHelper-Cp45LpWl.js');
 require('./_commonjsHelpers-MBWFX2dn.js');
 
 // ILiveAgentProvider.ts
@@ -22,6 +22,16 @@ const envMode = index.Env.DATA_MODE || "prod";
 // Additional methods can be added as needed for more functionality
 // This interface defines the contract for a Live Agent provider, allowing for chat management and message handling.
 // Implementations of this interface would handle the specifics of interacting with a live chat service.
+/**
+ * Thrown when a resumed live-agent session is rejected with HTTP 401 or 403,
+ * indicating the stored access token has expired or been revoked.
+ */
+class LiveAgentAuthExpiredError extends Error {
+    constructor(message = "Live agent session authentication has expired") {
+        super(message);
+        this.name = "LiveAgentAuthExpiredError";
+    }
+}
 
 class EventBus {
     constructor() {
@@ -133,6 +143,10 @@ class SalesforceLiveAgentProvider {
         if (conversationResponse.ok) {
             this.sessionContext.conversationId = conversationId;
             ChatEventBus.emit("liveAgentReady", undefined);
+            ChatEventBus.emit("AGENT_SESSION_INFO", {
+                sessionId: this.sessionContext.accessToken,
+                conversationId: this.sessionContext.conversationId,
+            });
             // console.log(this.sessionContext?.initialMessages)
             // Send initial message to the agent here need to format the message properly
             // Iterate the initialmessages and create a user friendly display message with contact user: for user input and bot: as bot response
@@ -442,6 +456,43 @@ class SalesforceLiveAgentProvider {
     async startChat(startChatOptions) {
         await this.initialize(startChatOptions);
     }
+    /**
+     * Resumes an existing live agent session using a stored access token and conversation ID.
+     * Skips authentication and conversation creation — only reconnects the SSE listener.
+     */
+    async resumeChat(startChatOptions) {
+        var _a, _b, _c;
+        if (!(startChatOptions === null || startChatOptions === void 0 ? void 0 : startChatOptions.sessionId) || !(startChatOptions === null || startChatOptions === void 0 ? void 0 : startChatOptions.conversationId)) {
+            throw new Error("resumeChat requires sessionId (accessToken) and conversationId");
+        }
+        this.configSettings = (startChatOptions === null || startChatOptions === void 0 ? void 0 : startChatOptions.config) || this.configSettings;
+        if (!((_a = this.configSettings) === null || _a === void 0 ? void 0 : _a.instanceUrl) || !((_b = this.configSettings) === null || _b === void 0 ? void 0 : _b.orgId) || !((_c = this.configSettings) === null || _c === void 0 ? void 0 : _c.messagingChannelId)) {
+            throw new Error("Missing required configuration settings for resuming Salesforce Live Agent session");
+        }
+        this.sessionContext = {
+            accessToken: startChatOptions.sessionId,
+            conversationId: startChatOptions.conversationId,
+            userId: startChatOptions.userId || "",
+            isActive: true,
+            lastMessageReadTime: 0,
+        };
+        // Probe the session before declaring it ready
+        const probeUrl = new URL(`${this.configSettings.instanceUrl}/iamessage/api/v2/conversation/${this.sessionContext.conversationId}/entries`);
+        probeUrl.searchParams.set("limit", "1");
+        probeUrl.searchParams.set("direction", "FromEnd");
+        const probeRes = await fetch(probeUrl.toString(), {
+            method: "GET",
+            headers: { Authorization: `Bearer ${this.sessionContext.accessToken}` },
+        });
+        if (probeRes.status === 401 || probeRes.status === 403) {
+            throw new LiveAgentAuthExpiredError();
+        }
+        if (!probeRes.ok) {
+            throw new Error(`Session probe failed: ${probeRes.status} ${probeRes.statusText}`);
+        }
+        ChatEventBus.emit("liveAgentReady", undefined);
+        this.listenToMessages();
+    }
     /**
      *
      * @param sendMessageOptions
@@ -687,6 +738,27 @@ class LiveAgentEventHandler {
             throw error;
         }
     }
+    /**
+     * Resumes an existing live agent session (e.g. after a page reload) using stored
+     * session credentials.  Authentication and conversation creation are skipped;
+     * only the SSE listener is reconnected.
+     */
+    async resumeLiveAgentSession(name = "salesforce", chatOptions) {
+        try {
+            this.logger.debug("Resuming Live Agent session", name, " --- ", chatOptions);
+            this.liveAgentProvider = LiveAgentProvider.getProvider(name);
+            if (this.liveAgentProvider.resumeChat) {
+                await this.liveAgentProvider.resumeChat(chatOptions);
+            }
+            else {
+                throw new Error(`Provider '${name}' does not support session resume`);
+            }
+        }
+        catch (error) {
+            this.logger.error("Error resuming Live Agent session:", error);
+            throw error;
+        }
+    }
 }
 
 function isRecord(value) {
@@ -732,7 +804,7 @@ function setCookie(name, value, options = {}) {
     let cookie = `${name}=${encodeURIComponent(value)}`;
     if (domain) {
         if (!/^[a-zA-Z0-9._-]+$/.test(domain)) {
-            console.warn('AI12Z: Invalid cookie domain characters');
+            console.warn("AI12Z: Invalid cookie domain characters");
             return false;
         }
         cookie += `; Domain=${domain}`;
@@ -797,12 +869,12 @@ function getValidCookieDomain(subDomain) {
     if (typeof window === "undefined") {
         return undefined;
     }
-    const bare = subDomain.replace(/^\./, '');
+    const bare = subDomain.replace(/^\./, "");
     const currentHost = window.location.hostname;
-    if (currentHost === bare || currentHost.endsWith('.' + bare)) {
+    if (currentHost === bare || currentHost.endsWith("." + bare)) {
         return subDomain;
     }
-    console.warn('AI12Z: subDomain does not match current host');
+    console.warn("AI12Z: subDomain does not match current host");
     return undefined;
 }
 /**
@@ -811,7 +883,7 @@ function getValidCookieDomain(subDomain) {
  * @param options - Optional path and domain (must match original cookie)
  */
 function deleteJsonCookie(name, options = {}) {
-    const { path = '/', domain } = options;
+    const { path = "/", domain } = options;
     if (typeof document === "undefined") {
         return;
     }
@@ -822,6 +894,18 @@ const ai12zBotCss = () => `:host{font-family:var(--ai12zBot-v2-font-family) !imp
 
 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)}}`;
 
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 const Ai12zBot = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -893,6 +977,10 @@ const Ai12zBot = class {
         this.isRendered = false; // Flag to track if the component has been rendered
         this.showShortcutsDialog = false; // Keyboard shortcuts help dialog
         this.showLiveAgentEndDialog = false;
+        this.liveAgentSessionId = "";
+        this.liveAgentConversationId = "";
+        this.liveAgentProviderName = "salesforce";
+        this.liveAgentListenersRegistered = false;
         this.shortcuts = keyboardShortcuts.DEFAULT_SHORTCUTS;
         this.announceMessage = ""; // For accessibility announcements
         this.messageRefs = [];
@@ -1081,6 +1169,7 @@ const Ai12zBot = class {
                 if (this.isLiveAgent) {
                     this.messages = this.messages.slice(0, -1);
                     this.liveAgentEventHandler.sendMessage({ sessionId: "", message: this.inputEl.value });
+                    this.updateBotState();
                     if (this.inputEl.value) {
                         this.inputEl.value = "";
                     }
@@ -1108,7 +1197,7 @@ const Ai12zBot = class {
                 // 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) {
+                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
@@ -1140,6 +1229,7 @@ const Ai12zBot = class {
                         aiMessageBubble.setAttribute("data-bubbleText", bubbleText);
                         let html = converter.makeHtml(bubbleText);
                         this.updateConversations(html, message[0]);
+                        this.updateBotState();
                     }
                     setTimeout(() => {
                         this.scrollToBottom();
@@ -1187,6 +1277,8 @@ const Ai12zBot = class {
         this.handleAgentError = () => {
             this.addEventMessage("Something went wrong with Live Agent, please try again later");
             this.isLiveAgent = false;
+            this.liveAgentSessionId = "";
+            this.liveAgentConversationId = "";
             this.isTypingIndicatorVisible = false;
             this.liveAgentEventHandler.disconnectLiveAgent();
             this.clearEvents();
@@ -1201,6 +1293,8 @@ const Ai12zBot = class {
                 this.announce("Live agent chat ended");
             }
             this.isLiveAgent = false;
+            this.liveAgentSessionId = "";
+            this.liveAgentConversationId = "";
             this.isTypingIndicatorVisible = false;
             this.liveAgentButtonText = "Talk to a Live Agent";
             this.clearEvents();
@@ -1211,19 +1305,28 @@ const Ai12zBot = class {
                 if (this.isLiveAgentEnabled && this.currentDomId === "") {
                     this.currentDomId = this.messages[this.messages.length - 1].id;
                 }
-                const agentEventMessages = this.liveAgentEventHandler.addAgentEventMessage(event);
-                if (agentEventMessages) {
-                    // If the "Finding a live agent..." placeholder is still in the DOM, remove it then append new message
-                    this.removeFindingAgentPlaceholder();
-                    const currentDomElement = this.el.shadowRoot.querySelector(`#${this.currentDomId}`);
-                    if (currentDomElement) {
-                        currentDomElement.parentNode.appendChild(agentEventMessages);
-                    }
-                    if (this.inputEl) {
-                        this.inputEl.value = "";
-                    }
-                    this.currentDomId = "";
+                // Persist each system event into this.messages so they survive page reload
+                const systemMessages = event.map((evt) => ({
+                    id: evt.id || `system-${utils.generateUUID()}`,
+                    text: evt.text || "",
+                    type: "system",
+                    isUser: false,
+                    isLoading: false,
+                    timestamp: new Date(),
+                    images: [],
+                    conversationId: this.conversationId,
+                    formModel: {},
+                    surveyDomId: "",
+                    sender: evt.sender || null,
+                }));
+                this.messages = [...this.messages, ...systemMessages];
+                this.updateBotState();
+                // If the "Finding a live agent..." placeholder is still in the DOM, remove it then append new message
+                this.removeFindingAgentPlaceholder();
+                if (this.inputEl) {
+                    this.inputEl.value = "";
                 }
+                this.currentDomId = "";
             }
         };
         this.handleAgentSessionCreated = () => {
@@ -1237,6 +1340,12 @@ const Ai12zBot = class {
                     this.inputEl = inputEl;
             });
         };
+        this.handleAgentSessionInfo = (info) => {
+            this.liveAgentSessionId = (info === null || info === void 0 ? void 0 : info.sessionId) || "";
+            this.liveAgentConversationId = (info === null || info === void 0 ? void 0 : info.conversationId) || "";
+            this.isLiveAgent = true;
+            this.updateBotState();
+        };
         this.toggleBot = _e => {
             // e.stopPropagation()
             this.isToggled = !this.isToggled;
@@ -1274,6 +1383,7 @@ const Ai12zBot = class {
                     this.showWelcomeScreen = true;
                     this.toggleBot(e);
                     this.showHistory = false;
+                    this.updateBotState();
                     break;
             }
         };
@@ -1507,11 +1617,56 @@ const Ai12zBot = class {
             if (!botState.newChat) {
                 this.messages = [...(botState.messages || [])];
             }
+            // Restore live agent session identifiers so they can be used for recovery
+            if (botState.isLiveAgent && botState.liveAgentSessionId && botState.liveAgentConversationId) {
+                this.isLiveAgent = botState.isLiveAgent || true;
+                this.liveAgentSessionId = botState.liveAgentSessionId;
+                this.liveAgentConversationId = botState.liveAgentConversationId;
+                this.liveAgentProviderName = botState.liveAgentProviderName || "salesforce";
+                this.liveAgentButtonText = "End Live Agent chat";
+                // Schedule reconnection after the component has finished loading
+                setTimeout(() => this.recoverLiveAgentSession(), 0);
+            }
             setTimeout(() => {
                 this.scrollToBottom();
             }, 100);
         }
     }
+    async recoverLiveAgentSession() {
+        var _a, _b, _c, _d, _f, _g;
+        const liveAgentProviderNames = Object.keys((_c = (_b = (_a = this.botSettings) === null || _a === void 0 ? void 0 : _a.liveagent) === null || _b === void 0 ? void 0 : _b.providers) !== null && _c !== void 0 ? _c : {});
+        if (liveAgentProviderNames.length === 0 || !this.liveAgentSessionId || !this.liveAgentConversationId) {
+            return;
+        }
+        // const providerName = liveAgentProviderNames[0] as import("../../utils/liveagents/liveagent-factory-services").LiveAgentProviderType
+        const liveAgentConfig = (_g = (_f = (_d = this.botSettings) === null || _d === void 0 ? void 0 : _d.liveagent) === null || _f === void 0 ? void 0 : _f.providers[this.liveAgentProviderName]) !== null && _g !== void 0 ? _g : null;
+        if (!liveAgentConfig) {
+            return;
+        }
+        try {
+            this.registerLiveAgentListeners();
+            await this.liveAgentEventHandler.resumeLiveAgentSession(this.liveAgentProviderName, {
+                sessionId: this.liveAgentSessionId,
+                conversationId: this.liveAgentConversationId,
+                userId: this.visitorID,
+                config: liveAgentConfig,
+            });
+        }
+        catch (err) {
+            if (err instanceof LiveAgentAuthExpiredError) {
+                this.addEventMessage("Your live agent session has expired. Please reconnect.");
+                this.announce("Live agent session expired");
+            }
+            else {
+                console.warn("AI12Z: Failed to recover live agent session, ending gracefully:", err);
+            }
+            this.isLiveAgent = false;
+            this.liveAgentSessionId = "";
+            this.liveAgentConversationId = "";
+            this.liveAgentButtonText = "Talk to a Live Agent";
+            this.clearEvents();
+        }
+    }
     componentDidLoad() {
         globalStore.setBotElement(this.el); // register globally
         if (typeof window !== "undefined" && !window.Handlebars) {
@@ -1926,6 +2081,15 @@ const Ai12zBot = class {
                             this.isConnectingLiveAgent = false;
                         }
                     }
+                    if (data.liveAgent && !this.isLiveAgent && !this.isConnectingLiveAgent) {
+                        this.isConnectingLiveAgent = true;
+                        try {
+                            await this.connectLiveChat();
+                        }
+                        finally {
+                            this.isConnectingLiveAgent = false;
+                        }
+                    }
                     // ✅ Common cleanup
                     this.conversationId = data.conversationId;
                     // this.saveConversation()
@@ -2299,8 +2463,8 @@ const Ai12zBot = class {
         }
     }
     checkLiveAgentMode() {
-        var _a, _b;
-        const isLiveAgentConfigured = ((_a = this.botSettings) === null || _a === void 0 ? void 0 : _a.liveagent) && Object.keys((_b = this.botSettings) === null || _b === void 0 ? void 0 : _b.liveagent).length > 0;
+        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;
         /**
          * Check if live agent is enabled
          * If live agent is configured and there are more than one messages in the chat,
@@ -2333,8 +2497,10 @@ const Ai12zBot = class {
         var _a, _b, _c, _d;
         this.liveAgentEventHandler.disconnectLiveAgent();
         this.isLiveAgent = false;
+        this.liveAgentSessionId = "";
+        this.liveAgentConversationId = "";
         this.liveAgentButtonText = "Talk to a Live Agent";
-        this.sendMessage((_b = (_a = this.botSettings) === null || _a === void 0 ? void 0 : _a.llmMessageOnDisconnect) !== null && _b !== void 0 ? _b : "The live agent has been disconnected. Please do not initiate the live agent directive again.", (_d = (_c = this.botSettings) === null || _c === void 0 ? void 0 : _c.userMessageOnDisconnect) !== null && _d !== void 0 ? _d : "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();
     }
@@ -2350,6 +2516,9 @@ const Ai12zBot = class {
         }
     }
     registerLiveAgentListeners() {
+        if (this.liveAgentListenersRegistered)
+            return;
+        this.liveAgentListenersRegistered = true;
         ChatEventBus.on("FINDING_AGENT", this.findingAgent);
         ChatEventBus.on("AGENT_EVENT", this.agentEventHandler);
         ChatEventBus.on("TYPING_STARTED", this.handleTypingStarted);
@@ -2357,8 +2526,10 @@ const Ai12zBot = class {
         ChatEventBus.on("AGENT_MESSAGE", this.agentMessageCreated);
         ChatEventBus.on("AGENT_ERROR", this.handleAgentError);
         ChatEventBus.on("CONVERSATION_CLOSED", this.handleAgentConversationEnded);
+        ChatEventBus.on("AGENT_SESSION_INFO", this.handleAgentSessionInfo);
     }
     clearEvents() {
+        this.liveAgentListenersRegistered = false;
         ChatEventBus.off("FINDING_AGENT", this.findingAgent);
         ChatEventBus.off("AGENT_EVENT", this.agentEventHandler);
         ChatEventBus.off("AGENT_MESSAGE", this.agentMessageCreated);
@@ -2367,12 +2538,13 @@ const Ai12zBot = class {
         ChatEventBus.off("TYPING_STARTED", this.handleTypingStarted);
         ChatEventBus.off("TYPING_STOPPED", this.handleTypingStopped);
         ChatEventBus.off("AGENT_SESSION_CREATED", this.handleAgentSessionCreated);
+        ChatEventBus.off("AGENT_SESSION_INFO", this.handleAgentSessionInfo);
     }
     async connectLiveChat() {
-        var _a, _b, _c, _d, _f, _g, _h;
+        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         this.announce("Connecting to live agent");
         this.clearEvents();
-        const liveAgentProviderNames = Object.keys((_b = (_a = this.botSettings) === null || _a === void 0 ? void 0 : _a.liveagent) !== null && _b !== void 0 ? _b : {});
+        const liveAgentProviderNames = Object.keys((_c = (_b = (_a = this.botSettings) === null || _a === void 0 ? void 0 : _a.liveagent) === null || _b === void 0 ? void 0 : _b.providers) !== null && _c !== void 0 ? _c : {});
         if (liveAgentProviderNames.length === 0) {
             console.error("No live agent provider found in bot settings");
             this.announce("Live agent is not configured");
@@ -2381,7 +2553,9 @@ const Ai12zBot = class {
         if (liveAgentProviderNames.length > 1) {
             console.warn("Multiple live agent providers found, using the first one");
         }
-        let liveAgentSettings = (_d = (_c = this.botSettings) === null || _c === void 0 ? void 0 : _c.liveagent[liveAgentProviderNames[0]]) !== null && _d !== void 0 ? _d : null;
+        let liveAgentSettings = (_h = (_g = (_f = (_d = this.botSettings) === null || _d === void 0 ? void 0 : _d.liveagent) === null || _f === void 0 ? void 0 : _f.providers) === null || _g === void 0 ? void 0 : _g[liveAgentProviderNames[0]]) !== null && _h !== void 0 ? _h : null;
+        let liveAgentBusinessHours = (_l = (_k = (_j = this.botSettings) === null || _j === void 0 ? void 0 : _j.liveagent) === null || _k === void 0 ? void 0 : _k.businessHours) !== null && _l !== void 0 ? _l : null;
+        let liveAgentTimezone = (_p = (_o = (_m = this.botSettings) === null || _m === void 0 ? void 0 : _m.liveagent) === null || _o === void 0 ? void 0 : _o.timezone) !== null && _p !== void 0 ? _p : null;
         if (!liveAgentSettings) {
             console.error("No live agent settings found for the provider", liveAgentProviderNames[0]);
             this.announce("Live agent settings are unavailable");
@@ -2404,6 +2578,27 @@ const Ai12zBot = class {
                 messageHistory: messageHistory,
                 extraPrechatFormDetails,
             };
+            this.liveAgentProviderName = liveAgentProviderNames[0];
+            if (liveAgentBusinessHours && liveAgentTimezone) {
+                let isWithinBusinessHours;
+                try {
+                    isWithinBusinessHours = botHelpers.checkBusinessHours(liveAgentBusinessHours, liveAgentTimezone);
+                }
+                catch (e) {
+                    console.error("AI12Z: unexpected error evaluating business hours — blocking live agent connection", e);
+                    this.announce("Unexpected error evaluating business hours. Live agent connection blocked.");
+                    this.addEventMessage("Unexpected error evaluating business hours. Please try again later.");
+                    this.isTypingIndicatorVisible = false;
+                    return;
+                }
+                if (!isWithinBusinessHours) {
+                    const outsideHoursMsg = (_r = (_q = liveAgentSettings.config) === null || _q === void 0 ? void 0 : _q.outsideBusinessHoursMessage) !== null && _r !== void 0 ? _r : "Our live agents are currently offline. Please try again during our business hours.";
+                    this.addEventMessage(outsideHoursMsg);
+                    this.announce("Live agents are currently offline");
+                    this.isTypingIndicatorVisible = false;
+                    return;
+                }
+            }
             if (liveAgentProviderNames[0] === "liveagent") {
                 if (!this.liveAgentRef) {
                     this.isTypingIndicatorVisible = false;
@@ -2419,7 +2614,7 @@ const Ai12zBot = class {
             else {
                 // Coerce to number; enforce minimum of 5 s to prevent misconfigured values;
                 // fall back to 30 s when unset, non-numeric, or below the minimum.
-                const rawWait = Number((_f = liveAgentSettings === null || liveAgentSettings === void 0 ? void 0 : liveAgentSettings.config) === null || _f === void 0 ? void 0 : _f.maxWaitTime);
+                const rawWait = Number((_s = liveAgentSettings === null || liveAgentSettings === void 0 ? void 0 : liveAgentSettings.config) === null || _s === void 0 ? void 0 : _s.maxWaitTime);
                 const waitSeconds = Number.isFinite(rawWait) && rawWait >= 5 ? rawWait : 300;
                 const timeoutMs = waitSeconds * 1000;
                 // Step 1: register all listeners before connecting so no events are missed
@@ -2431,6 +2626,9 @@ const Ai12zBot = class {
                 catch (err) {
                     console.error("Live agent connection error:", err);
                     this.isTypingIndicatorVisible = false;
+                    this.liveAgentSessionId = "";
+                    this.liveAgentConversationId = "";
+                    this.updateBotState();
                     this.addEventMessage("Issue connecting to live agent. Please try again later.");
                     this.announce("Issue connecting to live agent. Please try again later.");
                     this.liveAgentEventHandler.disconnectLiveAgent();
@@ -2454,13 +2652,16 @@ const Ai12zBot = class {
                 }
                 catch (error) {
                     // --- FAILURE LOGIC (TIMEOUT) ---
+                    this.liveAgentSessionId = "";
+                    this.liveAgentConversationId = "";
                     this.isLiveAgent = false;
                     this.isTypingIndicatorVisible = false;
-                    const timeoutMsg = (_h = (_g = liveAgentSettings.config) === null || _g === void 0 ? void 0 : _g.maxWaitMessage) !== null && _h !== void 0 ? _h : "Sorry, no agents are available at the moment.";
+                    const timeoutMsg = (_u = (_t = liveAgentSettings.config) === null || _t === void 0 ? void 0 : _t.maxWaitMessage) !== null && _u !== void 0 ? _u : "Sorry, no agents are available at the moment.";
                     this.removeFindingAgentPlaceholder();
                     this.addEventMessage(timeoutMsg);
                     this.liveAgentEventHandler.disconnectLiveAgent();
                     this.clearEvents();
+                    this.updateBotState();
                     this.announce("Agents are not available at this time.");
                     // console.warn("Connection failed:", error.message)
                 }
@@ -2514,6 +2715,10 @@ const Ai12zBot = class {
             projectId: (_c = this.botSettings) === null || _c === void 0 ? void 0 : _c.pId,
             configId: (_d = this.botSettings) === null || _d === void 0 ? void 0 : _d._id.$oid,
             newChat: this.messages.length === 0 ? true : false,
+            isLiveAgent: this.isLiveAgent,
+            liveAgentProviderName: this.liveAgentProviderName,
+            liveAgentSessionId: this.liveAgentSessionId,
+            liveAgentConversationId: this.liveAgentConversationId,
         };
         if (this.messages.length === 0) {
             this.conversationId = "";
@@ -2521,7 +2726,8 @@ const Ai12zBot = class {
         try {
             sessionStorage.setItem(sessionKey, JSON.stringify(newState));
             if (this.botSettings.cookies && getValidCookieDomain(this.botSettings.subDomain)) {
-                setJsonCookie(sessionKey, newState, { domain: this.botSettings.subDomain });
+                const cookieState = __rest(newState, ["liveAgentSessionId", "liveAgentConversationId"]);
+                setJsonCookie(sessionKey, cookieState, { domain: this.botSettings.subDomain });
             }
         }
         catch (error) {
@@ -2536,7 +2742,7 @@ const Ai12zBot = class {
         }
     }
     render() {
-        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _w;
+        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _w, _x, _y;
         if (!this.canRender) {
             return (index.h(index.Host, null, index.h("span", { style: { display: "none" } }, "Failed to load ai12z bot control due to insufficient fund")));
         }
@@ -2550,7 +2756,7 @@ const Ai12zBot = class {
                 display: this.isExpanded && this.isOpened ? "grid" : "none",
                 opacity: this.isExpanded && this.isOpened ? "1" : "0",
                 pointerEvents: this.isExpanded && this.isOpened ? "all" : "none",
-            } }), index.h("div", { class: "modal", "data-testid": "modal", "aria-hidden": "false", role: "dialog", "aria-modal": "true", tabindex: "-1", style: { display: this.isOpened ? "grid" : "none", opacity: this.isOpened ? "1" : "0", transform: this.isOpened ? "none" : "translateY(100%)" } }, index.h("header", { role: "banner" }, index.h("div", { class: "flex bg-white overflow-hidden border-b border-gray-90 border-solid md:pl-3 pl-4 justify-end md:rounded-t-xl items-center toolbar" }, index.h("div", { class: "flex gap-1 toolbar-overflow-actions" }, this.isLiveAgentEnabled && ((_g = (_f = this.botSettings) === null || _f === void 0 ? void 0 : _f.liveagent) === null || _g === void 0 ? void 0 : _g.liveagent) && (index.h("live-agent-chat", { config: (_j = (_h = this.botSettings) === null || _h === void 0 ? void 0 : _h.liveagent) === null || _j === void 0 ? void 0 : _j.liveagent, ref: el => (this.liveAgentRef = el) })), !this.showHistory && (index.h("button", { class: "rounded-full flex items-center justify-center disabled:cursor-not-allowed bg-transparent hover:bg-blue-95 disabled:bg-transparent disabled:hover:bg-transparent h-6 w-6 bot-btn-primary", tabindex: "0", "aria-label": "options menu", "aria-haspopup": "menu", "aria-expanded": this.isToggled ? "true" : "false", "aria-controls": "dropdown-menu", onClick: e => {
+            } }), index.h("div", { class: "modal", "data-testid": "modal", "aria-hidden": "false", role: "dialog", "aria-modal": "true", tabindex: "-1", style: { display: this.isOpened ? "grid" : "none", opacity: this.isOpened ? "1" : "0", transform: this.isOpened ? "none" : "translateY(100%)" } }, index.h("header", { role: "banner" }, index.h("div", { class: "flex bg-white overflow-hidden border-b border-gray-90 border-solid md:pl-3 pl-4 justify-end md:rounded-t-xl items-center toolbar" }, index.h("div", { class: "flex gap-1 toolbar-overflow-actions" }, this.isLiveAgentEnabled && ((_h = (_g = (_f = this.botSettings) === null || _f === void 0 ? void 0 : _f.liveagent) === null || _g === void 0 ? void 0 : _g.providers) === null || _h === void 0 ? void 0 : _h.liveagent) && (index.h("live-agent-chat", { config: (_l = (_k = (_j = this.botSettings) === null || _j === void 0 ? void 0 : _j.liveagent) === null || _k === void 0 ? void 0 : _k.providers) === null || _l === void 0 ? void 0 : _l.liveagent, ref: el => (this.liveAgentRef = el) })), !this.showHistory && (index.h("button", { class: "rounded-full flex items-center justify-center disabled:cursor-not-allowed bg-transparent hover:bg-blue-95 disabled:bg-transparent disabled:hover:bg-transparent h-6 w-6 bot-btn-primary", tabindex: "0", "aria-label": "options menu", "aria-haspopup": "menu", "aria-expanded": this.isToggled ? "true" : "false", "aria-controls": "dropdown-menu", onClick: e => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.toggleBot(e);
@@ -2569,7 +2775,7 @@ const Ai12zBot = class {
                 this.handleLiveAgentToolbarAction();
             }, onToggledChange: event => {
                 this.isToggled = event.detail;
-            } })), ((_k = this.botSettings) === null || _k === void 0 ? void 0 : _k.botLogo) && index.h("img", { src: (_l = this.botSettings) === null || _l === void 0 ? void 0 : _l.botLogo, class: "w-8 h-8 rounded-lg", alt: "Bot Logo" }), index.h("h2", { class: "flex-1 pl-2 heading text-body1" }, (_m = this.botSettings) === null || _m === void 0 ? void 0 : _m.botName), index.h("div", { class: "buttons flex gap-2 p-[10px]" }, this.isLiveAgent && (index.h("button", { "aria-label": "End Live Agent", title: "End Live Agent", onClick: () => this.openEndLiveAgentDialog() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#151313" }, index.h("path", { d: "m136-304-92-90q-12-12-12-28t12-28q88-95 203-142.5T480-640q118 0 232.5 47.5T916-450q12 12 12 28t-12 28l-92 90q-11 11-25.5 12t-26.5-8l-116-88q-8-6-12-14t-4-18v-114q-38-12-78-19t-82-7q-42 0-82 7t-78 19v114q0 10-4 18t-12 14l-116 88q-12 9-26.5 8T136-304Zm104-198q-29 15-56 34.5T128-424l40 40 72-56v-62Zm480 2v60l72 56 40-38q-29-26-56-45t-56-33Zm-480-2Zm480 2Z" })))), this.messages.length > 0 && (index.h("button", { class: "rounded-full flex items-center justify-center disabled:cursor-not-allowed bg-transparent hover:bg-blue-95 disabled:bg-transparent disabled:hover:bg-transparent h-6 w-6 bot-btn-primary", tabindex: "0", onClick: e => {
+            } })), ((_m = this.botSettings) === null || _m === void 0 ? void 0 : _m.botLogo) && index.h("img", { src: (_o = this.botSettings) === null || _o === void 0 ? void 0 : _o.botLogo, class: "w-8 h-8 rounded-lg", alt: "Bot Logo" }), index.h("h2", { class: "flex-1 pl-2 heading text-body1" }, (_p = this.botSettings) === null || _p === void 0 ? void 0 : _p.botName), index.h("div", { class: "buttons flex gap-2 p-[10px]" }, this.isLiveAgent && (index.h("button", { "aria-label": "End Live Agent", title: "End Live Agent", onClick: () => this.openEndLiveAgentDialog() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#151313" }, index.h("path", { d: "m136-304-92-90q-12-12-12-28t12-28q88-95 203-142.5T480-640q118 0 232.5 47.5T916-450q12 12 12 28t-12 28l-92 90q-11 11-25.5 12t-26.5-8l-116-88q-8-6-12-14t-4-18v-114q-38-12-78-19t-82-7q-42 0-82 7t-78 19v114q0 10-4 18t-12 14l-116 88q-12 9-26.5 8T136-304Zm104-198q-29 15-56 34.5T128-424l40 40 72-56v-62Zm480 2v60l72 56 40-38q-29-26-56-45t-56-33Zm-480-2Zm480 2Z" })))), this.messages.length > 0 && (index.h("button", { class: "rounded-full flex items-center justify-center disabled:cursor-not-allowed bg-transparent hover:bg-blue-95 disabled:bg-transparent disabled:hover:bg-transparent h-6 w-6 bot-btn-primary", tabindex: "0", onClick: e => {
                 e.preventDefault();
                 this.messages = [...[]];
                 // this.conversationId = ""
@@ -2597,12 +2803,16 @@ const Ai12zBot = class {
                 this.updateBotState();
                 this.announce("Chat minimized");
                 this.minimize.emit("minimize");
-            } }, index.h("i", { class: "block wes-icon--loading text-body2 modal-toolbar-icon", title: "Minimize Bot" }, index.h("svg", { viewBox: "0 0 26 26", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M25 24.25C25 24.65 24.65 25 24.25 25H1.75C1.35 25 1 24.65 1 24.25V22.75C1 22.35 1.35 22 1.75 22H24.25C24.65 22 25 22.35 25 22.75V24.25Z" }))))))), index.h("div", { class: "flex-1 flex flex-col main", role: "main", "aria-labelledby": "chat-main-heading", id: "main-content", tabindex: "-1" }, index.h("h1", { id: "chat-main-heading", class: "sr-only" }, "Chat"), index.h("div", { class: "h-full flex flex-col chat-body" }, index.h("div", { class: "px-5 flex-[1_1_0] min-h-[calc(100%-1px)] flex flex-col gap-y-3 @md:px-3 messages-container", role: "region", "aria-labelledby": "messages-region-heading" }, index.h("h2", { id: "messages-region-heading", class: "sr-only" }, "Messages"), this.showWelcomeScreen && index.h("div", { class: "@md:px-6 pb-3 @md:pb-7 @md:pt-8 pt-5 text-display5", innerHTML: (_p = (_o = this.botSettings) === null || _o === void 0 ? void 0 : _o.welcome) === null || _p === void 0 ? void 0 : _p.message }), this.messages.length > 0 &&
+            } }, index.h("i", { class: "block wes-icon--loading text-body2 modal-toolbar-icon", title: "Minimize Bot" }, index.h("svg", { viewBox: "0 0 26 26", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M25 24.25C25 24.65 24.65 25 24.25 25H1.75C1.35 25 1 24.65 1 24.25V22.75C1 22.35 1.35 22 1.75 22H24.25C24.65 22 25 22.35 25 22.75V24.25Z" }))))))), index.h("div", { class: "flex-1 flex flex-col main", role: "main", "aria-labelledby": "chat-main-heading", id: "main-content", tabindex: "-1" }, index.h("h1", { id: "chat-main-heading", class: "sr-only" }, "Chat"), index.h("div", { class: "h-full flex flex-col chat-body" }, index.h("div", { class: "px-5 flex-[1_1_0] min-h-[calc(100%-1px)] flex flex-col gap-y-3 @md:px-3 messages-container", role: "region", "aria-labelledby": "messages-region-heading" }, index.h("h2", { id: "messages-region-heading", class: "sr-only" }, "Messages"), this.showWelcomeScreen && index.h("div", { class: "@md:px-6 pb-3 @md:pb-7 @md:pt-8 pt-5 text-display5", innerHTML: (_r = (_q = this.botSettings) === null || _q === void 0 ? void 0 : _q.welcome) === null || _r === void 0 ? void 0 : _r.message }), this.messages.length > 0 &&
             !this.showHistory &&
             this.messages.map((message, idx) => {
-                var _a, _b, _c, _d;
                 // const showAvatar = !message.isUser && (idx === this.messages.length - 1 || this.messages[idx + 1]?.isUser === true)
                 // const email = ""
+                var _a, _b, _c, _d;
+                // Render system event messages (e.g. "Agent has joined the chat") as a centered banner
+                if (message.type === "system") {
+                    return (index.h("div", { class: "flex justify-center pb-3 message-item", role: "listitem", tabindex: -1, ref: el => (this.messageRefs[idx] = el), "aria-label": message.text }, index.h("span", { class: "text-[10px] font-medium text-gray-500 tracking-wide border-b border-gray-200 py-1 px-3 text-center" }, message.text)));
+                }
                 return (index.h("div", { class: `flex pb-3 gap-x-2 @md:gap-x-3 
                     ${message.isUser ? "self-end" : ""}
                     ${message.isUser ? "justify-end" : ""} end-user-message message-item`, style: { opacity: "1", transform: "none" }, role: "listitem", tabindex: idx === this.focusedIndex ? 0 : -1, onKeyDown: e => this.handleMessageKeyNav(e, idx), ref: el => (this.messageRefs[idx] = el), "aria-label": `Message from ${message.isUser ? "User" : "Bot"}` }, message.isUser && !message.isHide && (index.h("div", { class: "flex flex-col items-end" }, index.h("div", { "data-testid": "message", class: "break-words @md:text-body2 box-border @md:pr-4 flex-1 rounded-lg py-2 px-4 user-msg text-body3", innerHTML: message.text, id: message.id, "aria-live": "polite", "aria-atomic": "false", "aria-label": message.text, role: "log" }, (_a = message === null || message === void 0 ? void 0 : message.images) === null || _a === void 0 ? void 0 : _a.map(img => {
@@ -2615,7 +2825,7 @@ const Ai12zBot = class {
                         "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 && (index.h("div", { class: "w-full rounded-md", id: "spinner" }, index.h("div", { class: "flex animate-pulse space-x-4" }, index.h("div", { class: "flex-1 space-y-3 py-1" }, index.h("div", { class: "h-4 rounded bg-gray-200" }), index.h("div", { class: "space-y-3" }, index.h("div", { class: "grid grid-cols-3 gap-4" }, index.h("div", { class: "col-span-2 h-4 rounded bg-gray-200" }), index.h("div", { class: "col-span-1 h-4 rounded bg-gray-200" })), index.h("div", { class: "h-4 rounded bg-gray-200" }))))))), message.text !== "" && message.showIcon && ((_c = this.botSettings.showMessageIcons) !== null && _c !== void 0 ? _c : true) && (index.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) || "" })), index.h("div", { class: "text-gray-30 pt-2 text-body4" }, this.botSettings.botName, " \u2022 ", message.timestamp)))));
-            }), this.showHistory && (index.h("chatbot-history", { chatList: this.conversationHistory, botName: (_q = this.botSettings) === null || _q === void 0 ? void 0 : _q.botName, styles: this.customStyle, scripts: this.customJS })), index.h("div", { class: "h-px pt-2px", style: { overflowAnchor: "auto" } })), index.h("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", class: "sr-only" }, this.announceMessage)))), index.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 && (index.h("div", { class: `absolute right-4 md:right-0 border-2 border-white border-solid rounded-full ${this.isContent ? "" : "top-0"} minimize-input` }, index.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 && (index.h("chatbot-history", { chatList: this.conversationHistory, botName: (_s = this.botSettings) === null || _s === void 0 ? void 0 : _s.botName, styles: this.customStyle, scripts: this.customJS })), index.h("div", { class: "h-px pt-2px", style: { overflowAnchor: "auto" } })), index.h("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", class: "sr-only" }, this.announceMessage)))), index.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 && (index.h("div", { class: `absolute right-4 md:right-0 border-2 border-white border-solid rounded-full ${this.isContent ? "" : "top-0"} minimize-input` }, index.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;
@@ -2647,12 +2857,12 @@ const Ai12zBot = class {
                 .filter(Boolean)
                 .join(" "), "aria-placeholder": this.isLiveAgent
                 ? "Type a message to the agent..."
-                : ((_r = this.botSettings) === null || _r === void 0 ? void 0 : _r.botPlaceholderText) !== ""
-                    ? (_s = this.botSettings) === null || _s === void 0 ? void 0 : _s.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..."
                 : ((_t = this.botSettings) === null || _t === void 0 ? void 0 : _t.botPlaceholderText) !== ""
                     ? (_u = this.botSettings) === null || _u === void 0 ? void 0 : _u.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
                     : "Ask me anything", ref: el => (this.inputEl = el), onKeyUp: _e => {
                 this.adjustHeight();
             }, onKeyDown: e => {
@@ -2714,8 +2924,8 @@ const Ai12zBot = class {
             }, onClick: () => {
                 this.openChat();
             }
-        }, this.isBot && index.h("slot", { name: "bot" }), !this.isBot && (index.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" }, index.h("div", { class: "w-10 h-10 flex items-center justify-center bg-white rounded-full border relative" }, this.botSettings.botLaunchIcon && index.h("img", { src: this.botSettings.botLaunchIcon, alt: "bot icon", class: "w-8 h-8 rounded-lg" }), !this.botSettings.botLaunchIcon && (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "#2095ae", "aria-hidden": "true" }, index.h("g", { "stroke-width": "0" }), index.h("g", { "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("g", null, " ", index.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" }), " ")))), index.h("span", { class: "bot-name" }, " ", (_w = this.botSettings) === null || _w === void 0 ? void 0 :
-            _w.botName, " ")))))), index.h("keyboard-shortcuts-dialog", { show: this.showShortcutsDialog, shortcuts: this.shortcuts, onCloseDialog: () => {
+        }, this.isBot && index.h("slot", { name: "bot" }), !this.isBot && (index.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" }, index.h("div", { class: "w-10 h-10 flex items-center justify-center bg-white rounded-full border relative" }, this.botSettings.botLaunchIcon && index.h("img", { src: this.botSettings.botLaunchIcon, alt: "bot icon", class: "w-8 h-8 rounded-lg" }), !this.botSettings.botLaunchIcon && (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "#2095ae", "aria-hidden": "true" }, index.h("g", { "stroke-width": "0" }), index.h("g", { "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("g", null, " ", index.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" }), " ")))), index.h("span", { class: "bot-name" }, " ", (_y = this.botSettings) === null || _y === void 0 ? void 0 :
+            _y.botName, " ")))))), index.h("keyboard-shortcuts-dialog", { show: this.showShortcutsDialog, shortcuts: this.shortcuts, onCloseDialog: () => {
                 this.showShortcutsDialog = false;
             } }), index.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();