@app-connect/core 1.7.24 → 1.7.26

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

@@ -1,113 +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>
-  )
-}
+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

@@ -1,22 +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>
-  )
-}
+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

@@ -1,82 +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>
-  )
-}
-
+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

@@ -1,43 +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>
-  )
-}
+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>
+  )
+}