Sender
A input component for chat.
Import |
Sourcecomponents/sender |
Ant Design XCommon props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| actions | Custom actions | ReactNode | (oriNode, info: { components }) => 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 | - | - |
| 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 | - | - |
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;};
| 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.
Customize the default style through the actions property.
Use onPasteFile to get pasted files, and upload them with Attachments.
Focus with ref option.
