@messenger-box/tailwind-ui-inbox 10.0.3-alpha.143 → 10.0.3-alpha.154

package/lib/xstate/rightSidebar.machine.js

@@ -1,4 +1,5 @@
-import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine = createMachine({
+import {createMachine,assign,fromPromise}from'xstate';// eslint-disable-next-line import/no-extraneous-dependencies
+const rightSidebarMachine = createMachine({
   id: 'rightSidebar',
   types: {},
   context: ({
@@ -28,7 +29,6 @@ import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine
           }))
         },
         SET_FRAGMENT: {
-          target: 'probing',
           actions: assign(({
             context,
             event
@@ -37,9 +37,8 @@ import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine
             activeFragment: event.fragment,
             currentFiles: event.fragment?.files || context.currentFiles,
             canvasLayers: event.fragment?.canvasLayers || context.canvasLayers,
-            previewStatus: event.fragment?.sandboxUrl ? {
-              status: 'checking'
-            } : null
+            // Don't set previewStatus to 'checking' automatically - only probe when explicitly needed
+            previewStatus: null
           }))
         },
         PROBE: 'probing',
@@ -52,7 +51,52 @@ import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine
             isLoading: event.isLoading
           }))
         },
-        RECREATE_SANDBOX: 'recreating'
+        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;
+            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;
+            console.log('⏭️ RECREATE_SANDBOX ignored (already recreating or no fragment):', {
+              id: recreateEvent.id,
+              fragmentId: context.activeFragment?.id
+            });
+          }
+        }]
       }
     },
     probing: {
@@ -62,10 +106,13 @@ import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine
         input: ({
           context,
           event
-        }) => ({
-          url: event.url ?? context.activeFragment?.sandboxUrl,
-          fragmentId: event.fragmentId ?? context.activeFragment?.id
-        }),
+        }) => {
+          const probeEvent = event;
+          return {
+            url: probeEvent.url ?? context.activeFragment?.sandboxUrl,
+            fragmentId: probeEvent.fragmentId ?? context.activeFragment?.id
+          };
+        },
         onDone: {
           target: 'idle',
           actions: assign(({
@@ -76,7 +123,52 @@ import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine
             isLoading: false
           }))
         },
-        onError: {
+        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
+          }) => {
+            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 = errorMessage.includes('502 CORS/Network Error') || errorMessage.includes('Failed to fetch') || errorMessage.includes('CORS') || errorMessage.includes('NetworkError') || errorMessage.includes('Network request failed');
+            const willRecreate = isServerError || isCorsNetworkError;
+            console.log('🔍 Guard check:', {
+              errorMessage,
+              isServerError,
+              isCorsNetworkError,
+              willRecreate
+            });
+            return willRecreate;
+          },
+          target: 'recreating',
+          actions: assign(({
+            context,
+            event
+          }) => {
+            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',
+                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,
@@ -89,7 +181,7 @@ import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine
             },
             isLoading: false
           }))
-        }
+        }]
       }
     },
     recreating: {
@@ -97,17 +189,31 @@ import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine
         id: 'recreateSandbox',
         src: 'recreateSandbox',
         input: ({
+          context,
           event
-        }) => ({
-          id: event.id
-        }),
+        }) => {
+          const recreateEvent = event;
+          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
+            isLoading: false,
+            previewStatus: {
+              status: 'checking'
+            }
           }))
         },
         onError: {
@@ -124,6 +230,18 @@ import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine
             }
           }))
         }
+      },
+      on: {
+        COMPLETE_RECREATION: {
+          target: 'idle',
+          actions: assign(({
+            context
+          }) => ({
+            ...context,
+            isLoading: false,
+            previewStatus: null
+          }))
+        }
       }
     }
   }
@@ -135,12 +253,14 @@ import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine
       const {
         url
       } = input;
-      if (!url) return {
-        ok: false
-      };
+      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',
@@ -148,14 +268,45 @@ import {createMachine,assign,fromPromise}from'xstate';const rightSidebarMachine
           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) {
-          throw new Error(`${res.status} ${res.statusText}`);
+          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
         };
