@opengeni/react 3.3.2 → 3.4.0

package/src/composer-voice-events.ts

@@ -0,0 +1,12 @@
+/**
+ * Internal DOM signal between the composer's two voice controls: dictation
+ * starting supersedes a stale live-voice start failure in the same composer.
+ * Not part of the public package surface.
+ */
+export const COMPOSER_VOICE_INPUT_START_EVENT = "opengeni:composer-voice-input-start";
+
+/** Closest composer root shared by both voice controls (falls back to the document). */
+export function composerVoiceEventScope(element: Element | null): EventTarget | null {
+  if (!element) return null;
+  return element.closest(".og-composer") ?? element.ownerDocument;
+}

package/src/composer.ts

@@ -7,7 +7,6 @@ export { OPEN_WORKSTREAM_CONTROL_EVENT } from "./workstream-control-event";
 export {
   BillingClassMark,
   ModelPolicyPicker,
-  ModelPolicyPickerMenu,
   PickerAnimatedPage,
   PickerBackHeader,
   PickerNavRow,
@@ -16,6 +15,7 @@ export {
 export type {
   ModelPolicyPickerMessages,
   ModelPolicyPickerProps,
+  ModelPolicyPickerGroupPresentation,
 } from "./components/model-policy-picker";
 export {
   Actions,
@@ -36,6 +36,7 @@ export {
   Root,
   SendButton,
   Status,
+  StopButton,
   Surface,
   defaultChatComposerMessages,
   useChatComposer,
@@ -60,7 +61,9 @@ export type {
   ComposerModelPickerProps,
   ComposerPauseButtonProps,
   ComposerRootProps,
+  ComposerRunControl,
   ComposerSendButtonProps,
+  ComposerStopButtonProps,
   ComposerSubmitBlocker,
   ComposerSubmitMode,
   ComposerSurfaceProps,
@@ -109,3 +112,5 @@ export type {
   VoiceRecordingTranscriptionState,
   VoiceRecordingUploadState,
 } from "./voice-recording-store";
+
+export { ModelPolicyPickerMenu } from "./components/model-policy-picker-menu";

package/src/connect-account-identity.tsx

@@ -0,0 +1,34 @@
+import type { ConnectAccount } from "@opengeni/connect";
+import type { CapabilityCatalogItem, OpenGeniClient } from "@opengeni/sdk";
+import { ConnectionServiceLogo } from "./connection-service-logo";
+import {
+  accountServiceCapability,
+  connectionServicePresentation,
+} from "./connection-service-presentation";
+
+/** Service presentation never changes which exact credential is acted on. */
+export function ConnectAccountIdentity({
+  account,
+  client,
+  capabilities,
+}: {
+  account: ConnectAccount;
+  client?: OpenGeniClient | undefined;
+  capabilities: CapabilityCatalogItem[];
+}) {
+  const item = accountServiceCapability(account, capabilities);
+  const service = connectionServicePresentation({ id: account.providerId, label: account.label });
+  const name = item?.name ?? service.name;
+  return (
+    <>
+      <ConnectionServiceLogo client={client} item={item} name={name} fallback={service.logo} />
+      <div>
+        <strong>{name}</strong>
+        <small>
+          {account.ownership === "personal" ? "Only you" : "Workspace connection"}
+          {name !== account.label ? ` · ${account.label}` : ""}
+        </small>
+      </div>
+    </>
+  );
+}

package/src/connect-accounts.tsx

@@ -0,0 +1,233 @@
+import { useEffect, useRef, useState } from "react";
+import type { ConnectAccount, ConnectController } from "@opengeni/connect";
+import { useConnect } from "./hooks/use-connect";
+import { ConnectAccountIdentity } from "./connect-account-identity";
+import { ConnectionSkeleton } from "./connection-skeleton";
+import type { CapabilityCatalogItem, OpenGeniClient } from "@opengeni/sdk";
+
+export type ConnectAccountsProps = {
+  controller: ConnectController;
+  className?: string;
+  /** Enables explicit account-bound reconnect. Host supplies the exact destination. */
+  returnUrl?: string;
+  /** Uses authenticated catalogue assets and exact connection references for service identity. */
+  client?: OpenGeniClient | undefined;
+  /** Reconcile surrounding service state after a confirmed account disconnect. */
+  onDisconnected?: (() => void) | undefined;
+};
+
+/** Local credential revocation only. Unknown or changed versions must be
+ * refreshed; this component never retries a destructive operation implicitly. */
+export function ConnectAccounts(props: ConnectAccountsProps) {
+  const [scope, setScope] = useState(props.controller);
+  const [generation, setGeneration] = useState(0);
+  if (scope !== props.controller) {
+    setScope(props.controller);
+    setGeneration(generation + 1);
+  }
+  return <ScopedAccounts key={generation} {...props} />;
+}
+
+function ScopedAccounts({
+  controller,
+  className,
+  returnUrl,
+  client,
+  onDisconnected,
+}: ConnectAccountsProps) {
+  const view = useConnect(controller);
+  const [accounts, setAccounts] = useState<ConnectAccount[] | null>(null);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(false);
+  const [reload, setReload] = useState(0);
+  const [catalog, setCatalog] = useState<{
+    client: OpenGeniClient;
+    items: CapabilityCatalogItem[];
+  } | null>(null);
+  const mutation = useRef<AbortController | null>(null);
+  useEffect(() => () => mutation.current?.abort(), []);
+  useEffect(() => {
+    const abort = new AbortController();
+    setAccounts(null);
+    setCatalog(null);
+    setSelected(null);
+    setError(false);
+    void Promise.resolve()
+      .then(() => {
+        abort.signal.throwIfAborted();
+        return Promise.all([
+          controller.transport.accounts(controller.workspaceId, { signal: abort.signal }),
+          client?.listCapabilities(controller.workspaceId).catch(() => null) ?? null,
+        ]);
+      })
+      .then(([result, metadata]) => {
+        if (!abort.signal.aborted) {
+          setAccounts(structuredClone(result.filter((account) => account.status !== "disabled")));
+          if (client && metadata) setCatalog({ client, items: metadata.items });
+        }
+      })
+      .catch(() => {
+        if (!abort.signal.aborted) setError(true);
+      });
+    return () => abort.abort();
+  }, [client, controller, reload]);
+
+  const disconnect = async (account: ConnectAccount) => {
+    const expectedVersion = account.version;
+    if (
+      mutation.current ||
+      view.busy ||
+      expectedVersion === undefined ||
+      !Number.isSafeInteger(expectedVersion) ||
+      expectedVersion < 1
+    )
+      return;
+    const abort = new AbortController();
+    mutation.current = abort;
+    setBusy(true);
+    setError(false);
+    try {
+      await controller.transport.disconnect(controller.workspaceId, account.id, {
+        expectedVersion,
+        signal: abort.signal,
+      });
+      if (!abort.signal.aborted) {
+        setReload((value) => value + 1);
+        onDisconnected?.();
+      }
+    } catch {
+      if (!abort.signal.aborted) {
+        // Outcome may be unknown. Drop the inventory so a second click cannot
+        // replay against the stale selection; let the host reload live state.
+        setAccounts(null);
+        setError(true);
+      }
+    } finally {
+      if (!abort.signal.aborted) {
+        mutation.current = null;
+        setBusy(false);
+        setSelected(null);
+      }
+    }
+  };
+  const reconnect = async (account: ConnectAccount) => {
+    if (!returnUrl || mutation.current || view.busy) return;
+    setError(false);
+    try {
+      await controller.begin({
+        providerId: account.providerId,
+        ownership: account.ownership,
+        reconnectAccountId: account.id,
+        returnUrl,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    } catch {
+      setError(true);
+    }
+  };
+
+  return (
+    <section
+      className={className}
+      aria-label="Connected accounts"
+      aria-busy={busy || view.busy || (!accounts && !error)}
+    >
+      <h3>Your connections</h3>
+      {error && (
+        <p role="alert">Account state could not be confirmed. Reload before trying again.</p>
+      )}
+      {!accounts && !error && <ConnectionSkeleton label="Loading accounts" />}
+      {accounts?.length === 0 && <p role="status">No connected accounts.</p>}
+      {accounts && accounts.length > 0 && (
+        <ul>
+          {accounts.map((account) => (
+            <li className="og-connect-account" key={`${account.providerId}:${account.id}`}>
+              <details className="og-connect-account-details">
+                <summary className="og-connect-account-heading">
+                  <ConnectAccountIdentity
+                    account={account}
+                    client={client}
+                    capabilities={catalog?.client === client ? (catalog?.items ?? []) : []}
+                  />
+                  <span className="og-connect-account-status" data-status={account.status}>
+                    {account.status === "connected"
+                      ? "✓ Connected"
+                      : account.status === "auth_needed"
+                        ? "Reconnect needed"
+                        : "Disconnected"}
+                  </span>
+                  <svg
+                    className="og-connect-account-chevron"
+                    aria-hidden="true"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                  >
+                    <path d="m9 6 6 6-6 6" />
+                  </svg>
+                </summary>
+                <div className="og-connect-account-actions">
+                  {returnUrl && account.status === "auth_needed" && (
+                    <button
+                      type="button"
+                      aria-label={`Reconnect ${account.label}`}
+                      disabled={busy || view.busy}
+                      onClick={() => void reconnect(account)}
+                    >
+                      Reconnect
+                    </button>
+                  )}
+                  {selected === `${account.providerId}:${account.id}` ? (
+                    <div role="group" aria-label={`Disconnect ${account.label}`}>
+                      <p>
+                        This removes local Opengeni access. It does not revoke consent at the
+                        provider.
+                      </p>
+                      <button
+                        type="button"
+                        disabled={busy || view.busy}
+                        onClick={() => void disconnect(account)}
+                      >
+                        Confirm disconnect
+                      </button>
+                      <button type="button" disabled={busy} onClick={() => setSelected(null)}>
+                        Keep account
+                      </button>
+                    </div>
+                  ) : (
+                    <button
+                      type="button"
+                      aria-label={`Disconnect ${account.label}`}
+                      disabled={
+                        busy ||
+                        view.busy ||
+                        account.status === "disabled" ||
+                        !Number.isSafeInteger(account.version) ||
+                        account.version! < 1
+                      }
+                      onClick={() => setSelected(`${account.providerId}:${account.id}`)}
+                    >
+                      Disconnect
+                    </button>
+                  )}
+                </div>
+              </details>
+            </li>
+          ))}
+        </ul>
+      )}
+      <button
+        hidden={!error}
+        type="button"
+        disabled={busy}
+        onClick={() => setReload((value) => value + 1)}
+      >
+        Reload accounts
+      </button>
+    </section>
+  );
+}

package/src/connect-chooser.tsx

@@ -0,0 +1,336 @@
+import { connectionServicePresentation } from "./connection-service-presentation";
+import { ConnectionCatalog } from "./connection-catalog";
+import { ConnectionLogo } from "./connection-logo";
+import { useEffect, useState, type FormEvent } from "react";
+import type { ConnectAccount, ConnectController, ConnectProvider } from "@opengeni/connect";
+import { useConnect } from "./hooks/use-connect";
+
+export type ConnectChooserProps = {
+  controller: ConnectController;
+  /** Exact host return string; no completion parameters are added. */
+  returnUrl: string;
+  className?: string;
+  presentation?: "select" | "catalog";
+  /** Compact mechanism picker when service discovery is already shown by the host. */
+  customOnly?: boolean;
+  providerOnly?: boolean;
+  compact?: boolean;
+  /** Select a service from the unified discovery list. */
+  initialProviderId?: string;
+};
+
+/** Catalog readiness is supplied by the authenticated backend, never inferred
+ * from the existence of a provider definition. Host replaces the controller on
+ * actor/workspace change. This form does not open OAuth windows itself. */
+export function ConnectChooser(props: ConnectChooserProps) {
+  // Remount scope-local selections synchronously when the controller changes,
+  // before effects can expose a previous actor's inventory for one frame.
+  const [scope, setScope] = useState(props.controller);
+  const [generation, setGeneration] = useState(0);
+  if (scope !== props.controller) {
+    setScope(props.controller);
+    setGeneration(generation + 1);
+  }
+  return <ScopedChooser key={generation} {...props} />;
+}
+
+function ScopedChooser({
+  controller,
+  returnUrl,
+  className,
+  presentation = "select",
+  customOnly = false,
+  providerOnly = false,
+  compact = false,
+  initialProviderId = "",
+}: ConnectChooserProps) {
+  const view = useConnect(controller);
+  const [catalog, setCatalog] = useState<ConnectProvider[] | null>(null);
+  const [accounts, setAccounts] = useState<ConnectAccount[]>([]);
+  const [failed, setFailed] = useState(false);
+  const [load, setLoad] = useState(0);
+  const [query, setQuery] = useState("");
+  const [providerId, setProviderId] = useState(initialProviderId);
+  const [ownership, setOwnership] = useState("");
+  useEffect(() => {
+    const abort = new AbortController();
+    setCatalog(null);
+    setAccounts([]);
+    setFailed(false);
+    setProviderId(initialProviderId);
+    setOwnership("");
+    // Promise boundary also handles a synchronously throwing injected transport.
+    void Promise.resolve()
+      .then(() => {
+        abort.signal.throwIfAborted();
+        return Promise.all([
+          controller.transport.catalog(controller.workspaceId, { signal: abort.signal }),
+          presentation === "catalog"
+            ? controller.transport.accounts(controller.workspaceId, { signal: abort.signal })
+            : Promise.resolve([] as ConnectAccount[]),
+        ]);
+      })
+      .then(([providers, inventory]) => {
+        if (!abort.signal.aborted) {
+          setCatalog(
+            structuredClone(
+              providers.filter(
+                (entry) =>
+                  entry.readiness === "available" &&
+                  entry.ownership.length > 0 &&
+                  (!providerOnly ||
+                    (entry.family !== "mcp" &&
+                      !entry.setup.some((kind) =>
+                        ["installation", "openapi", "graphql"].includes(kind),
+                      ))) &&
+                  (!customOnly ||
+                    entry.family === "mcp" ||
+                    entry.setup.some((kind) =>
+                      ["installation", "openapi", "graphql"].includes(kind),
+                    )),
+              ),
+            ),
+          );
+          setAccounts(structuredClone(inventory));
+          const initial = providers.find((entry) => entry.id === initialProviderId);
+          if (initial)
+            setOwnership(
+              initial.ownership.includes("personal") &&
+                ["google", "microsoft"].includes(initial.family)
+                ? "personal"
+                : initial.ownership.includes("workspace")
+                  ? "workspace"
+                  : (initial.ownership[0] ?? ""),
+            );
+        }
+      })
+      .catch(() => {
+        if (!abort.signal.aborted) setFailed(true);
+      });
+    return () => abort.abort();
+  }, [controller, load, presentation, customOnly, providerOnly, initialProviderId]);
+  const provider = catalog?.find((entry) => entry.id === providerId);
+  const canBegin =
+    provider?.readiness === "available" &&
+    (ownership === "personal" || ownership === "workspace") &&
+    provider.ownership.includes(ownership);
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (!canBegin || view.busy || (ownership !== "personal" && ownership !== "workspace")) return;
+    setFailed(false);
+    try {
+      void controller
+        .begin({ providerId, ownership, returnUrl, idempotencyKey: crypto.randomUUID() })
+        .catch(() => setFailed(true));
+    } catch {
+      setFailed(true);
+    }
+  };
+  // Optional adapters must not add a temporary section that disappears once
+  // readiness arrives. The primary discovery surface already owns loading.
+  if (compact && (!catalog || catalog.length === 0) && !failed) return null;
+  return (
+    <section
+      className={className}
+      aria-label="Choose a connection"
+      aria-busy={view.busy || (!catalog && !failed)}
+    >
+      {failed && (
+        <p role="alert">
+          Connections could not be loaded or started. Check setup status before retrying.
+        </p>
+      )}
+      {!catalog && !failed && <p role="status">Loading connections…</p>}
+      {catalog?.length === 0 && <p role="status">No connections are available.</p>}
+      {Boolean(catalog?.length) && (
+        <form onSubmit={submit}>
+          <fieldset disabled={view.busy}>
+            <legend hidden={customOnly || compact}>
+              {presentation === "catalog" ? "Add a connection" : "Provider and ownership"}
+            </legend>
+            {presentation === "catalog" && !provider ? (
+              <>
+                <label hidden={customOnly || compact}>
+                  Search connections
+                  <input
+                    type="search"
+                    placeholder="Find a service…"
+                    value={query}
+                    onChange={(event) => setQuery(event.target.value)}
+                  />
+                </label>
+                {[
+                  {
+                    name: "Services",
+                    entries: catalog!.filter(
+                      (entry) =>
+                        entry.readiness === "available" &&
+                        entry.family !== "mcp" &&
+                        !entry.setup.some((kind) =>
+                          ["installation", "openapi", "graphql"].includes(kind),
+                        ),
+                    ),
+                    secondary: false,
+                  },
+                  {
+                    name: "Custom connections",
+                    entries: catalog!.filter(
+                      (entry) =>
+                        entry.readiness === "available" &&
+                        (entry.family === "mcp" ||
+                          entry.setup.some((kind) =>
+                            ["installation", "openapi", "graphql"].includes(kind),
+                          )),
+                    ),
+                    secondary: true,
+                  },
+                ].map((group) => {
+                  const entries = group.entries.filter((entry) =>
+                    entry.label.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim()),
+                  );
+                  if (!entries.length) return null;
+                  const rows = (
+                    <ConnectionCatalog
+                      services={entries.map((entry) => {
+                        const connected = accounts.some(
+                          (account) =>
+                            account.providerId === entry.id && account.status === "connected",
+                        );
+                        return {
+                          id: entry.id,
+                          name: entry.label,
+                          logo: (
+                            <ConnectionLogo
+                              src={connectionServicePresentation(entry).logo}
+                              name={entry.label}
+                            />
+                          ),
+                          options: [
+                            {
+                              id: entry.id,
+                              name: entry.label,
+                              status: connected
+                                ? "Connected"
+                                : entry.readiness === "available"
+                                  ? "Connect"
+                                  : "Unavailable",
+                              state: connected
+                                ? "added"
+                                : entry.readiness === "available"
+                                  ? "available"
+                                  : "unavailable",
+                              connected,
+                              onOpen: () => {
+                                if (!view.busy) {
+                                  setProviderId(entry.id);
+                                  setOwnership(
+                                    entry.ownership.length === 1 ? entry.ownership[0]! : "",
+                                  );
+                                }
+                              },
+                            },
+                          ],
+                        };
+                      })}
+                    />
+                  );
+                  return group.secondary && !customOnly ? (
+                    <details
+                      className="og-connect-secondary"
+                      key={group.name}
+                      open={query.trim() ? true : undefined}
+                    >
+                      <summary>
+                        {group.name}
+                        <span>{entries.length}</span>
+                      </summary>
+                      {rows}
+                    </details>
+                  ) : (
+                    <div key={group.name}>{rows}</div>
+                  );
+                })}
+                {!catalog!.some((entry) =>
+                  entry.label.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim()),
+                ) && <p role="status">No services match your search.</p>}
+              </>
+            ) : null}
+            {presentation === "catalog" && provider && !initialProviderId ? (
+              <button
+                type="button"
+                onClick={() => {
+                  setProviderId("");
+                  setOwnership("");
+                }}
+              >
+                Back to connections
+              </button>
+            ) : null}
+            <label hidden={presentation === "catalog"}>
+              Provider
+              <select
+                required
+                value={providerId}
+                onChange={(event) => {
+                  setProviderId(event.target.value);
+                  setOwnership("");
+                }}
+              >
+                <option value="" disabled>
+                  Choose a provider
+                </option>
+                {catalog!.map((entry) => (
+                  <option
+                    key={entry.id}
+                    value={entry.id}
+                    disabled={entry.readiness !== "available" || entry.ownership.length === 0}
+                  >
+                    {entry.label} — {entry.id} ({entry.readiness.replaceAll("_", " ")})
+                  </option>
+                ))}
+              </select>
+            </label>
+            {provider && (
+              <>
+                <strong>{presentation === "catalog" ? provider.label : null}</strong>
+                {provider.readiness !== "available" && (
+                  <p role="status">
+                    {provider.reason ??
+                      "This service is not available in this environment. Contact your administrator to enable it."}
+                  </p>
+                )}
+                <label>
+                  Who can use this connection?
+                  <select
+                    required
+                    value={ownership}
+                    onChange={(event) => setOwnership(event.target.value)}
+                  >
+                    <option value="" disabled>
+                      Choose ownership
+                    </option>
+                    {provider.ownership.map((choice) => (
+                      <option key={choice} value={choice}>
+                        {choice === "personal" ? "Only me" : "Everyone in this workspace"}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              </>
+            )}
+            <button
+              hidden={presentation === "catalog" && !provider}
+              type="submit"
+              disabled={!canBegin}
+            >
+              Continue
+            </button>
+          </fieldset>
+        </form>
+      )}
+      <button hidden={!failed} type="button" disabled={view.busy} onClick={() => setLoad(load + 1)}>
+        Reload providers
+      </button>
+    </section>
+  );
+}