Ant Design X

Sender

A input component for chat.

Importimport { Sender } from "@ant-design/x";

Sourcecomponents/sender

Docs

Edit this page Changelog

Ant Design X

Sender

A input component for chat.

Importimport { Sender } from "@ant-design/x";

Sourcecomponents/sender

Docs

Edit this page Changelog

When To Use

Need to build an input box for a dialogue scenario

Examples

API

Common props ref：Common props

SenderProps

Property	Description	Type	Default	Version
allowSpeech	Whether to allow speech input	boolean \| SpeechConfig	false	-
classNames	Class name	See below	-	-
components	Custom components	Record<'input', ComponentType>	-	-
defaultValue	Default value of input	string	-	-
disabled	Whether to disable	boolean	false	-
loading	Whether it is loading	boolean	false	-
suffix	Suffix content, shows action buttons by default. Set `suffix={false}` to hide default actions.	React.ReactNode \| false \| (oriNode: React.ReactNode, info: { components: ActionsComponents; }) => React.ReactNode \| false	oriNode	-
header	Header panel	React.ReactNode \| false \| (oriNode: React.ReactNode, info: { components: ActionsComponents; }) => React.ReactNode \| false	false	-
prefix	Prefix content	React.ReactNode \| false \| (oriNode: React.ReactNode, info: { components: ActionsComponents; }) => React.ReactNode \| false	false	-
footer	Footer content	React.ReactNode \| false \| (oriNode: React.ReactNode, info: { components: ActionsComponents; }) => React.ReactNode \| false	false	-
readOnly	Whether to make the input box read-only	boolean	false	-
rootClassName	Root element class name	string	-	-
styles	Semantic DOM style	See below	-	-
submitType	Submit type	SubmitType	`enter` \| `shiftEnter`	-
value	Input value	string	-	-
onSubmit	Callback when click send button	(message: string, slotConfig?: SlotConfigType[]) => void	-	-
onChange	Callback when input value changes	(value: string, event?: React.FormEvent<`HTMLTextAreaElement`> \| React.ChangeEvent<`HTMLTextAreaElement`>, slotConfig?: SlotConfigType[]) => void	-	-
onCancel	Callback when click cancel button	() => void	-	-
onPasteFile	Callback when paste files	(firstFile: File, files: FileList) => void	-	-
autoSize	Height auto size feature, can be set to true \| false or an object: { minRows: 2, maxRows: 6 }	boolean \| { minRows?: number; maxRows?: number }	{ maxRows: 8 }	-
initialSlotConfig	Slot configuration, after configuration, the input box will become slot mode, supporting structured input. In this mode, `value` and `defaultValue` are invalid.	SlotConfigType[]	-	-

typescript

type SpeechConfig = {
  // When setting `recording`, the built-in speech input function will be disabled.
  // It is up to the developer to implement the third-party speech input function.
  recording?: boolean;
  onRecordingChange?: (recording: boolean) => void;
};

typescript

type ActionsComponents = {
  SendButton: React.ComponentType<ButtonProps>;
  ClearButton: React.ComponentType<ButtonProps>;
  LoadingButton: React.ComponentType<ButtonProps>;
  SpeechButton: React.ComponentType<ButtonProps>;
};

Sender Ref

