Add separator to the text chat for case when it's connected to the di…

…alog with new context
alan-ai · Nov 26, 2024 · 6b8bd3a · 6b8bd3a
1 parent f242150
commit 6b8bd3a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 21 deletions.
diff --git a/dist/alan_lib.js b/dist/alan_lib.js
@@ -89679,6 +89679,13 @@
     let replaceLoader = false;
     let msgInd = null;
     let updateResponse = false;
+    if (msg.type === "connection-separator") {
+      messages.push({ ...msg });
+      return {
+        isNew: true,
+        msgInd: messages.length - 1
+      };
+    }
     const msgReqId = msg.reqId || msg?.ctx?.reqId;
     const msgResponseId = msg?.ctx?.responseId;
     if (msg.type === "response" && msg.name === "loading") {
@@ -90482,6 +90489,7 @@
     const responseBubbleRightPadding = getNumPropVal(textChatOptions?.bubbles?.response?.padding?.right, 20);
     const responseBubbleBottomPadding = getNumPropVal(textChatOptions?.bubbles?.response?.padding?.bottom, 9);
     const responseBubbleLeftPadding = getNumPropVal(textChatOptions?.bubbles?.response?.padding?.left, 20);
+    const newDialogSeparatorColor = textChatOptions?.bubbles?.newDialog?.separator?.color || `#d3dae2`;
     const waitingResponseBubbleLayout = textChatOptions?.bubbles?.waitingResponse?.layout || "default";
     const responseBubbleBorderRadiusTopLeft = getNumPropVal(textChatOptions?.bubbles?.response?.borderRadius?.topLeft, defaultBubbleBorderRadius);
     const responseBubbleBorderRadiusTopRight = getNumPropVal(textChatOptions?.bubbles?.response?.borderRadius?.topRight, defaultBubbleBorderRadius);
@@ -91589,6 +91597,14 @@
             box-shadow: none;
             border-color:transparent;` : ``}
     }`;
+    keyFrames += getStyleSheetMarker() + `.alan-btn__chat-connection-separator {
+        width: 100%;
+        height: 1px;
+        min-height: 1px;
+        max-height: 1px;
+        background-color: ${newDialogSeparatorColor};
+        margin: 50px 0;
+    }`;
     keyFrames += getStyleSheetMarker() + `.alan-btn__chat-buttons {
         margin-bottom: 16px;
         display:flex;
@@ -93910,7 +93926,7 @@ code.hljs {
 
   // alan_btn/alan_btn.ts
   (function(ns) {
-    uiState.lib.version = "alan-version.1.8.70".replace("alan-version.", "");
+    uiState.lib.version = "alan-version.1.8.71".replace("alan-version.", "");
     if (window.alanBtn) {
       console.warn("Alan: the Alan Button source code has already added (v." + uiState.lib.version + ")");
     }
@@ -94038,7 +94054,7 @@ code.hljs {
             closeTextChat();
           },
           clear: () => {
-            clearTextChat();
+            onClearTextChatBtnClick();
           }
         },
         //deprecated
@@ -95000,7 +95016,7 @@ code.hljs {
         if (isLocalStorageAvailable) {
           return localStorage.getItem(getDialogIdSessionKey());
         }
-        return null;
+        return void 0;
       }
       function saveDialogId(dialogId) {
         if (isLocalStorageAvailable && dialogId) {
@@ -95497,14 +95513,16 @@ code.hljs {
             switchState(getDefaultBtnState());
           }
           const { dialogId } = window.tutorProject.getSettings();
-          if (getSavedDialogId() !== dialogId) {
-            clearChatAndChatHistory();
-          }
           console.info("Alan: connected to dialog - ", dialogId, "prev. dialog: ", getSavedDialogId() || "-");
           curDialogId = dialogId;
-          saveDialogId(dialogId);
-          restoreMessageList(true);
-          sentMessages = restoreSentMessages();
+          if (getSavedDialogId() !== dialogId) {
+            saveDialogId(dialogId);
+            onNewDialogAutoReconnect();
+          } else {
+            saveDialogId(dialogId);
+            restoreMessageList(true);
+          }
+          console.info("Alan: curDialogId", curDialogId);
           if (!isTutorMode()) {
             sendSyncPageState();
           }
@@ -96176,6 +96194,8 @@ ${LEARN_MORE_LABEL}
           if (msg?.buttons) {
             msgHtml = renderButtons(msg?.buttons);
           }
+        } else if (msg.type === "connection-separator") {
+          msgHtml = `<div class="alan-btn__chat-connection-separator"></div>`;
         } else if (msg.type === "chat") {
           msgHtml = `<div class="alan-btn__chat-popup">${msg.html}</div>`;
         } else {
@@ -96209,7 +96229,11 @@ ${LEARN_MORE_LABEL}
             addPopupStyle(msg, div);
           }
           var avatarHtml = `<div class="alan-btn__chat-avatar ${msg.type}">` + (msg.type === "request" ? `<div class="alan-btn__chat-request-avatar"></div>` : `<div class="alan-btn__chat-response-avatar"></div>`) + "</div>";
-          div.innerHTML = `${msg.name !== "loading" ? getMsgBubbleLabel(msg) : ""}<div class="alan-btn__chat-bubble-holder">${(msg.type === "chat" || msg.type === "buttons" ? "" : avatarHtml) + msgHtml}</div>`;
+          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>`;
+          }
           msgHolder.appendChild(div);
           if (uiState.textChat.available && textChatIsHidden && msg.type === "response" && msg.read !== true) {
             unreadChatMsgCount++;
@@ -96362,7 +96386,7 @@ ${LEARN_MORE_LABEL}
       function getKeyForSavingTextChatMessages() {
         return `alan-btn-text-chat-msgs-for-dialogId-${curDialogId}`;
       }
-      function clearChat() {
+      function clearDOMChat() {
         unreadChatMsgCount = 0;
         textChatMessages = [];
         if (uiState.textChat.available) {
@@ -96372,7 +96396,7 @@ ${LEARN_MORE_LABEL}
           }
         }
       }
-      function clearTextChat() {
+      function onClearTextChatBtnClick() {
         clearDialogId();
         if (window.tutorProject) {
           window.tutorProject.close();
@@ -96387,16 +96411,29 @@ ${LEARN_MORE_LABEL}
           btnIsReady = false;
           connectProject();
         }
-        clearChatAndChatHistory();
-      }
-      function clearChatAndChatHistory() {
-        clearChat();
+        clearDOMChat();
         clearChatHistoryStorage();
         manageSaveChatHistoryBtn();
       }
+      function onNewDialogAutoReconnect() {
+        console.info("onNewDialogAutoReconnect");
+        if (textChatMessages?.length === 0)
+          return;
+        if (textChatMessages?.at(-1)?.type === "connection-separator")
+          return;
+        const event = {
+          type: "connection-separator"
+        };
+        renderMessageInTextChat(event);
+      }
+      window.onNewDialogAutoReconnect = onNewDialogAutoReconnect;
       function syncChatHistoryBetweenTabs() {
+        if (isTutorMode()) {
+          return;
+        }
         tabActive = true;
         saveTabId();
+        console.info("syncChatHistoryBetweenTabs");
         restoreMessageList(false);
       }
       function saveTabId() {
@@ -96412,13 +96449,16 @@ ${LEARN_MORE_LABEL}
         if (isLocalStorageAvailable) {
           if (curDialogId) {
             savedMsgs = localStorage.getItem(getKeyForSavingTextChatMessages());
+            console.info("restoreMessageList", savedMsgs, curDialogId, getKeyForSavingTextChatMessages());
             try {
               if (savedMsgs === JSON.stringify(textChatMessages)) {
                 return;
               }
               savedMsgs = JSON.parse(savedMsgs);
-              clearChat();
               if (Array.isArray(savedMsgs)) {
+                if (savedMsgs?.length > 0) {
+                  clearDOMChat();
+                }
                 for (let i2 = 0; i2 < savedMsgs.length; i2++) {
                   if (initLoad === true) {
                     if (savedMsgs[i2].name !== "loading") {
@@ -96621,6 +96661,8 @@ ${LEARN_MORE_LABEL}
         if (isLocalStorageAvailable) {
           const maxSavedForHistoryMsgCount = 25;
           const key = getRestoreMsgsLsKey();
+          if (sentMessages?.indexOf(text) > -1)
+            return;
           sentMessages.push(text);
           if (sentMessages.length > 50) {
             sentMessages = sentMessages.slice(Math.max(sentMessages.length - maxSavedForHistoryMsgCount, 0));
@@ -96838,7 +96880,7 @@ ${LEARN_MORE_LABEL}
           headerInnerDiv = createDiv({ id: "chat-header-inner", class: "alan-btn__chat-header-inner" });
           var headerDivGr = createDiv({ class: "alan-btn__chat-header-gradient" });
           var clearChatBtn = createDivWithSvg(chatIcons.clear, { id: "clear-chat-btn", class: "alan-btn__chat-clear-btn" });
-          clearChatBtn.addEventListener("click", clearTextChat);
+          clearChatBtn.addEventListener("click", onClearTextChatBtnClick);
           headerTille = document.createElement("span");
           headerTille.id = "chat-header-title";
           headerTille.classList.add("alan-btn__chat-header-title");
@@ -96886,7 +96928,7 @@ ${LEARN_MORE_LABEL}
           headerInnerDiv.appendChild(headerTille);
           headerInnerDiv.appendChild(rightHeaderIconsHolder);
           headerDiv.appendChild(headerInnerDiv);
-          fillSideBarContent(chatSideBar, { clearTextChat, expandCollapseChatSidePanel, closeTextChat });
+          fillSideBarContent(chatSideBar, { clearTextChat: onClearTextChatBtnClick, expandCollapseChatSidePanel, closeTextChat });
           textareaInnerDiv = createDiv({ id: "textarea-inner-holder", class: "alan-btn__chat-textarea-inner-holder" });
           textareaHolderDiv = createDiv({ id: "textarea-holder-content", class: "alan-btn__chat-textarea-holder-outer-content" });
           textareaDiv = createDiv({ id: "textarea-holder", class: "alan-btn__chat-textarea-holder" });

diff --git a/dist/alan_lib.min.js b/dist/alan_lib.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@alan-ai/alan-sdk-web",
-  "version": "1.8.70",
+  "version": "1.8.71",
   "description": "Alan Web SDK: a lightweight JavaScript library for adding a voice experience to your website or web application",
   "keywords": [
     "alan sdk web",