@messenger-box/tailwind-ui-inbox 10.0.3-alpha.144 → 10.0.3-alpha.158

package/lib/templates/InboxWithAi.tsx

@@ -11,10 +11,8 @@ import React, {
 } from 'react';
 import { Outlet, useNavigate, useParams, useLocation } from '@remix-run/react';
 import { RightSidebarAi } from '../components/InboxMessage/RightSidebarAi';
-import { useRecreateSandboxMutation } from 'common/graphql';
 import { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';
 import { ICreateChannelInput } from 'common';
-import { useFileSync } from '../hooks/use-file-sync';
 
 // Context for sharing tab state between header and sidebar
 const TabContext = createContext<{
@@ -128,7 +126,6 @@ const InboxWithAiInternal = (props: InboxProps) => {
     const { activeTab, setActiveTab } = useContext(TabContext);
     const [messages, setMessages] = useState<any[]>([]);
     const [selectedPost, setSelectedPost] = useState<any>(null);
-    const [recreateSandbox] = useRecreateSandboxMutation();
     const { modelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
     const [isLoading, setIsLoading] = useState(true);
     const [isCreatingSandbox, setIsCreatingSandbox] = useState(false);
@@ -138,12 +135,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
     const showContextTab = props.showContextTab ?? true;
     const contextData = useMemo(() => {
         const cfg = selectedPost?.propsConfiguration;
-        return (
-            cfg?.contents?.fragment?.context ||
-            cfg?.content?.fragment?.context ||
-            cfg?.fragment?.context ||
-            null
-        );
+        return cfg?.contents?.fragment?.context || cfg?.content?.fragment?.context || cfg?.fragment?.context || null;
     }, [selectedPost]);
     // Extract channelId from query parameters (priority) or path parameters (fallback)
     const channelId = urlParams?.get('id') || pathChannelId;
@@ -167,27 +159,13 @@ const InboxWithAiInternal = (props: InboxProps) => {
                 setError(null);
 
                 props.handleRecreateSandbox?.(messageId);
-
-                // const response = await recreateSandbox({
-                //     variables: {
-                //         messageId,
-                //     },
-                // });
-
-                // if (response.data?.recreateSandbox?.success) {
-                //     console.log('Sandbox recreation initiated successfully');
-                //     // The subscription will handle updating the UI with the new sandbox URL
-                // } else {
-                //     const errorMsg = response.data?.recreateSandbox?.message || 'Failed to recreate sandbox';
-                //     throw new Error(errorMsg);
-                // }
             } catch (err) {
                 console.error('Error recreating sandbox:', err);
                 setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
                 setIsCreatingSandbox(false);
             }
         },
-        [recreateSandbox, channelId],
+        [channelId],
     );
 
     // Handle refresh sandbox

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/tailwind-ui-inbox",
-    "version": "10.0.3-alpha.144",
+    "version": "10.0.3-alpha.158",
     "description": "Inbox UI components built with TailwindCSS",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -21,8 +21,8 @@
         "watch": "npm run build:lib:watch"
     },
     "dependencies": {
-        "@messenger-box/core": "10.0.3-alpha.143",
-        "@messenger-box/platform-client": "10.0.3-alpha.143",
+        "@messenger-box/core": "10.0.3-alpha.158",
+        "@messenger-box/platform-client": "10.0.3-alpha.158",
         "@monaco-editor/react": "^4.7.0",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
@@ -58,5 +58,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "3034d947a4bd618c91fb748b02ba724cbf91a21a"
+    "gitHead": "3c0470617c57636194851348aea9d87533d10837"
 }

package/src/components/AIAgent/AIAgent.tsx

@@ -6,7 +6,7 @@ import { format, isToday, isYesterday, formatDistanceToNow } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { ModernMessageGroupComponent } from '../InboxMessage/message-widgets/ModernMessageGroup';
 import { useUploadFiles } from '@messenger-box/platform-client';
-import { IFileInfo, PostTypeEnum, ISandboxError, AiAgentMessageRole, ICreateChannelInput } from 'common';
+import { IFileInfo, PostTypeEnum, AiAgentMessageRole, ICreateChannelInput } from 'common';
 import { useSelector, shallowEqual } from 'react-redux';
 import { Store, userSelector } from '@adminide-stack/user-auth0-client';
 import { IUserState } from '@adminide-stack/core';
@@ -19,7 +19,6 @@ import {
     OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
     useCreateChannelWorkflowJobMutation,
     useOnChatMessageAddedSubscription,
-    useSandboxErrorSubscription,
 } from 'common/graphql';
 import { config } from '../../config';
 import { orderBy, uniqBy } from 'lodash-es';
@@ -90,10 +89,6 @@ export const AIAgent: React.FC<AIAgentProps> = ({
     });
 
     // Subscribe to sandbox errors if projectId is provided
-    const { data: sandboxErrorData } = useSandboxErrorSubscription({
-        variables: { projectId: actualChannelId?.toString() || '' },
-        skip: !actualChannelId,
-    });
 
     // Direct message query from InboxWithAiLoader.tsx
     const messagesQuery = useMessagesQuery({
@@ -123,7 +118,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
     const [selectedElement, setSelectedElement] = useState<any>(null);
     const [activeTab, setActiveTab] = useState<'chat' | 'history'>('chat');
     const bottomRef = useRef<HTMLDivElement | null>(null);
-    const [sandboxErrors, setSandboxErrors] = useState<ISandboxError[]>([]);
+    const [sandboxErrors, setSandboxErrors] = useState<any[]>([]);
     const [currentFiles, setCurrentFiles] = useState<Record<string, string>>({});
     const [canvasLayers, setCanvasLayers] = useState<any[]>([]);
     // New state variables for message display control
@@ -155,7 +150,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                 'chatMessageAddedData?.chatMessageAdded',
                 JSON.stringify(chatMessageAddedData?.chatMessageAdded, null, 2),
             );
-            // handleGenerateAiCode(chatMessageAddedData.chatMessageAdded.id);
+
             // Stop the success thinking loader once a new message arrives
             if (isSuccessThinking) {
                 setIsSuccessThinking(false);
@@ -174,7 +169,6 @@ export const AIAgent: React.FC<AIAgentProps> = ({
     useEffect(() => {
         if (messagesData?.messages?.data?.length == 1) {
             setPostId(messagesData.messages.data[0]?.id);
-            ///handleGenerateAiCode(messagesData.messages.data[0].id);
         }
         // console.log('messagesData?.messages?.data',JSON.stringify(messagesData?.messages?.data,null,2))
     }, [messagesData?.messages?.data]);
@@ -187,13 +181,6 @@ export const AIAgent: React.FC<AIAgentProps> = ({
     }, [sendMessageInput?.postData?.content]);
 
     // Handle sandbox error subscription updates
-    useEffect(() => {
-        if (sandboxErrorData?.sandboxError) {
-            const errorData = sandboxErrorData.sandboxError;
-            console.log('Sandbox error received:', errorData);
-            setSandboxErrors((prev) => [...prev, errorData.error]);
-        }
-    }, [sandboxErrorData]);
 
     const regularMessages = useMemo(() => {
         if (!messagesData?.messages?.data) return [];
@@ -238,44 +225,6 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         }
     }, [regularMessages, send]);
 
-    // const handleGenerateAiCode = useCallback(
-    //     (messageId: string) => {
-    //         generateAiCode({
-    //             variables: {
-    //                 messageId: messageId,
-    //                 modelConfig: modelConfig,
-    //             },
-    //             onCompleted: (res) => {
-    //                 if (res.generateAiCode.success) {
-    //                     console.log('generated_result', res);
-    //                     // Show AI is thinking loader on success
-    //                     if (successThinkingTimeoutRef.current) {
-    //                         clearTimeout(successThinkingTimeoutRef.current);
-    //                         successThinkingTimeoutRef.current = null;
-    //                     }
-    //                     setIsSuccessThinking(true);
-    //                     // Fallback auto-hide after 15s in case no subsequent event arrives
-    //                     successThinkingTimeoutRef.current = setTimeout(() => {
-    //                         setIsSuccessThinking(false);
-    //                         // setIsLoading(false);
-    //                         successThinkingTimeoutRef.current = null;
-    //                     }, 15000);
-    //                 }
-    //             },
-    //             onError: (err) => {
-    //                 console.log('err', JSON.stringify(err, null, 2));
-    //                 // Also ensure loader is hidden on error
-    //                 if (successThinkingTimeoutRef.current) {
-    //                     clearTimeout(successThinkingTimeoutRef.current);
-    //                     successThinkingTimeoutRef.current = null;
-    //                 }
-    //                 setIsSuccessThinking(false);
-    //             },
-    //         });
-    //     },
-    //     [generateAiCode, modelConfig],
-    // );
-
     const onOpen = (element?: any) => {
         setSelectedElement(element);
         setIsOpen(true);

package/src/components/InboxMessage/message-widgets/ErrorFixCard.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { ISandboxError } from 'common';
 
 const IconAlertTriangle: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     <svg
@@ -66,7 +65,7 @@ const IconExternalLink: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
 );
 
 interface ErrorFixCardProps {
-    error: ISandboxError;
+    error: any;
     onFixError: (errorMessage: string) => Promise<void>;
     currentFiles?: Record<string, string>;
     isFixing?: boolean;

package/src/components/InboxMessage/message-widgets/ModernMessageGroup.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { format, differenceInMinutes } from 'date-fns';
-import { AiAgentMessageRole, IAuthUser, IPost, ISandboxError, PostTypeEnum } from 'common';
+import { AiAgentMessageRole, IAuthUser, IPost, PostTypeEnum } from 'common';
 import { FilesList } from '../../inbox';
 import { ErrorFixCard } from './ErrorFixCard';
 import ReactMarkdown from 'react-markdown';
@@ -409,7 +409,7 @@ interface ModernMessageGroupProps {
     onMessageClick: (msg: IPost) => void;
     isDesktopView?: boolean;
     isSmallScreen?: boolean;
-    sandboxErrors?: ISandboxError[];
+    sandboxErrors?: any[];
     currentFiles?: Record<string, string>;
     onFixError?: (errorMessage: string) => Promise<void>;
     onRecreateSandbox?: (fragmentId: string) => void;

package/src/components/ModelConfigPanel.tsx

@@ -12,6 +12,18 @@ interface ModelConfigPanelProps {
     showTemplate?: boolean;
 }
 
+export interface ModelToolbarProps {
+    modelConfig?: PersistentModelConfig;
+    onModelConfigChange?: (config: PersistentModelConfig) => void;
+    sending: boolean;
+    canSend: boolean;
+    onSend: () => void;
+    onUploadImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    showProjectSettings?: boolean;
+    isShowMeta?: boolean;
+    showModeSelector?: boolean;
+}
+
 const providerIcons: Record<ModelConfig['provider'], string> = {
     openai: '🤖',
     anthropic: '🧠',
@@ -449,6 +461,7 @@ export const ModelToolbar: React.FC<ModelToolbarProps> = ({
     onUploadImageChange,
     showProjectSettings = true,
     isShowMeta = false,
+    showModeSelector = true,
 }) => {
     const [showModelDropdown, setShowModelDropdown] = useState(false);
     const [showToolbarModelDropdown, setShowToolbarModelDropdown] = useState(false);
@@ -458,10 +471,18 @@ export const ModelToolbar: React.FC<ModelToolbarProps> = ({
     const [templateSearch, setTemplateSearch] = useState('');
     const [modelSearch, setModelSearch] = useState('');
     const [toolbarModelSearch, setToolbarModelSearch] = useState('');
+    const [mode, setMode] = useState<'plan' | 'build'>(modelConfig?.mode || 'plan');
     const modelDropdownRef = useRef<HTMLDivElement>(null);
     const toolbarModelButtonRef = useRef<HTMLButtonElement>(null);
     const templateDropdownRef = useRef<HTMLDivElement>(null);
 
+    // Sync mode with modelConfig
+    useEffect(() => {
+        if (modelConfig?.mode && modelConfig.mode !== mode) {
+            setMode(modelConfig.mode);
+        }
+    }, [modelConfig?.mode, mode]);
+
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
             const target = event.target as HTMLElement;
@@ -565,9 +586,47 @@ export const ModelToolbar: React.FC<ModelToolbarProps> = ({
         [modelConfig, onModelConfigChange],
     );
 
+    const handleModeChange = useCallback(
+        (newMode: 'plan' | 'build') => {
+            setMode(newMode);
+            if (onModelConfigChange && modelConfig) {
+                onModelConfigChange({ ...modelConfig, mode: newMode });
+            }
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
     return (
         <>
             <div className="flex items-center gap-2 overflow-x-auto overflow-y-visible whitespace-nowrap py-1 px-2 sm:px-0">
+                {/* Mode Selection */}
+                {showModeSelector && (
+                    <div className="flex items-center gap-0 mr-2">
+                        <button
+                            type="button"
+                            onClick={() => handleModeChange('plan')}
+                            className={`px-2 py-1 text-xs rounded-l border ${
+                                mode === 'plan'
+                                    ? 'bg-gray-200 text-gray-900 font-medium border-gray-300'
+                                    : 'bg-white border-gray-300 hover:bg-gray-50'
+                            }`}
+                        >
+                            Plan
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => handleModeChange('build')}
+                            className={`px-2 py-1 text-xs rounded-r border-t border-r border-b ${
+                                mode === 'build'
+                                    ? 'bg-gray-200 text-gray-900 font-medium border-gray-300'
+                                    : 'bg-white border-gray-300 hover:bg-gray-50'
+                            }`}
+                        >
+                            Build
+                        </button>
+                    </div>
+                )}
+
                 {/* Template selection moved to Project Settings modal */}
 
                 {/* 2. Model Selection Dropdown */}