@app-connect/core 1.7.18 → 1.7.19

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

@@ -0,0 +1,270 @@
+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

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,111 @@
+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?type=internal&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

@@ -0,0 +1,6 @@
+@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

@@ -0,0 +1,13 @@
+// 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>,
+)
+