@progress/kendo-react-conversational-ui/components/ChatMessage.js

React Chat component allows the user to participate in chat sessions with users or chat bots. KendoReact Conversational UI components

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),p=require("@progress/kendo-react-common"),o=require("@progress/kendo-react-intl"),c=require("./base/FocusableUponSelection.js");function m(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const i in s)if(i!=="default"){const a=Object.getOwnPropertyDescriptor(s,i);Object.defineProperty(e,i,a.get?a:{enumerable:!0,get:()=>s[i]})}}return e.default=s,Object.freeze(e)}const t=m(l),n=class n extends c.FocusableUponSelection{render(){return t.createElement("div",{className:this.getClassNames(),tabIndex:this.props.tabIndex,onClick:()=>this.props.onRequestSelection(this.props.item.selectionIndex),onFocus:()=>this.props.onRequestSelection(this.props.item.selectionIndex),ref:e=>this.elementToFocus=e},this.getTimestampView(),this.getMainView(),this.getStatusView())}getMainView(){return this.props.item.typing?t.createElement("div",{className:"k-chat-bubble"},t.createElement("div",{className:"k-typing-indicator"},t.createElement("span",null),t.createElement("span",null),t.createElement("span",null))):this.props.template?t.createElement(this.props.template,{item:this.props.item}):this.props.item.text?t.createElement("div",{className:"k-chat-bubble"},this.props.item.text):null}getTimestampView(){let e=null;return this.props.item.timestamp&&(e=t.createElement("time",{className:"k-message-time","aria-hidden":!this.props.selected},o.provideIntlService(this).formatDate(this.props.item.timestamp,this.props.dateFormat))),e}getStatusView(){let e=null;return this.props.item.status&&(e=t.createElement("span",{className:"k-message-status"},this.props.item.status)),e}getClassNames(){return p.classNames({"k-only":this.props.isOnlyItemInGroup},{"k-first":this.props.isFirstItemInGroup&&!this.props.isOnlyItemInGroup},{"k-last":this.props.isLastItemInGroup&&!this.props.isOnlyItemInGroup},{"k-selected":this.props.selected},{"k-focus":this.props.selected},"k-message")}};n.defaultProps={dateFormat:"g",tabIndex:-1};let r=n;o.registerForIntl(r);exports.ChatMessage=r;