Fixed problems with display of user messages

Fixed scrollbar not following chat flow problem
jschm42 · Feb 6, 2024 · d3d43dc · d3d43dc
1 parent e094487
commit d3d43dc
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 23 deletions.
diff --git a/frontend/src/components/chat/ChatContainer.vue b/frontend/src/components/chat/ChatContainer.vue
@@ -1,5 +1,5 @@
 <!--
-  - Copyright (c) 2023 Jean Schmitz.
+  - Copyright (c) 2023-2024 Jean Schmitz.
   -
   - Licensed under the Apache License, Version 2.0 (the "License");
   - you may not use this file except in compliance with the License.
@@ -16,12 +16,12 @@
 
 <template>
   <div class="d-flex flex-column chat-container gx-0">
-    <div class="flex-grow-1 vertical-scrollbar no-horizontal-scrollbar ">
-      <div ref="entries" class="mx-0 p-2">
-        <ChatMessage v-for="(message, index) in store.threadMessages" ref="chatMessageRef"
-                     v-bind:key="index"
-                     :message="message" :messageIndex="index"></ChatMessage>
-      </div>
+    <div ref="entries" class="flex-grow-1 vertical-scrollbar no-horizontal-scrollbar ">
+      <!--      <div class="mx-0 p-2">-->
+      <ChatMessage v-for="(message, index) in store.threadMessages" ref="chatMessageRef"
+                   v-bind:key="index"
+                   :message="message" :messageIndex="index"></ChatMessage>
+      <!--      </div>-->
     </div>
     <!-- Input Section -->
 
@@ -77,8 +77,10 @@ export default {
       }
     },
     chunkUpdateReceived() {
-      // Scroll to bottom
+      console.log('Chunk Update Received!');
+      // Scroll $refs.entries to bottom
       this.$refs.entries.scrollTop = this.$refs.entries.scrollHeight;
+      //this.$refs.entries.scrollTop = this.$refs.entries.scrollHeight;
     },
   },
 };

diff --git a/frontend/src/components/chat/ChatControl.vue b/frontend/src/components/chat/ChatControl.vue
@@ -1,5 +1,5 @@
 <!--
-  - Copyright (c) 2023 Jean Schmitz.
+  - Copyright (c) 2023-2024 Jean Schmitz.
   -
   - Licensed under the Apache License, Version 2.0 (the "License");
   - you may not use this file except in compliance with the License.
@@ -50,14 +50,16 @@ export default {
   },
   getters: {
     isAutoSpeak() {
-      return this.store.chat.autoSpeak;
+      return this.store.autoSpeak;
     },
   },
   methods: {
     submitResultReceived() {
+      console.log('Chat Control - Submit Result Received');
       this.$emit('submitResultReceived');
     },
     chunkUpdateReceived() {
+      console.log('Chat Control - Chunk Update Received');
       this.$emit('chunkUpdateReceived');
     },
   },

