Chat
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data โ all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v1328View latest version
Previously, during streaming conversations with tool use, users would experience a poor UX where:
- After each tool/response cycle, prior streamed messages would be hidden
- Messages would only become visible again after the entire conversation turn completed
- This created confusion during long tool execution sequences
- Interactive tools (like
ask_user
) would lose conversation context
File: /frontend/hooks/useAnthropicStream.tsx
- Added optional
onAddMessage
callback parameter to immediately add completed messages - Modified the tool execution loop to call
onAddMessage
immediately after each streaming cycle completes - Both assistant messages and tool result messages are now added to visible history immediately
Key Changes:
// Function signature updated
export default function useAnthropicStream(
config: AppConfig,
clientPool: MCPClientPool,
affordanceManager: any,
onAddMessage?: (message: Message) => void // NEW: Immediate message callback
)
// Immediate message addition after streaming completes
if (onAddMessage) {
onAddMessage({
id: crypto.randomUUID(),
role: message.role,
content: message.content,
timestamp: Date.now(),
});
}
File: /frontend/components/StreamingChat.tsx
- Passed
onAddMessage
callback to theuseAnthropicStream
hook - Removed duplicate message addition in
fireSend
andretryMessage
functions since messages are now added immediately during streaming
Key Changes:
// Pass callback to streaming hook
const { status, liveBlocks, pendingTool, send, abort, resolvePendingTool, cancelPendingTool } = useAnthropicStream(
config,
clientPool,
affordanceManager,
onAddMessage, // NEW: Pass immediate message callback
);
// Removed duplicate message addition
// Messages are now added immediately during streaming via the onAddMessage callback
// No need to add them again here
File: /README.md
- Added section explaining the streaming behavior improvements
- Documented the immediate message visibility feature
- Explained how context is preserved during tool execution
- Immediate Feedback: Users see completed responses immediately, not after entire conversation turn
- Preserved Context: Previous messages remain visible throughout tool execution cycles
- Better Interactive Tools: Tools like
ask_user
maintain full conversation context - Reduced Confusion: No more "disappearing messages" during long tool sequences
- Cleaner Architecture: Single source of truth for message addition
- Reduced Complexity: Eliminated duplicate message handling logic
- Better State Management: Clear separation between streaming preview and completed messages
- Maintained Performance: No additional overhead, just better timing of operations
- User sends message
- Assistant streams response โ
liveBlocks
shows streaming content - Tool execution begins โ
liveBlocks
remains with previous content - New response streams โ
liveBlocks
replaced with new content (previous hidden) - Tool execution completes โ All messages added to history at once
- User sends message
- Assistant streams response โ
liveBlocks
shows streaming content - Streaming completes โ Message immediately added to visible history
- Tool execution begins โ Previous message remains visible
- Tool results โ Immediately added to visible history
- New response streams โ
liveBlocks
only shows current streaming content - Each cycle โ Messages immediately visible, context preserved
The implementation has been tested and verified:
- โ Application compiles without TypeScript errors
- โ Frontend loads correctly
- โ No runtime errors in server logs
- โ Streaming architecture remains intact
- โ Backward compatibility maintained
This improvement maintains the existing streaming architecture while providing better UX. Future enhancements could include:
- Message transition animations for newly added messages
- Visual indicators for tool execution progress
- Enhanced error handling for failed message additions