nitrostack 1.0.65 → 1.0.66

package/src/studio/components/WidgetRenderer.tsx

@@ -0,0 +1,346 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { getWidgetUrl, createWidgetHTML, postMessageToWidget } from '@/lib/widget-loader';
+
+interface WidgetRendererProps {
+  uri: string;
+  data: any;
+  className?: string;
+}
+
+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 =
+    typeof window !== 'undefined' &&
+    (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
+
+  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)
+      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/')) {
+        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, 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;
+    } else {
+      // Production mode: fetch and render
+      const loadProductionWidget = async () => {
+        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)}`);
+          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);
+                }
+
+                URL.revokeObjectURL(blobUrl);
+              };
+            }
+            console.log('✅ Widget loaded successfully:', { resourceUri, hasHtml: !!html, hasData: !!data });
+          } else {
+            console.warn('⚠️ Widget resource found but no content:', { resourceUri, result });
+          }
+        } 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
+          });
+        }
+      };
+
+      loadProductionWidget();
+    }
+  }, [uri, data, isDevMode]);
+
+  const isInChat = className?.includes('widget-in-chat');
+  const finalHeight = isInChat ? `${contentHeight}px` : '100%';
+
+  return (
+    <iframe
+      ref={iframeRef}
+      className={className}
+      sandbox="allow-scripts allow-same-origin"
+      style={{
+        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/api.ts

@@ -0,0 +1,207 @@
+// NitroStack Studio API Client
+
+const API_BASE = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000';
+
+export class StudioAPI {
+  private baseUrl: string;
+  private initialized: boolean = false;
+
+  constructor(baseUrl: string = API_BASE) {
+    this.baseUrl = baseUrl;
+  }
+
+  // Initialize MCP connection (call once on app start)
+  async initialize() {
+    if (this.initialized) return;
+    try {
+      await fetch(`${this.baseUrl}/api/init`, { method: 'POST' });
+      this.initialized = true;
+    } catch (error) {
+      console.error('Failed to initialize MCP connection:', error);
+    }
+  }
+
+  // Connection
+  async checkConnection() {
+    const response = await fetch(`${this.baseUrl}/api/health`);
+    return response.json();
+  }
+
+  // Tools
+  async listTools() {
+    const response = await fetch(`${this.baseUrl}/api/tools`);
+    return response.json();
+  }
+  
+  async getTools() {
+    return this.listTools();
+  }
+
+  async callTool(name: string, args: any, jwtToken?: string, apiKey?: string) {
+    const response = await fetch(`${this.baseUrl}/api/tools/${name}/call`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ args, jwtToken, apiKey }),
+    });
+    return response.json();
+  }
+
+  // Resources
+  async getResources() {
+    const response = await fetch(`${this.baseUrl}/api/resources`);
+    return response.json();
+  }
+
+  async getResource(uri: string) {
+    const response = await fetch(`${this.baseUrl}/api/resources/${encodeURIComponent(uri)}`);
+    return response.json();
+  }
+
+  // Prompts
+  async getPrompts() {
+    const response = await fetch(`${this.baseUrl}/api/prompts`);
+    return response.json();
+  }
+
+  async executePrompt(name: string, args: any) {
+    const response = await fetch(`${this.baseUrl}/api/prompts/${name}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(args),
+    });
+    return response.json();
+  }
+
+  // Ping
+  async ping() {
+    const response = await fetch(`${this.baseUrl}/api/ping`);
+    return response.json();
+  }
+
+  // Sampling
+  async sample(params: { prompt: string; maxTokens: number; model?: string }) {
+    const response = await fetch(`${this.baseUrl}/api/sampling`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  // Roots
+  async getRoots() {
+    const response = await fetch(`${this.baseUrl}/api/roots`);
+    return response.json();
+  }
+
+  // Chat
+  async chat(params: {
+    provider: string;
+    messages: any[];
+    apiKey: string; // LLM API key (OpenAI/Gemini)
+    jwtToken?: string; // MCP server JWT token
+    mcpApiKey?: string; // MCP server API key
+  }) {
+    const response = await fetch(`${this.baseUrl}/api/chat`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  // Auth (OAuth 2.1)
+  async discoverAuth(url: string, type: 'resource' | 'auth-server') {
+    const response = await fetch(`${this.baseUrl}/api/auth/fetch-metadata`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url, type }),
+    });
+    return response.json();
+  }
+
+  async registerClient(endpoint: string, metadata: any) {
+    const response = await fetch(`${this.baseUrl}/api/auth/register-client`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ endpoint, metadata }),
+    });
+    return response.json();
+  }
+
+  async startOAuthFlow(params: {
+    authorizationEndpoint: string;
+    clientId: string;
+    redirectUri: string;
+    scope: string;
+    resource: string;
+  }) {
+    const response = await fetch(`${this.baseUrl}/api/auth/start-flow`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  async exchangeToken(params: {
+    code: string;
+    pkce: any;
+    tokenEndpoint: string;
+    clientId: string;
+    clientSecret?: string;
+    redirectUri: string;
+    resource: string;
+  }) {
+    const response = await fetch(`${this.baseUrl}/api/auth/exchange-token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  async refreshToken(params: {
+    refreshToken: string;
+    tokenEndpoint: string;
+    clientId: string;
+    clientSecret?: string;
+    resource: string;
+  }) {
+    const response = await fetch(`${this.baseUrl}/api/auth/refresh-token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  async revokeToken(params: {
+    token: string;
+    revocationEndpoint: string;
+    clientId: string;
+    clientSecret?: string;
+  }) {
+    const response = await fetch(`${this.baseUrl}/api/auth/revoke-token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  // Health
+  async getHealth() {
+    const response = await fetch(`${this.baseUrl}/api/health/checks`);
+    return response.json();
+  }
+
+  // Widget Examples
+  async getWidgetExamples() {
+    const response = await fetch(`${this.baseUrl}/api/widget-examples`);
+    return response.json();
+  }
+}
+
+export const api = new StudioAPI();
+