feat: per-message response time badge

backend/app/routes/chat.py

@@ -774,18 +774,19 @@ def event_stream():
                 top_k=payload.top_k,
                 chat_history=chat_history,
             ):
-                yield chunk
-
                 # Parse to accumulate full answer for history
                 try:
                     if chunk.startswith("data: "):
                         data = json.loads(chunk[6:].strip())
+                        if data.get("type") == "done":
+                            continue  # We will yield our own done event with response time
                         if data.get("type") == "token":
                             full_answer += data.get("data", "")
                         elif data.get("type") == "sources":
                             sources = data.get("data", [])
                 except Exception:
                     pass
+                yield chunk
 
             # Cache the full answer for future identical questions
             if full_answer:
@@ -811,6 +812,9 @@ def event_stream():
             query_text_var.set(payload.question)
             chunks_retrieved_var.set(chunks_count)
             logger.info(f"Streaming RAG chat query completed, retrieved {chunks_count} chunks")
+
+            elapsed_ms = round((time.perf_counter() - started_at) * 1000)
+            yield f"data: {json.dumps({'type': 'done', 'response_time_ms': elapsed_ms})}\n\n"
         finally:
             record_query_response_time(time.perf_counter() - started_at)
 

frontend/src/components/chat/ChatPanel.tsx

@@ -29,7 +29,7 @@
   Download,
   Mic,
   MicOff,
   HelpCircle,
   ChevronDown,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -353,7 +353,7 @@
             } else if (event.type === "done") {
               setMessages((prev) =>
                 prev.map((m) =>
-                  m.id === assistantId ? { ...m, isStreaming: false } : m,
+                  m.id === assistantId ? { ...m, isStreaming: false, response_time_ms: event.response_time_ms } : m,
                 ),
               );
               ws.close();
@@ -449,7 +449,9 @@
           } else if (event.type === "done") {
             setMessages((prev) =>
               prev.map((m) =>
-                m.id === assistantId ? { ...m, isStreaming: false } : m,
+                m.id === assistantId
+                  ? { ...m, isStreaming: false, response_time_ms: (event as { type: string; response_time_ms?: number }).response_time_ms }
+                  : m,
               ),
             );
           }

frontend/src/components/chat/MessageBubble.tsx

@@ -347,18 +347,25 @@ export default function MessageBubble({ message }: Props) {
                 <span className="inline-block w-0.5 h-4 bg-primary/60 animate-pulse ml-0.5 align-text-bottom" />
               )}
             </div>
+
           </>
         )}
 
         <div
-          className={`text-xs text-muted-foreground mt-2 ${
-            isUser ? "text-right" : "text-left"
+          className={`flex items-center gap-2 mt-2 text-xs text-muted-foreground ${
+            isUser ? "justify-end" : "justify-start"
           }`}
-          title={new Date(Number(message.id.split("-")[1])).toLocaleString()}
         >
-          {formatDistanceToNow(new Date(Number(message.id.split("-")[1])), {
-            addSuffix: true,
-          })}
+          <div title={new Date(Number(message.id.split("-")[1])).toLocaleString()}>
+            {formatDistanceToNow(new Date(Number(message.id.split("-")[1])), {
+              addSuffix: true,
+            })}
+          </div>
+          {!isUser && message.response_time_ms && (
+            <span className="text-[10px] ml-auto">
+              ⚡ {(message.response_time_ms / 1000).toFixed(1)}s
+            </span>
+          )}
         </div>
       </div>
       {isUser && (

frontend/src/store/chat-store.ts

@@ -29,6 +29,7 @@ parent_message_id?: string;
   sources: SourceChunk[];
   feedback?: "up" | "down" | null;
   isStreaming?: boolean;
+  response_time_ms?: number;
 }
 
 export interface ChatSession {