ai12z 3.6.1-alpha.1 → 3.6.1-alpha.2

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

@@ -150,6 +150,7 @@ const MyChat = class {
         this.currentSlide = 0;
         this.scriptArray = [];
         this.isProse = true;
+        this.isProcessingEndResponse = false;
     }
     componentDidLoad() {
         const ai12zHeading = document.createElement("script");
@@ -297,96 +298,110 @@ const MyChat = class {
     endResponseHandler(event) {
         var _a, _b, _c, _d, _e;
         console.log("listening end_response", event.detail.data, this.aiMessageId);
-        this.scrollToLatestBubble();
-        const data = event.detail;
-        const converter = new showdown.showdown.Converter();
-        let finalHtml = converter.makeHtml(data.answer);
-        const idx = this.chats.findIndex(item => item.id === this.aiMessageId);
-        const chatId = this.chats[idx].id;
-        // this.chats[idx].insightId = data.insight_id
-        this.chats = this.chats.map((item, i) => (i === idx ? Object.assign(Object.assign({}, item), { insightId: data.insightId }) : item));
-        // console.log("chats", this.chats[idx])
-        if (finalHtml.indexOf("[control") > -1) {
-            switch (data.controlType) {
-                case "template":
-                    const newTemplateContent = utils.splitContent(data.answer);
-                    const templateData = this.getUpdatedChat(data, "");
-                    this.survey.emit({ results: templateData, type: "carousel" });
-                    this.element.shadowRoot.querySelector(`#${this.aiMessageId}`).innerHTML = newTemplateContent === null || newTemplateContent === void 0 ? void 0 : newTemplateContent.before;
-                    this.processTemplateData(templateData, data, "carousel");
-                    if (newTemplateContent.after.trim().length > 0) {
-                        const afterChatEle = this.getUpdatedChat(data, newTemplateContent === null || newTemplateContent === void 0 ? void 0 : newTemplateContent.after);
-                        this.survey.emit({ results: afterChatEle, type: "carousel" });
-                        this.waitForElementRender(`#${afterChatEle.id}`).then(() => {
-                            // console.log("Element rendered")
-                            if (afterChatEle.id) {
-                                const bubbleEle = this.element.shadowRoot.querySelector(`#${afterChatEle.id}`);
-                                if (bubbleEle) {
-                                    bubbleEle.querySelector("#spinner").style.display = "none";
+        // ✅ Prevent concurrent processing
+        if (this.isProcessingEndResponse) {
+            console.log("Already processing endResponse, ignoring duplicate");
+            return;
+        }
+        this.isProcessingEndResponse = true;
+        try {
+            this.scrollToLatestBubble();
+            const data = event.detail;
+            const converter = new showdown.showdown.Converter();
+            let finalHtml = converter.makeHtml(data.answer);
+            const idx = this.chats.findIndex(item => item.id === this.aiMessageId);
+            const chatId = this.chats[idx].id;
+            // this.chats[idx].insightId = data.insight_id
+            this.chats = this.chats.map((item, i) => (i === idx ? Object.assign(Object.assign({}, item), { insightId: data.insightId }) : item));
+            // console.log("chats", this.chats[idx])
+            if (finalHtml.indexOf("[control") > -1) {
+                switch (data.controlType) {
+                    case "template":
+                        const newTemplateContent = utils.splitContent(data.answer);
+                        const templateData = this.getUpdatedChat(data, "");
+                        this.survey.emit({ results: templateData, type: "carousel" });
+                        this.element.shadowRoot.querySelector(`#${this.aiMessageId}`).innerHTML = newTemplateContent === null || newTemplateContent === void 0 ? void 0 : newTemplateContent.before;
+                        this.processTemplateData(templateData, data, "carousel");
+                        if (newTemplateContent.after.trim().length > 0) {
+                            const afterChatEle = this.getUpdatedChat(data, newTemplateContent === null || newTemplateContent === void 0 ? void 0 : newTemplateContent.after);
+                            this.survey.emit({ results: afterChatEle, type: "carousel" });
+                            this.waitForElementRender(`#${afterChatEle.id}`).then(() => {
+                                // console.log("Element rendered")
+                                if (afterChatEle.id) {
+                                    const bubbleEle = this.element.shadowRoot.querySelector(`#${afterChatEle.id}`);
+                                    if (bubbleEle) {
+                                        bubbleEle.querySelector("#spinner").style.display = "none";
+                                    }
                                 }
-                            }
-                        });
-                    }
-                    break;
-                case "form":
-                    finalHtml = finalHtml.replace(RegExp(/\[[^>]*]/gm), `<div id=surveyContainer-${chatId}></div>`);
-                    this.element.shadowRoot.querySelector(`#${this.aiMessageId}`).innerHTML = finalHtml;
-                    this.element.shadowRoot.querySelector(`#${this.aiMessageId}`)["style"].width = "100%";
-                    const surveyContainer = this.element.shadowRoot.querySelector(`#${this.aiMessageId}`);
-                    if (surveyContainer) {
-                        surveyContainer.parentElement["style"].width = "100%";
-                    }
-                    this.chats[idx].formModel = (_c = (_b = (_a = data.controlData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.source) !== null && _c !== void 0 ? _c : data.controlData;
-                    this.renderSurvey(this.chats[idx], data);
-                    // this.invokeSurvey(this.chats[idx], data)
-                    break;
-                case "carousel":
-                case "list":
-                    const newContent = utils.splitContent(finalHtml);
-                    const chatData = this.getUpdatedChat(data, "");
-                    this.survey.emit({ results: chatData, type: "carousel" });
-                    this.element.shadowRoot.querySelector(`#${this.aiMessageId}`).innerHTML = newContent === null || newContent === void 0 ? void 0 : newContent.before;
-                    // if (data.controlData?.data.source.carousel?.type === "slider" || data.controlData?.data.source.carousel?.type === "list") {
-                    data.messageId = chatData.id;
-                    if ((_e = (_d = data.controlData) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.source) {
-                        data.controlData.data.source.customCss = this.customstyle || "";
-                        data.controlData.data.source.customJs = this.customJS || "";
-                    }
-                    const controlElement = utils.getComponentByControlType(data, "ai");
-                    this.processChatData(chatData, controlElement);
-                    // } else {
-                    // this.processTemplateData(chatData, data, "carousel")
-                    // }
-                    if (newContent.after.trim().length > 0) {
-                        const afterChatEle = this.getUpdatedChat(data, newContent === null || newContent === void 0 ? void 0 : newContent.after);
-                        this.survey.emit({ results: afterChatEle, type: "carousel" });
-                        this.waitForElementRender(`#${afterChatEle.id}`).then(() => {
-                            if (afterChatEle.id) {
-                                const bubbleEle = this.element.shadowRoot.querySelector(`#${afterChatEle.id}`);
-                                if (bubbleEle) {
-                                    bubbleEle.querySelector("#spinner").style.display = "none";
+                            });
+                        }
+                        break;
+                    case "form":
+                        finalHtml = finalHtml.replace(RegExp(/\[[^>]*]/gm), `<div id=surveyContainer-${chatId}></div>`);
+                        this.element.shadowRoot.querySelector(`#${this.aiMessageId}`).innerHTML = finalHtml;
+                        this.element.shadowRoot.querySelector(`#${this.aiMessageId}`)["style"].width = "100%";
+                        const surveyContainer = this.element.shadowRoot.querySelector(`#${this.aiMessageId}`);
+                        if (surveyContainer) {
+                            surveyContainer.parentElement["style"].width = "100%";
+                        }
+                        this.chats[idx].formModel = (_c = (_b = (_a = data.controlData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.source) !== null && _c !== void 0 ? _c : data.controlData;
+                        this.renderSurvey(this.chats[idx], data);
+                        // this.invokeSurvey(this.chats[idx], data)
+                        break;
+                    case "carousel":
+                    case "list":
+                        const newContent = utils.splitContent(finalHtml);
+                        const chatData = this.getUpdatedChat(data, "");
+                        this.survey.emit({ results: chatData, type: "carousel" });
+                        this.element.shadowRoot.querySelector(`#${this.aiMessageId}`).innerHTML = newContent === null || newContent === void 0 ? void 0 : newContent.before;
+                        // if (data.controlData?.data.source.carousel?.type === "slider" || data.controlData?.data.source.carousel?.type === "list") {
+                        data.messageId = chatData.id;
+                        if ((_e = (_d = data.controlData) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.source) {
+                            data.controlData.data.source.customCss = this.customstyle || "";
+                            data.controlData.data.source.customJs = this.customJS || "";
+                        }
+                        const controlElement = utils.getComponentByControlType(data, "ai");
+                        this.processChatData(chatData, controlElement);
+                        // } else {
+                        // this.processTemplateData(chatData, data, "carousel")
+                        // }
+                        if (newContent.after.trim().length > 0) {
+                            const afterChatEle = this.getUpdatedChat(data, newContent === null || newContent === void 0 ? void 0 : newContent.after);
+                            this.survey.emit({ results: afterChatEle, type: "carousel" });
+                            this.waitForElementRender(`#${afterChatEle.id}`).then(() => {
+                                if (afterChatEle.id) {
+                                    const bubbleEle = this.element.shadowRoot.querySelector(`#${afterChatEle.id}`);
+                                    if (bubbleEle) {
+                                        bubbleEle.querySelector("#spinner").style.display = "none";
+                                    }
                                 }
-                            }
-                        });
-                    }
-                    break;
+                            });
+                        }
+                        break;
+                }
             }
+            else {
+                finalHtml = this.updateAnchorTags(finalHtml);
+                finalHtml = this.updateButtonEvents(finalHtml);
+                this.element.shadowRoot.querySelector(`#${this.aiMessageId}`).innerHTML = finalHtml;
+                this.checkHighlightcode(this.aiMessageId);
+                this.addEventListeners(`#${this.aiMessageId}`);
+            }
+            this.stateChanged.emit({ state: "end_response" });
+            this.conversationId = data.conversationId;
+            if (data.controlType === null) {
+                this.chats[idx].clipboard = finalHtml;
+                // this.chats[this.chats.length - 1].message = finalHtml
+            }
+            this.aiMessageId = '';
+            // this.scrollToBottom()
         }
-        else {
-            finalHtml = this.updateAnchorTags(finalHtml);
-            finalHtml = this.updateButtonEvents(finalHtml);
-            this.element.shadowRoot.querySelector(`#${this.aiMessageId}`).innerHTML = finalHtml;
-            this.checkHighlightcode(this.aiMessageId);
-            this.addEventListeners(`#${this.aiMessageId}`);
-        }
-        this.stateChanged.emit({ state: "end_response" });
-        this.conversationId = data.conversationId;
-        if (data.controlType === null) {
-            this.chats[idx].clipboard = finalHtml;
-            // this.chats[this.chats.length - 1].message = finalHtml
+        finally {
+            // ✅ Reset flag after processing
+            setTimeout(() => {
+                this.isProcessingEndResponse = false;
+            }, 500);
         }
-        this.aiMessageId = '';
-        // this.scrollToBottom()
     }
     checkHighlightcode(highlightcodeId = "") {
         var _a;
@@ -1014,13 +1029,13 @@ const MyChat = class {
     render() {
         var _a;
         const email = "";
-        return (index.h("ul", { key: '3872c1287fc74a1f6b9755292f079be8ec402c93', class: {
+        return (index.h("ul", { key: 'e9ae132f5c311ea088583ae4f62713088fd01217', class: {
                 "chat-list": true,
                 "custom-list": this.componentType === "search",
                 // "custom-chat-top-height": this.componentType === "search",
                 "custom-chat-bottom-height": this.componentType === "inline",
                 "custom-chat-above-height": this.componentType === "inline" && this.chatPosition === "above",
-            }, style: { maxHeight: this.componentType !== "search" ? "80vh" : "100%" } }, (_a = this.chats) === null || _a === void 0 ? void 0 :
+            }, style: { maxHeight: this.componentType !== "search" ? "80vh" : "none", overflowY: this.componentType !== "search" ? "auto" : "visible", height: this.componentType === "search" ? "auto" : "100%" } }, (_a = this.chats) === null || _a === void 0 ? void 0 :
             _a.map((chat, idx) => {
                 var _a, _b, _c, _d;
                 const isBot = chat.type === "ai";
@@ -1066,7 +1081,7 @@ const MyChat = class {
                         }
                         // this.isPlayed = false
                     } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "icon-md-heavy" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM9.5 8.5C8.94772 8.5 8.5 8.94772 8.5 9.5V14.5C8.5 15.0523 8.94772 15.5 9.5 15.5H14.5C15.0523 15.5 15.5 15.0523 15.5 14.5V9.5C15.5 8.94772 15.0523 8.5 14.5 8.5H9.5Z", fill: "currentColor" })))), !this.isPlayed && (index.h("button", { class: "copy-btn", onClick: () => this.speakText(this.removeHtmlTags(chat.clipboard)) }, index.h("svg", { class: "w-6 h-6", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11 4.9099C11 4.47485 10.4828 4.24734 10.1621 4.54132L6.67572 7.7372C6.49129 7.90626 6.25019 8.00005 6 8.00005H4C3.44772 8.00005 3 8.44776 3 9.00005V15C3 15.5523 3.44772 16 4 16H6C6.25019 16 6.49129 16.0938 6.67572 16.2629L10.1621 19.4588C10.4828 19.7527 11 19.5252 11 19.0902V4.9099ZM8.81069 3.06701C10.4142 1.59714 13 2.73463 13 4.9099V19.0902C13 21.2655 10.4142 22.403 8.81069 20.9331L5.61102 18H4C2.34315 18 1 16.6569 1 15V9.00005C1 7.34319 2.34315 6.00005 4 6.00005H5.61102L8.81069 3.06701ZM20.3166 6.35665C20.8019 6.09313 21.409 6.27296 21.6725 6.75833C22.5191 8.3176 22.9996 10.1042 22.9996 12.0001C22.9996 13.8507 22.5418 15.5974 21.7323 17.1302C21.4744 17.6185 20.8695 17.8054 20.3811 17.5475C19.8927 17.2896 19.7059 16.6846 19.9638 16.1962C20.6249 14.9444 20.9996 13.5175 20.9996 12.0001C20.9996 10.4458 20.6064 8.98627 19.9149 7.71262C19.6514 7.22726 19.8312 6.62017 20.3166 6.35665ZM15.7994 7.90049C16.241 7.5688 16.8679 7.65789 17.1995 8.09947C18.0156 9.18593 18.4996 10.5379 18.4996 12.0001C18.4996 13.3127 18.1094 14.5372 17.4385 15.5604C17.1357 16.0222 16.5158 16.1511 16.0539 15.8483C15.5921 15.5455 15.4632 14.9255 15.766 14.4637C16.2298 13.7564 16.4996 12.9113 16.4996 12.0001C16.4996 10.9859 16.1653 10.0526 15.6004 9.30063C15.2687 8.85905 15.3578 8.23218 15.7994 7.90049Z", fill: "currentColor" })))), index.h("button", { class: "copy-btn", onClick: () => this.copyToClipboard(chat.clipboard) }, !this.copied && (index.h("svg", { class: "w-6 h-6", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z", fill: "currentColor" }))), this.copied && (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "w-6 h-6" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.8198 6.19526C20.0601 6.45561 20.0601 6.87772 19.8198 7.13807L9.9736 17.8047C9.73328 18.0651 9.34364 18.0651 9.10332 17.8047L4.18024 12.4714C3.93992 12.2111 3.93992 11.7889 4.18024 11.5286C4.42056 11.2682 4.8102 11.2682 5.05053 11.5286L9.53846 16.3905L18.9495 6.19526C19.1898 5.93491 19.5794 5.93491 19.8198 6.19526Z", fill: "currentColor" })))), index.h("button", { id: `thumbsUp_${chat.thumbsId}`, onClick: () => this.thumbsUp(chat.thumbsId, chat.insightId), class: "chat-thumbs-up" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "w-6 h-6" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z" }))), index.h("button", { id: `thumbsDown_${chat.thumbsId}`, onClick: () => this.thumbsDown(chat.thumbsId, chat.insightId), class: "chat-thumbs-up" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "w-6 h-6" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M7.498 15.25H4.372c-1.026 0-1.945-.694-2.054-1.715a12.137 12.137 0 0 1-.068-1.285c0-2.848.992-5.464 2.649-7.521C5.287 4.247 5.886 4 6.504 4h4.016a4.5 4.5 0 0 1 1.423.23l3.114 1.04a4.5 4.5 0 0 0 1.423.23h1.294M7.498 15.25c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.75 2.25 2.25 0 0 0 9.75 22a.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384m-10.253 1.5H9.7m8.075-9.75c.01.05.027.1.05.148.593 1.2.925 2.55.925 3.977 0 1.487-.36 2.89-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398-.306.774-1.086 1.227-1.918 1.227h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54" }))), index.h("button", { class: "copy-btn" }, index.h("a", { href: `mailto:${email}?subject=${encodeURIComponent((_d = this.chats[idx - 1]) === null || _d === void 0 ? void 0 : _d.message)}&body=${encodeURIComponent(this.removeHtmlTags(chat.clipboard))}`, target: "_blank" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", "stroke-width": "0.3", class: "w-6 h-6" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.75 5.25L3 6V18L3.75 18.75H20.25L21 18V6L20.25 5.25H3.75ZM4.5 7.6955V17.25H19.5V7.69525L11.9999 14.5136L4.5 7.6955ZM18.3099 6.75H5.68986L11.9999 12.4864L18.3099 6.75Z", fill: "currentColor" }), " "))))))));
-            }), index.h("div", { key: '11a74c24cd370c7f30a02cb97d19f48ab7075a66', class: "scroll-bottom" })));
+            }), index.h("div", { key: '85d160bd39e987a29ee866f6fe796138c3c75b74', class: "scroll-bottom" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {