snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/chat/components/web/ChatMessageGroup.tsx

@@ -0,0 +1,97 @@
+import clsx from 'clsx';
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import Avatar from '../../../base/avatar/components/Avatar';
+import { IMessage } from '../../types';
+
+import ChatMessage from './ChatMessage';
+
+interface IProps {
+
+    /**
+     * Additional CSS classes to apply to the root element.
+     */
+    className: string;
+
+    editingMessage?: IMessage;
+
+    /**
+     * The messages to display as a group.
+     */
+    messages: Array<IMessage>;
+
+    onCancelEdit?: () => void;
+
+    /**
+     * Callback invoked when the user wants to edit a message.
+     */
+    onEditMessage?: (message: IMessage) => void;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        messageGroup: {
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: '100%',
+
+            '&.remote, &.file': {
+                maxWidth: 'calc(100% - 40px)' // 100% - avatar and margin
+            }
+        },
+
+        groupContainer: {
+            display: 'flex',
+
+            '&.local': {
+                justifyContent: 'flex-end',
+
+                '& .avatar': {
+                    display: 'none'
+                }
+            }
+        },
+
+        avatar: {
+            margin: `${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(3)} 0`,
+            position: 'sticky',
+            flexShrink: 0,
+            top: 0
+        }
+    };
+});
+
+
+const ChatMessageGroup = ({ className = '', editingMessage, messages, onCancelEdit, onEditMessage }: IProps) => {
+    const { classes } = useStyles();
+    const messagesLength = messages.length;
+
+    if (!messagesLength) {
+        return null;
+    }
+
+    return (
+        <div className = { clsx(classes.groupContainer, className) }>
+            <Avatar
+                className = { clsx(classes.avatar, 'avatar') }
+                participantId = { messages[0].participantId }
+                size = { 32 } />
+            <div className = { `${classes.messageGroup} chat-message-group ${className}` }>
+                {messages.map((message, i) => (
+                    <ChatMessage
+                        className = { className }
+                        isEditing = { editingMessage?.messageId === message.messageId }
+                        key = { i }
+                        message = { message }
+                        onCancelEdit = { onCancelEdit }
+                        onEditMessage = { onEditMessage }
+                        showDisplayName = { i === 0 }
+                        showTimestamp = { i === messages.length - 1 } />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default ChatMessageGroup;