shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improved thinking/reasoning indicator with elapsed time counter

Browse Source 
When the agent is reasoning with hidden thinking (thinking=low), show a
pulsing 'Reasoning...' indicator with elapsed time instead of generic
bouncing dots. Once text content starts streaming, falls back to the
regular streaming dots.

Closes feedback #40
This commit is contained in:
Nicolas Varrot
2026-02-12 23:42:39 +00:00
parent 2b9729e901
commit 25e63f8d18
3 changed files with 59 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ChatMessage.tsx
View File

@@ -7,6 +7,7 @@ import remarkBreaks from 'remark-breaks';
import rehypeHighlight from 'rehype-highlight';
import type { ChatMessage as ChatMessageType, MessageBlock } from '../types';
import { ThinkingBlock } from './ThinkingBlock';
import { ThinkingIndicator } from './ThinkingIndicator';
import { CodeBlock } from './CodeBlock';
import { ToolCall } from './ToolCall';
import { ImageBlock } from './ImageBlock';
@@ -388,14 +389,20 @@ export function ChatMessageComponent({ message, onRetry, agentAvatarUrl }: { mes
{/* Inline images */}
{renderImageBlocks(message.blocks)}
{/* Streaming dots */}
{message.isStreaming && (
<div className="flex gap-1 mt-2">
<span className="bounce-dot w-1.5 h-1.5 rounded-full bg-gradient-to-r from-cyan-300/80 to-violet-400/80 inline-block" />
<span className="bounce-dot w-1.5 h-1.5 rounded-full bg-gradient-to-r from-cyan-300/80 to-violet-400/80 inline-block" />
<span className="bounce-dot w-1.5 h-1.5 rounded-full bg-gradient-to-r from-cyan-300/80 to-violet-400/80 inline-block" />
</div>
)}
{/* Streaming indicator */}
{message.isStreaming && (() => {
const hasVisibleContent = message.content?.trim();
if (!hasVisibleContent) {
return <ThinkingIndicator />;
}
return (
<div className="flex gap-1 mt-2">
<span className="bounce-dot w-1.5 h-1.5 rounded-full bg-gradient-to-r from-cyan-300/80 to-violet-400/80 inline-block" />
<span className="bounce-dot w-1.5 h-1.5 rounded-full bg-gradient-to-r from-cyan-300/80 to-violet-400/80 inline-block" />
<span className="bounce-dot w-1.5 h-1.5 rounded-full bg-gradient-to-r from-cyan-300/80 to-violet-400/80 inline-block" />
</div>
);
})()}
{/* Tool calls & thinking (inline) */}
{!isUser && <InternalsSummary blocks={message.blocks} />}