@messenger-box/tailwind-ui-inbox 10.0.3-alpha.121 → 10.0.3-alpha.123

package/src/container/AiLandingInput.tsx

@@ -22,32 +22,19 @@ const AiLandingInput: React.FC = () => {
     const [isCreatingChannel, setIsCreatingChannel] = React.useState(false);
     const { modelConfig, updateModelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
     // const [showModelConfig, setShowModelConfig] = React.useState(!hasApiKey);
-    const [showModelConfig, setShowModelConfig] = React.useState(true);
 
     return (
-        <div className="flex items-center justify-center min-h-screen bg-gray-50">
+        <div className="flex items-center justify-center min-h-screen bg-white shadow-lg">
             <div className="w-full max-w-2xl mx-4">
-                <div className="bg-white rounded-lg shadow-lg p-6">
+                <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-4xl overflow-hidden rounded-[28px] border border-gray-200 bg-card ">
                     <div className="text-center mb-6">
-                        <h3 className="text-xl font-semibold text-gray-700 mb-2">What would you like to build?</h3>
+                        <h3 className="text-xl font-semibold text-gray-700 mb-2">{`${
+                            (config?.LAYOUT_SETTINGS as any)?.title ?? 'What would you like to build?'
+                        }`}</h3>
                         <p className="text-gray-500">Describe your idea and I'll help you create it step by step.</p>
                     </div>
                     <div className="mb-0">
-                        <div className={`   ${!hasApiKey ? 'p-3 bg-gray-50 rounded-lg border' : ''}`}>
-                            {/* <div className="mb-4">
-                                <h3 className="text-sm font-medium text-gray-900 mb-2">Configuration</h3> 
-                                <p className="text-xs text-gray-600 mb-3">
-                                    Choose your AI model, template, and provide your API key before creating your
-                                    project.
-                                </p>
-                            </div> */}
-                            {/* <ModelConfigPanel
-                                config={modelConfig}
-                                onConfigChange={updateModelConfig}
-                                isVisible={showModelConfig}
-                                onToggleVisibility={() => setShowModelConfig(!showModelConfig)}
-                                showTemplate={true}
-                            /> */}
+                        <div className={`   ${!hasApiKey ? 'p-3 bg-white rounded-lg border' : ''}`}>
                             {!hasApiKey && (
                                 <>
                                     <div className="mb-4">
@@ -65,10 +52,11 @@ const AiLandingInput: React.FC = () => {
                         </div>
                     </div>
                     <InputComponent
+                        //  textareaClassName="border-none focus:border-none active:border-none focus:outline-none focus:ring-0"
+                        // toolBarParentClassName="border-t border-gray-200 focus:border-t-gray-400"
                         handleSend={async (message: string, files: File[]) => {
                             const validated = getValidatedConfig();
-                            if (!validated && !hasApiKey) {
-                                setShowModelConfig(true);
+                            if (!validated && !hasApiKey && !modelConfig?.extensionId && !modelConfig?.formId) {
                                 return;
                             }
                             console.log('Message sent without channel:', message, files);
@@ -77,8 +65,13 @@ const AiLandingInput: React.FC = () => {
                             // const postId = objectId();
                             const channelId = objectId();
                             // Do not include extensionId inside modelConfig when sending additionalProperties
-                            const { extensionId: _omitExtensionId, ...modelConfigWithoutExtensionId } =
-                                modelConfig || ({} as any);
+                            const {
+                                extensionId: _omitExtensionId,
+                                formId: _omitFormId,
+                                functionId: _omitFunctionId,
+                                stepName: _omitStepName,
+                                ...modelConfigWithoutExtensionId
+                            } = modelConfig || ({} as any);
                             createChannelWorkflowJob({
                                 variables: {
                                     createChannelInput: {
@@ -107,10 +100,20 @@ const AiLandingInput: React.FC = () => {
                                         },
                                     },
                                     extensionInput: {
-                                        extensionId: modelConfig?.extensionId || config.MESSENGER_BOX_FORM_EXTENSION_ID,
-                                        stepName: 'extractCodeFromExtension',
-                                        formId: 'form-builder-proxy',
-                                        functionId: 'create-channel-function',
+                                        extensionId:
+                                            modelConfig?.extensionId || config?.MESSENGER_BOX_FORM_EXTENSION_ID,
+                                        stepName:
+                                            modelConfig?.stepName ||
+                                            config?.MESSENGER_BOX_FORM_EXTENSION_STEP_NAME ||
+                                            'extractCodeFromExtension',
+                                        formId:
+                                            modelConfig?.formId ||
+                                            config?.MESSENGER_BOX_FORM_EXTENSION_FORM_ID ||
+                                            'form-builder-proxy',
+                                        functionId:
+                                            modelConfig?.functionId ||
+                                            config?.MESSENGER_BOX_FORM_EXTENSION_FUNCTION_ID ||
+                                            'create-channel-function',
                                         metadata: {},
                                         source: 'final-submission',
                                     },
@@ -143,99 +146,9 @@ const AiLandingInput: React.FC = () => {
                         modelConfig={modelConfig}
                         onModelConfigChange={updateModelConfig}
                     />
-                    {/* <div className="mt-2">
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                            <div className="space-y-2">
-                                <div className="relative">
-                                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                        <div className="w-5 h-5 bg-purple-500 rounded-full flex items-center justify-center">
-                                            <span className="text-white text-xs font-bold">N</span>
-                                        </div>
-                                    </div>
-                                    <select className="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white">
-                                        <option value="nextjs">Next.js</option>
-                                        <option value="vuejs">Vue.js</option>
-                                        <option value="vite-remix">Vite with Remix</option>
-                                    </select>
-                                    <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                                        <svg
-                                            className="h-5 w-5 text-gray-400"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M19 9l-7 7-7-7"
-                                            />
-                                        </svg>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="space-y-2">
-                                <div className="relative">
-                                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                        <div className="w-5 h-5 bg-pink-500 rounded-full flex items-center justify-center">
-                                            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
-                                                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                            </svg>
-                                        </div>
-                                    </div>
-                                    <select className="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 bg-white">
-                                        <option value="claude-3-5-sonnet">Claude 3.5 Sonnet</option>
-                                        <option value="claude-3-5-haiku">Claude 3.5 Haiku</option>
-                                        <option value="claude-3-opus">Claude 3 Opus</option>
-                                        <option value="claude-3-sonnet">Claude 3 Sonnet</option>
-                                        <option value="claude-3-haiku">Claude 3 Haiku</option>
-                                    </select>
-                                    <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                                        <svg
-                                            className="h-5 w-5 text-gray-400"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M19 9l-7 7-7-7"
-                                            />
-                                        </svg>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="space-y-2">
-                                <div className="relative">
-                                    <select className="block w-full pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white">
-                                        <option value="">API Key</option>
-                                        <option value="saved-key-1">••••••••••••</option>
-                                        <option value="saved-key-2">••••••••••••</option>
-                                    </select>
-                                    <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                                        <svg
-                                            className="h-5 w-5 text-gray-400"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M19 9l-7 7-7-7"
-                                            />
-                                        </svg>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div> */}
-                    <div className="text-center text-sm text-gray-400">
+                    {/* <div className="text-center text-sm text-gray-400">
                         Each project gets its own workspace where you can iterate and refine your ideas.
-                    </div>
+                    </div> */}
                 </div>
             </div>
             {isCreatingChannel && <TailwindOverlaySpinner />}

package/src/container/InboxAiMessagesLoader.tsx

@@ -11,13 +11,22 @@ interface InboxWithAiLoaderOutletProps {
     supportServices?: boolean;
     pathPrefix?: string;
     orgName?: string;
+    showDateSeparators?: boolean;
     [key: string]: any; // Allow other props to be passed through to Inbox
 }
 
 const InboxWithAiLoaderOutlet = (props: InboxWithAiLoaderOutletProps) => {
     const location = useLocation();
-    const { messages, setMessages, selectedPost, setSelectedPost, setIsLoading, isLoading, sendMessageInput } =
-        useOutletContext() as any;
+    const {
+        messages,
+        setMessages,
+        selectedPost,
+        setSelectedPost,
+        setIsLoading,
+        isLoading,
+        sendMessageInput,
+        isShowOnlyInbox,
+    } = useOutletContext() as any;
     const urlParams = location?.search ? new URLSearchParams(location.search) : null;
     const { id: pathChannelId } = useParams();
     const channelId = urlParams?.get('id') || pathChannelId;
@@ -36,6 +45,8 @@ const InboxWithAiLoaderOutlet = (props: InboxWithAiLoaderOutletProps) => {
             setIsLoading={setIsLoading}
             isLoading={isLoading}
             sendMessageInput={sendMessageInput}
+            isShowOnlyInbox={isShowOnlyInbox}
+            showDateSeparators={props?.showDateSeparators || false}
             {...props}
         />
     );

package/src/container/InboxContainer.tsx

@@ -8,6 +8,7 @@ interface InboxContainerProps {
     supportServices?: boolean;
     orgName?: string;
     handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
+    isShowOnlyInbox?: boolean;
     [key: string]: any;
 }
 
@@ -22,14 +23,7 @@ const InboxSkeleton = React.memo(({ showRightSidebar = false }: { showRightSideb
 ));
 
 const InboxContainer: React.FC<InboxContainerProps> = (props) => {
-    const {
-        channelId,
-        channelFilters: channelFilterProp,
-        channelRole,
-        supportServices,
-        orgName,
-        handleRecreateSandbox,
-    } = props;
+    const { channelId } = props;
 
     if (!channelId) {
         return <InboxSkeleton showRightSidebar={true} />;

package/src/container/InboxWithAiLoader.tsx

@@ -38,6 +38,7 @@ interface InboxWithAiLoaderProps {
     pathPrefix?: string;
     orgName?: string;
     handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
+    isShowOnlyInbox?: boolean;
     [key: string]: any;
 }
 
@@ -53,6 +54,7 @@ const InboxWithAiLoader = (props: InboxWithAiLoaderProps) => {
             orgName: orgName || '',
             pathPrefix: pathPrefix || '',
             handleRecreateSandbox: props.handleRecreateSandbox,
+            isShowOnlyInbox: props?.isShowOnlyInbox || false,
         }),
         [props, orgName, pathPrefix],
     );

package/src/hooks/usePersistentModelConfig.ts

@@ -7,17 +7,33 @@ export interface ModelConfig {
     model: string;
     apiKey: string;
     template: 'vite-react' | 'nextjs' | 'vue';
-    extensionId?: string;
+    extensionId: string;
+    formId: string;
+    functionId?: string;
+    stepName?: string;
 }
 
 const STORAGE_KEY = 'mbx:model-config';
 
+const DEFAULTS: ModelConfig = {
+    provider: 'anthropic',
+    // model: 'claude-3-5-sonnet-20241022',
+    model: 'claude-sonnet-4-5-20250929',
+    apiKey: '',
+    template: 'vite-react',
+    extensionId: '',
+    formId: '',
+    functionId: '',
+    stepName: '',
+};
+
 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;
+        // Merge with defaults to ensure all fields are present
+        return { ...DEFAULTS, ...parsed } as ModelConfig;
     } catch {
         return null;
     }
@@ -33,23 +49,20 @@ function saveToStorage(config: ModelConfig) {
     }
 }
 
-const DEFAULTS: ModelConfig = {
-    provider: 'anthropic',
-    model: 'claude-sonnet-4-5-20250929',
-    apiKey: '',
-    template: 'vite-react',
-    extensionId: '',
-};
-
 export function usePersistentModelConfig() {
-    const [modelConfig, setModelConfig] = useState<ModelConfig>(() => loadFromStorage() || DEFAULTS);
+    const [modelConfig, setModelConfig] = useState<ModelConfig>(() => {
+        const loaded = loadFromStorage();
+        // Merge with defaults to ensure all fields are present even if loaded config is partial
+        return loaded ? { ...DEFAULTS, ...loaded } : DEFAULTS;
+    });
 
     useEffect(() => {
         saveToStorage(modelConfig);
     }, [modelConfig]);
 
-    const updateModelConfig = useCallback((newConfig: ModelConfig) => {
-        setModelConfig(newConfig);
+    const updateModelConfig = useCallback((newConfig: Partial<ModelConfig> | ModelConfig) => {
+        // Merge with current config and defaults to ensure all fields are present
+        setModelConfig((prev) => ({ ...DEFAULTS, ...prev, ...newConfig } as ModelConfig));
     }, []);
 
     const hasApiKey = useMemo(() => Boolean(modelConfig.apiKey && modelConfig.apiKey.trim().length > 0), [modelConfig]);

package/src/templates/InboxWithAi.tsx

@@ -33,6 +33,7 @@ export interface InboxProps {
     data?: any;
     orgName?: string;
     handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
+    isShowOnlyInbox?: boolean;
 }
 
 // Static utility hooks and components
@@ -198,7 +199,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
             {/* Main Container */}
             <div className="flex flex-col h-screen overflow-hidden">
                 {/* Header with Design/Interact/Code tabs - now inside main container */}
-                {channelId && (
+                {channelId && !props?.isShowOnlyInbox && (
                     <div className="flex-shrink-0 bg-white ">
                         <div className="flex items-center justify-between px-4 py-3">
                             <div className="flex items-center">
@@ -332,7 +333,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
                 <div
                     className="flex-1 grid overflow-hidden"
                     style={{
-                        gridTemplateColumns: isDesktopView ? '35% 65%' : '1fr',
+                        gridTemplateColumns: isDesktopView ? (props?.isShowOnlyInbox ? '1fr' : '35% 65%') : '1fr',
                         height: 'calc(100vh - 80px)', // Subtract header height
                     }}
                 >
@@ -356,6 +357,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                 setIsLoading={setIsLoading}
                                 isLoading={isLoading}
                                 sendMessageInput={sendMessageInput}
+                                isShowOnlyInbox={props?.isShowOnlyInbox}
                             />
                         ) : (
                             <EmptyState />
@@ -363,7 +365,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
                     </div>
 
                     {/* Right Sidebar - 65% width on desktop only */}
-                    {channelId && isDesktopView && (
+                    {channelId && isDesktopView && !props?.isShowOnlyInbox && (
                         <div
                             className="overflow-hidden border flex-1 w-full"
                             style={{
@@ -406,6 +408,7 @@ const ContentComponent = React.memo((props: any) => {
         setIsLoading,
         isLoading,
         sendMessageInput,
+        isShowOnlyInbox,
     } = props;
 
     return (
@@ -426,6 +429,7 @@ const ContentComponent = React.memo((props: any) => {
                                 setIsLoading={setIsLoading}
                                 isLoading={isLoading}
                                 sendMessageInput={sendMessageInput}
+                                isShowOnlyInbox={isShowOnlyInbox}
                             />
                         </>
                     )}

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,139 @@
+import { createMachine, assign, fromPromise } from 'xstate';
+import type { RightSidebarContext, MachineEvent } 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: {
+                    target: 'probing',
+                    actions: assign(({ context, event }) => ({
+                        ...context,
+                        activeFragment: event.fragment,
+                        currentFiles: event.fragment?.files || context.currentFiles,
+                        canvasLayers: (event.fragment?.canvasLayers as unknown[]) || context.canvasLayers,
+                        previewStatus: event.fragment?.sandboxUrl ? { status: 'checking' } : null,
+                    })),
+                },
+                PROBE: 'probing',
+                SET_LOADING: {
+                    actions: assign(({ context, event }) => ({
+                        ...context,
+                        isLoading: event.isLoading,
+                    })),
+                },
+                RECREATE_SANDBOX: 'recreating',
+            },
+        },
+        probing: {
+            invoke: {
+                id: 'probeUrl',
+                src: 'probeUrl',
+                input: ({ context, event }) => ({
+                    url: (event as any).url ?? context.activeFragment?.sandboxUrl,
+                    fragmentId: (event as any).fragmentId ?? context.activeFragment?.id,
+                }),
+                onDone: {
+                    target: 'idle',
+                    actions: assign(({ context }) => ({
+                        ...context,
+                        previewStatus: null,
+                        isLoading: false,
+                    })),
+                },
+                onError: {
+                    target: 'idle',
+                    actions: assign(({ context, event }) => ({
+                        ...context,
+                        previewStatus: {
+                            status: 'error',
+                            message: event.error instanceof Error ? event.error.message : 'Network error',
+                        },
+                        isLoading: false,
+                    })),
+                },
+            },
+        },
+        recreating: {
+            invoke: {
+                id: 'recreateSandbox',
+                src: 'recreateSandbox',
+                input: ({ event }) => ({ id: (event as any).id }),
+                onDone: {
+                    target: 'idle',
+                    actions: assign(({ context }) => ({
+                        ...context,
+                        isLoading: false,
+                    })),
+                },
+                onError: {
+                    target: 'idle',
+                    actions: assign(({ context, event }) => ({
+                        ...context,
+                        isLoading: false,
+                        previewStatus: {
+                            status: 'error',
+                            message: event.error instanceof Error ? event.error.message : 'Recreate failed',
+                        },
+                    })),
+                },
+            },
+        },
+    },
+}).provide({
+    actors: {
+        probeUrl: fromPromise(async ({ input }) => {
+            const { url } = input as { url?: string };
+            if (!url) return { ok: false } as const;
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 10000);
+            try {
+                const res = await fetch(url, {
+                    method: 'GET',
+                    mode: 'cors',
+                    redirect: 'follow',
+                    signal: controller.signal,
+                });
+                clearTimeout(timeoutId);
+                if (!res.ok) {
+                    throw new Error(`${res.status} ${res.statusText}`);
+                }
+                return { ok: true } as const;
+            } finally {
+                clearTimeout(timeoutId);
+            }
+        }),
+        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,55 @@
+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;
+} | 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 };
+
+export type SubmitOrganizationActor = ActorRefFrom<any>;