nitrostack 1.0.55 → 1.0.56

package/src/studio/components/WidgetRenderer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { getWidgetUrl, createWidgetHTML, postMessageToWidget } from '@/lib/widget-loader';
 
 interface WidgetRendererProps {
@@ -11,6 +11,7 @@ interface WidgetRendererProps {
 
 export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [contentHeight, setContentHeight] = useState<number>(200); // Start with smaller default
 
   // Check if we're in dev mode (localhost)
   const isDevMode =
@@ -20,20 +21,212 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
   useEffect(() => {
     if (!iframeRef.current) return;
 
+    const injectOpenAiRuntime = (iframe: HTMLIFrameElement) => {
+      if (!iframe.contentWindow) return;
+
+      // Detect system theme
+      const getSystemTheme = (): 'light' | 'dark' => {
+        if (typeof window === 'undefined') return 'light';
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      };
+
+      // 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);
+        }
+      };
+
+      // Send immediately
+      sendData();
+
+      // Retry after delays to ensure widget React app has mounted
+      setTimeout(sendData, 100);
+      setTimeout(sendData, 300);
+      setTimeout(sendData, 500);
+
+      // Set up message listener for widget RPC calls
+      const handleWidgetMessage = (event: MessageEvent) => {
+        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,
+                result: null
+              }, '*');
+              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] }
+              }));
+              iframe.contentWindow?.postMessage({
+                type: 'NITRO_WIDGET_RPC_RESPONSE',
+                id,
+                result: { success: true }
+              }, '*');
+              break;
+
+            case 'openExternal':
+              window.open(args[0].href, '_blank', 'noopener,noreferrer');
+              iframe.contentWindow?.postMessage({
+                type: 'NITRO_WIDGET_RPC_RESPONSE',
+                id,
+                result: null
+              }, '*');
+              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 }
+                }));
+              }
+              iframe.contentWindow?.postMessage({
+                type: 'NITRO_WIDGET_RPC_RESPONSE',
+                id,
+                result: { mode: args[0].mode }
+              }, '*');
+              break;
+          }
+        }
+
+        // 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
+          }
+        }
+      };
+
+      window.addEventListener('message', handleWidgetMessage);
+    };
+
     if (isDevMode) {
       // Dev mode: load from widget dev server (port 3001)
-      // 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)
@@ -51,8 +244,14 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
 
       // Set up onload handler BEFORE setting src
       iframeRef.current.onload = () => {
-        console.log('Widget iframe loaded, posting data...');
-        // Post message after a short delay to ensure widget is ready
+        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(
@@ -62,7 +261,7 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
               },
               '*'
             );
-            console.log('✅ Data posted to widget:', data);
+            console.log('✅ Legacy data posted to widget:', data);
           } catch (e) {
             console.error('❌ Failed to post message to widget:', e);
           }
@@ -76,10 +275,8 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
       const loadProductionWidget = async () => {
         try {
           // Convert widget route/path to resource URI format if needed
-          // Routes like "/calculator-result" or "calculator-result" should become "widget://calculator-result"
           let resourceUri = uri;
           if (!uri.startsWith('widget://') && !uri.startsWith('http://') && !uri.startsWith('https://')) {
-            // Remove leading slash if present
             const widgetPath = uri.startsWith('/') ? uri.substring(1) : uri;
             resourceUri = `widget://${widgetPath}`;
           }
@@ -100,6 +297,11 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
             if (iframeRef.current) {
               iframeRef.current.src = blobUrl;
               iframeRef.current.onload = () => {
+                // Inject window.openai runtime
+                if (iframeRef.current) {
+                  injectOpenAiRuntime(iframeRef.current);
+                }
+
                 URL.revokeObjectURL(blobUrl);
               };
             }
@@ -110,7 +312,6 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
         } catch (error) {
           console.error('❌ Failed to load widget:', {
             originalUri: uri,
-            resourceUri,
             error: error instanceof Error ? error.message : String(error),
             stack: error instanceof Error ? error.stack : undefined
           });
@@ -122,6 +323,7 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
   }, [uri, data, isDevMode]);
 
   const isInChat = className?.includes('widget-in-chat');
+  const finalHeight = isInChat ? `${contentHeight}px` : '100%';
 
   return (
     <iframe
@@ -129,10 +331,14 @@ export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProp
       className={className}
       sandbox="allow-scripts allow-same-origin"
       style={{
-        width: isInChat ? '650px' : '100%',
-        height: isInChat ? '450px' : '100%',
+        width: '100%',
+        height: finalHeight,
+        maxHeight: isInChat ? '400px' : '100%',
         border: 'none',
         background: 'transparent',
+        overflow: 'hidden',
+        transition: 'height 0.2s ease-out',
+        display: 'block',
       }}
     />
   );

