New to Kendo UI for jQuery? Start a free 30-day trial

MessageBox

configuration

Configures the built-in message input box (PromptBox). Use this option to customize the default input mode, row count, and auto-grow height when messageBoxTemplate is not set.

messageBox

Object

Default: { mode: "multi", maxTextAreaHeight: 110 }

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    messageBox: {
        mode: "auto",
        maxTextAreaHeight: 200,
        fileAttachment: {
            restrictions: {
                allowedExtensions: [".jpg", ".png", ".pdf"]
            }
        }
    }
});
</script>

Defines a custom template for the end affix area of the built-in message box. The end affix is positioned after the input field and alongside the built-in action area. This option applies when messageBoxTemplate is not set.

The built-in speech-to-text and send buttons remain in the end affix. If the template omits matching ref-promptbox-speech-to-text-button or ref-promptbox-send-button elements, Chat backfills the enabled controls after the authored end-affix content inside the same end-affix container.

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    messageBox: {
        endAffixTemplate: () => '<button class="k-button k-button-flat">Custom</button>'
    }
});
</script>

messageBox.maxTextAreaHeight

Number

The maximum height of the textarea in pixels. When set, the textarea will stop expanding and show a scrollbar.

Default: 110

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    messageBox: {
        mode: "auto",
        maxTextAreaHeight: 150
    }
});
</script>

messageBox.mode

String

The input mode for the message box:

"single": Single-line text input
"multi": Multi-line textarea with fixed rows
"auto": Auto-expanding textarea that grows as the user types

Default: "multi"

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    messageBox: {
        mode: "multi",
        rows: 3
    }
});
</script>

messageBox.rows

Number

The initial number of visible rows for the built-in multiline input.

Default: 1

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    messageBox: {
        mode: "multi",
        rows: 4
    }
});
</script>

messageBox.startAffixTemplate

Function

Defines a custom template for the start affix area of the built-in message box. The start affix is positioned before the input field. This option applies when messageBoxTemplate is not set.

In the built-in PromptBox-backed Chat message box, the file attachment button belongs to the start affix. If the template does not include a matching ref-promptbox-file-select-button element, Chat backfills the enabled attachment button before the authored start-affix content inside the same start-affix container.

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    messageBox: {
        startAffixTemplate: () => '<span class="k-icon k-i-star"></span>'
    }
});
</script>

messageBox.topAffixTemplate

Function

Defines a custom template for the top affix area of the built-in message box. The top affix is rendered above the content area and is visible in multi-line mode only. This option applies when messageBoxTemplate is not set.

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    messageBox: {
        mode: "multi",
        topAffixTemplate: () => '<div class="chat-top-affix">Enter a detailed message</div>'
    }
});
</script>