Full technical details in your project at
/docs/modules/Feature.Chat.mdWhat You Get
- ✅ 2 professional UIs - Bubble (WhatsApp) and Centered (ChatGPT)
- ✅ Streaming responses - Real-time token-by-token rendering
- ✅ Cursor pagination - Infinite scroll with smart prefetch
- ✅ Conversation management - Create, rename, delete, search
- ✅ Message limits - Configurable free-tier restrictions
- ✅ Error handling - Retry, cancellation, offline support
UI Styles
- Bubble Style
- Centered Style
WhatsApp/iMessage-like interface:
- Messages in colored bubbles
- User on right (blue), AI on left (gray)
- Timestamps and avatars
- Smooth animations
Key Components
Production Factory
The boilerplate uses a factory pattern inCompositionRoot:
ChatViewModel
What it handles:- Message persistence via repository
- LLM streaming with cancellation
- Cursor-based pagination (InfinitePaginator)
- Error handling and retry
- Loading states
- Message limits (free vs pro)
ChatHistoryViewModel
Manages conversation list:Streaming Pattern
Real-time AI response rendering:- ✅ Low latency (first token fast)
- ✅ Better UX (gradual appearance)
- ✅ Cancellable generation
- ✅ Memory efficient
Pagination
Efficient infinite scroll for chat history:Customization Examples
Change Chat Colors
Add Message Actions
Add Custom AI Persona
Add Message Search
UI Components
All components extracted and reusable:| Component | Purpose |
|---|---|
ChatView | Bubble-style chat interface |
ChatGPTStyleView | Centered-style interface |
DualStyleChatView | Both styles with switcher |
SAIInputBar | Message composition bar |
ChatBubble | Message bubble component |
ChatHistoryView | Conversation list |
ChatRowCard | Conversation row |
ChatSearchBar | Search input |
EmptyStateView | No conversations state |
Key Files
| Component | Location |
|---|---|
| ViewModels | Packages/FeatureChat/Sources/FeatureChat/ViewModels/ |
| Views | Packages/FeatureChat/Sources/FeatureChat/Views/ |
| Components | Packages/FeatureChat/Sources/FeatureChat/Views/Components/ |
| Paginator | Packages/FeatureChat/Sources/FeatureChat/Paginator/ |
Dependencies
- Core - Error handling, logging
- AI - LLM client for responses
- Storage - Conversation and message persistence
- DesignSystem - UI components and tokens
Used By
- Main App - Primary feature
- CompositionRoot - Factory methods for ViewModels
Best Practices
ViewModel Design
ViewModel Design
- @MainActor for UI updates
- @Observable for state
- Async/await for operations
- Handle all error cases
Streaming
Streaming
- Update UI incrementally
- Show typing indicator
- Support cancellation
- Handle interruptions
Performance
Performance
- Paginate messages
- Lazy load conversations
- Compress images
- Cancel tasks on dismiss
Learn More
Full Documentation
Find complete FeatureChat guide in your project
UI Styles Guide
Find complete Chat UI patterns guide in your project
AI Module
LLM integration
Building Guide
Customize chat
Build with AI (fast)
You can customize this module in minutes using our ready-to-paste LLM prompts.Example Prompt
Context:Packages/FeatureChat/**
Prompt:
“Refactor chat UI to centered layout using DS spacing/tokens. Add toggle in Settings. Update tests.”
Example Output
See in project:
docs/modules/Feature.Chat.md
Test Coverage
78%+ - Comprehensive chat testing Tests include:- Message sending
- Streaming responses
- Pagination
- Conversation management
- UI rendering
- Error scenarios
