# Conversation

> The Conversation and the parts inside it, EmptyState, Messages, FollowUps, ScrollToBottom, HistorySkeleton, ConversationSearch and its toggle.

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.](https://superassist.app/_astro/panel-sheet-light.C-Bfhi_y.webp)

## Usage

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

```tsx
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](https://superassist.app/how-to/use-the-hosted-runtime.md) 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](https://superassist.app/explanation/how-a-turn-is-answered.md#after-the-reply-a-decision-model-reads-the-exchange).

### 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](https://superassist.app/how-to/make-a-page-assisted.md#suggest-first-messages).

### 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](https://superassist.app/components.md#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](https://superassist.app/how-to/make-your-own-part.md).

## See also

- [Composer](https://superassist.app/components/panel/composer.md), the conversation's partner below it.
- [Parts and the default composition](https://superassist.app/explanation/parts-and-the-default-composition.md) for where parts stop and slots begin.