feat: connect chat component with history

Author: sinedied

packages/webapp/index.html

@@ -62,9 +62,26 @@
       AI Chat with Enterprise Data
     </nav>
     <main>
-      <azc-history onLoadSession="chat.messages = session.messages"></azc-history>
+      <azc-history id="chatHistory"></azc-history>
       <azc-chat id="chat"></azc-chat>
     </main>
     <script type="module" src="/src/index.ts"></script>
+    <script>
+      // Generate a unique ID and store it in local storage
+      const userId = localStorage.getItem('userId') || crypto.randomUUID();
+      localStorage.setItem('userId', userId);
+
+      window.chatHistory.userId = userId;
+      window.chatHistory.addEventListener('loadSession', (e) => {
+        const { id, messages } = e.detail;
+        window.chat.sessionId = id;
+        window.chat.messages = messages;
+      });
+
+      window.chat.userId = userId;
+      window.chat.addEventListener('messagesUpdated', () => {
+        window.chatHistory.refresh();
+      });
+    </script>
   </body>
 </html>

packages/webapp/src/components/chat.ts

@@ -97,6 +97,12 @@ export class ChatComponent extends LitElement {
     window.open(path, '_blank');
   }
 
+  onNewChatClicked() {
+    this.messages = [];
+    this.sessionId = '';
+    this.fireMessagesUpdatedEvent();
+  }
+
   async onKeyPressed(event: KeyboardEvent) {
     if (event.key === 'Enter') {
       event.preventDefault();
@@ -124,7 +130,14 @@ export class ChatComponent extends LitElement {
     this.isLoading = true;
     this.scrollToLastMessage();
     try {
-      const response = getCompletion({ ...this.options, messages: this.messages });
+      const response = getCompletion({
+        ...this.options,
+        messages: this.messages,
+        context: {
+          userId: this.userId,
+          sessionId: this.sessionId,
+        },
+      });
       const chunks = response as AsyncGenerator<AIChatCompletionDelta>;
       const { messages } = this;
       const message: AIChatMessage = {
@@ -136,12 +149,17 @@ export class ChatComponent extends LitElement {
           this.isStreaming = true;
           message.content += chunk.delta.content;
           this.messages = [...messages, message];
-          this.scrollToLastMessage();
+        }
+
+        const sessionId = (chunk.context as any)?.sessionId;
+        if (!this.sessionId && sessionId) {
+          this.sessionId = sessionId;
         }
       }
 
       this.isLoading = false;
       this.isStreaming = false;
+      this.fireMessagesUpdatedEvent();
     } catch (error) {
       this.hasError = true;
       this.isLoading = false;
@@ -152,11 +170,7 @@ export class ChatComponent extends LitElement {
 
   override requestUpdate(name?: string, oldValue?: any) {
     if (name === 'messages') {
-      const messagesUpdatedEvent = new CustomEvent('messagesUpdated', {
-        detail: { messages: this.messages },
-        bubbles: true,
-      });
-      this.dispatchEvent(messagesUpdatedEvent);
+      this.scrollToLastMessage();
     } else if (name === 'hasError' || name === 'isLoading' || name === 'isStreaming') {
       const state = {
         hasError: this.hasError,
@@ -173,6 +187,14 @@ export class ChatComponent extends LitElement {
     super.requestUpdate(name, oldValue);
   }
 
+  protected fireMessagesUpdatedEvent() {
+    const messagesUpdatedEvent = new CustomEvent('messagesUpdated', {
+      detail: { messages: this.messages },
+      bubbles: true,
+    });
+    this.dispatchEvent(messagesUpdatedEvent);
+  }
+
   protected scrollToLastMessage() {
     // Need to be delayed to run after the DOM refresh
     setTimeout(() => {
@@ -286,7 +308,7 @@ export class ChatComponent extends LitElement {
       <button
         class="button new-chat-button"
         @click=${() => {
-          this.messages = [];
+          this.onNewChatClicked();
         }}
         title=${this.options.strings.newChatButton}
         .disabled=${this.messages?.length === 0 || this.isLoading || this.isStreaming}