Merge pull request stakwork#790 from aliraza556/fix-hivechat-history-…

…display Fix: HiveChat History Display and Message Normalization
aliraza556 · Dec 17, 2024 · c7d81fa · c7d81fa
2 parents 8fbb151 + 890fa11
commit c7d81fa
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 26 deletions.
diff --git a/src/people/hiveChat/index.tsx b/src/people/hiveChat/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useHistory, useParams } from 'react-router-dom';
 import { ChatMessage } from 'store/interface';
@@ -196,10 +196,7 @@ export const HiveChatView: React.FC = observer(() => {
       setLoading(true);
       try {
         if (chatId) {
-          const messages = await chat.loadChatHistory(chatId);
-          if (messages) {
-            await refreshChatHistory();
-          }
+          await chat.loadChatHistory(chatId);
         }
       } catch (err) {
         console.error('Error initializing chat:', err);
@@ -210,7 +207,7 @@ export const HiveChatView: React.FC = observer(() => {
     };
 
     initializeChat();
-  }, [chatId, chat, refreshChatHistory]);
+  }, [chatId, chat]);
 
   useEffect(() => {
     const socket = createSocketInstance();
@@ -236,6 +233,7 @@ export const HiveChatView: React.FC = observer(() => {
           await refreshChatHistory();
         } else if (data.action === 'process' && data.chatMessage) {
           chat.updateMessage(data.chatMessage.id, data.chatMessage);
+          await refreshChatHistory();
         }
       } catch (error) {
         console.error('Error processing websocket message:', error);
@@ -282,10 +280,7 @@ export const HiveChatView: React.FC = observer(() => {
     }
   }, [chatId, refreshChatHistory]);
 
-  const messages = useMemo(() => {
-    const chatMessages = chat.getChatMessages(chatId);
-    return Array.isArray(chatMessages) ? chatMessages : [];
-  }, [chat, chatId]);
+  const messages = chat.chatMessages[chatId];
 
   useEffect(() => {
     if (chatHistoryRef.current) {
@@ -300,12 +295,15 @@ export const HiveChatView: React.FC = observer(() => {
     try {
       const sentMessage = await chat.sendMessage(chatId, message, websocketSessionId, uuid);
       if (sentMessage) {
-        await refreshChatHistory();
+        chat.addMessage(sentMessage);
         setMessage('');
         const textarea = document.querySelector('textarea');
         if (textarea) {
           textarea.style.height = '60px';
         }
+        if (chatHistoryRef.current) {
+          chatHistoryRef.current.scrollTop = chatHistoryRef.current.scrollHeight;
+        }
       }
     } catch (error) {
       console.error('Error sending message:', error);

diff --git a/src/services/index.ts b/src/services/index.ts
@@ -59,11 +59,23 @@ export class ChatService {
 
       const result = await response.json();
 
-      if (!result.success || !result.data) {
-        throw new Error('Invalid chat history response');
+      let messages: ChatMessage[] = [];
+
+      if (Array.isArray(result)) {
+        messages = result;
+      } else if (result.success && Array.isArray(result.data)) {
+        messages = result.data;
+      } else if (result.data) {
+        messages = Array.isArray(result.data) ? result.data : [result.data];
+      } else {
+        messages = [];
       }
 
-      return result.data;
+      return messages.map((msg: ChatMessage) => ({
+        ...msg,
+        chat_id: msg.chat_id || msg.chatId || chat_id,
+        context_tags: msg.context_tags || msg.contextTags
+      }));
     } catch (e) {
       console.error('Error loading chat history:', e);
       return undefined;

diff --git a/src/store/chat.ts b/src/store/chat.ts
@@ -79,17 +79,36 @@ export class ChatHistoryStore implements ChatStore {
   }
 
   addMessage(message: ChatMessage) {
-    const chatMessages = this.chatMessages[message.chat_id] || [];
-    if (!chatMessages.some((msg: ChatMessage) => msg.id === message.id)) {
-      this.chatMessages[message.chat_id] = [...chatMessages, message];
+    const chatId = message.chatId || message.chat_id;
+    if (!chatId) return;
+
+    if (!this.chatMessages[chatId]) {
+      this.chatMessages[chatId] = [];
+    }
+
+    const isDuplicate = this.chatMessages[chatId].some((msg: ChatMessage) => msg.id === message.id);
+    if (!isDuplicate) {
+      this.chatMessages = {
+        ...this.chatMessages,
+        [chatId]: [...this.chatMessages[chatId], message]
+      };
     }
   }
 
   updateMessage(id: string, messageUpdate: Partial<ChatMessage>) {
     Object.keys(this.chatMessages).forEach((chatId: string) => {
-      this.chatMessages[chatId] = this.chatMessages[chatId].map((msg: ChatMessage) =>
-        msg.id === id ? { ...msg, ...messageUpdate } : msg
-      );
+      const messages = this.chatMessages[chatId];
+      const messageIndex = messages.findIndex((msg: ChatMessage) => msg.id === id);
+
+      if (messageIndex !== -1) {
+        const updatedMessages = [...messages];
+        updatedMessages[messageIndex] = { ...messages[messageIndex], ...messageUpdate };
+
+        this.chatMessages = {
+          ...this.chatMessages,
+          [chatId]: updatedMessages
+        };
+      }
     });
   }
 
@@ -105,8 +124,14 @@ export class ChatHistoryStore implements ChatStore {
     try {
       const messages = await chatService.getChatHistory(chat_id);
       if (messages) {
-        this.chatMessages[chat_id] = messages;
-        return messages;
+        const normalizedMessages = messages.map((msg: ChatMessage) => ({
+          ...msg,
+          chat_id: msg.chat_id || msg.chatId || chat_id,
+          context_tags: msg.context_tags || msg.contextTags
+        }));
+
+        this.chatMessages[chat_id] = normalizedMessages;
+        return normalizedMessages;
       }
       return undefined;
     } catch (error) {

diff --git a/src/store/interface.ts b/src/store/interface.ts
@@ -473,15 +473,17 @@ export interface ContextTag {
 
 export interface ChatMessage {
   id: string;
-  chat_id: string;
+  chat_id?: string;
+  chatId?: string;
   message: string;
   role: ChatRole;
-  timestamp: Date;
+  timestamp: string | Date;
   context_tags?: ContextTag[];
+  contextTags?: ContextTag[];
   status: ChatStatus;
   source: ChatSource;
-  sourceWebsocketID: string;
-  workspaceUUID: string;
+  sourceWebsocketID?: string;
+  workspaceUUID?: string;
 }
 
 export interface Chat {