File Uploads and Media

The Chat component supports built-in file upload functionality, media sharing, and speech-to-text functionality to enhance the messaging experience.

Attachments

The Chat component provides built-in file upload functionality, allowing users to attach files to their messages. By default, this option is enabled, and a file attachment button appears in the message input area. Users can select files, which are automatically attached to the current message.

To remove the attachment functionality, disable the FileAttachment() option.

Razor

@(Html.Kendo().Chat()
    .Name("chat")
    .FileAttachment(false)
)

Attachment Actions

By default, each attachment in the sent messages has a context menu with a Download action. When the message contains multiple attachments, a Download all button is displayed below the attachment list. You can configure more actions for the file attachments using the FileActions() configuration (for example, share, delete, preview, and more).

The following example shows how to define custom actions for the uploaded files in the messages

Razor

@(Html.Kendo().Chat()
    .Name("chat")
    .FileActions(actions =>
    {
        actions.Add().Name("download").Text("Download").Icon("download");
        actions.Add().Name("delete").Text("Delete").Icon("trash");
        actions.Add().Name("share").Text("Share").Icon("share");
    })
    .Events(ev =>
    {
        ev.FileMenuAction("onFileMenuAction"); // Handle the "FileMenuAction" that triggers when an action is selected.
    })
)

JavaScript

<script> 
    function onFileMenuAction(e) {
        console.log("File action:", e.type, "on file:", e.file.name);
        
        if (e.type === "download") {
            // Trigger file download.
            window.open(e.file.url, '_blank');
        } else if (e.type === "delete") {
            if (confirm("Delete " + e.file.name + "?")) {
                // Handle file deletion.
            }
        } else {
            // Handle file sharing.
        }
    }
</script>

Speech-to-Text

The Chat component includes built-in speech-to-text functionality that allows users to input messages using voice commands. This feature leverages the browser's Web Speech API to convert spoken words into text, providing an accessible and convenient way to interact with the chat interface.

Speech-to-text is particularly useful for mobile users, accessibility scenarios, or when typing is inconvenient. The component provides customizable settings to control language recognition, result accuracy, and interim feedback.

By default, the SpeechToTextButton is displayed in the message input area. To remove it, disable the SpeechToText() option.

Razor

@(Html.Kendo().Chat()
    .Name("chat")
    .SpeechToText(false)
)

See Also

• Configuring the Chat Quick Actions
• Server-Side API of the Chat HtmlHelper