Sender is installed into your project as a file you own. It takes the same props as Ant Design X's Sender, with Sender.Header and Sender.Switch attached, and forwards a ref. The send, microphone and close buttons draw their glyphs from your icon pack, which changes the default of suffix. Both are marked antuikit in the API table.
Install
npx antuikit@latest init
npx antuikit@latest add sender
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/sender, never from @ant-design/x. The file lives in your project, so the import is a path, not a package. Sender.Header and Sender.Switch come with it.
import { Sender } from "@/components/ui/sender"
Value and sending
Control the text with value and onChange, and handle the message in onSubmit, which Enter and the send button both call.
1
const [value, setValue] = useState("")
2
3
<Sender
4
value={value}
5
onChange={setValue}
6
onSubmit={(message) => {
7
send(message)
8
setValue("")
9
}}
10
/>
onChange gets the new text as its first argument, not an event, so setValue can be passed straight in.
onSubmit does not clear the input. Set the value to an empty string yourself, or call ref.current.clear() on an uncontrolled Sender.
submitType picks the key that sends: enter (Shift+Enter adds a line break) or shiftEnter (the reverse). Enter pressed while an input method is composing text never sends.
autoSize grows the input up to eight rows by default, then scrolls.
Loading and cancel
Set loading while a reply is streaming. The send button becomes a stop button that calls onCancel, and Enter stops sending until loading is off again. Pass onCancel whenever you pass loading, or the stop button does nothing.
Prefix, suffix, header and footer
Four props place your content around the input. Each takes a node, false, or a function that receives the default buttons and { components }: SendButton, LoadingButton, ClearButton and SpeechButton, already wired to the Sender.
prefix sits before the input, for an attach button.
suffix sits after it and holds the send button by default. false removes the buttons.
header sits above, usually a Sender.Header holding attachments or a quoted message.
footer sits below, for a row of Sender.Switch toggles or a hint.
With a suffix of your own, SendButton draws its default arrow instead of the icon pack's. Pass icon to SendButton, as above, to keep the two matching.
Sender.Header and Sender.Switch
Sender.Header is a collapsible panel for the header prop. Control it with open and onOpenChange. Without open the panel stays closed, and its close button only reports the next state. forceRender mounts the content while closed, for a ref you need early.
Sender.Switch is a toggle button for the footer, like “Deep search”. It takes value and onChange like a switch, and an icon and label like a button.
Slot mode and skills
slotConfig turns the input into a template with inline fields: text, inputs, selects, tags, editable spans or your own nodes. skill adds a removable chip at the start. Either one switches the Sender to slot mode.
In slot mode value and defaultValue are ignored. slotConfig and skill are read once, on mount.
To load a new template, give the Sender a new key. Do not feed the slotConfig from onChange back into the prop.
Read the content from onSubmit's arguments, or from ref.current.getValue(). Add slots at the caret with ref.current.insert().
Speech and pasted files
allowSpeech adds a microphone button that uses the browser's speech recognition and appends what it hears. Where the browser has none, or the reader has blocked the microphone, the button shows disabled. Pass { recording, onRecordingChange } to run your own recognition instead.
onPasteFile fires when the clipboard holds files and no text, like a screenshot. Hand the files to Attachments with its ref.current.upload().
Events
onChange fires on every edit, with the text first.
onSubmit fires on Enter and on the send button.
onCancel fires on the stop button while loading is on.
onKeyDown fires on every key. Return false to stop Enter from sending, like while a mention list is open.
onPaste and onPasteFile fire on paste, onFocus and onBlur on focus changes.
Styling
classNames and styles take one key per part. content is the row that holds the prefix, input and suffix, and switch reaches every Sender.Switch inside.
1
<Sender
2
classNames={{
3
root: "…",
4
content: "…",
5
prefix: "…",
6
input: "…",
7
suffix: "…",
8
footer: "…",
9
switch: "…",
10
}}
11
/>
API Reference
Sender
Sender's props. Rows marked antuikit in the Version column are added or changed by the kit.
Sender ref
What ref points at.
Sender.Header
Sender.Header's props.
Sender.Switch
Sender.Switch's props.
SlotConfigType
One entry of slotConfig. The props.* rows apply to the slot types named in each description.