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

package/src/hooks/use-file-sync.ts

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useUpdateSandboxFileMutation, useFileUpdatedSubscription } from 'common/graphql';
+
+export interface FileSyncHookProps {
+    projectId: string;
+    messageId?: string;
+}
+
+export interface FileSyncResult {
+    updateFile: (filePath: string, content: string) => Promise<void>;
+    isUpdating: boolean;
+    error: string | null;
+    lastUpdate: {
+        filePath: string;
+        operation: string;
+        timestamp: string;
+    } | null;
+}
+
+export const useFileSync = ({ projectId, messageId }: FileSyncHookProps): FileSyncResult => {
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [lastUpdate, setLastUpdate] = useState<{
+        filePath: string;
+        operation: string;
+        timestamp: string;
+    } | null>(null);
+
+    // GraphQL mutations
+    const [updateSandboxFileMutation] = useUpdateSandboxFileMutation();
+
+    // Real-time file updates subscription
+    const { data: fileUpdateData } = useFileUpdatedSubscription({
+        variables: { projectId },
+        skip: !projectId,
+    });
+
+    // Handle real-time file updates
+    useEffect(() => {
+        if (fileUpdateData?.fileUpdated) {
+            const update = fileUpdateData.fileUpdated;
+            setLastUpdate({
+                filePath: update.filePath,
+                operation: update.operation,
+                timestamp: update.timestamp,
+            });
+        }
+    }, [fileUpdateData]);
+
+    const updateFile = useCallback(
+        async (filePath: string, content: string) => {
+            if (!messageId) {
+                throw new Error('Fragment ID is required for file operations');
+            }
+
+            console.log('useFileSync.updateFile - Using fragmentId:', messageId);
+
+            try {
+                setIsUpdating(true);
+                setError(null);
+
+                const response = await updateSandboxFileMutation({
+                    variables: {
+                        projectId,
+                        messageId,
+                        filePath,
+                        content,
+                    },
+                });
+
+                if (!response.data?.updateSandboxFile.success) {
+                    throw new Error(response.data?.updateSandboxFile.message || 'Failed to update file');
+                }
+            } catch (err) {
+                const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+                setError(errorMessage);
+                throw err;
+            } finally {
+                setIsUpdating(false);
+            }
+        },
+        [updateSandboxFileMutation, projectId, messageId],
+    );
+
+    return {
+        updateFile,
+        isUpdating,
+        error,
+        lastUpdate,
+    };
+};

package/src/hooks/usePersistentModelConfig.ts

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export type ProviderId = 'openai' | 'anthropic' | 'gemini';
+
+export interface ModelConfig {
+    provider: ProviderId;
+    model: string;
+    apiKey: string;
+    template: 'react-vite' | 'nextjs' | 'vue' | 'vite-react';
+}
+
+const STORAGE_KEY = 'mbx:model-config';
+
+function loadFromStorage(): ModelConfig | null {
+    try {
+        const raw = typeof window !== 'undefined' ? window.localStorage.getItem(STORAGE_KEY) : null;
+        if (!raw) return null;
+        const parsed = JSON.parse(raw);
+        return parsed as ModelConfig;
+    } catch {
+        return null;
+    }
+}
+
+function saveToStorage(config: ModelConfig) {
+    try {
+        if (typeof window !== 'undefined') {
+            window.localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+        }
+    } catch {
+        // ignore
+    }
+}
+
+const DEFAULTS: ModelConfig = {
+    provider: 'anthropic',
+    model: 'claude-3-5-sonnet-20241022',
+    apiKey: '',
+    template: 'react-vite',
+};
+
+export function usePersistentModelConfig() {
+    const [modelConfig, setModelConfig] = useState<ModelConfig>(() => loadFromStorage() || DEFAULTS);
+
+    useEffect(() => {
+        saveToStorage(modelConfig);
+    }, [modelConfig]);
+
+    const updateModelConfig = useCallback((newConfig: ModelConfig) => {
+        setModelConfig(newConfig);
+    }, []);
+
+    const hasApiKey = useMemo(() => Boolean(modelConfig.apiKey && modelConfig.apiKey.trim().length > 0), [modelConfig]);
+
+    const getValidatedConfig = useCallback(() => {
+        if (!hasApiKey) return null;
+        return modelConfig;
+    }, [hasApiKey, modelConfig]);
+
+    return { modelConfig, updateModelConfig, getValidatedConfig, hasApiKey };
+}
+
+export default usePersistentModelConfig;

