# Composer

> The Composer and the parts inside it, Input with its slash commands, Attachments, AddAttachment, Dictate, ModelSelector and Send.

The composer is where the user writes. Its input lists the open page's actions and fields when the user types `/`.

![The composer with a slash typed: a list of the Orders page's actions, each with what pressing it does.](https://superassist.app/_astro/composer-slash-light.C0qUjed6.webp)

## Usage

`Composer` with no children renders its default. With children, it renders those. This one keeps the input, the model picker and the send button:

```tsx
<AssistedPanel.Composer>
  <AssistedPanel.Input />
  <AssistedPanel.ModelSelector />
  <AssistedPanel.Send />
</AssistedPanel.Composer>
```

## What the model sees

What the user sends. `ModelSelector` also sets the model and the reasoning effort every message carries, as `config.modelName` and `config.reasoningEffort`. Super Assist answers an end user on the agent's own model and thinking level, so the choice doesn't change the reply. See [How a turn is answered](https://superassist.app/explanation/how-a-turn-is-answered.md#the-agent-answers).

## Parts

| Part                          | Kind      | Renders                                                                                             |
| ----------------------------- | --------- | --------------------------------------------------------------------------------------------------- |
| `AssistedPanel.Composer`      | Container | The composer's box below the conversation, centered up to 44 rem. Files dropped on it attach.       |
| `AssistedPanel.Attachments`   | Leaf      | The files attached to the message, on a row of their own.                                           |
| `AssistedPanel.Input`         | Leaf      | The text box. Enter sends. `/` opens the page's slash commands.                                     |
| `AssistedPanel.AddAttachment` | Leaf      | A paperclip button that picks files.                                                                |
| `AssistedPanel.Dictate`       | Leaf      | A microphone button, then a stop button while dictating. Nothing when the runtime has no dictation. |
| `AssistedPanel.ModelSelector` | Leaf      | A model picker, with an effort control for models that have `efforts`. Nothing without models.      |
| `AssistedPanel.Send`          | Leaf      | Sends the message. While a reply runs, a stop button in its place.                                  |

### Default composition

`Composer` with no children renders `Attachments` and `Input` on rows of their own, then a row of controls: `AddAttachment`, `Dictate` and [`ContextDisplay`](https://superassist.app/components/panel/data-parts.md) on the left, `ModelSelector` and `Send` on the right.

### Slash commands

Typing `/` in `Input` lists the open page's actions, then its fields. Rows of one action list each row's label.

| Picked    | Inserts          | Hint                                                                                          |
| --------- | ---------------- | --------------------------------------------------------------------------------------------- |
| An action | Its label        | "Rings it for you to press" when `consequential`, "Asks you before it runs" when `"confirm"`. |
| A field   | `Set <label> to` | "Rings it for you to fill" when `consequential`.                                              |

With nothing lent, the list reads "This page lends no actions or fields". The placeholder reads "Ask, or type / for actions" while the page lends any, else "Send a message…".

## Props

| Part                               | Props                                                                                                          |
| ---------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `Composer`                         | `className`, `children`                                                                                        |
| `Input`                            | `className`, `autoFocus` (on by default), `placeholder`                                                        |
| `Attachments`                      | `className`                                                                                                    |
| `AddAttachment`, `Dictate`, `Send` | A button's props and `asChild`                                                                                 |
| `ModelSelector`                    | `models`, else the root's `models`. `searchable`, `align`, `variant`, `size`, `className`, `contentClassName`. |

With `asChild`, `Send` replaces only the send button and `Dictate` only the start button. The stop and cancel buttons stay the package's.

## See also

- [How a turn is answered](https://superassist.app/explanation/how-a-turn-is-answered.md), for what reaches the agent.
- [Add actions](https://superassist.app/how-to/add-actions.md) and [Lend a form's fields](https://superassist.app/how-to/lend-form-fields.md) for what the slash commands list.