Issue #9 - [FEATURE] Add Real-Time Timer to Reasoning Blocks During AI Thinking

[rogelio-cmj]

Motivation

When AI models perform reasoning or thinking operations, users may experience uncertainty about whether the application is functioning correctly or has frozen, especially when the reasoning block is collapsed. This is particularly problematic during longer thinking periods where there's no visual feedback to indicate progress.

Adding a real-time timer to reasoning blocks provides immediate visual feedback that the system is actively processing.

Current Behavior

Currently, reasoning blocks in the chat interface display a "Thinking" or "Deeply thought" status but provide no indication of how long the thinking process has been running or took to complete.

Reproduction Steps

1. Start a chat session with an AI model that supports reasoning/thinking blocks
2. Send a prompt that triggers a reasoning response (e.g., a complex problem-solving question)
3. Notice there is no time indicator showing how long the thinking has been active

Expected Behavior

Reasoning blocks should display a real-time timer that shows elapsed time during active thinking and persists the final duration after completion. The timer should only appear for streaming responses where real-time updates are meaningful.

Acceptance Criteria

• A timer displays next to the reasoning status that updates in real-time (approximately every 100ms) while thinking is active
• The timer shows elapsed time in a human-readable format (e.g., "3.2s" for seconds, "1m 23s" for minutes and seconds)
• When thinking completes, the timer stops and displays the final thinking duration persistently
• The timer only appears for streaming mode responses and is hidden for non-streaming responses

Steps To Test

1. Trigger a reasoning response in streaming mode and verify the timer appears and updates smoothly during thinking
2. Verify the timer displays appropriate time formats (seconds with decimal for <60s, minutes and seconds for ≥60s)
3. Confirm the timer stops and shows the final duration when thinking completes

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx