Sender
Sender
A input component for chat.
Importimport { Sender } from "@ant-design/x"; |
Sourcecomponents/sender |
Ant Design XImportimport { Sender } from "@ant-design/x"; |
Sourcecomponents/sender |
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| actions | Custom actions,set as actions: false when you don't need default actions | ReactNode | (oriNode, info: { components:ActionsComponents }) => ReactNode | - | - |
| 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 | - |
| header | Header panel | ReactNode | - | - |
| prefix | Prefix content | ReactNode | - | - |
| footer | Footer content | ReactNode | (info: { components: ActionsComponents }) => ReactNode | - | - |
| 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) => void | - | - |
| onChange | Callback when input value changes | (value: string, event?: React.FormEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLTextAreaElement> ) => 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 } | - |
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;};
type ActionsComponents = {SendButton: React.ComponentType<ButtonProps>;ClearButton: React.ComponentType<ButtonProps>;LoadingButton: React.ComponentType<ButtonProps>;SpeechButton: React.ComponentType<ButtonProps>;};
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| nativeElement | Outer container | HTMLDivElement | - | - |
| focus | Set focus | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | - | - |
| blur | Remove focus | () => void | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| children | Panel content | ReactNode | - | - |
| closable | Whether to close | boolean | true | - |
| forceRender | Force render, use when need ref internal elements on init | boolean | false | - |
| open | Whether to expand | boolean | - | - |
| title | Title content | ReactNode | - | - |
| onOpenChange | Callback when the expansion state changes | (open: boolean) => void | - | - |
Basic usage. State management in controlled.
Control the newline and submit mode through submitType.
Speech input requires user permission to access the microphone.
Customize the voice logic to achieve the voice recognition function of calling a third-party library.
Customize the behavior of the send button through the actions property.
Use header to customize the file upload example.
Use header to do the reference effect.
Use footer to customize the footer content.
Customize the default style through the actions property.
Use onPasteFile to get pasted files, and upload them with Attachments.
Focus with ref option.
