A React-based chat application that parses and displays tool responses as separate chat bubble types.

• Regular Chat Messages: Standard user and assistant messages
• Tool Call Messages: Special bubbles showing when the assistant is using tools
• Tool Response Messages: Dedicated bubbles for tool execution results
• Expandable Details: Click to expand/collapse tool call details and responses
• Visual Indicators: Different colors and icons for different message types

• User messages (blue background)
• Assistant text responses (gray background)

• Amber background with wrench icon
• Shows which tools are being used
• Expandable to show tool parameters
• Collapsible for clean interface

• Green background for successful tool responses
• Red background for error responses
• Shows tool name and execution status
• Expandable to show full response details

• components/Chat.tsx - Main chat interface using Vercel AI SDK
• components/MessageBubble.tsx - Handles different message types
• components/App.tsx - Root application component

• index.ts - Hono server with chat API endpoint
• Parses agent responses for tool calls and responses
• Converts to appropriate streaming format for frontend

• types.ts - TypeScript interfaces for messages and tool calls
• utils.ts - Utility functions for parsing and formatting

The system automatically detects and parses:

• XML-style function calls: <function_calls>...</function_calls>
• Function results: <function_results>...</function_results>
• JSON-formatted tool calls and responses
• Structured OpenAI-style tool call format

1. Start a conversation in the chat interface
2. When the assistant uses tools, you'll see:
   • A tool call bubble (amber) showing which tools are being used
   • Tool response bubbles (green/red) showing the results
3. Click on any tool bubble to expand and see details
4. Regular conversation continues normally

Uses TailwindCSS for styling with:

• Responsive design
• Color-coded message types
• Smooth transitions and hover effects
• Accessible icons from Lucide React