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

package/src/machines/index.ts

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

package/src/module.tsx

@@ -3,8 +3,9 @@ import { schema, typePolicies, dataIdFromObject } from '@messenger-box/platform-
 import { MESSAGE_SLOT_FILL_NAME } from '@messenger-box/core';
 import { filteredRoutes } from './compute';
 import { ChatMessageFill, ChatMessageFill2 } from './components/slot-fill/chat-message-filler';
+import { RightSidebarFill } from './components/slot-fill/right-sidebar-filler';
 
-export { ChatMessageFill };
+export { ChatMessageFill, RightSidebarFill };
 export default new Feature({
     routeConfig: filteredRoutes,
     dataIdFromObject,
@@ -19,5 +20,13 @@ export default new Feature({
         //     name: `${MESSAGE_SLOT_FILL_NAME}2`,
         //     render: ChatMessageFill2,
         // },
+        {
+            name: 'inbox-with-ai-right-sidebar-1',
+            render: RightSidebarFill,
+        },
+        // {
+        //     name: 'inbox-with-ai-right-sidebar-2',
+        //     render: RightSidebarFill2,
+        // },
     ],
 });

package/src/templates/InboxWithAi.tsx

@@ -10,13 +10,17 @@ import React, {
     useState,
 } from 'react';
 import { Outlet, useNavigate, useParams, useLocation } from '@remix-run/react';
+import { RightSidebarAi } from '../components/InboxMessage/RightSidebarAi';
+import { useRecreateSandboxMutation, useRegenerateAiCodeMutation } from 'common/graphql';
+import { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';
+import { useFileSync } from '../hooks/use-file-sync';
 
 // Context for sharing tab state between header and sidebar
 const TabContext = createContext<{
     activeTab: string;
     setActiveTab: (tab: string) => void;
 }>({
-    activeTab: 'design',
+    activeTab: 'preview',
     setActiveTab: () => {},
 });
 
@@ -86,7 +90,7 @@ const EmptyState = React.memo(() => (
 ));
 
 const InboxWithAi = (props: InboxProps) => {
-    const [activeTab, setActiveTab] = React.useState('design');
+    const [activeTab, setActiveTab] = React.useState('preview');
 
     return (
         <TabContext.Provider value={{ activeTab, setActiveTab }}>
@@ -101,14 +105,85 @@ const InboxWithAiInternal = (props: InboxProps) => {
     const location = useLocation();
     const urlParams = location?.search ? new URLSearchParams(location.search) : null;
     const { activeTab, setActiveTab } = useContext(TabContext);
-
+    const [messages, setMessages] = useState<any[]>([]);
+    const [selectedPost, setSelectedPost] = useState<any>(null);
+    const [recreateSandbox] = useRecreateSandboxMutation();
+    const [regenerateAiCode] = useRegenerateAiCodeMutation();
+    const { modelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
+    const [isLoading, setIsLoading] = useState(true);
+    const [errorData, setError] = useState<string | null>(null);
     // Extract channelId from query parameters (priority) or path parameters (fallback)
     const channelId = urlParams?.get('id') || pathChannelId;
 
+    const regenerateAiCodeForFragment = useCallback(
+        async (messageId: string) => {
+            try {
+                setIsLoading(true);
+                setError(null);
+
+                const response = await regenerateAiCode({
+                    variables: {
+                        messageId: messageId,
+                        modelConfig: modelConfig,
+                    },
+                });
+
+                if (response.data?.regenerateAiCode?.success) {
+                    console.log('Sandbox recreation initiated successfully');
+                    // The subscription will handle updating the UI with the new sandbox URL
+                } else {
+                    const errorMsg = response.data?.regenerateAiCode?.message || 'Failed to regenerate AI code';
+                    throw new Error(errorMsg);
+                }
+            } catch (err) {
+                console.error('Error recreating sandbox:', err);
+                setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
+                setIsLoading(false);
+            }
+        },
+        [regenerateAiCode, modelConfig],
+    );
+
+    const recreateSandboxForFragment = useCallback(
+        async (messageId: string) => {
+            if (!channelId) {
+                console.error('No project ID available for sandbox recreation');
+                return;
+            }
+
+            try {
+                setIsLoading(true);
+                setError(null);
+
+                const response = await recreateSandbox({
+                    variables: {
+                        projectId: channelId,
+                        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');
+                setIsLoading(false);
+            }
+        },
+        [recreateSandbox, channelId],
+    );
+
     // Handle refresh sandbox
     const handleRefreshSandbox = useCallback(() => {
-        console.log('Refreshing sandbox...');
-    }, []);
+        if (selectedPost) {
+            recreateSandboxForFragment(selectedPost.id);
+        }
+    }, [activeTab, selectedPost, regenerateAiCodeForFragment]);
 
     // Hooks - improved responsive breakpoints with better granularity
     const { width: windowWidth, height: windowHeight } = useWindowDimensions();
@@ -145,33 +220,9 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                 {!isSmallScreen && (
                                     <div className="flex bg-gray-100 p-2" style={{ borderRadius: '10px' }}>
                                         <button
-                                            onClick={() => setActiveTab('design')}
-                                            className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
-                                                activeTab === 'design'
-                                                    ? 'bg-blue-500 text-white shadow-sm'
-                                                    : 'text-gray-600 hover:text-gray-900'
-                                            }`}
-                                            style={{ borderRadius: '10px' }}
-                                        >
-                                            <svg
-                                                className="w-4 h-4"
-                                                fill="none"
-                                                stroke="currentColor"
-                                                viewBox="0 0 24 24"
-                                            >
-                                                <path
-                                                    strokeLinecap="round"
-                                                    strokeLinejoin="round"
-                                                    strokeWidth={2}
-                                                    d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
-                                                />
-                                            </svg>
-                                            <span>Design</span>
-                                        </button>
-                                        <button
-                                            onClick={() => setActiveTab('interact')}
+                                            onClick={() => setActiveTab('preview')}
                                             className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
-                                                activeTab === 'interact'
+                                                activeTab === 'preview'
                                                     ? 'bg-blue-500 text-white shadow-sm'
                                                     : 'text-gray-600 hover:text-gray-900'
                                             }`}
@@ -196,7 +247,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                                     d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                                 />
                                             </svg>
-                                            <span>Interact</span>
+                                            <span>Preview</span>
                                         </button>
                                         <button
                                             onClick={() => setActiveTab('code')}
@@ -229,7 +280,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
                             {/* Refresh icon on the right - hidden on mobile */}
                             {isDesktopView && (
                                 <button
-                                    onClick={handleRefreshSandbox}
+                                    onClick={() => handleRefreshSandbox()}
                                     className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
                                     title="Refresh Sandbox"
                                 >
@@ -263,7 +314,20 @@ const InboxWithAiInternal = (props: InboxProps) => {
                     `}
                         style={{ paddingTop: '15px' }}
                     >
-                        {channelId ? <ContentComponent channelId={channelId} /> : <EmptyState />}
+                        {channelId ? (
+                            <ContentComponent
+                                channelId={channelId}
+                                {...props}
+                                messages={messages}
+                                setMessages={setMessages}
+                                selectedPost={selectedPost}
+                                setSelectedPost={setSelectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                            />
+                        ) : (
+                            <EmptyState />
+                        )}
                     </div>
 
                     {/* Right Sidebar - 65% width on desktop only */}
@@ -276,6 +340,13 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                 detailSidebarOptions={detailSidebarOptions}
                                 windowWidth={windowWidth}
                                 windowHeight={windowHeight}
+                                activeTab={activeTab}
+                                channelId={channelId}
+                                messages={messages}
+                                selectedPost={selectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                                {...props}
                             />
                         </div>
                     )}
@@ -286,7 +357,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
 };
 
 const ContentComponent = React.memo((props: any) => {
-    const { channelId } = props;
+    const { channelId, messages, setMessages, selectedPost, setSelectedPost, setIsLoading, isLoading } = props;
 
     return (
         <div className="flex overflow-hidden h-full">
@@ -296,7 +367,16 @@ const ContentComponent = React.memo((props: any) => {
                 <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
                     {channelId && (
                         <>
-                            <MessagesComponent {...props} />
+                            <MessagesComponent
+                                {...props}
+                                channelId={channelId}
+                                messages={messages}
+                                setMessages={setMessages}
+                                selectedPost={selectedPost}
+                                setSelectedPost={setSelectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                            />
                         </>
                     )}
                 </div>
@@ -311,42 +391,10 @@ const RightSidebarWrapper = React.memo(({ detailSidebarOptions }: any) => {
         <div className="h-full flex flex-col overflow-hidden bg-white">
             {/* Content Area */}
             <div className="flex-1 overflow-hidden">
-                {activeTab === 'design' ? (
+                {activeTab === 'preview' ? (
                     <div className="h-full flex items-center justify-center bg-gray-50">
                         <div className="text-center">
-                            {/* Next.js Logo */}
-                            <div className="mb-8">
-                                <svg className="w-32 h-16 mx-auto text-black" viewBox="0 0 394 80" fill="currentColor">
-                                    <path d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.4zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.7h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z" />
-                                    <path d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.2 3.4 1 1.4 1.5 3 1.5 5h-5.8z" />
-                                </svg>
-                            </div>
-
-                            <div className="space-y-4 text-gray-600">
-                                <h3 className="text-lg font-semibold text-gray-900">Design View</h3>
-                                <p className="font-mono text-sm bg-gray-100 px-3 py-1 rounded">
-                                    Design components and UI
-                                </p>
-                                <p>Customize and preview your design changes.</p>
-                            </div>
-
-                            <div className="mt-8 space-y-4">
-                                <button className="bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition-colors flex items-center space-x-2 mx-auto">
-                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M12 2L2 7v10c0 5.55 3.84 9.739 9 11 5.16-1.261 9-5.45 9-11V7l-10-5z" />
-                                    </svg>
-                                    <span>Design now</span>
-                                </button>
-                                <p className="text-sm text-gray-500 underline cursor-pointer hover:text-gray-700">
-                                    View design docs
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                ) : activeTab === 'interact' ? (
-                    <div className="h-full flex items-center justify-center bg-blue-50">
-                        <div className="text-center">
-                            {/* Interact Icon */}
+                            {/* Preview Icon */}
                             <div className="mb-8">
                                 <svg
                                     className="w-32 h-32 mx-auto text-blue-500"
@@ -370,11 +418,11 @@ const RightSidebarWrapper = React.memo(({ detailSidebarOptions }: any) => {
                             </div>
 
                             <div className="space-y-4 text-gray-600">
-                                <h3 className="text-lg font-semibold text-gray-900">Interactive Mode</h3>
+                                <h3 className="text-lg font-semibold text-gray-900">Preview Mode</h3>
                                 <p className="font-mono text-sm bg-blue-100 px-3 py-1 rounded">
-                                    Live interaction and testing
+                                    Live preview and testing
                                 </p>
-                                <p>Test and interact with your components in real-time.</p>
+                                <p>Preview and test your components in real-time.</p>
                             </div>
 
                             <div className="mt-8 space-y-4">
@@ -382,10 +430,10 @@ const RightSidebarWrapper = React.memo(({ detailSidebarOptions }: any) => {
                                     <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                         <path d="M8 5v14l11-7z" />
                                     </svg>
-                                    <span>Start Interacting</span>
+                                    <span>Start Preview</span>
                                 </button>
                                 <p className="text-sm text-gray-500 underline cursor-pointer hover:text-gray-700">
-                                    Learn about interactions
+                                    Learn about preview mode
                                 </p>
                             </div>
                         </div>
@@ -472,23 +520,36 @@ const RightSidebarWrapper = React.memo(({ detailSidebarOptions }: any) => {
     );
 });
 
-const RightSidebarContent = React.memo(({ detailSidebarOptions, windowWidth, windowHeight }: any) => {
-    return (
-        <div
-            className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden"
-            style={{
-                // width: `${windowWidth * 0.35}px`, // 35% of window width
-                height: `${windowHeight}px`,
-                maxHeight: '100vh',
-            }}
-        >
-            <RightSidebarWrapper detailSidebarOptions={detailSidebarOptions} />
-        </div>
-    );
-});
+const RightSidebarContent = React.memo(
+    ({ detailSidebarOptions, windowWidth, windowHeight, channelId, setIsLoading, isLoading, ...props }: any) => {
+        const { activeTab } = useContext(TabContext);
+
+        return (
+            <div
+                className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden"
+                style={{
+                    // width: `${windowWidth * 0.35}px`, // 35% of window width
+                    height: `${windowHeight}px`,
+                    maxHeight: '100vh',
+                }}
+            >
+                <RightSidebarAi
+                    detailSidebarOptions={detailSidebarOptions}
+                    windowWidth={windowWidth}
+                    windowHeight={windowHeight}
+                    activeTab={activeTab}
+                    channelId={channelId}
+                    setIsLoading={setIsLoading}
+                    isLoading={isLoading}
+                    {...props}
+                />
+            </div>
+        );
+    },
+);
 
 const MessagesComponent = React.memo((props: any) => {
-    return <Outlet context="app" />;
+    return <Outlet context={{ ...props, app: 'app' }} />;
 });
 
 // Display names for debugging

package/src/utils/utils.ts

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