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

package/lib/components/AIAgent/AIAgent.js

@@ -0,0 +1,904 @@
+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 = ({
+  channelId,
+  onSendMessage,
+  placeholder = 'Ask me anything...',
+  className = '',
+  currentUser,
+  isDesktopView = false,
+  isSmallScreen = false,
+  setMessages,
+  setSelectedPost,
+  messages,
+  selectedPost,
+  setIsLoading,
+  isLoading
+}) => {
+  const [state, send] = useMachine(aiAgentMachine);
+  useApolloClient();
+  const {
+    startUpload
+  } = useUploadFiles();
+  const [sendMsg] = useSendMessagesMutation();
+  const auth = useSelector(userSelector, shallowEqual);
+  const {
+    id: pathChannelId
+  } = useParams();
+  useNavigate();
+  const {
+    modelConfig,
+    updateModelConfig,
+    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: {
+      props: {
+        projectId: actualChannelId?.toString()
+      },
+      parentId: null,
+      limit: MESSAGES_PER_PAGE
+    },
+    skip: !actualChannelId,
+    fetchPolicy: 'cache-and-network',
+    errorPolicy: 'all',
+    notifyOnNetworkStatusChange: true,
+    returnPartialData: true,
+    pollInterval: 0,
+    context: {
+      cacheKey: 'messages-list'
+    }
+  });
+  const {
+    messages: aiMessages,
+    error,
+    isTyping
+  } = state.context;
+  const {
+    t
+  } = useTranslation('translations');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedElement, setSelectedElement] = useState(null);
+  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 [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);
+  };
+  const onClose = () => {
+    setIsOpen(false);
+    setSelectedElement(null);
+  };
+  // Enhanced scroll to bottom function
+  const scrollToBottom = useCallback((behavior = 'smooth', delay = 0) => {
+    setTimeout(() => {
+      if (bottomRef.current) {
+        bottomRef.current.scrollIntoView({
+          behavior,
+          block: 'end',
+          inline: 'nearest'
+        });
+      }
+    }, 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;
+    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: []
+          },
+          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 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,
+              extraProps
+            },
+            optimisticResponse: {
+              __typename: 'Mutation',
+              sendMessage: createOptimisticMessage(uploadedFiles)
+            },
+            update: (cache, {
+              data: mutationData
+            }) => {
+              if (!mutationData?.sendMessage) return;
+              if (mutationData?.sendMessage?.id) {
+                handleGenerateAiCode(mutationData.sendMessage.id);
+              }
+            }
+          });
+        } else {
+          await sendMsg({
+            variables: {
+              channelId: actualChannelId,
+              content: message,
+              extraProps
+            },
+            optimisticResponse: {
+              __typename: 'Mutation',
+              sendMessage: createOptimisticMessage()
+            },
+            update: (cache, {
+              data: mutationData
+            }) => {
+              if (!mutationData?.sendMessage) return;
+              console.log('mutationData', JSON.stringify(mutationData, null, 2));
+              if (mutationData?.sendMessage?.id) {
+                handleGenerateAiCode(mutationData.sendMessage.id);
+              }
+            }
+          });
+        }
+        // Scroll to bottom after send
+        scrollToBottom('smooth', 0);
+      } catch (error) {
+        console.error('Error sending message from AIAgent:', error);
+        setIsLoading(false);
+      }
+      return;
+    }
+    // If no channelId, we skip sending here.
+  }, [actualChannelId, auth, startUpload, sendMsg, scrollToBottom, getValidatedConfig, hasApiKey, modelConfig]);
+  const fixError = useCallback(errorMessage => {
+    // Use sendMessage to fix the error, which will use createProject flow
+    return handleSend(errorMessage);
+  }, [handleSend]);
+  const handleRetry = useCallback(() => {
+    send({
+      type: 'RETRY'
+    });
+  }, [send]);
+  const handleClearError = useCallback(() => {
+    send({
+      type: 'CLEAR_ERROR'
+    });
+  }, [send]);
+  // Use only default/regular messages and ignore AI messages
+  const allMessages = useMemo(() => {
+    if (!regularMessages) return [];
+    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
+    }));
+    return regularMessagesFormatted;
+  }, [regularMessages, currentUser]);
+  // Build list with date separators similar to MessagesBuilderUi
+  const messageListWithDates = useMemo(() => {
+    let currentDate = '';
+    const res = [];
+    allMessages?.forEach(msg => {
+      const date = new Date(msg.createdAt);
+      let msgDate;
+      if (isToday(date)) msgDate = t('tailwind_ui_inbox.today');else if (isYesterday(date)) msgDate = t('tailwind_ui_inbox.yesterday');else msgDate = format(date, 'eee, do MMMM');
+      if (msgDate !== currentDate) {
+        res.push({
+          type: 'date',
+          content: msgDate
+        });
+        currentDate = msgDate;
+      }
+      res.push(msg);
+    });
+    if (allMessages && allMessages.length > 0) {
+      const todayLabel = t('tailwind_ui_inbox.today');
+      if (currentDate !== todayLabel) {
+        res.push({
+          type: 'date',
+          content: todayLabel
+        });
+      }
+    }
+    return res;
+  }, [allMessages, t]);
+  // Group messages by date sections for Slack-like rendering
+  const messagesByDate = useMemo(() => {
+    const sections = [];
+    let currentSection = {
+      date: null,
+      messages: []
+    };
+    messageListWithDates.forEach(item => {
+      if (item?.type === 'date') {
+        if (currentSection.messages.length > 0) {
+          sections.push(currentSection);
+        }
+        currentSection = {
+          date: item.content,
+          messages: []
+        };
+      } else {
+        currentSection.messages.push(item);
+      }
+    });
+    if (currentSection.messages.length > 0) {
+      sections.push(currentSection);
+    }
+    return sections;
+  }, [messageListWithDates]);
+  // Show all messages without limiting
+  const limitedMessagesByDate = useMemo(() => {
+    if (!messagesByDate || messagesByDate.length === 0) return [];
+    return messagesByDate;
+  }, [messagesByDate]);
+  // Ensure we show complete conversation pairs (user message + AI response)
+  const completeConversationMessages = useMemo(() => {
+    if (!limitedMessagesByDate || limitedMessagesByDate.length === 0) return [];
+    const completeSections = [];
+    limitedMessagesByDate.forEach(section => {
+      const completeMessages = [];
+      const sectionMessages = [...section.messages];
+      console.log('🔄 Processing section for complete conversations:', {
+        sectionDate: section.date,
+        totalMessages: sectionMessages.length,
+        messages: sectionMessages.map(m => ({
+          sender: m.sender,
+          isUserMessage: m.isUserMessage,
+          message: m.message?.substring(0, 30) + '...'
+        }))
+      });
+      // Group messages into conversation pairs
+      for (let i = 0; i < sectionMessages.length; i++) {
+        const currentMsg = sectionMessages[i];
+        // If this is a user message, look for its AI response
+        if (currentMsg.sender === 'user' || currentMsg.isUserMessage) {
+          completeMessages.push(currentMsg);
+          // Look for the corresponding AI response (next message should be AI)
+          if (i + 1 < sectionMessages.length) {
+            const nextMsg = sectionMessages[i + 1];
+            if (nextMsg.sender === 'ai' || !nextMsg.isUserMessage) {
+              completeMessages.push(nextMsg);
+              i++; // Skip the next message since we've already added it
+            }
+          }
+        } else if (currentMsg.sender === 'ai' || !currentMsg.isUserMessage) {
+          // If this is an AI message without a preceding user message, still show it
+          completeMessages.push(currentMsg);
+        }
+      }
+      console.log('🔄 Complete messages for section:', {
+        sectionDate: section.date,
+        completeMessages: completeMessages.map(m => ({
+          sender: m.sender,
+          isUserMessage: m.isUserMessage,
+          message: m.message?.substring(0, 30) + '...'
+        }))
+      });
+      if (completeMessages.length > 0) {
+        completeSections.push({
+          ...section,
+          messages: completeMessages
+        });
+      }
+    });
+    return completeSections;
+  }, [limitedMessagesByDate]);
+  // Auto scroll to bottom when messages, typing status, or AI responses change
+  useEffect(() => {
+    //  scrollToBottom('smooth', 100);
+  }, [completeConversationMessages?.length, isTyping, aiMessages.length, scrollToBottom]);
+  // Cleanup any pending timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (successThinkingTimeoutRef.current) {
+        clearTimeout(successThinkingTimeoutRef.current);
+      }
+    };
+  }, []);
+  const extractCleanContent = useCallback(summary => {
+    console.log('summary...........', summary);
+    if (!summary) return 'Project generated successfully!';
+    const summeryData = summary.replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '').replace(/<task_summary>([\s\S]*?)<\/task_summary>/g, '');
+    if (summeryData && summeryData.trim() !== '' && summeryData.trim()?.length > 0) {
+      return summeryData || 'Project generated successfully!';
+    }
+    // Extract content from <task_summary> tags
+    const taskSummaryMatch = summary.match(/<task_summary>([\s\S]*?)<\/task_summary>/);
+    if (taskSummaryMatch) {
+      // const removedCanvasLayers = summary.replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '').replace(/<task_summary>([\s\S]*?)<\/task_summary>/g, '');
+      return taskSummaryMatch?.[1]?.trim() ?? 'Project generated successfully!';
+    }
+    // If no task_summary tags, remove canvas_layers and return the rest
+    const withoutCanvasLayers = summary.replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '').trim();
+    return withoutCanvasLayers || 'Project generated successfully!';
+  }, []);
+  return React__default.createElement("div", {
+    className: `flex flex-col h-full ${className}`
+  }, React__default.createElement("div", {
+    className: "border-b border-gray-200 bg-white"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-between px-4 py-3"
+  }, React__default.createElement("div", {
+    className: "flex space-x-6"
+  }, React__default.createElement("button", {
+    onClick: () => setActiveTab('chat'),
+    className: `relative ${activeTab === 'chat' ? 'text-blue-600 font-medium' : 'text-gray-500 hover:text-gray-700'} text-sm transition-colors`
+  }, React__default.createElement("span", null, "Chat"), activeTab === 'chat' && React__default.createElement("div", {
+    className: "absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"
+  })), React__default.createElement("button", {
+    onClick: () => setActiveTab('history'),
+    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"
+  }))))), activeTab === 'history' ? (/* History Tab Content */
+  React__default.createElement("div", {
+    className: "flex-1 overflow-y-auto bg-white"
+  }, React__default.createElement("div", {
+    className: "px-4 py-3 border-b border-gray-200"
+  }, React__default.createElement("div", {
+    className: "relative"
+  }, React__default.createElement("div", {
+    className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
+  }, React__default.createElement("svg", {
+    className: "h-5 w-5 text-gray-400",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+  }))), React__default.createElement("input", {
+    type: "text",
+    placeholder: "Search messages...",
+    className: "block w-full pl-10 pr-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+  }), React__default.createElement("div", {
+    className: "absolute inset-y-0 right-0 pr-3 flex items-center"
+  }, React__default.createElement("button", {
+    className: "text-gray-400 hover:text-gray-600"
+  }, React__default.createElement("svg", {
+    className: "h-5 w-5",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    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.filter(msg => msg?.propsConfiguration?.contents?.role === 'USER').map((msg, index) => {
+    new Date(msg.createdAt);
+    return React__default.createElement("div", {
+      key: msg.id || index,
+      className: "mb-4"
+    }, React__default.createElement("div", {
+      className: "flex items-center justify-end mb-2"
+    }, React__default.createElement("button", {
+      className: "text-blue-600 text-sm underline hover:text-blue-800 flex items-center"
+    }, React__default.createElement("svg", {
+      className: "w-4 h-4 mr-1",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor"
+    }, React__default.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M15 19l-7-7 7-7"
+    })), "Restore to this point")), React__default.createElement(ModernMessageGroupComponent, {
+      messages: [{
+        id: msg.id,
+        //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',
+          familyName: '',
+          fullName: 'User',
+          username: 'user',
+          email: '',
+          picture: null,
+          alias: [],
+          tokens: []
+        },
+        createdAt: msg.createdAt,
+        type: 'Simple',
+        isDelivered: false,
+        isRead: false,
+        parentId: null,
+        fromServer: null,
+        updatedAt: msg.createdAt,
+        propsConfiguration: msg.propsConfiguration,
+        props: msg.props,
+        files: msg.files,
+        replies: null,
+        channel: null,
+        isPinned: false
+      }],
+      currentUser: currentUser,
+      onOpen: onOpen,
+      onMessageClick: msg => setSelectedPost(msg),
+      isDesktopView: isDesktopView,
+      isSmallScreen: isSmallScreen
+    }));
+  }) :
+  // Fallback entries when no messages
+  React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "mb-4"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-end mb-2"
+  }, React__default.createElement("button", {
+    className: "text-blue-600 text-sm underline hover:text-blue-800 flex items-center"
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4 mr-1",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M15 19l-7-7 7-7"
+  })), "Restore to this point")), React__default.createElement("div", {
+    className: "bg-gray-100 rounded-lg p-3"
+  }, React__default.createElement("p", {
+    className: "text-sm text-gray-900"
+  }, "Sample message for demonstration"))))))) : (/* Chat Tab Content */
+  React__default.createElement("div", {
+    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'}`
+  }, (!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"
+  }, "Describe your idea and I'll help you create it step by step"), React__default.createElement("div", {
+    className: "text-gray-400 text-sm"
+  }, "Start a new conversation by typing your message below")), completeConversationMessages?.map((section, sectionIndex) => React__default.createElement("div", {
+    key: `section-${sectionIndex}`,
+    className: "w-full px-4"
+  }, section.date && React__default.createElement("div", {
+    className: "flex items-center justify-center my-3"
+  }, React__default.createElement("div", {
+    className: "flex-grow border-t border-gray-200"
+  }), React__default.createElement("div", {
+    className: "mx-4 px-3 py-1 bg-white border border-gray-200 rounded-full text-xs font-medium text-gray-600"
+  }, section.date), React__default.createElement("div", {
+    className: "flex-grow border-t border-gray-200"
+  })), React__default.createElement("div", {
+    className: `${isDesktopView ? 'mb-2' : 'mb-1'}`
+  }, section.messages.map((msg, msgIndex) => React__default.createElement("div", {
+    key: msg.id || msgIndex,
+    className: "mb-3"
+  }, msg.isAIMessage && React__default.createElement("div", {
+    className: "flex items-center mb-2"
+  }, React__default.createElement("div", {
+    className: "w-2 h-2 bg-blue-500 rounded-full mr-2"
+  }), React__default.createElement("span", {
+    className: "text-xs text-blue-600 font-medium"
+  }, "AI Assistant")), msg.isLoading ?
+  // Show loader for loading messages
+  React__default.createElement("div", {
+    className: "flex items-center space-x-2 bg-gray-50 border border-gray-200 px-4 py-3 rounded-lg"
+  }, React__default.createElement("div", {
+    className: "w-4 h-4 border-2 border-gray-300 border-t-gray-500 rounded-full animate-spin"
+  }), React__default.createElement("span", {
+    className: "text-sm text-gray-600"
+  }, msg.isProcessing ? 'Thinking...' : 'Thinking...')) :
+  // Show normal message for non-loading messages
+  React__default.createElement(ModernMessageGroupComponent, {
+    messages: [{
+      id: msg.id,
+      // 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',
+        familyName: 'Assistant',
+        fullName: 'AI Assistant',
+        username: 'ai-assistant',
+        email: 'ai@assistant.com',
+        picture: null,
+        alias: [],
+        tokens: []
+      },
+      createdAt: msg.createdAt,
+      type: 'Simple',
+      isDelivered: false,
+      isRead: false,
+      parentId: null,
+      fromServer: null,
+      updatedAt: msg.createdAt,
+      propsConfiguration: msg.propsConfiguration,
+      props: msg.props,
+      files: msg.files,
+      replies: null,
+      channel: null,
+      isPinned: false
+    }],
+    currentUser: currentUser,
+    onOpen: onOpen,
+    onMessageClick: msg => setSelectedPost(msg),
+    isDesktopView: isDesktopView,
+    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"
+  }, React__default.createElement("div", {
+    className: "bg-gray-50 border border-gray-200 px-4 py-3 rounded-lg"
+  }, React__default.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, React__default.createElement("div", {
+    className: "w-4 h-4 border-2 border-gray-300 border-t-gray-500 rounded-full animate-spin"
+  }), React__default.createElement("span", {
+    className: "text-sm text-gray-600"
+  }, "Thinking..."))))), React__default.createElement("div", {
+    ref: bottomRef
+  })), React__default.createElement(SubscriptionHandler, {
+    subscribeToMore: subscribeToMore,
+    document: OnChatMessageAddedDocument,
+    variables: {
+      channelId: actualChannelId?.toString()
+    },
+    enabled: !!actualChannelId && !!subscribeToMore,
+    updateQuery: (prev, {
+      subscriptionData
+    }) => {
+      console.log('Subscription updateQuery called:', {
+        prev,
+        subscriptionData
+      });
+      if (!subscriptionData.data) {
+        console.log('No subscription data, returning prev');
+        return prev;
+      }
+      const newMessage = subscriptionData.data.chatMessageAdded;
+      console.log('New message received via subscription:', newMessage);
+      return {
+        ...prev,
+        messages: {
+          ...prev?.messages,
+          data: uniqBy([...(prev?.messages?.data || []), newMessage], 'id'),
+          totalCount: (prev?.messages?.totalCount || 0) + 1
+        }
+      };
+    },
+    onError: error => {
+      console.error('Subscription error:', error);
+    }
+  }))), error && React__default.createElement("div", {
+    className: "mx-4 mb-4 p-3 bg-red-50 border border-red-200 rounded-lg"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-between"
+  }, React__default.createElement("div", {
+    className: "text-red-800 text-sm"
+  }, error), React__default.createElement("div", {
+    className: "flex space-x-2"
+  }, React__default.createElement("button", {
+    onClick: handleRetry,
+    className: "px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors"
+  }, "Retry"), React__default.createElement("button", {
+    onClick: handleClearError,
+    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"
+  }, React__default.createElement(InputComponent, {
+    channelId: actualChannelId,
+    handleSend: handleSend,
+    placeholder: placeholder,
+    modelConfig: modelConfig,
+    onModelConfigChange: updateModelConfig
+  })), isOpen ? React__default.createElement("div", null, React__default.createElement("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 z-40",
+    onClick: onClose
+  }), React__default.createElement("div", {
+    className: "fixed z-50 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+  }, React__default.createElement("div", {
+    className: "bg-white w-[1036px] h-[700px] rounded-lg shadow-xl",
+    style: {
+      boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
+    }
+  }, React__default.createElement("div", {
+    className: "flex justify-between border-b border-gray-300 pb-4 pt-4"
+  }, React__default.createElement("button", {
+    onClick: onClose,
+    className: "w-8 ml-3 text-black hover:text-black focus:outline-none"
+  }, React__default.createElement("svg", {
+    className: "w-6 h-6",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M6 18L18 6M6 6l12 12"
+  })))), React__default.createElement("div", {
+    className: "p-4"
+  }, React__default.createElement("div", {
+    className: "text-sm text-gray-700"
+  }, selectedElement?.author?.username))))) : null);
+};export{AIAgent};//# sourceMappingURL=AIAgent.js.map