feat: stream LLM responses (#2677)

Co-authored-by: Michael Neale <michael.neale@gmail.com>

ui/desktop/src/components/ChatView.tsx

@@ -786,7 +786,7 @@ function ChatContent({
               <SearchView>
                 {filteredMessages.map((message, index) => (
                   <div
-                    key={message.id || index}
+                    key={(message.id && `${message.id}-${message.content.length}`) || index}
                     className="mt-4 px-4"
                     data-testid="message-container"
                   >

ui/desktop/src/components/GooseMessage.tsx

@@ -130,7 +130,7 @@ export default function GooseMessage({
   ]);
 
   return (
-    <div className="goose-message flex w-[90%] justify-start opacity-0 animate-[appear_150ms_ease-in_forwards]">
+    <div className="goose-message flex w-[90%] justify-start">
       <div className="flex flex-col w-full">
         {/* Chain-of-Thought (hidden by default) */}
         {cotText && (

ui/desktop/src/hooks/useMessageStream.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef, useId } from 'react';
+import { useState, useCallback, useEffect, useRef, useId, useReducer } from 'react';
 import useSWR from 'swr';
 import { getSecretKey } from '../config';
 import { Message, createUserMessage, hasCompletedToolCalls } from '../types/message';
@@ -235,6 +235,9 @@ export function useMessageStream({
     };
   }, [headers, body]);
 
+  // TODO: not this?
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
   // Process the SSE stream from the server
   const processMessageStream = useCallback(
     async (response: Response, currentMessages: Message[]) => {
@@ -284,8 +287,23 @@ export function useMessageStream({
                           : parsedEvent.message.sendToLLM,
                     };
 
+                    console.log('New message:', JSON.stringify(newMessage, null, 2));
+
                     // Update messages with the new message
-                    currentMessages = [...currentMessages, newMessage];
+
+                    if (
+                      newMessage.id &&
+                      currentMessages.length > 0 &&
+                      currentMessages[currentMessages.length - 1].id === newMessage.id
+                    ) {
+                      // If the last message has the same ID, update it instead of adding a new one
+                      const lastMessage = currentMessages[currentMessages.length - 1];
+                      lastMessage.content = [...lastMessage.content, ...newMessage.content];
+                      forceUpdate();
+                    } else {
+                      currentMessages = [...currentMessages, newMessage];
+                    }
+
                     mutate(currentMessages, false);
                     break;
                   }
@@ -373,7 +391,7 @@ export function useMessageStream({
 
       return currentMessages;
     },
-    [mutate, onFinish, onError]
+    [mutate, onFinish, onError, forceUpdate]
   );
 
   // Send a request to the server

ui/desktop/src/types/message.ts

@@ -201,7 +201,7 @@ export function getTextContent(message: Message): string {
       }
       return '';
     })
-    .join('\n');
+    .join('');
 }
 
 export function getToolRequests(message: Message): ToolRequestMessageContent[] {