ai12z 3.3.5-alpha.0 → 3.4.0

package/dist/cjs/{ai12z-bot-7aa40096.js → ai12z-bot-b00dcf4f.js}

@@ -5,8 +5,8 @@ const index$3 = require('./index-286c64af.js');
 const showdown = require('./showdown-f472e772.js');
 const index$2 = require('./index-8a74626f.js');
 const logger$1 = require('./logger-63779020.js');
-const utils = require('./utils-e03d1710.js');
-const index$1 = require('./index-19719993.js');
+const utils = require('./utils-3a34a091.js');
+const index$1 = require('./index-7a98f320.js');
 const globalStore = require('./global-store-1279b6b4.js');
 
 // ILiveAgentProvider.ts
@@ -677,6 +677,7 @@ const Ai12zBot = class {
         this.customJS = "";
         this.dataOverrideFunction = null;
         this.imagesBase64List = [];
+        this.ignoreChunks = false;
         this.toggleBot = e => {
             e.stopPropagation();
             this.isToggled = !this.isToggled;
@@ -698,6 +699,11 @@ const Ai12zBot = class {
             // console.log("survey results", sender.jsonObj)
             // const results = JSON.stringify(sender.data)
             let results = JSON.parse(JSON.stringify(sender.data));
+            utils.submitForm(this.dataKey, this.dataMode, sender.keyName, results).then(res => {
+                console.log("Form submission response:", res);
+            }).catch(err => {
+                console.error("Form submission error:", err);
+            });
             // results.description = sender.jsonObj.description ? sender.jsonObj.description : ""
             // const completedHtml = sender.jsonObj.completedHtml ? sender.jsonObj.completedHtml : "Thank You!"
             // const completeText = sender.jsonObj.completeText ? sender.jsonObj.completeText : "Submit"
@@ -807,17 +813,17 @@ const Ai12zBot = class {
             this.handleSend(label);
         };
         this.handleMessage = (data, aiMessageId) => {
-            var _a;
             const converter = new showdown.showdown.Converter();
             // const aiMessageBubble = document.getElementById(aiMessageId);
-            const aiMessageBubble = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#${aiMessageId}`);
-            // const aiMessageBubble = this.element.querySelector('.ai12z-suggest-answer')
+            // const aiMessageBubble = await waitForElement(`#${aiMessageId}`, this.el)
+            const aiMessageBubble = this.el.shadowRoot.querySelector(`#${aiMessageId}`);
             if (!aiMessageBubble) {
                 console.error(`Message bubble with ID ${aiMessageId} not found.`);
                 return;
             }
             var bubbleText = aiMessageBubble.getAttribute("data-bubbleText") || "";
             bubbleText = bubbleText + data;
+            // console.log("bubbleText", bubbleText)
             aiMessageBubble.setAttribute("data-bubbleText", bubbleText);
             // Assuming data is a string containing the message content
             let html = converter.makeHtml(bubbleText);
@@ -872,14 +878,17 @@ const Ai12zBot = class {
                     timestamp: timestamp,
                     images: this.imagesBase64List,
                     conversationId: this.conversationId,
+                    isLoading: false,
                     formModel: {},
                     surveyDomId: "",
                 },
                 {
                     text: this.botSettings.maxQuestion > 0 && this.questionCounter > this.botSettings.maxQuestion ? this.botSettings.msgLimit : "",
                     isUser: false,
-                    id: `chatbot-${utils.generateUUID()}`,
+                    id: '',
+                    // id: this.isLiveAgent ? `chatbot-${generateUUID()}` : "",
                     timestamp: "",
+                    isLoading: true,
                     images: [],
                     conversationId: this.conversationId,
                     formModel: {},
@@ -898,8 +907,9 @@ const Ai12zBot = class {
                 this.inputEl.value = "";
             }
             else {
-                this.currentDomId = this.messages[this.messages.length - 1].id;
+                this.currentDomId = "";
                 if (this.isLiveAgent) {
+                    this.messages = this.messages.slice(0, -1);
                     this.liveAgentEventHandler.sendMessage({ sessionId: "", message: this.inputEl.value });
                     if (this.inputEl.value) {
                         this.inputEl.value = "";
@@ -908,6 +918,8 @@ const Ai12zBot = class {
                 }
                 else {
                     this.checkLiveAgentMode();
+                    this.isStreaming = true;
+                    this.ignoreChunks = false;
                     this.invokeSocket();
                 }
             }
@@ -994,6 +1006,7 @@ const Ai12zBot = class {
         this.scriptArray = [];
         this.isAnimated = false;
         this.isMinimized = false;
+        this.isStreaming = false;
         this.isOpened = false;
         this.isContent = false;
         this.isExpanded = undefined;
@@ -1424,10 +1437,23 @@ const Ai12zBot = class {
             }
         }
     }
-    watchStateHandler(_newValue, _oldValue) {
+    // @Watch("currentDomId")
+    // watchStateHandler(_newValue: boolean, _oldValue: boolean) {
+    //   this.socket.off("response")
+    //   this.socket.off("end_response")
+    //   // console.log("currentDomId changed")
+    //   // console.log("questionCounter", this.botSettings.maxQuestion)
+    //   if (this.botSettings.maxQuestion === undefined || this.botSettings.maxQuestion === 0) {
+    //     this.botSettings.maxQuestion = 0
+    //     this.handleBotMessages()
+    //   } else if (this.questionCounter <= this.botSettings.maxQuestion) {
+    //     this.handleBotMessages()
+    //   }
+    // }
+    handleSocketResponse() {
         this.socket.off("response");
         this.socket.off("end_response");
-        // console.log("currentDomId changed")
+        console.log("currentDomId changed");
         // console.log("questionCounter", this.botSettings.maxQuestion)
         if (this.botSettings.maxQuestion === undefined || this.botSettings.maxQuestion === 0) {
             this.botSettings.maxQuestion = 0;
@@ -1442,6 +1468,7 @@ const Ai12zBot = class {
             text: "",
             isUser: false,
             id: `chatbot-${utils.generateUUID()}`,
+            isLoading: true,
             timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
             images: [],
             conversationId: this.conversationId,
@@ -1658,103 +1685,122 @@ const Ai12zBot = class {
     }
     handleBotMessages() {
         // const domId = this.messages[this.messages.length - 1].id
-        this.socket.on("response", event => {
-            this.handleMessage(event.data, `${this.currentDomId}`); // Use the unique ID to handle messages
+        this.socket.on("response", async (event) => {
+            // console.log("response", event)
+            if (!this.currentDomId || this.currentDomId === '') {
+                this.currentDomId = `chatbot-${utils.generateUUID()}`;
+                // Update the last message with the generated ID
+                if (this.messages.length > 0) {
+                    this.messages[this.messages.length - 1].id = this.currentDomId;
+                    this.messages = [...this.messages]; // Trigger reactivity
+                }
+            }
+            requestAnimationFrame(() => {
+                if (!this.ignoreChunks) {
+                    this.messages[this.messages.length - 1].isLoading = false;
+                    this.handleMessage(event.data, this.currentDomId);
+                }
+            });
         });
         this.socket.on("end_response", data => {
-            // console.log("end_response")
+            // console.log("end_response", this.currentDomId)
             this.messageReceived.emit(data);
-            const converter = new showdown.showdown.Converter();
-            let finalHtml = converter.makeHtml(data.answer);
-            // document.getElementById("messageId").innerHTML = finalHtml;
-            finalHtml = this.updateAnchorTags(finalHtml);
-            finalHtml = utils.updateButtonEvents(finalHtml).body;
-            this.buttons = utils.updateButtonEvents(finalHtml).buttons;
-            this.searchResults = data;
-            this.conversationId = data.conversationId;
-            if (finalHtml.indexOf("[control") > -1) {
-                // console.log("controlType", data.controlType)
-                switch (data.controlType) {
-                    case "form":
-                        this.surveyDomId = "surveyElement-" + utils.generateUUID();
-                        finalHtml = finalHtml.replace(RegExp(/\[[^>]*]/gm), `<div id=${this.surveyDomId} style="width:${this.botSettings.botVersion === "v1" ? "330px" : "100%"}" class="survey-container"></div>`);
-                        // finalHtml = `<div id=${this.surveyDomId} style="width:${this.botSettings.botVersion === "v1" ? "330px" : "100%"}"></div>`
-                        this.el.shadowRoot.querySelector(`#${this.currentDomId}`).innerHTML = finalHtml;
-                        this.updateConversations(finalHtml, data);
-                        break;
-                    case "carousel":
-                    case "list":
-                    case "template":
-                        // if (data.controlType && data.controlType !== null) {
-                        //   const newContent = splitContent(finalHtml)
-                        //   finalHtml = newContent.before
-                        //   this.updateConversations(finalHtml, data)
-                        //   const newMessage = this.generateMessage()
-                        //   this.messages = [...this.messages, newMessage]
-                        //   setTimeout(() => {
-                        //     data.controlType === "template" ? this.processTemplateData(newMessage, data) : this.processChatData(newMessage, data)
-                        //   }, 2000)
-                        //   if (newContent.after.trim().length > 0) {
-                        //     const afterMessage = this.generateMessage()
-                        //     afterMessage.text = newContent.after
-                        //     this.messages = [...this.messages, afterMessage]
-                        //     setTimeout(() => {
-                        //       if (afterMessage.id) {
-                        //         const bubbleEle = this.el.shadowRoot.querySelector(`#${afterMessage.id}`)
-                        //         if (bubbleEle && (bubbleEle.querySelector("#spinner") as HTMLElement)) {
-                        //           ;(bubbleEle.querySelector("#spinner") as HTMLElement).style.display = "none"
-                        //         }
-                        //       }
-                        //     }, 500)
-                        //   }
-                        // }
-                        if (data.controlType) {
-                            const newContent = utils.splitContent(finalHtml);
-                            finalHtml = newContent.before;
-                            this.updateConversations(finalHtml, data);
-                            const newMessage = this.generateMessage();
-                            const messagesToAdd = [newMessage];
-                            // Add after message if any
-                            if (newContent.after.trim()) {
-                                const afterMessage = this.generateMessage();
-                                afterMessage.text = newContent.after;
-                                afterMessage.id = afterMessage.id || `chatbot-${utils.generateUUID()}`;
-                                messagesToAdd.push(afterMessage);
-                            }
-                            // 🔥 Single batched update
-                            this.messages = [...this.messages, ...messagesToAdd];
-                            // 🔁 Wait for DOM update (1 frame + microtask delay)
-                            requestAnimationFrame(() => {
-                                setTimeout(() => {
-                                    if (data.controlType === "template") {
-                                        this.processTemplateData(newMessage, data);
-                                    }
-                                    else {
-                                        this.processChatData(newMessage, data);
-                                    }
-                                    // Hide spinner for afterMessage if exists
-                                    const afterMessage = messagesToAdd[1];
-                                    if (afterMessage === null || afterMessage === void 0 ? void 0 : afterMessage.id) {
-                                        const bubbleEle = this.el.shadowRoot.querySelector(`#${afterMessage.id}`);
-                                        const spinner = bubbleEle === null || bubbleEle === void 0 ? void 0 : bubbleEle.querySelector("#spinner");
-                                        if (spinner)
-                                            spinner.style.display = "none";
+            requestAnimationFrame(() => {
+                if (!this.ignoreChunks) {
+                    const converter = new showdown.showdown.Converter();
+                    let finalHtml = converter.makeHtml(data.answer);
+                    // document.getElementById("messageId").innerHTML = finalHtml;
+                    finalHtml = this.updateAnchorTags(finalHtml);
+                    finalHtml = utils.updateButtonEvents(finalHtml).body;
+                    this.buttons = utils.updateButtonEvents(finalHtml).buttons;
+                    this.searchResults = data;
+                    this.conversationId = data.conversationId;
+                    if (finalHtml.indexOf("[control") > -1) {
+                        // console.log("controlType", data.controlType)
+                        switch (data.controlType) {
+                            case "form":
+                                this.surveyDomId = "surveyElement-" + utils.generateUUID();
+                                finalHtml = finalHtml.replace(RegExp(/\[[^>]*]/gm), `<div id=${this.surveyDomId} style="width:${this.botSettings.botVersion === "v1" ? "330px" : "100%"}" class="survey-container"></div>`);
+                                // finalHtml = `<div id=${this.surveyDomId} style="width:${this.botSettings.botVersion === "v1" ? "330px" : "100%"}"></div>`
+                                this.el.shadowRoot.querySelector(`#${this.currentDomId}`).innerHTML = finalHtml;
+                                this.updateConversations(finalHtml, data);
+                                break;
+                            case "carousel":
+                            case "list":
+                            case "template":
+                                // if (data.controlType && data.controlType !== null) {
+                                //   const newContent = splitContent(finalHtml)
+                                //   finalHtml = newContent.before
+                                //   this.updateConversations(finalHtml, data)
+                                //   const newMessage = this.generateMessage()
+                                //   this.messages = [...this.messages, newMessage]
+                                //   setTimeout(() => {
+                                //     data.controlType === "template" ? this.processTemplateData(newMessage, data) : this.processChatData(newMessage, data)
+                                //   }, 2000)
+                                //   if (newContent.after.trim().length > 0) {
+                                //     const afterMessage = this.generateMessage()
+                                //     afterMessage.text = newContent.after
+                                //     this.messages = [...this.messages, afterMessage]
+                                //     setTimeout(() => {
+                                //       if (afterMessage.id) {
+                                //         const bubbleEle = this.el.shadowRoot.querySelector(`#${afterMessage.id}`)
+                                //         if (bubbleEle && (bubbleEle.querySelector("#spinner") as HTMLElement)) {
+                                //           ;(bubbleEle.querySelector("#spinner") as HTMLElement).style.display = "none"
+                                //         }
+                                //       }
+                                //     }, 500)
+                                //   }
+                                // }
+                                if (data.controlType) {
+                                    const newContent = utils.splitContent(finalHtml);
+                                    finalHtml = newContent.before;
+                                    this.updateConversations(finalHtml, data);
+                                    const newMessage = this.generateMessage();
+                                    const messagesToAdd = [newMessage];
+                                    // Add after message if any
+                                    if (newContent.after.trim()) {
+                                        const afterMessage = this.generateMessage();
+                                        afterMessage.text = newContent.after;
+                                        afterMessage.id = afterMessage.id || `chatbot-${utils.generateUUID()}`;
+                                        messagesToAdd.push(afterMessage);
                                     }
-                                }, 0);
-                            });
+                                    // 🔥 Single batched update
+                                    this.messages = [...this.messages, ...messagesToAdd];
+                                    // 🔁 Wait for DOM update (1 frame + microtask delay)
+                                    requestAnimationFrame(() => {
+                                        setTimeout(() => {
+                                            if (data.controlType === "template") {
+                                                this.processTemplateData(newMessage, data);
+                                            }
+                                            else {
+                                                this.processChatData(newMessage, data);
+                                            }
+                                            // Hide spinner for afterMessage if exists
+                                            const afterMessage = messagesToAdd[1];
+                                            if (afterMessage === null || afterMessage === void 0 ? void 0 : afterMessage.id) {
+                                                const bubbleEle = this.el.shadowRoot.querySelector(`#${afterMessage.id}`);
+                                                const spinner = bubbleEle === null || bubbleEle === void 0 ? void 0 : bubbleEle.querySelector("#spinner");
+                                                if (spinner)
+                                                    spinner.style.display = "none";
+                                            }
+                                        }, 0);
+                                    });
+                                }
                         }
+                    }
+                    else {
+                        const currentDomElement = this.el.shadowRoot.querySelector(`#${this.currentDomId}`);
+                        if (currentDomElement) {
+                            currentDomElement.style.width = "auto";
+                        }
+                        this.el.shadowRoot.querySelector(`#${this.currentDomId}`).innerHTML = finalHtml;
+                        this.updateConversations(finalHtml, data);
+                    }
+                    this.saveConversation();
+                    this.scrollToBottom();
+                    this.isStreaming = false;
                 }
-            }
-            else {
-                const currentDomElement = this.el.shadowRoot.querySelector(`#${this.currentDomId}`);
-                if (currentDomElement) {
-                    currentDomElement.style.width = "auto";
-                }
-                this.el.shadowRoot.querySelector(`#${this.currentDomId}`).innerHTML = finalHtml;
-                this.updateConversations(finalHtml, data);
-            }
-            this.saveConversation();
-            this.scrollToBottom();
+            });
         });
     }
     updateAnchorTags(htmlContent) {
@@ -1775,6 +1821,7 @@ const Ai12zBot = class {
             id: this.currentDomId,
             text: finalHtml,
             isUser: false,
+            isLoading: false,
             timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
             images: [],
             conversationId: this.conversationId,
@@ -1787,8 +1834,14 @@ const Ai12zBot = class {
             sender: (_g = data === null || data === void 0 ? void 0 : data.sender) !== null && _g !== void 0 ? _g : null,
         };
         this.addEventListeners(`#${this.currentDomId}`);
+        console.log("currrentDomid", this.currentDomId);
+        console.log("message", updatedmsg);
         this.messages = this.messages.map(item => (item.id === this.currentDomId ? updatedmsg : item));
-        requestAnimationFrame(() => this.checkHighlightcode(this.currentDomId));
+        requestAnimationFrame(() => {
+            this.checkHighlightcode(this.currentDomId);
+            // ✅ Reset for next message
+            this.currentDomId = '';
+        });
     }
     checkHighlightcode(highlightcodeId = "") {
         var _a;
@@ -1959,6 +2012,8 @@ const Ai12zBot = class {
         await new Promise(resolve => {
             this.socket.on("connect", () => {
                 // console.log("Connected to Socket.IO server")
+                // ✅ Set up listeners once when socket connects
+                this.handleSocketResponse();
                 resolve();
             });
         });
@@ -1997,6 +2052,14 @@ const Ai12zBot = class {
                 if (error) {
                     this.errored.emit(error);
                     console.error("Error:", error);
+                    this.currentDomId = `chatbot-${utils.generateUUID()}`;
+                    this.messages[this.messages.length - 1].id = this.currentDomId;
+                    this.messages[this.messages.length - 1].text = "Error connecting to server. Please try again later.";
+                }
+                else {
+                    console.log("Data sent to server successfully");
+                    // this.handleSocketResponse()
+                    // console.log("Response:", response)
                 }
             });
             if (this.inputEl) {
@@ -2202,7 +2265,7 @@ const Ai12zBot = class {
         if (ev.key === "Enter" && !ev.shiftKey) {
             // console.log("down arrow pressed")
             ev.preventDefault();
-            if (((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.value.trim().length) > 0) {
+            if (((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.value.trim().length) > 0 && !this.isStreaming) {
                 this.handleSend(this.inputEl.value);
             }
         }
@@ -2216,6 +2279,12 @@ const Ai12zBot = class {
             localStorage.setItem(`ai12z-bot-data`, JSON.stringify({ qCounter: this.questionCounter }));
         }, this.botSettings.autoResetTimer);
     }
+    stopResponse() {
+        this.ignoreChunks = true; // drop future chunks
+        this.isStreaming = false;
+        this.messages[this.messages.length - 1].isLoading = false;
+        // this.socket.off('response');
+    }
     scrollToBottom() {
         const container = this.el.shadowRoot.querySelector(".chat-body");
         if (container) {
@@ -2328,6 +2397,7 @@ const Ai12zBot = class {
             const conversationExists = this.getConversationHistory();
             let messageHistory = conversationExists.filter(item => { var _a; return item.conversationId === this.conversationId && item.projectId === ((_a = this.botSettings) === null || _a === void 0 ? void 0 : _a.pId); });
             this.isTypingIndicatorVisible = true;
+            this.showTextarea = true;
             liveAgentSettings = {
                 config: liveAgentSettings,
                 userId: this.visitorID,
@@ -2346,11 +2416,23 @@ const Ai12zBot = class {
                 this.liveAgentEventHandler.connectToLiveAgent(liveAgentProviderNames[0], liveAgentSettings);
                 ChatEventBus.on("AGENT_SESSION_CREATED", () => {
                     this.isLiveAgent = true;
+                    this.showTextarea = true;
+                    requestAnimationFrame(() => {
+                        var _a;
+                        const inputEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[data-testid="user-input-textarea"]');
+                        console.log("inputEl", inputEl);
+                        if (inputEl) {
+                            this.inputEl = inputEl;
+                        }
+                    });
                     this.liveAgentButtonText = "End liveagent chat";
                 });
                 ChatEventBus.on("AGENT_EVENT", (event) => {
                     this.isTypingIndicatorVisible = false;
                     if ((event === null || event === void 0 ? void 0 : event.length) > 0) {
+                        if (this.isLiveAgentEnabled && this.currentDomId === "") {
+                            this.currentDomId = this.messages[this.messages.length - 1].id;
+                        }
                         const agentEventMessages = this.liveAgentEventHandler.addAgentEventMessage(event);
                         if (agentEventMessages) {
                             const currentDomElement = this.el.shadowRoot.querySelector(`#${this.currentDomId}`);
@@ -2361,6 +2443,7 @@ const Ai12zBot = class {
                             if (this.inputEl) {
                                 this.inputEl.value = "";
                             }
+                            this.currentDomId = "";
                         }
                     }
                 });
@@ -2371,21 +2454,45 @@ const Ai12zBot = class {
                     this.isTypingIndicatorVisible = false;
                 });
                 ChatEventBus.on("AGENT_MESSAGE", (message) => {
-                    var _a;
+                    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) {
+                            // Generate a new temporary message object
+                            const tempMsg = this.generateMessage();
+                            // 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
+                            this.currentDomId = `chatbot-${utils.generateUUID()}`;
+                            this.messages[this.messages.length - 1].id = this.currentDomId;
+                            this.messages = [...this.messages]; // Trigger reactivity
+                        }
+                    }
                     const retMessage = this.liveAgentEventHandler.handleAgentMessage(message);
                     if (retMessage) {
-                        const aiMessageBubble = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#${this.currentDomId}`);
-                        if (aiMessageBubble) {
-                            const converter = new showdown.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]);
-                        }
-                        setTimeout(() => {
-                            this.scrollToBottom();
-                        }, 10);
+                        // ✅ 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 showdown.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]);
+                            }
+                            setTimeout(() => {
+                                this.scrollToBottom();
+                            }, 10);
+                        });
                     }
                 });
                 ChatEventBus.on("AGENT_ERROR", () => {
@@ -2407,6 +2514,10 @@ const Ai12zBot = class {
                         text: _message,
                     },
                 ]);
+                // console.log("agentEventMessages", this.currentDomId)
+                if (this.currentDomId === "") {
+                    this.currentDomId = this.messages[this.messages.length - 1].id;
+                }
                 if (agentEventMessages) {
                     const currentDomElement = this.el.shadowRoot.querySelector(`#${this.currentDomId}`);
                     if (currentDomElement) {
@@ -2464,7 +2575,9 @@ const Ai12zBot = class {
                     this.toggleBot(e);
                     this.showHistory = false;
                     this.showWelcomeScreen = true;
-                    this.handleSend(button.label);
+                    if (!this.isStreaming) {
+                        this.handleSend(button.label);
+                    }
                 } }, button.label)))), index.h("div", { class: "w-full dropdown-item", role: "menuitem", tabindex: "-1" }, index.h("button", { class: "dropdown-item-button", onClick: e => {
                 this.toggleBot(e);
                 this.showHistory = true;
@@ -2510,7 +2623,7 @@ const Ai12zBot = class {
                 const email = "";
                 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" } }, message.isUser && (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 }, (_a = message === null || message === void 0 ? void 0 : message.images) === null || _a === void 0 ? void 0 : _a.map(img => {
+                  ${message.isUser ? "justify-end" : ""} end-user-message message-item`, style: { opacity: "1", transform: "none" } }, message.isUser && (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 }, (_a = message === null || message === void 0 ? void 0 : message.images) === null || _a === void 0 ? void 0 : _a.map(img => {
                     return index.h("img", { src: img, class: "thumbnail", alt: "thumbnail" });
                 })), index.h("div", { class: "text-gray-30 pt-2 text-right text-body4" }, "Sent ", message.timestamp))), !message.isUser && (index.h("div", { class: "avatar-column" }, index.h("chat-avatar", { id: `la${message.id}`, senderType: (message === null || message === void 0 ? void 0 : message.sender) ? "agent" : "bot", avatarUrl: (_b = this.botSettings) === null || _b === void 0 ? void 0 : _b.botAvatar }))), !message.isUser && (index.h("div", { class: "flex flex-col", style: { width: "100%" } }, index.h("div", { "data-testid": "message", class: {
                         "prose": message.controlType === "form" ? false : true,
@@ -2519,7 +2632,7 @@ const Ai12zBot = class {
                         "opacity-100": this.isProse,
                         "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.text === "" && (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 && (index.h("div", { class: "thumbs-container flex gap-2 mt-2" }, this.isPlayed && (index.h("button", { class: "copy-btn", onClick: () => {
+                    }, 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 && (index.h("div", { class: "thumbs-container flex gap-2 mt-2" }, this.isPlayed && (index.h("button", { class: "copy-btn", onClick: () => {
                         this.isPlayed = false;
                         window.speechSynthesis.cancel();
                         if (this.audioElement) {
@@ -2545,7 +2658,10 @@ const Ai12zBot = class {
             } }, index.h("input", { type: "file", multiple: true, name: "files[]", id: "fileInput", accept: "image/*", class: "image-upload__input", onChange: ($event) => {
                 // this.isImage = true
                 this.onInputChange($event.target.files);
-            }, ref: el => (this.uploadElem = el) }), index.h("div", { class: "mr-1" }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 shrink-0" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.0322 5.02393C17.7488 5.00078 17.3766 5 16.8 5H11.5002C11.3 6 11.0989 6.91141 10.8903 7.85409C10.7588 8.44955 10.6432 8.97304 10.3675 9.41399C10.1262 9.80009 9.80009 10.1262 9.41399 10.3675C8.97304 10.6432 8.44955 10.7588 7.85409 10.8903C7.81276 10.8994 7.77108 10.9086 7.72906 10.9179L5.21693 11.4762C5.1442 11.4924 5.07155 11.5001 5 11.5002V16.8C5 17.3766 5.00078 17.7488 5.02393 18.0322C5.04612 18.3038 5.0838 18.4045 5.109 18.454C5.20487 18.6422 5.35785 18.7951 5.54601 18.891C5.59546 18.9162 5.69617 18.9539 5.96784 18.9761C6.25118 18.9992 6.62345 19 7.2 19H10C10.5523 19 11 19.4477 11 20C11 20.5523 10.5523 21 10 21H7.16144C6.6343 21 6.17954 21 5.80497 20.9694C5.40963 20.9371 5.01641 20.8658 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3.13419 18.9836 3.06287 18.5904 3.03057 18.195C2.99997 17.8205 2.99998 17.3657 3 16.8385L3 11C3 8.92477 4.02755 6.93324 5.4804 5.4804C6.93324 4.02755 8.92477 3 11 3L16.8385 3C17.3657 2.99998 17.8205 2.99997 18.195 3.03057C18.5904 3.06287 18.9836 3.13419 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C20.8658 5.01641 20.9371 5.40963 20.9694 5.80497C21 6.17954 21 6.6343 21 7.16144V10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10V7.2C19 6.62345 18.9992 6.25118 18.9761 5.96784C18.9539 5.69617 18.9162 5.59546 18.891 5.54601C18.7951 5.35785 18.6422 5.20487 18.454 5.109C18.4045 5.0838 18.3038 5.04612 18.0322 5.02393ZM5.28014 9.41336L7.2952 8.96556C8.08861 8.78925 8.24308 8.74089 8.35381 8.67166C8.48251 8.59121 8.59121 8.48251 8.67166 8.35381C8.74089 8.24308 8.78925 8.08861 8.96556 7.2952L9.41336 5.28014C8.51014 5.59289 7.63524 6.15398 6.89461 6.89461C6.15398 7.63524 5.59289 8.51014 5.28014 9.41336ZM17 15C17 14.4477 17.4477 14 18 14C18.5523 14 19 14.4477 19 15V17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H19V21C19 21.5523 18.5523 22 18 22C17.4477 22 17 21.5523 17 21V19H15C14.4477 19 14 18.5523 14 18C14 17.4477 14.4477 17 15 17H17V15Z", fill: "currentColor" }))), index.h("div", null, "Upload Images")))))), index.h("div", { class: `${this.isContent ? "hidden" : ""} textarea` }, index.h("div", { id: "previewContainer" }), this.showTextarea && (index.h("textarea", { class: `resize-none overflow-hidden text-ellipsis focus:outline-none w-full ${this.hideAllButtons ? "hidden" : ""}`, "data-testid": "user-input-textarea", rows: this.rowCount, name: "userMessage", placeholder: (_u = (_t = this.botSettings) === null || _t === void 0 ? void 0 : _t.botPlaceholderText) !== null && _u !== void 0 ? _u : "Ask me anything",
+            }, ref: el => (this.uploadElem = el) }), index.h("div", { class: "mr-1" }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 shrink-0" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.0322 5.02393C17.7488 5.00078 17.3766 5 16.8 5H11.5002C11.3 6 11.0989 6.91141 10.8903 7.85409C10.7588 8.44955 10.6432 8.97304 10.3675 9.41399C10.1262 9.80009 9.80009 10.1262 9.41399 10.3675C8.97304 10.6432 8.44955 10.7588 7.85409 10.8903C7.81276 10.8994 7.77108 10.9086 7.72906 10.9179L5.21693 11.4762C5.1442 11.4924 5.07155 11.5001 5 11.5002V16.8C5 17.3766 5.00078 17.7488 5.02393 18.0322C5.04612 18.3038 5.0838 18.4045 5.109 18.454C5.20487 18.6422 5.35785 18.7951 5.54601 18.891C5.59546 18.9162 5.69617 18.9539 5.96784 18.9761C6.25118 18.9992 6.62345 19 7.2 19H10C10.5523 19 11 19.4477 11 20C11 20.5523 10.5523 21 10 21H7.16144C6.6343 21 6.17954 21 5.80497 20.9694C5.40963 20.9371 5.01641 20.8658 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3.13419 18.9836 3.06287 18.5904 3.03057 18.195C2.99997 17.8205 2.99998 17.3657 3 16.8385L3 11C3 8.92477 4.02755 6.93324 5.4804 5.4804C6.93324 4.02755 8.92477 3 11 3L16.8385 3C17.3657 2.99998 17.8205 2.99997 18.195 3.03057C18.5904 3.06287 18.9836 3.13419 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C20.8658 5.01641 20.9371 5.40963 20.9694 5.80497C21 6.17954 21 6.6343 21 7.16144V10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10V7.2C19 6.62345 18.9992 6.25118 18.9761 5.96784C18.9539 5.69617 18.9162 5.59546 18.891 5.54601C18.7951 5.35785 18.6422 5.20487 18.454 5.109C18.4045 5.0838 18.3038 5.04612 18.0322 5.02393ZM5.28014 9.41336L7.2952 8.96556C8.08861 8.78925 8.24308 8.74089 8.35381 8.67166C8.48251 8.59121 8.59121 8.48251 8.67166 8.35381C8.74089 8.24308 8.78925 8.08861 8.96556 7.2952L9.41336 5.28014C8.51014 5.59289 7.63524 6.15398 6.89461 6.89461C6.15398 7.63524 5.59289 8.51014 5.28014 9.41336ZM17 15C17 14.4477 17.4477 14 18 14C18.5523 14 19 14.4477 19 15V17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H19V21C19 21.5523 18.5523 22 18 22C17.4477 22 17 21.5523 17 21V19H15C14.4477 19 14 18.5523 14 18C14 17.4477 14.4477 17 15 17H17V15Z", fill: "currentColor" }))), index.h("div", null, "Upload Images")))))), index.h("div", { class: `${this.isContent ? "hidden" : ""} textarea` }, index.h("div", { id: "previewContainer" }), index.h("textarea", { class: `resize-none overflow-hidden text-ellipsis focus:outline-none w-full ${this.hideAllButtons ? "hidden" : ""}`, "data-testid": "user-input-textarea", rows: this.rowCount, name: "userMessage", placeholder: this.isLiveAgent
+                ? "Type a message to the agent..."
+                : ((_u = (_t = this.botSettings) === null || _t === void 0 ? void 0 : _t.botPlaceholderText) !== null && _u !== void 0 ? _u : "Ask me anything"),
+            // placeholder={this.botSettings?.botPlaceholderText ?? "Ask me anything"}
             // aria-labelledby="message-submit"
             ref: el => (this.inputEl = el), onKeyUp: _e => {
                 this.adjustHeight();
@@ -2554,7 +2670,7 @@ const Ai12zBot = class {
                 if (e.key === "Enter" && !e.shiftKey) {
                     this.isOpened = true;
                 }
-            } }))), this.botSettings.enableMic && (index.h("label", { class: `absolute bottom-0 ${this.isContent ? "hidden" : ""} ${this.hideAllButtons ? "w-full" : "right-8"}` }, index.h("audio-recorder", { "component-type": "bot", onStartRecord: _ev => {
+            } })), this.botSettings.enableMic && (index.h("label", { class: `absolute bottom-0 ${this.isContent ? "hidden" : ""} ${this.hideAllButtons ? "w-full" : "right-8"}` }, index.h("audio-recorder", { "component-type": "bot", onStartRecord: _ev => {
                 // console.log("test", ev)
                 this.hideAllButtons = true;
             }, onStopRecord: _ev => {
@@ -2569,7 +2685,7 @@ const Ai12zBot = class {
                         this.showSubmit = true;
                     }
                 }, 1000);
-            }, style: { width: this.hideAllButtons ? "100%" : "10%" } }))), index.h("label", { class: `absolute right-0 bottom-0 ${this.isContent ? "hidden" : ""} ${this.hideAllButtons ? "hidden" : ""}` }, index.h("button", { class: "text-white transition rounded-full p-1.5 self-center btn-bg-color",
+            }, style: { width: this.hideAllButtons ? "100%" : "10%" } }))), index.h("label", { class: `absolute right-0 bottom-0 ${this.isContent ? "hidden" : ""} ${this.hideAllButtons ? "hidden" : ""}` }, !this.isStreaming && index.h("button", { class: "text-white transition rounded-full p-1.5 self-center btn-bg-color",
             // 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-8 w-8"
             tabindex: "-1", id: "message-submit",
             // type="submit"
@@ -2581,8 +2697,22 @@ const Ai12zBot = class {
                 }
                 this.isOpened = true;
                 // this.handleMessageSubmit(e)
+                // this.isStreaming = true
                 this.handleSend((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.value);
-            } }, index.h("i", { class: "block ai-icon text-body1" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", class: "size-6" }, index.h("path", { "fill-rule": "evenodd", d: "M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z", "clip-rule": "evenodd" }))))), index.h("button", { class: `${this.isContent && !this.isMinimized ? "block" : "hidden"} rounded-full isContent`, "aria-label": "Return to AI", onClick: ev => {
+            } }, index.h("i", { class: "block ai-icon text-body1" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", class: "size-6" }, index.h("path", { "fill-rule": "evenodd", d: "M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z", "clip-rule": "evenodd" })))), this.isStreaming && index.h("button", { class: "text-white transition rounded-full p-1.5 self-center btn-bg-color",
+            // 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-8 w-8"
+            tabindex: "-1", id: "message-submit",
+            // type="submit"
+            onClick: e => {
+                e.preventDefault();
+                // if ((!this.inputEl || this.inputEl.value.trim() === "") && this.imagesBase64List && this.imagesBase64List.length === 0) {
+                //   return
+                // }
+                this.isOpened = true;
+                this.stopResponse();
+                // this.handleMessageSubmit(e)
+                // this.handleSend(this.inputEl?.value)
+            } }, index.h("i", { class: "block text-body1" }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", class: "size-6" }, index.h("path", { d: "M4.5 5.75C4.5 5.05964 5.05964 4.5 5.75 4.5H14.25C14.9404 4.5 15.5 5.05964 15.5 5.75V14.25C15.5 14.9404 14.9404 15.5 14.25 15.5H5.75C5.05964 15.5 4.5 14.9404 4.5 14.25V5.75Z" }))))), index.h("button", { class: `${this.isContent && !this.isMinimized ? "block" : "hidden"} rounded-full isContent`, "aria-label": "Return to AI", onClick: ev => {
                 ev.preventDefault();
                 this.isContent = false;
                 this.isOpened = true;
@@ -2602,7 +2732,6 @@ const Ai12zBot = class {
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "currentDomId": ["watchStateHandler"],
         "surveyDomId": ["watchSurveyDomIdHandler"]
     }; }
 };
@@ -2610,4 +2739,4 @@ Ai12zBot.style = Ai12zBotStyle0 + (Ai12zBotStyle1 + (Ai12zBotStyle2 + Ai12zBotSt
 
 exports.Ai12zBot = Ai12zBot;
 
-//# sourceMappingURL=ai12z-bot-7aa40096.js.map
+//# sourceMappingURL=ai12z-bot-b00dcf4f.js.map