-      } finally {
+      } 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 ({

package/lib/xstate/rightSidebar.machine.js.map

@@ -1 +1 @@
-{"version":3,"file":"rightSidebar.machine.js","sources":["../../src/xstate/rightSidebar.machine.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"rightSidebar.machine.js","sources":["../../src/xstate/rightSidebar.machine.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/lib/xstate/rightSidebar.types.d.ts

@@ -15,6 +15,7 @@ export type ActiveFragment = {
     canvasLayers?: unknown[];
     summary?: unknown;
     isError?: boolean;
+    isCreatingSandbox?: boolean;
 } | null;
 export type RightSidebarContext = {
     channelId: string;
@@ -47,6 +48,10 @@ export type RecreateSandboxEvent = {
 export type MachineEvent = UpdateEvent | SetFragmentEvent | ProbeEvent | RecreateSandboxEvent | {
     type: 'SET_LOADING';
     isLoading: boolean;
+} | {
+    type: 'CLEAR_PREVIEW_STATUS';
+} | {
+    type: 'COMPLETE_RECREATION';
 };
-export type SubmitOrganizationActor = ActorRefFrom<any>;
+export type SubmitOrganizationActor = ActorRefFrom<unknown>;
 //# sourceMappingURL=rightSidebar.types.d.ts.map

package/lib/xstate/rightSidebar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rightSidebar.types.d.ts","sourceRoot":"","sources":["../../src/xstate/rightSidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CACjC,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,cAAc,GAAG;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,mBAAmB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,YAAY,EAAE,OAAO,EAAE,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E,MAAM,MAAM,oBAAoB,GAAG;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5E,MAAM,MAAM,YAAY,GAClB,WAAW,GACX,gBAAgB,GAChB,UAAU,GACV,oBAAoB,GACpB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC;AAElD,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"rightSidebar.types.d.ts","sourceRoot":"","sources":["../../src/xstate/rightSidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CACjC,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,cAAc,GAAG;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,mBAAmB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,YAAY,EAAE,OAAO,EAAE,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E,MAAM,MAAM,oBAAoB,GAAG;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5E,MAAM,MAAM,YAAY,GAClB,WAAW,GACX,gBAAgB,GAChB,UAAU,GACV,oBAAoB,GACpB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GAC3C;IAAE,IAAI,EAAE,sBAAsB,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,qBAAqB,CAAA;CAAE,CAAC;AAEtC,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/tailwind-ui-inbox",
-    "version": "10.0.3-alpha.143",
+    "version": "10.0.3-alpha.154",
     "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.154",
+        "@messenger-box/platform-client": "10.0.3-alpha.154",
         "@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": "2a2728b7c22922261a7d259b95b5bb7940011815"
+    "gitHead": "ed2e0f3b207c3d6da21b73baacc00bce93be80db"
 }

package/src/components/InboxMessage/RightSidebarAi.tsx

@@ -21,6 +21,9 @@ export interface IRightSidebarAi extends React.HTMLAttributes<HTMLDivElement> {
     isLoading?: boolean;
     messages?: any[];
     selectedPost?: any;
+    contextData?: any;
+    showContextTab?: boolean;
+    ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
     handleSendMessage?: (createChannelInput: ICreateChannelInput) => void;
     isMinimized?: boolean;
     handleRecreateSandbox?: (messageId: string) => void | Promise<any>;

package/src/components/slot-fill/right-sidebar-filler.tsx

@@ -19,6 +19,9 @@ type RightSidebarProps = {
     windowHeight: number;
     activeTab?: string;
     selectedPost?: any;
+    contextData?: any;
+    showContextTab?: boolean;
+    ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
     messages?: any[];
     setIsLoading?: (isLoading: boolean) => void;
     handleSendMessage?: (createChannelInput: ICreateChannelInput) => void;

package/src/container/InboxContainer.tsx

@@ -9,6 +9,8 @@ interface InboxContainerProps {
     orgName?: string;
     handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
     isShowOnlyInbox?: boolean;
+    showContextTab?: boolean;
+    ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
     [key: string]: any;
 }
 

package/src/container/InboxWithAiLoader.tsx

@@ -42,6 +42,8 @@ interface InboxWithAiLoaderProps {
     isShowAiLanding?: boolean;
     showModelToolbarProjectSettings?: boolean;
     isShowMeta?: boolean;
+    showContextTab?: boolean;
+    ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
     [key: string]: any;
 }
 
@@ -52,6 +54,8 @@ const InboxWithAiLoader = (props: InboxWithAiLoaderProps) => {
         isShowAiLanding = false,
         showModelToolbarProjectSettings = false,
         isShowMeta = false,
+        showContextTab = true,
+        ContextTabComponent = null,
     } = props;
     const { orgName, channelRole: channelRoleParam } = useParams();
     const location = useLocation();
@@ -64,6 +68,8 @@ const InboxWithAiLoader = (props: InboxWithAiLoaderProps) => {
             pathPrefix: pathPrefix || '',
             handleRecreateSandbox: props.handleRecreateSandbox,
             isShowOnlyInbox: props?.isShowOnlyInbox || false,
+            showContextTab: showContextTab,
+            ContextTabComponent: ContextTabComponent,
         }),
         [props, orgName, pathPrefix],
     );

package/src/container/TestInboxWithAiLoader.tsx

@@ -21,6 +21,7 @@ const TestInboxWithAiLoaderOutlet = () => {
             showModelToolbarProjectSettings={true}
             isShowAiLanding={true}
             isShowMeta={true}
+            showContextTab={false}
         />
     );
 };

package/src/templates/InboxWithAi.tsx

@@ -34,6 +34,8 @@ export interface InboxProps {
     orgName?: string;
     handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
     isShowOnlyInbox?: boolean;
+    showContextTab?: boolean;
+    ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
 }
 
 // Static utility hooks and components
@@ -92,6 +94,22 @@ const EmptyState = React.memo(() => (
     </div>
 ));
 
+const DefaultContextTab = ({ context }: { context: any }) => {
+    const isString = typeof context === 'string';
+    const content = isString ? context : JSON.stringify(context ?? {}, null, 2);
+
+    return (
+        <div className="h-full w-full bg-gray-50 text-gray-800 overflow-auto">
+            <div className="p-4">
+                <h3 className="text-sm font-semibold text-gray-700 mb-2">Context</h3>
+                <pre className="text-sm whitespace-pre-wrap break-words font-mono bg-white border border-gray-200 rounded-md p-3 shadow-sm">
+                    {content || 'No context available.'}
+                </pre>
+            </div>
+        </div>
+    );
+};
+
 const InboxWithAi = (props: InboxProps) => {
     const [activeTab, setActiveTab] = React.useState('preview');
 
@@ -117,9 +135,26 @@ const InboxWithAiInternal = (props: InboxProps) => {
     const [errorData, setError] = useState<string | null>(null);
     const [sendMessageInput, handleSendMessage] = useState<ICreateChannelInput | null>(null);
     const [isMinimized, setIsMinimized] = useState(false);
+    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
+        );
+    }, [selectedPost]);
     // Extract channelId from query parameters (priority) or path parameters (fallback)
     const channelId = urlParams?.get('id') || pathChannelId;
 
+    useEffect(() => {
+        // If context tab is disabled via props, fall back to preview
+        if (activeTab === 'context' && !showContextTab) {
+            setActiveTab('preview');
+        }
+    }, [activeTab, showContextTab, setActiveTab]);
+
     const recreateSandboxForFragment = useCallback(
         async (messageId: string) => {
             if (!channelId || !messageId) {
@@ -261,6 +296,38 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                             </svg>
                                             <span>Code</span>
                                         </button>
+                                        {showContextTab && (
+                                            <button
+                                                onClick={() => setActiveTab('context')}
+                                                className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
+                                                    activeTab === 'context'
+                                                        ? '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="M12 8c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3-1.343-3-3-3z"
+                                                    />
+                                                    <path
+                                                        strokeLinecap="round"
+                                                        strokeLinejoin="round"
+                                                        strokeWidth={2}
+                                                        d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z"
+                                                    />
+                                                </svg>
+                                                <span>Context</span>
+                                            </button>
+                                        )}
                                     </div>
                                 )}
                             </div>
@@ -384,6 +451,8 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                 channelId={channelId}
                                 messages={messages}
                                 selectedPost={selectedPost}
+                                contextData={contextData}
+                                showContextTab={showContextTab}
                                 setIsLoading={setIsLoading}
                                 setIsCreatingSandbox={setIsCreatingSandbox}
                                 isCreatingSandbox={isCreatingSandbox}
@@ -391,6 +460,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                 handleSendMessage={handleSendMessage}
                                 handleRecreateSandbox={props?.handleRecreateSandbox || null}
                                 isMinimized={isMinimized}
+                                ContextTabComponent={props?.ContextTabComponent ?? DefaultContextTab}
                                 {...props}
                             />
                         </div>