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

package/src/components/AIAgent/README.md

@@ -0,0 +1,82 @@
+# AI Agent Integration
+
+This component integrates an AI-powered chat agent using XState state machines to provide intelligent conversation capabilities within the messenger inbox.
+
+## Features
+
+-   **AI-Powered Conversations**: Uses Claude AI through the XState machine
+-   **Multi-Message Responses**: Automatically breaks down complex queries into multiple messages
+-   **Real-Time Data**: Integrates with MCP (Model Context Protocol) for web search and news
+-   **Smart Query Detection**: Automatically detects when queries need multi-message responses or real-time data
+-   **Toggle Mode**: Easy switch between regular messaging and AI agent mode
+
+## Components
+
+### AIAgent
+
+The main AI agent component that handles:
+
+-   Message display and input
+-   AI response generation
+-   Multi-message planning and execution
+-   Real-time data integration
+-   Error handling and retry mechanisms
+
+### aiAgentMachine
+
+XState machine that manages:
+
+-   Message flow and state transitions
+-   AI response generation
+-   Multi-message planning
+-   MCP data fetching
+-   Error handling
+
+## Usage
+
+The AI Agent is integrated into the main inbox interface with a toggle switch. When enabled:
+
+1. **Toggle AI Mode**: Use the toggle switch in the header to enable AI agent mode
+2. **Chat with AI**: Send messages to the AI agent and receive intelligent responses
+3. **Multi-Message**: Complex queries automatically trigger multi-message responses
+4. **Real-Time Data**: Queries needing current information automatically fetch web search and news data
+
+## Configuration
+
+The AI Agent requires:
+
+-   Anthropic API key configured on the server
+-   MCP server running for real-time data
+-   XState and @xstate/react packages
+
+## States
+
+The AI Agent machine has several states:
+
+-   `idle`: Waiting for user input
+-   `analyzing`: Determining response strategy
+-   `planningMultiMessage`: Creating multi-message plan
+-   `multiProcessing`: Generating multi-message responses
+-   `fetchingData`: Retrieving real-time data
+-   `processing`: Generating AI response
+-   `error`: Handling errors
+
+## Events
+
+Supported events:
+
+-   `SEND_MESSAGE`: Send a user message
+-   `FORCE_MULTI_MESSAGE`: Force multi-message response
+-   `INPUT_CHANGE`: Update input field
+-   `RETRY`: Retry failed operations
+-   `CLEAR_ERROR`: Clear error state
+
+## Integration Points
+
+The AI Agent integrates with:
+
+-   Main inbox interface
+-   Message handling system
+-   User authentication
+-   Channel management
+-   File upload system

package/src/components/AIAgent/index.ts

@@ -0,0 +1 @@
+export { AIAgent } from './AIAgent';

