@messenger-box/tailwind-ui-inbox 10.0.3-alpha.108 → 10.0.3-alpha.110

package/src/components/AIAgent/AIAgent.tsx

@@ -6,7 +6,7 @@ import { format, isToday, isYesterday, formatDistanceToNow } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { ModernMessageGroupComponent } from '../InboxMessage/message-widgets/ModernMessageGroup';
 import { useUploadFiles } from '@messenger-box/platform-client';
-import { IFileInfo, PostTypeEnum, ISandboxError } from 'common';
+import { IFileInfo, PostTypeEnum, ISandboxError, AiAgentMessageRole } from 'common';
 import { useSelector, shallowEqual } from 'react-redux';
 import { Store, userSelector } from '@adminide-stack/user-auth0-client';
 import { IUserState } from '@adminide-stack/core';
@@ -18,10 +18,8 @@ import {
     useMessagesQuery,
     OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
     useCreateChannelWorkflowJobMutation,
-    useGenerateAiCodeMutation,
     useOnChatMessageAddedSubscription,
     useSandboxErrorSubscription,
-    useRecreateSandboxMutation,
 } from 'common/graphql';
 import { config } from '../../config';
 import { orderBy, uniqBy } from 'lodash-es';
@@ -30,7 +28,7 @@ import { RoomType } from 'common';
 import { SubscriptionHandler } from '../InboxMessage/SubscriptionHandler';
 import { usePersistentModelConfig } from '../../hooks/usePersistentModelConfig';
 
