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

package/src/templates/index.ts

@@ -0,0 +1 @@
+export { default as InboxWithAi } from './InboxWithAi';

package/src/types/templates.ts

@@ -0,0 +1,35 @@
+/**
+ * Template configuration for workflow/build templates (from marketplace/extension)
+ */
+export interface TemplateConfig {
+    formExtensionId: string;
+    formFunctionId: string;
+    formId: string;
+    tags: Record<string, string> | string[];
+    enable: string;
+    templateName: string;
+    displayName?: string;
+    description?: string;
+    category?: string;
+    icon?: string;
+    projectType?: string;
+    keywords?: Record<string, string> | string[];
+    formExtensionE2BAPIKey?: string;
+    formExtensionE2BClaudeTemplateId?: string;
+    formExtensionE2BDomain?: string;
+    formExtensionE2BTemplateId?: string;
+    formExtensionE2BViteReactTemplateId?: string;
+    formExtensionE2BVueTemplateId?: string;
+    formExtensionGithubOrg?: string;
+    formExtensionGithubReactBase?: string;
+    formExtensionGithubToken?: string;
+    formExtensionModelConfigAPIKey?: string;
+}
+
+/** Template item for InputToolBar template modal */
+export interface TemplateModalItem {
+    id: string;
+    label: string;
+    description?: string;
+    category?: string;
+}

package/src/utils/utils.ts

@@ -0,0 +1,3 @@
+export function cn(...inputs: (string | undefined | null | false)[]): string {
+    return inputs.filter(Boolean).join(' ').trim();
+}

package/src/xstate/index.ts

@@ -0,0 +1,2 @@
+export * from './rightSidebar.types';
+export * from './rightSidebar.machine';

package/src/xstate/rightSidebar.machine.ts

