feat: per-message response time badge

[vivek0369]

feat(chat): add per-message response time badge for assistant responses

Description

Closes #<ISSUE_NUMBER>

This PR introduces a Per-Message Response Time Badge to the chat interface, providing users with real-time visibility into the latency of each AI-generated response.

The backend already measures query execution time through record_query_response_time(), but that metric was only used for internal monitoring and never surfaced to users. This PR exposes the existing timing data through the SSE stream and displays it directly within each assistant message, improving transparency and user awareness of system performance.

The feature is intentionally lightweight, requiring no database changes and leveraging the existing streaming architecture.

---

Why This Change?

Currently, users have no indication of how long a response took to generate, despite the application already calculating this information internally.

This enhancement:

• Makes AI response latency visible to end users.
• Improves transparency and perceived responsiveness.
• Helps power users evaluate retrieval and generation performance.
• Reuses existing backend metrics with minimal implementation overhead.
• Provides meaningful UX value without introducing additional complexity.

---

Implementation Details

Backend (backend/app/routes/chat.py)

Enhanced the SSE done event emitted by ask_question_stream() to include the total response duration.

elapsed_ms = round((time.perf_counter() - started_at) * 1000)

yield f"data: {json.dumps({
    'type': 'done',
    'response_time_ms': elapsed_ms
})}\n\n"

Frontend State (frontend/src/store/chat-store.ts)

Extended the ChatMsg interface with an optional field:

response_time_ms?: number;

This allows response timing metadata to be stored alongside assistant messages.

Frontend Event Handling (frontend/src/components/chat/ChatPanel.tsx)

Updated SSE event processing to capture the response time from the done event and attach it to the corresponding assistant message.

} else if (event.type === "done") {
  setMessages((prev) =>
    prev.map((m) =>
      m.id === assistantId
        ? {
            ...m,
            isStreaming: false,
            response_time_ms: event.response_time_ms,
          }
        : m
    )
  );
}

UI Enhancements (frontend/src/components/chat/MessageBubble.tsx)

Added a compact latency badge rendered alongside the existing feedback controls.

{message.response_time_ms && (
  <span className="text-[10px] text-muted-foreground ml-2">
    ⚡ {(message.response_time_ms / 1000).toFixed(1)}s
  </span>
)}

The badge is intentionally subtle and integrates naturally into the existing message layout.

---

Screenshots

---

How to Test

1. Start both backend and frontend services.
2. Open the chat interface.
3. Submit a query to the assistant.
4. Wait for the response to finish streaming.
5. Verify that a latency badge appears beside the feedback controls.
6. Confirm the badge displays the total response generation time in seconds (e.g., ⚡ 2.4s).

---

Expected Behavior

After an assistant response completes streaming, users should see a small latency indicator such as:

⚡ 0.8s
⚡ 1.7s
⚡ 3.2s

displayed within the message footer.

---

Technical Impact

Backend

• SSE payload enhancement
• No API breaking changes
• No database migrations

Frontend

• Zustand state update
• SSE event handling enhancement
• Message UI improvement

Performance

• Negligible overhead
• Reuses existing timing measurements
• No additional network requests

---

Type of Change

• New Feature
• Bug Fix
• Breaking Change
• Documentation Update
• Refactor

---

Checklist

• Feature tested locally
• No database migration required
• Existing functionality remains unaffected
• UI follows existing design patterns
• Code adheres to project conventions
• Related issue linked

Related Issue

Fixes #643