• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Conversational UI / API / ChatProps / 

ChatProps

NameTypeDefaultDescription

attachmentTemplate?

any

A React functional or class component which is used as an attachment template (see example). The corresponding attachment is passed to the component as a property by the name item.

className?

string

Sets a class of the Chat DOM element.

dir?

string

Sets the direction of the Chat component.

message?

React.ComponentType<ChatMessageProps>

Represents the ChatMessage component.

messageBox?

React.ComponentType<ChatMessageBoxProps>

Enables the customization or the override of the default message box item in the Conversational UI (see example).

messages

Message[]

Sets the messages of the Chat.

messageTemplate?

React.ComponentType<ChatMessageTemplateProps>

A React functional or class component which is used as a message template. The corresponding message is passed to the component as a property by the name item.

onActionExecute?

(event: ChatActionExecuteEvent) => void

Fires when the user clicks a quick action button. The Chat internally handles the reply, openUrl, and call known actions. Emits the ExecuteActionEvent. The event is preventable. If preventDefault is called, the built-in action will be suppressed.

onMessageSend?

(event: ChatMessageSendEvent) => void

Fires when the user types a message and clicks the Send button or presses Enter. Emits the MessageSendEvent.

The Chat is not automatically updated with the new message.

onToolbarActionExecute?

(event: ChatToolbarActionExecuteEvent) => void

Fires when the user clicks the button to show or hide the toolbar.

placeholder?

string

The text which is visible inside the new message input when the message input is empty.

showToolbar?

any

Determines if the toolbar will be rendered.

toolbar?

any

Renders a toolbar inside the Chat.

user

User

Sets the User instance for the local user. The User ID identifies messages that are authored by the local user.

width?

string | number

Sets the width of the Chat.

In this article

Not finding the help you need?

Contact Support