@app-connect/core 1.7.37 → 1.7.38

package/mcp/ui/App/components/OAuthConnect.tsx

@@ -1,270 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { Button } from '@openai/apps-sdk-ui/components/Button'
-import { callTool, getServerUrl, updateModelContext } from '../lib/callTool'
-import { dbg } from '../lib/debugLog'
-
-type AuthStatus = 'ready' | 'creatingSession' | 'polling' | 'error'
-
-interface OAuthConnectProps {
-  connectorManifest: any
-  connectorName: string
-  connectorDisplayName: string
-  hostname: string
-  openaiSessionId?: string | null
-  rcExtensionId?: string | null
-  onSuccess: (data: { jwtToken: string; userInfo?: any }) => void
-  onError: (error: string) => void
-  onBack: () => void
-}
-
-/**
- * Compose the OAuth authorization URL entirely client-side.
- * The widget already has the full manifest and serverUrl — no server round-trip needed.
- */
-function buildAuthUri(platform: any, sessionId: string, hostname: string, serverUrl: string): string {
-  const oauth = platform.auth.oauth
-  let stateParam = `sessionId=${sessionId}&platform=${platform.name}&hostname=${hostname}`
-  if (oauth.customState) stateParam += `&${oauth.customState}`
-
-  return `${oauth.authUrl}?` +
-    `response_type=code` +
-    `&client_id=${oauth.clientId}` +
-    `${oauth.scope ? `&${oauth.scope}` : ''}` +
-    `&state=${encodeURIComponent(stateParam)}` +
-    `&redirect_uri=${serverUrl}/oauth-callback`
-}
-
-const POLL_INTERVAL_MS = 5_000;
-const MAX_POLL_ATTEMPTS = 100; // ~5 minutes
-
-export function OAuthConnect({
-  connectorManifest,
-  connectorName,
-  connectorDisplayName,
-  hostname,
-  openaiSessionId,
-  rcExtensionId,
-  onSuccess,
-  onError,
-  onBack,
-}: OAuthConnectProps) {
-  const [status, setStatus] = useState<AuthStatus>('ready')
-  const [authUri, setAuthUri] = useState<string | null>(null)
-  const [errorMsg, setErrorMsg] = useState<string | null>(null)
-  const [sessionReady, setSessionReady] = useState(false)
-
-  const sessionIdRef = useRef<string | null>(null)
-  const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
-  const pollCountRef = useRef(0)
-  const unmountedRef = useRef(false)
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      unmountedRef.current = true
-      if (pollTimerRef.current) clearInterval(pollTimerRef.current)
-    }
-  }, [])
-
-  // Build authUri client-side immediately — no server round-trip needed.
-  // Simultaneously call doAuth in the background to create the DB session.
-  useEffect(() => {
-    let cancelled = false
-    const platform = connectorManifest?.platforms?.[connectorName]
-
-    if (!platform) {
-      setStatus('error')
-      setErrorMsg('Invalid connector configuration')
-      return
-    }
-
-    // Use openaiSessionId as the primary session key so the OAuth callback
-    // can be correlated with the ChatGPT conversation. Fall back to a random
-    // UUID when the widget is loaded outside ChatGPT.
-    const sessionId = openaiSessionId ?? crypto.randomUUID()
-    sessionIdRef.current = sessionId
-    const serverUrl = getServerUrl() ?? ''
-    const uri = buildAuthUri(platform, sessionId, hostname, serverUrl)
-    setAuthUri(uri)
-    dbg.info('authUri composed client-side, sessionId:', sessionId)
-
-    // Create the server-side session in background (fast DB write only)
-    callTool('doAuth', { connectorName, hostname, sessionId }).then((result) => {
-      if (cancelled || unmountedRef.current) return
-      if (!result?.success) {
-        dbg.warn('doAuth session creation failed:', result?.error)
-        setStatus('error')
-        setErrorMsg(result?.error || 'Failed to prepare authentication session')
-        return
-      }
-      dbg.info('doAuth session created successfully')
-      setSessionReady(true)
-    }).catch((err: any) => {
-      if (cancelled || unmountedRef.current) return
-      dbg.error('doAuth error:', err.message)
-      setStatus('error')
-      setErrorMsg(err.message || 'Failed to prepare authentication session')
-    })
-
-    return () => { cancelled = true }
-  }, [connectorManifest, connectorName, hostname])
-
-  const startPolling = () => {
-    setStatus('polling')
-    pollCountRef.current = 0
-
-    pollTimerRef.current = setInterval(async () => {
-      if (unmountedRef.current) {
-        if (pollTimerRef.current) clearInterval(pollTimerRef.current)
-        return
-      }
-
-      pollCountRef.current += 1
-      if (pollCountRef.current > MAX_POLL_ATTEMPTS) {
-        if (pollTimerRef.current) clearInterval(pollTimerRef.current)
-        setStatus('error')
-        setErrorMsg('Authorization timed out. Please try again.')
-        return
-      }
-
-      try {
-        const res = await callTool('checkAuthStatus', {
-          sessionId: sessionIdRef.current,
-          ...(rcExtensionId ? { rcExtensionId } : {}),
-        })
-        const sc = res?.data ?? null
-
-        if (unmountedRef.current) return
-
-        const dataStatus = sc?.status
-        if (dataStatus === 'completed' && sc?.jwtToken) {
-          if (pollTimerRef.current) clearInterval(pollTimerRef.current)
-
-          // Push the JWT into ChatGPT's model context so it can be used
-          // in future tool calls. updateModelContext tries ui/update-model-context
-          // first (invisible to user, visible to model), then falls back to ui/message.
-          const userLabel = sc.userInfo?.name ? ` as ${sc.userInfo.name}` : ''
-          await updateModelContext(
-            `CRM authentication with ${connectorDisplayName} completed${userLabel}. ` +
-            `Platform: ${connectorName}. ` +
-            `jwtToken: ${sc.jwtToken}. ` +
-            `IMPORTANT: Store this jwtToken and pass it as a parameter to all future CRM tool calls.`
-          )
-          dbg.info('updateModelContext sent with jwtToken')
-
-          onSuccess({
-            jwtToken: sc.jwtToken,
-            userInfo: sc.userInfo,
-          })
-        } else if (dataStatus === 'failed') {
-          if (pollTimerRef.current) clearInterval(pollTimerRef.current)
-          setStatus('error')
-          setErrorMsg(sc?.errorMessage || 'Authorization failed')
-        } else if (dataStatus === 'expired') {
-          if (pollTimerRef.current) clearInterval(pollTimerRef.current)
-          setStatus('error')
-          setErrorMsg('Authorization session expired. Please try again.')
-        }
-        // 'pending' -> keep polling
-      } catch {
-        // Transient errors during polling are acceptable; keep trying
-      }
-    }, POLL_INTERVAL_MS)
-  }
-
-  const handleAuthorizeClick = () => {
-    if (authUri && sessionReady) {
-      window.open(authUri, '_blank', 'noopener,noreferrer')
-      startPolling()
-    }
-  }
-
-  const handleRetry = () => {
-    setStatus('error')
-    setErrorMsg(null)
-    onError('retry')
-  }
-
-  // Error state
-  if (status === 'error') {
-    return (
-      <div className="w-full max-w-md">
-        <div className="mb-4">
-          <button
-            type="button"
-            onClick={onBack}
-            className="text-sm text-secondary hover:text-primary transition-colors mb-2 cursor-pointer"
-          >
-            &larr; Back
-          </button>
-          <h2 className="heading-lg">Authentication Error</h2>
-        </div>
-        <div className="rounded-lg border border-red-200 bg-red-50 p-4 mb-4">
-          <p className="text-red-700 text-sm">{errorMsg}</p>
-        </div>
-        <Button color="primary" size="sm" onClick={handleRetry}>
-          Try Again
-        </Button>
-      </div>
-    )
-  }
-
-  // Ready to authorize or polling
-  return (
-    <div className="w-full max-w-md">
-      <div className="mb-4">
-        <button
-          type="button"
-          onClick={onBack}
-          className="text-sm text-secondary hover:text-primary transition-colors mb-2 cursor-pointer"
-        >
-          &larr; Back
-        </button>
-        <h2 className="heading-lg">Authorize {connectorDisplayName}</h2>
-      </div>
-
-      <div className="rounded-xl border border-default bg-surface p-4 space-y-4">
-        {status === 'ready' && (
-          <>
-            <p className="text-sm text-secondary">
-              Click the button below to open {connectorDisplayName}'s authorization
-              page. After you approve access, return here to continue.
-            </p>
-            <Button
-              color="primary"
-              size="md"
-              onClick={handleAuthorizeClick}
-              disabled={!sessionReady}
-            >
-              {sessionReady
-                ? `Authorize in ${connectorDisplayName}`
-                : 'Preparing…'}
-            </Button>
-          </>
-        )}
-
-        {status === 'polling' && (
-          <div className="text-center space-y-3">
-            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary mx-auto" />
-            <p className="text-sm text-secondary">
-              Waiting for you to authorize in {connectorDisplayName}...
-            </p>
-            <p className="text-xs text-secondary opacity-60">
-              Complete the authorization in the opened tab, then come back here.
-            </p>
-            {authUri && (
-              <a
-                href={authUri}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-xs text-primary hover:underline"
-              >
-                Open authorization page again
-              </a>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/mcp/ui/App/lib/callTool.ts

@@ -1,130 +0,0 @@
-import { dbg } from './debugLog';
-
-/**
- * Server URL for direct HTTP tool calls.
- * Set from structuredContent.serverUrl when the initial tool output arrives.
- */
-let _serverUrl: string | null = null;
-
-/**
- * Send a JSON-RPC 2.0 request to the host (ChatGPT) and await the response.
- * Used for MCP Apps bridge calls that require a round-trip (e.g. ui/update-model-context).
- */
-function rpcRequest(method: string, params: unknown, timeoutMs = 10_000): Promise<unknown> {
-  return new Promise((resolve, reject) => {
-    const id = `${method}-${Date.now()}-${Math.random().toString(36).slice(2)}`
-
-    const timer = setTimeout(() => {
-      window.removeEventListener('message', onMessage)
-      reject(new Error(`rpcRequest "${method}" timed out after ${timeoutMs}ms`))
-    }, timeoutMs)
-
-    function onMessage(event: MessageEvent) {
-      if (event.source !== window.parent) return
-      const msg = event.data
-      if (!msg || msg.jsonrpc !== '2.0' || msg.id !== id) return
-      clearTimeout(timer)
-      window.removeEventListener('message', onMessage)
-      if (msg.error) reject(new Error(msg.error.message ?? JSON.stringify(msg.error)))
-      else resolve(msg.result)
-    }
-
-    window.addEventListener('message', onMessage, { passive: true })
-    window.parent.postMessage({ jsonrpc: '2.0', id, method, params }, '*')
-  })
-}
-
-/**
- * Inject text into the model's context without showing it as a visible chat message.
- * Uses the MCP Apps bridge ui/update-model-context (preferred), with ui/message as fallback.
- */
-export async function updateModelContext(text: string): Promise<void> {
-  const content = [{ type: 'text', text }]
-
-  // Primary: MCP Apps standard — invisible to user, visible to model
-  try {
-    await rpcRequest('ui/update-model-context', { content })
-    dbg.info('updateModelContext: ui/update-model-context succeeded')
-    return
-  } catch (err: any) {
-    dbg.warn('updateModelContext: ui/update-model-context failed, trying ui/message:', err.message)
-  }
-
-  // Fallback: visible user message (ui/message notification — fire and forget)
-  try {
-    window.parent.postMessage(
-      { jsonrpc: '2.0', method: 'ui/message', params: { role: 'user', content } },
-      '*',
-    )
-    dbg.info('updateModelContext: ui/message sent')
-    return
-  } catch (err: any) {
-    dbg.warn('updateModelContext: ui/message failed, trying window.openai.sendMessage:', err.message)
-  }
-
-  // Last resort: legacy ChatGPT Apps SDK
-  const openai = (window as any).openai
-  if (typeof openai?.sendMessage === 'function') {
-    openai.sendMessage(text)
-    dbg.info('updateModelContext: window.openai.sendMessage used')
-  } else {
-    dbg.error('updateModelContext: no mechanism available to update model context')
-  }
-}
-
-export function setServerUrl(url: string) {
-  _serverUrl = url.replace(/\/+$/, '');
-  dbg.info('serverUrl set to:', _serverUrl);
-}
-
-export function getServerUrl(): string | null {
-  return _serverUrl;
-}
-
-/**
- * Call a widget-accessible tool on the server via direct fetch to /mcp/widget-tool-call.
- *
- * NOTE: window.openai.callTool() is intentionally NOT used here.
- * It routes through ChatGPT's LLM which drops widget-provided args when the MCP
- * tool has no Zod inputSchema registered — args arrive as undefined on the server.
- * Direct fetch correctly forwards all args.
- */
-export async function callTool(
-  toolName: string,
-  args: Record<string, unknown> = {},
-): Promise<any> {
-  dbg.info(`callTool("${toolName}", ${JSON.stringify(args)})`);
-  dbg.info('_serverUrl:', _serverUrl);
-
-  if (!_serverUrl) {
-    const msg = 'serverUrl not set — ensure APP_SERVER env var is set and server restarted';
-    dbg.error(msg);
-    throw new Error(msg);
-  }
-
-  const endpoint = `${_serverUrl}/mcp/widget-tool-call`;
-  const body = JSON.stringify({ tool: toolName, toolArgs: args });
-  dbg.info('fetch POST', endpoint, 'body:', body);
-
-  try {
-    const res = await fetch(endpoint, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body,
-    });
-
-    const text = await res.text();
-    dbg.info('fetch response:', res.status, text.slice(0, 300));
-
-    if (!res.ok) {
-      let parsed: any = null;
-      try { parsed = JSON.parse(text); } catch { /* ignore */ }
-      throw new Error(parsed?.error || `HTTP ${res.status}: ${text}`);
-    }
-
-    return JSON.parse(text);
-  } catch (err: any) {
-    dbg.error('fetch threw:', err.message);
-    throw err;
-  }
-}

package/mcp/ui/App/lib/debugLog.ts

@@ -1,41 +0,0 @@
-export interface DebugEntry {
-  time: string
-  level: 'info' | 'warn' | 'error'
-  msg: string
-}
-
-const MAX_ENTRIES = 50;
-const entries: DebugEntry[] = [];
-const listeners = new Set<() => void>();
-
-function ts() {
-  return new Date().toISOString().slice(11, 23); // HH:MM:SS.mmm
-}
-
-function push(level: DebugEntry['level'], parts: unknown[]) {
-  const msg = parts
-    .map((p) => (typeof p === 'object' ? JSON.stringify(p) : String(p)))
-    .join(' ');
-  entries.push({ time: ts(), level, msg });
-  if (entries.length > MAX_ENTRIES) entries.shift();
-  // Mirror to real console
-  if (level === 'error') console.error('[debug]', msg);
-  else if (level === 'warn') console.warn('[debug]', msg);
-  else console.log('[debug]', msg);
-  listeners.forEach((fn) => fn());
-}
-
-export const dbg = {
-  info: (...args: unknown[]) => push('info', args),
-  warn: (...args: unknown[]) => push('warn', args),
-  error: (...args: unknown[]) => push('error', args),
-};
-
-export function getEntries(): DebugEntry[] {
-  return [...entries];
-}
-
-export function subscribe(fn: () => void): () => void {
-  listeners.add(fn);
-  return () => listeners.delete(fn);
-}

package/mcp/ui/App/lib/developerPortal.ts

@@ -1,111 +0,0 @@
-import { dbg } from './debugLog'
-
-const PORTAL_BASE = 'https://appconnect.labs.ringcentral.com/public-api'
-
-export const SUPPORTED_PLATFORMS = ['clio']
-
-export interface Connector {
-  id: string
-  name: string
-  displayName: string
-  description?: string
-  status?: 'public' | 'private'
-}
-
-/**
- * Fetch the list of available connectors directly from the developer portal.
- * Merges public connectors with private ones (if rcAccountId is provided),
- * then filters to SUPPORTED_PLATFORMS.
- */
-export async function fetchConnectors(rcAccountId?: string | null): Promise<Connector[]> {
-  dbg.info('fetchConnectors: rcAccountId=', rcAccountId ?? '(none)')
-
-  const results: Connector[] = []
-
-  // Public connectors
-  const publicUrl = `${PORTAL_BASE}/connectors`
-  dbg.info('fetchConnectors: GET', publicUrl)
-  try {
-    const resp = await fetch(publicUrl)
-    dbg.info('fetchConnectors: public response status=', resp.status, 'ok=', resp.ok)
-    if (!resp.ok) {
-      const body = await resp.text().catch(() => '(unreadable)')
-      throw new Error(`HTTP ${resp.status}: ${body.slice(0, 200)}`)
-    }
-    const data = await resp.json()
-    dbg.info('fetchConnectors: public raw keys=', Object.keys(data).join(', '))
-    const list: any[] = data?.connectors ?? data ?? []
-    results.push(...list)
-    dbg.info('fetchConnectors: public count=', list.length)
-  } catch (err: any) {
-    dbg.error('fetchConnectors: failed to fetch public connectors:', err.message, '| name=', err.name, '| url=', publicUrl)
-    throw new Error(`Failed to load connectors: ${err.message}`)
-  }
-
-  // Private connectors (only if account ID is available)
-  if (rcAccountId) {
-    const privateUrl = `${PORTAL_BASE}/connectors/internal?accountId=${encodeURIComponent(rcAccountId)}`
-    dbg.info('fetchConnectors: GET', privateUrl)
-    try {
-      const resp = await fetch(privateUrl)
-      dbg.info('fetchConnectors: private response status=', resp.status, 'ok=', resp.ok)
-      if (resp.ok) {
-        const data = await resp.json()
-        dbg.info('fetchConnectors: private raw keys=', Object.keys(data).join(', '))
-        const list: any[] = data?.privateConnectors ?? data ?? []
-        results.push(...list)
-        dbg.info('fetchConnectors: private count=', list.length)
-      } else {
-        const body = await resp.text().catch(() => '(unreadable)')
-        dbg.warn('fetchConnectors: private non-ok response:', resp.status, body.slice(0, 200))
-      }
-    } catch (err: any) {
-      dbg.warn('fetchConnectors: failed to fetch private connectors (non-fatal):', err.message, '| name=', err.name)
-    }
-  }
-
-  // Filter to supported platforms and normalise shape
-  const supported = results
-    .filter((c) => SUPPORTED_PLATFORMS.includes(c.name))
-    .map((c): Connector => ({
-      id: c.id,
-      name: c.name,
-      displayName: c.displayName,
-      description: c.description || `Connect to ${c.displayName}`,
-      status: (c.status as 'public' | 'private') ?? 'public',
-    }))
-
-  dbg.info('fetchConnectors: supported=', supported.map((c) => c.name).join(', '))
-  return supported
-}
-
-/**
- * Fetch the manifest for a specific connector directly from the developer portal.
- */
-export async function fetchManifest(
-  connectorId: string,
-  isPrivate: boolean,
-  rcAccountId?: string | null,
-): Promise<any> {
-  dbg.info('fetchManifest: connectorId=', connectorId, 'isPrivate=', isPrivate)
-
-  const url = isPrivate && rcAccountId
-    ? `${PORTAL_BASE}/connectors/${connectorId}/manifest?access=internal&type=connector&accountId=${encodeURIComponent(rcAccountId)}`
-    : `${PORTAL_BASE}/connectors/${connectorId}/manifest`
-
-  dbg.info('fetchManifest: GET', url)
-  try {
-    const resp = await fetch(url)
-    dbg.info('fetchManifest: response status=', resp.status, 'ok=', resp.ok)
-    if (!resp.ok) {
-      const body = await resp.text().catch(() => '(unreadable)')
-      throw new Error(`HTTP ${resp.status}: ${body.slice(0, 200)}`)
-    }
-    const manifest = await resp.json()
-    dbg.info('fetchManifest: loaded platforms=', Object.keys(manifest?.platforms ?? {}).join(', '))
-    return manifest
-  } catch (err: any) {
-    dbg.error('fetchManifest: failed:', err.message, '| name=', err.name, '| url=', url)
-    throw err
-  }
-}

package/mcp/ui/App/main.css

@@ -1,6 +0,0 @@
-@import "tailwindcss";
-@import "@openai/apps-sdk-ui/css";
-/* Required for Tailwind to find class references in Apps SDK UI components. */
-@source "../../../node_modules/@openai/apps-sdk-ui";
-
-/* The rest of your application CSS */

package/mcp/ui/App/root.tsx

@@ -1,13 +0,0 @@
-// Must be imported first to ensure Tailwind layers and style foundations are defined before any potential component styles
-import "./main.css"
-
-import { StrictMode } from "react"
-import { createRoot } from "react-dom/client"
-import { App } from "./App"
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
-