Chat Message

Problem

A chat or agent screen shows a conversation: what the user asked and what the agent answered. PDS has no component for a turn in a conversation. The user's message and the agent's reply look different (a bubble on the right vs plain text across the full width) but are the same kind of thing, so this is one component with two variants.

Proposal

ChatMessage, with sender: user or agent.

• user: a filled, rounded bubble that hugs its text and sits on the right, up to about 80% of the width.
• agent: no container. Full width, left-aligned. Holds anything: text, lists, links, a Thinking State, Chain of Thought.

The component owns only the frame (alignment, width, bubble, a hidden sender label for screen readers). The content is a children slot. A thin ChatMessageList stacks messages and owns the gap between turns.

Out of scope for now

Scroll and live-region behavior of the list, an avatar, agent actions (copy, regenerate, feedback), and user extras (attachments, edit, timestamps).

Source

Erika's screenshot (~/Desktop/Screenshot 2026-10-13 at 11.24.55 AM.png): an agent reply, a "Fix the hero" user bubble, then a Thinking State. No Figma or Jira links.