package/src/index.ts

@@ -9,6 +9,7 @@ export {
     InboxWithAiLoader,
     InboxAiMessagesLoader,
     InboxContainer,
+    AiLandingInput,
 } from './container';
 export {
     MessageSliceRenderer,
@@ -24,7 +25,13 @@ export {
     UserModalContent,
     ServiceInboxItem,
     AIAgent,
+    ModelConfigPanel,
+    RightSidebarAi,
+    InputComponent,
+    RightSidebarFillDefault,
 } from './components';
 export { InboxWithAi } from './templates';
 export type { CardMessageAttachmentsInterface, AlertMessageAttachmentsInterface } from './interfaces';
 export * from './enums';
+export * from './machines';
+export * from './hooks';

package/src/machines/aiAgentMachine.simple.ts

@@ -0,0 +1,89 @@
+import { createMachine, assign } from 'xstate';
+import { AIAgentContext, AIAgentEvent, Message } from './types';
+
+export const aiAgentMachine = createMachine(
+    {
+        id: 'aiAgentSimple',
+        types: {} as {
+            context: AIAgentContext;
+            events: AIAgentEvent;
+        },
+        initial: 'idle',
+        context: {
+            messages: [],
+            currentInput: '',
+            error: null,
+            isTyping: false,
+            regularMessages: [],
+        },
+        states: {
+            idle: {
+                on: {
+                    SEND_MESSAGE: {
+                        target: 'idle',
+                        guard: 'hasValidMessage',
+                        actions: 'addUserMessage',
+                    },
+                    INPUT_CHANGE: {
+                        actions: 'updateInput',
+                    },
+                    CLEAR_ERROR: {
+                        actions: 'clearError',
+                    },
+                    UPDATE_REGULAR_MESSAGES: {
+                        actions: 'updateRegularMessages',
+                    },
+                    // Tolerate legacy events as no-ops
+                    AUTO_RESPOND_TO_MESSAGE: {},
+                    RETRY: {},
+                    CONTINUE_PROCESSING: {},
+                    UPDATE: {
+                        actions: 'mergeUpdate',
+                    },
+                },
+            },
+        },
+    },
+    {
+        guards: {
+            hasValidMessage: ({ event }) => {
+                if (event.type === 'SEND_MESSAGE') {
+                    return Boolean(event.message && event.message.trim().length > 0);
+                }
+                return false;
+            },
+        },
+        actions: {
+            addUserMessage: assign(({ context, event }) => {
+                if (event.type !== 'SEND_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,
+                };
+            }),
+            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 || [] };
+            }),
+            clearError: assign(({ context }) => ({ ...context, error: null })),
+            mergeUpdate: assign(({ context, event }) => {
+                // Supports events like { type: 'UPDATE', value: { messages: [] } }
+                if (event.type !== 'UPDATE') return context as any;
+                const value = (event as any).value || {};
+                return { ...context, ...value } as any;
+            }),
+        },
+    },
+);

package/src/machines/aiAgentMachine.ts