package/src/studio/lib/llm-service.ts

@@ -148,7 +148,7 @@ User: "list all resources"
         ...messages,
       ];
     }
-    
+
     if (provider === 'openai') {
       return this.chatOpenAI(messages, tools, apiKey);
     } else if (provider === 'gemini') {
@@ -170,7 +170,7 @@ User: "list all resources"
           tool_call_id: msg.toolCallId,
         };
       }
-      
+
       // Handle assistant messages with tool calls
       if (msg.role === 'assistant' && msg.toolCalls && msg.toolCalls.length > 0) {
         return {
@@ -186,13 +186,13 @@ User: "list all resources"
           })),
         };
       }
-      
+
       return {
         role: msg.role,
         content: msg.content,
       };
     });
-    
+
     console.log('Formatted messages for OpenAI:', JSON.stringify(formattedMessages, null, 2));
 
     const requestBody: any = {
@@ -204,11 +204,11 @@ User: "list all resources"
       requestBody.tools = tools.map((tool) => {
         // Clean the schema for OpenAI - remove unsupported properties
         const cleanSchema = { ...tool.inputSchema };
-        
+
         // Remove properties that OpenAI doesn't support
         delete cleanSchema.$schema;
         delete cleanSchema.additionalProperties;
-        
+
         // Ensure required properties for OpenAI
         if (!cleanSchema.type) {
           cleanSchema.type = 'object';
@@ -216,7 +216,7 @@ User: "list all resources"
         if (!cleanSchema.properties) {
           cleanSchema.properties = {};
         }
-        
+
         return {
           type: 'function',
           function: {
@@ -226,7 +226,7 @@ User: "list all resources"
           },
         };
       });
-      
+
       console.log('Sending tools to OpenAI:', JSON.stringify(requestBody.tools, null, 2));
     }
 
@@ -276,22 +276,22 @@ User: "list all resources"
     // Convert messages to Gemini format
     const contents: any[] = [];
     let systemInstruction = '';
-    
+
     // Group consecutive tool messages together for Gemini
     let i = 0;
     while (i < messages.length) {
       const msg = messages[i];
-      
+
       if (msg.role === 'system') {
         systemInstruction = msg.content;
         i++;
         continue;
       }
-      
+
       if (msg.role === 'tool') {
         // Collect all consecutive tool messages and group them into ONE function response
         const functionParts: any[] = [];
-        
+
         while (i < messages.length && messages[i].role === 'tool') {
           const toolMsg = messages[i];
           functionParts.push({
@@ -304,7 +304,7 @@ User: "list all resources"
           });
           i++;
         }
-        
+
         // Add all function responses as ONE entry with multiple parts
         contents.push({
           role: 'function',
@@ -313,11 +313,11 @@ User: "list all resources"
       } else if (msg.role === 'assistant' && msg.toolCalls && msg.toolCalls.length > 0) {
         // Assistant message with tool calls
         const parts: any[] = [];
-        
+
         if (msg.content) {
           parts.push({ text: msg.content });
         }
-        
+
         for (const tc of msg.toolCalls) {
           parts.push({
             functionCall: {
@@ -326,7 +326,7 @@ User: "list all resources"
             },
           });
         }
-        
+
         contents.push({
           role: 'model',
           parts,
@@ -341,38 +341,38 @@ User: "list all resources"
         i++;
       }
     }
-    
-    console.log('Formatted contents for Gemini:', JSON.stringify(contents, null, 2));
-    
+
+    // console.log('Formatted contents for Gemini:', JSON.stringify(contents, null, 2));
+
     // Prepare request body
     const requestBody: any = {
       contents,
     };
-    
+
     // Add system instruction if present
     if (systemInstruction) {
       requestBody.systemInstruction = {
         parts: [{ text: systemInstruction }],
       };
     }
-    
+
     // Add tools if present
     if (tools.length > 0) {
       requestBody.tools = [{
         functionDeclarations: tools.map((tool) => {
           const cleanSchema = { ...tool.inputSchema };
-          
+
           // Remove unsupported properties
           delete cleanSchema.$schema;
           delete cleanSchema.additionalProperties;
-          
+
           // Convert to Gemini's expected format
           const parameters: any = {
             type: cleanSchema.type || 'OBJECT',
             properties: {},
             required: cleanSchema.required || [],
           };
-          
+
           // Convert properties
           if (cleanSchema.properties) {
             for (const [key, value] of Object.entries(cleanSchema.properties)) {
@@ -381,14 +381,14 @@ User: "list all resources"
                 type: this.convertTypeToGemini(prop.type),
                 description: prop.description || '',
               };
-              
+
               // Handle enums
               if (prop.enum) {
                 parameters.properties[key].enum = prop.enum;
               }
             }
           }
-          
+
           return {
             name: tool.name,
             description: tool.description || 'No description provided',
@@ -396,10 +396,10 @@ User: "list all resources"
           };
         }),
       }];
-      
-      console.log('Sending tools to Gemini:', JSON.stringify(requestBody.tools, null, 2));
+
+      // console.log('Sending tools to Gemini:', JSON.stringify(requestBody.tools, null, 2));
     }
-    
+
     // Use Gemini 2.0 Flash Experimental (latest model with function calling)
     // The v1beta API uses 'gemini-2.0-flash-exp' for the newest features
     const model = 'gemini-2.0-flash-exp';
@@ -420,23 +420,23 @@ User: "list all resources"
 
     const data = await response.json();
     console.log('Gemini response:', JSON.stringify(data, null, 2));
-    
+
     const candidate = data.candidates?.[0];
     if (!candidate) {
       throw new Error('No response from Gemini');
     }
-    
+
     const parts = candidate.content?.parts || [];
-    
+
     // Extract text content
     let content = '';
     const toolCalls: ToolCall[] = [];
-    
+
     for (const part of parts) {
       if (part.text) {
         content += part.text;
       }
-      
+
       if (part.functionCall) {
         toolCalls.push({
           id: `call_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
@@ -445,7 +445,7 @@ User: "list all resources"
         });
       }
     }
-    
+
     const result: ChatResponse = {
       message: {
         role: 'assistant',
@@ -453,7 +453,7 @@ User: "list all resources"
       },
       finishReason: candidate.finishReason,
     };
-    
+
     if (toolCalls.length > 0) {
       result.toolCalls = toolCalls;
       result.message.toolCalls = toolCalls;
@@ -461,10 +461,10 @@ User: "list all resources"
 
     return result;
   }
-  
+
   private convertTypeToGemini(type?: string): string {
     if (!type) return 'STRING';
-    
+
     const typeMap: Record<string, string> = {
       'string': 'STRING',
       'number': 'NUMBER',
@@ -473,7 +473,7 @@ User: "list all resources"
       'array': 'ARRAY',
       'object': 'OBJECT',
     };
-    
+
     return typeMap[type.toLowerCase()] || 'STRING';
   }
 }

package/templates/typescript-oauth/{env.example → .env.example}

@@ -1,3 +1,4 @@
+
 # OAuth 2.1 MCP Server Configuration
 # =============================================================================
 # TRANSPORT MODE (AUTO-CONFIGURED)
@@ -6,28 +7,21 @@
 # - STDIO: For MCP protocol communication with Studio/Claude
 # - HTTP: For OAuth metadata endpoints (/.well-known/oauth-protected-resource)
 # Both transports run simultaneously on different channels.
-# =============================================================================
-
 # =============================================================================
 # REQUIRED: Server Configuration
 # =============================================================================
-
 # =============================================================================
 # Auth0 Configuration
 # =============================================================================
 # After creating your API and Application in Auth0, fill in these values:
-
 # Your Auth0 API Identifier (from APIs → MCP Server → Identifier)
 # This MUST match exactly what you set when creating the API
 RESOURCE_URI=https://mcplocal
-
 # Your Auth0 tenant domain (authorization server)
-AUTH_SERVER_URL=https://dev-5dt0utuk37h13tjm.us.auth0.com
-
+AUTH_SERVER_URL=https://dev-5dt0utuk31h13tjm.us.auth0.com
 # Expected token audience (should match RESOURCE_URI)
 TOKEN_AUDIENCE=https://mcplocal
-
 # Expected token issuer (your Auth0 tenant domain with trailing slash)
-TOKEN_ISSUER=https://dev-5dt0utuk37h13tjm.us.auth0.com/
-
+TOKEN_ISSUER=https://dev-5dt0utuk31h13tjm.us.auth0.com/
 
+DUFFEL_API_KEY=duffel_test_-w0wGDHB0M3DU9k-sBeUbxLqwcibUQqfEbjWDTKNnlf