FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
c15r
c15rChat
Public
Like
Chat
Home
Code
20
backend
1
frontend
6
shared
2
test
4
AFFORDANCE-COMPONENT-GUIDE.md
AFFORDANCE-FRAMEWORK.md
AFFORDANCE-IMPLEMENTATION-SUMMARY.md
AFFORDANCE-MANAGER-INITIALIZATION.md
COMMAND-PALETTE-REVIEW.md
DEPENDENCY-INJECTION-REVIEW.md
IMPLEMENTATION-SUMMARY-AFFORDANCES.md
IMPLEMENTATION-SUMMARY.md
NextSteps-Examples.md
NextSteps-README.md
README.md
ResourceViewer-README.md
STREAMING-IMPROVEMENTS.md
TESTING.md
package.json
H
test-runner.ts
Branches
1
Pull requests
Remixes
1
History
Environment variables
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.
Sign up now
Code
/
STREAMING-IMPROVEMENTS.md
Code
/
STREAMING-IMPROVEMENTS.md
Search
6/30/2025
Viewing readonly version of main branch: v1328
View latest version
STREAMING-IMPROVEMENTS.md

Streaming Behavior Improvements

Problem Solved

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

Solution Implemented

Changes Made

1. Enhanced useAnthropicStream Hook

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(), }); }

2. Updated StreamingChat Component

File: /frontend/components/StreamingChat.tsx

  • Passed onAddMessage callback to the useAnthropicStream hook
  • Removed duplicate message addition in fireSend and retryMessage 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

3. Updated Documentation

File: /README.md

  • Added section explaining the streaming behavior improvements
  • Documented the immediate message visibility feature
  • Explained how context is preserved during tool execution

Benefits

User Experience Improvements

  • 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

Technical Improvements

  • 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

Implementation Details

Message Flow (Before)

  1. User sends message
  2. Assistant streams response โ†’ liveBlocks shows streaming content
  3. Tool execution begins โ†’ liveBlocks remains with previous content
  4. New response streams โ†’ liveBlocks replaced with new content (previous hidden)
  5. Tool execution completes โ†’ All messages added to history at once

Message Flow (After)

  1. User sends message
  2. Assistant streams response โ†’ liveBlocks shows streaming content
  3. Streaming completes โ†’ Message immediately added to visible history
  4. Tool execution begins โ†’ Previous message remains visible
  5. Tool results โ†’ Immediately added to visible history
  6. New response streams โ†’ liveBlocks only shows current streaming content
  7. Each cycle โ†’ Messages immediately visible, context preserved

Testing

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

Future Considerations

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
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
ยฉ 2025 Val Town, Inc.