@@ -1,19 +1,33 @@
 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 { CLIENT_URL, 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
+// Read persisted model configuration saved by usePersistentModelConfig
+function getUserModelConfig(): { provider?: 'openai' | 'anthropic' | 'gemini'; model?: string; apiKey?: string } {
+    try {
+        if (typeof window === 'undefined') return {};
+        const raw = window.localStorage.getItem('mbx:model-config');
+        if (!raw) return {};
+        const parsed = JSON.parse(raw);
+        return {
+            provider: parsed?.provider,
+            model: parsed?.model,
+            apiKey: parsed?.apiKey,
+        };
+    } catch {
+        return {};
+    }
+}
+
+const USER_MODEL_CONFIG = getUserModelConfig();
+
 const API_CONFIG = {
-    // Use environment variables for API keys
-    ANTHROPIC_API_KEY: env?.ANTHROPIC_API_KEY,
-    OPENAI_API_KEY: env?.OPENAI_API_KEY,
+    // Only non-AI keys from env (public APIs allowed)
     NEWS_API_KEY: env?.NEWS_API_KEY,
 
     // Configurable proxy endpoints
@@ -30,39 +44,56 @@ const API_CONFIG = {
     DEFAULT_MODEL: 'claude-3-5-haiku-20241022',
     OPENAI_MODEL: 'gpt-4o-mini',
 
-    // Check which AI provider is available
+    // User-provided model configuration (from localStorage)
+    get userProvider() {
+        return USER_MODEL_CONFIG?.provider;
+    },
+    get userModel() {
+        return USER_MODEL_CONFIG?.model;
+    },
+    get userApiKey() {
+        return USER_MODEL_CONFIG?.apiKey;
+    },
+
+    // Check which AI provider is available (ONLY from user config)
     get availableProvider() {
-        if (this.ANTHROPIC_API_KEY) return 'anthropic';
-        if (this.OPENAI_API_KEY) return 'openai';
+        if (this.userApiKey && this.userProvider) {
+            if (this.userProvider === 'anthropic') return 'anthropic';
+            if (this.userProvider === 'openai') return 'openai';
+        }
         return null;
     },
 
     // Get the appropriate endpoint based on available provider
     get primaryEndpoint() {
-        return this.availableProvider === 'anthropic' ? this.ANTHROPIC_ENDPOINT : this.OPENAI_ENDPOINT;
+        if (this.availableProvider === 'anthropic') return this.ANTHROPIC_ENDPOINT;
+        if (this.availableProvider === 'openai') return this.OPENAI_ENDPOINT;
+        return '';
     },
 
     // Get the appropriate model based on available provider
     get primaryModel() {
-        return this.availableProvider === 'anthropic' ? this.DEFAULT_MODEL : this.OPENAI_MODEL;
+        if (this.userModel) return this.userModel;
+        if (this.availableProvider === 'anthropic') return this.DEFAULT_MODEL;
+        if (this.availableProvider === 'openai') return this.OPENAI_MODEL;
+        return this.DEFAULT_MODEL;
     },
 };
 
 // Log configuration on startup
 console.log('🤖 AI Agent Machine Configuration:');
-console.log(`   Available Provider: ${API_CONFIG.availableProvider || 'None'}`);
+console.log(`   Available Provider (user): ${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(`   User API Key: ${API_CONFIG.userApiKey ? '✅ 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.');
+    console.error('🚨 Please add your API key in Model Settings.');
 } else {
     console.log(`✅ AI API provider configured: ${API_CONFIG.availableProvider}`);
 }
@@ -80,7 +111,7 @@ console.log(`🌐 Proxy Configuration: ${getProxyBaseUrl() || 'Relative paths (p
 async function makeApiCall(endpoint: string, options: RequestInit) {
     try {
         const baseUrl = getProxyBaseUrl();
-        const url = `${baseUrl}${endpoint}`;
+        const url = endpoint ? `${baseUrl}${endpoint}` : '';
 
         console.log(`🌐 Making API call through proxy to: ${url}`);
         console.log(`📤 Request options:`, {
@@ -89,7 +120,24 @@ async function makeApiCall(endpoint: string, options: RequestInit) {
             body: options.body ? JSON.parse(options.body as string) : undefined,
         });
 
-        const response = await fetch(url, options);
+        // Do not call if no endpoint (no provider configured)
+        if (!endpoint) {
+            throw new Error('AI provider is not configured. Please add your API key in Model Settings.');
+        }
+
+        // Inject API key headers from user config if available
+        const headers = new Headers(options.headers || {});
+        if (API_CONFIG.userApiKey) {
+            if (API_CONFIG.availableProvider === 'anthropic') {
+                headers.set('x-api-key', API_CONFIG.userApiKey);
+                headers.set('anthropic-version', '2023-06-01');
+                headers.set('anthropic-dangerous-direct-browser-access', 'true');
+            } else if (API_CONFIG.availableProvider === 'openai') {
+                headers.set('Authorization', `Bearer ${API_CONFIG.userApiKey}`);
+            }
+        }
+
+        const response = await fetch(url, { ...options, headers });
 
         if (!response.ok) {
             const errorData = await response.json().catch(() => ({}));
@@ -846,7 +894,7 @@ export const aiAgentMachine = createMachine(
                 }
 
                 if (errorMessage.includes('API key')) {
-                    errorMessage = 'API key not configured. Please set your Anthropic API key.';
+                    errorMessage = 'API key not configured. Please add your API key in Model Settings.';
                 } else if (errorMessage.includes('rate limit')) {
                     errorMessage = 'Rate limit exceeded. Please try again in a moment.';
                 } else if (errorMessage.includes('network') || errorMessage.includes('fetch')) {