@messenger-box/tailwind-ui-inbox 10.0.3-alpha.100

package/src/components/AIAgent/AIAgent.tsx

@@ -0,0 +1,1103 @@
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import { useActor, useMachine } from '@xstate/react';
+import { aiAgentMachine } from '../../machines/aiAgentMachine.simple';
+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, ISandboxError } 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,
+    useGenerateAiCodeMutation,
+    useOnChatMessageAddedSubscription,
+    useSandboxErrorSubscription,
+    useRecreateSandboxMutation,
+} from 'common/graphql';
+import { config } from '../../config';
+import { orderBy, uniqBy } from 'lodash-es';
+import { useParams, useNavigate } from '@remix-run/react';
+import { RoomType } from 'common';
+import { SubscriptionHandler } from '../InboxMessage/SubscriptionHandler';
+import { usePersistentModelConfig } from '../../hooks/usePersistentModelConfig';
+
+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;
+    messages?: any[];
+    setMessages?: (messages: any[]) => void;
+    selectedPost?: any;
+    setSelectedPost?: (selectedPost: any) => void;
+    setIsLoading?: (isLoading: boolean) => void;
+    isLoading?: boolean;
+    [key: string]: any; // Allow other props to be passed through to Inbox
+}
+
+export const AIAgent: React.FC<AIAgentProps> = ({
+    channelId,
+    onSendMessage,
+    placeholder = 'Ask me anything...',
+    className = '',
+    currentUser,
+    isDesktopView = false,
+    isSmallScreen = false,
+    setMessages,
+    setSelectedPost,
+    messages,
+    selectedPost,
+    setIsLoading,
+    isLoading,
+}) => {
+    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();
+    const navigate = useNavigate();
+    const { modelConfig, updateModelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
+    // 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,
+    });
+
+    // Subscribe to sandbox errors if projectId is provided
+    const { data: sandboxErrorData } = useSandboxErrorSubscription({
+        variables: { projectId: actualChannelId?.toString() || '' },
+        skip: !actualChannelId,
+    });
+
+    // Direct message query from InboxWithAiLoader.tsx
+    const messagesQuery = useMessagesQuery({
+        variables: {
+            props: {
+                projectId: 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 [activeTab, setActiveTab] = useState<'chat' | 'history'>('chat');
+    const bottomRef = useRef<HTMLDivElement | null>(null);
+    const [sandboxErrors, setSandboxErrors] = useState<ISandboxError[]>([]);
+    const [currentFiles, setCurrentFiles] = useState<Record<string, string>>({});
+    const [canvasLayers, setCanvasLayers] = useState<any[]>([]);
+    // New state variables for message display control
+    const [isSuccessThinking, setIsSuccessThinking] = useState(false);
+    const successThinkingTimeoutRef = useRef<any>(null);
+
+    // Get regular messages from direct query
+    const {
+        data: messagesData,
+        loading: messageLoading,
+        refetch: refetchMessages,
+        fetchMore: fetchMoreMessages,
+        subscribeToMore,
+    } = messagesQuery;
+
+    useEffect(() => {
+        if (actualChannelId) {
+            refetchMessages({
+                limit: MESSAGES_PER_PAGE,
+                props: {
+                    projectId: actualChannelId?.toString(),
+                },
+            });
+        }
+    }, [actualChannelId, refetchMessages]);
+
+    useEffect(() => {
+        if (chatMessageAddedData?.chatMessageAdded) {
+            console.log(
+                'chatMessageAddedData?.chatMessageAdded',
+                JSON.stringify(chatMessageAddedData?.chatMessageAdded, null, 2),
+            );
+            // handleGenerateAiCode(chatMessageAddedData.chatMessageAdded.id);
+            // Stop the success thinking loader once a new message arrives
+            if (isSuccessThinking) {
+                setIsSuccessThinking(false);
+                if (successThinkingTimeoutRef.current) {
+                    clearTimeout(successThinkingTimeoutRef.current);
+                    successThinkingTimeoutRef.current = null;
+                }
+            }
+        }
+    }, [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]);
+
+    // Handle sandbox error subscription updates
+    useEffect(() => {
+        if (sandboxErrorData?.sandboxError) {
+            const errorData = sandboxErrorData.sandboxError;
+            console.log('Sandbox error received:', errorData);
+            setSandboxErrors((prev) => [...prev, errorData.error]);
+        }
+    }, [sandboxErrorData]);
+
+    const regularMessages = useMemo(() => {
+        if (!messagesData?.messages?.data) return [];
+        return orderBy(uniqBy(messagesData.messages.data || [], 'id'), ['createdAt'], ['asc']);
+    }, [messagesData?.messages?.data]);
+
+    // Send regular messages to AI agent machine for context
+    useEffect(() => {
+        if (regularMessages && regularMessages.length > 0) {
+            send({ type: 'UPDATE_REGULAR_MESSAGES', messages: regularMessages });
+            setMessages(regularMessages);
+            const currentMessage = regularMessages?.[regularMessages.length - 1];
+            setSelectedPost(regularMessages[regularMessages.length - 1]);
+            setCurrentFiles(currentMessage?.propsConfiguration?.contents?.fragment?.files ?? {});
+            let canvasLayers = currentMessage?.propsConfiguration?.contents?.fragment?.canvasLayers ?? [];
+            const summary = currentMessage?.propsConfiguration?.contents?.fragment?.summary ?? null;
+            // If not in direct field, try to extract from summary
+            if (!canvasLayers && summary) {
+                const canvasLayersMatch = summary?.match(/<canvas_layers>([\s\S]*?)<\/canvas_layers>/);
+                if (canvasLayersMatch) {
+                    try {
+                        canvasLayers = JSON.parse(canvasLayersMatch[1]);
+                    } catch (error) {
+                        console.error('Failed to parse canvas layers from summary:', error);
+                    }
+                }
+            }
+            // Update canvas layers if available
+            if (canvasLayers && Array.isArray(canvasLayers)) {
+                setCanvasLayers(canvasLayers);
+            }
+
+            console.log('currenmessage', currentMessage);
+            if (currentMessage?.propsConfiguration?.contents?.role === 'ASSISTANT') {
+                //setIsLoading(false);
+            }
+
+            scrollToBottom('smooth', 0);
+        }
+    }, [regularMessages, send]);
+
+    const handleGenerateAiCode = useCallback(
+        (messageId: string) => {
+            generateAiCode({
+                variables: {
+                    messageId: messageId,
+                    modelConfig: modelConfig,
+                },
+                onCompleted: (res) => {
+                    if (res.generateAiCode.success) {
+                        console.log('generated_result', res);
+                        // Show AI is thinking loader on success
+                        if (successThinkingTimeoutRef.current) {
+                            clearTimeout(successThinkingTimeoutRef.current);
+                            successThinkingTimeoutRef.current = null;
+                        }
+                        setIsSuccessThinking(true);
+                        // Fallback auto-hide after 15s in case no subsequent event arrives
+                        successThinkingTimeoutRef.current = setTimeout(() => {
+                            setIsSuccessThinking(false);
+                            // setIsLoading(false);
+                            successThinkingTimeoutRef.current = null;
+                        }, 15000);
+                    }
+                },
+                onError: (err) => {
+                    console.log('err', JSON.stringify(err, null, 2));
+                    // Also ensure loader is hidden on error
+                    if (successThinkingTimeoutRef.current) {
+                        clearTimeout(successThinkingTimeoutRef.current);
+                        successThinkingTimeoutRef.current = null;
+                    }
+                    setIsSuccessThinking(false);
+                },
+            });
+        },
+        [generateAiCode, modelConfig],
+    );
+
+    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);
+    }, []);
+
+    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 fixError = useCallback(
+        (errorMessage: string) => {
+            // Use sendMessage to fix the error, which will use createProject flow
+            return handleSend(errorMessage);
+        },
+        [handleSend],
+    );
+
+    const handleRetry = useCallback(() => {
+        send({ type: 'RETRY' });
+    }, [send]);
+
+    const handleClearError = useCallback(() => {
+        send({ type: 'CLEAR_ERROR' });
+    }, [send]);
+
+    // Use only default/regular messages and ignore AI messages
+    const allMessages = useMemo(() => {
+        if (!regularMessages) return [] as any[];
+
+        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()),
+            propsConfiguration: (m as any).propsConfiguration,
+            props: (m as any).props,
+            files: (m as any).files,
+            sender: 'user',
+            author: (m as any).author,
+            isUserMessage: true,
+        }));
+
+        return regularMessagesFormatted;
+    }, [regularMessages, currentUser]);
+
+    // 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]);
+
+    // Show all messages without limiting
+    const limitedMessagesByDate = useMemo(() => {
+        if (!messagesByDate || messagesByDate.length === 0) return [];
+        return messagesByDate;
+    }, [messagesByDate]);
+
+    // 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]);
+
+    // Cleanup any pending timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (successThinkingTimeoutRef.current) {
+                clearTimeout(successThinkingTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    const extractCleanContent = useCallback((summary: string): string => {
+        console.log('summary...........', summary);
+        if (!summary) return 'Project generated successfully!';
+
+        const summeryData = summary
+            .replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '')
+            .replace(/<task_summary>([\s\S]*?)<\/task_summary>/g, '');
+        if (summeryData && summeryData.trim() !== '' && summeryData.trim()?.length > 0) {
+            return summeryData || 'Project generated successfully!';
+        }
+        // Extract content from <task_summary> tags
+        const taskSummaryMatch = summary.match(/<task_summary>([\s\S]*?)<\/task_summary>/);
+        if (taskSummaryMatch) {
+            // const removedCanvasLayers = summary.replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '').replace(/<task_summary>([\s\S]*?)<\/task_summary>/g, '');
+            return taskSummaryMatch?.[1]?.trim() ?? 'Project generated successfully!';
+        }
+
+        // If no task_summary tags, remove canvas_layers and return the rest
+        const withoutCanvasLayers = summary.replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '').trim();
+        return withoutCanvasLayers || 'Project generated successfully!';
+    }, []);
+
+    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={() => {
+                            // 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
+                                .filter((msg: any) => (msg as any)?.propsConfiguration?.contents?.role === 'USER')
+                                .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',
+                                                        message:
+                                                            (msg as any)?.propsConfiguration?.contents?.role ===
+                                                            'ASSISTANT'
+                                                                ? msg.propsConfiguration?.contents?.fragment?.summary
+                                                                    ? extractCleanContent(
+                                                                          msg.propsConfiguration?.contents?.fragment
+                                                                              ?.summary,
+                                                                      )
+                                                                    : msg.message
+                                                                : msg.message,
+                                                        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: msg.propsConfiguration,
+                                                        props: msg.props,
+                                                        files: msg.files,
+                                                        replies: null,
+                                                        channel: null,
+                                                        isPinned: false,
+                                                    },
+                                                ]}
+                                                currentUser={currentUser as any}
+                                                onOpen={onOpen}
+                                                onMessageClick={(msg) => setSelectedPost(msg)}
+                                                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 */}
+                        {/* Load Past Messages disabled to show all messages */}
+
+                        {/* 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 ? 'Thinking...' : 'Thinking...'}
+                                                    </span>
+                                                </div>
+                                            ) : (
+                                                // Show normal message for non-loading messages
+                                                <ModernMessageGroupComponent
+                                                    messages={[
+                                                        {
+                                                            id: msg.id,
+                                                            // message: msg.message,
+                                                            message:
+                                                                (msg as any)?.propsConfiguration?.contents?.role ===
+                                                                'ASSISTANT'
+                                                                    ? msg.propsConfiguration?.contents?.fragment
+                                                                          ?.summary
+                                                                        ? extractCleanContent(
+                                                                              msg.propsConfiguration?.contents?.fragment
+                                                                                  ?.summary,
+                                                                          )
+                                                                        : msg.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: msg.propsConfiguration,
+                                                            props: msg.props,
+                                                            files: msg.files,
+                                                            replies: null,
+                                                            channel: null,
+                                                            isPinned: false,
+                                                        },
+                                                    ]}
+                                                    currentUser={currentUser as any}
+                                                    onOpen={onOpen}
+                                                    onMessageClick={(msg) => setSelectedPost(msg)}
+                                                    isDesktopView={isDesktopView}
+                                                    isSmallScreen={isSmallScreen}
+                                                    sandboxErrors={sandboxErrors}
+                                                    currentFiles={currentFiles}
+                                                    onFixError={fixError}
+                                                    onRecreateSandbox={recreateSandboxForFragment}
+                                                />
+                                            )}
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+
+                        {/* Typing indicator */}
+                        {(isTyping || isSuccessThinking || isLoading) && (
+                            <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">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">
+                    {/* Removed temporary test button */}
+                    <InputComponent
+                        channelId={actualChannelId}
+                        handleSend={handleSend}
+                        placeholder={placeholder}
+                        modelConfig={modelConfig}
+                        onModelConfigChange={updateModelConfig}
+                    />
+                </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>
+    );
+};