Pattern — AI chat surface primitives

*tatus* v0.1.0 — Draft. Some primitives have a concrete companion spec under specs/ai-ui/ (chatmessagebubble); 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.
• Liveregion announce: `arialive="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; draganddrop 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 topright; keyboardaccessible (Tab + Enter).
• Inside Bubble: shows the attachment that traveled with the message

  (read-only, no remove).

R6 — Conversations

• Sidebar list, ordered mostrecentfirst.
• 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.

• Crosslink `specs/aiui/agentsteptrace.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.
• Toolcall rendering (handled in dedicated `specs/aiui/` companions).