MultimodalInput

A multimodal input component based on Ant Design X, supporting file upload, voice recording, and more.

Examples

Basic

Integration with Chatbot

Configuring Extra Buttons

Block Mode

Upload Configuration

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

SLOTS=['actions', "prefix", 'footer', 'header']

Types

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