fix(AGENT-675): add sessionStorage for multi-tab chat isolation

src/components/Bot.tsx

@@ -32,7 +32,16 @@ import { CircleDotIcon, SparklesIcon, TrashIcon } from './icons';
 import { CancelButton } from './buttons/CancelButton';
 import { cancelAudioRecording, startAudioRecording, stopAudioRecording } from '@/utils/audioRecording';
 import { LeadCaptureBubble } from '@/components/bubbles/LeadCaptureBubble';
-import { removeLocalStorageChatHistory, getLocalStorageChatflow, setLocalStorageChatflow, setCookie, getCookie } from '@/utils';
+import {
+  removeLocalStorageChatHistory,
+  removeSessionStorageChatHistory,
+  getLocalStorageChatflow,
+  getSessionStorageChatflow,
+  setLocalStorageChatflow,
+  setSessionStorageChatflow,
+  setCookie,
+  getCookie,
+} from '@/utils';
 import { cloneDeep, merge } from 'lodash';
 import { FollowUpPromptBubble } from '@/components/bubbles/FollowUpPromptBubble';
 import { fetchEventSource, EventStreamContentType } from '@microsoft/fetch-event-source';
@@ -572,6 +581,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
       }
       return item;
     });
+    setSessionStorageChatflow(props.chatflowid, chatId(), { chatHistory: messages });
     setLocalStorageChatflow(props.chatflowid, chatId(), { chatHistory: messages });
   };
 
@@ -789,7 +799,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
   };
 
   const fetchResponseFromEventStream = async (chatflowid: string, params: any) => {
-    const chatId = params.chatId;
+    const requestChatId = params.chatId;
     const input = params.question;
     params.streaming = true;
     console.log('[fetchResponseFromEventStream]', { botProps, params, chatflowid, props });
@@ -869,7 +879,8 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
             closeResponse();
             break;
           case 'end':
-            setLocalStorageChatflow(chatflowid, chatId);
+            setSessionStorageChatflow(chatflowid, chatId() || requestChatId);
+            setLocalStorageChatflow(chatflowid, chatId() || requestChatId);
             closeResponse();
             break;
         }
