Merge pull request #90 from akshy-yy/feat/typing-indicator-clean

frontend/src/components/chat/ChatPanel.tsx

@@ -34,6 +34,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
   const [messages, setMessages] = useState<ChatMsg[]>([]);
   const [input, setInput] = useState("");
   const [streaming, setStreaming] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const prevDocId = useRef<string | null>(null);
@@ -116,17 +117,12 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
     };
     setMessages((prev) => [...prev, userMsg]);
 
-    // Add placeholder assistant message
+    
     const assistantId = `assistant-${Date.now()}`;
-    const assistantMsg: ChatMsg = {
-      id: assistantId,
-      role: "assistant",
-      content: "",
-      sources: [],
-      isStreaming: true,
-    };
-    setMessages((prev) => [...prev, assistantMsg]);
+    let assistantCreated = false;
+
     setStreaming(true);
+    setIsTyping(true);
 
     try {
       const stream = api.streamPost("/api/v1/chat/ask/stream", {
@@ -136,13 +132,29 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
 
       for await (const event of stream) {
         if (event.type === "token") {
-          setMessages((prev) =>
-            prev.map((m) =>
-              m.id === assistantId
-                ? { ...m, content: m.content + (event.data as string) }
-                : m
-            )
-          );
+          // Create assistant message only when first token arrives
+          if (!assistantCreated) {
+            assistantCreated = true;
+            setIsTyping(false);
+
+            const assistantMsg: ChatMsg = {
+              id: assistantId,
+              role: "assistant",
+              content: event.data as string,
+              sources: [],
+              isStreaming: true,
+            };
+
+            setMessages((prev) => [...prev, assistantMsg]);
+          } else {
+            setMessages((prev) =>
+              prev.map((m) =>
+                m.id === assistantId
+                  ? { ...m, content: m.content + (event.data as string) }
+                  : m
+              )
+            );
+          }
         } else if (event.type === "sources") {
           setMessages((prev) =>
             prev.map((m) =>
@@ -152,6 +164,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
             )
           );
         } else if (event.type === "error") {
+          setIsTyping(false);
           setMessages((prev) =>
             prev.map((m) =>
               m.id === assistantId
@@ -168,6 +181,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
         }
       }
     } catch (err) {
+      setIsTyping(false);
       setMessages((prev) =>
         prev.map((m) =>
           m.id === assistantId
@@ -181,6 +195,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
       );
     } finally {
       setStreaming(false);
+      setIsTyping(false);
     }
   };
 
@@ -190,7 +205,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
       await api.delete(`/api/v1/chat/history/${activeDoc.id}`);
       setMessages([]);
     } catch {
-      // silently fail
+        //silent fail
     }
   };
 
@@ -204,8 +219,8 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
   return (
     <div className="h-full flex flex-col">
       {/* ── Chat Messages ──────────────────────────── */}
-      <div className="flex-1 px-4 overflow-y-auto custom-scrollbar">
-        {messages.length === 0 ? (
+        <div className="flex-1 px-4 overflow-y-auto custom-scrollbar">
+          {messages.length === 0 && !isTyping ? (
           <div className="h-full flex flex-col items-center justify-center py-20">
             <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4">
               <MessageSquare className="w-8 h-8 text-primary/60" />
@@ -231,6 +246,13 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
                 )}
               </div>
             ))}
+            {isTyping && (
+              <div className="flex items-center gap-1 ml-10 py-2">
+                <span className="w-2 h-2 rounded-full bg-muted-foreground animate-bounce [animation-delay:-0.3s]" />
+                <span className="w-2 h-2 rounded-full bg-muted-foreground animate-bounce [animation-delay:-0.15s]" />
+                <span className="w-2 h-2 rounded-full bg-muted-foreground animate-bounce" />
+              </div>
+            )}
           </div>
         )}
         <div ref={bottomRef} className="h-4" />
@@ -283,4 +305,4 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
       </div>
     </div>
   );
-}
+}