PDS proposals
← All proposals

Chat with an agent

A recipe, not a component: one interactive story that composes the existing proposals into a chat with an agent, from the empty state to a conversation.

Extends a PDS componentOpen in Storybook

proposals/ChatWithAgent/context.md33 lines · View on GitHub

Chat with an agent

Status: built (2026-10-19), ready for dev (2026-10-20), unverified by eye. A recipe: HANDOFF.md lists the components to port; the recipe itself is documentation.

Problem

The pieces of an AI chat (Chat Panel, Chat Input, Chat Message, Chain of Thought, Suggestion Card, Code Diff, Feedback Bar and more) are proposed one by one. Nothing shows them working together, in order, so it is hard to judge the flow or to tell an engineer how the parts fit.

Proposal

A recipe, not a component: one interactive story that composes the existing proposals into a chat with an agent, from the empty state to a conversation. It has no API of its own.

  • Empty state: an icon, a heading and a description, with the default-size Chat Input in the same centered group. No footer yet.
  • Sending a message starts the conversation. The input moves to the footer as the compact bar and takes focus.
  • The agent's turn is a Chain of Thought (Thinking State and Timeline Items) that works through its steps, collapses to "Thought for N seconds" and shows the reply.
  • The first reply ends with a Suggestion Card whose changes are a Code Diff; Accept applies it, and the accepted card shows the Feedback Bar. Later replies get the Feedback Bar underneath, and its thanks text fades back to the thumbs.
  • Refine on the Suggestion Card shows a context bar above the chat input (the aboveField slot): "Refining: 2 changes (composer.json, pantheon.yml)" with a dismiss button, and focuses the input. Sending a note clears the bar and the agent replies with a narrowed Suggestion Card (one file).
  • Files dropped anywhere on the Chat Panel show an overlay and attach as chips in the chat input.
  • The header shows a summary (Status Indicator), context rows (Timeline Items, a Tag and a Button) and the Compose / Chat / Review segmented button.

Source

The designer's chat reference screenshots and direction over this session (2026-10-19). Wording and the scripted replies are made-up samples.

Constraints

  • Only existing proposals and PDS components; the few story-only overrides are listed in custom.md.
  • Tokens only, light and dark.

Open questions

See decisions.md.