-const { MESSAGES_PER_PAGE } = config;
+// const { MESSAGES_PER_PAGE } = config;
 
 interface AIAgentProps {
     channelId?: string;
@@ -74,12 +72,12 @@ export const AIAgent: React.FC<AIAgentProps> = ({
     const { id: pathChannelId } = useParams();
     const navigate = useNavigate();
     const { modelConfig, updateModelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
+    const [postId, setPostId] = useState<string | null>(null);
     // const [isLoading, setIsLoading] = useState(false);
     const [errorData, setError] = useState<string | null>(null);
     // Get channelId from props or path params
     const actualChannelId = channelId || pathChannelId;
-    // const [generateAiCode] = useGenerateAiCodeMutation();
-    const [recreateSandbox] = useRecreateSandboxMutation();
+
     const { data: chatMessageAddedData } = useOnChatMessageAddedSubscription({
         variables: { channelId: actualChannelId?.toString() || '' },
         skip: !actualChannelId,
@@ -94,11 +92,12 @@ export const AIAgent: React.FC<AIAgentProps> = ({
     // Direct message query from InboxWithAiLoader.tsx
     const messagesQuery = useMessagesQuery({
         variables: {
-            props: {
-                projectId: actualChannelId?.toString(),
-            },
+            // props: {
+            //     projectId: actualChannelId?.toString(),
+            // },
+            channelId: actualChannelId?.toString(),
             parentId: null,
-            limit: MESSAGES_PER_PAGE,
+            limit: 1,
         },
         skip: !actualChannelId,
         fetchPolicy: 'cache-and-network',
@@ -133,14 +132,14 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         fetchMore: fetchMoreMessages,
         subscribeToMore,
     } = messagesQuery;
+    console.log('messagesData', JSON.stringify(messagesData, null, 2));
 
     useEffect(() => {
         if (actualChannelId) {
             refetchMessages({
-                limit: MESSAGES_PER_PAGE,
-                props: {
-                    projectId: actualChannelId?.toString(),
-                },
+                channelId: actualChannelId?.toString(),
+                parentId: null,
+                limit: 1,
             });
         }
     }, [actualChannelId, refetchMessages]);
@@ -163,12 +162,13 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         }
     }, [chatMessageAddedData?.chatMessageAdded]);
 
-    // useEffect(() => {
-    //     if (messagesData?.messages?.data?.length == 1) {
-    //         handleGenerateAiCode(messagesData.messages.data[0].id);
-    //     }
-    //     // console.log('messagesData?.messages?.data',JSON.stringify(messagesData?.messages?.data,null,2))
-    // }, [messagesData?.messages?.data]);
+    useEffect(() => {
+        if (messagesData?.messages?.data?.length == 1) {
+            setPostId(messagesData.messages.data[0]?.id);
+            ///handleGenerateAiCode(messagesData.messages.data[0].id);
+        }
+        // console.log('messagesData?.messages?.data',JSON.stringify(messagesData?.messages?.data,null,2))
+    }, [messagesData?.messages?.data]);
 
     // Handle sandbox error subscription updates
     useEffect(() => {
@@ -181,7 +181,10 @@ export const AIAgent: React.FC<AIAgentProps> = ({
 
     const regularMessages = useMemo(() => {
         if (!messagesData?.messages?.data) return [];
-        return orderBy(uniqBy(messagesData.messages.data || [], 'id'), ['createdAt'], ['asc']);
+        const mainMessages = messagesData.messages.data || [];
+        const replyMessages = messagesData.messages.data[0]?.replies?.data || [];
+        const allMessages = [...mainMessages, ...replyMessages];
+        return orderBy(uniqBy(allMessages, 'id'), ['createdAt'], ['asc']);
     }, [messagesData?.messages?.data]);
 
     // Send regular messages to AI agent machine for context
@@ -280,198 +283,6 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         }, delay);
     }, []);
 
-    const recreateSandboxForFragment = useCallback(
-        async (messageId: string) => {
-            if (!actualChannelId) {
-                console.error('No project ID available for sandbox recreation');
-                return;
-            }
-
-            try {
-                setIsLoading(true);
-                setError(null);
-
-                const response = await recreateSandbox({
-                    variables: {
-                        projectId: actualChannelId,
-                        messageId,
-                    },
-                });
-
-                if (response.data?.recreateSandbox?.success) {
-                    console.log('Sandbox recreation initiated successfully');
-                    // The subscription will handle updating the UI with the new sandbox URL
-                } else {
-                    const errorMsg = response.data?.recreateSandbox?.message || 'Failed to recreate sandbox';
-                    throw new Error(errorMsg);
-                }
-            } catch (err) {
-                console.error('Error recreating sandbox:', err);
-                setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
-                setIsLoading(false);
-            }
-        },
-        [recreateSandbox, actualChannelId],
-    );
-
-    // Updated handleSend function from InboxWithAi.tsx
-    // const handleSend = useCallback(
-    //     async (message: string, files: any[] = []) => {
-    //         // Allow sending if there's either a message or files
-    //         if ((!message || !message.trim()) && (!files || files.length === 0)) return;
-
-    //         const validated = getValidatedConfig();
-    //         if (!validated && !hasApiKey) {
-    //             // No API key/config; do nothing (AiLandingInput would prompt config UI)
-    //             return;
-    //         }
-
-    //         // Start the AI thinking loader immediately on send
-    //         if (successThinkingTimeoutRef.current) {
-    //             clearTimeout(successThinkingTimeoutRef.current);
-    //             successThinkingTimeoutRef.current = null;
-    //         }
-    //         setIsSuccessThinking(true);
-    //         setIsLoading(true);
-    //         // Safety auto-stop in case no event arrives
-    //         successThinkingTimeoutRef.current = setTimeout(() => {
-    //             setIsSuccessThinking(false);
-    //             successThinkingTimeoutRef.current = null;
-    //         }, 15000);
-
-    //         // If we already have a channel, send message (with optional file upload) similar to Inbox
-    //         if (actualChannelId) {
-    //             try {
-    //                 const postId = objectId();
-    //                 const channelId = objectId();
-    //                 const currentDate = new Date();
-
-    //                 const createOptimisticMessage = (uploadedFiles?: any[]) => ({
-    //                     __typename: 'Post' as const,
-    //                     id: postId,
-    //                     message,
-    //                     createdAt: currentDate.toISOString(),
-    //                     updatedAt: currentDate.toISOString(),
-    //                     author: {
-    //                         __typename: 'UserAccount' as const,
-    //                         id: auth?.id,
-    //                         givenName: auth?.profile?.given_name || '',
-    //                         familyName: auth?.profile?.family_name || '',
-    //                         email: auth?.profile?.email || '',
-    //                         username: auth?.profile?.nickname || '',
-    //                         fullName: auth?.profile?.name || '',
-    //                         picture: auth?.profile?.picture || '',
-    //                         alias: [auth?.authUserId ?? ''],
-    //                         tokens: [],
-    //                     },
-    //                     isDelivered: false,
-    //                     isRead: false,
-    //                     type: 'TEXT' as PostTypeEnum,
-    //                     parentId: null,
-    //                     fromServer: false,
-    //                     channel: {
-    //                         __typename: 'Channel' as const,
-    //                         id: actualChannelId,
-    //                     },
-    //                     propsConfiguration: {
-    //                         __typename: 'MachineConfiguration' as const,
-    //                         id: null,
-    //                         resource: '' as any,
-    //                         contents: null,
-    //                         keys: null,
-    //                         target: null,
-    //                         overrides: null,
-    //                     },
-    //                     props: {},
-    //                     files: {
-    //                         __typename: 'FilesInfo' as const,
-    //                         data: uploadedFiles || [],
-    //                         totalCount: uploadedFiles?.length || 0,
-    //                     },
-    //                     replies: {
-    //                         __typename: 'Messages' as const,
-    //                         data: [],
-    //                         totalCount: 0,
-    //                     },
-    //                 });
-
-    //                 const cacheMessagesQuery = {
-    //                     query: MessagesDocument,
-    //                     variables: {
-    //                         // Match variables used in useMessagesQuery above
-    //                         props: { projectId: actualChannelId.toString() },
-    //                         parentId: null,
-    //                         limit: MESSAGES_PER_PAGE,
-    //                     },
-    //                 } as const;
-
-    //                 const extraProps = {
-    //                     projectId: actualChannelId,
-    //                     template: modelConfig?.template || 'vite-react',
-    //                     role: 'USER',
-    //                     sendNotificationWithProjectId: true,
-    //                 } as any;
-
-    //                 if (files?.length > 0) {
-    //                     const uploadResponse = await startUpload({
-    //                         file: files,
-    //                         saveUploadedFile: { variables: { postId } },
-    //                         createUploadLink: { variables: { postId } },
-    //                     });
-
-    //                     const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-    //                     const fileIds = (uploadedFiles || []).map((f: any) => f.id);
-
-    //                     await sendMsg({
-    //                         variables: {
-    //                             postId,
-    //                             channelId: actualChannelId,
-    //                             content: message,
-    //                             files: fileIds,
-    //                             extraProps,
-    //                         },
-    //                         optimisticResponse: {
-    //                             __typename: 'Mutation',
-    //                             sendMessage: createOptimisticMessage(uploadedFiles),
-    //                         },
-    //                         update: (cache, { data: mutationData }) => {
-    //                             if (!mutationData?.sendMessage) return;
-    //                             // if (mutationData?.sendMessage?.id) {
-    //                             //     handleGenerateAiCode(mutationData.sendMessage.id);
-    //                             // }
-    //                         },
-    //                     });
-    //                 } else {
-    //                     await sendMsg({
-    //                         variables: { channelId: actualChannelId, content: message, extraProps },
-    //                         optimisticResponse: {
-    //                             __typename: 'Mutation',
-    //                             sendMessage: createOptimisticMessage(),
-    //                         },
-    //                         update: (cache, { data: mutationData }) => {
-    //                             if (!mutationData?.sendMessage) return;
-    //                             console.log('mutationData', JSON.stringify(mutationData, null, 2));
-    //                             // if (mutationData?.sendMessage?.id) {
-    //                             //     handleGenerateAiCode(mutationData.sendMessage.id);
-    //                             // }
-    //                         },
-    //                     });
-    //                 }
-
-    //                 // Scroll to bottom after send
-    //                 scrollToBottom('smooth', 0);
-    //             } catch (error) {
-    //                 console.error('Error sending message from AIAgent:', error);
-    //                 setIsLoading(false);
-    //             }
-
-    //             return;
-    //         }
-    //         // If no channelId, we skip sending here.
-    //     },
-    //     [actualChannelId, auth, startUpload, sendMsg, scrollToBottom, getValidatedConfig, hasApiKey, modelConfig],
-    // );
-
     const handleSend = useCallback(
         async (message: string, files: any[] = []) => {
             // Allow sending if there's either a message or files
@@ -497,10 +308,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
             }, 15000);
             // If no channelId, mirror AiLandingInput: create channel+project, seed first post, then navigate
             try {
-                const projectId = actualChannelId;
-                const postId = objectId();
-                const channelId = objectId();
-
+                // const postId = objectId();
                 // Do not include extensionId inside modelConfig when sending additionalProperties
                 const { extensionId: _omitExtensionId, ...modelConfigWithoutExtensionId } =
                     (modelConfig as any) || ({} as any);
@@ -508,24 +316,22 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                 await createChannelWorkflowJob({
                     variables: {
                         createChannelInput: {
-                            channelId,
+                            channelId: actualChannelId,
                             title: 'AI Assistant',
                             description: 'AI Assistant',
                             displayName: 'AI Assistant',
                             topic: 'AI Assistant',
-                            projectId: projectId,
+                            // projectId: projectId,
                             type: RoomType.Aiassistant,
                             postData: {
-                                postId: postId,
+                                postId: postId || undefined,
                                 type: PostTypeEnum.Aiassistant,
                                 content: message,
                                 props: {
-                                    generateAiCode: true,
                                     template: modelConfig?.template || 'vite-react',
-                                    projectId: projectId,
-                                    role: 'USER',
+                                    //projectId: projectId,
+                                    role: AiAgentMessageRole.User,
                                     fragment: {},
-                                    sendNotificationWithProjectId: true,
                                 },
                             },
                             additionalProperties: {
@@ -566,6 +372,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         },
         [
             actualChannelId,
+            postId,
             auth,
             startUpload,
             sendMsg,
@@ -867,7 +674,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                         <div key={msg.id || index} className="mb-4">
                                             {/* Restore to this point button */}
                                             <div className="flex items-center justify-end mb-2">
-                                                <button className="text-blue-600 text-sm underline hover:text-blue-800 flex items-center">
+                                                {/* <button className="text-blue-600 text-sm underline hover:text-blue-800 flex items-center">
                                                     <svg
                                                         className="w-4 h-4 mr-1"
                                                         fill="none"
@@ -882,7 +689,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                                         />
                                                     </svg>
                                                     Restore to this point
-                                                </button>
+                                                </button> */}
                                             </div>
 
                                             {/* Message using same container as Chat tab */}
@@ -913,7 +720,8 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                                             tokens: [],
                                                         },
                                                         createdAt: msg.createdAt,
-                                                        type: 'Simple' as any,
+                                                        //type: 'Simple' as any,
+                                                        type: PostTypeEnum.Aiassistant,
                                                         isDelivered: false,
                                                         isRead: false,
                                                         parentId: null,
@@ -932,6 +740,8 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                                 onMessageClick={(msg) => setSelectedPost(msg)}
                                                 isDesktopView={isDesktopView}
                                                 isSmallScreen={isSmallScreen}
+                                                showAuthorName={true}
+                                                showAvatar={true}
                                             />
                                         </div>
                                     );
@@ -1057,7 +867,8 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                                                           tokens: [],
                                                                       },
                                                             createdAt: msg.createdAt,
-                                                            type: 'Simple' as any,
+                                                            //type: 'Simple' as any,
+                                                            type: PostTypeEnum.Aiassistant,
                                                             isDelivered: false,
                                                             isRead: false,
                                                             parentId: null,
@@ -1079,7 +890,6 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                                     sandboxErrors={sandboxErrors}
                                                     currentFiles={currentFiles}
                                                     onFixError={fixError}
-                                                    onRecreateSandbox={recreateSandboxForFragment}
                                                 />
                                             )}
                                         </div>

package/src/components/InboxMessage/message-widgets/ModernMessageGroup.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { format, differenceInMinutes } from 'date-fns';
-import { IAuthUser, IPost, ISandboxError } from 'common';
+import { AiAgentMessageRole, IAuthUser, IPost, ISandboxError, PostTypeEnum } from 'common';
 import { FilesList } from '../../inbox';
 import { ErrorFixCard } from './ErrorFixCard';
 import ReactMarkdown from 'react-markdown';
@@ -400,6 +400,8 @@ const useInjectStyles = () => {
 };
 
 interface ModernMessageGroupProps {
+    showAuthorName?: boolean;
+    showAvatar?: boolean;
     messages: IPost[];
     currentUser: IAuthUser;
     onOpen: (element?: any) => void;
@@ -413,6 +415,8 @@ interface ModernMessageGroupProps {
 }
 
 interface MessageGroupProps {
+    showAuthorName?: boolean;
+    showAvatar?: boolean;
     author: any;
     messages: IPost[];
     currentUser: IAuthUser;
@@ -913,6 +917,8 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
     author,
     messages,
     currentUser,
+    showAuthorName = false,
+    showAvatar = false,
     onOpen,
     onMessageClick,
     isDesktopView = false,
@@ -921,7 +927,16 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
     // Inject CSS styles for HTML content
     useInjectStyles();
 
-    const isOwnMessage = author?.id === currentUser?.id;
+    //const isOwnMessage = author?.id === currentUser?.id;
+    //const isOwnMessage = messages.some((message: any) => (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.User);
+    const isOwnMessage =
+        messages.some(
+            (message: any) => (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.User,
+        ) ||
+        (Array.isArray(author?.alias) &&
+            typeof currentUser?.authUserId === 'string' &&
+            author.alias.some((alias: string) => alias?.toLowerCase() === currentUser.authUserId.toLowerCase()));
+
     const authorName =
         author?.givenName && author?.familyName
             ? `${author.givenName} ${author.familyName}`
@@ -938,6 +953,9 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
         author?.username?.toLowerCase().includes('ai') ||
         author?.username?.toLowerCase().includes('assistant') ||
         author?.username?.toLowerCase().includes('system');
+    // const isSystemMessage = messages.some(
+    //     (message: any) => (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.Assistant,
+    // );
 
     // For user messages, don't show group header, just individual messages with avatars
     if (isOwnMessage) {
@@ -957,6 +975,8 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
                         isLastInGroup={index === messages.length - 1}
                         onMessageClick={onMessageClick}
                         formatTime={formatTime}
+                        showAuthorName={showAuthorName}
+                        showAvatar={showAvatar}
                     />
                 ))}
             </div>
@@ -976,7 +996,7 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
                 }`}
             >
                 {/* Enhanced Avatar - Only show for non-system messages */}
-                {!isSystemMessage && (
+                {/* {!isSystemMessage && (
                     <div className="flex-shrink-0 mt-1">
                         <div className="relative rounded-lg overflow-hidden">
                             <img
@@ -992,15 +1012,15 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
                             />
                         </div>
                     </div>
-                )}
+                )} */}
 
                 <div className="flex-1 min-w-0 overflow-hidden">
                     {/* Enhanced author header - Only show for non-system messages */}
-                    {!isSystemMessage && (
+                    {/* {!isSystemMessage && (
                         <div className="flex items-center space-x-3 mb-2">
                             <span className="font-semibold truncate text-gray-900">{authorName}</span>
                         </div>
-                    )}
+                    )} */}
 
                     {/* Enhanced Messages with rich formatting */}
                     <div className="space-y-1">
@@ -1024,6 +1044,8 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
 };
 
 interface ModernMessageBubbleProps {
+    showAuthorName?: boolean;
+    showAvatar?: boolean;
     message: IPost;
     isOwnMessage: boolean;
     isSystemMessage: boolean;
@@ -1034,6 +1056,8 @@ interface ModernMessageBubbleProps {
 }
 
 const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
+    showAuthorName = false,
+    showAvatar = false,
     message,
     isOwnMessage,
     isSystemMessage,
@@ -1046,8 +1070,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
         onMessageClick?.(message);
     };
 
-    const isAssistantRole = (message as any)?.propsConfiguration?.contents?.role === 'ASSISTANT';
-
+    const isAssistantRole = (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.Assistant;
     // For user messages, create a right-aligned layout with avatar and name
     if (isOwnMessage) {
         const authorName =
@@ -1065,7 +1088,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                     {/* Message content and timestamp on the left */}
                     {/* <div className="flex flex-col items-end max-w-xs lg:max-w-md"> */}
                     <div className="flex flex-col items-end ">
-                        {!isAssistantRole && (
+                        {showAuthorName && (
                             <div className="flex items-end space-x-2 mb-0.5">
                                 <span className="text-sm font-semibold text-gray-900">{authorName}</span>
                             </div>
@@ -1123,7 +1146,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                     </div>
 
                     {/* User avatar on the right */}
-                    {!isAssistantRole && (
+                    {showAvatar && (
                         <div className="flex-shrink-0 mt-0.5">
                             <img
                                 className={`w-8 h-8 sm:w-10 sm:h-10 rounded-lg ${
@@ -1131,7 +1154,8 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                                 } transition-opacity object-cover`}
                                 src={message.author?.picture || '/default-avatar.svg'}
                                 alt={authorName}
-                                onClick={isAssistantRole ? undefined : handleClick}
+                                //onClick={isAssistantRole ? undefined : handleClick}
+                                onClick={isAssistantRole ? handleClick : undefined}
                                 onError={(e) => {
                                     e.currentTarget.src = '/default-avatar.svg';
                                 }}
@@ -1147,9 +1171,10 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
     return (
         <div
             className={`group/message transition-all duration-200 hover:bg-gray-50 rounded-lg px-3 py-1 -mx-3 ${
-                isSystemMessage || isAssistantRole ? '' : 'cursor-pointer'
+                isSystemMessage || isAssistantRole ? 'cursor-pointer' : ''
             }`}
-            onClick={isSystemMessage || isAssistantRole ? undefined : handleClick}
+            // onClick={isSystemMessage || isAssistantRole ? undefined : handleClick}
+            onClick={isSystemMessage || isAssistantRole ? handleClick : undefined}
         >
             <div className="flex items-start justify-between gap-3">
                 <div className="flex-1 min-w-0">
@@ -1200,7 +1225,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                 </div>
 
                 {/* Action buttons on hover - Only show for non-system messages */}
-                {!isSystemMessage && (
+                {/* {!isSystemMessage && (
                     <div className="flex-shrink-0 mt-1">
                         <div className="opacity-0 group-hover/message:opacity-100 transition-opacity duration-200 flex space-x-1">
                             <button className="p-1 hover:bg-gray-200 rounded transition-colors">
@@ -1235,7 +1260,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                             </button>
                         </div>
                     </div>
-                )}
+                )} */}
             </div>
         </div>
     );
@@ -1244,6 +1269,8 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
 export const ModernMessageGroupComponent: React.FC<ModernMessageGroupProps> = ({
     messages,
     currentUser,
+    showAuthorName = false,
+    showAvatar = false,
     onOpen,
     onMessageClick,
     isDesktopView = false,
@@ -1251,7 +1278,6 @@ export const ModernMessageGroupComponent: React.FC<ModernMessageGroupProps> = ({
     sandboxErrors = [],
     currentFiles = {},
     onFixError,
-    onRecreateSandbox,
 }) => {
     // Inject CSS styles for HTML content
     useInjectStyles();
@@ -1276,6 +1302,8 @@ export const ModernMessageGroupComponent: React.FC<ModernMessageGroupProps> = ({
                         onMessageClick={onMessageClick}
                         isDesktopView={isDesktopView}
                         isSmallScreen={isSmallScreen}
+                        showAuthorName={showAuthorName}
+                        showAvatar={showAvatar}
                     />
                 );
             })}