Tools

The Chat component delivers powerful message interaction features that allow users to engage with individual messages through customizable actions and interactive tools. This guide explores how to implement message-specific functionality and enhanced user interaction patterns.

Context Menu Message Actions

Right-click functionality on chat messages reveals a context menu with actionable options for enhanced user productivity. This feature streamlines message management by providing instant access to common operations without disrupting the conversation flow.

The built-in options include Reply, Copy, and Pin, while the MessageActions() configuration allows you to add custom operations tailored to your application's workflow requirements.

Razor

@(Html.Kendo().Chat()
    .Name("chat")
    .MessageActions(actions =>
    {
        actions.Add().Name("copy").Text("Copy").Icon("copy");
        actions.Add().Name("reply").Text("Reply").Icon("undo");
        actions.Add().Name("pin").Text("Pin").Icon("pin");
        actions.Add().Name("delete").Text("Delete").Icon("trash");
        actions.Add().Name("forward").Text("Share").Icon("share");
    })
    .Events(ev =>
    {
        ev.ContextMenuAction("onContextMenuAction"); // Handle the ContextMenuAction event.
    })
)

JS

<script>
    function onContextMenuAction(e) {
        console.log("Menu action selected:", e.type, "for message:", e.message.text);
        switch (e.type) {
            case "copy":
                navigator.clipboard.writeText(e.message.text);
                alert("Text copied to clipboard!");
                break;
            case "delete":
                if (confirm("Remove this message permanently?")) {
                    this.removeMessage(e.message);
                }
                break;
            ...
        }
    }
</script>

Message Toolbar Actions

Interactive toolbar buttons appear on individual messages to offer immediate access to frequently used operations. These action buttons enhance user efficiency by eliminating the need for multiple clicks or menu navigation when performing routine message tasks.

You can configure the toolbar actions using the MessageToolbarActions() configuration and implement response logic through the ToolbarAction client-side event for seamless user interactions.

Razor

@(Html.Kendo().Chat()
    .Name("chat")
    .MessageToolbarActions(actions =>
    {
        actions.Add().Name("edit").Icon("pencil");
        actions.Add().Name("delete").Icon("trash");
        actions.Add().Name("refresh").Icon("arrow-rotate-cw");
    })
    .Events(ev =>
    {
        ev.ToolbarAction("onToolbarAction"); // Handle the ToolbarAction event.
    })
)

JS

<script>
    function onToolbarAction(e) {
        switch (e.type) {
            case "edit":
                const updatedText = prompt("Modify message content:", e.message.text);
                if (updatedText) {
                    this.updateMessage(e.message, { text: updatedText });
                }
                break;
            case "delete":
                this.removeMessage(e.message);
                break;
        }
    }
</script>

Message Styling

Visual customization options enable you to tailor message presentation to align with your application's design language and user experience requirements.

Expandable Message Content

Long message content can be made collapsible to optimize screen real estate while maintaining access to full information. Users can toggle between expanded and collapsed states by clicking on messages, creating a cleaner interface for extensive conversations. Enable the AllowMessageCollapse() option to allow users to collapse the messages.

Razor

@(Html.Kendo().Chat()
    .Name("chat")
    .AllowMessageCollapse(true)
)

Message Width Configuration

Message width behavior can be controlled through the MessageWidthMode() setting to optimize readability and visual hierarchy. Choose between adaptive sizing and full-width display based on your content strategy and design preferences.

The MessageWidthMode.Standard setting provides balanced spacing and readability, while MessageWidthMode.Full maximizes horizontal space utilization for detailed content display.

Razor

@(Html.Kendo().Chat()
    .Name("chat")
    .MessageWidthMode(MessageWidthMode.Full) // or "MessageWidthMode.Standard"
)

See Also

• Handling Attachments in the Chat

• Server-Side API of the Chat HtmlHelper

• Client-Side API of the Chat