Property	Description	Type	Default	Version
nativeElement	Outer container	`HTMLDivElement`	-	-
focus	Set focus	(option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' })	-	-
blur	Remove focus	() => void	-	-
insert	Insert text or slot(s). When using slot(s), make sure initialSlotConfig is set.	(value: string) => void \| (slotConfig: SlotConfigType[], position?: insertPosition) => void;	-	-
clear	Clear content	() => void	-	-
getValue	Get current content and structured configuration	() => { value: string; config: SlotConfigType[] }	-	-

SlotConfigType

Property	Description	Type	Default	Version
type	Node type, determines the rendering component type, required	'text' \| 'input' \| 'select' \| 'tag' \| 'custom'	-	-
key	Unique identifier, can be omitted when type is text	string	-	-
formatResult	Format final result	(value: any) => string	-	-

text node properties

Property	Description	Type	Default	Version
text	Text content	string	-	-

input node properties

Property	Description	Type	Default	Version
props.placeholder	Placeholder	string	-	-
props.defaultValue	Default value	string \| number \| readonly string[]	-	-

select node properties

Property	Description	Type	Default	Version
props.options	Options array, required	string[]	-	-
props.placeholder	Placeholder	string	-	-
props.defaultValue	Default value	string	-	-

tag node properties

Property	Description	Type	Default	Version
props.label	Tag content, required	ReactNode	-	-
props.value	Tag value	string	-	-

custom node properties

Property	Description	Type	Default	Version
props.defaultValue	Default value	any	-	-
customRender	Custom render function	(value: any, onChange: (value: any) => void, item: SlotConfigType) => React.ReactNode	-	-

Sender.Header

Property	Description	Type	Default	Version
children	Panel content	ReactNode	-	-
classNames	Class name	See below	-	-
closable	Whether the panel can be closed	boolean	true	-
forceRender	Force render, use when need ref internal elements on init	boolean	false	-
open	Whether to expand	boolean	-	-
styles	Semantic DOM style	See below	-	-
title	Title content	ReactNode	-	-
onOpenChange	Callback when the expansion state changes	(open: boolean) => void	-	-

Sender.Switch

Property	Description	Type	Default	Version
children	General content	ReactNode	-	-
checkedChildren	Content when checked	ReactNode	-	-
unCheckedChildren	Content when unchecked	ReactNode	-	-
icon	Set icon component	ReactNode	-	-
disabled	Whether disabled	boolean	false	-
loading	Loading state	boolean	-	-
value	Switch value	boolean	false	-
onChange	Callback when changed	function(checked: boolean)	-	-
rootClassName	Root element class name	string	-	-

⚠️ Notes for Slot Mode

In slot mode, the value and defaultValue properties are invalid. Please use ref and callback events to get the value and slotConfig.
In slot mode, the third parameter config of the onChange/onSubmit callback is only used to get the current structured content. Do not assign it directly back to slotConfig, otherwise the input box content will be reset. Only update slotConfig when you need to switch or reset the slot structure as a whole.
Usually, initialSlotConfig should only be set once during initialization or when the structure changes. If you need to force re-render the component, use a different key prop.

Example:

jsx

// ❌ Wrong usage (initialSlotConfig is for initialization only)
<Sender
  initialSlotConfig={config}
  onChange={(value, e, config) => {
    setConfig(config);
  }}
/>

// ✅ Correct usage
<Sender
  key={key}
  initialSlotConfig={config}
  onChange={(value, _e, config) => {
    // Only used to get structured content, use key to force re-render
    setKey('new_key');
    console.log(value, config);
  }}
/>

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
colorBgSlot	Slot background color	string	rgba(22,119,255,0.06)
colorBorderInput	Input border color	string	rgba(0,0,0,0.1)
colorBorderSlot	Slot border color	string	rgba(22,119,255,0.06)
colorBorderSlotHover	Slot border hover color	string	rgba(22,119,255,0.1)
colorTextSlot	Slot text color	string	#1677ff
colorTextSlotPlaceholder	Slot text placeholder color	string	rgba(22,119,255,0.25)
switchCheckedBg	Switch checked background colo	string	rgba(22,119,255,0.08)
switchCheckedHoverBg	Switch checked hover background color	string	rgba(22,119,255,0.1)
switchUncheckedHoverBg	Switch unchecked hover background color	string	rgba(0,0,0,0.04)

Global TokenHow to use?

When To Use

Need to build an input box for a dialogue scenario

Examples

API

Common props ref：Common props

SenderProps

Property	Description	Type	Default	Version
allowSpeech	Whether to allow speech input	boolean \| SpeechConfig	false	-
classNames	Class name	See below	-	-
components	Custom components	Record<'input', ComponentType>	-	-
defaultValue	Default value of input	string	-	-
disabled	Whether to disable	boolean	false	-
loading	Whether it is loading	boolean	false	-
suffix	Suffix content, shows action buttons by default. Set `suffix={false}` to hide default actions.	React.ReactNode \| false \| (oriNode: React.ReactNode, info: { components: ActionsComponents; }) => React.ReactNode \| false	oriNode	-
header	Header panel	React.ReactNode \| false \| (oriNode: React.ReactNode, info: { components: ActionsComponents; }) => React.ReactNode \| false	false	-
prefix	Prefix content	React.ReactNode \| false \| (oriNode: React.ReactNode, info: { components: ActionsComponents; }) => React.ReactNode \| false	false	-
footer	Footer content	React.ReactNode \| false \| (oriNode: React.ReactNode, info: { components: ActionsComponents; }) => React.ReactNode \| false	false	-
readOnly	Whether to make the input box read-only	boolean	false	-
rootClassName	Root element class name	string	-	-
styles	Semantic DOM style	See below	-	-
submitType	Submit type	SubmitType	`enter` \| `shiftEnter`	-
value	Input value	string	-	-
onSubmit	Callback when click send button	(message: string, slotConfig?: SlotConfigType[]) => void	-	-
onChange	Callback when input value changes	(value: string, event?: React.FormEvent<`HTMLTextAreaElement`> \| React.ChangeEvent<`HTMLTextAreaElement`>, slotConfig?: SlotConfigType[]) => void	-	-
onCancel	Callback when click cancel button	() => void	-	-
onPasteFile	Callback when paste files	(firstFile: File, files: FileList) => void	-	-
autoSize	Height auto size feature, can be set to true \| false or an object: { minRows: 2, maxRows: 6 }	boolean \| { minRows?: number; maxRows?: number }	{ maxRows: 8 }	-
initialSlotConfig	Slot configuration, after configuration, the input box will become slot mode, supporting structured input. In this mode, `value` and `defaultValue` are invalid.	SlotConfigType[]	-	-

typescript

type SpeechConfig = {
  // When setting `recording`, the built-in speech input function will be disabled.
  // It is up to the developer to implement the third-party speech input function.
  recording?: boolean;
  onRecordingChange?: (recording: boolean) => void;
};

typescript

type ActionsComponents = {
  SendButton: React.ComponentType<ButtonProps>;
  ClearButton: React.ComponentType<ButtonProps>;
  LoadingButton: React.ComponentType<ButtonProps>;
  SpeechButton: React.ComponentType<ButtonProps>;
};

Sender Ref

Property	Description	Type	Default	Version
nativeElement	Outer container	`HTMLDivElement`	-	-
focus	Set focus	(option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' })	-	-
blur	Remove focus	() => void	-	-
insert	Insert text or slot(s). When using slot(s), make sure initialSlotConfig is set.	(value: string) => void \| (slotConfig: SlotConfigType[], position?: insertPosition) => void;	-	-
clear	Clear content	() => void	-	-
getValue	Get current content and structured configuration	() => { value: string; config: SlotConfigType[] }	-	-

SlotConfigType

Property	Description	Type	Default	Version
type	Node type, determines the rendering component type, required	'text' \| 'input' \| 'select' \| 'tag' \| 'custom'	-	-
key	Unique identifier, can be omitted when type is text	string	-	-
formatResult	Format final result	(value: any) => string	-	-

text node properties

Property	Description	Type	Default	Version
text	Text content	string	-	-

input node properties

Property	Description	Type	Default	Version
props.placeholder	Placeholder	string	-	-
props.defaultValue	Default value	string \| number \| readonly string[]	-	-

select node properties

Property	Description	Type	Default	Version
props.options	Options array, required	string[]	-	-
props.placeholder	Placeholder	string	-	-
props.defaultValue	Default value	string	-	-

tag node properties

Property	Description	Type	Default	Version
props.label	Tag content, required	ReactNode	-	-
props.value	Tag value	string	-	-

custom node properties

Property	Description	Type	Default	Version
props.defaultValue	Default value	any	-	-
customRender	Custom render function	(value: any, onChange: (value: any) => void, item: SlotConfigType) => React.ReactNode	-	-

Sender.Header

Property	Description	Type	Default	Version
children	Panel content	ReactNode	-	-
classNames	Class name	See below	-	-
closable	Whether the panel can be closed	boolean	true	-
forceRender	Force render, use when need ref internal elements on init	boolean	false	-
open	Whether to expand	boolean	-	-
styles	Semantic DOM style	See below	-	-
title	Title content	ReactNode	-	-
onOpenChange	Callback when the expansion state changes	(open: boolean) => void	-	-

Sender.Switch

Property	Description	Type	Default	Version
children	General content	ReactNode	-	-
checkedChildren	Content when checked	ReactNode	-	-
unCheckedChildren	Content when unchecked	ReactNode	-	-
icon	Set icon component	ReactNode	-	-
disabled	Whether disabled	boolean	false	-
loading	Loading state	boolean	-	-
value	Switch value	boolean	false	-
onChange	Callback when changed	function(checked: boolean)	-	-
rootClassName	Root element class name	string	-	-

⚠️ Notes for Slot Mode

In slot mode, the value and defaultValue properties are invalid. Please use ref and callback events to get the value and slotConfig.
In slot mode, the third parameter config of the onChange/onSubmit callback is only used to get the current structured content. Do not assign it directly back to slotConfig, otherwise the input box content will be reset. Only update slotConfig when you need to switch or reset the slot structure as a whole.
Usually, initialSlotConfig should only be set once during initialization or when the structure changes. If you need to force re-render the component, use a different key prop.

Example:

jsx

// ❌ Wrong usage (initialSlotConfig is for initialization only)
<Sender
  initialSlotConfig={config}
  onChange={(value, e, config) => {
    setConfig(config);
  }}
/>

// ✅ Correct usage
<Sender
  key={key}
  initialSlotConfig={config}
  onChange={(value, _e, config) => {
    // Only used to get structured content, use key to force re-render
    setKey('new_key');
    console.log(value, config);
  }}
/>

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
colorBgSlot	Slot background color	string	rgba(22,119,255,0.06)
colorBorderInput	Input border color	string	rgba(0,0,0,0.1)
colorBorderSlot	Slot border color	string	rgba(22,119,255,0.06)
colorBorderSlotHover	Slot border hover color	string	rgba(22,119,255,0.1)
colorTextSlot	Slot text color	string	#1677ff
colorTextSlotPlaceholder	Slot text placeholder color	string	rgba(22,119,255,0.25)
switchCheckedBg	Switch checked background colo	string	rgba(22,119,255,0.08)
switchCheckedHoverBg	Switch checked hover background color	string	rgba(22,119,255,0.1)
switchUncheckedHoverBg	Switch unchecked hover background color	string	rgba(0,0,0,0.04)