diff --git a/frontend/src/components/chat/ChatMessage.vue b/frontend/src/components/chat/ChatMessage.vue
@@ -53,10 +53,7 @@ export default {
     },
     hasProfileImage() {
       const assistantId = this.message.assistant_id;
-      console.log('Message', assistantId);
-      console.log('Store', this.store.assistantList);
       const assistant = this.store.assistantList.find(a => a.id === assistantId);
-      console.log('Assistant:', assistant);
       if (assistant && assistant.image_path) {
         return assistant.image_path;
       }

diff --git a/frontend/src/components/chat/ChatMessageInput.vue b/frontend/src/components/chat/ChatMessageInput.vue
@@ -1,5 +1,5 @@
 <!--
-  - Copyright (c) 2023 Jean Schmitz.
+  - Copyright (c) 2023-2024 Jean Schmitz.
   -
   - Licensed under the Apache License, Version 2.0 (the "License");
   - you may not use this file except in compliance with the License.
@@ -50,7 +50,6 @@ export default {
     return {
       prompt: '',
       isInputLocked: false,
-      chatState: this.chatStore.chat,
     };
   },
   methods: {
@@ -59,6 +58,7 @@ export default {
 
       this.chatStore.currentStatusMessage = 'Thinking...';
       try {
+        this.$emit('chunkUpdateReceived');
         await this.chatStore.submitUserMessage(this.prompt);
         this.$emit('chunkUpdateReceived');
       } catch (error) {

diff --git a/frontend/src/components/thread/ThreadEntry.vue b/frontend/src/components/thread/ThreadEntry.vue
@@ -1,5 +1,5 @@
 <!--
-  - Copyright (c) 2023 Jean Schmitz.
+  - Copyright (c) 2023-2024 Jean Schmitz.
   -
   - Licensed under the Apache License, Version 2.0 (the "License");
   - you may not use this file except in compliance with the License.
@@ -46,7 +46,7 @@ import {format} from 'date-fns';
 import Thread from '@/store/to/thread';
 
 export default {
-  name: 'ChatHistoryEntry',
+  name: 'ThreadEntry',
   props: {
     entry: Thread,
   },

diff --git a/frontend/src/store/chat-store.ts b/frontend/src/store/chat-store.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Jean Schmitz.
+ * Copyright (c) 2023-2024 Jean Schmitz.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -67,11 +67,19 @@ export const useChatStore = defineStore('chat', {
       this.selectedAssistant = await assistantService.retrieveAssistant(assistantId);
     },
     async retrieveThreads() {
+      // Make this.threads a list of Thread objects
       this.threads = await assistantService.retrieveThreads();
     },
     async retrieveMessages(threadId: string) {
       const parsedMessageList = await assistantService.retrieveMessages(threadId);
-      this.threadMessages = parsedMessageList.message_list?.data || [];
+      console.log('Parsed message list', parsedMessageList);
+      // Make this.threadMessages a list of ThreadMessage objects
+      const list = parsedMessageList.message_list?.data?.map((message: any) => {
+        return new ThreadMessage(message.id, message.role, message.content[0].text.value,
+            message.assistant_id);
+      });
+      this.threadMessages = list || [];
+
       this.parsedMessages = parsedMessageList.parsed_messages || {};
 
       this.threadMessages.forEach((message) => {
@@ -85,6 +93,8 @@ export const useChatStore = defineStore('chat', {
           }
         }
       });
+
+      console.log('Thread messages after transform!', this.threadMessages);
     },
     async createThreadIfNeeded(): Promise<string> {
       if (!this.threadId) {
@@ -126,7 +136,7 @@ export const useChatStore = defineStore('chat', {
 
       const submitedMessage = await assistantService.submitUserMessage(this.threadId, message);
       this.threadMessages.push(submitedMessage);
-      this.threadMessages.push(new ThreadMessage('', 'assistant', ''));
+      this.threadMessages.push(new ThreadMessage('', 'assistant', '', this.selectedAssistant.id));
 
       this.updateStatus('Thinking...', 'running');
 

diff --git a/frontend/src/store/to/thread.ts b/frontend/src/store/to/thread.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Jean Schmitz.
+ * Copyright (c) 2023-2024 Jean Schmitz.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -42,10 +42,11 @@ class ThreadMessage {
   content: Array<Content> | null = null;
   metadata: any;
 
-  constructor(id: string, role: 'user' | 'assistant', content: string) {
+  constructor(id: string, role: 'user' | 'assistant', content: string, assistant_id: string) {
     this.id = id;
     this.role = role;
     this.content = [{type: 'text', text: {value: content, annotations: []}}];
+    this.assistant_id = assistant_id;
   }
 }
 
@@ -68,4 +69,11 @@ class ParsedThreadMessage {
 }
 
 export default Thread;
-export {ThreadMessage, Content, TextContent, ParsedThreadMessage, ThreadMessageList, TreadMessageListParsed};
+export {
+  ThreadMessage,
+  Content,
+  TextContent,
+  ParsedThreadMessage,
+  ThreadMessageList,
+  TreadMessageListParsed,
+};