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