logoAnt Design X

DesignDevelopmentComponentsPlayground
  • Overview
  • Common
    • Actions
    • Bubble
    • Conversations
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Confirm
    • ThoughtChain
  • Tools
    • useXAgent
    • useXChat
    • XStream
    • XRequest
    • XProvider

Sender

A input component for chat.
Importimport { Sender } from "@ant-design/x";
Sourcecomponents/sender
Docs
Edit this pageChangelog

Resources

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

  • Need to build an input box for a dialogue scenario

Examples

API

Common props ref:Common props

SenderProps

PropertyDescriptionTypeDefaultVersion
actionsCustom actions,set as actions: false when you don't need default actionsReactNode | (oriNode, info: { components:ActionsComponents }) => ReactNode--
allowSpeechWhether to allow speech inputboolean | SpeechConfigfalse-
classNamesClass nameSee below--
componentsCustom components, The default input isInput.TextArea,Ensure that when customizing the input component, all necessary props are implemented as per Input.TextArea to avoid any incomplete functionality.Record<'input', ComponentType>--
defaultValueDefault value of inputstring--
disabledWhether to disablebooleanfalse-
loadingWhether it is loadingbooleanfalse-
headerHeader panelReactNode--
prefixPrefix contentReactNode--
footerFooter contentReactNode | (info: { components: ActionsComponents }) => ReactNode--
readOnlyWhether to make the input box read-onlybooleanfalse-
rootClassNameRoot element class namestring--
stylesSemantic DOM styleSee below--
submitTypeSubmit typeSubmitTypeenter | shiftEnter-
valueInput valuestring--
onSubmitCallback when click send button(message: string) => void--
onChangeCallback when input value changes(value: string, event?: React.FormEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLTextAreaElement> ) => void--
onCancelCallback when click cancel button() => void--
onPasteFileCallback when paste files(firstFile: File, files: FileList) => void--
autoSizeHeight auto size feature, can be set to true | false or an object { minRows: 2, maxRows: 6 }boolean | { minRows?: number; maxRows?: number }{ maxRows: 8 }-
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

PropertyDescriptionTypeDefaultVersion
nativeElementOuter containerHTMLDivElement--
focusSet focus(option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' })--
blurRemove focus() => void--

Sender.Header

PropertyDescriptionTypeDefaultVersion
childrenPanel contentReactNode--
closableWhether to closebooleantrue-
forceRenderForce render, use when need ref internal elements on initbooleanfalse-
openWhether to expandboolean--
titleTitle contentReactNode--
onOpenChangeCallback when the expansion state changes(open: boolean) => void--

Semantic DOM

Design Token

Basic

Basic usage. State management in controlled.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Submit type

Control the newline and submit mode through submitType.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Speech input

Speech input requires user permission to access the microphone.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom speech input

Customize the voice logic to achieve the voice recognition function of calling a third-party library.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom actions

Customize the behavior of the send button through the actions property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Header panel

Use header to customize the file upload example.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Reference

Use header to do the reference effect.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom footer

Use footer to customize the footer content.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Adjust style

Customize the default style through the actions property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Paste files

Use onPasteFile to get pasted files, and upload them with Attachments.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Focus

Focus with ref option.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
`Shift + Enter` to submit
"Tell more about Ant Design X"
Deep Thinking
Attachments
Upload files
Click or drag files to this area to upload
Deep thinking can understand the intent behind.
  • prefix
    Prefix
  • input
    Input
  • actions
    Action List
  • footer
    Footer
Header
Content
  • header
    Header
  • content
    Content