@messenger-box/tailwind-ui-inbox 10.0.3-alpha.73 → 10.0.3-alpha.74

package/src/components/AIAgent/AIAgent.tsx

@@ -1,13 +1,12 @@
 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 { 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 } from 'common';
+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';
@@ -18,12 +17,17 @@ import {
     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 } from '@remix-run/react';
+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;
 
@@ -36,6 +40,13 @@ interface AIAgentProps {
     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> = ({
@@ -46,6 +57,12 @@ export const AIAgent: React.FC<AIAgentProps> = ({
     currentUser,
     isDesktopView = false,
     isSmallScreen = false,
+    setMessages,
+    setSelectedPost,
+    messages,
+    selectedPost,
+    setIsLoading,
+    isLoading,
 }) => {
     const [state, send] = useMachine(aiAgentMachine);
     const apolloClient = useApolloClient();
@@ -53,14 +70,31 @@ export const AIAgent: React.FC<AIAgentProps> = ({
     const [sendMsg] = useSendMessagesMutation();
     const auth: any = useSelector<Store.Auth, IUserState>(userSelector, shallowEqual);
     const { id: pathChannelId } = useParams();
-
+    const navigate = useNavigate();
+    const { modelConfig, 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: {
-            channelId: actualChannelId?.toString(),
+            props: {
+                projectId: actualChannelId?.toString(),
+            },
             parentId: null,
             limit: MESSAGES_PER_PAGE,
         },
@@ -80,28 +114,147 @@ export const AIAgent: React.FC<AIAgentProps> = ({
 
     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);
-
+    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 [displayedMessageCount, setDisplayedMessageCount] = useState(1); // Initially show only 1 message
-    const [hasMoreMessages, setHasMoreMessages] = useState(false);
+    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);
@@ -125,403 +278,205 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         }, delay);
     }, []);
 
+    const recreateSandboxForFragment = useCallback(
+        async (messageId: string) => {
+            if (!actualChannelId) {
+                console.error('No project ID available for sandbox recreation');
+                return;
+            }
+
+            try {
+                setIsLoading(true);
+                setError(null);
+
+                const response = await recreateSandbox({
+                    variables: {
+                        projectId: actualChannelId,
+                        messageId,
+                    },
+                });
+
+                if (response.data?.recreateSandbox?.success) {
+                    console.log('Sandbox recreation initiated successfully');
+                    // The subscription will handle updating the UI with the new sandbox URL
+                } else {
+                    const errorMsg = response.data?.recreateSandbox?.message || 'Failed to recreate sandbox';
+                    throw new Error(errorMsg);
+                }
+            } catch (err) {
+                console.error('Error recreating sandbox:', err);
+                setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
+                setIsLoading(false);
+            }
+        },
+        [recreateSandbox, actualChannelId],
+    );
+
     // Updated handleSend function from InboxWithAi.tsx
     const handleSend = useCallback(
         async (message: string, files: any[] = []) => {
             // Allow sending if there's either a message or files
             if ((!message || !message.trim()) && (!files || files.length === 0)) return;
-            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);
+            const validated = getValidatedConfig();
+            if (!validated && !hasApiKey) {
+                // No API key/config; do nothing (AiLandingInput would prompt config UI)
+                return;
+            }
 
-                if (files?.length > 0) {
-                    const uploadResponse = await startUpload({
-                        file: files,
-                        saveUploadedFile: { variables: { postId } },
-                        createUploadLink: { variables: { postId } },
+            // 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 uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-                    if (uploadedFiles) {
-                        const fileIds = uploadedFiles.map((f: any) => f.id);
+                    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 },
+                            variables: {
+                                postId,
+                                channelId: actualChannelId,
+                                content: message,
+                                files: fileIds,
+                                extraProps,
+                            },
                             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);
+                                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);
                                 }
                             },
                         });
                     }
-                } 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);
-                            }
-                        },
-                    });
+                    // Scroll to bottom after send
+                    scrollToBottom('smooth', 0);
+                } catch (error) {
+                    console.error('Error sending message from AIAgent:', error);
+                    setIsLoading(false);
                 }
 
-                // 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);
+                return;
             }
+            // If no channelId, we skip sending here.
         },
-        [actualChannelId, currentUser, startUpload, sendMsg, send, onSendMessage],
+        [actualChannelId, auth, startUpload, sendMsg, scrollToBottom, getValidatedConfig, hasApiKey, modelConfig],
     );
 
-    // 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 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' });
@@ -531,200 +486,24 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         send({ type: 'CLEAR_ERROR' });
     }, [send]);
 
-    // Merge AI agent messages with regular messages from query
+    // Use only default/regular messages and ignore AI messages
     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()),
