@progress/kendo-react-conversational-ui/chat/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 fe=require("react"),g=require("@progress/kendo-react-common"),Z=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons"),$=require("@progress/kendo-react-intl"),ee=require("@progress/kendo-react-layout"),c=require("../utils.js"),pe=require("./ChatContext.js"),ge=require("./elements/FileBox.js"),l=require("../../messages/index.js");function be(u){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const n in u)if(n!=="default"){const d=Object.getOwnPropertyDescriptor(u,n);Object.defineProperty(r,n,d.get?d:{enumerable:!0,get:()=>u[n]})}}return r.default=u,Object.freeze(r)}const t=be(fe),te=t.forwardRef((u,r)=>{const{item:n,template:d,contentTemplate:D,onRequestSelection:b,tabIndex:ne=-1,dateFormat:z="g",selected:o,allowMessageCollapse:k,messageToolbarActions:C,messageContextMenuActions:y,fileActions:B,isSender:x}=u,{setReplyToMessage:E,messages:j,user:p,internalScrollContainerRef:h,onToolbarAction:N,onContextMenuAction:S,onFileAction:K,onDownload:m,setShowCopyNotification:I,statusTemplate:A,timestampVisibility:R="onFocus"}=pe.useChatContext(),[W,F]=t.useState(!1),[_,q]=t.useState(!1),[w,se]=t.useState(!0),[ae,H]=t.useState(!1),i=$.useLocalization(),U=$.useInternationalization(),X=t.useRef({left:0,top:0}),M=t.useCallback(()=>{n!=null&&n.text&&c.copyToClipboard(n.text),I&&(I(!0),setTimeout(()=>{I(!1)},3e3))},[n,I]),L=t.useCallback(e=>{e.stopPropagation(),se(s=>!s)},[]),le=t.useCallback(()=>{H(!1)},[]),oe=t.useCallback(e=>{(e.key==="Tab"||e.key==="Enter"||e.key===" "||e.key==="ArrowUp"||e.key==="ArrowDown")&&H(!0)},[]),V=t.useRef(null);t.useEffect(()=>{o&&V.current&&V.current.focus()},[o]);const O=t.useCallback(e=>{X.current={left:e.pageX,top:e.pageY},e.preventDefault(),q(!0),F(!0)},[]),Y=t.useCallback(()=>{q(!1),F(!1)},[]),v=t.useCallback((e,s)=>e.isDeleted?c.getDeletedMessageText(s,i):e.text?e.text:"",[i]),G=t.useCallback(e=>{var s;(s=e.item)!=null&&s.text&&(e.item.data.id==="copy"&&!n.isDeleted?M():e.item.data.id==="reply"&&E(n),S&&S(e.item.data,e,n)),q(!1),F(!1)},[n,S,E,M]),J=t.useCallback(()=>{if(n.replyToId){const e=c.getMessageById(j,n.replyToId);if(e){const s=a=>{a.preventDefault(),a.stopPropagation();const T=h==null?void 0:h.current;c.scrollToMessageById(e.id,T)};return t.createElement("div",{className:g.classNames("k-message-reference",c.isAuthor(p,e)?"k-message-reference-sender":"k-message-reference-receiver"),onClick:s},t.createElement("div",{className:"k-message-reference-content"},c.convertTextToLinkedContent(v(e,c.isAuthor(p,e)))))}}return null},[n.replyToId,j,p,v,h]),P=t.useCallback(()=>{const e=[{id:"reply",label:"Reply",svgIcon:f.undoIcon},{id:"copy",label:"Copy",svgIcon:f.copyIcon}],s=y?[...e.map(a=>y.find(me=>me.id===a.id)||a),...y.filter(a=>!e.some(T=>T.id===a.id))]:e;return t.createElement(ee.ContextMenu,{onSelect:G,onClose:Y,vertical:!0,show:W,offset:X.current},s.map(a=>a.id==="delete"&&!x?null:t.createElement(ee.MenuItem,{key:a.id,text:a.label,icon:a.icon,svgIcon:a.svgIcon,data:a})))},[y,G,Y,W,x]),Q=t.useCallback(()=>n.files&&n.files.length>1?t.createElement("div",{className:"k-chat-download-button-wrapper"},t.createElement(Z.Button,{className:"k-chat-download-button",fillMode:"flat",themeColor:"base",svgIcon:f.downloadIcon,onClick:e=>{e.stopPropagation(),m&&m(n.files,n)},"aria-label":i.toLanguageString(l.downloadAllFiles,l.messages[l.downloadAllFiles])},t.createElement("span",{className:"k-button-text"},i.toLanguageString(l.downloadAll,l.messages[l.downloadAll])))):null,[n,m,i]),ce=t.useCallback(()=>{if(n.typing)return t.createElement("div",{className:"k-chat-bubble k-bubble"},t.createElement("div",{className:"k-bubble-content"},t.createElement("div",{className:"k-typing-indicator"},t.createElement("span",null),t.createElement("span",null),t.createElement("span",null))));if(d){const e=d;return t.createElement(t.Fragment,null,t.createElement(e,{item:n}),P())}else if(n.text||n.files&&n.files.length>0)return t.createElement(t.Fragment,null,t.createElement("div",{className:g.classNames("k-chat-bubble","k-bubble",{"k-bubble-expandable":k,"k-expanded":k&&w,"k-selected":o,"k-active":_}),onClick:()=>b(o?void 0:n.selectionIndex),onContextMenu:O},t.createElement("div",{className:"k-bubble-content"},D?t.createElement(D,{item:n}):t.createElement(t.Fragment,null,(n.text||n.isDeleted||n.replyToId)&&t.createElement("span",{className:"k-chat-bubble-text"},!n.isDeleted&&J(),c.convertTextToLinkedContent(v(n,c.isAuthor(p,n)))),n.files&&n.files.length>0&&t.createElement(ge,{files:n.files,message:n,onFileAction:K,onDownload:e=>m==null?void 0:m(e,n),renderInTextarea:!1,fileActions:B}),Q())),k&&t.createElement("span",{className:"k-bubble-expandable-indicator",onClick:L,role:"button","aria-label":w?i.toLanguageString(l.collapseMessage,l.messages[l.collapseMessage]):i.toLanguageString(l.expandMessage,l.messages[l.expandMessage]),tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),L(e))}},t.createElement(g.IconWrap,{icon:w?f.chevronUpIcon:f.chevronDownIcon,size:"medium"}))),P());return null},[n,d,D,k,w,o,_,b,O,J,v,p,K,B,Q,L,i,P,m]),re=t.useCallback(()=>{let e=null;if(n.timestamp){const s=R==="onFocus"&&o;R==="hidden"||(e=t.createElement("time",{className:"k-message-time","aria-hidden":!s},U.formatDate(n.timestamp,z)))}return e},[n.timestamp,o,z,R,U]),ie=t.useCallback(()=>{let e=null;return n.status&&o&&(A?e=t.createElement(A,{item:n}):e=t.createElement("span",{className:"k-message-status"},t.createElement(g.IconWrap,{icon:f.checkCircleIcon,size:"xsmall"}),n.status)),e},[n,o,A]),ue=t.useCallback(()=>g.classNames({"k-focus":o,"k-message-removed":n.isDeleted},"k-message"),[o,n.isDeleted]),de=t.useCallback(()=>C&&C.length>0&&t.createElement("div",{className:"k-chat-message-toolbar k-toolbar k-toolbar-md k-toolbar-flat"},C.map(e=>e.id==="delete"&&!x?null:t.createElement(Z.Button,{key:e.id,fillMode:"flat",className:"k-toolbar-button",themeColor:"base",icon:e.icon,svgIcon:e.svgIcon,onClick:s=>{s.stopPropagation(),e.id==="copy"&&!n.isDeleted?M():e.id==="reply"&&E(n),N&&N(e,s,n)},onMouseDown:s=>s.preventDefault()}))),[M,x,n,C,N,E]);return t.createElement("div",{"data-message-id":n.id,className:ue(),tabIndex:ne,onMouseDown:le,onKeyDown:oe,onFocus:e=>{ae&&b(n.selectionIndex)},ref:e=>{V.current=e,typeof r=="function"?r(e):r&&(r.current=e)},onContextMenu:d?O:void 0},re(),ce(),ie(),de())});te.displayName="ChatMessage";exports.ChatMessage=te;