Conversation

The conversation is the current thread’s messages as the panel shows them, from the empty state to the last reply. It scrolls, and it holds the cards the assistant answers with.

The sheet panel beside the Orders table: the user asked to ship Globex's order and the assistant says it is shipped.

Usage

Conversation with no children renders its default. With children, it renders those. This one keeps the search and swaps the assistant’s message:

function Mine() {
  return (
    <MessagePrimitive.Root className="rounded-lg border-s-2 border-teal-600 bg-teal-50 px-3 py-2 text-sm">
      <MessagePrimitive.Parts />
    </MessagePrimitive.Root>
  );
}

<AssistedPanel.Conversation>
  <AssistedPanel.ConversationSearch />
  <AssistedPanel.Messages components={{ AssistantMessage: Mine }} />
  <AssistedPanel.ScrollToBottom />
</AssistedPanel.Conversation>;

The parts stop where a single message begins. Inside a message, Messages takes components slots.

What the model sees

Nothing from the parts. A starter the user picks is sent as the user’s message, as typed.

Parts

Part	Kind	Renders
`AssistedPanel.Conversation`	Container	The scrolling viewport, centered up to 44 rem. Hidden while the settings panel is shown.
`AssistedPanel.HistorySkeleton`	Leaf	Placeholder lines while the runtime loads a thread’s history.
`AssistedPanel.EmptyState`	Leaf	In an empty thread: `What should we do on {page}?`, or `How can I help?` off any page, and the starters.
`AssistedPanel.Messages`	Leaf	The thread’s messages, with cards inline, day separators and the stopped-run card.
`AssistedPanel.FollowUps`	Leaf	The runtime’s suggested follow-ups after the last reply.
`AssistedPanel.HandoffOffer`	Leaf	A Talk to a person button when the hosted runtime says a person looks needed. It sends the request.
`AssistedPanel.Resolution`	Leaf	Did this resolve your issue? with Yes and No under a complete reply, when the hosted runtime asks.
`AssistedPanel.ScrollToBottom`	Leaf	A round button pinned to the bottom while the view is scrolled up.
`AssistedPanel.ConversationSearch`	Leaf	A search box over the thread’s text with the hit count and previous and next. It scrolls to each hit.
`AssistedPanel.ConversationSearchToggle`	Leaf	A search button that shows and hides the default composition’s search.

Default composition

Conversation with no children renders ConversationSearch while the toggle is on, then HistorySkeleton, EmptyState, Messages, FollowUps, HandoffOffer, Resolution and ScrollToBottom.

Hosted outcomes

Resolution and HandoffOffer show nothing unless the hosted runtime asks for them. After each reply, Super Assist judges the exchange and tells the panel whether to ask about resolution and whether to offer a person; a thread handed to a person shows neither. An answer to the question is kept on the thread and shows as Marked as resolved or Marked as unresolved. See How a turn is answered.

Starters

EmptyState shows the open page’s starters, else the provider’s, as buttons that send. The runtime’s own suggestions follow them. See Make a page assisted.

Inside `Messages`

Day separator: a date line above a message from another day than the one before.
Stopped run: a reply the user stopped shows a card with Continue, which runs it again, and Discard, which deletes it.
Cards: each tool call with a card renders inline. See Cards.

Props

Part	Props
`Conversation`	`className`, `children`
`Messages`	`className`, `components`: `ThreadComponents`
`HistorySkeleton`, `EmptyState`, `FollowUps`, `ConversationSearch`	`className`
`HandoffOffer`, `Resolution`	`className`
`ScrollToBottom`, `ConversationSearchToggle`	A button’s props and `asChild`

ThreadComponents slots, each optional:

Slot	Type	Replaces
`AssistantMessage`	`ComponentType`	An assistant message.
`UserMessage`	`ComponentType`	A user message.
`DaySeparator`	`ComponentType<{ day: Date }>`	The date line.
`ToolFallback`	`ToolCallMessagePartComponent`	A tool call without a card.
`ToolGroup`	`ComponentType<PropsWithChildren<{ group }>>`	The group around consecutive tool calls.
`ReasoningGroup`	`ComponentType<PropsWithChildren<{ group }>>`	The group around reasoning.
`TaskGroup`	`ComponentType<{ group }>`	A task group.

Build a message slot from MessagePrimitive, exported by the package. See Make your own part.