@progress/kendo-react-conversational-ui/chat/components/MessageGroup.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";const j=require("react"),G=require("@progress/kendo-react-common"),L=require("@progress/kendo-react-layout"),z=require("./Attachment.js"),q=require("../utils.js"),U=require("./ChatContext.js"),_=require("@progress/kendo-react-intl"),u=require("../../messages/index.js");function D(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(e,s,r.get?r:{enumerable:!0,get:()=>n[s]})}}return e.default=n,Object.freeze(e)}const a=D(j),P=n=>{const{group:e,user:s,itemTemplate:r,contentTemplate:i,attachmentTemplate:g,onRequestSelection:d,selectedItemIndex:p,isLastGroup:h,message:v,allowMessageCollapse:f,messageToolbarActions:k,messageContextMenuActions:A,fileActions:E,messageWidthMode:x="standard",showAvatar:l=!0,showUsername:C=!0}=n,{userStatusTemplate:I}=U.useChatContext(),b=_.useLocalization(),m=e.messages.length>0&&q.isAuthor(s,e.messages[0]),{avatarUrl:o,avatarAltText:M,name:N}=e.author,T=a.useMemo(()=>G.classNames("k-message-group",{"k-message-group-sender":m,"k-message-group-receiver":!m,"k-message-group-full-width":x==="full","k-no-avatar":!l||!o}),[m,x,l,o]),w=()=>{if(!l||!o)return;const c=a.createElement(L.Avatar,{type:"image"},a.createElement("img",{src:o,alt:R}));if(I){const t=e.messages[e.messages.length-1];return a.createElement("div",{className:"k-chat-user-status-wrapper"},c,a.createElement("div",{className:"k-chat-user-status"},a.createElement(I,{message:"dataItem"in t?t.dataItem:t})))}return c},y=a.useMemo(()=>{const c=e.messages.length-1;return e.messages.map((t,O)=>{const S=[a.createElement(v,{item:t,template:r,contentTemplate:i,selected:t.selectionIndex===p,onRequestSelection:d,tabIndex:O===c&&h?0:-1,key:t.id,allowMessageCollapse:f,messageToolbarActions:k,messageContextMenuActions:A,fileActions:E,isSender:q.isAuthor(s,t)})];return t.attachments&&t.attachments.length===1&&S.push(a.createElement(z,{item:t.attachments[0],template:g,selected:!1,key:`att-${t.attachments[0].content}`})),S})},[e.messages,v,r,i,p,d,h,f,k,A,E,s,g]),R=M!==void 0?M:b.toLanguageString(u.avatarAlt,u.messages[u.avatarAlt]);return a.createElement("div",{className:T},w(),a.createElement("div",{className:"k-message-group-content"},C&&a.createElement("span",{className:"k-message-author"},N),y))};module.exports=P;