src/lib/components/chat/context.md

Chat Context

AI chat interface with enhanced contrast dark theme and dopamine-driven micro-interactions.

Components

• ChatPanel.svelte - Main container with auth handling
• MessageList.svelte - Message container with animated typing indicators
• Message.svelte - Message wrapper with coordinated entrance animations
• MessageContent.svelte - Content normalizer and router with segment-level filtering
• TextRenderer.svelte - Progressive text reveal with streaming-aware tool call filtering
• MessageInput.svelte - Input with charge-up animations and success feedback
• ExampleMessages.svelte - Model limitations warning when chat is empty
• ExampleRow.svelte - Responsive example prompts above input
• segments/ToolBlock.svelte - Tool execution with icons, colors, and progress bars
• segments/TodoSegment.svelte - Task tracker with progress bar and milestone celebrations

Architecture

Clean MVC separation:

• Model: Chat store with state management
• View: Component hierarchy with GSAP animations
• Controller: WebSocket handling with agent communication

Design

• Tool-specific icons and color coding for visual hierarchy
• Progress indicators with anticipation curves
• Success celebrations through subtle animations
• Consistent feedback loops for all interactions