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

package/src/machines/aiAgentMachine.ts

@@ -0,0 +1,1248 @@
+import { createMachine, assign, fromPromise } from 'xstate';
+import { AIAgentContext, AIAgentEvent, Message, MCPData } from './types';
+import { config } from '../config';
+const { CLIENT_URL, VITE_ANTHROPIC_API_KEY, VITE_OPENAI_API_KEY, ANTHROPIC_API_KEY, OPENAI_API_KEY, NEWS_API_KEY } =
+    config;
+const env = {
+    ANTHROPIC_API_KEY: VITE_ANTHROPIC_API_KEY || ANTHROPIC_API_KEY,
+    OPENAI_API_KEY: VITE_OPENAI_API_KEY || OPENAI_API_KEY,
+    NEWS_API_KEY: NEWS_API_KEY,
+};
+
+// API configuration - using environment variables from dev.env
+const API_CONFIG = {
+    // Use environment variables for API keys
+    ANTHROPIC_API_KEY: env?.ANTHROPIC_API_KEY,
+    OPENAI_API_KEY: env?.OPENAI_API_KEY,
+    NEWS_API_KEY: env?.NEWS_API_KEY,
+
+    // Configurable proxy endpoints
+    ANTHROPIC_ENDPOINT: '/api/anthropic/messages',
+    OPENAI_ENDPOINT: '/api/openai',
+
+    // Direct MCP search APIs (these are public and don't have CORS issues)
+    NEWS_API_ENDPOINT: 'https://newsapi.org/v2/everything',
+    REDDIT_SEARCH_ENDPOINT: 'https://www.reddit.com/search.json',
+    REDDIT_TRENDING_ENDPOINT: 'https://www.reddit.com/r/news/hot.json',
+    DUCKDUCKGO_ENDPOINT: 'https://api.duckduckgo.com/',
+
+    // Model configuration
+    DEFAULT_MODEL: 'claude-3-5-haiku-20241022',
+    OPENAI_MODEL: 'gpt-4o-mini',
+
+    // Check which AI provider is available
+    get availableProvider() {
+        if (this.ANTHROPIC_API_KEY) return 'anthropic';
+        if (this.OPENAI_API_KEY) return 'openai';
+        return null;
+    },
+
+    // Get the appropriate endpoint based on available provider
+    get primaryEndpoint() {
+        return this.availableProvider === 'anthropic' ? this.ANTHROPIC_ENDPOINT : this.OPENAI_ENDPOINT;
+    },
+
+    // Get the appropriate model based on available provider
+    get primaryModel() {
+        return this.availableProvider === 'anthropic' ? this.DEFAULT_MODEL : this.OPENAI_MODEL;
+    },
+};
+
+// Log configuration on startup
+console.log('🤖 AI Agent Machine Configuration:');
+console.log(`   Available Provider: ${API_CONFIG.availableProvider || 'None'}`);
+console.log(`   Primary Endpoint: ${API_CONFIG.primaryEndpoint}`);
+console.log(`   Primary Model: ${API_CONFIG.primaryModel}`);
+console.log(`   Using Proxy for AI APIs: ✅ (avoids CORS issues)`);
+console.log(`   Using Direct APIs for MCP Search: ✅ (public APIs)`);
+console.log(`   Anthropic API Key: ${API_CONFIG.ANTHROPIC_API_KEY ? '✅ Configured' : '❌ Not configured'}`);
+console.log(`   OpenAI API Key: ${API_CONFIG.OPENAI_API_KEY ? '✅ Configured' : '❌ Not configured'}`);
+console.log(`   News API Key: ${API_CONFIG.NEWS_API_KEY ? '✅ Configured' : '❌ Not configured'}`);
+
+// Test API configuration
+if (!API_CONFIG.availableProvider) {
+    console.error('🚨 CRITICAL: No AI API provider configured!');
+    console.error('🚨 Please set VITE_ANTHROPIC_API_KEY or VITE_OPENAI_API_KEY in your environment variables.');
+} else {
+    console.log(`✅ AI API provider configured: ${API_CONFIG.availableProvider}`);
+}
+
+// Helper function to get the base URL for proxy calls
+function getProxyBaseUrl(): string {
+    // Use Vite dev server proxy to avoid CORS issues
+    return CLIENT_URL || 'http://localhost:3011'; // Vite dev server
+}
+
+// Log the current proxy configuration
+console.log(`🌐 Proxy Configuration: ${getProxyBaseUrl() || 'Relative paths (production)'}`);
+
+// Helper function to make API calls through proxy (avoids CORS)
+async function makeApiCall(endpoint: string, options: RequestInit) {
+    try {
+        const baseUrl = getProxyBaseUrl();
+        const url = `${baseUrl}${endpoint}`;
+
+        console.log(`🌐 Making API call through proxy to: ${url}`);
+        console.log(`📤 Request options:`, {
+            method: options.method,
+            headers: options.headers,
+            body: options.body ? JSON.parse(options.body as string) : undefined,
+        });
+
+        const response = await fetch(url, options);
+
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            console.error('🚨 API Error:', response.status, errorData);
+
+            let errorMessage = 'API request failed';
+            if (errorData.error) {
+                if (typeof errorData.error === 'string') {
+                    errorMessage = errorData.error;
+                } else if (errorData.error.message) {
+                    errorMessage = errorData.error.message;
+                } else if (errorData.error.type) {
+                    errorMessage = `${errorData.error.type}: ${errorData.error.message || 'Unknown error'}`;
+                }
+            }
+
+            throw new Error(errorMessage);
+        }
+
+        return response;
+    } catch (error) {
+        console.error('🚨 API call error:', error);
+        throw error;
+    }
+}
+
+// Helper function to fetch news from NewsAPI directly
+async function fetchNewsFromNewsAPI(query: string) {
+    if (!API_CONFIG.NEWS_API_KEY) {
+        console.warn('⚠️ News API key not found, skipping NewsAPI');
+        return [];
+    }
+
+    try {
+        const response = await fetch(
+            `${API_CONFIG.NEWS_API_ENDPOINT}?q=${encodeURIComponent(query)}&apiKey=${
+                API_CONFIG.NEWS_API_KEY
+            }&language=en&sortBy=publishedAt&pageSize=5`,
+        );
+
+        if (!response.ok) {
+            console.error('NewsAPI error:', response.status);
+            return [];
+        }
+
+        const data = await response.json();
+
+        if (data.articles) {
+            return data.articles.map((article: any) => ({
+                title: article.title,
+                url: article.url,
+                description: article.description || article.title,
+                publishedAt: article.publishedAt,
+                source: { name: article.source.name },
+            }));
+        }
+    } catch (error) {
+        console.error('NewsAPI error:', error);
+    }
+
+    return [];
+}
+
+// Helper function to fetch from Reddit API directly
+async function fetchAlternativeNews(query: string) {
+    try {
+        const response = await fetch(
+            `${API_CONFIG.REDDIT_SEARCH_ENDPOINT}?q=${encodeURIComponent(
+                query,
+            )}&sort=new&t=day&limit=3&restrict_sr=false&type=link`,
+        );
+
+        if (!response.ok) {
+            console.error('Reddit API error:', response.status);
+            return [];
+        }
+
+        const data = await response.json();
+
+        if (data?.data?.children) {
+            return data.data.children
+                .filter((post: any) => post.data.url && !post.data.is_self)
+                .slice(0, 3)
+                .map((post: any) => ({
+                    title: post.data.title,
+                    url: post.data.url,
+                    description: `Discussion: ${post.data.title} (${post.data.score} upvotes)`,
+                    publishedAt: new Date(post.data.created_utc * 1000).toISOString(),
+                    source: { name: `r/${post.data.subreddit}` },
+                }));
+        }
+    } catch (error) {
+        console.error('Reddit API error:', error);
+    }
+
+    return [];
+}
+
+// Helper function to search DuckDuckGo directly
+async function searchDuckDuckGo(query: string) {
+    try {
+        const response = await fetch(
+            `${API_CONFIG.DUCKDUCKGO_ENDPOINT}?q=${encodeURIComponent(query)}&format=json&no_html=1&skip_disambig=1`,
+        );
+
+        if (!response.ok) {
+            console.error('DuckDuckGo API error:', response.status);
+            return [];
+        }
+
+        const data = await response.json();
+        const results: any[] = [];
+
+        // Add abstract if available
+        if (data.Abstract) {
+            results.push({
+                title: data.Heading || `About ${query}`,
+                url: data.AbstractURL || `https://duckduckgo.com/?q=${encodeURIComponent(query)}`,
+                snippet: data.Abstract,
+                source: 'DuckDuckGo',
+            });
+        }
+
+        // Add related topics
+        if (data.RelatedTopics && data.RelatedTopics.length > 0) {
+            data.RelatedTopics.slice(0, 3).forEach((topic: any) => {
+                if (topic.Text && topic.FirstURL) {
+                    results.push({
+                        title: topic.Text.split(' - ')[0] || topic.Text.substring(0, 60),
+                        url: topic.FirstURL,
+                        snippet: topic.Text,
+                        source: 'DuckDuckGo',
+                    });
+                }
+            });
+        }
+
+        return results;
+    } catch (error) {
+        console.error('DuckDuckGo API error:', error);
+        return [];
+    }
+}
+
+// Helper function to get trending news from Reddit directly
+async function getTrendingNews() {
+    try {
+        const response = await fetch(`${API_CONFIG.REDDIT_TRENDING_ENDPOINT}?limit=5`);
+
+        if (!response.ok) {
+            console.error('Reddit trending error:', response.status);
+            return [];
+        }
+
+        const data = await response.json();
+
+        if (data?.data?.children) {
+            return data.data.children
+                .filter((post: any) => post.data.url && !post.data.is_self)
+                .map((post: any) => ({
+                    title: post.data.title,
+                    url: post.data.url,
+                    description: `Trending: ${post.data.title} (${post.data.score} upvotes, ${post.data.num_comments} comments)`,
+                    publishedAt: new Date(post.data.created_utc * 1000).toISOString(),
+                    source: { name: 'r/news' },
+                }));
+        }
+    } catch (error) {
+        console.error('Reddit trending error:', error);
+    }
+
+    return [];
+}
+
+// Direct MCP search function - no more server dependency
+async function performDirectMCPSearch(query: string, includeNews: boolean = true, includeWeb: boolean = true) {
+    try {
+        console.log(`🔍 Performing direct MCP search for: "${query}" (news: ${includeNews}, web: ${includeWeb})`);
+
+        const promises = [];
+
+        // Fetch news if requested
+        if (includeNews) {
+            // Try multiple news sources
+            promises.push(fetchNewsFromNewsAPI(query), fetchAlternativeNews(query));
+
+            // For US news specifically, get trending
+            if (query.toLowerCase().includes('us news') || query.toLowerCase().includes('american news')) {
+                promises.push(getTrendingNews());
+            }
+        }
+
+        // Fetch web search if requested
+        if (includeWeb) {
+            promises.push(searchDuckDuckGo(query));
+        }
+
+        // Execute all searches concurrently
+        const results = await Promise.allSettled(promises);
+
+        // Combine all successful results
+        let searchResults: any[] = [];
+        let newsArticles: any[] = [];
+
+        results.forEach((result, index) => {
+            if (result.status === 'fulfilled' && Array.isArray(result.value)) {
+                if (includeWeb && index === results.length - 1) {
+                    // Last promise is web search
+                    searchResults = result.value;
+                } else if (includeNews) {
+                    // Other promises are news sources
+                    newsArticles = [...newsArticles, ...result.value];
+                }
+            }
+        });
+
+        // Remove duplicates and limit results
+        newsArticles = newsArticles
+            .filter((article, index, self) => index === self.findIndex((a: any) => a.title === article.title))
+            .slice(0, 8);
+
+        searchResults = searchResults.slice(0, 5);
+
+        const response = {
+            searchResults: includeWeb ? searchResults : [],
+            newsArticles: includeNews ? newsArticles : [],
+            summary: `Found ${searchResults.length} web results and ${newsArticles.length} news articles for "${query}"`,
+            sources: [
+                ...(includeWeb ? ['DuckDuckGo'] : []),
+                ...(includeNews ? ['NewsAPI', 'Reddit', 'Alternative Sources'] : []),
+            ].filter(Boolean),
+            searchTime: Date.now(),
+            realData: true, // Flag to indicate this is real data
+        };
+
+        console.log(
+            `✅ Direct MCP search completed: ${response.searchResults.length} web + ${response.newsArticles.length} news results`,
+        );
+
+        return response;
+    } catch (error) {
+        console.error('🚨 Direct MCP search error:', error);
+        throw error;
+    }
+}
+
+// Helper function to detect if a query needs multi-message response
+function needsMultiMessageResponse(query: string): boolean {
+    const multiMessageKeywords = [
+        'explain step by step',
+        'break down',
+        'tutorial',
+        'guide',
+        'how to',
+        'teach me',
+        'walk me through',
+        'step-by-step',
+        'detailed explanation',
+        'in detail',
+        'comprehensive',
+        'thorough',
+        'complete guide',
+        'coding',
+        'programming',
+        'development',
+        'build',
+        'create',
+        'multiple',
+        'several',
+        'various',
+        'different ways',
+    ];
+
+    const lowerQuery = query.toLowerCase();
+    return multiMessageKeywords.some((keyword) => lowerQuery.includes(keyword)) || query.length > 200; // Long queries often benefit from multi-message responses
+}
+
+// Helper function to detect if a query needs real-time data
+function needsRealTimeData(query: string): boolean {
+    const realTimeKeywords = [
+        'latest',
+        'recent',
+        'news',
+        'current',
+        'today',
+        'yesterday',
+        'breaking',
+        'update',
+        'now',
+        'price',
+        'stock',
+        'weather',
+        'trending',
+        'popular',
+        'search',
+        "what's happening",
+        'tell me about',
+        'find',
+        'look up',
+        'research',
+    ];
+
+    const lowerQuery = query.toLowerCase();
+    return realTimeKeywords.some((keyword) => lowerQuery.includes(keyword));
+}
+
+// Helper function to format MCP data for the agent
+function formatMCPDataForAgent(mcpData: MCPData): string {
+    let context = '';
+
+    if (mcpData.searchResults && mcpData.searchResults.length > 0) {
+        context += 'Current web search results:\n';
+        mcpData.searchResults.forEach((result, i) => {
+            context += `${i + 1}. **${result.title}**\n   ${result.snippet}\n   Source: ${result.url}\n\n`;
+        });
+    }
+
+    if (mcpData.newsArticles && mcpData.newsArticles.length > 0) {
+        context += 'Recent news articles:\n';
+        mcpData.newsArticles.forEach((article, i) => {
+            context += `${i + 1}. **${article.title}**\n   ${article.description}\n   Published: ${new Date(
+                article.publishedAt,
+            ).toLocaleDateString()}\n   Source: ${article.source.name}\n\n`;
+        });
+    }
+
+    if (context) {
+        context =
+            'Here is the current information I have access to:\n\n' +
+            context +
+            '\nPlease use this information to provide an accurate, up-to-date response.';
+    }
+
+    return context;
+}
+
+// Helper function to get the appropriate system prompt based on provider
+function getSystemPrompt(provider: string, includeMCP: boolean = false): string {
+    const basePrompt = includeMCP
+        ? 'You are a helpful AI assistant that can access real-time information through web search and news APIs. When provided with current information, use it to give accurate, up-to-date responses. Always cite your sources when referencing specific information from search results or news articles. You excel at providing comprehensive analysis and insights based on the latest data available.'
+        : 'You are a helpful AI assistant that provides detailed, step-by-step responses. Focus on the specific aspect requested and provide practical, actionable information.';
+
+    if (provider === 'anthropic') {
+        return basePrompt;
+    } else if (provider === 'openai') {
+        return basePrompt;
+    }
+
+    return basePrompt;
+}
+
+// Helper function to get conversation context from regular messages
+function getConversationContext(regularMessages: any[]): string {
+    if (!regularMessages || regularMessages.length === 0) return '';
+
+    // Get the last few messages for context
+    const recentMessages = regularMessages.slice(-5);
+    let context = 'Recent conversation context:\n';
+
+    recentMessages.forEach((msg, index) => {
+        const author = msg.author?.username || msg.author?.givenName || 'User';
+        const content = msg.message?.substring(0, 200) || ''; // Limit content length
+        if (content.trim()) {
+            context += `${index + 1}. ${author}: ${content}\n`;
+        }
+    });
+
+    return context + '\n';
+}
+
+export const aiAgentMachine = createMachine(
+    {
+        /** @xstate-layout N4IgpgJg5mDOIC5QEMCWBBGA7ALgOlQgBswBiAZQFEA5AEQH0BZS889AcUoG0AGAXUSgADgHtYqHKhFZBIAB6IA7ACZleAGwBWdYoAsmngA4AzAE5Fi4wBoQAT0S6AjKbzHHy06aO7Du3eoBfAJs0TDBcAmIyAElqAAUAVQAVegBhAAl0ak5eASQQUXFJaVkFBE1dF0dvXx49Q19NG3sEXUUXHz9lRydFA2dNIJCMbHxCElJUgBlKdAAleko5uYB5OdzZQokpGXyyzU1jPFN9ZXVdHmN9dUNmxGNfPB7NRUNnR0N1ZX0hkFDRvDILDIIi2ABeqCwUFIG3yW2Ku1AZXcykUGlMhk0hh4PEcenU5zurV0R16yiupkODV+-3C+CBIPBkOhXEceWEYm2JT2iBRaPUGKxOLx-kJdkQ33UeA8ZnUxiuulRuhpIzpeAAZmAcABjAAWzNoyBwyFIEGkYAIWAAbiIANYWzU63WMVJxQ3G2Ecoo7Uq87FS8lnE6KardInGc54TTKF48bQVE4VQbBP6qiKOvUGo0msAAJ1zIlzeCERCN6sLAFsNVq9S63dnPQVOQjfQgPjwA8Yg21Q44idc8J8LspcapHMYeMqU7SIkIC9q4OIoabzZabfa8Ng80awHM4KIsLAwI34T6eW3-dKuwKezww+LynLjoZVDxPKiu20VWFZ-PF8zSDzAsixLMtK03cJtxwXd92kI8T2bM8kT9Ooo0sN9HEwrpLiJN4nkMSxTEwgjFHUONFG-AEgMLUg5koJI5gATQQ71uWQhByU0KMfDOao3zfZRbgfFQpVqaNtAJTRiMotVqNzCgaAYZhWA4bh+E2RC2PkCVjC4ioX3UPivFMQSiW+HhjlI-xugFD4Xgo6c03wOTSFiRIUgyLIcnUuFNMRbTWmUIlDN0fDsUxPofCMYwZIiFzplmBYllWdYfK9Ll-LKTjuIMoyBKEloEw0KS3zImUzAclMsBECA4FkGccA01jMsQABadQiVarjPB63revaWKxiiJqMtbTQTjwfijH4vxxtMIkXhcF8JzIoi5XaGLHJ-elgVBCEoRGltz2qJxpUcc5elIyk5X7S5Bx0HE4yIypLEG6snSzY1DqQgKehfPBh3ld9cTjawHycQxJq+Ui3wjEy8U24ZtuLP9YCXKBvq0rK4wsr5DhDLwe10fsYyeO930Mkw9HMN65MxlqEEeO9qbleVun8RQiRDULox0GMYwjTFAiCAIgA */
+        id: 'aiAgent',
+        types: {} as {
+            context: AIAgentContext;
+            events: AIAgentEvent;
+        },
+        initial: 'idle',
+        context: {
+            messages: [],
+            currentInput: '',
+            error: null,
+            isTyping: false,
+            multiMessageMode: false,
+            currentMultiStep: 0,
+            totalMultiSteps: 0,
+            multiMessagePlan: [],
+            mcpData: undefined,
+            regularMessages: [], // Add regular messages from query
+        },
+        states: {
+            idle: {
+                on: {
+                    SEND_MESSAGE: {
+                        target: 'analyzing',
+                        guard: 'hasValidMessage',
+                        actions: 'addUserMessage',
+                    },
+                    FORCE_MULTI_MESSAGE: {
+                        target: 'analyzing',
+                        guard: 'hasValidMessage',
+                        actions: 'addUserMessage',
+                    },
+                    AUTO_RESPOND_TO_MESSAGE: {
+                        target: 'processing',
+                        guard: 'hasValidMessage',
+                        actions: 'addAutoResponseMessage',
+                    },
+                    INPUT_CHANGE: {
+                        actions: 'updateInput',
+                    },
+                    CLEAR_ERROR: {
+                        actions: 'clearError',
+                    },
+                    UPDATE_REGULAR_MESSAGES: {
+                        actions: 'updateRegularMessages',
+                    },
+                    ANALYZE_EXISTING_CONTEXT: {
+                        target: 'analyzing',
+                        guard: 'hasExistingContext',
+                        actions: 'addContextAnalysisMessage',
+                    },
+                    CONTINUE_PROCESSING: {
+                        // Just stay in idle state to trigger the useEffect again
+                        actions: 'logContinueProcessing',
+                    },
+                },
+            },
+            analyzing: {
+                entry: 'setTyping',
+                always: [
+                    {
+                        target: 'planningMultiMessage',
+                        guard: 'shouldUseMultiMessage',
+                    },
+                    {
+                        target: 'fetchingData',
+                        guard: 'queryNeedsRealTimeData',
+                    },
+                    {
+                        target: 'processing',
+                    },
+                ],
+            },
+            planningMultiMessage: {
+                entry: 'setMultiMessageMode',
+                invoke: {
+                    id: 'generateMultiMessagePlan',
+                    src: 'generateMultiMessagePlan',
+                    input: ({ context }) => ({
+                        query: context.messages[context.messages.length - 1]?.content || '',
+                        regularMessages: context.regularMessages,
+                    }),
+                    onDone: {
+                        target: 'multiProcessing',
+                        actions: 'setMultiMessagePlan',
+                    },
+                    onError: {
+                        target: 'processing', // Fall back to single message
+                    },
+                },
+            },
+            multiProcessing: {
+                invoke: {
+                    id: 'generateMultiMessage',
+                    src: 'generateMultiMessage',
+                    input: ({ context }) => ({
+                        messages: context.messages,
+                        plan: context.multiMessagePlan,
+                        currentStep: context.currentMultiStep,
+                        mcpData: context.mcpData,
+                        regularMessages: context.regularMessages,
+                    }),
+                    onDone: [
+                        {
+                            target: 'waitingBetweenMessages',
+                            guard: 'hasMoreMultiMessages',
+                            actions: ['addAIMessage', 'incrementMultiStep'],
+                        },
+                        {
+                            target: 'idle',
+                            actions: ['addAIMessage', 'resetMultiMessage'],
+                        },
+                    ],
+                    onError: {
+                        target: 'error',
+                        actions: 'setError',
+                    },
+                },
+            },
+            waitingBetweenMessages: {
+                entry: 'setTyping',
+                after: {
+                    1500: 'multiProcessing',
+                },
+            },
+            fetchingData: {
+                invoke: {
+                    id: 'fetchMCPData',
+                    src: 'fetchMCPData',
+                    input: ({ context }) => ({
+                        query: context.messages[context.messages.length - 1]?.content || '',
+                    }),
+                    onDone: {
+                        target: 'processing',
+                        actions: 'setMCPData',
+                    },
+                    onError: {
+                        target: 'processing',
+                    },
+                },
+            },
+            processing: {
+                entry: () => {
+                    console.log('🤖 Entering processing state');
+                },
+                invoke: {
+                    id: 'generateResponse',
+                    src: 'generateAIResponse',
+                    input: ({ context }) => {
+                        console.log('🤖 generateAIResponse input:', {
+                            messagesCount: context.messages.length,
+                            hasMessageToRespondTo: !!context.messageToRespondTo,
+                            messageToRespondTo: context.messageToRespondTo,
+                            regularMessagesCount: context.regularMessages?.length || 0,
+                        });
+                        return {
+                            messages: context.messages,
+                            mcpData: context.mcpData,
+                            regularMessages: context.regularMessages,
+                            messageToRespondTo: context.messageToRespondTo,
+                        };
+                    },
+                    onDone: {
+                        target: 'idle',
+                        actions: [
+                            assign(({ context, event }) => {
+                                console.log('🤖 🎯 onDone transition triggered with event:', event);
+                                console.log('🤖 🎯 Event type:', typeof event);
+                                console.log('🤖 🎯 Event content:', event);
+                                return context;
+                            }),
+                            'addAIMessage',
+                        ],
+                    },
+                    onError: {
+                        target: 'error',
+                        actions: 'setError',
+                    },
+                },
+            },
+            error: {
+                on: {
+                    RETRY: {
+                        target: 'processing',
+                    },
+                    SEND_MESSAGE: {
+                        target: 'analyzing',
+                        guard: 'hasValidMessage',
+                        actions: 'addUserMessage',
+                    },
+                    INPUT_CHANGE: {
+                        actions: 'updateInput',
+                    },
+                    CLEAR_ERROR: {
+                        target: 'idle',
+                        actions: 'clearError',
+                    },
+                    UPDATE_REGULAR_MESSAGES: {
+                        actions: 'updateRegularMessages',
+                    },
+                },
+            },
+        },
+    },
+    {
+        guards: {
+            hasValidMessage: ({ event }) => {
+                console.log('🔍 hasValidMessage guard called with event:', event);
+
+                if (event.type === 'AUTO_RESPOND_TO_MESSAGE') {
+                    const isValid = event.message?.trim().length > 0;
+                    console.log('🔍 AUTO_RESPOND_TO_MESSAGE guard result:', isValid, 'message:', event.message);
+                    return isValid;
+                }
+
+                if (event.type === 'SEND_MESSAGE' || event.type === 'FORCE_MULTI_MESSAGE') {
+                    const isValid = event.message?.trim().length > 0;
+                    console.log(
+                        '🔍 SEND_MESSAGE/FORCE_MULTI_MESSAGE guard result:',
+                        isValid,
+                        'message:',
+                        event.message,
+                    );
+                    return isValid;
+                }
+
+                console.log('🔍 Unknown event type in hasValidMessage guard:', event.type);
+                return false;
+            },
+            shouldUseMultiMessage: ({ context, event }) => {
+                if (event.type === 'FORCE_MULTI_MESSAGE') return true;
+
+                const lastMessage = context.messages[context.messages.length - 1];
+                if (!lastMessage || lastMessage.sender !== 'user') return false;
+
+                const shouldUse = needsMultiMessageResponse(lastMessage.content);
+                console.log('🔄 Should use multi-message:', shouldUse, 'for:', lastMessage.content);
+                return shouldUse;
+            },
+            queryNeedsRealTimeData: ({ context }) => {
+                const lastMessage = context.messages[context.messages.length - 1];
+                if (!lastMessage || lastMessage.sender !== 'user') return false;
+
+                const needs = needsRealTimeData(lastMessage.content);
+                console.log('🔍 Query needs real-time data:', needs, 'for:', lastMessage.content);
+                return needs;
+            },
+            hasMoreMultiMessages: ({ context }) => {
+                return context.currentMultiStep! < context.totalMultiSteps! - 1;
+            },
+            hasExistingContext: ({ context }) => {
+                return context.regularMessages && context.regularMessages.length > 0;
+            },
+        },
+        actions: {
+            addUserMessage: assign(({ context, event }) => {
+                if (event.type !== 'SEND_MESSAGE' && event.type !== 'FORCE_MULTI_MESSAGE') return context;
+                const newMessage: Message = {
+                    id: Date.now().toString(),
+                    content: event.message,
+                    sender: 'user',
+                    timestamp: new Date(),
+                };
+                return {
+                    ...context,
+                    messages: [...context.messages, newMessage],
+                    currentInput: '',
+                    error: null,
+                    mcpData: undefined,
+                    messageToRespondTo: undefined, // Clear the message to respond to when adding new user message
+                };
+            }),
+            addAIMessage: assign(({ context, event }) => {
+                console.log('🤖 addAIMessage called with event:', event);
+
+                // Extract the AI response content from the event
+                let aiResponseContent = '';
+
+                // Handle different event formats
+                if (event && typeof event === 'object') {
+                    if ('output' in event) {
+                        aiResponseContent = (event as any).output;
+                    } else if ('data' in event) {
+                        aiResponseContent = (event as any).data;
+                    } else if (typeof event === 'string') {
+                        // Direct string response from generateAIResponse actor
+                        aiResponseContent = event;
+                    } else {
+                        console.error('🤖 Could not extract AI response content from event:', event);
+                        aiResponseContent = 'Sorry, I encountered an error generating the response.';
+                    }
+                } else if (typeof event === 'string') {
+                    // Direct string response from generateAIResponse actor
+                    aiResponseContent = event;
+                } else {
+                    console.error('🤖 Could not extract AI response content from event:', event);
+                    aiResponseContent = 'Sorry, I encountered an error generating the response.';
+                }
+
+                console.log('🤖 AI response content:', aiResponseContent.substring(0, 100) + '...');
+
+                const newMessage: Message = {
+                    id: (Date.now() + 1).toString(),
+                    content: aiResponseContent,
+                    sender: 'ai',
+                    timestamp: new Date(),
+                };
+
+                console.log('🤖 Adding AI message to context:', newMessage);
+
+                return {
+                    ...context,
+                    messages: [...context.messages, newMessage],
+                    isTyping: false,
+                    error: null,
+                    messageToRespondTo: undefined, // Clear the message to respond to after processing
+                };
+            }),
+            updateInput: assign(({ context, event }) => {
+                if (event.type !== 'INPUT_CHANGE') return context;
+                return {
+                    ...context,
+                    currentInput: event.value,
+                };
+            }),
+            updateRegularMessages: assign(({ context, event }) => {
+                if (event.type !== 'UPDATE_REGULAR_MESSAGES') return context;
+                return {
+                    ...context,
+                    regularMessages: event.messages || [],
+                };
+            }),
+            setMultiMessageMode: assign(({ context }) => ({
+                ...context,
+                multiMessageMode: true,
+                currentMultiStep: 0,
+            })),
+            setMultiMessagePlan: assign(({ context, event }) => {
+                const plan = (event as unknown as { output: { plan: string[]; totalSteps: number } }).output;
+                console.log('📝 Multi-message plan created:', plan.totalSteps, 'steps');
+                return {
+                    ...context,
+                    multiMessagePlan: plan.plan,
+                    totalMultiSteps: plan.totalSteps,
+                };
+            }),
+            incrementMultiStep: assign(({ context }) => ({
+                ...context,
+                currentMultiStep: context.currentMultiStep! + 1,
+            })),
+            logContinueProcessing: () => {
+                console.log('🤖 Continue processing triggered - machine will stay in idle state');
+            },
+            resetMultiMessage: assign(({ context }) => ({
+                ...context,
+                multiMessageMode: false,
+                currentMultiStep: 0,
+                totalMultiSteps: 0,
+                multiMessagePlan: [],
+                isTyping: false,
+            })),
+            setTyping: assign(({ context }) => ({
+                ...context,
+                isTyping: true,
+            })),
+            setMCPData: assign(({ context, event }) => {
+                console.log('📊 MCP data fetched successfully');
+                return {
+                    ...context,
+                    mcpData: (event as unknown as { output: MCPData }).output,
+                };
+            }),
+            setError: assign(({ context, event }) => {
+                console.error('❌ AI processing error:', event);
+                let errorMessage = 'An unexpected error occurred';
+
+                const error = (event as { error: unknown }).error;
+                if (error instanceof Error) {
+                    errorMessage = error.message;
+                } else if (typeof error === 'string') {
+                    errorMessage = error;
+                }
+
+                if (errorMessage.includes('API key')) {
+                    errorMessage = 'API key not configured. Please set your Anthropic API key.';
+                } else if (errorMessage.includes('rate limit')) {
+                    errorMessage = 'Rate limit exceeded. Please try again in a moment.';
+                } else if (errorMessage.includes('network') || errorMessage.includes('fetch')) {
+                    errorMessage = 'Network error. Please check your connection and try again.';
+                }
+
+                return {
+                    ...context,
+                    error: errorMessage,
+                    isTyping: false,
+                };
+            }),
+            clearError: assign(({ context }) => ({
+                ...context,
+                error: null,
+            })),
+            addContextAnalysisMessage: assign(({ context }) => {
+                const newMessage: Message = {
+                    id: (Date.now() + 2).toString(),
+                    content:
+                        'Please analyze the existing conversation and provide insights, continue the discussion, or ask relevant follow-up questions based on the context.',
+                    sender: 'user',
+                    timestamp: new Date(),
+                };
+                return {
+                    ...context,
+                    messages: [...context.messages, newMessage],
+                    currentInput: '',
+                    error: null,
+                };
+            }),
+            addAutoResponseMessage: assign(({ context, event }) => {
+                if (event.type !== 'AUTO_RESPOND_TO_MESSAGE') return context;
+
+                console.log('🤖 addAutoResponseMessage called with event:', event);
+                console.log('🤖 Current context before update:', {
+                    messagesCount: context.messages.length,
+                    hasMessageToRespondTo: !!context.messageToRespondTo,
+                    messageToRespondTo: context.messageToRespondTo,
+                });
+
+                // For auto-responses, we store the message content for AI processing
+                // but don't add it as a new user message to avoid duplicates
+                const updatedContext = {
+                    ...context,
+                    currentInput: '',
+                    error: null,
+                    mcpData: undefined,
+                    // Store the message to respond to without adding it to messages array
+                    messageToRespondTo: event.message,
+                };
+
+                console.log('🤖 Context updated with messageToRespondTo:', event.message);
+                console.log('🤖 Updated context:', {
+                    messagesCount: updatedContext.messages.length,
+                    hasMessageToRespondTo: !!updatedContext.messageToRespondTo,
+                    messageToRespondTo: updatedContext.messageToRespondTo,
+                });
+
+                return updatedContext;
+            }),
+        },
+        actors: {
+            generateMultiMessagePlan: fromPromise(
+                async ({ input }: { input: { query: string; regularMessages: any[] } }) => {
+                    try {
+                        console.log('📋 Generating multi-message plan for:', input.query);
+
+                        // Check if we have an available AI provider
+                        if (!API_CONFIG.availableProvider) {
+                            throw new Error(
+                                'No AI API key configured. Please set VITE_ANTHROPIC_API_KEY or VITE_OPENAI_API_KEY in your environment.',
+                            );
+                        }
+
+                        console.log(`🤖 Using ${API_CONFIG.availableProvider} provider for multi-message planning`);
+
+                        // Add conversation context if available
+                        let systemPrompt = `You are a planning assistant. Break down complex queries into 3-5 independent messages that can be sent sequentially. 
+              
+              Each message should be a complete, standalone response that builds upon the previous ones.
+              
+              Return ONLY a JSON object in this exact format:
+              {
+                "plan": ["First message topic/focus", "Second message topic/focus", "Third message topic/focus"],
+                "totalSteps": 3
+              }
+              
+              Keep each step concise but descriptive. Make sure the breakdown makes sense for step-by-step explanations.`;
+
+                        if (input.regularMessages && input.regularMessages.length > 0) {
+                            const conversationContext = getConversationContext(input.regularMessages);
+                            systemPrompt = `${systemPrompt}\n\n${conversationContext}`;
+                        }
+
+                        const response = await makeApiCall(API_CONFIG.primaryEndpoint, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify({
+                                model: API_CONFIG.primaryModel,
+                                max_tokens: 500,
+                                system: systemPrompt,
+                                messages: [
+                                    {
+                                        role: 'user',
+                                        content: `Please create a multi-message plan for this query: "${input.query}"`,
+                                    },
+                                ],
+                            }),
+                        });
+
+                        const data = await response.json();
+                        const planText = data.content[0]?.text || '';
+
+                        // Parse the JSON response
+                        try {
+                            const plan = JSON.parse(planText);
+                            console.log('✅ Multi-message plan created:', plan);
+                            return plan;
+                        } catch {
+                            // Fallback plan if parsing fails
+                            return {
+                                plan: [
+                                    'Introduction and overview',
+                                    'Detailed explanation with examples',
+                                    'Summary and next steps',
+                                ],
+                                totalSteps: 3,
+                            };
+                        }
+                    } catch (error) {
+                        console.error('🚨 Multi-message planning error:', error);
+                        throw error;
+                    }
+                },
+            ),
+
+            generateMultiMessage: fromPromise(
+                async ({
+                    input,
+                }: {
+                    input: {
+                        messages: Message[];
+                        plan?: string[];
+                        currentStep: number;
+                        mcpData?: MCPData;
+                        regularMessages: any[];
+                    };
+                }) => {
+                    console.log(`🔄 Generating multi-message ${input.currentStep + 1}/${input.plan?.length || 1}`);
+
+                    try {
+                        // Check if we have an available AI provider
+                        if (!API_CONFIG.availableProvider) {
+                            throw new Error(
+                                'No AI API key configured. Please set VITE_ANTHROPIC_API_KEY or VITE_OPENAI_API_KEY in your environment.',
+                            );
+                        }
+
+                        console.log(`🤖 Using ${API_CONFIG.availableProvider} provider for multi-message generation`);
+                        const userMessages = input.messages.filter((msg) => msg.sender === 'user');
+                        const latestUserMessage = userMessages[userMessages.length - 1];
+
+                        if (!latestUserMessage) {
+                            throw new Error('No user message found');
+                        }
+
+                        const currentStepTopic = input.plan?.[input.currentStep] || 'General response';
+                        const stepNumber = input.currentStep + 1;
+                        const totalSteps = input.plan?.length || 1;
+
+                        let prompt = `User's original question: "${latestUserMessage.content}"
+
+This is message ${stepNumber} of ${totalSteps} in a multi-message response.
+Focus specifically on: ${currentStepTopic}
+
+Guidelines:
+- Start with a clear indicator like "**Step ${stepNumber}/${totalSteps}: ${currentStepTopic}**"
+- Provide a complete, standalone response for this specific aspect
+- Keep it focused and detailed but not overwhelming
+- Use examples, code snippets, or bullet points where helpful
+- End with a brief transition to what's coming next (unless it's the final message)`;
+
+                        // Add conversation context if available
+                        if (input.regularMessages && input.regularMessages.length > 0) {
+                            const conversationContext = getConversationContext(input.regularMessages);
+                            prompt = `${conversationContext}${prompt}`;
+                        }
+
+                        // Add MCP context if available
+                        if (input.mcpData) {
+                            const mcpContext = formatMCPDataForAgent(input.mcpData);
+                            if (mcpContext) {
+                                prompt = `${mcpContext}\n\n${prompt}`;
+                            }
+                        }
+
+                        const response = await makeApiCall(API_CONFIG.primaryEndpoint, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify({
+                                model: API_CONFIG.primaryModel,
+                                max_tokens: 800,
+                                system: getSystemPrompt(API_CONFIG.availableProvider || 'anthropic', false),
+                                messages: [
+                                    ...input.messages.slice(-5).map((msg) => ({
+                                        role: msg.sender === 'user' ? 'user' : 'assistant',
+                                        content: msg.content,
+                                    })),
+                                    {
+                                        role: 'user',
+                                        content: prompt,
+                                    },
+                                ],
+                            }),
+                        });
+
+                        const data = await response.json();
+                        return data.content[0]?.text || "Sorry, I couldn't generate a response for this step.";
+                    } catch (error) {
+                        console.error('🚨 Multi-message generation error:', error);
+                        throw error;
+                    }
+                },
+            ),
+
+            fetchMCPData: fromPromise(async ({ input }: { input: { query: string } }) => {
+                try {
+                    console.log('🌐 Fetching MCP data for query:', input.query);
+
+                    const response = await performDirectMCPSearch(input.query, true, true);
+                    console.log('✅ MCP data fetched:', response.summary);
+
+                    return response;
+                } catch (error) {
+                    console.error('🚨 MCP fetch error:', error);
+                    throw error;
+                }
+            }),
+
+            generateAIResponse: fromPromise(
+                async ({
+                    input,
+                }: {
+                    input: {
+                        messages: Message[];
+                        mcpData?: MCPData;
+                        regularMessages: any[];
+                        messageToRespondTo?: string;
+                    };
+                }) => {
+                    console.log('🤖 Generating response using server-side AI proxy');
+                    console.log('🤖 Input received:', {
+                        messagesCount: input.messages.length,
+                        hasMCPData: !!input.mcpData,
+                        regularMessagesCount: input.regularMessages?.length || 0,
+                        messageToRespondTo: input.messageToRespondTo,
+                    });
+
+                    try {
+                        // Check if we have an available AI provider
+                        if (!API_CONFIG.availableProvider) {
+                            throw new Error(
+                                'No AI API key configured. Please set VITE_ANTHROPIC_API_KEY or VITE_OPENAI_API_KEY in your environment.',
+                            );
+                        }
+
+                        console.log(`🤖 Using ${API_CONFIG.availableProvider} provider for AI response generation`);
+
+                        // Get the latest user message or the message to respond to
+                        let prompt: string;
+                        let userMessages = input.messages.filter((msg) => msg.sender === 'user');
+
+                        if (input.messageToRespondTo) {
+                            // Use the message to respond to for auto-responses
+                            prompt = input.messageToRespondTo;
+                            console.log('🤖 Auto-responding to message:', prompt.substring(0, 50) + '...');
+                        } else if (userMessages.length > 0) {
+                            const latestUserMessage = userMessages[userMessages.length - 1];
+                            prompt = latestUserMessage.content;
+                        } else {
+                            // If no user messages, this might be an auto-response
+                            prompt = 'Please provide a helpful response to the conversation context.';
+                        }
+
+                        // Add conversation context if available
+                        if (input.regularMessages && input.regularMessages.length > 0) {
+                            const conversationContext = getConversationContext(input.regularMessages);
+                            prompt = `${conversationContext}User question: ${prompt}`;
+                            console.log(
+                                '🚀 Enhanced prompt with conversation context - Recent messages:',
+                                input.regularMessages.length,
+                            );
+                        }
+
+                        // Add MCP context if available
+                        if (input.mcpData) {
+                            const mcpContext = formatMCPDataForAgent(input.mcpData);
+                            if (mcpContext) {
+                                prompt = `${mcpContext}\n\nUser question: ${prompt}`;
+                                console.log(
+                                    '🚀 Enhanced prompt with MCP data - Web results:',
+                                    input.mcpData.searchResults?.length || 0,
+                                    'News articles:',
+                                    input.mcpData.newsArticles?.length || 0,
+                                );
+                            }
+                        }
+
+                        // Use Vite proxy for AI API calls (avoids CORS issues)
+                        const controller = new AbortController();
+                        const timeoutId = setTimeout(() => controller.abort(), 15000); // Increased to 15s timeout for better reliability
+
+                        try {
+                            const response = await makeApiCall(API_CONFIG.primaryEndpoint, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                body: JSON.stringify({
+                                    model: API_CONFIG.primaryModel,
+                                    max_tokens: 300, // Further reduced for faster responses
+                                    system: getSystemPrompt(API_CONFIG.availableProvider || 'anthropic', true),
+                                    messages: [
+                                        // Only include the last 2 messages for faster processing
+                                        ...input.messages.slice(-2).map((msg) => ({
+                                            role: msg.sender === 'user' ? 'user' : 'assistant',
+                                            content: msg.content,
+                                        })),
+                                        {
+                                            role: 'user',
+                                            content: prompt,
+                                        },
+                                    ],
+                                }),
+                                signal: controller.signal,
+                            });
+
+                            clearTimeout(timeoutId);
+
+                            const data = await response.json();
+                            console.log('🤖 AI API response received:', data);
+
+                            const aiResponseText =
+                                data.content[0]?.text ||
+                                data.choices?.[0]?.message?.content ||
+                                "Sorry, I couldn't generate a response.";
+                            console.log('🤖 Extracted AI response text:', aiResponseText.substring(0, 100) + '...');
+
+                            console.log(
+                                '🤖 ✅ generateAIResponse actor completing successfully with text length:',
+                                aiResponseText.length,
+                            );
+                            return aiResponseText;
+                        } catch (error) {
+                            clearTimeout(timeoutId);
+                            if (error.name === 'AbortError') {
+                                throw new Error('AI response generation timed out. Please try again.');
+                            }
+                            throw error;
+                        }
+                    } catch (error) {
+                        console.error('🚨 AI generation error:', error);
+
+                        if (error instanceof Error) {
+                            if (error.message.includes('API key')) {
+                                throw new Error(
+                                    'AI API key is not configured. Please set your API keys in the environment variables.',
+                                );
+                            }
+                            if (error.message.includes('rate limit')) {
+                                throw new Error('Rate limit exceeded. Please try again in a moment.');
+                            }
+                            if (error.message.includes('network') || error.message.includes('fetch')) {
+                                throw new Error(
+                                    'Network error. Please check your connection and ensure your Vite dev server is running on localhost:3011.',
+                                );
+                            }
+                            throw error; // Re-throw the Error instance
+                        }
+
+                        // If error is not an Error instance, create a proper Error with string message
+                        const errorMessage =
+                            typeof error === 'string'
+                                ? error
+                                : error && typeof error === 'object' && 'message' in error
+                                ? String(error.message)
+                                : 'An unexpected error occurred while generating the response';
+                        throw new Error(errorMessage);
+                    }
+                },
+            ),
+        },
+    },
+);