| name | ai-chat |
| description | AI chat interface patterns for Angular 21.x and Flutter 3.41.x. Use when building streaming chat UI, conversational AI assistants, copilots, token context indicators, feedback loops, multi-modal inputs, tool visualization, or AI-specific error handling. Covers streaming markdown, auto-scroll heuristics, memoized rendering, token limit UI, regeneration controls, thumbs up/down feedback, and AI error states. |
| allowed-tools | Read, Edit, Write, Glob, Grep, Bash, WebFetch, mcp__context7__resolve-library-id, mcp__context7__query-docs |
| metadata | {"triggers":"AI chat, streaming chat, conversational UI, chat interface, streaming response, token limit, AI assistant, copilot, chatbot, LLM UI, streaming markdown","related-skills":"angular-spa, flutter-mobile, agentic-ai-dev","domain":"frontend","role":"specialist","scope":"implementation","output-format":"code"} |
| last-reviewed | 2026-03-15 |
Iron Law: Load this skill before building any chat interface; never hardcode streaming or message formats without verifying against the skill's patterns.
AI Chat Interface Skill
Tech Stack: Angular 21.x (signals, daisyUI, TailwindCSS) | Flutter 3.41.x (Riverpod, Dart 3.10.9)
When to Activate
Load this skill when the task involves any of:
- Streaming LLM response rendering (SSE / chunked HTTP)
- Chat message list with assistant/user bubbles
- Token context window indicators
- Regenerate / stop generation controls
- Thumbs up/down feedback collection
- Multi-modal input (file/image attachment in a chat box)
- AI-specific error states (refusal, rate limit, context exceeded)
- Tool call visualization in the message thread
Pre-Code Checklist
Before writing any component:
- Angular: Read
angular-spa skill — verify signal/OnPush/daisyUI baseline
- Flutter: Read
flutter-mobile skill — verify Riverpod/AppSpacing/colorScheme baseline
- Docs: Use
Context7 MCP for any library not confirmed in this session (e.g., marked, flutter_markdown)
Core Component Overview
| Component | Angular | Flutter |
|---|
| Message bubble list | ChatMessageListComponent | ChatMessageList widget |
| Streaming message display | StreamingMessageComponent | StreamedMessageWidget |
| Token context indicator | TokenIndicatorComponent | TokenIndicatorWidget |
| Chat input (multi-modal) | ChatInputComponent | ChatInputWidget |
| Feedback bar | FeedbackComponent | FeedbackBar widget |
| AI error display | AiErrorComponent | AiErrorWidget |
| Tool call visualization | ToolCallCardComponent | ToolCallCard widget |
Quick Start
See reference/quick-start.md for entry-point wiring (Angular ChatComponent + Flutter ChatScreen).
Key Patterns (brief — details in reference files)
Streaming (Angular)
- Use
AbortController to cancel in-flight SSE streams
- Auto-scroll: scroll only when user is within 100px of bottom
computed() signal to derive rendered markdown — prevents re-parsing on every chunkaria-live="polite" wraps the message list
Streaming (Flutter)
AsyncNotifier with Stream.listen updates state incrementallyScrollController + addPostFrameCallback for auto-scroll after frame- Check
MediaQuery.of(context).disableAnimations before scroll animations
Token Context
- Angular:
TokenIndicatorComponent uses daisyUI progress + text-warning/text-error classes at 80%/100% thresholds
- Flutter:
LinearProgressIndicator with colorScheme.error / colorScheme.tertiary
- Always display "~N messages remaining" not raw token numbers
AI Errors
- Every AI error type has a distinct UI state — see
reference/ai-error-handling.md
- NEVER swallow AI errors silently — always show user-visible feedback with an action
Feedback
- Angular:
signal<'up'|'down'|null> tracks selected thumb; regenerate re-emits prompt
- Flutter:
HapticFeedback.lightImpact() on thumb press; colorScheme.primary for active state
Multi-Modal Input
- Angular: Angular CDK drag-drop for file zone;
Enter sends, Shift+Enter newlines
- Flutter:
image_picker for attachments; maxLines: null for auto-expanding TextField
Reference Files
| File | Contents |
|---|
reference/quick-start.md | Entry-point wiring for Angular ChatComponent and Flutter ChatScreen |
reference/streaming-patterns.md | Streaming UX, auto-scroll, memoization, stop controls |
reference/context-management.md | Token indicator, threshold logic, summarization trigger |
reference/ai-error-handling.md | Refusal, rate limit, context exceeded, timeout, hallucination flag |
reference/feedback-loops.md | Thumbs up/down, copy, regenerate — Angular & Flutter |
reference/multimodal-input.md | File attach, preview chips, auto-expand textarea/field |
Anti-Patterns — Hard Prohibitions
- NEVER re-parse markdown on every streaming chunk — memoize with
computed() / derived state
- NEVER auto-scroll unconditionally — it steals user scroll position mid-read
- NEVER display raw token counts to end users — use human-readable approximations
- NEVER silently ignore AI error responses — every error must log + show user feedback
- NEVER hardcode colors for error/warning states — use daisyUI tokens or
colorScheme
- NEVER use constructor DI in Angular — use
inject()
- NEVER use
@Input()/@Output() decorators — use input(), output(), model() signals
- NEVER use raw
EdgeInsets numeric literals in Flutter — use AppSpacing tokens
- NEVER use
Color(0x...) literals in Flutter — use Theme.of(context).colorScheme
Post-Code Review
After implementation, dispatch these reviewer agents:
| Concern | Agent |
|---|
| Angular code quality | code-reviewer |
| Accessibility (ARIA, keyboard nav) | accessibility-auditor |
| Flutter/Riverpod patterns | riverpod-reviewer |
| Security (file uploads, content rendering) | security-reviewer |
| UI/UX consistency | ui-standards-expert |
