@alan-ai/alan-sdk-web 1.8.87 → 1.8.88

package/dist/alan_lib.js

@@ -90463,7 +90463,10 @@
 `,
     minimize: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 17.25L18 17.25" stroke="none" stroke-width="1.5" stroke-linecap="round"/>
-</svg>`
+</svg>`,
+    graph: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M18.032 1H5.96802C5.52939 0.999989 5.15087 0.999979 4.83762 1.02135C4.50779 1.04386 4.17788 1.09336 3.85195 1.22836C3.11687 1.53285 2.53284 2.11687 2.22836 2.85195C2.09336 3.17788 2.04385 3.50779 2.02135 3.83762C1.99998 4.15087 1.99999 4.52936 2 4.968V5.03198C1.99999 5.47063 1.99998 5.84913 2.02135 6.16238C2.04385 6.49221 2.09336 6.82212 2.22836 7.14805C2.53284 7.88314 3.11687 8.46716 3.85195 8.77164C4.17788 8.90664 4.50779 8.95615 4.83762 8.97865C5.15088 9.00002 5.52936 9.00002 5.96801 9H11V12H8.7587C7.95376 12 7.28935 12 6.74817 12.0442C6.18608 12.0901 5.66937 12.1887 5.18404 12.436C4.43139 12.8195 3.81947 13.4314 3.43597 14.184C3.18868 14.6694 3.09012 15.1861 3.04419 15.7482C3.01124 16.1515 3.00285 16.6232 3.00072 17.1705C1.83515 17.5821 1 18.6935 1 20C1 21.6569 2.34315 23 4 23C5.65685 23 7 21.6569 7 20C7 18.6941 6.16559 17.5831 5.00083 17.171C5.00297 16.6425 5.01058 16.2412 5.03755 15.911C5.07337 15.4726 5.1383 15.2484 5.21799 15.092C5.40973 14.7157 5.7157 14.4097 6.09202 14.218C6.24842 14.1383 6.47262 14.0734 6.91104 14.0376C7.36113 14.0008 7.94342 14 8.8 14H11V17.1707C9.83481 17.5825 9 18.6938 9 20C9 21.6569 10.3431 23 12 23C13.6569 23 15 21.6569 15 20C15 18.6938 14.1652 17.5825 13 17.1707V14H15.2C16.0566 14 16.6389 14.0008 17.089 14.0376C17.5274 14.0734 17.7516 14.1383 17.908 14.218C18.2843 14.4097 18.5903 14.7157 18.782 15.092C18.8617 15.2484 18.9266 15.4726 18.9624 15.911C18.9894 16.2412 18.997 16.6425 18.9992 17.171C17.8344 17.5831 17 18.6941 17 20C17 21.6569 18.3431 23 20 23C21.6569 23 23 21.6569 23 20C23 18.6935 22.1648 17.5821 20.9993 17.1705C20.9971 16.6232 20.9888 16.1515 20.9558 15.7482C20.9099 15.1861 20.8113 14.6694 20.564 14.184C20.1805 13.4314 19.5686 12.8195 18.816 12.436C18.3306 12.1887 17.8139 12.0901 17.2518 12.0442C16.7106 12 16.0463 12 15.2414 12H13V9H18.032C18.4706 9.00002 18.8491 9.00002 19.1624 8.97865C19.4922 8.95615 19.8221 8.90664 20.1481 8.77164C20.8831 8.46716 21.4672 7.88314 21.7716 7.14805C21.9066 6.82212 21.9561 6.49221 21.9787 6.16238C22 5.84913 22 5.47064 22 5.03199V4.96801C22 4.52936 22 4.15088 21.9787 3.83762C21.9561 3.50779 21.9066 3.17788 21.7716 2.85195C21.4672 2.11687 20.8831 1.53285 20.1481 1.22836C19.8221 1.09336 19.4922 1.04386 19.1624 1.02135C18.8491 0.999979 18.4706 0.999989 18.032 1Z" fill="black" />
+    </svg>`
   };
   function getCloseChatIcon(textChatOptions) {
     return textChatOptions?.popup?.icons?.close?.svg || chatIcons.closeChat;
@@ -90546,10 +90549,12 @@
   function mergeProgressiveMessages(messages, i, message) {
     const maxLinksCount = 9;
     const newImages = message.images || [];
+    const newSuggestions = message.suggestions || [];
     const oldText = messages[i].text || "";
     const newText = message.text || "";
     messages[i].text = oldText + newText;
     messages[i].images = [...messages[i].images || [], ...newImages];
+    messages[i].suggestions = [...messages[i].suggestions || [], ...newSuggestions];
     messages[i].links = [...messages[i].links || [], ...message.links || []].splice(0, maxLinksCount);
     if (!messages[i].parts) {
       messages[i].parts = [];
@@ -90905,6 +90910,14 @@
     }
     return "none";
   }
+  function getEnvironment() {
+    var key;
+    if (uiState.project.id) {
+      key = uiState.project.id;
+      return key.substr(key.indexOf("/"));
+    }
+    return "none";
+  }
   function getDeviceId() {
     if (!uiState.project.id)
       return;
@@ -90970,14 +90983,17 @@
         setTimeout(() => {
           broadcastThemeToIframes();
           iframeEl.classList.remove("alan-iframe-hidden");
+          removeIframeLoader(iframeEl);
         }, 200);
       } else {
         setTimeout(() => {
           iframeEl.classList.remove("alan-iframe-hidden");
+          removeIframeLoader(iframeEl);
         }, 1200);
       }
       if (Math.abs(iframeEl.clientHeight - height) !== 20) {
         iframeEl.style.height = (+height > maxIFrameHeight ? maxIFrameHeight : height) + "px";
+        iframeEl.style.minHeight = "0px";
       }
       if ((!withSvg || !iframeEl.src) && !window.alanIframes[iframeId]?.initialized) {
         broadcastReloadIframeToIframes(currentIframeId);
@@ -91079,8 +91095,15 @@
     broadcastReloadIframeToIframes,
     adjustIFrameSize,
     getThemeSrc,
-    addImgToThePage
+    addImgToThePage,
+    removeIframeLoader
   ];
+  function removeIframeLoader(iframe) {
+    const iframeWrapper = iframe.closest(".act-embed-container");
+    if (iframeWrapper) {
+      iframeWrapper.classList.remove("loading");
+    }
+  }
   function onIFrameSizeListener(event) {
     if (event.data && event.data.source !== "alan-chat-iframe") {
       return;
@@ -91617,8 +91640,8 @@
     const responseBubbleLabelFontSize = getNumPropVal(textChatOptions?.bubbles?.response?.label?.fontSize, 15);
     const responseBubbleLabelColor = textChatOptions?.bubbles?.response?.label?.color || `#171717`;
     const responseBubbleLabelEnabled = uiState?.textChat?.options?.bubbles?.response?.label?.enabled === true;
-    const btnAlignment = textChatOptions?.buttons?.alignment?.default || "center";
-    const btnAlignmentFullscreen = textChatOptions?.buttons?.alignment?.fullScreen || "center";
+    const btnAlignment = textChatOptions?.buttons?.alignment?.default || "right";
+    const btnAlignmentFullscreen = textChatOptions?.buttons?.alignment?.fullScreen || "right";
     const textChatAppearAnimationMs = uiState.textChat.defaults.appearAnimationMs;
     const headerLayoutName = textChatOptions?.header?.layout?.name || "centered-title";
     let cssChatHeight = getTextChatSizeAfterResize("height");
@@ -92714,7 +92737,7 @@
           padding-left: ${avatarSize + avatarRightMargin}px;
     }`;
     keyFrames += getStyleSheetMarker() + `.alan-btn__chat-buttons .alan-chat__chat-btn {
-        text-align: ${textChatOptions?.buttons?.textAlign?.default || "center"};
+        text-align: ${textChatOptions?.buttons?.textAlign?.default || "left"};
     }`;
     const defaultButtonBorderRadius = 20;
     keyFrames += getStyleSheetMarker() + `.alan-chat__chat-btn {
@@ -92745,6 +92768,48 @@
         box-shadow: ${textChatOptions?.buttons?.active?.hasShadow === false ? "none" : `0px 1px 3px rgba(16, 39, 126, 0.2)`};
         color: ${textChatOptions?.buttons?.active?.color || `#0078ff`};
     }`;
+    keyFrames += getStyleSheetMarker() + `.alan-btn__chat-suggestions {
+        margin-bottom: 16px;
+        display:flex;
+        flex-wrap: wrap;
+        gap: ${btnsGap}px;
+        clear: both;
+        justify-content: ${flexMap[btnAlignment]};
+    }`;
+    keyFrames += getStyleSheetMarker() + `.alan-btn_text-chat-full-screen .alan-btn__chat-suggestions {
+          justify-content: ${flexMap[btnAlignmentFullscreen]};
+    }`;
+    keyFrames += getStyleSheetMarker() + `.alan-btn__chat-suggestions .alan-chat__suggestion {
+        text-align: ${textChatOptions?.buttons?.textAlign?.default || "left"};
+    }`;
+    keyFrames += getStyleSheetMarker() + `.alan-chat__suggestion {
+        margin-bottom: 8px;
+        padding: ${getPaddingProp(buttonsTopPadding, buttonsRightPadding, buttonsBottomPadding, buttonsLeftPadding)};
+        line-height: 1.53;
+        display: inline-block;
+        border-radius: ${textChatOptions?.buttons?.borderRadius?.topLeft || defaultButtonBorderRadius}px ${textChatOptions?.buttons?.borderRadius?.topRight || defaultButtonBorderRadius}px ${textChatOptions?.buttons?.borderRadius?.bottomRight || defaultButtonBorderRadius}px ${textChatOptions?.buttons?.borderRadius?.bottomLeft || defaultButtonBorderRadius}px;
+        position: relative;
+        background-color: ${textChatOptions?.buttons?.default?.backgroundColor || `#ffffff`};
+        border: 1px solid ${textChatOptions?.buttons?.default?.borderColor || `#ffffff`};
+        box-shadow: ${textChatOptions?.buttons?.default?.hasShadow === false ? "none" : `0px 1px 3px rgba(16, 39, 126, 0.2)`};
+        color: ${textChatOptions?.buttons?.default?.color || `#171717`};
+        font-size: ${textChatOptions?.buttons?.fontSize || `15`}px;
+        word-break: break-word;
+        text-align: left;
+        cursor: pointer;
+    }`;
+    keyFrames += getStyleSheetMarker() + `.alan-chat__suggestion:hover {
+        background-color: ${textChatOptions?.buttons?.hover?.backgroundColor || `#ffffff`};
+        border: 1px solid ${textChatOptions?.buttons?.hover?.borderColor || `#ffffff`};
+        box-shadow: ${textChatOptions?.buttons?.hover?.hasShadow === false ? "none" : `0px 1px 3px rgba(16, 39, 126, 0.2)`};
+        color: ${textChatOptions?.buttons?.hover?.color || `#0078ff`};
+    }`;
+    keyFrames += getStyleSheetMarker() + `.alan-chat__suggestion:active {
+        background-color: ${textChatOptions?.buttons?.active?.backgroundColor || `#bcdafd`};
+        border: 1px solid ${textChatOptions?.buttons?.active?.borderColor || `#bcdafd`};
+        box-shadow: ${textChatOptions?.buttons?.active?.hasShadow === false ? "none" : `0px 1px 3px rgba(16, 39, 126, 0.2)`};
+        color: ${textChatOptions?.buttons?.active?.color || `#0078ff`};
+    }`;
     var chatResponseCssDeltaWidth = 82;
     keyFrames += getStyleSheetMarker() + `.alan-btn_text-chat-full-screen .alan-btn__chat-response {
         margin-bottom: 16px;
@@ -93208,6 +93273,15 @@
     keyFrames += styleSheetMarker + `.alan-btn__chat-response__dislike-btn svg path  {
         fill: ${bottomBtnsColor};
     }`;
+    keyFrames += styleSheetMarker + `.alan-btn__chat-graph  {
+        display: none;
+    }`;
+    keyFrames += styleSheetMarker + `.alan-btn__chat-graph svg path  {
+        fill: ${bottomBtnsColor};
+    }`;
+    keyFrames += styleSheetMarker + `.alan-btn__chat-graph:hover svg path  {
+        opacity: 0.8;
+    }`;
     keyFrames += styleSheetMarker + `.alan-btn__chat-response__copy-btn alan-btn__copy-icon {
         width: 22px;
      }`;
@@ -94193,6 +94267,10 @@
     style.textContent = highlightJsCss(theme);
     style.id = hljsStylesId;
     doc.getElementsByTagName("head")[0].appendChild(style);
+    var lightHLJSOnlyStyle = doc.createElement("style");
+    lightHLJSOnlyStyle.textContent = highlightJsCssForOnlyLightTheme();
+    lightHLJSOnlyStyle.id = `alan-hljs-styles-light-only`;
+    doc.getElementsByTagName("head")[0].appendChild(lightHLJSOnlyStyle);
   }
   function highlightCode(msgsHolder) {
     if (window.hljs) {
@@ -94451,6 +94529,96 @@ code.hljs {
     };
     return themes[theme];
   }
+  function highlightJsCssForOnlyLightTheme() {
+    const lightOnlyTheme = `
+.hljs-light-override pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 1em;
+}
+.hljs-light-override code.hljs {
+  padding: 3px 5px;
+}
+.hljs-light-override .hljs {
+    background-color: #f8f8f8 !important;
+}
+.hljs-light-override .hljs-doctag,
+.hljs-light-override .hljs-keyword,
+.hljs-light-override .hljs-meta .hljs-keyword,
+.hljs-light-override .hljs-template-tag,
+.hljs-light-override .hljs-template-variable,
+.hljs-light-override .hljs-type,
+.hljs-light-override .hljs-variable.language_ {
+  color: #d73a49;
+}
+.hljs-light-override .hljs-title,
+.hljs-light-override .hljs-title.class_,
+.hljs-light-override .hljs-title.class_.inherited__,
+.hljs-light-override .hljs-title.function_ {
+  color: #6f42c1;
+}
+.hljs-light-override .hljs-attr,
+.hljs-light-override .hljs-attribute,
+.hljs-light-override .hljs-literal,
+.hljs-light-override .hljs-meta,
+.hljs-light-override .hljs-number,
+.hljs-light-override .hljs-operator,
+.hljs-light-override .hljs-variable,
+.hljs-light-override .hljs-selector-attr,
+.hljs-light-override .hljs-selector-class,
+.hljs-light-override .hljs-selector-id {
+  color: #005cc5;
+}
+.hljs-light-override .hljs-regexp,
+.hljs-light-override .hljs-string,
+.hljs-light-override .hljs-meta .hljs-string {
+  color: #032f62;
+}
+.hljs-light-override .hljs-built_in,
+.hljs-light-override .hljs-symbol {
+  color: #e36209;
+}
+.hljs-light-override .hljs-comment,
+.hljs-light-override .hljs-code,
+.hljs-light-override .hljs-formula {
+  color: #6a737d;
+}
+.hljs-light-override .hljs-name,
+.hljs-light-override .hljs-quote,
+.hljs-light-override .hljs-selector-tag,
+.hljs-light-override .hljs-selector-pseudo {
+  color: #22863a;
+}
+.hljs-light-override .hljs-subst {
+  color: #24292e;
+}
+.hljs-light-override .hljs-section {
+  color: #005cc5;
+  font-weight: bold;
+}
+.hljs-light-override .hljs-bullet {
+  color: #735c0f;
+}
+.hljs-light-override .hljs-emphasis {
+  color: #24292e;
+  font-style: italic;
+}
+.hljs-light-override .hljs-strong {
+  color: #24292e;
+  font-weight: bold;
+}
+.hljs-light-override .hljs-addition {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.hljs-light-override .hljs-deletion {
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+`;
+    return lightOnlyTheme;
+  }
 
   // alan_btn/src/helpers/mini/keepJSONInAttr.ts
   function encodeValueForHtmlAttr(data) {
@@ -94485,7 +94653,8 @@ code.hljs {
 
   // alan_btn/src/textChat/helpers/processClickByButtonInChat.ts
   function processClickByButtonInChat(clickedEl, btnInstance, sendTextCall) {
-    if (clickedEl.classList.contains("alan-chat__chat-btn")) {
+    clickedEl = clickedEl.classList.contains("alan-chat__chat-btn") || clickedEl.closest(".alan-chat__suggestion");
+    if (clickedEl) {
       const btnLabel = clickedEl.getAttribute("data-alan-button-label");
       const btnText = clickedEl.getAttribute("data-alan-button-send-text");
       const vsAttr = clickedEl.getAttribute("data-alan-button-set-visual-state");
@@ -94599,7 +94768,7 @@ code.hljs {
     const reqId = msg.ctx?.reqId || msg.reqId;
     if (reqId) {
       window.tutorProject.call("sendFeedback", { reqId, status: msg.liked });
-      if (options.onEvent) {
+      if (options?.onEvent) {
         options.onEvent({ name: "feedbackSent", status: msg.liked, reqId });
       }
     }
@@ -94617,9 +94786,16 @@ code.hljs {
   }
 
   // alan_btn/src/textChat/saveChatStateToFile.ts
-  var functionsToInsert = iFrameSizeListenerFunctions.map((fn) => fn.toString()).join("\n\n");
-  var onIFrameSizeListenerString = onIFrameSizeListener.toString();
-  async function saveChatState(chatName, chatEl, width, projectId, headContent, codeContent) {
+  var LIBS_PREFIX = "https://storage.googleapis.com/alan-ai-public-resources/save-debug-chat-resources";
+  async function saveChatState({
+    chatName,
+    chatEl,
+    width,
+    projectId,
+    environment,
+    requestIds,
+    headContent
+  }) {
     const chatConteiner = chatEl.cloneNode(true);
     const images = Array.from(chatConteiner.querySelectorAll("img"));
     let imgData;
@@ -94666,13 +94842,410 @@ code.hljs {
         console.error(`Failed to fetch or process iframe from ${srcUrl}:`, error);
       }
     }
+    const functionsToInsert = iFrameSizeListenerFunctions.map((fn) => fn.toString()).join("\n\n");
+    const onIFrameSizeListenerString = onIFrameSizeListener.toString();
+    const copyTextToBufferString = copyTextToBuffer.toString();
+    const outputPhrases = await getOutputLogs({
+      projectId,
+      environment,
+      requestIds
+    });
     const alanMainClass = "alan-" + projectId;
+    const code = `
+        <script  type="text/javascript">
+
+        ${functionsToInsert}
+        ${copyTextToBufferString}
+
+        function copyCodeHandler(text){
+            copyTextToBuffer(text);
+
+                copyButton.classList.add('alan-copy-btn-copied');
+                setTimeout(() => {
+                copyButton.classList.remove('alan-copy-btn-copied');
+                }, 2000);
+        }
+
+
+        window.hljs.addPlugin({
+            "after:highlightElement": ({ el, text }) => {
+            const wrapper = el.parentElement;
+            if (wrapper == null) {
+                return;
+            }
+
+            wrapper.classList.add("alan-btn__chat-response__code-wrapper");
+
+            const copyButton = document.createElement("span");
+            copyButton.classList.add(
+                "alan-btn__chat-response__copy-code-btn",
+            );
+
+            const chatIcons = {
+                copy: '<svg  class="alan-btn__copy-icon" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 16.5L19.5 4.5L18.75 3.75H9L8.25 4.5L8.25 7.5L5.25 7.5L4.5 8.25V20.25L5.25 21H15L15.75 20.25V17.25H18.75L19.5 16.5ZM15.75 15.75L15.75 8.25L15 7.5L9.75 7.5V5.25L18 5.25V15.75H15.75ZM6 9L14.25 9L14.25 19.5L6 19.5L6 9Z" fill="#080341"/></svg>',
+                copied: '<svg class="alan-btn__copied-icon" width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg" aria-labelledby="okIconTitle" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#000000"> <title id="okIconTitle">Copied!</title> <polyline points="4 13 9 18 20 7"/> </svg>'
+            };
+
+            copyButton.innerHTML = chatIcons.copy + chatIcons.copied;
+
+            copyButton.onclick = () => {
+                copyCodeHandler(text)
+            };
+
+            wrapper.appendChild(copyButton);
+            },
+        });
+
+        window.addEventListener("message", ${onIFrameSizeListenerString});
+
+        function unescapeHtml(safe) {
+            return safe
+                .replace(/&lt;(?!w)/g, "<")
+                .replace(/(?<!w)&gt;/g, ">")
+                .replace(/&amp;/g, "&")
+                .replace(/&quot;/g, '"')
+                .replace(/&#039;/g, "'");
+        }
+
+        function escapeHtml(unsafe) {
+            return unsafe
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+        }
+        
+        var logs = ${JSON.stringify(outputPhrases)};
+        
+        logs = logs.map(el => ({
+            ...el,
+            context: unescapeHtml(el.context)
+        }));
+        
+        var zoomInstance;
+        var xRef, yRef, isDraggingRef;
+        var dragThreshold = 5;
+        var detailsId = null;
+        var detailsMap = {};
+
+        checkMsgLogs();
+
+        function checkMsgLogs() {
+
+            var graphIcons = document.querySelectorAll('.chat-bubble_graph, .alan-btn__chat-graph');
+
+            graphIcons.forEach((child) => {
+                var msgReqId = child.getAttribute('data-request-id');
+                const foundLog = logs.find(l => l.requestId === msgReqId);
+                if (!foundLog || foundLog?.context === '') {
+                    child.parentElement.removeChild(child);
+                }
+            });
+        }
+
+        document.addEventListener('mousedown', function onGraphClick(e) {
+            var isOverlayEl = e.target.id === "overlay";
+
+            if (isOverlayEl) {
+                closePopup(e.target.getAttribute('popup-id'));
+                return;
+            }
+        })
+
+        document.addEventListener('click', function onCopyClick(e) {
+            let clickedEl = e.target;
+            clickedEl = clickedEl.closest('.alan-btn__chat-response__copy-code-btn');
+            
+            if (clickedEl) {
+                clickedEl.classList.add('alan-copy-btn-copied');
+                setTimeout(() => {
+                    clickedEl.classList.remove('alan-copy-btn-copied');
+                }, 2000);
+
+                const codeBlockEl = clickedEl.closest('.alan-btn__chat-response__code-wrapper');
+                if (codeBlockEl) {
+                    copyTextToBuffer(codeBlockEl.innerText);
+                }
+            }
+        });
+
+        document.addEventListener('click', function onGraphClick(e) {
+            var graphEl = e.target.closest('.chat-bubble_graph, .alan-btn__chat-graph');
+            if (graphEl) {
+                var phrase = logs.filter(l => l.requestId === graphEl.getAttribute('data-request-id'))[0];
+
+                if (phrase) {
+                    var graphData, graph, graphTitle;
+
+                    try {
+                        graphData = JSON.parse(phrase.context);
+                        if (graphData && graphData.opGraph) {
+                            graph = graphData.opGraph.dot;
+                            graphTitle = graphData.opGraph.title;
+                            detailsMap = graphData.opGraph.val;
+                        }
+
+                        console.info('graphData', graphData)
+                    } catch (err) {
+                        console.log(err);
+                    }
+
+                    createPopup('graph-popup','graph', graphTitle );
+
+                    renderSvg(graph);
+                }
+            }
+        })
+
+        function createPopup (id, bodyId, title) {
+              var overlay = document.createElement('div');
+                var popup = document.createElement('div');
+                var popupBody = document.createElement('div');
+                var popupTitle = document.createElement('div');
+                var popupCloseBtn = document.createElement('div');
+                popupCloseBtn.innerHTML = '<svg width="20px" height="20px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"/></svg>';
+                overlay.id = 'overlay';
+                overlay.setAttribute('popup-id', id)
+                overlay.classList.add('${alanMainClass}');
+                overlay.classList.add('hljs-light-override');
+                popupBody.id = bodyId;
+                if(bodyId === 'details'){
+                 popup.classList.add('alan-btn__chat-messages');
+                }
+               
+                popup.id = 'popup';
+                popupTitle.id = 'popup-title';
+                popupCloseBtn.id = 'popup-close-btn';
+
+                overlay.appendChild(popup);
+                popup.appendChild(popupTitle);
+                popup.appendChild(popupBody);
+                
+                popupTitle.innerText = title;
+                popupTitle.appendChild(popupCloseBtn);
+
+                popupCloseBtn.addEventListener('click', ()=>{closePopup(id)});
+
+                document.body.appendChild(overlay);
+        }
+
+        function cancelEvent(e) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+
+        const resetSelection = () => {
+            d3.selectAll('#graph .selected').classed('selected', false);
+        }
+
+        const addGraphEvents = () => {
+            const nodes = d3.selectAll('.node,.edge,.w-clicked-elements text');
+            nodes.on("click", function (e) {
+                if (isDraggingRef) {
+                    cancelEvent(e);
+                    return;
+                }
+
+                cancelEvent(e);
+                resetSelection();
+                const el = this.closest('[id]');
+
+                if (el?.classList?.contains('node')) {
+                    const id = el.getAttribute('id');
+                    console.info('Id:', id);
+                    if (detailsMap[id]) {
+                        openDetailsPopup(id);
+                    }
+                    el.classList.add("selected");
+                } else if (el?.firstChild?.tagName?.toLowerCase() === 'a') {
+                    const id = el.getAttribute('id')?.replace('a_', '');
+                    console.info('Id:', id);
+                    if (detailsMap[id]) {
+                        openDetailsPopup(id);
+                    }
+                    el.classList.add("selected");
+                } else {
+                    this.classList.add("selected");
+                }
+            });
+        };
+
+        function closePopup(popupId){
+            var overlayEl = document.querySelector('[popup-id="'+popupId+'"]');
+            if (overlayEl) {
+                overlayEl.remove();
+            }
+        }
+
+        function getSvg(graph, engine) {
+            return new Promise((resolve, reject) => {
+                try {
+                 Viz.instance().then(viz => {
+                        resolve(viz.renderSVGElement(graph, { engine }));
+                    });
+                } catch (error) {
+                 console.info(error)
+                    reject(error);
+                }
+            });
+        }
+
+        document.addEventListener('click', function (e){
+            const clickedEl = e.target.closest('.mode-btn');
+            if (!clickedEl) return;
+
+            const mode = clickedEl.getAttribute('mode');
+
+            if (!detailsId) return;
+
+            renderDetailsContent(detailsId, mode);
+        });
+
+        function renderDetailsContent(id, mode){
+            var detailsData = detailsMap[id];
+            
+            if (!detailsData) return;
+            const detailsEl = document.getElementById('details');
+
+            const elementsWithMode = document.querySelectorAll('[mode]');
+            elementsWithMode.forEach(el => {
+                el.classList.remove('active');
+            });
+
+            const curMode = document.querySelector('[mode="'+mode+'"]');
+            if (curMode) {
+                curMode.classList.add('active');
+            }
+
+            detailsEl.className = '';
+            detailsEl.classList.add('mode-'+mode);
+
+            var codePart = typeof detailsData.value === 'object' && detailsData.value !== null ? JSON.stringify(detailsData.value,null,2): escapeHtml(detailsData.value);
+            var markdownPart = '';
+
+            if (detailsData.type === 'markdown') {
+                markdownPart = alanMarkdown(detailsData.value);
+            }
+
+            if (mode === 'code') {
+                detailsEl.innerHTML = '<div class="details-content">'+codePart+'</div>';
+            }
+
+            if (mode === 'split') {
+                detailsEl.innerHTML = '<div class="details-content">'+codePart+'</div><div class="details-content with-markdown">'+markdownPart+'</div>';
+            }
+
+            if (mode === 'preview') {
+                detailsEl.innerHTML = '<div class="details-content with-markdown">'+markdownPart+'</div>';
+            }
+
+            detailsEl.querySelectorAll('pre code:not(.alan-btn__hljs-processed)').forEach((el) => {
+                window.hljs.highlightElement(el);
+                el.classList.add('alan-btn__hljs-processed');
+            });
+        }
+
+        function openDetailsPopup(id){
+            detailsId = id;
+            var detailsData = detailsMap[id];
+            
+            if (!detailsData) return;
+            
+            createPopup('details-popup', 'details', detailsData.name);
+
+            if (detailsData.type === 'markdown') {
+                const detailsPopupEl = document.querySelector('[popup-id="details-popup"]');
+                if (detailsPopupEl) {
+
+                    const codeSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clipPath="url(#clip0_1_30)"><path d="M6.12023 14.2531L0 10.9153V9.06662L6.12023 5.74774V7.91913L1.85555 9.96778L6.12023 12.0937V14.2531Z" fill="#010002" /><path d="M7.16559 15.4212L11.2243 4.5788H12.5066L8.43841 15.4212H7.16559Z" fill="#010002" /><path d="M13.8798 14.2531V12.0937L18.1436 9.98499L13.8798 7.89254V5.74689L20 9.07006V10.9076L13.8798 14.2531Z" fill="#010002" /></g><defs><clipPath id="clip0_1_30"><rect width="20" height="20" fill="white" /></clipPath></defs></svg>'; 
+                    const splitSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.22222 17H4.55556C3.69689 17 3 16.3031 3 15.4444V4.55556C3 3.69611 3.69689 3 4.55556 3H15.4444C16.3039 3 17 3.69611 17 4.55556V15.4444C17 16.3031 16.3039 17 15.4444 17H10.7778V17.0179H9.22222V17ZM9.22222 15.4444V4.55556H4.55556V15.4444H9.22222ZM15.4444 4.55556H10.7778V15.4444H15.4444V4.55556Z" fill="black" /></svg>';
+                    const previewSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M9.99535 12.9166C11.6062 12.9166 12.912 11.6108 12.912 9.99998C12.912 8.38915 11.6062 7.08331 9.99535 7.08331C8.38452 7.08331 7.07867 8.38915 7.07867 9.99998C7.07867 11.6108 8.38452 12.9166 9.99535 12.9166ZM9.99535 11.2453C9.3076 11.2453 8.75002 10.6877 8.75002 9.99998C8.75002 9.31223 9.3076 8.75465 9.99535 8.75465C10.6831 8.75465 11.2407 9.31223 11.2407 9.99998C11.2407 10.6877 10.6831 11.2453 9.99535 11.2453Z" fill="#0F0F0F" /><path fillRule="evenodd" clipRule="evenodd" d="M10 4.16669C5.99069 4.16669 3.26395 6.3409 1.82445 7.89984C0.714523 9.10185 0.714524 10.8982 1.82445 12.1002C3.26395 13.6592 5.99069 15.8334 10 15.8334C14.0094 15.8334 16.7361 13.6592 18.1756 12.1002C19.2855 10.8982 19.2855 9.10185 18.1756 7.89984C16.7361 6.3409 14.0094 4.16669 10 4.16669ZM3.04893 9.03052C4.32363 7.65004 6.63911 5.83335 10 5.83335C13.3609 5.83335 15.6764 7.65004 16.9511 9.03052C17.4714 9.59402 17.4714 10.406 16.9511 10.9695C15.6764 12.35 13.3609 14.1667 10 14.1667C6.63911 14.1667 4.32363 12.35 3.04893 10.9695C2.52858 10.406 2.52858 9.59402 3.04893 9.03052Z" fill="#0F0F0F" /></svg>';
+
+                    const popupHeaderEl = detailsPopupEl.querySelector('#popup-title');
+                    const modeSwitcherElement = document.createElement('div');
+                    modeSwitcherElement.classList.add('switcher-modes');
+                    modeSwitcherElement.innerHTML = '<div class="mode-btn" mode="code">'+codeSvg+'</div><div class="mode-btn" mode="split">'+splitSvg+'</div><div class="mode-btn" mode="preview">'+previewSvg+'</div>';
+                    popupHeaderEl.appendChild(modeSwitcherElement);
+                }
+            }
+
+            renderDetailsContent(id, 'code');
+
+        }
+
+        const renderSvg = async (graph) => {
+
+        const graphEl = document.getElementById('graph');
+
+            const height = graphEl.clientHeight || 500;
+            const width = graphEl.clientWidth || 900;
+
+            try {
+                const svgEl = await getSvg(graph, 'dot');
+                svgEl.setAttribute('width', width + 'px');
+                svgEl.setAttribute('height', height + 'px');
+
+                document.getElementById("graph").innerHTML = '';
+                document.getElementById("graph").appendChild(svgEl);
+
+                const svgD3 = d3.select('#graph svg');
+
+                svgD3.on("mousedown", function (event) {
+                    xRef = event.clientX;
+                    yRef = event.clientY;
+                    isDraggingRef = false;
+                });
+
+                svgD3.on("mousemove", function (event) {
+                    if (event.buttons === 1) {
+                        const dx = event.clientX - xRef;
+                        const dy = event.clientY - yRef;
+                        if (Math.sqrt(dx * dx + dy * dy) > dragThreshold) {
+                            isDraggingRef = true;
+                        }
+                    }
+                });
+
+                zoomInstance = svgPanZoom(svgEl, {
+                    zoomEnabled: true,
+                    controlIconsEnabled: true,
+                    fit: true,
+                    center: true,
+                    minZoom: 0.1,
+                    maxZoom: 400
+                });
+
+                svgEl.addEventListener('paneresize', function (e) {
+                    zoomInstance.resize();
+                }, false);
+                window.addEventListener('resize', function (e) {
+                    zoomInstance.resize();
+                });
+                console.timeEnd('render graph');
+
+                addGraphEvents();
+
+
+            } catch (error) {
+              console.info(error)
+            }
+        };
+    <\/script>
+        `;
     const newHtmlContent = `
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Alan Text Chat History</title>
+        <link href="${LIBS_PREFIX}/main.css?v=1" rel="stylesheet" />
+        <link href="${LIBS_PREFIX}/highlight.light.css" rel="stylesheet" />
+        <script src="${LIBS_PREFIX}/d3.v7.min.js" type="text/javascript"><\/script>
+        <script src="${LIBS_PREFIX}/viz-standalone.js" type="text/javascript"><\/script>
+        <script src="${LIBS_PREFIX}/svg-pan-zoom.min.js" type="text/javascript"><\/script>
+        <script src="${LIBS_PREFIX}/alan_markdown.js" type="text/javascript"><\/script>
+        <script src="${LIBS_PREFIX}/highlight.min.js?v=2" type="text/javascript"><\/script>
         ${headContent ? headContent : ""}
         <style>
         * {
@@ -94700,6 +95273,9 @@ code.hljs {
         .alan-btn__history-chat-header > h1 {
             padding-left: 10px !important;
             color: #000;
+            font-size: 2em;
+            margin-block-start: 0.67em;
+            margin-block-end: 0.67em;
         }
         .alan-btn__history-chat-header {
             margin: 0px auto;
@@ -94730,6 +95306,143 @@ code.hljs {
             gap: 20px;
             justify-content: flex-end;
         }
+
+        .alan-btn__chat-graph {
+            display: flex!important;
+            cursor:pointer;
+            margin-top: 4px;
+            align-items: flex-end;
+        }
+
+        .alan-btn__chat-graph svg {
+            max-width: 16px;
+        }
+
+        #overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #0000004d;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        #popup {
+            height: 90%;
+            width: 90%;
+            border-radius: 8px;
+            background: #fff;
+            color:#000;
+        }
+
+        #popup-title {
+            padding: 0 20px;
+            height: 40px;
+            position:relative;
+            display:flex;
+            align-items: center;
+            justify-content: flex-start;
+            font-weight: bold;
+            font-size: 20px;
+            border-bottom: 1px solid rgba(211, 211, 211, .5);
+        }
+
+        #popup-close-btn {
+            position: absolute;
+            top:10px;
+            right:10px;
+            cursor: pointer;
+        }
+
+        #graph {
+            height:calc(100% - 40px);
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        #graph svg {
+            backface-visibility: hidden;
+            will-change: transform;
+            width: 100%;
+        }
+
+        #graph svg text {
+            font-size: 8.5px;
+            font-family: monospace
+        }
+
+        #details {
+            overflow: auto;
+            height: calc(100% - 40px);
+            font-family: monospace;
+            white-space: pre;
+        }
+
+        .details-content {
+            padding: 20px;
+            overflow: auto;
+            height: 100%;
+        }
+
+        .switcher-modes {
+            position: absolute;
+            right: 40px;
+            display: flex;
+            top: 50%;
+            transform: translateY(-50%);
+            border: 1px solid rgba(0, 121, 232,.5);
+            background-color: rgba(176, 217, 255, 0.15);
+            border-radius: 8px;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .mode-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            padding: 4px;
+        }
+
+        .mode-btn.active {
+            background-color: #b0d9ff73;
+        }
+
+        .mode-btn:first-of-type {
+            border-right: 1px solid rgba(0, 121, 232,.5);
+        }
+
+        .mode-btn:last-of-type {
+            border-left: 1px solid rgba(0, 121, 232,.5);
+        }
+
+        .mode-btn svg path {
+            fill: rgba(0, 121, 232, 1);
+        }
+
+        .mode-btn:hover svg path {
+            fill: #ff8800;
+        }
+
+        .mode-split {
+            display: flex;
+            justify-content: center;
+        }
+
+        .mode-split > div {
+            width: 50%;
+            min-width: 50%;
+            max-width: 50%;
+        }
+        .mode-split > div:first-of-type {
+            border-right: 1px solid rgba(211, 211, 211, .5);
+        }
         </style>
     </head>
     <body class="alan-btn__history-body">
@@ -94825,7 +95538,7 @@ code.hljs {
                 ${chatConteiner.outerHTML}
             </div>
         </div>
-        ${codeContent ? codeContent : ""}
+        ${code}
     </body>
     </html>
 `;
@@ -94878,6 +95591,33 @@ code.hljs {
       reader.readAsDataURL(blob);
     });
   }
+  async function getOutputLogs(param) {
+    return new Promise((resolve, reject) => {
+      if (!window.tutorProject)
+        reject();
+      window.tutorProject.call("getMessageGraphs", param, function(e, res) {
+        if (e) {
+          reject({ error: e });
+        } else if (res && res.error) {
+          reject({ ...res });
+        } else {
+          if (res.graphs) {
+            resolve(
+              res.graphs.map((el) => ({
+                ...el,
+                context: escapeHtmlForGraph(el?.context || "")
+              }))
+            );
+          } else {
+            reject();
+          }
+        }
+      });
+    });
+  }
+  function escapeHtmlForGraph(unsafe) {
+    return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  }
   async function inlineExternalScripts(htmlContent) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlContent, "text/html");
@@ -95046,8 +95786,33 @@ code.hljs {
 
   // alan_btn/alan_btn.ts
   var import_sjcl = __toESM(require_sjcl());
+
+  // alan_btn/src/textChat/chatSuggestions.ts
+  function renderSuggestions(suggestions) {
+    return `<div class="alan-btn__chat-suggestions">
+     ${suggestions?.map((suggestion) => {
+      const { textToAsk, label } = getSuggestionMetadata(suggestion);
+      return `<div class="alan-chat__suggestion" data-alan-button-send-text="${textToAsk}">${label}</div>`;
+    }).join("") || ""}</div>`;
+  }
+  function getSuggestionMetadata(suggestion) {
+    const { text, markdown } = suggestion;
+    let label = "";
+    if (markdown) {
+      label = alanMarkdown(markdown || "");
+    } else {
+      label = text || "";
+    }
+    const textToAsk = (text || label?.replace(/<\/?[^>]+(>|$)/g, "")).replace(/\n/g, " ").trim();
+    return {
+      textToAsk,
+      label
+    };
+  }
+
+  // alan_btn/alan_btn.ts
   (function(ns) {
-    uiState.lib.version = "alan-version.1.8.87".replace("alan-version.", "");
+    uiState.lib.version = "alan-version.1.8.88".replace("alan-version.", "");
     if (window.alanBtn) {
       console.warn("Alan: the Alan Button source code has already added (v." + uiState.lib.version + ")");
     }
@@ -97352,8 +98117,14 @@ ${curDialogId}`);
         }
         return result ? `<span class="alan-btn__chat-response-text-wrapper">${fixTargetForLinks(result)}</span>` : "";
       }
+      function addGraphIcon(msg) {
+        if (msg.type === "response" /* Response */) {
+          return `<span class='alan-btn__chat-graph' data-request-id="${getMsgReqId(msg)}">${chatIcons.graph}</span>`;
+        }
+        return "";
+      }
       function buildMsgContent(msg) {
-        return `${buildImagesContent(msg)}${buildMsgTextContent(msg)}${buildLinksContent(msg)}${buildCommandsBlock(msg, uiState?.textChat?.options)}${buildMsgIncommingLoader(msg)}`;
+        return `${buildImagesContent(msg)}${buildMsgTextContent(msg)}${buildLinksContent(msg)}${buildCommandsBlock(msg, uiState?.textChat?.options)}${buildMsgIncommingLoader(msg)}${addGraphIcon(msg)}`;
       }
       initMathJax(textChatMessages.length, (i2) => getMsgElForMathJax(i2));
       document.addEventListener("click", (e) => {
@@ -97399,7 +98170,10 @@ ${LEARN_MORE_LABEL}
       }, false);
       window.addEventListener("click", (e) => {
         var clickedEl = e.target;
-        processClickByButtonInChat(clickedEl, btnInstance, _sendText);
+        processClickByButtonInChat(clickedEl, btnInstance, (text) => {
+          textChatScrollPosition = null;
+          _sendText(text);
+        });
       });
       function getMsgBubbleLabel(msg) {
         if (msg.type === "request" || msg.type === "response") {
@@ -97439,6 +98213,7 @@ ${LEARN_MORE_LABEL}
           if (window.fakeMsg) {
             msg.text = window.fakeMsg?.text || msg.text;
             msg.images = window.fakeMsg?.images || msg.images;
+            msg.suggestions = window.fakeMsg?.suggestions || msg.suggestions;
             msg.links = window.fakeMsg?.links || msg.links;
             if (window.fakeMsg?.text) {
               if (msg.ctx) {
@@ -97472,7 +98247,11 @@ ${LEARN_MORE_LABEL}
             } else {
               innerMsgPart = buildMsgContent(msg);
             }
-            msgHtml = `<div class="alan-btn__chat-inner-msg ${msg.type === "request" ? "alan-btn__chat-request" : "alan-btn__chat-response"} ${msg.images?.length > 0 ? "with-images" : ""} ${isMsgContainsTable(innerMsgPart) ? "with-table" : ""} ${isMsgContainsIFrame(innerMsgPart) ? "with-iframe" : ""}">${innerMsgPart}</div>`;
+            let suggestionsHtml = "";
+            if (msg?.suggestions?.length > 0) {
+              suggestionsHtml += renderSuggestions(msg.suggestions);
+            }
+            msgHtml = `<div class="alan-btn__chat-inner-msg ${msg.type === "request" ? "alan-btn__chat-request" : "alan-btn__chat-response"} ${msg.images?.length > 0 ? "with-images" : ""} ${isMsgContainsTable(innerMsgPart) ? "with-table" : ""} ${isMsgContainsIFrame(innerMsgPart) ? "with-iframe" : ""}">${innerMsgPart}</div>${suggestionsHtml}`;
           }
           if (msg.name === "loading") {
             const loaderId = `loading-msg-${guid()}`;
@@ -97490,6 +98269,7 @@ ${LEARN_MORE_LABEL}
         if (isNew) {
           var div = document.createElement("div");
           div.id = "msg-" + msgInd;
+          div.setAttribute("data-request-id", getMsgReqId(msg));
           div.classList.add("alan-btn__chat-msg-holder");
           div.setAttribute("data-msg-index", msgInd);
           if (msg.type === "chat") {
@@ -97499,7 +98279,12 @@ ${LEARN_MORE_LABEL}
           if (msg.type === "connection-separator") {
             div.innerHTML = msgHtml;
           } else {
-            div.innerHTML = `${msg.name !== "loading" ? getMsgBubbleLabel(msg) : ""}<div class="alan-btn__chat-bubble-holder">${(msg.type === "chat" || msg.type === "buttons" ? "" : avatarHtml) + msgHtml}</div>`;
+            div.innerHTML = `
+                    ${msg.name !== "loading" ? getMsgBubbleLabel(msg) : ""}
+                    <div class="alan-btn__chat-bubble-holder">
+                        ${msg.type === "chat" || msg.type === "buttons" ? "" : avatarHtml}
+                        <div class="supper1">${msgHtml}</div>
+                    </div>`;
           }
           msgHolder.appendChild(div);
           if (uiState.textChat.available && textChatIsHidden && msg.type === "response" && msg.read !== true) {
@@ -97526,7 +98311,10 @@ ${LEARN_MORE_LABEL}
                 innerEl.innerHTML = innerMsgPart;
                 innerEl.classList.remove("alan-incoming-msg");
                 innerEl.id = "";
-                innerEl.parentElement.insertAdjacentHTML("beforebegin", getMsgBubbleLabel(msg));
+                const chatHolder = innerEl.closest(".alan-btn__chat-bubble-holder");
+                if (chatHolder) {
+                  chatHolder.insertAdjacentHTML("beforebegin", getMsgBubbleLabel(msg));
+                }
                 if (msg.type === "response" && msg.images?.length > 0) {
                   innerEl.classList.add("with-images");
                 }
@@ -97565,6 +98353,13 @@ ${LEARN_MORE_LABEL}
                 innerEl.insertAdjacentHTML("beforeend", buildLinksContent(updatedMsg));
                 innerEl.insertAdjacentHTML("beforeend", buildCommandsBlock(msg, uiState?.textChat?.options));
                 innerEl.insertAdjacentHTML("beforeend", buildMsgIncommingLoader(msg));
+                const newSuggestions = msg?.suggestions;
+                if (newSuggestions?.length > 0) {
+                  if (innerEl.nextElementSibling?.classList.contains("alan-btn__chat-suggestions")) {
+                    innerEl.nextElementSibling.remove();
+                  }
+                  innerEl.insertAdjacentHTML("afterend", renderSuggestions(updatedMsg.suggestions));
+                }
                 if (isMsgContainsTable(innerEl?.innerHTML)) {
                   innerEl.classList.add("with-table");
                 }
@@ -98186,7 +98981,9 @@ ${LEARN_MORE_LABEL}
             rightHeaderIconsHolder.appendChild(saveChatStateBtnImg);
             rightHeaderIconsHolder.appendChild(expandCollapseChatBtnImg);
             saveChatStateBtnImg.addEventListener("click", async () => {
-              const headContent = document.head.innerHTML;
+              const customHeadContent = `
+                        ${document.head.innerHTML}
+                        `;
               const initChat = document.querySelector("#chatMessagesWrapper");
               if (!initChat)
                 return;
@@ -98198,7 +98995,15 @@ ${LEARN_MORE_LABEL}
                 saveChatStateBtnImg.classList.remove("saving");
               }, 8e3);
               try {
-                await saveChatState(title, initChat, chatWidth2, getProjectId(), headContent);
+                await saveChatState({
+                  chatName: title,
+                  chatEl: initChat,
+                  width: chatWidth2,
+                  projectId: getProjectId(),
+                  environment: getEnvironment(),
+                  requestIds: textChatMessages?.length > 0 ? textChatMessages.filter((m) => m.type === "response" /* Response */).map((m) => getMsgReqId(m)) : [],
+                  headContent: customHeadContent
+                });
                 saveChatStateBtnImg.classList.remove("saving");
               } catch (error) {
                 saveChatStateBtnImg.classList.remove("saving");