Share messages between tabs

RasaHQ · petar-basic · Aug 21, 2024 · Aug 16, 2024 · Aug 16, 2024 · Aug 16, 2024
commit d7b77b1fe5213a78105dbc04c79f0e6b02099724
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
@@ -132,6 +132,15 @@ export class Rasa extends EventEmitter {
   public reconnection(value: boolean): void {
     this.connection.reconnection(value);
   }
+
+  public overrideChatHistory = (chatHistoryString: string): void => {
+    this.storageService.overrideChatHistory(chatHistoryString);
+    this.loadChatHistory();
+  }
+
+  public getChatHistory(): string {
+    return JSON.stringify(this.storageService.getChatHistory());
+  }
   //#endregion
 }
 

diff --git a/packages/sdk/src/services/storage.service.ts b/packages/sdk/src/services/storage.service.ts
@@ -2,6 +2,18 @@ import { SESSION_STORAGE_KEYS } from '../constants';
 import { CustomErrorClass, ErrorSeverity } from '../errors';
 
 export class StorageService {
+  //#region Private Methods
+  private parseSessionStorageValue(value: string | null) {
+    if (!value) return null;
+    try {
+      return JSON.parse(value);
+    } catch (e) {
+      return null;
+    }
+  }
+  //#endregion
+
+  //#region Public Methods
   public setSession(sessionId: string, sessionStart: Date): boolean {
     const preservedHistory = this.getChatHistory() || {};
     if (!preservedHistory[sessionId]) {
@@ -57,12 +69,8 @@ export class StorageService {
     }
   }
 
-  private parseSessionStorageValue(value: string | null) {
-    if (!value) return null;
-    try {
-      return JSON.parse(value);
-    } catch (e) {
-      return null;
-    }
+  public overrideChatHistory(chatHistory: string) {
+    sessionStorage.setItem(SESSION_STORAGE_KEYS.CHAT_HISTORY, chatHistory);
   }
+  //#endregion
 }
diff --git a/packages/ui/src/index.html b/packages/ui/src/index.html
@@ -11,6 +11,6 @@
     <link rel="icon" type="image/png" sizes="16x16" href="https://rasa.com/favicon-16x16.png?v=210226" />
   </head>
   <body>
-    <rasa-chatbot-widget></rasa-chatbot-widget>
+    <rasa-chatbot-widget server-url="https://pro.vortexwe.com" sender-id="aaa"></rasa-chatbot-widget>
   </body>
 </html>
diff --git a/packages/ui/src/rasa-chatbot-widget/rasa-chatbot-widget.tsx b/packages/ui/src/rasa-chatbot-widget/rasa-chatbot-widget.tsx
@@ -9,6 +9,8 @@ import { isValidURL } from '../utils/validate-url';
 import { messageQueueService } from '../store/message-queue';
 import { v4 as uuidv4 } from 'uuid';
 import { widgetState } from '../store/widget-state-store';
+import { broadcastChatHistoryEvent, receiveChatHistoryEvent } from '../utils/eventChannel';
+import { debounce } from '../utils/debounce';
 
 @Component({
   tag: 'rasa-chatbot-widget',
@@ -19,6 +21,7 @@ export class RasaChatbotWidget {
   private client: Rasa;
   private messageDelayQueue: Promise<void> = Promise.resolve();
   private disconnectTimeout: NodeJS.Timeout | null = null;
+  private sentMessage = false;
 
   @Element() el: HTMLRasaChatbotWidgetElement;
   @State() isOpen: boolean = false;
@@ -202,6 +205,12 @@ export class RasaChatbotWidget {
     if (this.autoOpen) {
       this.toggleOpenState();
     }
+
+    if (this.senderId) {
+      window.onstorage = ev => {
+        receiveChatHistoryEvent(ev, this.client.overrideChatHistory, this.senderId);
+      };
+    }
   }
 
   private scrollToBottom(): void {
@@ -227,14 +236,20 @@ export class RasaChatbotWidget {
         setTimeout(() => {
           messageQueueService.enqueueMessage(data);
           this.typingIndicator = false;
+          if (this.senderId && this.sentMessage) {
+            debounce(() => {
+              broadcastChatHistoryEvent(this.client.getChatHistory(), this.senderId);
+              this.sentMessage = false;
+            }, 1000)();
+          }
           resolve();
         }, delay);
       });
     });
   };
 
   private loadHistory = (data: Message[]): void => {
-    this.messageHistory = data;
+    this.messages = data;
   };
 
   private connect(): void {
@@ -281,6 +296,7 @@ export class RasaChatbotWidget {
     this.chatWidgetSentMessage.emit(event.detail);
     this.messages = [...this.messages, { type: 'text', text: event.detail, sender: 'user', timestamp }];
     this.scrollToBottom();
+    this.sentMessage = true;
   }
 
   @Listen('quickReplySelected')
@@ -293,6 +309,7 @@ export class RasaChatbotWidget {
     this.messages[key] = updatedMessage;
     this.client.sendMessage({ text: quickReply.text, reply: quickReply.reply, timestamp }, true, key - 1);
     this.chatWidgetQuickReply.emit(quickReply.reply);
+    this.sentMessage = true;
   }
 
   @Listen('linkClicked')

diff --git a/packages/ui/src/utils/debounce.ts b/packages/ui/src/utils/debounce.ts
@@ -0,0 +1,7 @@
+export const debounce = (fn: Function, ms = 300) => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return function (this: any, ...args: any[]) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  };
+};
diff --git a/packages/ui/src/utils/eventChannel.ts b/packages/ui/src/utils/eventChannel.ts
@@ -0,0 +1,13 @@
+export const broadcastChatHistoryEvent = (chatHistory: string, senderID) => {
+  if (!senderID) return;
+  localStorage.setItem(`rasaChatHistory-${senderID}`, chatHistory);
+  localStorage.removeItem(`rasaChatHistory-${senderID}`);
+};
+
+export const receiveChatHistoryEvent = (ev, callback, senderID) => {
+  if (ev.key != `rasaChatHistory-${senderID}`) return;
+  var message = ev.newValue;
+  console.log(ev.newValue);
+  if (!message) return;
+  callback(ev.newValue);
+};