@@ -0,0 +1,304 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createMachine, assign, fromPromise } from 'xstate';
+import type { RightSidebarContext, MachineEvent, ProbeEvent, RecreateSandboxEvent } from './rightSidebar.types';
+
+export const rightSidebarMachine = createMachine({
+    id: 'rightSidebar',
+    types: {} as {
+        context: RightSidebarContext;
+        events: MachineEvent;
+        input: Partial<RightSidebarContext>;
+    },
+    context: ({ input }) => ({
+        channelId: input?.channelId ?? '',
+        isMinimized: input?.isMinimized ?? false,
+        windowWidth: input?.windowWidth ?? 0,
+        windowHeight: input?.windowHeight ?? 0,
+        isLoading: input?.isLoading ?? false,
+        activeFragment: input?.activeFragment ?? null,
+        currentFiles: input?.currentFiles ?? {},
+        canvasLayers: input?.canvasLayers ?? [],
+        previewStatus: input?.previewStatus ?? null,
+    }),
+    initial: 'idle',
+    states: {
+        idle: {
+            on: {
+                UPDATE: {
+                    actions: assign(({ context, event }) => ({
+                        ...context,
+                        ...(event.value || {}),
+                    })),
+                },
+                SET_FRAGMENT: {
+                    actions: assign(({ context, event }) => ({
+                        ...context,
+                        activeFragment: event.fragment,
+                        currentFiles: event.fragment?.files || context.currentFiles,
+                        canvasLayers: (event.fragment?.canvasLayers as unknown[]) || context.canvasLayers,
+                        // Don't set previewStatus to 'checking' automatically - only probe when explicitly needed
+                        previewStatus: null,
+                    })),
+                },
+                PROBE: 'probing',
+                SET_LOADING: {
+                    actions: assign(({ context, event }) => ({
+                        ...context,
+                        isLoading: event.isLoading,
+                    })),
+                },
+                CLEAR_PREVIEW_STATUS: {
+                    actions: assign(({ context }) => ({
+                        ...context,
+                        previewStatus: null,
+                    })),
+                },
+                RECREATE_SANDBOX: [
+                    {
+                        // Only transition if we're not already recreating
+                        guard: ({ context }) => {
+                            // Check if we have a fragment ID to recreate
+                            const hasFragmentId = !!context.activeFragment?.id;
+                            if (!hasFragmentId) {
+                                console.log('🚫 RECREATE_SANDBOX: No fragment ID, ignoring');
+                                return false;
+                            }
+                            return true;
+                        },
+                        target: 'recreating',
+                        actions: assign(({ context, event }) => {
+                            const recreateEvent = event as RecreateSandboxEvent;
+                            console.log('🎯 RECREATE_SANDBOX event received and accepted:', {
+                                id: recreateEvent.id,
+                                fragmentId: context.activeFragment?.id,
+                            });
+                            return context;
+                        }),
+                    },
+                    {
+                        // If guard fails or already recreating, just log and stay in current state
+                        actions: ({ context, event }) => {
+                            const recreateEvent = event as RecreateSandboxEvent;
+                            console.log('⏭️ RECREATE_SANDBOX ignored (already recreating or no fragment):', {
+                                id: recreateEvent.id,
+                                fragmentId: context.activeFragment?.id,
+                            });
+                        },
+                    },
+                ],
+            },
+        },
+        probing: {
+            invoke: {
+                id: 'probeUrl',
+                src: 'probeUrl',
+                input: ({ context, event }) => {
+                    const probeEvent = event as ProbeEvent;
+                    return {
+                        url: probeEvent.url ?? context.activeFragment?.sandboxUrl,
+                        fragmentId: probeEvent.fragmentId ?? context.activeFragment?.id,
+                    };
+                },
+                onDone: {
+                    target: 'idle',
+                    actions: assign(({ context }) => ({
+                        ...context,
+                        previewStatus: null,
+                        isLoading: false,
+                    })),
+                },
+                onError: [
+                    {
+                        // Only recreate if we have a fragment ID AND the error suggests the sandbox is truly unavailable
+                        // Don't recreate on transient network errors (timeouts, CORS, etc.)
+                        guard: ({ context, event }): boolean => {
+                            if (!context.activeFragment?.id) {
+                                console.log('🚫 Guard: No fragment ID, skipping recreation');
+                                return false;
+                            }
+                            const errorMessage =
+                                event.error instanceof Error ? event.error.message : String(event.error);
+
+                            // Check for explicit HTTP status codes (4xx, 5xx)
+                            const isServerError = /^[45]\d{2}/.test(errorMessage);
+
+                            // Also check for CORS/network errors that likely indicate expired sandbox (502)
+                            // CORS errors on sandbox URLs usually mean the sandbox is expired/down
+                            const isCorsNetworkError: boolean =
+                                errorMessage.includes('502 CORS/Network Error') ||
+                                errorMessage.includes('Failed to fetch') ||
+                                errorMessage.includes('CORS') ||
+                                errorMessage.includes('NetworkError') ||
+                                errorMessage.includes('Network request failed');
+
+                            const willRecreate: boolean = isServerError || isCorsNetworkError;
+
+                            console.log('🔍 Guard check:', {
+                                errorMessage,
+                                isServerError,
+                                isCorsNetworkError,
+                                willRecreate,
+                            });
+
+                            return willRecreate;
+                        },
+                        target: 'recreating',
+                        actions: assign(({ context, event }: any) => {
+                            console.log('🔄 Transitioning to recreating state:', {
+                                fragmentId: context.activeFragment?.id,
+                                error: event.error instanceof Error ? event.error.message : String(event.error),
+                            });
+                            return {
+                                ...context,
+                                previewStatus: {
+                                    status: 'error' as const,
+                                    message: event.error instanceof Error ? event.error.message : 'Network error',
+                                },
+                                isLoading: true,
+                            };
+                        }),
+                    },
+                    {
+                        // For other errors (network, CORS, timeout), just show error but don't recreate
+                        target: 'idle',
+                        actions: assign(({ context, event }: any) => ({
+                            ...context,
+                            previewStatus: {
+                                status: 'error' as const,
+                                message: event.error instanceof Error ? event.error.message : 'Network error',
+                            },
+                            isLoading: false,
+                        })),
+                    },
+                ],
+            },
+        },
+        recreating: {
+            invoke: {
+                id: 'recreateSandbox',
+                src: 'recreateSandbox',
+                input: ({ context, event }) => {
+                    const recreateEvent = event as RecreateSandboxEvent;
+                    const id = recreateEvent.id ?? context.activeFragment?.id ?? '';
+                    console.log('📥 recreateSandbox input:', {
+                        id,
+                        hasRecreateEventId: !!recreateEvent.id,
+                        hasActiveFragmentId: !!context.activeFragment?.id,
+                        activeFragmentId: context.activeFragment?.id,
+                    });
+                    return {
+                        id,
+                    };
+                },
+                onDone: {
+                    target: 'idle',
+                    actions: assign(({ context }) => ({
+                        ...context,
+                        isLoading: false,
+                        previewStatus: { status: 'checking' as const },
+                    })),
+                },
+                onError: {
+                    target: 'idle',
+                    actions: assign(({ context, event }) => ({
+                        ...context,
+                        isLoading: false,
+                        previewStatus: {
+                            status: 'error' as const,
+                            message: event.error instanceof Error ? event.error.message : 'Recreate failed',
+                        },
+                    })),
+                },
+            },
+            on: {
+                COMPLETE_RECREATION: {
+                    target: 'idle',
+                    actions: assign(({ context }) => ({
+                        ...context,
+                        isLoading: false,
+                        previewStatus: null,
+                    })),
+                },
+            },
+        },
+    },
+}).provide({
+    actors: {
+        probeUrl: fromPromise(async ({ input }) => {
+            const { url } = input as { url?: string };
+            console.log('🔍 probeUrl actor called with URL:', url);
+            if (!url) {
+                throw new Error('No URL provided for probing');
+            }
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 10000);
+            try {
+                console.log('📡 Fetching URL to probe:', url);
+                const res = await fetch(url, {
+                    method: 'GET',
+                    mode: 'cors',
+                    redirect: 'follow',
+                    signal: controller.signal,
+                });
+                clearTimeout(timeoutId);
+
+                console.log('📊 Probe response status:', res.status, res.statusText);
+
+                // Check for HTTP error status codes (4xx, 5xx)
+                if (!res.ok) {
+                    const statusCode = res.status;
+                    const statusText = res.statusText || 'Unknown Error';
+                    const errorMessage = `${statusCode} ${statusText}`;
+                    console.log('❌ Probe detected error:', errorMessage);
+                    // Throw error with status code format that matches the guard regex: /^[45]\d{2}/
+                    throw new Error(errorMessage);
+                }
+
+                console.log('✅ Probe successful - URL is accessible');
+                return { ok: true } as const;
+            } catch (error) {
+                clearTimeout(timeoutId);
+
+                // If it's an abort (timeout), don't treat as server error
+                if (error instanceof Error && error.name === 'AbortError') {
+                    throw new Error('TIMEOUT Request timeout');
+                }
+
+                // If it's already a formatted error (from res.ok check), rethrow it
+                if (error instanceof Error && /^\d{3}/.test(error.message)) {
+                    throw error;
+                }
+
+                // Handle CORS/network errors - these often mask 502 errors from expired sandboxes
+                // When we get a CORS error or "Failed to fetch", it's likely because:
+                // 1. The sandbox is expired (502) and the server isn't responding properly
+                // 2. The sandbox is down and can't set CORS headers
+                // We'll throw a special error that the guard can recognize
+                if (error instanceof Error) {
+                    const isCorsError =
+                        error.message.includes('Failed to fetch') ||
+                        error.message.includes('CORS') ||
+                        error.message.includes('NetworkError') ||
+                        error.message.includes('Network request failed');
+
+                    if (isCorsError) {
+                        console.log('⚠️ CORS/Network error detected - likely expired sandbox (502):', error.message);
+                        // Throw as 502 error so guard will match it
+                        throw new Error('502 CORS/Network Error - Sandbox likely expired');
+                    }
+                }
+
+                // For other network errors, throw as-is and let guard decide
+                throw error;
+            }
+        }),
+        recreateSandbox: fromPromise(async ({ input }) => {
+            // Placeholder actor: implement by injecting via provide in component if needed
+            const { id } = input as { id: string };
+            console.log('recreateSandbox actor invoked for id:', id);
+            return { success: true } as const;
+        }),
+    },
+});
+
+export type RightSidebarMachine = typeof rightSidebarMachine;

