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

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './usePersistentModelConfig';
+export * from './use-file-sync';

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

@@ -0,0 +1,37 @@
+export { default } from './module';
+export { ChatMessageFill } from './module';
+export {
+    Inbox,
+    Threads,
+    ThreadMessages,
+    ServiceInbox,
+    InboxWithLoader,
+    InboxWithAiLoader,
+    InboxAiMessagesLoader,
+    InboxContainer,
+    AiLandingInput,
+} from './container';
+export {
+    MessageSliceRenderer,
+    Messages,
+    Popover,
+    MessageInput,
+    CommonMessage,
+    UploadImageButton,
+    MessageItem,
+    LeftSidebar,
+    FilesList,
+    ConversationItem,
+    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/interfaces/index.ts

@@ -0,0 +1 @@
+export { CardMessageAttachmentsInterface, AlertMessageAttachmentsInterface } from './message-widgets.interface';

package/src/interfaces/message-widgets.interface.ts

@@ -0,0 +1,21 @@
+export interface AlertMessageAttachmentsInterface {
+    title: string;
+    isTitleHtml: boolean;
+    icon: string;
+    callToAction: {
+        title: string;
+        link: string;
+    };
+}
+
+export interface CardMessageAttachmentsInterface {
+    image: string;
+    title?: string;
+    isTitleHtml?: string;
+    description: string;
+    isDescriptionHtml: boolean;
+    callToAction: {
+        title: string;
+        link: string;
+    };
+}

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;
+            }),
+        },
+    },
+);