modelcontextprotocol/use-mcp
Watch
1
0
Fork
You've already forked use-mcp
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Implement live reasoning streaming with timing display

Browse source 
- Update ReasoningBlock to start expanded and show live reasoning content
- Add timing tracking with start/end timestamps for reasoning duration
- Auto-collapse reasoning blocks after completion with 500ms delay
- Show timing summary (e.g. 'Thought for 0.4s') instead of content when collapsed
- Add streaming cursor animation and real-time content updates
- Update types to support reasoning timing and streaming state
- Stream reasoning content live as tokens arrive during thinking phase

This provides a much better UX where users can see the model thinking
in real-time, then get a clean timing summary after completion.
This commit is contained in:
Glen Maddern 2025-06-24 18:21:22 +10:00
commit bfe2bd5816
4 changed files with 137 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

9
examples/chat-ui/src/components/ChatMessage.tsx
View file

@ -39,8 +39,13 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
}`}
>
{/* Show reasoning block for assistant messages with reasoning */}
{message.role === "assistant" && "reasoning" in message && message.reasoning && (
<ReasoningBlock reasoning={message.reasoning} />
{message.role === "assistant" && "reasoning" in message && (message.reasoning || message.isReasoningStreaming) && (
<ReasoningBlock
reasoning={message.reasoning || ""}
isStreaming={message.isReasoningStreaming}
startTime={message.reasoningStartTime}
endTime={message.reasoningEndTime}
/>
)}
<div className="prose prose-zinc">

89
examples/chat-ui/src/components/ReasoningBlock.tsx
View file

@ -1,11 +1,30 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
interface ReasoningBlockProps {
reasoning: string;
isStreaming?: boolean;
startTime?: number;
endTime?: number;
}
const ReasoningBlock: React.FC<ReasoningBlockProps> = ({ reasoning }) => {
const [isExpanded, setIsExpanded] = useState(false);
const ReasoningBlock: React.FC<ReasoningBlockProps> = ({
reasoning,
isStreaming = false,
startTime,
endTime
}) => {
const [isExpanded, setIsExpanded] = useState(isStreaming); // Start expanded when streaming
// Auto-collapse when streaming finishes
useEffect(() => {
if (!isStreaming && startTime && endTime) {
// Add a small delay before collapsing so user can see completion
const timer = setTimeout(() => {
setIsExpanded(false);
}, 500);
return () => clearTimeout(timer);
}
}, [isStreaming, startTime, endTime]);
if (!reasoning || reasoning.trim().length === 0) {
return null;
@ -15,36 +34,56 @@ const ReasoningBlock: React.FC<ReasoningBlockProps> = ({ reasoning }) => {
setIsExpanded(!isExpanded);
};
// Truncate the reasoning text for the collapsed state
const maxLength = 120;
const shouldTruncate = reasoning.length > maxLength;
const displayText = isExpanded || !shouldTruncate
? reasoning
: reasoning.substring(0, maxLength) + "...";
// Calculate thinking duration
const duration = startTime && endTime ? (endTime - startTime) / 1000 : null;
// Format duration nicely
const formatDuration = (seconds: number) => {
if (seconds < 1) {
return `${Math.round(seconds * 1000)}ms`;
}
return `${seconds.toFixed(1)}s`;
};
return (
<div className="mb-3">
<div
className={`text-xs text-zinc-600 border border-zinc-200 rounded-lg p-3 *bg-zinc-50 cursor-pointer hover:bg-zinc-50 transition-colors ${shouldTruncate && !isExpanded ? "line-clamp-1" : ""
}`}
className={`text-sm text-zinc-600 border border-zinc-200 rounded-lg p-3 bg-zinc-50 cursor-pointer hover:bg-zinc-100 transition-all duration-300 ${
isExpanded ? "border-zinc-300" : ""
}`}
onClick={toggleExpanded}
>
<div className="flex items-start gap-2">
<span className="text-zinc-400 text-xs mt-0.5 flex-shrink-0">💭</span>
<div className={`${shouldTruncate && !isExpanded ? "truncate" : "whitespace-pre-wrap"}`}>
{displayText}
</div>
{/*{shouldTruncate && (*/}
{/* <button*/}
{/* className="text-zinc-400 hover:text-zinc-600 text-xs ml-auto flex-shrink-0"*/}
{/* onClick={(e) => {*/}
{/* e.stopPropagation();*/}
{/* toggleExpanded();*/}
{/* }}*/}
{/* >*/}
{/* {isExpanded ? "↑" : "↓"}*/}
{/* </button>*/}
{/*)}*/}
{isExpanded ? (
// Expanded view: show reasoning content
<div className="whitespace-pre-wrap flex-1">
{reasoning}
{isStreaming && (
<span className="inline-block w-2 h-4 bg-zinc-400 ml-1 animate-pulse"></span>
)}
</div>
) : (
// Collapsed view: show timing summary
<div className="flex-1">
<span className="text-zinc-500">
{isStreaming ? "Thinking..." :
duration ? `Thought for ${formatDuration(duration)}` :
"Thought process"}
</span>
</div>
)}
<button
className="text-zinc-400 hover:text-zinc-600 text-xs ml-auto flex-shrink-0"
onClick={(e) => {
e.stopPropagation();
toggleExpanded();
}}
>
{isExpanded ? "↑" : "↓"}
</button>
</div>
</div>
</div>

79
examples/chat-ui/src/hooks/useStreamResponse.ts
View file

@ -134,6 +134,8 @@ export const useStreamResponse = ({
const streamResponse = async (messages: Message[]) => {
let aiResponse = ''
let reasoning = ''
let reasoningStartTime: number | undefined = undefined
let reasoningEndTime: number | undefined = undefined
let assistantMessageIndex = -1 // Track the index of our assistant message
let assistantMessageCreated = false // Track if we've created the assistant message yet
@ -200,8 +202,37 @@ export const useStreamResponse = ({
if (event.type === 'reasoning') {
debugLog(`[useStreamResponse] Reasoning event:`, event)
// Track reasoning start time
if (!reasoningStartTime) {
reasoningStartTime = Date.now()
debugLog(`[useStreamResponse] Reasoning started at:`, reasoningStartTime)
}
reasoning += (event as any).textDelta || ''
debugLog(`[useStreamResponse] Reasoning content so far:`, reasoning.length, 'chars')
// Update the assistant message with streaming reasoning in real-time
if (assistantMessageCreated) {
setConversations((prev) => {
const updated = [...prev]
const conv = updated.find((c) => c.id === conversationId)
if (conv && assistantMessageIndex >= 0) {
const assistantMessage = conv.messages[assistantMessageIndex]
if (assistantMessage && hasContent(assistantMessage) && assistantMessage.role === 'assistant') {
// Clean the reasoning content as we stream
let cleanedReasoning = reasoning
cleanedReasoning = cleanedReasoning.replace(/<think>/g, '').replace(/<\/think>/g, '')
cleanedReasoning = cleanedReasoning.trim()
assistantMessage.reasoning = cleanedReasoning
assistantMessage.isReasoningStreaming = true
assistantMessage.reasoningStartTime = reasoningStartTime
}
}
return updated
})
}
} else if (event.type === 'tool-call') {
const eventKey = `tool-call-${event.toolCallId}`
if (processedEvents.has(eventKey)) {
@ -241,6 +272,13 @@ export const useStreamResponse = ({
// Create assistant message on first text delta (after all tool calls/results)
if (!assistantMessageCreated) {
debugLog(`[useStreamResponse] Creating assistant message after tool calls/results`)
// Mark reasoning end time when text starts (reasoning is done)
if (reasoningStartTime && !reasoningEndTime) {
reasoningEndTime = Date.now()
debugLog(`[useStreamResponse] Reasoning ended at:`, reasoningEndTime, 'Duration:', reasoningEndTime - reasoningStartTime, 'ms')
}
setConversations((prev) => {
const updated = [...prev]
const conv = updated.find((c) => c.id === conversationId)
@ -252,6 +290,22 @@ export const useStreamResponse = ({
return updated
})
assistantMessageCreated = true
// Update reasoning end time and stop streaming
if (reasoningEndTime) {
setConversations((prev) => {
const updated = [...prev]
const conv = updated.find((c) => c.id === conversationId)
if (conv && assistantMessageIndex >= 0) {
const assistantMessage = conv.messages[assistantMessageIndex]
if (assistantMessage && hasContent(assistantMessage) && assistantMessage.role === 'assistant') {
assistantMessage.isReasoningStreaming = false
assistantMessage.reasoningEndTime = reasoningEndTime
}
}
return updated
})
}
}
aiResponse += event.textDelta
@ -320,18 +374,12 @@ export const useStreamResponse = ({
debugLog(`[useStreamResponse] Final aiResponse content:`, JSON.stringify(aiResponse))
debugLog(`[useStreamResponse] Final reasoning content:`, reasoning.length, 'chars:', reasoning.substring(0, 100))
// Add reasoning to the final message if we collected any
if (reasoning && assistantMessageCreated) {
debugLog(`[useStreamResponse] Adding collected reasoning:`, reasoning.substring(0, 100))
// Clean the reasoning content by removing think tags
let cleanedReasoning = reasoning
// Remove opening and closing think tags
cleanedReasoning = cleanedReasoning.replace(/<think>/g, '').replace(/<\/think>/g, '')
// Trim any leading/trailing whitespace
cleanedReasoning = cleanedReasoning.trim()
debugLog(`[useStreamResponse] Cleaned reasoning:`, cleanedReasoning.substring(0, 100))
// Final cleanup - ensure reasoning streaming is stopped
if (assistantMessageCreated && reasoningStartTime) {
if (!reasoningEndTime) {
reasoningEndTime = Date.now()
debugLog(`[useStreamResponse] Final reasoning end time:`, reasoningEndTime)
}
setConversations((prev) => {
const updated = [...prev]
@ -339,14 +387,13 @@ export const useStreamResponse = ({
if (conv && assistantMessageIndex >= 0) {
const assistantMessage = conv.messages[assistantMessageIndex]
if (assistantMessage && hasContent(assistantMessage) && assistantMessage.role === 'assistant') {
assistantMessage.reasoning = cleanedReasoning
debugLog(`[useStreamResponse] Added cleaned reasoning to assistant message at index ${assistantMessageIndex}`)
assistantMessage.isReasoningStreaming = false
assistantMessage.reasoningEndTime = reasoningEndTime
debugLog(`[useStreamResponse] Final reasoning cleanup completed`)
}
}
return updated
})
} else {
debugLog(`[useStreamResponse] No reasoning to add. reasoning length:`, reasoning.length, 'assistantMessageCreated:', assistantMessageCreated)
}
} catch (error: unknown) {
if (controller.signal.aborted) {

3
examples/chat-ui/src/types/index.ts
View file

@ -13,6 +13,9 @@ export interface SystemMessage extends BaseMessage {
export interface AssistantMessage extends BaseMessage {
role: "assistant";
reasoning?: string;
reasoningStartTime?: number;
reasoningEndTime?: number;
isReasoningStreaming?: boolean;
}
export interface ToolCallMessage {