package/src/xstate/rightSidebar.types.ts

@@ -0,0 +1,58 @@
+import type { ActorRefFrom } from 'xstate';
+
+export type PreviewStatus = {
+    code?: number;
+    message?: string;
+    status?: 'checking' | 'error';
+} | null;
+
+export type ActiveFragment = {
+    id?: string;
+    sandboxUrl?: string;
+    sandboxId?: string;
+    title?: string;
+    files?: Record<string, string>;
+    projectId?: string;
+    modelConfig?: unknown;
+    canvasLayers?: unknown[];
+    summary?: unknown;
+    isError?: boolean;
+    isCreatingSandbox?: boolean;
+} | null;
+
+export type RightSidebarContext = {
+    channelId: string;
+    isMinimized: boolean;
+    windowWidth: number;
+    windowHeight: number;
+    isLoading: boolean;
+    activeFragment: ActiveFragment;
+    currentFiles: Record<string, string>;
+    canvasLayers: unknown[];
+    previewStatus: PreviewStatus;
+};
+
+export type UpdateEvent = {
+    type: 'UPDATE';
+    value: Partial<RightSidebarContext>;
+};
+
+export type SetFragmentEvent = {
+    type: 'SET_FRAGMENT';
+    fragment: NonNullable<ActiveFragment>;
+};
+
+export type ProbeEvent = { type: 'PROBE'; url?: string; fragmentId?: string };
+
+export type RecreateSandboxEvent = { type: 'RECREATE_SANDBOX'; id: string };
+
+export type MachineEvent =
+    | UpdateEvent
+    | SetFragmentEvent
+    | ProbeEvent
+    | RecreateSandboxEvent
+    | { type: 'SET_LOADING'; isLoading: boolean }
+    | { type: 'CLEAR_PREVIEW_STATUS' }
+    | { type: 'COMPLETE_RECREATION' };
+
+export type SubmitOrganizationActor = ActorRefFrom<unknown>;

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "outDir": "lib",
+        "declarationDir": "lib",
+        "declaration": true,
+        "declarationMap": true,
+        "skipLibCheck": true,
+        "types": ["@types/node", "@types/jest", "../../../typings"]
+    },
+    "exclude": ["../../../node_modules", "node_modules", "lib", "dist", "webpack.config.js", "rollup.config.mjs"],
+    "include": ["src", "./typings/*.d.ts", "type.d.ts"]
+}

