@app-connect/core 1.7.18 → 1.7.19

package/mcp/ui/App/App.tsx

@@ -0,0 +1,361 @@
+import { useState, useEffect, useCallback } from 'react'
+import { ConnectorList, type Connector } from './components/ConnectorList'
+import { AuthInfoForm } from './components/AuthInfoForm'
+import { OAuthConnect } from './components/OAuthConnect'
+import { AuthSuccess } from './components/AuthSuccess'
+import { setServerUrl } from './lib/callTool'
+import { fetchConnectors, fetchManifest } from './lib/developerPortal'
+import { dbg } from './lib/debugLog'
+import { DebugPanel } from './components/DebugPanel'
+
+// Initial structuredContent from getPublicConnectors — serverUrl, rcAccountId, rcExtensionId, openaiSessionId
+interface ToolOutput {
+  serverUrl?: string
+  rcAccountId?: string | null
+  rcExtensionId?: string | null
+  openaiSessionId?: string | null
+  error?: boolean
+  errorMessage?: string
+}
+
+type Step = 'loadingConnectors' | 'select' | 'loading' | 'authInfo' | 'oauth' | 'success' | 'error'
+
+interface FlowState {
+  connectorManifest: any | null
+  connectorName: string | null
+  connectorDisplayName: string | null
+  hostname: string
+  userInfo: any | null
+}
+
+const INITIAL_FLOW_STATE: FlowState = {
+  connectorManifest: null,
+  connectorName: null,
+  connectorDisplayName: null,
+  hostname: '',
+  userInfo: null,
+}
+
+/**
+ * Extract and apply serverUrl from tool output as early as possible.
+ * Must be called synchronously so it's set before any tool calls.
+ */
+function applyServerUrl(output: ToolOutput | null) {
+  dbg.info('applyServerUrl: received output keys:', output ? Object.keys(output).join(', ') : 'null');
+  dbg.info('applyServerUrl: serverUrl =', output?.serverUrl ?? '(none)');
+  if (output?.serverUrl) {
+    setServerUrl(output.serverUrl);
+  }
+  return output;
+}
+
+/**
+ * Hook to receive the initial tool output (serverUrl + rcAccountId).
+ *
+ * Listens via three mechanisms per the ChatGPT Apps SDK docs:
+ *  1. window.openai.toolOutput — synchronous read on mount
+ *  2. openai:set_globals event — ChatGPT pushes globals into the iframe
+ *  3. ui/notifications/tool-result postMessage — MCP Apps bridge notification
+ *  4. Polling window.openai.toolOutput — fallback for async population
+ */
+function useToolResult() {
+  const [toolResult, setToolResult] = useState<ToolOutput | null>(() => {
+    const openai = (window as any).openai
+    dbg.info('init: window.openai exists?', !!openai);
+    dbg.info('init: window.openai.toolOutput?', JSON.stringify(openai?.toolOutput)?.slice(0, 200) ?? 'null');
+    const output = openai?.toolOutput
+    if (output && Object.keys(output).length > 0) {
+      return applyServerUrl(output)
+    }
+    return null
+  })
+
+  useEffect(() => {
+    if (toolResult) return
+
+    // MCP Apps bridge: tool-result notification
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== window.parent) return
+      const message = event.data
+      if (!message || message.jsonrpc !== '2.0') return
+      if (message.method !== 'ui/notifications/tool-result') return
+      const payload = message.params?.structuredContent ?? message.params ?? null
+      if (payload) setToolResult(applyServerUrl(payload))
+    }
+    window.addEventListener('message', onMessage, { passive: true })
+
+    // ChatGPT extension: openai:set_globals event
+    const onSetGlobals = (event: Event) => {
+      const detail = (event as CustomEvent).detail
+      const output = detail?.globals?.toolOutput ?? (window as any).openai?.toolOutput
+      if (output && Object.keys(output).length > 0) {
+        setToolResult(applyServerUrl(output))
+      }
+    }
+    window.addEventListener('openai:set_globals', onSetGlobals, { passive: true })
+
+    // Fallback: poll window.openai.toolOutput for async population
+    const interval = setInterval(() => {
+      const output = (window as any).openai?.toolOutput
+      if (output && Object.keys(output).length > 0) {
+        setToolResult(applyServerUrl(output))
+        clearInterval(interval)
+      }
+    }, 100)
+
+    return () => {
+      window.removeEventListener('message', onMessage)
+      window.removeEventListener('openai:set_globals', onSetGlobals)
+      clearInterval(interval)
+    }
+  }, [toolResult])
+
+  return toolResult
+}
+
+export function App() {
+  const data = useToolResult()
+  const [step, setStep] = useState<Step>('loadingConnectors')
+  const [connectors, setConnectors] = useState<Connector[]>([])
+  const [flow, setFlow] = useState<FlowState>(INITIAL_FLOW_STATE)
+  const [errorMsg, setErrorMsg] = useState<string | null>(null)
+
+  // Fetch connector list from developer portal once serverUrl (and optionally rcAccountId) is known
+  useEffect(() => {
+    if (!data || data.error) return
+
+    async function loadConnectors() {
+      try {
+        dbg.info('loadConnectors: fetching with rcAccountId=', data!.rcAccountId ?? '(none)')
+        const list = await fetchConnectors(data!.rcAccountId)
+        setConnectors(list)
+        setStep('select')
+      } catch (err: any) {
+        dbg.error('loadConnectors failed:', err.message)
+        setStep('error')
+        setErrorMsg(err.message || 'Failed to load connectors')
+      }
+    }
+
+    loadConnectors()
+  }, [data])
+
+  const resetToSelect = useCallback(() => {
+    setStep('select')
+    setFlow(INITIAL_FLOW_STATE)
+    setErrorMsg(null)
+  }, [])
+
+  const handleConnectorSelect = useCallback(async (connector: Connector) => {
+    dbg.info('connector selected:', JSON.stringify(connector))
+    setStep('loading')
+    setErrorMsg(null)
+
+    try {
+      const manifest = await fetchManifest(
+        connector.id,
+        connector.status === 'private',
+        data?.rcAccountId,
+      )
+
+      if (!manifest) {
+        setStep('error')
+        setErrorMsg('Failed to load connector configuration')
+        return
+      }
+
+      const connectorName = connector.name
+      const platform = manifest?.platforms?.[connectorName]
+
+      if (!platform) {
+        setStep('error')
+        setErrorMsg('Invalid connector configuration')
+        return
+      }
+
+      setFlow((prev) => ({
+        ...prev,
+        connectorManifest: manifest,
+        connectorName,
+        connectorDisplayName: connector.displayName,
+      }))
+
+      const envType = platform.environment?.type
+      const authType = platform.auth?.type
+
+      // For oauth with dynamic/selectable environments, collect auth info first
+      if (authType === 'oauth' && (envType === 'dynamic' || envType === 'selectable')) {
+        setStep('authInfo')
+        return
+      }
+
+      // For fixed environments, extract hostname from the fixed URL
+      if (envType === 'fixed' && platform.environment?.url) {
+        try {
+          const url = new URL(platform.environment.url)
+          setFlow((prev) => ({ ...prev, hostname: url.hostname }))
+        } catch {
+          // hostname stays empty
+        }
+      }
+
+      setStep('oauth')
+    } catch (err: any) {
+      setStep('error')
+      setErrorMsg(err.message || 'Failed to load connector')
+    }
+  }, [data?.rcAccountId])
+
+  const handleAuthInfoSubmit = useCallback(
+    (value: { hostname?: string; selection?: string }) => {
+      try {
+        const platform = flow.connectorManifest?.platforms?.[flow.connectorName!]
+        const envType = platform?.environment?.type
+        let resolvedHostname = ''
+
+        if (envType === 'dynamic' && value.hostname) {
+          resolvedHostname = new URL(value.hostname).hostname
+        } else if (envType === 'selectable' && value.selection) {
+          const sel = platform.environment.selections?.find(
+            (s: { name: string; const: string }) => s.name === value.selection,
+          )
+          if (sel?.const) {
+            resolvedHostname = new URL(sel.const).hostname
+          }
+        }
+
+        setFlow((prev) => ({ ...prev, hostname: resolvedHostname }))
+        setStep('oauth')
+      } catch (err: any) {
+        setStep('error')
+        setErrorMsg(err.message || 'Failed to process environment selection')
+      }
+    },
+    [flow.connectorManifest, flow.connectorName],
+  )
+
+  const handleAuthSuccess = useCallback(
+    (authData: { jwtToken?: string; userInfo?: any }) => {
+      setFlow((prev) => ({ ...prev, userInfo: authData.userInfo ?? null }))
+      setStep('success')
+    },
+    [],
+  )
+
+  const handleAuthError = useCallback(
+    (error: string) => {
+      if (error === 'retry') {
+        setStep('oauth')
+        return
+      }
+      setStep('error')
+      setErrorMsg(error)
+    },
+    [],
+  )
+
+  // Waiting for initial tool output from ChatGPT
+  if (!data) {
+    return (
+      <div className="flex items-center justify-center min-h-[150px] p-4">
+        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary" />
+      </div>
+    )
+  }
+
+  // Error from initial tool call
+  if (data.error) {
+    return (
+      <div className="p-4">
+        <div className="rounded-lg border border-red-200 bg-red-50 p-4">
+          <p className="text-red-700">{data.errorMessage || 'An error occurred'}</p>
+        </div>
+        <DebugPanel />
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4">
+      {step === 'loadingConnectors' && (
+        <div className="flex items-center justify-center min-h-[150px]">
+          <div className="text-center space-y-3">
+            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mx-auto" />
+            <p className="text-sm text-secondary">Loading connectors...</p>
+          </div>
+        </div>
+      )}
+
+      {step === 'select' && (
+        <ConnectorList connectors={connectors} onSelect={handleConnectorSelect} />
+      )}
+
+      {step === 'loading' && (
+        <div className="flex items-center justify-center min-h-[150px]">
+          <div className="text-center space-y-3">
+            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mx-auto" />
+            <p className="text-sm text-secondary">Loading...</p>
+          </div>
+        </div>
+      )}
+
+      {step === 'authInfo' && flow.connectorManifest && flow.connectorName && (
+        <AuthInfoForm
+          environmentType={
+            flow.connectorManifest.platforms[flow.connectorName].environment.type
+          }
+          urlIdentifier={
+            flow.connectorManifest.platforms[flow.connectorName].environment.urlIdentifier
+          }
+          instructions={
+            flow.connectorManifest.platforms[flow.connectorName].environment.instructions
+          }
+          selections={
+            flow.connectorManifest.platforms[flow.connectorName].environment.selections
+          }
+          connectorDisplayName={flow.connectorDisplayName!}
+          onSubmit={handleAuthInfoSubmit}
+          onBack={resetToSelect}
+        />
+      )}
+
+      {step === 'oauth' && flow.connectorManifest && flow.connectorName && (
+        <OAuthConnect
+          connectorManifest={flow.connectorManifest}
+          connectorName={flow.connectorName}
+          connectorDisplayName={flow.connectorDisplayName!}
+          hostname={flow.hostname}
+          openaiSessionId={data?.openaiSessionId ?? null}
+          rcExtensionId={data?.rcExtensionId ?? null}
+          onSuccess={handleAuthSuccess}
+          onError={handleAuthError}
+          onBack={resetToSelect}
+        />
+      )}
+
+      {step === 'success' && (
+        <AuthSuccess
+          connectorDisplayName={flow.connectorDisplayName!}
+          userInfo={flow.userInfo ?? undefined}
+        />
+      )}
+
+      {step === 'error' && (
+        <div className="w-full max-w-md">
+          <div className="rounded-lg border border-red-200 bg-red-50 p-4 mb-4">
+            <p className="text-red-700 text-sm font-semibold">Error</p>
+            <p className="text-red-700 text-sm mt-1">{errorMsg || 'An error occurred'}</p>
+          </div>
+          <button
+            type="button"
+            onClick={resetToSelect}
+            className="text-sm text-primary hover:underline cursor-pointer"
+          >
+            &larr; Back to connector list
+          </button>
+          <DebugPanel />
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,113 @@
+import { useState } from 'react'
+import { Button } from '@openai/apps-sdk-ui/components/Button'
+import { Input } from '@openai/apps-sdk-ui/components/Input'
+
+interface Selection {
+  name: string
+  const: string
+}
+
+interface AuthInfoFormProps {
+  environmentType: 'dynamic' | 'selectable'
+  urlIdentifier?: string
+  instructions?: string
+  selections?: Selection[]
+  connectorDisplayName: string
+  onSubmit: (value: { hostname?: string; selection?: string }) => void
+  onBack: () => void
+}
+
+export function AuthInfoForm({
+  environmentType,
+  urlIdentifier,
+  instructions,
+  selections,
+  connectorDisplayName,
+  onSubmit,
+  onBack,
+}: AuthInfoFormProps) {
+  const [hostname, setHostname] = useState('')
+  const [selectedName, setSelectedName] = useState<string | null>(null)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (environmentType === 'dynamic') {
+      onSubmit({ hostname })
+    } else if (selectedName) {
+      onSubmit({ selection: selectedName })
+    }
+  }
+
+  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">Connect to {connectorDisplayName}</h2>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {environmentType === 'dynamic' && (
+          <div className="space-y-2">
+            <p className="text-secondary text-sm">
+              {instructions || `Enter your ${connectorDisplayName} hostname`}
+            </p>
+            {urlIdentifier && (
+              <p className="text-xs text-secondary opacity-70">
+                Example: {urlIdentifier}
+              </p>
+            )}
+            <Input
+              type="url"
+              value={hostname}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setHostname(e.target.value)}
+              placeholder="https://your-instance.example.com"
+              size="md"
+            />
+          </div>
+        )}
+
+        {environmentType === 'selectable' && selections && (
+          <div className="space-y-2">
+            <p className="text-secondary text-sm">
+              Select your {connectorDisplayName} environment
+            </p>
+            <div className="space-y-2">
+              {selections.map((sel) => (
+                <button
+                  key={sel.name}
+                  type="button"
+                  onClick={() => setSelectedName(sel.name)}
+                  className={`w-full text-left rounded-xl border p-3 transition-colors cursor-pointer ${
+                    selectedName === sel.name
+                      ? 'border-primary bg-surface-hover'
+                      : 'border-default bg-surface hover:border-primary'
+                  }`}
+                >
+                  <span className="font-medium text-sm">{sel.name}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <Button
+          type="submit"
+          color="primary"
+          size="md"
+          disabled={
+            (environmentType === 'dynamic' && !hostname.trim()) ||
+            (environmentType === 'selectable' && !selectedName)
+          }
+        >
+          Continue
+        </Button>
+      </form>
+    </div>
+  )
+}

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

@@ -0,0 +1,22 @@
+interface AuthSuccessProps {
+  connectorDisplayName: string
+  userInfo?: { id?: string; name?: string }
+}
+
+export function AuthSuccess({ connectorDisplayName, userInfo }: AuthSuccessProps) {
+  return (
+    <div className="w-full max-w-md">
+      <div className="rounded-xl border border-green-200 bg-green-50 p-5 text-center space-y-2">
+        <div className="text-2xl text-green-700">&#10003;</div>
+        <h2 className="heading-lg text-green-800">Connected</h2>
+        <p className="text-sm text-green-700">
+          Successfully connected to <strong>{connectorDisplayName}</strong>
+          {userInfo?.name ? ` as ${userInfo.name}` : ''}.
+        </p>
+        <p className="text-xs text-green-600 mt-2">
+          You can now use the AI assistant to interact with your CRM.
+        </p>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,82 @@
+import { useState } from 'react'
+import { Button } from "@openai/apps-sdk-ui/components/Button"
+import { Badge } from "@openai/apps-sdk-ui/components/Badge"
+
+export interface Connector {
+  id: string
+  name: string
+  displayName: string
+  description?: string
+  status?: 'public' | 'private'
+}
+
+interface ConnectorListProps {
+  connectors: Connector[]
+  disabled?: boolean
+  onSelect: (connector: Connector) => void
+}
+
+export function ConnectorList({ connectors, disabled, onSelect }: ConnectorListProps) {
+  const [selectedName, setSelectedName] = useState<string | null>(null)
+
+  if (!connectors || connectors.length === 0) {
+    return (
+      <div className="p-4 text-center text-secondary">
+        <p>No connectors available</p>
+      </div>
+    )
+  }
+
+  const handleSelect = (connector: Connector) => {
+    setSelectedName(connector.displayName)
+    onSelect(connector)
+  }
+
+  return (
+    <div className="w-full max-w-md">
+      <div className="mb-4">
+        <h2 className="heading-lg">Available Connectors</h2>
+        <p className="text-secondary text-sm mt-1">
+          Select a CRM to connect with RingCentral
+        </p>
+      </div>
+      
+      <div className="space-y-3">
+        {connectors.map((connector) => {
+          const isSelected = selectedName === connector.displayName
+          return (
+            <div
+              key={connector.displayName}
+              className="rounded-xl border border-default bg-surface p-4 hover:border-primary transition-colors"
+            >
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-medium">{connector.displayName}</h3>
+                    {connector.status === 'private' && (
+                      <Badge color="secondary" size="sm">Private</Badge>
+                    )}
+                  </div>
+                  {connector.description && (
+                    <p className="text-secondary text-sm mt-1">
+                      {connector.description}
+                    </p>
+                  )}
+                </div>
+                <Button
+                  color={isSelected ? 'secondary' : 'primary'}
+                  size="sm"
+                  onClick={() => handleSelect(connector)}
+                  disabled={disabled || isSelected}
+                >
+                  {isSelected ? 'Connecting...' : 'Connect'}
+                </Button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react'
+import { getEntries, subscribe, type DebugEntry } from '../lib/debugLog'
+
+const LEVEL_STYLE: Record<DebugEntry['level'], string> = {
+  info: 'text-blue-700',
+  warn: 'text-yellow-700',
+  error: 'text-red-700 font-semibold',
+}
+
+export function DebugPanel() {
+  const [entries, setEntries] = useState(getEntries)
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => subscribe(() => setEntries(getEntries())), [])
+
+  return (
+    <div className="mt-4 border border-default rounded-lg overflow-hidden text-xs">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center justify-between px-3 py-2 bg-surface hover:bg-surface-hover cursor-pointer text-secondary"
+      >
+        <span>Debug log ({entries.length} entries)</span>
+        <span>{open ? '▲' : '▼'}</span>
+      </button>
+
+      {open && (
+        <div className="max-h-60 overflow-y-auto bg-black/5 p-2 space-y-0.5 font-mono">
+          {entries.length === 0 && (
+            <p className="text-secondary italic">No entries yet.</p>
+          )}
+          {entries.map((e, i) => (
+            <div key={i} className={`${LEVEL_STYLE[e.level]} leading-tight`}>
+              <span className="opacity-50 mr-1">{e.time}</span>
+              <span>[{e.level}]</span>{' '}
+              <span className="break-all">{e.msg}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}