+            propsConfiguration: (m as any).propsConfiguration,
+            props: (m as any).props,
+            files: (m as any).files,
             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
+            isUserMessage: true,
         }));
 
-        // 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);
-    }, []);
+        return regularMessagesFormatted;
+    }, [regularMessages, currentUser]);
 
     // Build list with date separators similar to MessagesBuilderUi
     const messageListWithDates = useMemo(() => {
@@ -778,59 +557,11 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         return sections;
     }, [messageListWithDates]);
 
-    // Limit messages to display based on displayedMessageCount (conversation pairs)
+    // Show all messages without limiting
     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]);
+        return messagesByDate;
+    }, [messagesByDate]);
 
     // Ensure we show complete conversation pairs (user message + AI response)
     const completeConversationMessages = useMemo(() => {
@@ -893,15 +624,31 @@ export const AIAgent: React.FC<AIAgentProps> = ({
 
     // Auto scroll to bottom when messages, typing status, or AI responses change
     useEffect(() => {
-        scrollToBottom('smooth', 100);
+        //  scrollToBottom('smooth', 100);
     }, [completeConversationMessages?.length, isTyping, aiMessages.length, scrollToBottom]);
 
-    // Auto scroll when processing message changes (shows loading indicators)
+    // Cleanup any pending timeout on unmount
     useEffect(() => {
-        if (currentProcessingMessage !== null) {
-            scrollToBottom('smooth', 150);
+        return () => {
+            if (successThinkingTimeoutRef.current) {
+                clearTimeout(successThinkingTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    const extractCleanContent = useCallback((summary: string): string => {
+        if (!summary) return 'Project generated successfully!';
+
+        // Extract content from <task_summary> tags
+        const taskSummaryMatch = summary.match(/<task_summary>([\s\S]*?)<\/task_summary>/);
+        if (taskSummaryMatch) {
+            return taskSummaryMatch[1].trim();
         }
-    }, [currentProcessingMessage, scrollToBottom]);
+
+        // 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}`}>
@@ -937,14 +684,8 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                     </div>
 
                     {/* New Chat Button */}
-                    <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: [] } });
                         }}
@@ -952,7 +693,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                         style={{ borderRadius: '10px' }}
                     >
                         New Chat
-                    </button>
+                    </button> */}
                 </div>
             </div>
 
@@ -1001,72 +742,84 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                     {/* 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: [],
+                            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,
                                                     },
-                                                    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>
-                                );
-                            })
+                                                ]}
+                                                currentUser={currentUser as any}
+                                                onOpen={onOpen}
+                                                onMessageClick={(msg) => setSelectedPost(msg)}
+                                                isDesktopView={isDesktopView}
+                                                isSmallScreen={isSmallScreen}
+                                            />
+                                        </div>
+                                    );
+                                })
                         ) : (
                             // Fallback entries when no messages
                             <>
@@ -1108,16 +861,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                         }`}
                     >
                         {/* 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>
-                        )}
+                        {/* Load Past Messages disabled to show all messages */}
 
                         {/* Show placeholder when no messages */}
                         {(!completeConversationMessages || completeConversationMessages.length === 0) && (
@@ -1170,7 +914,18 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                                     messages={[
                                                         {
                                                             id: msg.id,
-                                                            message: msg.message,
+                                                            // 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
@@ -1192,9 +947,9 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                                             parentId: null,
                                                             fromServer: null,
                                                             updatedAt: msg.createdAt,
-                                                            propsConfiguration: null,
-                                                            props: null,
-                                                            files: null,
+                                                            propsConfiguration: msg.propsConfiguration,
+                                                            props: msg.props,
+                                                            files: msg.files,
                                                             replies: null,
                                                             channel: null,
                                                             isPinned: false,
@@ -1202,9 +957,13 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                                     ]}
                                                     currentUser={currentUser as any}
                                                     onOpen={onOpen}
-                                                    onMessageClick={() => {}}
+                                                    onMessageClick={(msg) => setSelectedPost(msg)}
                                                     isDesktopView={isDesktopView}
                                                     isSmallScreen={isSmallScreen}
+                                                    sandboxErrors={sandboxErrors}
+                                                    currentFiles={currentFiles}
+                                                    onFixError={fixError}
+                                                    onRecreateSandbox={recreateSandboxForFragment}
                                                 />
                                             )}
                                         </div>
@@ -1214,7 +973,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                         ))}
 
                         {/* Typing indicator */}
-                        {isTyping && (
+                        {(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">
@@ -1243,6 +1002,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                 return prev;
                             }
                             const newMessage = subscriptionData.data.chatMessageAdded;
+
                             console.log('New message received via subscription:', newMessage);
 
                             return {
@@ -1287,28 +1047,6 @@ export const AIAgent: React.FC<AIAgentProps> = ({
             {/* 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>