← 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/decisions.md45 lines · View on GitHub

Decisions: Chat with an agent

A recipe, moved out of Chat Panel (2026-10-19)

  • Decision: the working chat is the recipe Recipes/Chat with an agent, in proposals/ChatWithAgent/. It was the With Sample Content story of Chat Panel.
  • Why: it is the whole chat experience, not the panel, and the repo defines a recipe as a composition of existing proposals for a screen pattern with no API of its own. It sits next to Event log with agent in the Recipes group.
  • Port impact: none. A recipe is documentation; nothing here is ported.

The sample is scripted (2026-10-19)

  • Decision: three scripted exchanges repeat (a dependency check ending in a Suggestion Card with a Code Diff, then a commit, then a multidev). Steps tick every 0.9 seconds. The thanks text fades back to the thumbs after 4.5 seconds. All timing and state live in the story, the screen's job, never in a component.
  • Why: to show the sequence without a backend. See each component's own decisions.md for its details.
  • Port impact: none.

Story-only overrides (2026-10-19)

  • The PDS Segmented Button is stretched to the header width, the Tag borrows the Badge's silver-muted colors, the "Add page" Button is 24px high to match the Tag, and the empty state's heading is Heading XL with a Copy XS secondary description. All are story CSS (chat-with-agent-story.css), listed in custom.md. Each is an open question for the component it overrides (a full-width Segmented Button, a neutral Tag color, an empty state heading size).

Refine uses the Chat Input's aboveField slot (2026-10-19)

  • Decision: Refine on a Suggestion Card puts a context bar above the chat input: a pen icon, "Refining: <title> (<files>)", and a dismiss button (Stop refining). Focus moves to the input; a visually hidden status region announces "Refining <title>". Sending clears the bar, the user's message gets a "(Refining: <title>)" line, and the agent replies with a narrowed Suggestion Card (one file, composer.json). The reply to a Refine is its own script and does not advance the normal exchanges.
  • Why: the designer wanted a sample that uses aboveField. It shows what the slot is for: context the next message applies to. It also gives Refine a real purpose. A branch bar that follows the agent's work (shown after the commit and the multidev) was considered and not built; it is passive and the header already shows the context.
  • Port impact: none; aboveField is the Chat Input's own slot. Refine's behavior is story-only.

Helper text and the review dot are off (2026-10-19)

  • SHOW_HELPER_TEXT (the "Enter to send · Shift+Enter for new line" line under the chat input) is false: hidden for now. The segmented button has no dot on Review (it only offers a tally).

Open questions

  • Is the Compose / Chat / Review switch meant to change the content? Only Chat is built.
  • Which of the story-only overrides above should become real options on their components?

Full screen and history removed (2026-10-19)

  • Decision: the expand button, the full-screen layout (overlay or embedded page, the Host control), the Conversation List beside the chat and the "New chat" reset are removed from the recipe. The chat is the drawer only (Chat Panel size='m', compact chat input).
  • Why: the designer: the full-screen chat is not needed for now.
  • Port impact: none for the recipe. Chat Panel's size='fill' and the Conversation List proposal were removed with it (both only served the full-screen layout). If full screen returns, the overlay should be the PDS FullScreenOverlay (focus trap, scroll lock, Escape) and the embedded page a link or route.

The recipe uses the Chat Panel's scroll to latest and fade (2026-10-19)

  • Decision: the story's own scrollIntoView on every update and its end marker are gone. The Chat Panel is given hasScrollToLatest, scrollToLatestLabel='Scroll to latest' and hasContentFade.
  • Why: the manual scrolling pulled the view back to the bottom while a person was reading earlier messages. The panel now follows the end only while the person is at the end.
  • Port impact: none beyond the Chat Panel's props.