package/webpack.config.js

@@ -0,0 +1,92 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const nodeExternals = require('webpack-node-externals');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const webpack = require('webpack');
+const path = require('path');
+
+const webpackOpts = {
+    mode: 'development',
+    entry: {
+        index: './src/index.ts',
+    },
+    target: 'node',
+    output: {
+        path: path.join(__dirname, 'lib'),
+        filename: '[name].js',
+        libraryTarget: 'commonjs2',
+    },
+    resolve: {
+        extensions: [
+            '.js',
+            '.jsx',
+            '.ts',
+            '.tsx',
+            '.graphql',
+            '.graphqls',
+            '.gql',
+            '.native.tsx',
+            '.native.ts',
+            '.json',
+        ],
+    },
+    plugins: [
+        new webpack.LoaderOptionsPlugin({
+            options: {
+                test: /\.tsx?$/,
+                ts: {
+                    compiler: 'typescript',
+                    configFile: 'tsconfig.json',
+                },
+                tslint: {
+                    emitErrors: true,
+                    failOnHint: true,
+                },
+            },
+        }),
+    ],
+    devtool: 'source-map',
+    module: {
+        rules: [
+            {
+                test: /\.(tsx)?$/,
+                use: 'ts-loader',
+            },
+            {
+                test: /\.mjs$/,
+                include: /node_modules/,
+                type: 'javascript/auto',
+            },
+            {
+                test: /\.(gql)$/,
+                exclude: /node_modules/,
+                use: ['graphql-tag/loader'],
+            },
+            {
+                test: /\.graphql?/,
+                exclude: /node_modules/,
+                use: 'raw-loader',
+            },
+            {
+                test: /\.(png|jpg|gif|webp)$/i,
+                use: {
+                    loader: 'url-loader',
+                    options: {
+                        limit: 8192,
+                        name: 'static/media/[name].[hash:8].[ext]',
+                    },
+                },
+            },
+            {
+                test: /\.svg$/,
+                use: ['@svgr/webpack'],
+            },
+            {
+                test: /\.json$/,
+                loader: 'json-loader',
+            },
+        ],
+    },
+    externals: [nodeExternals({ modulesDir: '../../../node_modules' }), nodeExternals()],
+};
+
+module.exports = webpackOpts;