nitrostack 1.0.52 → 1.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitrostack",
-  "version": "1.0.52",
+  "version": "1.0.53",
   "description": "NitroStack - Build powerful MCP servers with TypeScript",
   "type": "module",
   "main": "dist/core/index.js",
@@ -108,4 +108,4 @@
     "url": "https://github.com/abhishekpanditofficial/nitrostack/issues"
   },
   "homepage": "https://nitrostack.vercel.app"
-}
+}

package/src/studio/components/WidgetRenderer.tsx

@@ -11,7 +11,7 @@ interface WidgetRendererProps {
 
 export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  
+
   // Check if we're in dev mode (localhost)
   const isDevMode =
     typeof window !== 'undefined' &&
@@ -22,13 +22,33 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
 
     if (isDevMode) {
       // Dev mode: load from widget dev server (port 3001)
-      // Widget URIs are like "/calculator-result" or "calculator-result"
-      // Remove leading slash if present
-      const widgetPath = uri.startsWith('/') ? uri.substring(1) : uri;
+      // Parse the widget path from various URI formats:
+      // - "ui://widget/calculator-result.html" -> "calculator-result"
+      // - "/calculator-result" -> "calculator-result"
+      // - "calculator-result" -> "calculator-result"
+      // - "/widgets/calculator-result" -> "calculator-result"
+
+      let widgetPath = uri;
+
+      // Handle ui://widget/ URIs
+      if (widgetPath.startsWith('ui://widget/')) {
+        widgetPath = widgetPath.replace('ui://widget/', '');
+        // Remove .html extension if present
+        widgetPath = widgetPath.replace(/\.html$/, '');
+      }
+      // Handle /widgets/ prefix (legacy)
+      else if (widgetPath.startsWith('/widgets/')) {
+        widgetPath = widgetPath.replace('/widgets/', '');
+      }
+      // Handle leading slash
+      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, posting data...');
@@ -48,7 +68,7 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
           }
         }, 300);
       };
-      
+
       // Set src AFTER onload handler is set
       iframeRef.current.src = widgetUrl;
     } else {
@@ -63,9 +83,9 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
             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)}`);
           const result = await response.json();
 
@@ -88,9 +108,9 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
             console.warn('⚠️ Widget resource found but no content:', { resourceUri, result });
           }
         } catch (error) {
-          console.error('❌ Failed to load widget:', { 
-            originalUri: uri, 
-            resourceUri, 
+          console.error('❌ Failed to load widget:', {
+            originalUri: uri,
+            resourceUri,
             error: error instanceof Error ? error.message : String(error),
             stack: error instanceof Error ? error.stack : undefined
           });
@@ -102,7 +122,7 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
   }, [uri, data, isDevMode]);
 
   const isInChat = className?.includes('widget-in-chat');
-  
+
   return (
     <iframe
       ref={iframeRef}