adding loading indicator when streaming

cuappdev · Dec 27, 2024 · fa35469 · fa35469
1 parent 0ed6d99
commit fa35469
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/app/chat/[chatId]/page.tsx b/src/app/chat/[chatId]/page.tsx
@@ -98,6 +98,7 @@ export default function ChatPage() {
       throw new Error(data.error || 'Failed to send message.');
     }
 
+    setMessages((prevMessages) => [...prevMessages.slice(0, -1)]);
     return response.body.getReader();
   };
 
@@ -189,7 +190,15 @@ export default function ChatPage() {
       sender: 'user',
     };
 
-    setMessages((prevMessages) => [...prevMessages, userMessage]);
+    const assistantMessage: Message = {
+      id: `${messages.length + 1}`,
+      chatId: chatId,
+      content: ``,
+      timestamp: new Date().toLocaleString(),
+      sender: selectedModel,
+    };
+
+    setMessages((prevMessages) => [...prevMessages, userMessage, assistantMessage]);
     setMessageStreaming(true);
     sendStreamedMessage(message);
     // displayToast();
@@ -205,7 +214,12 @@ export default function ChatPage() {
 
           <div className="no-scrollbar m-auto mb-10 mt-5 flex w-4/5 flex-grow flex-col gap-3 overflow-y-scroll">
             {messages.map((message, index) => (
-              <ChatMessage key={index} message={message} />
+              <ChatMessage
+                key={index}
+                lastMessage={index === messages.length - 1}
+                streaming={messageStreaming}
+                message={message}
+              />
             ))}
             <div ref={messagesEndRef}></div>
           </div>

diff --git a/src/app/components/chat/ChatMessage.tsx b/src/app/components/chat/ChatMessage.tsx
@@ -7,12 +7,15 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { materialDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { useAuth } from '@/contexts/AuthContext';
 import { useState } from 'react';
+import Spinner from '../Spinner';
 
 interface ChatMessageProps {
+  lastMessage: boolean;
+  streaming: boolean;
   message: Message;
 }
 
-export default function ChatMessage({ message }: ChatMessageProps) {
+export default function ChatMessage({ lastMessage, streaming, message }: ChatMessageProps) {
   const { user } = useAuth();
   const [copied, setCopied] = useState(false);
 
@@ -60,7 +63,10 @@ export default function ChatMessage({ message }: ChatMessageProps) {
         className="h-10 w-10 flex-shrink-0 rounded-full object-cover"
       />
       <div className="flex flex-col overflow-auto">
-        <span className="text-lg font-semibold">{getName()}</span>
+        <div className="flex gap-2 align-middle">
+          <span className="text-lg font-semibold">{getName()}</span>
+          {streaming && lastMessage && <Spinner width="1" height="1" />}
+        </div>
         <div className="flex flex-row gap-1">
           <span className="text-xs text-gray-400">{message.timestamp}</span>
           {copied ? (