@progress/kendo-react-conversational-ui/components/Chat.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 r=require("@progress/kendo-react-common"),o=require("prop-types"),p=require("react"),u=require("../ViewItem.js"),m=require("./ActionGroup.js"),d=require("./AttachmentGroup.js"),g=require("./DateMarker.js"),I=require("./MessageGroup.js"),f=require("./NewMessage.js"),T=require("./ChatMessage.js"),w=require("../package-metadata.js"),c=require("../messages/index.js"),y=require("@progress/kendo-react-intl");function k(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>n[e]})}}return s.default=n,Object.freeze(s)}const i=k(p),l=class l extends i.Component{constructor(s){super(s),this.viewItems=[],this.isDirectionRightToLeft=!1,this.scrollToBottomOnLoadingData=!0,this.showLicenseWatermark=!1,this.onFocus=()=>{clearTimeout(this.timeoutIdForChatLosingFocus)},this.onBlur=()=>{this.timeoutIdForChatLosingFocus=window.setTimeout(()=>{this.setState({selectedItemIndex:null})},0)},this.onSelectionRequested=e=>{this.setState({selectedItemIndex:e})},this.onKeyDown=e=>{let t=null;const a=this.state.selectedItemIndex!==null?this.state.selectedItemIndex:this.viewItems.lastSelectionIndex;e.keyCode===r.Keys.up?a===null?t=0:a>0&&(t=a-1):e.keyCode===r.Keys.down&&(a===null?t=0:a<this.viewItems.lastSelectionIndex&&(t=a+1)),t!==null&&(this.setState({selectedItemIndex:t}),e.preventDefault())},this.onMessageSend=(e,t)=>{r.dispatchEvent(this.props.onMessageSend,t,this,{message:e})},this.onActionExecute=(e,t)=>{if(r.dispatchEvent(this.props.onActionExecute,t,this,{action:e}),!t.isDefaultPrevented()){switch(e.type){case"reply":this.onMessageSend({author:this.props.user,text:e.value,timestamp:new Date},t);break;case"call":window.open("tel:"+e.value);break;case"openUrl":window.open(e.value);break}this.newMsgComp.focusInput()}},this.showLicenseWatermark=!r.validatePackage(w.packageMetadata,{component:"Chat"}),this.state={selectedItemIndex:null,isFirstRender:!0}}render(){this.viewItems=this.getViewItemsFromMsgs(this.props.messages),this.isDirectionRightToLeft=this.checkIsDirectionRightToLeft(this.props);const s=y.provideLocalizationService(this);return i.createElement("div",{style:{width:this.props.width,position:"relative"},onKeyDown:this.onKeyDown,className:this.getClassNames(),ref:e=>{this.chatWrapperEl=e}},i.createElement("div",{className:"k-message-list k-avatars",onBlur:this.onBlur,onFocus:this.onFocus,role:"log","aria-label":s.toLanguageString(c.ariaLabelMessageList,c.messages[c.ariaLabelMessageList]),"aria-live":"polite",onScroll:e=>{this.scrollToBottomOnLoadingData=e.currentTarget.scrollTop===e.currentTarget.scrollHeight-e.currentTarget.clientHeight},ref:e=>{this.viewItemsWrapperEl=e}},i.createElement("div",{className:"k-message-list-content"},this.renderViewItems())),i.createElement(f,{user:this.props.user,onMessageSend:this.onMessageSend,isDirectionRightToLeft:this.isDirectionRightToLeft,ref:e=>{this.newMsgComp=e},placeholder:this.props.placeholder,MessageBox:this.props.messageBox,toolbar:this.props.toolbar,onToolbarActionButtonClick:this.props.onToolbarActionExecute,showToolbar:this.props.showToolbar}),this.showLicenseWatermark&&i.createElement(r.WatermarkOverlay,null))}componentDidMount(){this.setState({isFirstRender:!1},()=>{this.nextTickId=window.setTimeout(()=>this.scrollViewItemsToBottom(),250)})}componentWillUnmount(){clearTimeout(this.nextTickId)}componentDidUpdate(s){s.messages.length!==this.props.messages.length&&this.scrollToBottomOnLoadingData&&this.scrollViewItemsToBottom()}getClassNames(){return r.classNames("k-chat",this.props.className,{"k-rtl":this.isDirectionRightToLeft})}checkIsDirectionRightToLeft(s){return!!(s.dir!==void 0?s.dir==="rtl":this.chatWrapperEl&&getComputedStyle(this.chatWrapperEl).direction==="rtl")}renderViewItems(){const s=this.viewItems.length-1;return this.viewItems.map((e,t)=>{if(e.type==="date-marker")return i.createElement(g,{item:e,key:t});if(e.type==="message-group")return i.createElement(I,{group:e,itemTemplate:this.props.messageTemplate,attachmentTemplate:this.props.attachmentTemplate,user:this.props.user,selectedItemIndex:this.state.selectedItemIndex,onRequestSelection:this.onSelectionRequested,isLastGroup:t===s,key:t,message:this.props.message||l.defaultProps.message});if(e.type==="attachment-group")return i.createElement(d,{group:e,itemTemplate:this.props.attachmentTemplate,onRequestSelection:this.onSelectionRequested,selected:e.selectionIndex===this.state.selectedItemIndex,isLastGroup:t===s,key:t});if(e.type==="action-group")return i.createElement(m,{group:e,onActionExecute:this.onActionExecute,onRequestSelection:this.onSelectionRequested,selected:e.selectionIndex===this.state.selectedItemIndex,isLastGroup:t===s,key:t})})}scrollViewItemsToBottom(){this.viewItemsWrapperEl&&(this.viewItemsWrapperEl.scrollTop=this.viewItemsWrapperEl.scrollHeight-this.viewItemsWrapperEl.clientHeight)}getViewItemsFromMsgs(s){return s.length>0?u.convertMsgsToViewItems(s):[]}};l.propTypes={messages:o.arrayOf(o.object),user:o.object,messageTemplate:o.any,attachmentTemplate:o.any,width:o.oneOfType([o.string,o.number]),onMessageSend:o.func,onActionExecute:o.func,dir:o.string,messageBox:o.any},l.defaultProps={messages:[],dateFormat:"g",message:T.ChatMessage};let h=l;exports.Chat=h;