package/src/components/InboxMessage/CommonMessage.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { format } from 'date-fns';
+import { BsFlag } from '@react-icons/all-files/bs/BsFlag.js';
+import { FilesList } from '../inbox';
+
+export const CommonMessage = ({ message, index, onOpen, currentUser }) => {
+    return (
+        <div className="w-full flex justify-start mb-7" key={`msgList_${index}`}>
+            <div className="flex flex-grow">
+                <img
+                    className="w-8 h-8 bg-gray-500 rounded-full mr-4 cursor-pointer"
+                    src={message?.imageUrl || ''}
+                    alt="User avatar"
+                    onClick={onOpen}
+                />
+                <div className="flex-grow">
+                    <div className="flex flex-grow mt-1">
+                        <span className="text-sm text-gray-600 font-bold">
+                            {message?.author?.familyName && message?.author?.givenName
+                                ? message?.author?.givenName + ' ' + message?.author?.familyName
+                                : message?.author?.username}
+                        </span>
+                        <span className="text-sm text-gray-500 ml-2">
+                            {format(new Date(message?.createdAt), 'MMM dd, yyyy hh:mm aaa')}
+                        </span>
+                    </div>
+                    <div>
+                        <p className="text-sm mt-1 mb-1 whitespace-pre-line">{message?.message}</p>
+                        {message.files?.totalCount ? <FilesList uploaded files={message.files?.data} /> : null}
+                    </div>
+                </div>
+            </div>
+            {currentUser?.id !== message?.author?.id && (
+                <div className="ml-2">
+                    <BsFlag className="text-gray-600 w-6 h-6" />
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/InboxMessage/ConversationItem.tsx

@@ -0,0 +1,255 @@
+import { useMessagesQuery, OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED } from 'common/graphql';
+import { format, isToday, isYesterday } from 'date-fns';
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
+import { SubscriptionHandler } from './SubscriptionHandler';
+
+const createdAtText = (value) => {
+    if (!value) return '';
+    let date = new Date(value);
+    if (isToday(date)) return 'Today';
+    if (isYesterday(date)) return 'Yesterday';
+    return format(new Date(value), 'MMM dd, yyyy');
+};
+
+// Custom Skeleton component for loading state
+const Skeleton = ({ className = '' }) => {
+    return (
+        <div className={`animate-pulse bg-gray-300 dark:bg-gray-600 rounded ${className}`}>
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/2"></div>
+        </div>
+    );
+};
+
+interface ConversationItemProps {
+    showBorder: boolean;
+    currentUser: any;
+    filter: string;
+    channel: any;
+    handleSelectChannel: (channelId: string) => void;
+    users: any[];
+    selectedChannelId: string;
+    messagesQuery: any;
+}
+
+export const ConversationItem = React.memo(
+    ({
+        showBorder,
+        currentUser,
+        filter,
+        channel,
+        handleSelectChannel,
+        users,
+        selectedChannelId,
+        messagesQuery: messagesQueryProp,
+    }: ConversationItemProps) => {
+        // const {
+        //     data: messagesQuery,
+        //     loading: messageLoading,
+        // } = useMessagesQuery({
+        //     variables: {
+        //         channelId: channel.id?.toString(),
+        //         limit: 1,
+        // },
+        //     fetchPolicy: 'cache-and-network',
+        // });
+        const [messages, setMessages] = useState([]);
+        const {
+            data: messagesQuery,
+            loading: messageLoading,
+            refetch: refetchMessages,
+            subscribeToMore,
+        } = useMessagesQuery({
+            variables: {
+                channelId: channel?.id?.toString(),
+                parentId: null,
+                limit: 10,
+                // sort: {
+                //     key: 'updatedAt',
+                //     value: SortEnum.Desc,
+                // },
+            },
+            fetchPolicy: 'cache-and-network',
+            refetchWritePolicy: 'merge',
+        });
+
+        // const {
+        //     data: newMessage,
+        //     loading: newMsgLoading,
+        //     error: newMsgError,
+        // }: any = useOnChatMessageAddedSubscription({
+        //     variables: {
+        //         channelId: channel?.id?.toString(),
+        //     },
+        // });
+
+        React.useEffect(() => {
+            if (channel?.id) {
+                refetchMessages({
+                    channelId: channel?.id?.toString(),
+                    parentId: null,
+                    limit: 10,
+                    // sort: {
+                    //     key: 'updatedAt',
+                    //     value: SortEnum.Desc,
+                    // },
+                });
+            }
+        }, [channel?.id, refetchMessages]);
+
+        React.useEffect(() => {
+            if (messagesQuery?.messages?.data?.length) {
+                setMessages(messagesQuery.messages.data);
+            }
+        }, [messagesQuery?.messages?.data]);
+
+        const chatUser = useMemo(
+            () =>
+                users?.find(({ id }) => {
+                    const isNotCurrentUser = id !== currentUser?.id;
+                    if (isNotCurrentUser) {
+                        return channel?.members?.find(({ user }) => user.id === id);
+                    }
+                    if (channel?.members?.length === 1 && channel?.members?.[0]?.user?.id === currentUser?.id) {
+                        return currentUser;
+                    }
+                    return isNotCurrentUser;
+                }),
+            [users, currentUser, channel],
+        );
+
+        // Last Message
+        // const lastMessage = useMemo(() => {
+        //     if (!messagesQuery?.messages?.data?.length) {
+        //         return null;
+        //     }
+        //     const { data } = messagesQuery.messages;
+        //     return data[data.length - 1];
+        // }, [messagesQuery]);
+        const lastMessage = useMemo(() => {
+            if (!messages?.length) {
+                return null;
+            }
+            const data = messages;
+            const filteredData: any = data?.filter((p: any) => p?.message !== '');
+
+            //return filteredData[0];
+            let filteredLastMessage =
+                filteredData && filteredData?.length
+                    ? filteredData?.reduce((a, b) => {
+                          return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+                      }, []) ?? null
+                    : null;
+            return filteredLastMessage;
+            // //return data[data.length - 1];
+        }, [messages]);
+
+        const channelType = useMemo(() => {
+            return channel?.type;
+        }, [channel]);
+
+        if (
+            filter &&
+            !chatUser?.username?.toLowerCase().includes(filter.toLowerCase()) &&
+            !lastMessage?.message?.toLowerCase().includes(filter.toLowerCase())
+        ) {
+            return null;
+        }
+
+        return (
+            <div
+                key={`conv_channel_${channel.id}`}
+                className={`cursor-pointer flex items-center p-3 border-b ${
+                    showBorder ? 'border-gray-300' : 'border-transparent'
+                } ${
+                    channel.id == selectedChannelId
+                        ? 'bg-gray-300 dark:bg-gray-500'
+                        : 'hover:bg-gray-50 dark:hover:bg-gray-700'
+                }`}
+                onClick={() => channel.id !== selectedChannelId && handleSelectChannel(channel.id)}
+            >
+                <img
+                    className="w-10 h-10 rounded-full bg-gray-400 object-cover flex-shrink-0"
+                    src={chatUser?.picture || '/default-avatar.svg'}
+                    alt={chatUser?.givenName || 'User avatar'}
+                    onError={(e) => {
+                        // Prevent infinite loop by checking if we're already showing the fallback
+                        if (e.currentTarget.src.includes('default-avatar.svg')) {
+                            // If SVG also fails, use a data URL fallback
+                            e.currentTarget.src =
+                                'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIgZmlsbD0iI0U1RTdFQiIvPgogIDxjaXJjbGUgY3g9IjIwIiBjeT0iMTYiIHI9IjYiIGZpbGw9IiM5Q0EzQUYiLz4KICA8cGF0aCBkPSJNOCAzMmMwLTYuNjI3IDUuMzczLTEyIDEyLTEyczEyIDUuMzczIDEyIDEyIiBmaWxsPSIjOUNBM0FGIi8+Cjwvc3ZnPgo=';
+                        } else {
+                            e.currentTarget.src = '/default-avatar.svg';
+                        }
+                    }}
+                />
+                <div className="ml-2 flex-grow min-w-10 max-w-96">
+                    {messageLoading && <Skeleton className="w-full h-16" />}
+                    {!messageLoading && (
+                        <>
+                            <LastMessageComponent
+                                lastMessage={lastMessage}
+                                channelType={channelType}
+                                chatUser={chatUser}
+                            />
+                            <SubscriptionHandler
+                                subscribeToMore={subscribeToMore}
+                                document={CHAT_MESSAGE_ADDED}
+                                variables={{ channelId: channel?.id?.toString() }}
+                                enabled={!!channel?.id && !!subscribeToMore}
+                                updateQuery={(prev, { subscriptionData }: any) => {
+                                    if (!subscriptionData.data) return prev;
+                                    const newMessage: any = subscriptionData?.data?.chatMessageAdded;
+                                    console.log('ConversationItem: New message received via subscription:', newMessage);
+                                    const previousData = prev?.messages?.data
+                                        ? [...prev.messages.data, newMessage]
+                                        : [];
+                                    const totalMsgCount = prev?.messages?.totalCount + 1;
+                                    const merged = {
+                                        ...prev,
+                                        messages: {
+                                            ...prev?.messages,
+                                            data: previousData,
+                                            totalCount: totalMsgCount,
+                                        },
+                                    };
+                                    return merged;
+                                }}
+                                onError={(error) => {
+                                    console.error('ConversationItem: Subscription error:', error);
+                                }}
+                            />
+                        </>
+                    )}
+                </div>
+            </div>
+        );
+    },
+);
+
+interface LastMessageComponentProps {
+    lastMessage: any;
+    channelType: string;
+    chatUser: any;
+}
+
+const LastMessageComponent = React.memo(({ lastMessage, channelType, chatUser }: LastMessageComponentProps) => {
+    return (
+        <div className="flex flex-col w-full">
+            <div className="w-full flex justify-between items-center">
+                <span className="text-xs text-green-500 truncate">{channelType}</span>
+                <span className="text-xs text-gray-500">
+                    {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
+                </span>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-300 font-bold mt-1">
+                {chatUser?.givenName + ' ' + chatUser?.familyName}
+            </p>
+            <p className="text-sm text-gray-600 dark:text-gray-400 truncate w-4/5 mt-1 line-clamp-1">
+                {lastMessage?.message && lastMessage.message.length > 30
+                    ? lastMessage.message.slice(0, 30) + '…'
+                    : lastMessage?.message}
+            </p>
+        </div>
+    );
+});