@@ -1210,6 +1221,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
 
   const clearChat = () => {
     try {
+      removeSessionStorageChatHistory(props.chatflowid);
       removeLocalStorageChatHistory(props.chatflowid);
       setChatId(
         (props.chatflowConfig?.vars as any)?.customerId ? `${(props.chatflowConfig?.vars as any).customerId.toString()}+${uuidv4()}` : uuidv4(),
@@ -1285,18 +1297,17 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
       setDisclaimerPopupOpen(false);
     }
 
-    const chatMessage = getLocalStorageChatflow(props.chatflowid);
+    const sessionMessage = getSessionStorageChatflow(props.chatflowid);
+    const localStorageMessage = getLocalStorageChatflow(props.chatflowid);
+    const chatMessage = Object.keys(sessionMessage).length ? sessionMessage : localStorageMessage;
     const customerId = (props.chatflowConfig?.vars as any)?.customerId;
 
     // Initialize chatId from localStorage or generate new one
-    if (chatMessage?.chatId) {
-      setChatId(chatMessage.chatId);
-    } else {
-      setChatId(customerId ? `${customerId.toString()}+${uuidv4()}` : uuidv4());
-    }
+    const initialChatId = chatMessage?.chatId || (customerId ? `${customerId.toString()}+${uuidv4()}` : uuidv4());
+    setChatId(initialChatId);
 
     if (chatMessage && Object.keys(chatMessage).length) {
-      const savedLead = chatMessage.lead;
+      const savedLead = chatMessage.lead || localStorageMessage?.lead;
       if (savedLead) {
         setIsLeadSaved(!!savedLead);
         setLeadEmail(savedLead.email);
@@ -1330,6 +1341,14 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
 
       const filteredMessages = loadedMessages.filter((message) => message.type !== 'leadCaptureMessage');
       setMessages([...filteredMessages]);
+
+      // Seed sessionStorage if we loaded from localStorage (returning user in new tab)
+      if (!Object.keys(sessionMessage).length && (chatMessage?.chatHistory?.length || savedLead)) {
+        setSessionStorageChatflow(props.chatflowid, initialChatId, {
+          ...(chatMessage?.chatHistory?.length ? { chatHistory: chatMessage.chatHistory } : {}),
+          ...(savedLead ? { lead: savedLead } : {}),
+        });
+      }
     }
 
     // Determine if particular chatflow is available for streaming

src/components/bubbles/BotBubble.tsx

@@ -182,15 +182,17 @@ export const BotBubble = (props: Props) => {
   };
 
   const saveToLocalStorage = (rating: FeedbackRatingType) => {
-    const chatDetails = localStorage.getItem(`${props.chatflowid}_EXTERNAL`);
+    const chatDetails = sessionStorage.getItem(`${props.chatflowid}_EXTERNAL`) || localStorage.getItem(`${props.chatflowid}_EXTERNAL`);
     if (!chatDetails) return;
     try {
       const parsedDetails = JSON.parse(chatDetails);
       const messages: MessageType[] = parsedDetails.chatHistory || [];
       const message = messages.find((msg) => msg.messageId === props.message.messageId);
       if (!message) return;
       message.rating = rating;
-      localStorage.setItem(`${props.chatflowid}_EXTERNAL`, JSON.stringify({ ...parsedDetails, chatHistory: messages }));
+      const updated = JSON.stringify({ ...parsedDetails, chatHistory: messages });
+      sessionStorage.setItem(`${props.chatflowid}_EXTERNAL`, updated);
+      localStorage.setItem(`${props.chatflowid}_EXTERNAL`, updated);
     } catch (e) {
       return;
     }

src/components/bubbles/LeadCaptureBubble.tsx

@@ -4,7 +4,7 @@ import { FormEvent, LeadsConfig, MessageType } from '@/components/Bot';
 import { addLeadQuery, LeadCaptureInput } from '@/queries/sendMessageQuery';
 import { SaveLeadButton } from '@/components/buttons/LeadCaptureButtons';
 import { Avatar } from '@/components/avatars/Avatar';
-import { getLocalStorageChatflow, setLocalStorageChatflow } from '@/utils';
+import { getLocalStorageChatflow, setLocalStorageChatflow, setSessionStorageChatflow } from '@/utils';
 
 type Props = {
   message: MessageType;
@@ -65,13 +65,15 @@ export const LeadCaptureBubble = (props: Props) => {
       });
 
       if (result.data) {
-        setLocalStorageChatflow(props.chatflowid, props.chatId, {
+        const leadData = {
           lead: {
             name: leadName(),
             email: leadEmail(),
             phone: leadPhone(),
           },
-        });
+        };
+        setSessionStorageChatflow(props.chatflowid, props.chatId, leadData);
+        setLocalStorageChatflow(props.chatflowid, props.chatId, leadData);
         props.setIsLeadSaved(true);
         props.setLeadEmail(leadEmail());
       }

src/utils/index.ts

@@ -124,6 +124,51 @@ export const removeLocalStorageChatHistory = (chatflowid: string) => {
   }
 };
 
+export const setSessionStorageChatflow = (chatflowid: string, chatId: string, saveObj: Record<string, any> = {}) => {
+  const chatDetails = sessionStorage.getItem(`${chatflowid}_EXTERNAL`);
+  const obj = { ...saveObj };
+  if (chatId) obj.chatId = chatId;
+
+  if (!chatDetails) {
+    sessionStorage.setItem(`${chatflowid}_EXTERNAL`, JSON.stringify(obj));
+  } else {
+    try {
+      const parsedChatDetails = JSON.parse(chatDetails);
+      sessionStorage.setItem(`${chatflowid}_EXTERNAL`, JSON.stringify({ ...parsedChatDetails, ...obj }));
+    } catch (e) {
+      sessionStorage.setItem(`${chatflowid}_EXTERNAL`, JSON.stringify(obj));
+    }
+  }
+};
+
+export const getSessionStorageChatflow = (chatflowid: string) => {
+  const chatDetails = sessionStorage.getItem(`${chatflowid}_EXTERNAL`);
+  if (!chatDetails) return {};
+  try {
+    return JSON.parse(chatDetails);
+  } catch (e) {
+    return {};
+  }
+};
+
+export const removeSessionStorageChatHistory = (chatflowid: string) => {
+  const chatDetails = sessionStorage.getItem(`${chatflowid}_EXTERNAL`);
+  if (!chatDetails) return;
+  try {
+    const parsedChatDetails = JSON.parse(chatDetails);
+    if (parsedChatDetails.lead) {
+      // Dont remove lead when chat is cleared
+      const obj = { lead: parsedChatDetails.lead };
+      sessionStorage.removeItem(`${chatflowid}_EXTERNAL`);
+      sessionStorage.setItem(`${chatflowid}_EXTERNAL`, JSON.stringify(obj));
+    } else {
+      sessionStorage.removeItem(`${chatflowid}_EXTERNAL`);
+    }
+  } catch (e) {
+    return;
+  }
+};
+
 export const getBubbleButtonSize = (size: 'small' | 'medium' | 'large' | number | undefined) => {
   if (!size) return 48;
   if (typeof size === 'number') return size;