Spaces:
Running
Running
| # MultimodalInput | |
| A multimodal input component based on [Ant Design X](https://x.ant.design), supporting file upload, voice recording, and more. | |
| ## Examples | |
| ### Basic | |
| <demo name="basic"></demo> | |
| ### Integration with Chatbot | |
| <demo name="with_chatbot"></demo> | |
| ### Configuring Extra Buttons | |
| <demo name="extra_button"></demo> | |
| ### Block Mode | |
| <demo name="block_mode"></demo> | |
| ### Upload Configuration | |
| <demo name="upload_config"></demo> | |
| ## API | |
| ### Props | |
| | Attribute | Type | Default Value | Description | | |
| | ------------- | -------------------------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------- | | |
| | value | `dict \| MultimodalInputValue \| None` | None | Default value to display, formatted as `{ "text":"", "files":[] }`. | | |
| | loading | `bool \| None` | None | Whether the input is in a loading state, in which case the `cancel` event can be triggered. | | |
| | mode | `inline \| block` | 'inline' | The rending mode of the input box. If `block`, the input box and the submit button will be rendered separately. | | |
| | auto_size | `bool \| { minRows?: number; maxRows?: number } \| None` | { "maxRows": 8 } | Height auto size feature, can be set to True \| False or an object { "minRows": 2, "maxRows": 6 }. | | |
| | read_only | `bool \| None` | None | Whether the input is read-only. | | |
| | submit_type | `Literal['enter', 'shiftEnter'] \| None` | 'enter' | How the input box triggers the `submit` event. | | |
| | placeholder | `str \| None` | None | Input placeholder text. | | |
| | disabled | `bool \| None` | None | Whether to disable. | | |
| | upload_config | `MultimodalInputUploadConfig \| dict \| None` | None | File upload configuration. | | |
| ### Slots | |
| ```python | |
| SLOTS=['actions', "prefix", 'footer', 'header'] | |
| ``` | |
| ### Types | |
| ```python | |
| class MultimodalInputUploadConfig(GradioModel): | |
| """ | |
| fullscreen_drop: Whether to allow fullscreen drop files to the attachments. | |
| allow_upload: Whether to allow upload files to the attachments. | |
| allow_paste_file: Whether to allow paste file to the attachments. | |
| allow_speech: Whether to allow speech input. | |
| show_count: Whether to show the count of files when the attachments panel is close. | |
| upload_button_tooltip: Tooltip of the upload button. | |
| accept: File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept). | |
| max_count: Limit the number of uploaded files. Will replace current one when maxCount is 1. | |
| directory: Support upload whole directory. | |
| disabled: Disable upload files. | |
| multiple: Whether to support selected multiple files. IE10+ supported. You can select multiple files with CTRL holding down while multiple is set to be True. | |
| overflow: Behavior when the file list overflows. | |
| title: Title of the attachments panel. | |
| image_props: Image config, same as [Image](https://ant.design/components/image) | |
| placeholder: Placeholder information when there is no file. | |
| """ | |
| fullscreen_drop: Optional[bool] = False | |
| allow_upload: Optional[bool] = True | |
| allow_paste_file: Optional[bool] = True | |
| allow_speech: Optional[bool] = False | |
| show_count: Optional[bool] = True | |
| upload_button_tooltip: Optional[str] = None | |
| accept: Optional[str] = None | |
| max_count: Optional[int] = None | |
| directory: Optional[bool] = False | |
| multiple: Optional[bool] = False | |
| disabled: Optional[bool] = False | |
| overflow: Literal['wrap', 'scrollX', 'scrollY'] | None = None | |
| title: Optional[str] = "Attachments" | |
| image_props: Optional[dict] = None | |
| placeholder: Optional[dict] = field( | |
| default_factory=lambda: { | |
| "inline": { | |
| "title": "Upload files", | |
| "description": "Click or drag files to this area to upload" | |
| }, | |
| "drop": { | |
| "title": "Drop files here", | |
| } | |
| }) | |
| class MultimodalInputValue(GradioModel): | |
| files: Optional[ListFiles] = None | |
| text: Optional[str] = None | |
| ``` | |