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, filter by title
- ✅ Message limits - Free-tier cap (
kFreeMessageLimit = 10) gates non-subscribers - ✅ Error handling - Retry, cancellation, localized error messages
Liquid Glass layout
ChatViewandChatGPTStyleViewhost the input bar via.safeAreaInset(edge: .bottom). The scroll view is the full body, not aVStackstacking input below messages. This is what lets Liquid Glass sample the content behind the input bar on iOS 26.- The scroll-edge effect is wired through
saiScrollEdgeGlass(.bottom)so the bottom of the chat transcript blurs into the input chrome. ChatViewModelhas a sibling extension file,ChatViewModel+Memory.swift, which keeps memory-extraction concerns out of the main view model.
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
makeChatView(conversationID:style:).
Key Components
Production Factory
The boilerplate uses a factory pattern inCompositionRoot:
ChatViewModel
What it handles:- Message persistence via
messageRepository - LLM streaming with cancellation
- Cursor-based pagination (
InfinitePaginator) - Error handling and retry (
retryLast()) - Loading states
- Free-tier message cap via the injected
paymentsStatusProvider
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
Conversation search
Search ships as client-side filtering inChatHistoryView (no full-text message search).
It matches conversation title and persona name:
UI Components
| Component | Package | Purpose |
|---|---|---|
ChatView | FeatureChat | Bubble-style chat interface |
ChatGPTStyleView | FeatureChat | Centered-style interface |
DualStyleChatView | FeatureChat | Container that renders the selected ChatUIStyle |
MessageRow | FeatureChat | Bubble-style message row |
ChatHistoryView | FeatureChat | Conversation list |
ChatRowCard | FeatureChat | Conversation row |
ChatSearchBar | FeatureChat | Search input |
EmptyStateView | FeatureChat | No conversations state |
SAIInputBar | DesignSystem | Message composition bar |
ChatBubble | DesignSystem | Reusable message bubble |
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
- Storage - Conversation and message persistence
- DesignSystem - UI components and tokens
- Localization - Localized error messages (
AppError.localizedUserMessage)
Used By
- AI - Re-exports FeatureChat;
ProxyLLMClient(inPackages/AI) conforms toLLMClient. The dev-fallbackEchoLLMClient(app target,Composition/LLMClientFactory.swift) also conforms toLLMClient - 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
TheFeatureChatTests target runs as part of the workspace suite — ~598 tests across 12
package test targets + the app test suites, all in one Boilerplate.xctestplan run.
FeatureChat tests cover:
- Message sending
- Streaming responses
- Pagination
- Conversation management
- UI rendering
- Error scenarios
