@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"),i=require("prop-types"),u=require("react"),m=require("../ViewItem.js"),d=require("./ActionGroup.js"),g=require("./AttachmentGroup.js"),I=require("./DateMarker.js"),f=require("./MessageGroup.js"),T=require("./NewMessage.js"),w=require("./ChatMessage.js"),p=require("../package-metadata.js"),c=require("../messages/index.js"),k=require("@progress/kendo-react-intl");function y(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 o=y(u),l=class l extends o.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(p.packageMetadata,{component:"Chat"}),this.licenseMessage=r.getLicenseMessage(p.packageMetadata),this.state={selectedItemIndex:null,isFirstRender:!0}}render(){this.viewItems=this.getViewItemsFromMsgs(this.props.messages),this.isDirectionRightToLeft=this.checkIsDirectionRightToLeft(this.props);const s=k.provideLocalizationService(this);return o.createElement("div",{style:{width:this.props.width,position:"relative"},onKeyDown:this.onKeyDown,className:this.getClassNames(),ref:e=>{this.chatWrapperEl=e}},o.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}},o.createElement("div",{className:"k-message-list-content"},this.renderViewItems())),o.createElement(T,{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&&o.createElement(r.WatermarkOverlay,{message:this.licenseMessage}))}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 o.createElement(I,{item:e,key:t});if(e.type==="message-group")return o.createElement(f,{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 o.createElement(g,{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 o.createElement(d,{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?m.convertMsgsToViewItems(s):[]}};l.propTypes={messages:i.arrayOf(i.object),user:i.object,messageTemplate:i.any,attachmentTemplate:i.any,width:i.oneOfType([i.string,i.number]),onMessageSend:i.func,onActionExecute:i.func,dir:i.string,messageBox:i.any},l.defaultProps={messages:[],dateFormat:"g",message:w.ChatMessage};let h=l;exports.Chat=h;