Pattern — AI chat surface primitives

Status: v0.1.0 — Draft. Some primitives have a concrete companion spec under specs/ai-ui/ (chat-message-bubble); others are first- ratification here. Cross-link from each primitive page once shipped.

R1 — The six primitives

R2 — Bubble

• Variants: user, assistant, system, error.
• Markdown rendering: per Koder markdown pipeline; code blocks use specs/ai-ui/code-block.kmd when present.
• Actions row (assistant only): copy, regenerate, edit, branch.
• Live-region announce: aria-live="polite" on the bubble container so streamed assistant text reads progressively without jumping back.
• Mandatory: AI mark + disclosure line per specs/patterns/ai-feature-visual-language.kmd (assistant variant only).

R3 — Sender

• Auto-grow textarea (1 → 8 lines, then internal scroll).
• Attachment slot — paperclip icon opens picker; drag-and-drop also supported when the surface accepts files.
• Send button:
  • Default state: disabled when textarea empty.
  • During request: morphs to Stop button (square icon).
• Keyboard:
  • ⌘+Enter (or Ctrl+Enter) sends.
  • Esc cancels in-flight request.
  • ⌘+/ (or Ctrl+/) focuses the composer from anywhere on the page.
• Voice input slot (when specs/voice/wake-word.kmd Talk Mode is enabled): mic icon adjacent to send.

R4 — Suggestion

• Maximum 4 chips, single row, horizontally scrollable on narrow viewports.
• Each chip: short label + optional leading icon.
• Tap chip → fills sender textarea (does NOT auto-send; user reviews before sending).
• Dismissable: chip set hides once user sends a message; new suggestions appear after each assistant reply.

R5 — Attachment

• Preview cell: 64×64 thumbnail for images; file-type icon + filename for non-images.
• Filename truncates with ellipsis at 24 chars; full name in title attr.
• Remove (×) button top-right; keyboard-accessible (Tab + Enter).
• Inside Bubble: shows the attachment that traveled with the message (read-only, no remove).

R6 — Conversations

• Sidebar list, ordered most-recent-first.
• Active conversation highlighted with --kds-color-accent left border.
• Each row: title (auto-generated from first user message, max 32 chars)
  • timestamp (relative for ≤ 7 days, absolute thereafter).
• Hover / focus actions: rename, archive, delete (with confirm modal).
• "New chat" button anchored at top.
• Date-grouped headings: Today / Yesterday / Last 7 days / Older (per specs/ai-ui/conversation-history.kmd if shipping that).

R7 — ThoughtChain

• Collapsible region between the user message and the final assistant answer.
• Collapsed by default; click to expand.
• Inside: ordered list of reasoning steps + tool calls + tool results, one per line with timestamp + step name.
• Streamed in same channel as the answer; consumer SHOULD render steps progressively as they arrive.
• Cross-link specs/ai-ui/agent-step-trace.kmd for richer agent-trace visualizations.

R8 — Live demo

/<locale>/patterns/patterns-ai-chat-surface.html (auto-rendered from this spec via kind=pattern routing) embeds a fully-interactive demo chat — HTMX-driven loop with mock responses simulating streaming and a ThoughtChain expand. Backlog: a separate UI ticket in design-gen for the demo page.

Não-escopo

• Streaming transport protocol (SSE / WebSocket — transport spec, not visual spec).
• Markdown rendering pipeline internals.
• Tool-call rendering (handled in dedicated specs/ai-ui/ companions).