Current State Analysis
The current implementation shows only "Thinking…" during the streaming phase (lines 515-520 in AiChatPanel.tsx). The backend uses Vercel AI SDK v6 with streamText and fullStream, but the frontend isn't leveraging all available stream parts.
Vercel AI SDK Capabilities Available
Based on Vercel AI SDK v6 and mainstream agent implementations (ChatGPT, Claude.ai, Perplexity), the following capabilities can be added:
- Reasoning/Thinking Display (DeepSeek R1, o1-style)
Stream Part: reasoning field in stream parts
Display: Show intermediate reasoning steps in a collapsible section
UI Pattern: Grayed-out expandable section with chain-of-thought reasoning
Benefit: Transparency into model's decision-making process
- Step-by-Step Progress Indicators
Stream Parts: step-start, step-finish events
Display: Show multi-step agentic workflows with progress
UI Pattern: Step counter with current/total (e.g., "Step 2 of 5")
Benefit: User understanding of complex multi-step operations
- Tool Call Preview/Planning
Current: Only shows tool calls when they execute
Enhancement: Show "Planning to call..." before execution
Stream Part: tool-input-start (already handled in encoder)
Implementation Plan
Phase 1: Enhanced Thinking Display
Update stream encoder to pass through reasoning, stepStart, stepFinish events
Add UI components for displaying thinking/reasoning steps
Add collapsible section for detailed reasoning
Show step progress indicators
Phase 2: Tool Call Improvements
Detect tool-input-start and show "Planning to call..." state
Add estimated time indicators for long-running tools
Show tool call queue when multiple tools are pending
Technical Changes Required
Backend (service-ai)
Ensure fullStream properly yields all part types (reasoning, stepStart, stepFinish, sources, warnings)
Update encodeVercelDataStream to handle new part types
Pass through model-specific metadata (reasoning for o1/DeepSeek-R1)
Frontend (AiChatPanel.tsx)
Parse and handle new stream part types
Add UI components for:
Reasoning display (collapsible)
Step progress indicators
Token usage badges
Citation links
Warning alerts
Enhance accessibility (ARIA labels, keyboard navigation)
Type Definitions (@objectstack/spec)
Extend TextStreamPart types to include reasoning, sources, warnings
Add schema definitions for structured reasoning steps
Define citation/source metadata types
UX Design Guidelines
Thinking/Reasoning Display
Collapsed by default to avoid overwhelming users
Expand on click to show full reasoning chain
Subtle visual style (lighter text, italic) to distinguish from main content
Animated ellipsis during active thinking
Tool Calls
Color-coded states: Planning (blue), Executing (yellow), Success (green), Error (red)
Estimated duration for known slow operations
Cancelable for long-running operations (future enhancement)
Current State Analysis
The current implementation shows only "Thinking…" during the streaming phase (lines 515-520 in AiChatPanel.tsx). The backend uses Vercel AI SDK v6 with streamText and fullStream, but the frontend isn't leveraging all available stream parts.
Vercel AI SDK Capabilities Available
Based on Vercel AI SDK v6 and mainstream agent implementations (ChatGPT, Claude.ai, Perplexity), the following capabilities can be added:
Stream Part: reasoning field in stream parts
Display: Show intermediate reasoning steps in a collapsible section
UI Pattern: Grayed-out expandable section with chain-of-thought reasoning
Benefit: Transparency into model's decision-making process
Stream Parts: step-start, step-finish events
Display: Show multi-step agentic workflows with progress
UI Pattern: Step counter with current/total (e.g., "Step 2 of 5")
Benefit: User understanding of complex multi-step operations
Current: Only shows tool calls when they execute
Enhancement: Show "Planning to call..." before execution
Stream Part: tool-input-start (already handled in encoder)
Implementation Plan
Phase 1: Enhanced Thinking Display
Update stream encoder to pass through reasoning, stepStart, stepFinish events
Add UI components for displaying thinking/reasoning steps
Add collapsible section for detailed reasoning
Show step progress indicators
Phase 2: Tool Call Improvements
Detect tool-input-start and show "Planning to call..." state
Add estimated time indicators for long-running tools
Show tool call queue when multiple tools are pending
Technical Changes Required
Backend (service-ai)
Ensure fullStream properly yields all part types (reasoning, stepStart, stepFinish, sources, warnings)
Update encodeVercelDataStream to handle new part types
Pass through model-specific metadata (reasoning for o1/DeepSeek-R1)
Frontend (AiChatPanel.tsx)
Parse and handle new stream part types
Add UI components for:
Reasoning display (collapsible)
Step progress indicators
Token usage badges
Citation links
Warning alerts
Enhance accessibility (ARIA labels, keyboard navigation)
Type Definitions (@objectstack/spec)
Extend TextStreamPart types to include reasoning, sources, warnings
Add schema definitions for structured reasoning steps
Define citation/source metadata types
UX Design Guidelines
Thinking/Reasoning Display
Collapsed by default to avoid overwhelming users
Expand on click to show full reasoning chain
Subtle visual style (lighter text, italic) to distinguish from main content
Animated ellipsis during active thinking
Tool Calls
Color-coded states: Planning (blue), Executing (yellow), Success (green), Error (red)
Estimated duration for known slow operations
Cancelable for long-running operations (future enhancement)