@progress/kendo-react-conversational-ui/chat/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 c=require("@progress/kendo-react-common"),n=require("prop-types"),nt=require("react"),at=require("../ViewItem.js"),ot=require("./ActionGroup.js"),rt=require("./AttachmentGroup.js"),lt=require("./DateMarker.js"),it=require("./MessageGroup.js"),ct=require("./NewMessage.js"),ut=require("./Header.js"),gt=require("./elements/PinnedMessage.js"),mt=require("./Notification.js"),dt=require("./ChatContext.js"),pt=require("./ChatMessage.js"),Fe=require("../../package-metadata.js"),C=require("../../messages/index.js"),ft=require("@progress/kendo-react-intl"),Le=require("../utils/fieldMapping.js"),ht=require("../utils/scroll.js"),yt=require("../utils/messageSettings.js");function Ct(g){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const r in g)if(r!=="default"){const M=Object.getOwnPropertyDescriptor(g,r);Object.defineProperty(u,r,M.get?M:{enumerable:!0,get:()=>g[r]})}}return u.default=g,Object.freeze(u)}const e=Ct(nt),I=e.forwardRef((g,u)=>{const{messages:r=[],messageTemplate:M,messageContentTemplate:N,attachmentTemplate:x,width:Ie,height:Ne,onSendMessage:T,onSuggestionClick:D,onInputValueChange:O,onActionExecute:E,dir:f,messageBox:De,placeholder:Oe,className:j,style:je,message:P=pt.ChatMessage,authorId:l,suggestions:U,suggestionTemplate:Pe,suggestionsLayout:Ue="scroll",quickActionsLayout:V="scroll",inputValue:Ve,headerTemplate:h,noDataTemplate:y,timestampTemplate:B,statusTemplate:K,userStatusTemplate:W,allowMessageCollapse:G,messageToolbarActions:z,messageContextMenuActions:_,fileActions:k,onUnpin:Be,messageWidthMode:H,showAvatar:$,showUsername:J,timestampVisibility:Q,authorMessageSettings:X,receiverMessageSettings:Y,onToolbarAction:Z,onContextMenuAction:ee,onFileAction:te,onDownload:se,speechToTextConfig:ne,uploadConfig:ae,sendButtonConfig:Ke,messageFilesLayout:oe,textField:re,statusField:le,authorIdField:ie,authorNameField:ce,authorImageUrlField:ue,authorImageAltTextField:ge,idField:me,timestampField:de,filesField:pe,attachmentsField:fe,replyToIdField:he,isDeletedField:ye,isPinnedField:Ce,typingField:Me,suggestedActionsField:Te,...We}=g,[m,R]=e.useState(null),[A,Ge]=e.useState(!1),[ze,Se]=e.useState(!1),[ke,be]=e.useState(null),[d,xe]=e.useState(null),w=e.useRef(null),Ee=e.useRef(null),q=e.useRef(null),Re=e.useRef(null),v=e.useRef(void 0),F=e.useRef(!1),L=e.useRef(null),Ae=e.useRef(""),o=e.useMemo(()=>{if(!r||r.length===0)return[];const s={textField:re,statusField:le,authorIdField:ie,authorNameField:ce,authorImageUrlField:ue,authorImageAltTextField:ge,idField:me,timestampField:de,filesField:pe,attachmentsField:fe,replyToIdField:he,isDeletedField:ye,isPinnedField:Ce,typingField:Me,suggestedActionsField:Te};return!Object.values(s).some(a=>a!==void 0)&&Le.isStandardMessageFormat(r[0])?r.map(a=>({...a,timestamp:a.timestamp?new Date(a.timestamp):a.timestamp})):Le.mapDataArrayToMessages(r,s)},[r,re,le,ie,ce,ue,ge,me,de,pe,fe,he,ye,Ce,Me,Te]);e.useEffect(()=>{if(l===Ae.current&&L.current){xe(L.current);return}if(l&&o.length>0){const s=o.find(a=>a.author&&(a.author.id===l||a.author.id===String(l))),t=(s==null?void 0:s.author)||{id:l};L.current=t,Ae.current=l,xe(t)}},[l,o]);const p=e.useMemo(()=>o.length>0?at.convertMsgsToViewItems(o):[],[o]),_e=e.useMemo(()=>!c.validatePackage(Fe.packageMetadata,{component:"Chat"}),[]),He=c.getLicenseMessage(Fe.packageMetadata),we=e.useMemo(()=>o.find(s=>s.isPinned),[o]),qe=ft.useLocalization();ht.useChatScroll({viewItemsWrapperRef:q,isKeyboardNavigationActiveRef:F,processedMessages:o,suggestions:U});const $e=e.useCallback(()=>{clearTimeout(v.current)},[]),Je=e.useCallback(()=>{v.current=window.setTimeout(()=>{R(null)},0)},[]),b=e.useCallback(s=>{R(s)},[]),Qe=e.useCallback(s=>{let t=null;const a=m!==null?m:p.lastSelectionIndex;s.keyCode===c.Keys.up?a===null?t=0:a>0&&(t=a-1):s.keyCode===c.Keys.down?a===null?t=0:a<p.lastSelectionIndex&&(t=a+1):s.keyCode===c.Keys.home?t=0:s.keyCode===c.Keys.end&&(t=p.lastSelectionIndex),t!==null&&(R(t),F.current=!0,s.preventDefault())},[m,p]),ve=e.useCallback((s,t,a)=>{var S;if(E&&E({action:{value:s.value,title:s.title,type:s.type},syntheticEvent:t,nativeEvent:t.nativeEvent,target:t.currentTarget}),!t.isDefaultPrevented()){switch(s.type){case"reply":T&&T({message:{id:"",author:d,text:s.value,timestamp:new Date},syntheticEvent:t,nativeEvent:t.nativeEvent,target:t.currentTarget});break;case"call":window.open("tel:"+s.value);break;case"openUrl":window.open(s.value);break}(S=Re.current)==null||S.focusInput()}},[E,T,d]),Xe=e.useCallback(()=>c.classNames("k-chat",j,{"k-rtl":A}),[j,A]),Ye=e.useCallback(()=>{const s=p.length-1;return p.map((t,a)=>{var S;if(t.type==="date-marker")return e.createElement(lt,{item:t,key:t.trackBy,timestampTemplate:B});if(t.type==="message-group"){const st={allowMessageCollapse:G,messageWidthMode:H,showAvatar:$,showUsername:J,messageTemplate:M,messageContentTemplate:N,messageToolbarActions:z,messageContextMenuActions:_,fileActions:k},i=yt.resolveMessageSettings((S=t==null?void 0:t.messages)==null?void 0:S[0],l,st,X,Y);return e.createElement(it,{group:t,itemTemplate:i.messageTemplate,contentTemplate:i.messageContentTemplate,attachmentTemplate:x,user:d,selectedItemIndex:m,onRequestSelection:b,isLastGroup:a===s,key:t.messages[0].selectionIndex,message:P,allowMessageCollapse:i.allowMessageCollapse,messageToolbarActions:i.messageToolbarActions,messageContextMenuActions:i.messageContextMenuActions,fileActions:i.fileActions,messageWidthMode:i.messageWidthMode,showAvatar:i.showAvatar,showUsername:i.showUsername})}else{if(t.type==="attachment-group")return e.createElement(rt,{group:t,itemTemplate:x,onRequestSelection:b,selected:t.selectionIndex===m,isLastGroup:a===s,key:t.selectionIndex});if(t.type==="action-group")return e.createElement(ot,{group:t,onActionExecute:ve,onRequestSelection:b,selected:t.selectionIndex===m,key:t.selectionIndex,quickActionsLayout:V,dir:f})}return null})},[p,B,M,N,x,d,m,b,P,G,z,_,k,H,$,J,l,X,Y,ve,V,f]),Ze=e.useCallback(()=>h?typeof h=="function"?h():h:null,[h]),et=e.useCallback(()=>y?typeof y=="function"?y():y:null,[y]);e.useEffect(()=>{const s=f!==void 0?f==="rtl":w.current&&getComputedStyle(w.current).direction==="rtl";Ge(!!s)},[f]),e.useEffect(()=>()=>{clearTimeout(v.current)},[]);const tt=e.useMemo(()=>({replyToMessage:ke,setReplyToMessage:be,messages:o,user:d,internalScrollContainerRef:Ee,messageListScrollContainerRef:q,onToolbarAction:Z,onContextMenuAction:ee,onFileAction:te,setShowCopyNotification:Se,onDownload:se,fileActions:k,speechToTextConfig:ne,uploadConfig:ae,statusTemplate:K,userStatusTemplate:W,messageFilesLayout:oe,timestampVisibility:Q}),[ke,be,o,d,Z,ee,te,Se,se,k,ne,ae,K,W,oe,Q]);return e.createElement(dt.default.Provider,{value:tt},e.createElement("div",{style:{width:Ie,height:Ne,position:"relative",overflow:"hidden",...je},onKeyDown:Qe,className:Xe(),ref:s=>{w.current=s,Ee.current=s,typeof u=="function"?u(s):u&&(u.current=s)},...We},h!==void 0&&e.createElement(ut,null,Ze()),we&&e.createElement(gt,{message:we,onUnpin:Be,user:d}),e.createElement("div",{className:"k-message-list",onBlur:Je,onFocus:$e,role:"log","aria-label":qe.toLanguageString(C.ariaLabelMessageList,C.messages[C.ariaLabelMessageList]),"aria-live":"polite",ref:q},e.createElement("div",{className:c.classNames("k-message-list-content",{"k-message-list-content-empty":o.length===0})},o.length===0&&y!==void 0&&et(),o.length>0&&Ye())),e.createElement(ct,{onSendMessage:(s,t)=>{T&&T({message:s,syntheticEvent:t,nativeEvent:t.nativeEvent,target:t.currentTarget})},onSuggestionClick:s=>{D&&D(s)},isDirectionRightToLeft:A,ref:Re,placeholder:Oe,MessageBox:De,suggestions:U,suggestionTemplate:Pe,inputValue:Ve,onInputValueChange:s=>{O&&O(s)},onInputClick:()=>{F.current=!1},sendButtonConfig:Ke,suggestionsLayout:Ue,dir:f}),e.createElement(mt,{show:ze,text:qe.toLanguageString(C.chatCopyNotification,C.messages[C.chatCopyNotification])}),_e&&e.createElement(c.WatermarkOverlay,{message:He})))});I.displayName="Chat";I.propTypes={messages:n.arrayOf(n.object),user:n.object,messageTemplate:n.any,messageContentTemplate:n.any,attachmentTemplate:n.any,width:n.oneOfType([n.string,n.number]),style:n.object,onSendMessage:n.func,onActionExecute:n.func,dir:n.string,messageBox:n.any,noDataTemplate:n.oneOfType([n.element,n.func]),suggestionsLayout:n.oneOf(["scroll","wrap","scrollbuttons"]),quickActionsLayout:n.oneOf(["scroll","wrap","scrollbuttons"]),userStatusTemplate:n.elementType,messageFilesLayout:n.oneOf(["vertical","wrap","horizontal"]),showAvatar:n.bool,showUsername:n.bool,authorMessageSettings:n.object,receiverMessageSettings:n.object};exports.Chat=I;