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

package/lib/components/AIAgent/AIAgent.js

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useMemo,useCallback,useEffect}from'react';import {useMachine}from'@xstate/react';import {aiAgentMachine}from'../../machines/aiAgentMachine.js';import {InputComponent}from'../InboxMessage/InputComponent.js';import {isToday,isYesterday,format}from'date-fns';import {useTranslation}from'react-i18next';import {ModernMessageGroupComponent}from'../InboxMessage/message-widgets/ModernMessageGroup.js';import {useUploadFiles}from'@messenger-box/platform-client';import {useSelector,shallowEqual}from'react-redux';import {userSelector}from'@adminide-stack/user-auth0-client';import {objectId}from'@messenger-box/core';import {useApolloClient}from'@apollo/client/index.js';import {useSendMessagesMutation,useMessagesQuery,MessagesDocument,OnChatMessageAddedDocument}from'common/graphql';import {config}from'../../config/env-config.js';import {orderBy,uniqBy}from'lodash-es';import {useParams}from'@remix-run/react';import {SubscriptionHandler}from'../InboxMessage/SubscriptionHandler.js';const {
+import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {useMachine}from'@xstate/react';import {aiAgentMachine}from'../../machines/aiAgentMachine.simple.js';import {InputComponent}from'../InboxMessage/InputComponent.js';import {isToday,isYesterday,format}from'date-fns';import {useTranslation}from'react-i18next';import {ModernMessageGroupComponent}from'../InboxMessage/message-widgets/ModernMessageGroup.js';import {useUploadFiles}from'@messenger-box/platform-client';import {useSelector,shallowEqual}from'react-redux';import {userSelector}from'@adminide-stack/user-auth0-client';import {objectId}from'@messenger-box/core';import {useApolloClient}from'@apollo/client/index.js';import {useSendMessagesMutation,useGenerateAiCodeMutation,useRecreateSandboxMutation,useOnChatMessageAddedSubscription,useSandboxErrorSubscription,useMessagesQuery,MessagesDocument,OnChatMessageAddedDocument}from'common/graphql';import {config}from'../../config/env-config.js';import {orderBy,uniqBy}from'lodash-es';import {useParams,useNavigate}from'@remix-run/react';import {SubscriptionHandler}from'../InboxMessage/SubscriptionHandler.js';import {usePersistentModelConfig}from'../../hooks/usePersistentModelConfig.js';const {
   MESSAGES_PER_PAGE
 } = config;
 const AIAgent = ({
@@ -8,7 +8,13 @@ const AIAgent = ({
   className = '',
   currentUser,
   isDesktopView = false,
-  isSmallScreen = false
+  isSmallScreen = false,
+  setMessages,
+  setSelectedPost,
+  messages,
+  selectedPost,
+  setIsLoading,
+  isLoading
 }) => {
   const [state, send] = useMachine(aiAgentMachine);
   useApolloClient();
@@ -16,16 +22,45 @@ const AIAgent = ({
     startUpload
   } = useUploadFiles();
   const [sendMsg] = useSendMessagesMutation();
-  useSelector(userSelector, shallowEqual);
+  const auth = useSelector(userSelector, shallowEqual);
   const {
     id: pathChannelId
   } = useParams();
+  useNavigate();
+  const {
+    modelConfig,
+    getValidatedConfig,
+    hasApiKey
+  } = usePersistentModelConfig();
+  // const [isLoading, setIsLoading] = useState(false);
+  const [errorData, setError] = useState(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
     },
@@ -49,24 +84,131 @@ const AIAgent = ({
   } = useTranslation('translations');
   const [isOpen, setIsOpen] = useState(false);
   const [selectedElement, setSelectedElement] = useState(null);
-  const [currentProcessingMessage, setCurrentProcessingMessage] = useState(null);
-  const [processedMessageIds, setProcessedMessageIds] = useState(new Set());
   const [activeTab, setActiveTab] = useState('chat');
   const bottomRef = useRef(null);
+  const [sandboxErrors, setSandboxErrors] = useState([]);
+  const [currentFiles, setCurrentFiles] = useState({});
+  const [canvasLayers, setCanvasLayers] = useState([]);
   // 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(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') ;
+      scrollToBottom('smooth', 0);
+    }
+  }, [regularMessages, send]);
+  const handleGenerateAiCode = useCallback(messageId => {
+    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 => {
     setSelectedElement(element);
     setIsOpen(true);
@@ -87,87 +229,148 @@ const AIAgent = ({
       }
     }, delay);
   }, []);
+  const recreateSandboxForFragment = useCallback(async messageId => {
+    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, files = []) => {
     // 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 => ({
-        __typename: 'Post',
-        id: postId,
-        message,
-        createdAt: currentDate.toISOString(),
-        updatedAt: currentDate.toISOString(),
-        author: {
-          __typename: 'UserAccount',
-          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',
-        parentId: null,
-        fromServer: false,
-        channel: {
-          __typename: 'Channel',
-          id: actualChannelId
-        },
-        propsConfiguration: {
-          __typename: 'MachineConfiguration',
-          id: null,
-          resource: '',
-          contents: null,
-          keys: null,
-          target: null,
-          overrides: null
-        },
-        props: {},
-        files: {
-          __typename: 'FilesInfo',
-          data: files || [],
-          totalCount: files?.length || 0
-        },
-        replies: {
-          __typename: 'Messages',
-          data: [],
-          totalCount: 0
-        }
-      });
-      const optimisticMessage = createOptimisticMessage(files);
-      if (files?.length > 0) {
-        const uploadResponse = await startUpload({
-          file: files,
-          saveUploadedFile: {
-            variables: {
-              postId
-            }
+    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 => ({
+          __typename: 'Post',
+          id: postId,
+          message,
+          createdAt: currentDate.toISOString(),
+          updatedAt: currentDate.toISOString(),
+          author: {
+            __typename: 'UserAccount',
+            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: []
           },
-          createUploadLink: {
-            variables: {
-              postId
-            }
+          isDelivered: false,
+          isRead: false,
+          type: 'TEXT',
+          parentId: null,
+          fromServer: false,
+          channel: {
+            __typename: 'Channel',
+            id: actualChannelId
+          },
+          propsConfiguration: {
+            __typename: 'MachineConfiguration',
+            id: null,
+            resource: '',
+            contents: null,
+            keys: null,
+            target: null,
+            overrides: null
+          },
+          props: {},
+          files: {
+            __typename: 'FilesInfo',
+            data: uploadedFiles || [],
+            totalCount: uploadedFiles?.length || 0
+          },
+          replies: {
+            __typename: 'Messages',
+            data: [],
+            totalCount: 0
           }
         });
-        const uploadedFiles = uploadResponse.data;
-        if (uploadedFiles) {
-          const fileIds = uploadedFiles.map(f => f.id);
+        const cacheMessagesQuery = {
+          query: MessagesDocument,
+          variables: {
+            // Match variables used in useMessagesQuery above
+            props: {
+              projectId: actualChannelId.toString()
+            },
+            parentId: null,
+            limit: MESSAGES_PER_PAGE
+          }
+        };
+        const extraProps = {
+          projectId: actualChannelId,
+          template: modelConfig?.template || 'vite-react',
+          role: 'USER',
+          sendNotificationWithProjectId: true
+        };
+        if (files?.length > 0) {
+          const uploadResponse = await startUpload({
+            file: files,
+            saveUploadedFile: {
+              variables: {
+                postId
+              }
+            },
+            createUploadLink: {
+              variables: {
+                postId
+              }
+            }
+          });
+          const uploadedFiles = uploadResponse.data;
+          const fileIds = (uploadedFiles || []).map(f => f.id);
           await sendMsg({
             variables: {
               postId,
               channelId: actualChannelId,
               content: message,
-              files: fileIds
+              files: fileIds,
+              extraProps
             },
             optimisticResponse: {
               __typename: 'Mutation',
@@ -177,282 +380,47 @@ const AIAgent = ({
               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);
-                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
-          },
-          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);
-              if (existingData?.messages) {
-                cache.writeQuery({
-                  ...messagesQuery,
-                  data: {
-                    messages: {
-                      ...existingData.messages,
-                      data: [...(existingData.messages.data || []), mutationData.sendMessage],
-                      totalCount: (existingData.messages.totalCount || 0) + 1
-                    }
-                  }
-                });
+        } 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);
               }
-            } catch (error) {
-              console.debug('Cache update failed (expected on first message):', error);
             }
-          }
-        });
-      }
-      // Send message to AI agent machine
-      send({
-        type: 'SEND_MESSAGE',
-        message: message.trim()
-      });
-      // Ensure we scroll to the newest message immediately
-      scrollToBottom('smooth', 0);
-      // When sending new messages, increment the displayed count to show the new message
-      // This ensures we show both the existing last message and the new message
-      setDisplayedMessageCount(prev => {
-        const newCount = Math.max(prev + 1, 2);
-        console.log('🔄 Message sent: Updating displayedMessageCount', {
-          previous: prev,
-          new: newCount,
-          reason: 'New message sent'
-        });
-        return newCount;
-      });
-      // Call the optional onSendMessage prop if provided
-      if (onSendMessage) {
-        await onSendMessage(message, files);
-      }
-    } catch (error) {
-      console.error('Error sending message:', error);
-    }
-  }, [actualChannelId, currentUser, startUpload, sendMsg, send, onSendMessage]);
-  // Debug effect to track AI messages changes
-  useEffect(() => {
-    console.log('🤖 AI messages state changed:', aiMessages.length);
-    if (aiMessages.length > 0) {
-      console.log('🤖 Latest AI message:', aiMessages[aiMessages.length - 1]);
-      // Clear processing message if we have new AI responses
-      if (currentProcessingMessage !== null) {
-        console.log('🤖 AI response received, clearing processing message');
-        setCurrentProcessingMessage(null);
-      }
-      // Auto-scroll to bottom when new AI response appears
-      scrollToBottom('smooth', 200);
-    } else {
-      console.log('🤖 No AI messages in state - this might indicate an issue');
-    }
-  }, [aiMessages, currentProcessingMessage]);
-  // Debug effect to track machine state changes
-  useEffect(() => {
-    console.log('🤖 Machine state changed:', state.value);
-    console.log('🤖 Machine context:', {
-      messagesCount: state.context.messages.length,
-      hasMessageToRespondTo: !!state.context.messageToRespondTo,
-      messageToRespondTo: state.context.messageToRespondTo
-    });
-    // Check if we're in processing state but no AI response is being generated
-    if (state.value === 'processing' && !state.context.messageToRespondTo) {
-      console.log('🤖 ⚠️ WARNING: In processing state but no messageToRespondTo!');
-    }
-    // Auto-scroll when AI starts processing
-    if (state.value === 'processing') {
-      scrollToBottom('smooth', 100);
-    }
-  }, [state.value, state.context, scrollToBottom]);
-  // Send regular messages to AI agent machine for context
-  useEffect(() => {
-    if (regularMessages && regularMessages.length > 0) {
-      send({
-        type: 'UPDATE_REGULAR_MESSAGES',
-        messages: regularMessages
-      });
-    }
-  }, [regularMessages, send]);
-  // Reset processed messages when regular messages change completely
-  useEffect(() => {
-    if (regularMessages && regularMessages.length > 0) {
-      // Check if we have completely new messages (different IDs)
-      new Set(regularMessages.map(msg => msg.id));
-      const hasNewMessages = !regularMessages.every(msg => 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, index) => {
-        // 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, index) => {
-        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, prevIndex) => 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);
-        }
+        // Scroll to bottom after send
+        scrollToBottom('smooth', 0);
+      } catch (error) {
+        console.error('Error sending message from AIAgent:', error);
+        setIsLoading(false);
       }
+      return;
     }
-  }, [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]);
+    // If no channelId, we skip sending here.
+  }, [actualChannelId, auth, startUpload, sendMsg, scrollToBottom, getValidatedConfig, hasApiKey, modelConfig]);
+  const fixError = useCallback(errorMessage => {
+    // Use sendMessage to fix the error, which will use createProject flow
+    return handleSend(errorMessage);
+  }, [handleSend]);
   const handleRetry = useCallback(() => {
     send({
       type: 'RETRY'
@@ -463,173 +431,22 @@ const AIAgent = ({
       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 [];
-    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.message || m.content || '',
       createdAt: new Date(m.createdAt || Date.now()),
+      propsConfiguration: m.propsConfiguration,
+      props: m.props,
+      files: m.files,
       sender: 'user',
       author: m.author,
-      isUserMessage: true // Explicitly mark as user message
+      isUserMessage: true
     }));
-    const aiMessagesFormatted = (aiMessages || []).map(m => ({
-      id: m.id,
-      message: m.content,
-      createdAt: new Date(m.timestamp || Date.now()),
-      sender: 'ai',
-      isUserMessage: false // Explicitly mark as AI message
-    }));
-    // Show ALL user messages immediately, interleave AI responses as they arrive
-    const interleavedMessages = [];
-    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
-  useCallback(() => {
-    setDisplayedMessageCount(1);
-  }, []);
+    return regularMessagesFormatted;
+  }, [regularMessages, currentUser]);
   // Build list with date separators similar to MessagesBuilderUi
   const messageListWithDates = useMemo(() => {
     let currentDate = '';
@@ -683,57 +500,11 @@ const AIAgent = ({
     }
     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 = [];
-    // 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(() => {
     if (!limitedMessagesByDate || limitedMessagesByDate.length === 0) return [];
@@ -788,14 +559,27 @@ const AIAgent = ({
   }, [limitedMessagesByDate]);
   // 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 => {
+    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 React__default.createElement("div", {
     className: `flex flex-col h-full ${className}`
   }, React__default.createElement("div", {
@@ -814,27 +598,7 @@ const AIAgent = ({
     className: `relative ${activeTab === 'history' ? 'text-blue-600 font-medium' : 'text-gray-500 hover:text-gray-700'} text-sm transition-colors`
   }, React__default.createElement("span", null, "History"), activeTab === 'history' && React__default.createElement("div", {
     className: "absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"
-  }))), React__default.createElement("button", {
-    onClick: () => {
-      // Reset to show only the last message for new chat
-      setDisplayedMessageCount(1);
-      setHasMoreMessages(false);
-      // Clear processing state
-      setProcessedMessageIds(new Set());
-      setCurrentProcessingMessage(null);
-      // Clear AI messages by sending update event to the machine
-      send({
-        type: 'UPDATE',
-        value: {
-          messages: []
-        }
-      });
-    },
-    className: "px-4 py-2 text-sm text-gray-700  border border-gray-300 rounded-lg hover:bg-gray-200 transition-colors",
-    style: {
-      borderRadius: '10px'
-    }
-  }, "New Chat"))), activeTab === 'history' ? (/* History Tab Content */
+  }))))), activeTab === 'history' ? (/* History Tab Content */
   React__default.createElement("div", {
     className: "flex-1 overflow-y-auto bg-white"
   }, React__default.createElement("div", {
@@ -873,7 +637,7 @@ const AIAgent = ({
     d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
   })))))), React__default.createElement("div", {
     className: "px-4 py-2"
-  }, regularMessages && regularMessages.length > 0 ? regularMessages.map((msg, index) => {
+  }, regularMessages && regularMessages.length > 0 ? regularMessages.filter(msg => msg?.propsConfiguration?.contents?.role === 'USER').map((msg, index) => {
     new Date(msg.createdAt);
     return React__default.createElement("div", {
       key: msg.id || index,
@@ -895,7 +659,8 @@ const AIAgent = ({
     })), "Restore to this point")), React__default.createElement(ModernMessageGroupComponent, {
       messages: [{
         id: msg.id,
-        message: msg.message || msg.content || 'No message content',
+        //message: msg.message || msg.content || 'No message content',
+        message: msg?.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',
@@ -914,16 +679,16 @@ const AIAgent = ({
         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
       }],
       currentUser: currentUser,
       onOpen: onOpen,
-      onMessageClick: () => {},
+      onMessageClick: msg => setSelectedPost(msg),
       isDesktopView: isDesktopView,
       isSmallScreen: isSmallScreen
     }));
@@ -954,12 +719,7 @@ const AIAgent = ({
     className: "flex-1 overflow-y-auto bg-white"
   }, React__default.createElement("div", {
     className: `w-full pb-4 pt-2 ${isDesktopView ? 'space-y-3 max-w-full mx-auto' : isSmallScreen ? 'space-y-2' : 'space-y-2'}`
-  }, hasMoreMessages && React__default.createElement("div", {
-    className: "px-4 py-3 text-center"
-  }, React__default.createElement("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")), (!completeConversationMessages || completeConversationMessages.length === 0) && React__default.createElement("div", {
+  }, (!completeConversationMessages || completeConversationMessages.length === 0) && React__default.createElement("div", {
     className: "px-4 py-8 text-center"
   }, React__default.createElement("div", {
     className: "text-gray-500 text-lg font-medium mb-2"
@@ -1000,7 +760,8 @@ const AIAgent = ({
   React__default.createElement(ModernMessageGroupComponent, {
     messages: [{
       id: msg.id,
-      message: msg.message,
+      // message: msg.message,
+      message: msg?.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',
@@ -1019,19 +780,23 @@ const AIAgent = ({
       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
     }],
     currentUser: currentUser,
     onOpen: onOpen,
-    onMessageClick: () => {},
+    onMessageClick: msg => setSelectedPost(msg),
     isDesktopView: isDesktopView,
-    isSmallScreen: isSmallScreen
-  })))))), isTyping && React__default.createElement("div", {
+    isSmallScreen: isSmallScreen,
+    sandboxErrors: sandboxErrors,
+    currentFiles: currentFiles,
+    onFixError: fixError,
+    onRecreateSandbox: recreateSandboxForFragment
+  })))))), (isTyping || isSuccessThinking || isLoading) && React__default.createElement("div", {
     className: "px-4"
   }, React__default.createElement("div", {
     className: "flex justify-start"
@@ -1093,25 +858,7 @@ const AIAgent = ({
     className: "px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
   }, "Dismiss")))), activeTab === 'chat' && React__default.createElement("div", {
     className: "border-t border-gray-200 bg-white"
-  }, currentProcessingMessage !== null && React__default.createElement("div", {
-    className: "px-4 py-2 border-b border-blue-100 bg-blue-50"
-  }, React__default.createElement("div", {
-    className: "flex items-center space-x-2 text-sm text-blue-700"
-  }, React__default.createElement("div", {
-    className: "flex space-x-1"
-  }, React__default.createElement("div", {
-    className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce"
-  }), React__default.createElement("div", {
-    className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce",
-    style: {
-      animationDelay: '0.1s'
-    }
-  }), React__default.createElement("div", {
-    className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce",
-    style: {
-      animationDelay: '0.2s'
-    }
-  })), React__default.createElement("span", null, "AI is processing message ", currentProcessingMessage + 1, " of ", regularMessages.length))), React__default.createElement(InputComponent, {
+  }, React__default.createElement(InputComponent, {
     channelId: actualChannelId,
     handleSend: handleSend,
     placeholder: placeholder