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

package/lib/components/AIAgent/AIAgent.js

@@ -0,0 +1,1148 @@
+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 {
+  MESSAGES_PER_PAGE
+} = config;
+const AIAgent = ({
+  channelId,
+  onSendMessage,
+  placeholder = 'Ask me anything...',
+  className = '',
+  currentUser,
+  isDesktopView = false,
+  isSmallScreen = false
+}) => {
+  const [state, send] = useMachine(aiAgentMachine);
+  useApolloClient();
+  const {
+    startUpload
+  } = useUploadFiles();
+  const [sendMsg] = useSendMessagesMutation();
+  useSelector(userSelector, shallowEqual);
+  const {
+    id: pathChannelId
+  } = useParams();
+  // Get channelId from props or path params
+  const actualChannelId = channelId || pathChannelId;
+  // Direct message query from InboxWithAiLoader.tsx
+  const messagesQuery = useMessagesQuery({
+    variables: {
+      channelId: actualChannelId?.toString(),
+      parentId: null,
+      limit: MESSAGES_PER_PAGE
+    },
+    skip: !actualChannelId,
+    fetchPolicy: 'cache-and-network',
+    errorPolicy: 'all',
+    notifyOnNetworkStatusChange: true,
+    returnPartialData: true,
+    pollInterval: 0,
+    context: {
+      cacheKey: 'messages-list'
+    }
+  });
+  const {
+    messages: aiMessages,
+    error,
+    isTyping
+  } = state.context;
+  const {
+    t
+  } = useTranslation('translations');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedElement, setSelectedElement] = useState(null);
+  const [currentProcessingMessage, setCurrentProcessingMessage] = useState(null);
+  const [processedMessageIds, setProcessedMessageIds] = useState(new Set());
+  const [activeTab, setActiveTab] = useState('chat');
+  const bottomRef = useRef(null);
+  // New state variables for message display control
+  const [displayedMessageCount, setDisplayedMessageCount] = useState(1); // Initially show only 1 message
+  const [hasMoreMessages, setHasMoreMessages] = useState(false);
+  // Get regular messages from direct query
+  const {
+    data: messagesData,
+    loading: messageLoading,
+    fetchMore: fetchMoreMessages,
+    subscribeToMore
+  } = messagesQuery;
+  const regularMessages = useMemo(() => {
+    if (!messagesData?.messages?.data) return [];
+    return orderBy(uniqBy(messagesData.messages.data || [], 'id'), ['createdAt'], ['asc']);
+  }, [messagesData?.messages?.data]);
+  const onOpen = element => {
+    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);
+  }, []);
+  // 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
+            }
+          },
+          createUploadLink: {
+            variables: {
+              postId
+            }
+          }
+        });
+        const uploadedFiles = uploadResponse.data;
+        if (uploadedFiles) {
+          const fileIds = uploadedFiles.map(f => f.id);
+          await sendMsg({
+            variables: {
+              postId,
+              channelId: actualChannelId,
+              content: message,
+              files: fileIds
+            },
+            optimisticResponse: {
+              __typename: 'Mutation',
+              sendMessage: createOptimisticMessage(uploadedFiles)
+            },
+            update: (cache, {
+              data: mutationData
+            }) => {
+              if (!mutationData?.sendMessage) return;
+              // Update messages cache optimistically
+              const messagesQuery = {
+                query: MessagesDocument,
+                variables: {
+                  channelId: actualChannelId.toString(),
+                  parentId: null,
+                  limit: MESSAGES_PER_PAGE
+                }
+              };
+              try {
+                const existingData = cache.readQuery(messagesQuery);
+                if (existingData?.messages) {
+                  cache.writeQuery({
+                    ...messagesQuery,
+                    data: {
+                      messages: {
+                        ...existingData.messages,
+                        data: [...(existingData.messages.data || []), mutationData.sendMessage],
+                        totalCount: (existingData.messages.totalCount || 0) + 1
+                      }
+                    }
+                  });
+                }
+              } catch (error) {
+                console.debug('Cache update failed (expected on first message):', error);
+              }
+            }
+          });
+        }
+      } else {
+        await sendMsg({
+          variables: {
+            channelId: actualChannelId,
+            content: message
+          },
+          optimisticResponse: {
+            __typename: 'Mutation',
+            sendMessage: optimisticMessage
+          },
+          update: (cache, {
+            data: mutationData
+          }) => {
+            if (!mutationData?.sendMessage) return;
+            // Update messages cache optimistically
+            const messagesQuery = {
+              query: MessagesDocument,
+              variables: {
+                channelId: actualChannelId.toString(),
+                parentId: null,
+                limit: MESSAGES_PER_PAGE
+              }
+            };
+            try {
+              const existingData = cache.readQuery(messagesQuery);
+              if (existingData?.messages) {
+                cache.writeQuery({
+                  ...messagesQuery,
+                  data: {
+                    messages: {
+                      ...existingData.messages,
+                      data: [...(existingData.messages.data || []), mutationData.sendMessage],
+                      totalCount: (existingData.messages.totalCount || 0) + 1
+                    }
+                  }
+                });
+              }
+            } catch (error) {
+              console.debug('Cache update failed (expected on first message):', error);
+            }
+          }
+        });
+      }
+      // Send message to AI agent machine
+      send({
+        type: 'SEND_MESSAGE',
+        message: message.trim()
+      });
+      // Ensure we scroll to the newest message immediately
+      scrollToBottom('smooth', 0);
+      // When sending new messages, increment the displayed count to show the new message
+      // This ensures we show both the existing last message and the new message
+      setDisplayedMessageCount(prev => {
+        const newCount = Math.max(prev + 1, 2);
+        console.log('🔄 Message sent: Updating displayedMessageCount', {
+          previous: prev,
+          new: newCount,
+          reason: 'New message sent'
+        });
+        return newCount;
+      });
+      // Call the optional onSendMessage prop if provided
+      if (onSendMessage) {
+        await onSendMessage(message, files);
+      }
+    } catch (error) {
+      console.error('Error sending message:', error);
+    }
+  }, [actualChannelId, currentUser, startUpload, sendMsg, send, onSendMessage]);
+  // Debug effect to track AI messages changes
+  useEffect(() => {
+    console.log('🤖 AI messages state changed:', aiMessages.length);
+    if (aiMessages.length > 0) {
+      console.log('🤖 Latest AI message:', aiMessages[aiMessages.length - 1]);
+      // Clear processing message if we have new AI responses
+      if (currentProcessingMessage !== null) {
+        console.log('🤖 AI response received, clearing processing message');
+        setCurrentProcessingMessage(null);
+      }
+      // Auto-scroll to bottom when new AI response appears
+      scrollToBottom('smooth', 200);
+    } else {
+      console.log('🤖 No AI messages in state - this might indicate an issue');
+    }
+  }, [aiMessages, currentProcessingMessage]);
+  // Debug effect to track machine state changes
+  useEffect(() => {
+    console.log('🤖 Machine state changed:', state.value);
+    console.log('🤖 Machine context:', {
+      messagesCount: state.context.messages.length,
+      hasMessageToRespondTo: !!state.context.messageToRespondTo,
+      messageToRespondTo: state.context.messageToRespondTo
+    });
+    // Check if we're in processing state but no AI response is being generated
+    if (state.value === 'processing' && !state.context.messageToRespondTo) {
+      console.log('🤖 ⚠️ WARNING: In processing state but no messageToRespondTo!');
+    }
+    // Auto-scroll when AI starts processing
+    if (state.value === 'processing') {
+      scrollToBottom('smooth', 100);
+    }
+  }, [state.value, state.context, scrollToBottom]);
+  // Send regular messages to AI agent machine for context
+  useEffect(() => {
+    if (regularMessages && regularMessages.length > 0) {
+      send({
+        type: 'UPDATE_REGULAR_MESSAGES',
+        messages: regularMessages
+      });
+    }
+  }, [regularMessages, send]);
+  // Reset processed messages when regular messages change completely
+  useEffect(() => {
+    if (regularMessages && regularMessages.length > 0) {
+      // Check if we have completely new messages (different IDs)
+      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);
+        }
+      }
+    }
+  }, [state.value, regularMessages, aiMessages.length, processedMessageIds.size, send]);
+  // Reset processing state when regularMessages change significantly
+  useEffect(() => {
+    if (regularMessages && regularMessages.length > 0) {
+      // Reset processing state when we get new messages
+      setProcessedMessageIds(new Set());
+      setCurrentProcessingMessage(null);
+      console.log('🤖 Reset processing state for new messages');
+    }
+  }, [regularMessages.length]); // Only depend on length to avoid unnecessary resets
+  // Only reset displayed message count on initial load, not when new messages arrive
+  useEffect(() => {
+    if (regularMessages && regularMessages.length > 0) {
+      // Only reset to show last message if this is the first time we're getting messages
+      // or if we're currently showing more messages than we have
+      if (displayedMessageCount === 1 || displayedMessageCount > regularMessages.length) {
+        console.log('🔄 Resetting displayedMessageCount to 1:', {
+          reason: 'Initial load or count mismatch',
+          currentDisplayed: displayedMessageCount,
+          regularMessagesLength: regularMessages.length
+        });
+        setDisplayedMessageCount(1);
+      }
+    }
+  }, [regularMessages.length, displayedMessageCount]);
+  const handleRetry = useCallback(() => {
+    send({
+      type: 'RETRY'
+    });
+  }, [send]);
+  const handleClearError = useCallback(() => {
+    send({
+      type: 'CLEAR_ERROR'
+    });
+  }, [send]);
+  // Merge AI agent messages with regular messages from query
+  const allMessages = useMemo(() => {
+    if (!regularMessages) return [];
+    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()),
+      sender: 'user',
+      author: m.author,
+      isUserMessage: true // Explicitly mark as user message
+    }));
+    const aiMessagesFormatted = (aiMessages || []).map(m => ({
+      id: m.id,
+      message: m.content,
+      createdAt: new Date(m.timestamp || Date.now()),
+      sender: 'ai',
+      isUserMessage: false // Explicitly mark as AI message
+    }));
+    // Show ALL user messages immediately, interleave AI responses as they arrive
+    const interleavedMessages = [];
+    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);
+  }, []);
+  // 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]);
+  // Limit messages to display based on displayedMessageCount (conversation pairs)
+  const limitedMessagesByDate = useMemo(() => {
+    if (!messagesByDate || messagesByDate.length === 0) return [];
+    // Calculate how many conversation pairs we should show
+    let conversationPairs = 0;
+    const limitedSections = [];
+    // Start from the end (most recent messages) and work backwards
+    for (let i = messagesByDate.length - 1; i >= 0; i--) {
+      const section = messagesByDate[i];
+      const sectionMessages = [...section.messages];
+      // Count conversation pairs in this section
+      let sectionPairs = 0;
+      for (let j = 0; j < sectionMessages.length; j++) {
+        const currentMsg = sectionMessages[j];
+        if (currentMsg.sender === 'user' || currentMsg.isUserMessage) {
+          // Check if there's an AI response following this user message
+          if (j + 1 < sectionMessages.length) {
+            const nextMsg = sectionMessages[j + 1];
+            if (nextMsg.sender === 'ai' || !nextMsg.isUserMessage) {
+              sectionPairs++;
+              j++; // Skip the AI response since we counted it as a pair
+            }
+          } else {
+            sectionPairs++; // User message without AI response still counts
+          }
+        } else if (currentMsg.sender === 'ai' || !currentMsg.isUserMessage) {
+          // AI message without preceding user message counts as half a pair
+          sectionPairs += 0.5;
+        }
+      }
+      // If this section would exceed our limit, only take what we can fit
+      if (conversationPairs + sectionPairs > displayedMessageCount) {
+        const remainingPairs = displayedMessageCount - conversationPairs;
+        if (remainingPairs > 0) {
+          // Take only the last N conversation pairs from this section
+          const limitedMessages = sectionMessages.slice(-Math.floor(remainingPairs * 2));
+          limitedSections.unshift({
+            ...section,
+            messages: limitedMessages
+          });
+          conversationPairs += remainingPairs;
+        }
+        break;
+      } else {
+        // We can fit this entire section
+        limitedSections.unshift(section);
+        conversationPairs += sectionPairs;
+      }
+    }
+    return limitedSections;
+  }, [messagesByDate, displayedMessageCount]);
+  // Ensure we show complete conversation pairs (user message + AI response)
+  const completeConversationMessages = useMemo(() => {
+    if (!limitedMessagesByDate || limitedMessagesByDate.length === 0) return [];
+    const completeSections = [];
+    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]);
+  // Auto scroll when processing message changes (shows loading indicators)
+  useEffect(() => {
+    if (currentProcessingMessage !== null) {
+      scrollToBottom('smooth', 150);
+    }
+  }, [currentProcessingMessage, scrollToBottom]);
+  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"
+  }))), 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 */
+  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.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',
+        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: null,
+        props: null,
+        files: null,
+        replies: null,
+        channel: null,
+        isPinned: false
+      }],
+      currentUser: currentUser,
+      onOpen: onOpen,
+      onMessageClick: () => {},
+      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'}`
+  }, 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", {
+    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 ? 'AI is thinking...' : 'Thinking...')) :
+  // Show normal message for non-loading messages
+  React__default.createElement(ModernMessageGroupComponent, {
+    messages: [{
+      id: msg.id,
+      message: msg.message,
+      author: msg.sender === 'user' ? msg.author : {
+        id: 'ai-assistant',
+        givenName: 'AI',
+        familyName: 'Assistant',
+        fullName: 'AI Assistant',
+        username: 'ai-assistant',
+        email: 'ai@assistant.com',
+        picture: null,
+        alias: [],
+        tokens: []
+      },
+      createdAt: msg.createdAt,
+      type: 'Simple',
+      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,
+    onOpen: onOpen,
+    onMessageClick: () => {},
+    isDesktopView: isDesktopView,
+    isSmallScreen: isSmallScreen
+  })))))), isTyping && 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"
+  }, "AI is 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"
+  }, 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, {
+    channelId: actualChannelId,
+    handleSend: handleSend,
+    placeholder: placeholder
+  })), 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