# antuikit / Sender

> Sender, the chat input with a send button, with its glyphs drawn from the icon pack and `Sender.Header` and `Sender.Switch` attached.

Docs: https://antuikit.com/docs/components/sender

## Install

npx antuikit@latest init
npx antuikit@latest add sender

## Import

import { Sender } from "@/components/ui/sender";

## Demos

- [Basic](https://ui.antuikit.com/embed/sender/basic.md): Control the text with `value` and `onChange`, and handle the message in `onSubmit`, which Enter and the send button both call.
- [Auto size](https://ui.antuikit.com/embed/sender/auto-size.md): Pass `autoSize` with `minRows` and `maxRows` to let the input grow with its text, then scroll.
- [Submit key](https://ui.antuikit.com/embed/sender/submit-type.md): Set `submitType` to `shiftEnter` so Enter adds a new line and Shift + Enter sends.
- [Loading](https://ui.antuikit.com/embed/sender/loading.md): Set `loading` while a reply is streaming, so the send button turns into a stop button that calls `onCancel`.
- [Read only](https://ui.antuikit.com/embed/sender/read-only.md): Set `readOnly` to show a message that cannot be edited, like one that is already being answered.
- [Disabled](https://ui.antuikit.com/embed/sender/disabled.md): Set `disabled` to block typing and sending, like when the user has run out of messages.
- [Ref methods](https://ui.antuikit.com/embed/sender/ref-methods.md): Use the `ref` to insert text at the cursor, the start or the end, and to focus, select or blur the input.
- [Custom suffix](https://ui.antuikit.com/embed/sender/custom-suffix.md): Pass a function to `suffix` to rebuild the action area from the send, loading, clear and speech buttons it receives.
- [Send button](https://ui.antuikit.com/embed/sender/send-button.md): Style the send button through `suffix`: change its shape or icon, or wrap it in a tooltip.
- [Disable sending](https://ui.antuikit.com/embed/sender/send-disabled.md): Return a disabled send button from `suffix` until there is text or an attached file to send.
- [Footer](https://ui.antuikit.com/embed/sender/footer.md): Pass `footer` to add a toolbar under the input, and set `suffix` to `false` to move the send button into it.
- [Upload panel](https://ui.antuikit.com/embed/sender/upload-panel.md): Pass `Sender.Header` to `header` to open a panel above the input, here an upload area toggled by the paperclip.
- [Quote](https://ui.antuikit.com/embed/sender/reference.md): Use a `Sender.Header` with only a `title` to show the message being replied to, with a close button to drop it.
- [Paste files](https://ui.antuikit.com/embed/sender/paste-files.md): Handle `onPasteFile` to catch files pasted into the input and add them to an `Attachments` list in the header.
- [Switch](https://ui.antuikit.com/embed/sender/switch.md): `Sender.Switch` is a toggle button for options like search or reasoning, with `loading`, `disabled` and its own on and off labels.
- [Voice input](https://ui.antuikit.com/embed/sender/speech.md): Set `allowSpeech` to add a microphone button that turns speech into text, after the browser asks for permission.
- [Custom voice input](https://ui.antuikit.com/embed/sender/custom-speech.md): Pass `recording` and `onRecordingChange` to `allowSpeech` to drive the microphone button from your own speech service.
- [Slots](https://ui.antuikit.com/embed/sender/slots.md): Pass `slotConfig` to mix fixed text with fields, a select, a tag and a custom control, and `skill` to show the active skill.
- [Slot format](https://ui.antuikit.com/embed/sender/slot-format.md): Give a slot `formatResult` to change how its value is written into the message that `onSubmit` receives.
- [Required slot](https://ui.antuikit.com/embed/sender/slot-send-disabled.md): Keep the send button disabled until a slot is filled, by checking the value `onChange` reports.
- [Mentions](https://ui.antuikit.com/embed/sender/quick-commands.md): Wrap the input in `Suggestion` and open it on @, then insert a slot at the cursor for the chosen item.
- [Agent input](https://ui.antuikit.com/embed/sender/agent.md): An agent input with a toolbar that switches skills, toggles reasoning and inserts a file tag into the message.
- [Chat panel](https://ui.antuikit.com/embed/sender/chat.md): A chat panel where each sent message joins a `Bubble.List`, followed by an assistant reply that types itself in.
- [Editor side panel](https://ui.antuikit.com/embed/sender/doc-panel.md): An assistant panel beside a document, where the highlighted passage is quoted above the input and closes once you ask.
- [Prompt composer](https://ui.antuikit.com/embed/sender/composer.md): A prompt composer with attached files above the input and a model picker, a web search toggle and the send button below it.
- [Mobile assistant](https://ui.antuikit.com/embed/sender/mobile-sheet.md): A phone-width assistant sheet with a greeting, suggested questions that fill the input, and voice input beside the send button.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/sender`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Sender` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.