nitrostack 1.0.71 → 1.0.73

package/src/studio/components/WidgetRenderer.tsx

@@ -1,164 +1,77 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
-import { getWidgetUrl, createWidgetHTML, postMessageToWidget } from '@/lib/widget-loader';
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { createWidgetHTML } from '@/lib/widget-loader';
 
 interface WidgetRendererProps {
   uri: string;
-  data: any;
+  data: unknown;
   className?: string;
 }
 
 export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [contentHeight, setContentHeight] = useState<number>(200); // Start with smaller default
+  const [contentHeight, setContentHeight] = useState<number>(100); // Start small, let widget report its actual size
+  const [hasError, setHasError] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const messageHandlerRef = useRef<((event: MessageEvent) => void) | null>(null);
+  const mountedRef = useRef(true);
 
   // Check if we're in dev mode (localhost)
   const isDevMode =
     typeof window !== 'undefined' &&
     (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
 
+  // Minimum height to prevent collapse
+  const MIN_HEIGHT = 50;
+
+  // Stable handler for resize messages - no max height limit
+  const handleResize = useCallback((height: number) => {
+    if (!mountedRef.current) return;
+    if (height && typeof height === 'number' && height > 0) {
+      // Allow widget to be any height it needs
+      const newHeight = Math.max(MIN_HEIGHT, height);
+      setContentHeight(newHeight);
+    }
+  }, []);
+
   useEffect(() => {
+    mountedRef.current = true;
+    
     if (!iframeRef.current) return;
 
-    const injectOpenAiRuntime = (iframe: HTMLIFrameElement) => {
-      if (!iframe.contentWindow) return;
+    const iframe = iframeRef.current;
+    const timeoutIds: NodeJS.Timeout[] = [];
 
-      // Detect system theme
-      const getSystemTheme = (): 'light' | 'dark' => {
-        if (typeof window === 'undefined') return 'light';
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-      };
+    // Create message handler that checks if component is still mounted
+    const handleMessage = (event: MessageEvent) => {
+      if (!mountedRef.current) return;
 
-      // Detect device capabilities
-      const getUserAgent = () => ({
-        device: {
-          type: (window.matchMedia('(max-width: 768px)').matches
-            ? 'mobile'
-            : window.matchMedia('(max-width: 1024px)').matches
-              ? 'tablet'
-              : 'desktop') as 'mobile' | 'tablet' | 'desktop',
-        },
-        capabilities: {
-          hover: window.matchMedia('(hover: hover)').matches,
-          touch: window.matchMedia('(pointer: coarse)').matches,
-        },
-      });
-
-      // Create window.openai polyfill
-      const openaiRuntime = {
-        // Data
-        toolInput: {},
-        toolOutput: data,
-        toolResponseMetadata: null,
-        widgetState: null,
-
-        // Visuals
-        theme: getSystemTheme(),
-        locale: navigator.language || 'en-US',
-        userAgent: getUserAgent(),
-
-        // Layout
-        maxHeight: 450, // Match iframe height
-        displayMode: 'inline' as const,
-        safeArea: {
-          insets: { top: 0, bottom: 0, left: 0, right: 0 },
-        },
-
-        // State management
-        setWidgetState: async (state: any) => {
-          console.log('📦 Widget state updated:', state);
-          openaiRuntime.widgetState = state;
-
-          // Dispatch event for hooks to react
-          const event = new CustomEvent('openai:set_globals', {
-            detail: { globals: { widgetState: state } },
-          });
-          iframe.contentWindow?.dispatchEvent(event);
-
-          // TODO: Persist to chat message context
-        },
-
-        // Actions
-        callTool: async (name: string, args: Record<string, unknown>) => {
-          console.log('🔧 Widget calling tool:', name, args);
-          // TODO: Implement tool call via studio API
-          return { result: 'Tool call not yet implemented' };
-        },
-
-        sendFollowUpMessage: async ({ prompt }: { prompt: string }) => {
-          console.log('💬 Widget sending follow-up:', prompt);
-          // TODO: Implement follow-up message
-        },
-
-        openExternal: ({ href }: { href: string }) => {
-          window.open(href, '_blank', 'noopener,noreferrer');
-        },
-
-        requestClose: () => {
-          console.log('❌ Widget requested close');
-          // TODO: Implement widget close
-        },
-
-        requestDisplayMode: async ({ mode }: { mode: 'inline' | 'pip' | 'fullscreen' }) => {
-          console.log('🖼️ Widget requested display mode:', mode);
-          // TODO: Implement display mode change
-          return { mode: 'inline' as const };
-        },
-      };
-
-      // Prepare serializable data (no functions)
-      const openaiData = {
-        // Data
-        toolInput: {},
-        toolOutput: data,
-        toolResponseMetadata: null,
-        widgetState: null,
-
-        // Visuals
-        theme: getSystemTheme(),
-        locale: navigator.language || 'en-US',
-        userAgent: getUserAgent(),
-
-        // Layout
-        maxHeight: 450,
-        displayMode: 'inline' as const,
-        safeArea: {
-          insets: { top: 0, bottom: 0, left: 0, right: 0 },
-        },
-      };
-
-      // Send openai data to iframe via postMessage (cross-origin safe)
-      const sendData = () => {
-        try {
-          iframe.contentWindow?.postMessage({
-            type: 'NITRO_INJECT_OPENAI',
-            data: openaiData
-          }, '*');
-          console.log('✅ window.openai data sent to widget via postMessage');
-        } catch (e) {
-          console.error('❌ Failed to send window.openai:', e);
+      try {
+        // Handle widget error messages
+        if (event.data?.type === 'NITRO_WIDGET_ERROR') {
+          console.error('❌ Widget reported error:', event.data.error);
+          setHasError(true);
+          return;
         }
-      };
 
-      // Send immediately
-      sendData();
+        // Handle resize messages from widget
+        if (event.data?.type === 'NITRO_WIDGET_RESIZE') {
+          const { height } = event.data;
+          handleResize(height);
+        }
 
-      // Retry after delays to ensure widget React app has mounted
-      setTimeout(sendData, 100);
-      setTimeout(sendData, 300);
-      setTimeout(sendData, 500);
+        // Handle widget ready message
+        if (event.data?.type === 'NITRO_WIDGET_READY') {
+          setIsLoaded(true);
+        }
 
-      // Set up message listener for widget RPC calls
-      const handleWidgetMessage = (event: MessageEvent) => {
+        // Handle RPC calls
         if (event.data?.type === 'NITRO_WIDGET_RPC') {
           const { method, args, id } = event.data;
 
           switch (method) {
             case 'setWidgetState':
-              console.log('📦 Widget state updated:', args[0]);
-              openaiData.widgetState = args[0];
-              // Send response
               iframe.contentWindow?.postMessage({
                 type: 'NITRO_WIDGET_RPC_RESPONSE',
                 id,
@@ -167,8 +80,6 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
               break;
 
             case 'callTool':
-              console.log('🔧 Widget calling tool:', args[0], args[1]);
-              // Dispatch event for chat page to handle
               window.dispatchEvent(new CustomEvent('widget-tool-call', {
                 detail: { toolName: args[0], toolArgs: args[1] }
               }));
@@ -189,9 +100,7 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
               break;
 
             case 'requestDisplayMode':
-              console.log('🖼️ Widget requested display mode:', args[0].mode);
               if (args[0].mode === 'fullscreen') {
-                // Dispatch custom event for chat page to handle
                 window.dispatchEvent(new CustomEvent('widget-fullscreen-request', {
                   detail: { uri, data }
                 }));
@@ -204,126 +113,176 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
               break;
           }
         }
+      } catch (e) {
+        console.error('❌ Error handling widget message:', e);
+      }
+    };
 
-        // Handle resize messages from widget
-        if (event.data?.type === 'NITRO_WIDGET_RESIZE') {
-          const { height } = event.data;
-          console.log('📏 Received widget resize:', height);
-          if (height && typeof height === 'number') {
-            const newHeight = Math.min(height, 400);
-            console.log('📏 Setting content height to:', newHeight);
-            setContentHeight(newHeight); // Cap at 400px max
-          }
-        }
-      };
+    messageHandlerRef.current = handleMessage;
+    window.addEventListener('message', handleMessage);
+
+    // Function to send data to iframe
+    const sendDataToIframe = () => {
+      if (!mountedRef.current || !iframe.contentWindow) return;
+
+      try {
+        const getSystemTheme = (): 'light' | 'dark' => {
+          if (typeof window === 'undefined') return 'light';
+          return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        };
+
+        const getUserAgent = () => ({
+          device: {
+            type: (window.matchMedia('(max-width: 768px)').matches
+              ? 'mobile'
+              : window.matchMedia('(max-width: 1024px)').matches
+                ? 'tablet'
+                : 'desktop') as 'mobile' | 'tablet' | 'desktop',
+          },
+          capabilities: {
+            hover: window.matchMedia('(hover: hover)').matches,
+            touch: window.matchMedia('(pointer: coarse)').matches,
+          },
+        });
+
+        const openaiData = {
+          toolInput: {},
+          toolOutput: data,
+          toolResponseMetadata: null,
+          widgetState: null,
+          theme: getSystemTheme(),
+          locale: navigator.language || 'en-US',
+          userAgent: getUserAgent(),
+          maxHeight: undefined, // No height limit - widget determines its own height
+          displayMode: 'inline' as const,
+          safeArea: {
+            insets: { top: 0, bottom: 0, left: 0, right: 0 },
+          },
+        };
+
+        iframe.contentWindow.postMessage({
+          type: 'NITRO_INJECT_OPENAI',
+          data: openaiData
+        }, '*');
+
+        // Also send legacy format
+        iframe.contentWindow.postMessage({
+          type: 'toolOutput',
+          data,
+        }, '*');
+      } catch (e) {
+        console.error('❌ Failed to send data to widget:', e);
+      }
+    };
+
+    const handleIframeLoad = () => {
+      if (!mountedRef.current) return;
+      setIsLoaded(true);
 
-      window.addEventListener('message', handleWidgetMessage);
+      // Send data with retries
+      sendDataToIframe();
+      const t1 = setTimeout(sendDataToIframe, 100);
+      const t2 = setTimeout(sendDataToIframe, 300);
+      const t3 = setTimeout(sendDataToIframe, 500);
+      timeoutIds.push(t1, t2, t3);
     };
 
+    const handleIframeError = () => {
+      if (!mountedRef.current) return;
+      console.error('❌ Widget iframe error:', uri);
+      setHasError(true);
+    };
+
+    iframe.onload = handleIframeLoad;
+    iframe.onerror = handleIframeError;
+
     if (isDevMode) {
       // Dev mode: load from widget dev server (port 3001)
       let widgetPath = uri;
 
-      // Handle ui://widget/ URIs
       if (widgetPath.startsWith('ui://widget/')) {
         widgetPath = widgetPath.replace('ui://widget/', '');
         widgetPath = widgetPath.replace(/\.html$/, '');
-      }
-      // Handle /widgets/ prefix (legacy)
-      else if (widgetPath.startsWith('/widgets/')) {
+      } else if (widgetPath.startsWith('/widgets/')) {
         widgetPath = widgetPath.replace('/widgets/', '');
-      }
-      // Handle leading slash
-      else if (widgetPath.startsWith('/')) {
+      } else if (widgetPath.startsWith('/')) {
         widgetPath = widgetPath.substring(1);
       }
 
       const widgetUrl = `http://localhost:3001/${widgetPath}`;
-
-      console.log('Loading widget in dev mode:', { uri, widgetPath, widgetUrl, data });
-
-      // Set up onload handler BEFORE setting src
-      iframeRef.current.onload = () => {
-        console.log('Widget iframe loaded, injecting window.openai...');
-
-        // Inject window.openai runtime
-        if (iframeRef.current) {
-          injectOpenAiRuntime(iframeRef.current);
-        }
-
-        // Also send legacy postMessage for backward compatibility
-        setTimeout(() => {
-          try {
-            iframeRef.current?.contentWindow?.postMessage(
-              {
-                type: 'toolOutput',
-                data,
-              },
-              '*'
-            );
-            console.log('✅ Legacy data posted to widget:', data);
-          } catch (e) {
-            console.error('❌ Failed to post message to widget:', e);
-          }
-        }, 300);
-      };
-
-      // Set src AFTER onload handler is set
-      iframeRef.current.src = widgetUrl;
+      console.log('Loading widget in dev mode:', { uri, widgetPath, widgetUrl });
+      iframe.src = widgetUrl;
     } else {
       // Production mode: fetch and render
       const loadProductionWidget = async () => {
+        if (!mountedRef.current) return;
+
         try {
-          // Convert widget route/path to resource URI format if needed
           let resourceUri = uri;
           if (!uri.startsWith('widget://') && !uri.startsWith('http://') && !uri.startsWith('https://')) {
             const widgetPath = uri.startsWith('/') ? uri.substring(1) : uri;
             resourceUri = `widget://${widgetPath}`;
           }
 
-          console.log('Loading widget in production mode:', { originalUri: uri, resourceUri, data });
-
           const response = await fetch(`/api/resources/${encodeURIComponent(resourceUri)}`);
+          if (!mountedRef.current) return;
+
           const result = await response.json();
 
           if (result.contents && result.contents.length > 0) {
             const html = result.contents[0].text || '';
             const completeHtml = createWidgetHTML(html, data);
-
-            // Use Blob URL
             const blob = new Blob([completeHtml], { type: 'text/html' });
             const blobUrl = URL.createObjectURL(blob);
 
-            if (iframeRef.current) {
-              iframeRef.current.src = blobUrl;
-              iframeRef.current.onload = () => {
-                // Inject window.openai runtime
-                if (iframeRef.current) {
-                  injectOpenAiRuntime(iframeRef.current);
-                }
-
+            if (mountedRef.current && iframe) {
+              iframe.src = blobUrl;
+              // Revoke URL after load
+              const revokeTimeout = setTimeout(() => {
                 URL.revokeObjectURL(blobUrl);
-              };
+              }, 5000);
+              timeoutIds.push(revokeTimeout);
             }
-            console.log('✅ Widget loaded successfully:', { resourceUri, hasHtml: !!html, hasData: !!data });
           } else {
             console.warn('⚠️ Widget resource found but no content:', { resourceUri, result });
+            if (mountedRef.current) setHasError(true);
           }
         } catch (error) {
-          console.error('❌ Failed to load widget:', {
-            originalUri: uri,
-            error: error instanceof Error ? error.message : String(error),
-            stack: error instanceof Error ? error.stack : undefined
-          });
+          console.error('❌ Failed to load widget:', error);
+          if (mountedRef.current) setHasError(true);
         }
       };
 
       loadProductionWidget();
     }
-  }, [uri, data, isDevMode]);
 
-  const isInChat = className?.includes('widget-in-chat');
-  const finalHeight = isInChat ? `${contentHeight}px` : '100%';
+    // Cleanup function
+    return () => {
+      mountedRef.current = false;
+      
+      // Clear all timeouts
+      timeoutIds.forEach(id => clearTimeout(id));
+      
+      // Remove message listener
+      if (messageHandlerRef.current) {
+        window.removeEventListener('message', messageHandlerRef.current);
+        messageHandlerRef.current = null;
+      }
+
+      // Clear iframe handlers
+      if (iframe) {
+        iframe.onload = null;
+        iframe.onerror = null;
+      }
+    };
+  }, [uri, data, isDevMode, handleResize]);
+
+  // If there's an error, don't render the widget at all
+  if (hasError) {
+    return null;
+  }
+
+  const effectiveHeight = Math.max(contentHeight, MIN_HEIGHT);
 
   return (
     <iframe
@@ -332,8 +291,8 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
       sandbox="allow-scripts allow-same-origin"
       style={{
         width: '100%',
-        height: finalHeight,
-        maxHeight: isInChat ? '400px' : '100%',
+        height: `${effectiveHeight}px`,
+        minHeight: `${MIN_HEIGHT}px`,
         border: 'none',
         background: 'transparent',
         overflow: 'hidden',
@@ -343,4 +302,3 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
     />
   );
 }
-