@messenger-box/tailwind-ui-inbox 10.0.3-alpha.71 → 10.0.3-alpha.72

package/src/components/AIAgent/AIAgent.tsx

@@ -0,0 +1,1351 @@
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import { useActor, useMachine } from '@xstate/react';
+import { aiAgentMachine } from '../../machines/aiAgentMachine';
+import { Message } from '../../machines/types';
+import { InputComponent } from '../InboxMessage/InputComponent';
+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 } from 'common';
+import { useSelector, shallowEqual } from 'react-redux';
+import { Store, userSelector } from '@adminide-stack/user-auth0-client';
+import { IUserState } from '@adminide-stack/core';
+import { objectId } from '@messenger-box/core';
+import { useApolloClient } from '@apollo/client';
+import {
+    useSendMessagesMutation,
+    MessagesDocument,
+    useMessagesQuery,
+    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+} from 'common/graphql';
+import { config } from '../../config';
+import { orderBy, uniqBy } from 'lodash-es';
+import { useParams } from '@remix-run/react';
+import { RoomType } from 'common';
+import { SubscriptionHandler } from '../InboxMessage/SubscriptionHandler';
+
+const { MESSAGES_PER_PAGE } = config;
+
+interface AIAgentProps {
+    channelId?: string;
+    onSendMessage?: (message: string, files?: File[]) => Promise<void>;
+    placeholder?: string;
+    className?: string;
+    currentUser?: any;
+    channelName?: string;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+}
+
+export const AIAgent: React.FC<AIAgentProps> = ({
+    channelId,
+    onSendMessage,
+    placeholder = 'Ask me anything...',
+    className = '',
+    currentUser,
+    isDesktopView = false,
+    isSmallScreen = false,
+}) => {
+    const [state, send] = useMachine(aiAgentMachine);
+    const apolloClient = useApolloClient();
+    const { startUpload } = useUploadFiles();
+    const [sendMsg] = useSendMessagesMutation();
+    const auth: any = useSelector<Store.Auth, IUserState>(userSelector, shallowEqual);
+    const { id: pathChannelId } = useParams();
+
+    // Get channelId from props or path params
+    const actualChannelId = channelId || pathChannelId;
+
+    // Direct message query from InboxWithAiLoader.tsx
+    const messagesQuery = useMessagesQuery({
+        variables: {
+            channelId: actualChannelId?.toString(),
+            parentId: null,
+            limit: MESSAGES_PER_PAGE,
+        },
+        skip: !actualChannelId,
+        fetchPolicy: 'cache-and-network',
+        errorPolicy: 'all',
+        notifyOnNetworkStatusChange: true,
+        returnPartialData: true,
+        pollInterval: 0,
+        context: {
+            cacheKey: 'messages-list',
+        },
+    });
+
+    const { messages: aiMessages, error, isTyping } = state.context;
+    const { t } = useTranslation('translations');
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedElement, setSelectedElement] = useState<any>(null);
+    const [currentProcessingMessage, setCurrentProcessingMessage] = useState<number | null>(null);
+    const [processedMessageIds, setProcessedMessageIds] = useState<Set<string>>(new Set());
+    const [activeTab, setActiveTab] = useState<'chat' | 'history'>('chat');
+    const bottomRef = useRef<HTMLDivElement | null>(null);
+
+    // New state variables for message display control
+    const [displayedMessageCount, setDisplayedMessageCount] = useState(1); // Initially show only 1 message
+    const [hasMoreMessages, setHasMoreMessages] = useState(false);
+
+    // Get regular messages from direct query
+    const {
+        data: messagesData,
+        loading: messageLoading,
+        fetchMore: fetchMoreMessages,
+        subscribeToMore,
+    } = messagesQuery;
+
+    const regularMessages = useMemo(() => {
+        if (!messagesData?.messages?.data) return [];
+        return orderBy(uniqBy(messagesData.messages.data || [], 'id'), ['createdAt'], ['asc']);
+    }, [messagesData?.messages?.data]);
+
+    const onOpen = (element?: any) => {
+        setSelectedElement(element);
+        setIsOpen(true);
+    };
+
+    const onClose = () => {
+        setIsOpen(false);
+        setSelectedElement(null);
+    };
+
+    // Enhanced scroll to bottom function
+    const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth', delay: number = 0) => {
+        setTimeout(() => {
+            if (bottomRef.current) {
+                bottomRef.current.scrollIntoView({
+                    behavior,
+                    block: 'end',
+                    inline: 'nearest',
+                });
+            }
+        }, delay);
+    }, []);
+
+    // 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;
+            if (!actualChannelId) return;
+
+            try {
+                const postId = objectId();
+                const currentDate = new Date();
+
+                const createOptimisticMessage = (files?: any[]) => ({
+                    __typename: 'Post' as const,
+                    id: postId,
+                    message,
+                    createdAt: currentDate.toISOString(),
+                    updatedAt: currentDate.toISOString(),
+                    author: {
+                        __typename: 'UserAccount' as const,
+                        id: currentUser?.id,
+                        givenName: currentUser?.profile?.given_name || '',
+                        familyName: currentUser?.profile?.family_name || '',
+                        email: currentUser?.profile?.email || '',
+                        username: currentUser?.profile?.nickname || '',
+                        fullName: currentUser?.profile?.name || '',
+                        picture: currentUser?.profile?.picture || '',
+                        alias: [currentUser?.authUserId ?? ''],
+                        tokens: [],
+                    },
+                    isDelivered: false, // Will be true once confirmed by server
+                    isRead: false,
+                    type: 'Simple' as any,
+                    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: files || [],
+                        totalCount: files?.length || 0,
+                    },
+                    replies: {
+                        __typename: 'Messages' as const,
+                        data: [],
+                        totalCount: 0,
+                    },
+                });
+
+                const optimisticMessage = createOptimisticMessage(files);
+
+                if (files?.length > 0) {
+                    const uploadResponse = await startUpload({
+                        file: files,
+                        saveUploadedFile: { variables: { postId } },
+                        createUploadLink: { variables: { postId } },
+                    });
+
+                    const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+                    if (uploadedFiles) {
+                        const fileIds = uploadedFiles.map((f: any) => f.id);
+                        await sendMsg({
+                            variables: { postId, channelId: actualChannelId, content: message, files: fileIds },
+                            optimisticResponse: {
+                                __typename: 'Mutation',
+                                sendMessage: createOptimisticMessage(uploadedFiles),
+                            },
+                            update: (cache, { data: mutationData }) => {
+                                if (!mutationData?.sendMessage) return;
+
+                                // Update messages cache optimistically
+                                const messagesQuery = {
+                                    query: MessagesDocument,
+                                    variables: {
+                                        channelId: actualChannelId.toString(),
+                                        parentId: null,
+                                        limit: MESSAGES_PER_PAGE,
+                                    },
+                                };
+
+                                try {
+                                    const existingData = cache.readQuery(messagesQuery) as any;
+                                    if (existingData?.messages) {
+                                        cache.writeQuery({
+                                            ...messagesQuery,
+                                            data: {
+                                                messages: {
+                                                    ...existingData.messages,
+                                                    data: [
+                                                        ...(existingData.messages.data || []),
+                                                        mutationData.sendMessage,
+                                                    ],
+                                                    totalCount: (existingData.messages.totalCount || 0) + 1,
+                                                },
+                                            },
+                                        });
+                                    }
+                                } catch (error) {
+                                    console.debug('Cache update failed (expected on first message):', error);
+                                }
+                            },
+                        });
+                    }
+                } else {
+                    await sendMsg({
+                        variables: { channelId: actualChannelId, content: message },
+                        optimisticResponse: {
+                            __typename: 'Mutation',
+                            sendMessage: optimisticMessage,
+                        },
+                        update: (cache, { data: mutationData }) => {
+                            if (!mutationData?.sendMessage) return;
+
+                            // Update messages cache optimistically
+                            const messagesQuery = {
+                                query: MessagesDocument,
+                                variables: {
+                                    channelId: actualChannelId.toString(),
+                                    parentId: null,
+                                    limit: MESSAGES_PER_PAGE,
+                                },
+                            };
+
+                            try {
+                                const existingData = cache.readQuery(messagesQuery) as any;
+                                if (existingData?.messages) {
+                                    cache.writeQuery({
+                                        ...messagesQuery,
+                                        data: {
+                                            messages: {
+                                                ...existingData.messages,
+                                                data: [...(existingData.messages.data || []), mutationData.sendMessage],
+                                                totalCount: (existingData.messages.totalCount || 0) + 1,
+                                            },
+                                        },
+                                    });
+                                }
+                            } catch (error) {
+                                console.debug('Cache update failed (expected on first message):', error);
+                            }
+                        },
+                    });
+                }
+
+                // Send message to AI agent machine
+                send({ type: 'SEND_MESSAGE', message: message.trim() });
+
+                // Ensure we scroll to the newest message immediately
+                scrollToBottom('smooth', 0);
+
+                // When sending new messages, increment the displayed count to show the new message
+                // This ensures we show both the existing last message and the new message
+                setDisplayedMessageCount((prev) => {
+                    const newCount = Math.max(prev + 1, 2);
+                    console.log('🔄 Message sent: Updating displayedMessageCount', {
+                        previous: prev,
+                        new: newCount,
+                        reason: 'New message sent',
+                    });
+                    return newCount;
+                });
+
+                // Call the optional onSendMessage prop if provided
+                if (onSendMessage) {
+                    await onSendMessage(message, files);
+                }
+            } catch (error) {
+                console.error('Error sending message:', error);
+            }
+        },
+        [actualChannelId, currentUser, startUpload, sendMsg, send, onSendMessage],
+    );
+
+    // Debug effect to track AI messages changes
+    useEffect(() => {
+        console.log('🤖 AI messages state changed:', aiMessages.length);
+        if (aiMessages.length > 0) {
+            console.log('🤖 Latest AI message:', aiMessages[aiMessages.length - 1]);
+
+            // Clear processing message if we have new AI responses
+            if (currentProcessingMessage !== null) {
+                console.log('🤖 AI response received, clearing processing message');
+                setCurrentProcessingMessage(null);
+            }
+
+            // Auto-scroll to bottom when new AI response appears
+            scrollToBottom('smooth', 200);
+        } else {
+            console.log('🤖 No AI messages in state - this might indicate an issue');
+        }
+    }, [aiMessages, currentProcessingMessage]);
+
+    // Debug effect to track machine state changes
+    useEffect(() => {
+        console.log('🤖 Machine state changed:', state.value);
+        console.log('🤖 Machine context:', {
+            messagesCount: state.context.messages.length,
+            hasMessageToRespondTo: !!state.context.messageToRespondTo,
+            messageToRespondTo: state.context.messageToRespondTo,
+        });
+
+        // Check if we're in processing state but no AI response is being generated
+        if (state.value === 'processing' && !state.context.messageToRespondTo) {
+            console.log('🤖 ⚠️ WARNING: In processing state but no messageToRespondTo!');
+        }
+
+        // Auto-scroll when AI starts processing
+        if (state.value === 'processing') {
+            scrollToBottom('smooth', 100);
+        }
+    }, [state.value, state.context, scrollToBottom]);
+
+    // Send regular messages to AI agent machine for context
+    useEffect(() => {
+        if (regularMessages && regularMessages.length > 0) {
+            send({ type: 'UPDATE_REGULAR_MESSAGES', messages: regularMessages });
+        }
+    }, [regularMessages, send]);
+
+    // Reset processed messages when regular messages change completely
+    useEffect(() => {
+        if (regularMessages && regularMessages.length > 0) {
+            // Check if we have completely new messages (different IDs)
+            const currentMessageIds = new Set(regularMessages.map((msg: any) => msg.id));
+            const hasNewMessages = !regularMessages.every((msg: any) => processedMessageIds.has(msg.id));
+
+            if (hasNewMessages) {
+                console.log('🤖 New messages detected, resetting processed state');
+                setProcessedMessageIds(new Set());
+                setCurrentProcessingMessage(null);
+            }
+        }
+    }, [regularMessages]);
+
+    // Sequential auto-response logic - respond to each message one at a time
+    useEffect(() => {
+        if (regularMessages && regularMessages.length > 0) {
+            console.log('🤖 Regular messages detected:', regularMessages.length);
+            console.log('🤖 Current AI messages:', aiMessages.length);
+            console.log('🤖 Already processed message IDs:', Array.from(processedMessageIds));
+
+            // Find messages that don't have AI responses yet and haven't been processed
+            const messagesWithoutAIResponses = regularMessages.filter((msg: any, index: number) => {
+                // Check if this message already has an AI response
+                const hasAIResponse = aiMessages.length > index;
+                // Check if this message has already been processed
+                const alreadyProcessed = processedMessageIds.has(msg.id);
+                return !hasAIResponse && !alreadyProcessed;
+            });
+
+            if (messagesWithoutAIResponses.length > 0) {
+                console.log(`🤖 Found ${messagesWithoutAIResponses.length} messages to process`);
+
+                // Simplified: Just process the first message and let the machine handle the rest
+                const firstMsg = messagesWithoutAIResponses[0];
+                console.log(`🤖 Starting with first message: ${firstMsg.message?.substring(0, 50)}...`);
+
+                // Mark this message as being processed
+                setProcessedMessageIds((prev) => new Set([...prev, firstMsg.id]));
+                setCurrentProcessingMessage(0);
+
+                // Send the first message to AI
+                send({ type: 'AUTO_RESPOND_TO_MESSAGE', message: firstMsg.message, isAutoResponse: true });
+            } else {
+                console.log('🤖 All messages already have AI responses or are being processed');
+                setCurrentProcessingMessage(null);
+            }
+        }
+    }, [regularMessages.length, aiMessages.length, processedMessageIds.size]); // Only depend on lengths and processed count
+
+    // Process next message when machine becomes idle (after completing AI response)
+    useEffect(() => {
+        // Only run when machine is idle and we have messages to process
+        if (state.matches('idle') && regularMessages && regularMessages.length > 0) {
+            console.log('🤖 Machine idle, checking for next message to process...');
+            console.log(
+                '🤖 Current state - AI messages:',
+                aiMessages.length,
+                'Processed IDs:',
+                processedMessageIds.size,
+            );
+
+            // Find the next message that needs an AI response
+            const nextMessageIndex = regularMessages.findIndex((msg: any, index: number) => {
+                const hasAIResponse = aiMessages.length > index;
+                const alreadyProcessed = processedMessageIds.has(msg.id);
+                const needsResponse = !hasAIResponse && !alreadyProcessed;
+
+                console.log(
+                    `🤖 Message ${index + 1} "${msg.message?.substring(
+                        0,
+                        30,
+                    )}..." - hasAIResponse: ${hasAIResponse}, alreadyProcessed: ${alreadyProcessed}, needsResponse: ${needsResponse}`,
+                );
+
+                return needsResponse;
+            });
+
+            if (nextMessageIndex !== -1) {
+                console.log(
+                    `🤖 Found next message to process: ${nextMessageIndex + 1}: ${regularMessages[
+                        nextMessageIndex
+                    ].message?.substring(0, 50)}...`,
+                );
+
+                // Check if this message is a duplicate of a previous one
+                const currentMessage = regularMessages[nextMessageIndex];
+                const previousMessageIndex = regularMessages.findIndex(
+                    (prevMsg: any, prevIndex: number) =>
+                        prevIndex < nextMessageIndex && prevMsg.message === currentMessage.message,
+                );
+
+                if (previousMessageIndex !== -1 && aiMessages.length > previousMessageIndex) {
+                    // This is a duplicate message, mark it as processed without sending to AI
+                    console.log(
+                        `🤖 Duplicate message detected: "${
+                            currentMessage.message
+                        }" - reusing AI response from message ${previousMessageIndex + 1}`,
+                    );
+                    setProcessedMessageIds((prev) => new Set([...prev, currentMessage.id]));
+                    setCurrentProcessingMessage(null);
+
+                    // Continue with next message immediately
+                    setTimeout(() => {
+                        send({ type: 'CONTINUE_PROCESSING' });
+                    }, 100);
+                } else {
+                    // Mark this message as being processed
+                    setProcessedMessageIds((prev) => new Set([...prev, currentMessage.id]));
+                    setCurrentProcessingMessage(nextMessageIndex);
+
+                    // Send to AI
+                    console.log(`🤖 Sending message to AI: "${currentMessage.message}"`);
+                    send({ type: 'AUTO_RESPOND_TO_MESSAGE', message: currentMessage.message, isAutoResponse: true });
+                }
+            } else {
+                // Check if we actually have all responses
+                const totalMessagesNeedingResponses = regularMessages.length;
+                const messagesWithResponses = aiMessages.length;
+                const messagesProcessed = processedMessageIds.size;
+
+                console.log(`🤖 No more messages to process. Summary:`, {
+                    totalMessages: totalMessagesNeedingResponses,
+                    messagesWithResponses,
+                    messagesProcessed,
+                    allHaveResponses: messagesWithResponses >= totalMessagesNeedingResponses,
+                });
+
+                if (messagesWithResponses >= totalMessagesNeedingResponses) {
+                    console.log('🤖 All messages have been processed successfully');
+                    setCurrentProcessingMessage(null);
+                } else {
+                    console.log('🤖 ⚠️ Discrepancy detected: Some messages may not have proper AI responses');
+                    // Force a reset to try again
+                    setProcessedMessageIds(new Set());
+                    setCurrentProcessingMessage(null);
+                }
+            }
+        }
+    }, [state.value, regularMessages, aiMessages.length, processedMessageIds.size, send]);
+
+    // Reset processing state when regularMessages change significantly
+    useEffect(() => {
+        if (regularMessages && regularMessages.length > 0) {
+            // Reset processing state when we get new messages
+            setProcessedMessageIds(new Set());
+            setCurrentProcessingMessage(null);
+            console.log('🤖 Reset processing state for new messages');
+        }
+    }, [regularMessages.length]); // Only depend on length to avoid unnecessary resets
+
+    // Only reset displayed message count on initial load, not when new messages arrive
+    useEffect(() => {
+        if (regularMessages && regularMessages.length > 0) {
+            // Only reset to show last message if this is the first time we're getting messages
+            // or if we're currently showing more messages than we have
+            if (displayedMessageCount === 1 || displayedMessageCount > regularMessages.length) {
+                console.log('🔄 Resetting displayedMessageCount to 1:', {
+                    reason: 'Initial load or count mismatch',
+                    currentDisplayed: displayedMessageCount,
+                    regularMessagesLength: regularMessages.length,
+                });
+                setDisplayedMessageCount(1);
+            }
+        }
+    }, [regularMessages.length, displayedMessageCount]);
+
+    const handleRetry = useCallback(() => {
+        send({ type: 'RETRY' });
+    }, [send]);
+
+    const handleClearError = useCallback(() => {
+        send({ type: 'CLEAR_ERROR' });
+    }, [send]);
+
+    // Merge AI agent messages with regular messages from query
+    const allMessages = useMemo(() => {
+        if (!regularMessages) return [] as any[];
+
+        console.log(
+            '🔄 Merging messages - AI messages:',
+            aiMessages.length,
+            'Regular messages:',
+            regularMessages.length,
+        );
+        console.log(
+            '🔄 AI messages content:',
+            aiMessages.map((m) => ({ id: m.id, content: m.content.substring(0, 50) + '...', sender: m.sender })),
+        );
+
+        const regularMessagesFormatted = (regularMessages || []).map((m, idx) => ({
+            id: m.id || `regular-${idx}`,
+            message: (m as any).message || (m as any).content || '',
+            createdAt: new Date((m as any).createdAt || Date.now()),
+            sender: 'user',
+            author: (m as any).author,
+            isUserMessage: true, // Explicitly mark as user message
+        }));
+
+        const aiMessagesFormatted = (aiMessages || []).map((m) => ({
+            id: m.id,
+            message: m.content,
+            createdAt: new Date(m.timestamp || Date.now()),
+            sender: 'ai',
+            isUserMessage: false, // Explicitly mark as AI message
+        }));
+
+        // Show ALL user messages immediately, interleave AI responses as they arrive
+        const interleavedMessages: any[] = [];
+
+        console.log('🔄 Starting message interleaving...');
+        console.log('🔄 Regular messages count:', regularMessagesFormatted.length);
+        console.log('🔄 AI messages count:', aiMessagesFormatted.length);
+
+        for (let i = 0; i < regularMessagesFormatted.length; i++) {
+            const userMsg = regularMessagesFormatted[i];
+            console.log(`🔄 Processing user message ${i + 1}:`, {
+                id: userMsg.id,
+                message: userMsg.message.substring(0, 50),
+                sender: userMsg.sender,
+                isUserMessage: userMsg.isUserMessage,
+                author: userMsg.author,
+            });
+
+            interleavedMessages.push(userMsg);
+            console.log(`🔄 Added user message ${i + 1}: ${userMsg.message.substring(0, 50)}...`);
+
+            // Check if this message is a duplicate of a previous one
+            const isDuplicate =
+                i > 0 && regularMessagesFormatted.slice(0, i).some((prevMsg) => prevMsg.message === userMsg.message);
+
+            if (isDuplicate) {
+                // Find the first occurrence of this message to get its AI response
+                const firstOccurrenceIndex = regularMessagesFormatted.findIndex(
+                    (msg) => msg.message === userMsg.message,
+                );
+                const hasAIResponseForFirst = firstOccurrenceIndex < aiMessagesFormatted.length;
+
+                if (hasAIResponseForFirst) {
+                    // Reuse the AI response from the first occurrence
+                    const aiResponse = aiMessagesFormatted[firstOccurrenceIndex];
+                    const adjustedCreatedAt = new Date(userMsg.createdAt.getTime() + 1);
+                    const finalAiResponse = {
+                        ...aiResponse,
+                        createdAt: adjustedCreatedAt,
+                        id: `duplicate-${aiResponse.id}-${i}`,
+                        isDuplicate: true,
+                    };
+                    interleavedMessages.push(finalAiResponse);
+                    console.log(
+                        `🔄 Added duplicate AI response for message ${i + 1} (reusing from message ${
+                            firstOccurrenceIndex + 1
+                        }):`,
+                        {
+                            id: finalAiResponse.id,
+                            message: finalAiResponse.message.substring(0, 50),
+                            sender: finalAiResponse.sender,
+                            isUserMessage: finalAiResponse.isUserMessage,
+                            isDuplicate: finalAiResponse.isDuplicate,
+                        },
+                    );
+                } else {
+                    // First occurrence doesn't have AI response yet, show loading
+                    const loadingMessage = {
+                        id: `loading-duplicate-${i}`,
+                        message: 'Loading...', // Shorter text since we show visual loader
+                        createdAt: new Date(userMsg.createdAt.getTime() + 1),
+                        sender: 'ai',
+                        isLoading: true,
+                        isProcessing: false,
+                        isUserMessage: false,
+                        isDuplicate: true,
+                    };
+                    interleavedMessages.push(loadingMessage);
+                    console.log(`🔄 Added loading indicator for duplicate message ${i + 1}:`, {
+                        id: loadingMessage.id,
+                        message: loadingMessage.message,
+                        isDuplicate: loadingMessage.isDuplicate,
+                    });
+                }
+            } else {
+                // This is not a duplicate, handle normally
+                if (i < aiMessagesFormatted.length) {
+                    const aiResponse = aiMessagesFormatted[i];
+                    // Ensure AI response sorts after corresponding user message
+                    const adjustedCreatedAt = new Date(userMsg.createdAt.getTime() + 1);
+                    const finalAiResponse = { ...aiResponse, createdAt: adjustedCreatedAt };
+                    interleavedMessages.push(finalAiResponse);
+                    console.log(`🔄 Added AI response for message ${i + 1}:`, {
+                        id: finalAiResponse.id,
+                        message: finalAiResponse.message.substring(0, 50),
+                        sender: finalAiResponse.sender,
+                        isUserMessage: finalAiResponse.isUserMessage,
+                    });
+                } else {
+                    // Add a loading indicator for messages waiting for AI responses
+                    const loadingMessage = {
+                        id: `loading-${i}`,
+                        message: 'Loading...', // Shorter text since we show visual loader
+                        createdAt: new Date(userMsg.createdAt.getTime() + 1),
+                        sender: 'ai',
+                        isLoading: true,
+                        isProcessing: currentProcessingMessage === i,
+                        isUserMessage: false, // Explicitly mark as not a user message
+                    };
+                    interleavedMessages.push(loadingMessage);
+                    console.log(`🔄 Added loading indicator for message ${i + 1}:`, {
+                        id: loadingMessage.id,
+                        message: loadingMessage.message,
+                        sender: loadingMessage.sender,
+                        isUserMessage: loadingMessage.isUserMessage,
+                        isProcessing: loadingMessage.isProcessing,
+                    });
+                }
+            }
+        }
+
+        console.log('🔄 Final interleaved messages:', interleavedMessages.length);
+        console.log(
+            '🔄 Message structure:',
+            interleavedMessages.map((m) => ({
+                sender: m.sender,
+                isUserMessage: m.isUserMessage,
+                message: m.message.substring(0, 30) + '...',
+            })),
+        );
+
+        return interleavedMessages;
+    }, [aiMessages, regularMessages, currentUser, currentProcessingMessage]);
+
+    // Update hasMoreMessages when allMessages changes
+    useEffect(() => {
+        if (allMessages && allMessages.length > 0) {
+            // Count complete conversation pairs instead of individual messages
+            const conversationPairs = Math.ceil(allMessages.length / 2);
+            console.log('🔄 Conversation pairs calculation:', {
+                totalMessages: allMessages.length,
+                conversationPairs,
+                displayedMessageCount,
+                hasMore: conversationPairs > displayedMessageCount,
+            });
+
+            // Show "Load Past Messages" whenever there are more conversation pairs
+            // than currently displayed (including initial view)
+            const hasMore = conversationPairs > displayedMessageCount;
+            setHasMoreMessages(hasMore);
+
+            // Ensure we always show at least the last conversation
+            if (displayedMessageCount === 0) {
+                setDisplayedMessageCount(1);
+            }
+        } else {
+            setHasMoreMessages(false);
+        }
+    }, [allMessages, displayedMessageCount]);
+
+    // Function to load more past messages
+    const loadMoreMessages = useCallback(() => {
+        if (allMessages && allMessages.length > 0) {
+            // Load more conversation pairs (5 pairs = 10 messages)
+            const conversationPairs = Math.ceil(allMessages.length / 2);
+            setDisplayedMessageCount((prev) => Math.min(prev + 5, conversationPairs));
+        }
+    }, [allMessages]);
+
+    // Function to reset to showing only last message
+    const resetToLastMessage = useCallback(() => {
+        setDisplayedMessageCount(1);
+    }, []);
+
+    // Build list with date separators similar to MessagesBuilderUi
+    const messageListWithDates = useMemo(() => {
+        let currentDate = '';
+        const res: any[] = [];
+
+        allMessages?.forEach((msg: any) => {
+            const date = new Date(msg.createdAt);
+            let msgDate: string;
+            if (isToday(date)) msgDate = t('tailwind_ui_inbox.today');
+            else if (isYesterday(date)) msgDate = t('tailwind_ui_inbox.yesterday');
+            else msgDate = format(date, 'eee, do MMMM');
+
+            if (msgDate !== currentDate) {
+                res.push({ type: 'date', content: msgDate });
+                currentDate = msgDate;
+            }
+            res.push(msg);
+        });
+
+        if (allMessages && allMessages.length > 0) {
+            const todayLabel = t('tailwind_ui_inbox.today');
+            if (currentDate !== todayLabel) {
+                res.push({ type: 'date', content: todayLabel });
+            }
+        }
+
+        return res;
+    }, [allMessages, t]);
+
+    // Group messages by date sections for Slack-like rendering
+    const messagesByDate = useMemo(() => {
+        const sections: { date: string | null; messages: any[] }[] = [];
+        let currentSection: { date: string | null; messages: any[] } = { date: null, messages: [] };
+
+        messageListWithDates.forEach((item: any) => {
+            if (item?.type === 'date') {
+                if (currentSection.messages.length > 0) {
+                    sections.push(currentSection);
+                }
+                currentSection = { date: item.content, messages: [] };
+            } else {
+                currentSection.messages.push(item);
+            }
+        });
+
+        if (currentSection.messages.length > 0) {
+            sections.push(currentSection);
+        }
+
+        return sections;
+    }, [messageListWithDates]);
+
+    // Limit messages to display based on displayedMessageCount (conversation pairs)
+    const limitedMessagesByDate = useMemo(() => {
+        if (!messagesByDate || messagesByDate.length === 0) return [];
+
+        // Calculate how many conversation pairs we should show
+        let conversationPairs = 0;
+        const limitedSections: { date: string | null; messages: any[] }[] = [];
+
+        // Start from the end (most recent messages) and work backwards
+        for (let i = messagesByDate.length - 1; i >= 0; i--) {
+            const section = messagesByDate[i];
+            const sectionMessages = [...section.messages];
+
+            // Count conversation pairs in this section
+            let sectionPairs = 0;
+            for (let j = 0; j < sectionMessages.length; j++) {
+                const currentMsg = sectionMessages[j];
+                if (currentMsg.sender === 'user' || currentMsg.isUserMessage) {
+                    // Check if there's an AI response following this user message
+                    if (j + 1 < sectionMessages.length) {
+                        const nextMsg = sectionMessages[j + 1];
+                        if (nextMsg.sender === 'ai' || !nextMsg.isUserMessage) {
+                            sectionPairs++;
+                            j++; // Skip the AI response since we counted it as a pair
+                        }
+                    } else {
+                        sectionPairs++; // User message without AI response still counts
+                    }
+                } else if (currentMsg.sender === 'ai' || !currentMsg.isUserMessage) {
+                    // AI message without preceding user message counts as half a pair
+                    sectionPairs += 0.5;
+                }
+            }
+
+            // If this section would exceed our limit, only take what we can fit
+            if (conversationPairs + sectionPairs > displayedMessageCount) {
+                const remainingPairs = displayedMessageCount - conversationPairs;
+                if (remainingPairs > 0) {
+                    // Take only the last N conversation pairs from this section
+                    const limitedMessages = sectionMessages.slice(-Math.floor(remainingPairs * 2));
+                    limitedSections.unshift({ ...section, messages: limitedMessages });
+                    conversationPairs += remainingPairs;
+                }
+                break;
+            } else {
+                // We can fit this entire section
+                limitedSections.unshift(section);
+                conversationPairs += sectionPairs;
+            }
+        }
+
+        return limitedSections;
+    }, [messagesByDate, displayedMessageCount]);
+
+    // Ensure we show complete conversation pairs (user message + AI response)
+    const completeConversationMessages = useMemo(() => {
+        if (!limitedMessagesByDate || limitedMessagesByDate.length === 0) return [];
+
+        const completeSections: { date: string | null; messages: any[] }[] = [];
+
+        limitedMessagesByDate.forEach((section) => {
+            const completeMessages: any[] = [];
+            const sectionMessages = [...section.messages];
+
+            console.log('🔄 Processing section for complete conversations:', {
+                sectionDate: section.date,
+                totalMessages: sectionMessages.length,
+                messages: sectionMessages.map((m) => ({
+                    sender: m.sender,
+                    isUserMessage: m.isUserMessage,
+                    message: m.message?.substring(0, 30) + '...',
+                })),
+            });
+
+            // Group messages into conversation pairs
+            for (let i = 0; i < sectionMessages.length; i++) {
+                const currentMsg = sectionMessages[i];
+
+                // If this is a user message, look for its AI response
+                if (currentMsg.sender === 'user' || currentMsg.isUserMessage) {
+                    completeMessages.push(currentMsg);
+
+                    // Look for the corresponding AI response (next message should be AI)
+                    if (i + 1 < sectionMessages.length) {
+                        const nextMsg = sectionMessages[i + 1];
+                        if (nextMsg.sender === 'ai' || !nextMsg.isUserMessage) {
+                            completeMessages.push(nextMsg);
+                            i++; // Skip the next message since we've already added it
+                        }
+                    }
+                } else if (currentMsg.sender === 'ai' || !currentMsg.isUserMessage) {
+                    // If this is an AI message without a preceding user message, still show it
+                    completeMessages.push(currentMsg);
+                }
+            }
+
+            console.log('🔄 Complete messages for section:', {
+                sectionDate: section.date,
+                completeMessages: completeMessages.map((m) => ({
+                    sender: m.sender,
+                    isUserMessage: m.isUserMessage,
+                    message: m.message?.substring(0, 30) + '...',
+                })),
+            });
+
+            if (completeMessages.length > 0) {
+                completeSections.push({ ...section, messages: completeMessages });
+            }
+        });
+
+        return completeSections;
+    }, [limitedMessagesByDate]);
+
+    // Auto scroll to bottom when messages, typing status, or AI responses change
+    useEffect(() => {
+        scrollToBottom('smooth', 100);
+    }, [completeConversationMessages?.length, isTyping, aiMessages.length, scrollToBottom]);
+
+    // Auto scroll when processing message changes (shows loading indicators)
+    useEffect(() => {
+        if (currentProcessingMessage !== null) {
+            scrollToBottom('smooth', 150);
+        }
+    }, [currentProcessingMessage, scrollToBottom]);
+
+    return (
+        <div className={`flex flex-col h-full ${className}`}>
+            {/* Header with Tabs */}
+            <div className="border-b border-gray-200 bg-white">
+                <div className="flex items-center justify-between px-4 py-3">
+                    {/* Tabs */}
+                    <div className="flex space-x-6">
+                        <button
+                            onClick={() => setActiveTab('chat')}
+                            className={`relative ${
+                                activeTab === 'chat' ? 'text-blue-600 font-medium' : 'text-gray-500 hover:text-gray-700'
+                            } text-sm transition-colors`}
+                        >
+                            <span>Chat</span>
+                            {activeTab === 'chat' && (
+                                <div className="absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"></div>
+                            )}
+                        </button>
+                        <button
+                            onClick={() => setActiveTab('history')}
+                            className={`relative ${
+                                activeTab === 'history'
+                                    ? 'text-blue-600 font-medium'
+                                    : 'text-gray-500 hover:text-gray-700'
+                            } text-sm transition-colors`}
+                        >
+                            <span>History</span>
+                            {activeTab === 'history' && (
+                                <div className="absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"></div>
+                            )}
+                        </button>
+                    </div>
+
+                    {/* New Chat Button */}
+                    <button
+                        onClick={() => {
+                            // Reset to show only the last message for new chat
+                            setDisplayedMessageCount(1);
+                            setHasMoreMessages(false);
+                            // Clear processing state
+                            setProcessedMessageIds(new Set());
+                            setCurrentProcessingMessage(null);
+                            // Clear AI messages by sending update event to the machine
+                            send({ type: 'UPDATE', value: { messages: [] } });
+                        }}
+                        className="px-4 py-2 text-sm text-gray-700  border border-gray-300 rounded-lg hover:bg-gray-200 transition-colors"
+                        style={{ borderRadius: '10px' }}
+                    >
+                        New Chat
+                    </button>
+                </div>
+            </div>
+
+            {/* Tab Content */}
+            {activeTab === 'history' ? (
+                /* History Tab Content */
+                <div className="flex-1 overflow-y-auto bg-white">
+                    {/* Search Bar */}
+                    <div className="px-4 py-3 border-b border-gray-200">
+                        <div className="relative">
+                            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <svg
+                                    className="h-5 w-5 text-gray-400"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                                    />
+                                </svg>
+                            </div>
+                            <input
+                                type="text"
+                                placeholder="Search messages..."
+                                className="block w-full pl-10 pr-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                            />
+                            <div className="absolute inset-y-0 right-0 pr-3 flex items-center">
+                                <button className="text-gray-400 hover:text-gray-600">
+                                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Message History List */}
+                    <div className="px-4 py-2">
+                        {regularMessages && regularMessages.length > 0 ? (
+                            regularMessages.map((msg: any, index: number) => {
+                                const messageTime = new Date(msg.createdAt);
+
+                                return (
+                                    <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">
+                                                <svg
+                                                    className="w-4 h-4 mr-1"
+                                                    fill="none"
+                                                    viewBox="0 0 24 24"
+                                                    stroke="currentColor"
+                                                >
+                                                    <path
+                                                        strokeLinecap="round"
+                                                        strokeLinejoin="round"
+                                                        strokeWidth={2}
+                                                        d="M15 19l-7-7 7-7"
+                                                    />
+                                                </svg>
+                                                Restore to this point
+                                            </button>
+                                        </div>
+
+                                        {/* Message using same container as Chat tab */}
+                                        <ModernMessageGroupComponent
+                                            messages={[
+                                                {
+                                                    id: msg.id,
+                                                    message: msg.message || msg.content || 'No message content',
+                                                    author: msg.author || {
+                                                        id: 'user',
+                                                        givenName: 'User',
+                                                        familyName: '',
+                                                        fullName: 'User',
+                                                        username: 'user',
+                                                        email: '',
+                                                        picture: null,
+                                                        alias: [],
+                                                        tokens: [],
+                                                    },
+                                                    createdAt: msg.createdAt,
+                                                    type: 'Simple' as any,
+                                                    isDelivered: false,
+                                                    isRead: false,
+                                                    parentId: null,
+                                                    fromServer: null,
+                                                    updatedAt: msg.createdAt,
+                                                    propsConfiguration: null,
+                                                    props: null,
+                                                    files: null,
+                                                    replies: null,
+                                                    channel: null,
+                                                    isPinned: false,
+                                                },
+                                            ]}
+                                            currentUser={currentUser as any}
+                                            onOpen={onOpen}
+                                            onMessageClick={() => {}}
+                                            isDesktopView={isDesktopView}
+                                            isSmallScreen={isSmallScreen}
+                                        />
+                                    </div>
+                                );
+                            })
+                        ) : (
+                            // Fallback entries when no messages
+                            <>
+                                {/* History Entry 1 */}
+                                <div className="mb-4">
+                                    <div className="flex items-center justify-end mb-2">
+                                        <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"
+                                                viewBox="0 0 24 24"
+                                                stroke="currentColor"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M15 19l-7-7 7-7"
+                                                />
+                                            </svg>
+                                            Restore to this point
+                                        </button>
+                                    </div>
+                                    <div className="bg-gray-100 rounded-lg p-3">
+                                        <p className="text-sm text-gray-900">Sample message for demonstration</p>
+                                    </div>
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+            ) : (
+                /* Chat Tab Content */
+                <div className="flex-1 overflow-y-auto bg-white">
+                    {/* Messages Display - Styled like MessagesBuilderUi */}
+                    <div
+                        className={`w-full pb-4 pt-2 ${
+                            isDesktopView ? 'space-y-3 max-w-full mx-auto' : isSmallScreen ? 'space-y-2' : 'space-y-2'
+                        }`}
+                    >
+                        {/* Load Past Messages Button */}
+                        {hasMoreMessages && (
+                            <div className="px-4 py-3 text-center">
+                                <button
+                                    onClick={loadMoreMessages}
+                                    className="px-4 py-2 text-sm text-gray-600 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 transition-colors"
+                                >
+                                    Load Past Messages
+                                </button>
+                            </div>
+                        )}
+
+                        {/* Show placeholder when no messages */}
+                        {(!completeConversationMessages || completeConversationMessages.length === 0) && (
+                            <div className="px-4 py-8 text-center">
+                                <div className="text-gray-500 text-lg font-medium mb-2">
+                                    Describe your idea and I'll help you create it step by step
+                                </div>
+                                <div className="text-gray-400 text-sm">
+                                    Start a new conversation by typing your message below
+                                </div>
+                            </div>
+                        )}
+
+                        {completeConversationMessages?.map((section, sectionIndex) => (
+                            <div key={`section-${sectionIndex}`} className="w-full px-4">
+                                {section.date && (
+                                    <div className="flex items-center justify-center my-3">
+                                        <div className="flex-grow border-t border-gray-200"></div>
+                                        <div className="mx-4 px-3 py-1 bg-white border border-gray-200 rounded-full text-xs font-medium text-gray-600">
+                                            {section.date}
+                                        </div>
+                                        <div className="flex-grow border-t border-gray-200"></div>
+                                    </div>
+                                )}
+
+                                <div className={`${isDesktopView ? 'mb-2' : 'mb-1'}`}>
+                                    {section.messages.map((msg: any, msgIndex: number) => (
+                                        <div key={msg.id || msgIndex} className="mb-3">
+                                            {/* AI Message Indicator */}
+                                            {msg.isAIMessage && (
+                                                <div className="flex items-center mb-2">
+                                                    <div className="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
+                                                    <span className="text-xs text-blue-600 font-medium">
+                                                        AI Assistant
+                                                    </span>
+                                                </div>
+                                            )}
+
+                                            {msg.isLoading ? (
+                                                // Show loader for loading messages
+                                                <div className="flex items-center space-x-2 bg-gray-50 border border-gray-200 px-4 py-3 rounded-lg">
+                                                    <div className="w-4 h-4 border-2 border-gray-300 border-t-gray-500 rounded-full animate-spin"></div>
+                                                    <span className="text-sm text-gray-600">
+                                                        {msg.isProcessing ? 'AI is thinking...' : 'Thinking...'}
+                                                    </span>
+                                                </div>
+                                            ) : (
+                                                // Show normal message for non-loading messages
+                                                <ModernMessageGroupComponent
+                                                    messages={[
+                                                        {
+                                                            id: msg.id,
+                                                            message: msg.message,
+                                                            author:
+                                                                msg.sender === 'user'
+                                                                    ? msg.author
+                                                                    : {
+                                                                          id: 'ai-assistant',
+                                                                          givenName: 'AI',
+                                                                          familyName: 'Assistant',
+                                                                          fullName: 'AI Assistant',
+                                                                          username: 'ai-assistant',
+                                                                          email: 'ai@assistant.com',
+                                                                          picture: null,
+                                                                          alias: [],
+                                                                          tokens: [],
+                                                                      },
+                                                            createdAt: msg.createdAt,
+                                                            type: 'Simple' as any,
+                                                            isDelivered: false,
+                                                            isRead: false,
+                                                            parentId: null,
+                                                            fromServer: null,
+                                                            updatedAt: msg.createdAt,
+                                                            propsConfiguration: null,
+                                                            props: null,
+                                                            files: null,
+                                                            replies: null,
+                                                            channel: null,
+                                                            isPinned: false,
+                                                        },
+                                                    ]}
+                                                    currentUser={currentUser as any}
+                                                    onOpen={onOpen}
+                                                    onMessageClick={() => {}}
+                                                    isDesktopView={isDesktopView}
+                                                    isSmallScreen={isSmallScreen}
+                                                />
+                                            )}
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+
+                        {/* Typing indicator */}
+                        {isTyping && (
+                            <div className="px-4">
+                                <div className="flex justify-start">
+                                    <div className="bg-gray-50 border border-gray-200 px-4 py-3 rounded-lg">
+                                        <div className="flex items-center space-x-2">
+                                            <div className="w-4 h-4 border-2 border-gray-300 border-t-gray-500 rounded-full animate-spin"></div>
+                                            <span className="text-sm text-gray-600">AI is thinking...</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        <div ref={bottomRef} />
+                    </div>
+
+                    {/* Subscription Handler for real-time message updates */}
+                    <SubscriptionHandler
+                        subscribeToMore={subscribeToMore}
+                        document={CHAT_MESSAGE_ADDED}
+                        variables={{ channelId: actualChannelId?.toString() }}
+                        enabled={!!actualChannelId && !!subscribeToMore}
+                        updateQuery={(prev: any, { subscriptionData }: any) => {
+                            console.log('Subscription updateQuery called:', { prev, subscriptionData });
+                            if (!subscriptionData.data) {
+                                console.log('No subscription data, returning prev');
+                                return prev;
+                            }
+                            const newMessage = subscriptionData.data.chatMessageAdded;
+                            console.log('New message received via subscription:', newMessage);
+
+                            return {
+                                ...prev,
+                                messages: {
+                                    ...prev?.messages,
+                                    data: uniqBy([...(prev?.messages?.data || []), newMessage], 'id'),
+                                    totalCount: (prev?.messages?.totalCount || 0) + 1,
+                                },
+                            };
+                        }}
+                        onError={(error) => {
+                            console.error('Subscription error:', error);
+                        }}
+                    />
+                </div>
+            )}
+
+            {/* Error Display */}
+            {error && (
+                <div className="mx-4 mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+                    <div className="flex items-center justify-between">
+                        <div className="text-red-800 text-sm">{error}</div>
+                        <div className="flex space-x-2">
+                            <button
+                                onClick={handleRetry}
+                                className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors"
+                            >
+                                Retry
+                            </button>
+                            <button
+                                onClick={handleClearError}
+                                className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+                            >
+                                Dismiss
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Input Area - Only show for Chat tab */}
+            {activeTab === 'chat' && (
+                <div className="border-t border-gray-200 bg-white">
+                    {/* Processing Status Indicator */}
+                    {currentProcessingMessage !== null && (
+                        <div className="px-4 py-2 border-b border-blue-100 bg-blue-50">
+                            <div className="flex items-center space-x-2 text-sm text-blue-700">
+                                <div className="flex space-x-1">
+                                    <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
+                                    <div
+                                        className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"
+                                        style={{ animationDelay: '0.1s' }}
+                                    ></div>
+                                    <div
+                                        className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"
+                                        style={{ animationDelay: '0.2s' }}
+                                    ></div>
+                                </div>
+                                <span>
+                                    AI is processing message {currentProcessingMessage + 1} of {regularMessages.length}
+                                </span>
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Removed temporary test button */}
+                    <InputComponent channelId={actualChannelId} handleSend={handleSend} placeholder={placeholder} />
+                </div>
+            )}
+
+            {/* Optional Modal for user content like MessagesBuilderUi */}
+            {isOpen ? (
+                <div>
+                    <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={onClose} />
+                    <div className="fixed z-50 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                        <div
+                            className="bg-white w-[1036px] h-[700px] rounded-lg shadow-xl"
+                            style={{ boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }}
+                        >
+                            <div className="flex justify-between border-b border-gray-300 pb-4 pt-4">
+                                <button
+                                    onClick={onClose}
+                                    className="w-8 ml-3 text-black hover:text-black focus:outline-none"
+                                >
+                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M6 18L18 6M6 6l12 12"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                            <div className="p-4">
+                                {/* Keep minimal until full UserModalContent is needed */}
+                                <div className="text-sm text-gray-700">{selectedElement?.author?.username}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    );
+};