ai-chat

---
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:

1. **Angular**: Read `angular-spa` skill — verify signal/OnPush/daisyUI baseline
2. **Flutter**: Read `flutter-mobile` skill — verify Riverpod/AppSpacing/colorScheme baseline
3. **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 chunk
- `aria-live="polite"` wraps the message list

### Streaming (Flutter)
- `AsyncNotifier` with `Stream.listen` updates `state` incrementally
- `ScrollController` + `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` |

More agent context in kumaran-is/claude-code-onboarding

157 other files this repository gives its agents, the first 60 shown.