@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/dist/realtime.js

@@ -3,15 +3,22 @@ import {
   PickerAnimatedPage,
   PickerBackHeader,
   PickerNavRow
-} from "./chunk-MKPIAGVL.js";
-import "./chunk-XBZWOM2K.js";
+} from "./chunk-26ZNDDLZ.js";
+import {
+  MENU_CHECK_CLASS,
+  MENU_CHEVRON_CLASS,
+  MENU_ITEM_CLASS,
+  MENU_SEPARATOR_CLASS,
+  MENU_SURFACE_CLASS
+} from "./chunk-K3HQAKQX.js";
+import "./chunk-RLUSC2WA.js";
 import {
   usePortalTokenSource,
   usePortalTokenStyle
 } from "./chunk-VZTQ73XT.js";
 import {
   useEmbeddedRealtimeSession
-} from "./chunk-C5ZPSSS5.js";
+} from "./chunk-TKOTKRWY.js";
 import {
   cn
 } from "./chunk-22KP6LR5.js";
@@ -48,6 +55,7 @@ import { ChevronRightIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var MENU_MOTION_CLASS = "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95";
 var DropdownMenuSourceContext = createContext(null);
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
@@ -88,7 +96,9 @@ function DropdownMenuContent({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "og-root z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "og-root z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
+        MENU_SURFACE_CLASS,
+        MENU_MOTION_CLASS,
         className
       ),
       style: { ...portalStyle, ...style },
@@ -108,10 +118,7 @@ function DropdownMenuItem({
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
       "data-variant": variant,
-      className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-og-menu outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
-        className
-      ),
+      className: cn(MENU_ITEM_CLASS, "data-[inset]:pl-9", className),
       ...props
     }
   );
@@ -124,7 +131,7 @@ function DropdownMenuSeparator({
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
-      className: cn("-mx-1 my-1 h-px bg-border", className),
+      className: cn(MENU_SEPARATOR_CLASS, className),
       ...props
     }
   );
@@ -143,14 +150,11 @@ function DropdownMenuSubTrigger({
     {
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
-      className: cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-og-menu outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
-      ),
+      className: cn(MENU_ITEM_CLASS, "data-[inset]:pl-9", className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
+        /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: cn(MENU_CHEVRON_CLASS, "ml-auto") })
       ]
     }
   );
@@ -167,7 +171,9 @@ function DropdownMenuSubContent({
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "og-root z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "og-root z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
+        MENU_SURFACE_CLASS,
+        MENU_MOTION_CLASS,
         className
       ),
       style: { ...portalStyle, ...style },
@@ -243,17 +249,23 @@ function pruneRealtimeModelCatalogCache(cache, now) {
     cache.delete(oldestWorkspaceId);
   }
 }
-function loadRealtimeModelCatalog(client, workspaceId) {
+function loadRealtimeModelCatalog(client, workspaceId, signal) {
   const load = client.getWorkspaceRealtimeModelCatalog;
   if (!load) return null;
+  if (signal?.aborted) {
+    return Promise.reject(signal.reason ?? new DOMException("Request aborted", "AbortError"));
+  }
   const now = Date.now();
   const cache = realtimeModelCatalogCacheFor(client);
   const entry = cache.get(workspaceId);
-  if (entry?.state === "loading") return entry.promise;
+  if (entry?.state === "loading" && !entry.controller.signal.aborted) {
+    return consumeRealtimeModelCatalog(entry, signal);
+  }
   if (entry?.state === "ready" && entry.expiresAt > now) return Promise.resolve(entry.models);
   if (entry) cache.delete(workspaceId);
   pruneRealtimeModelCatalogCache(cache, now);
-  const promise = load.call(client, workspaceId).then((response) => response.models.map(toRealtimeModelOption)).then((models) => {
+  const controller = new AbortController();
+  const promise = load.call(client, workspaceId, { signal: controller.signal }).then((response) => response.models.map(toRealtimeModelOption)).then((models) => {
     const current = cache.get(workspaceId);
     if (current?.state === "loading" && current.promise === promise) {
       cache.delete(workspaceId);
@@ -269,8 +281,39 @@ function loadRealtimeModelCatalog(client, workspaceId) {
     if (current?.state === "loading" && current.promise === promise) cache.delete(workspaceId);
     throw error;
   });
-  cache.set(workspaceId, { state: "loading", promise });
-  return promise;
+  const loading = {
+    state: "loading",
+    promise,
+    controller,
+    consumers: 0
+  };
+  cache.set(workspaceId, loading);
+  return consumeRealtimeModelCatalog(loading, signal);
+}
+function consumeRealtimeModelCatalog(entry, signal) {
+  entry.consumers += 1;
+  return new Promise((resolve, reject) => {
+    let released = false;
+    const release = (abandoned) => {
+      if (released) return;
+      released = true;
+      entry.consumers = Math.max(0, entry.consumers - 1);
+      if (abandoned && entry.consumers === 0) {
+        entry.controller.abort(
+          signal?.reason ?? new DOMException("Request abandoned", "AbortError")
+        );
+      }
+    };
+    const onAbort = () => {
+      release(true);
+      reject(signal?.reason ?? new DOMException("Request aborted", "AbortError"));
+    };
+    signal?.addEventListener("abort", onAbort, { once: true });
+    void entry.promise.then(resolve, reject).finally(() => {
+      signal?.removeEventListener("abort", onAbort);
+      release(false);
+    });
+  });
 }
 function codexRealtimeAdmissionAllowed(input) {
   return codexRealtimeAdmissionBlocker(input) === null;
@@ -320,7 +363,7 @@ function useSessionRealtime(options) {
   const eventsReadyRef = useRef(options.eventsReady);
   lifecycleRef.current = lifecycle;
   eventsReadyRef.current = options.eventsReady;
-  const lifecycleActive = lifecycle?.state === "active";
+  const lifecycleActive = sessionRealtimeLifecycleIsActive(lifecycle);
   useEffect(() => {
     let disposed = false;
     let controller = null;
@@ -425,13 +468,19 @@ function useSessionRealtime(options) {
     setOutputMuted
   };
 }
+function sessionRealtimeLifecycleIsActive(lifecycle) {
+  if (lifecycle?.state !== "active") return false;
+  const leaseExpiresAt = Date.parse(lifecycle.leaseExpiresAt);
+  return !Number.isFinite(leaseExpiresAt) || leaseExpiresAt > Date.now();
+}
 function SessionRealtimeControl(props) {
   const lifecycle = useMemo(() => projectSessionRealtimeLifecycle(props.events), [props.events]);
+  const lifecycleActive = sessionRealtimeLifecycleIsActive(lifecycle);
   const selection = useRealtimeModelSelection({
     client: props.client,
     workspaceId: props.workspaceId,
     codexConnected: props.codexConnected,
-    activeModel: lifecycle?.state === "active" ? lifecycle.model : null
+    activeModel: lifecycleActive && lifecycle?.state === "active" ? lifecycle.model : null
   });
   const selectedModel = selection.selectedModel;
   const realtime = useSessionRealtime({
@@ -452,7 +501,7 @@ function SessionRealtimeControl(props) {
   }, [onVoiceActiveChange, voiceActive]);
   useEffect(() => {
     const pending = autostartModelRef.current;
-    if (!pending || autostartStartedRef.current || lifecycle?.state === "active") return;
+    if (!pending || autostartStartedRef.current || lifecycleActive) return;
     const available = models.some((model) => model.id === pending && model.available);
     if (!available) return;
     if (selectedRealtimeModel.id !== pending) {
@@ -469,7 +518,7 @@ function SessionRealtimeControl(props) {
     });
   }, [
     canStart,
-    lifecycle?.state,
+    lifecycleActive,
     models,
     props.sessionId,
     props.workspaceId,
@@ -487,6 +536,7 @@ function SessionRealtimeControl(props) {
       modelAvailable: selectedModel.available,
       menuSide: "top",
       modelMenu: props.modelMenu ?? "split",
+      showDiagnostics: props.showDiagnostics,
       audioRef: realtime.audioRef,
       selectedModel,
       models: selection.models,
@@ -525,6 +575,7 @@ function useRealtimeModelSelection(options) {
   });
   useEffect(() => {
     let disposed = false;
+    const requestAbort = new AbortController();
     const applyCatalog = (models) => {
       catalogScopeRef.current = { client, workspaceId, source: "cache" };
       setCatalog(models);
@@ -541,7 +592,7 @@ function useRealtimeModelSelection(options) {
       }
       return;
     }
-    const loading = loadRealtimeModelCatalog(client, workspaceId);
+    const loading = loadRealtimeModelCatalog(client, workspaceId, requestAbort.signal);
     if (!loading) return;
     void loading.then((models) => {
       if (disposed) return;
@@ -549,6 +600,7 @@ function useRealtimeModelSelection(options) {
     }).catch(() => void 0);
     return () => {
       disposed = true;
+      requestAbort.abort();
     };
   }, [client, workspaceId]);
   useEffect(() => {
@@ -585,16 +637,31 @@ var IDLE_REALTIME_SNAPSHOT = {
   error: null
 };
 function NewSessionRealtimeControl(props) {
-  const internalSelection = useRealtimeModelSelection({
+  if (props.models && props.selectedModel && props.onSelectModel) {
+    return /* @__PURE__ */ jsx2(
+      NewSessionRealtimeControlView,
+      {
+        ...props,
+        selection: {
+          models: props.models,
+          selectedModel: props.selectedModel,
+          selectModel: props.onSelectModel
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(NewSessionRealtimeControlWithInternalSelection, { ...props });
+}
+function NewSessionRealtimeControlWithInternalSelection(props) {
+  const selection = useRealtimeModelSelection({
     client: props.client,
     workspaceId: props.workspaceId,
     codexConnected: props.codexConnected
   });
-  const selection = props.models && props.selectedModel && props.onSelectModel ? {
-    models: props.models,
-    selectedModel: props.selectedModel,
-    selectModel: props.onSelectModel
-  } : internalSelection;
+  return /* @__PURE__ */ jsx2(NewSessionRealtimeControlView, { ...props, selection });
+}
+function NewSessionRealtimeControlView(props) {
+  const selection = props.selection;
   const audioRef = useRef(null);
   const [starting, setStarting] = useState(false);
   const [error, setError] = useState(null);
@@ -663,7 +730,7 @@ function RealtimeVoiceControl(props) {
   const mainDisabled = props.snapshot.status === "stopping" || props.snapshot.status === "lost_owner" || !modeOwned && !props.canStart || props.snapshot.status === "starting" && !modeOwned;
   const mainLabel = audioBlocked ? "Resume voice audio" : retryConnection ? "Retry voice connection" : modeOwned ? "End voice conversation" : `Start voice with ${selectedModel.label}`;
   const runMainAction = audioBlocked ? props.onRetryAudibleOutput : retryConnection ? props.onRetry : modeOwned ? props.onStop : props.onStart;
-  const diagnosticsVisible = props.showDiagnostics ?? import.meta.env.DEV;
+  const diagnosticsVisible = props.showDiagnostics ?? false;
   const modelMenu = props.modelMenu ?? "split";
   const showAttachedModelMenu = modelMenu === "split" || modelMenu === "split-desktop";
   const desktopOnlyModelMenu = modelMenu === "split-desktop";
@@ -819,7 +886,7 @@ function RealtimeVoiceControl(props) {
                 align: "end",
                 sideOffset: 8,
                 collisionPadding: 12,
-                className: "og-realtime-menu flex w-72 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] flex-col overflow-hidden rounded-xl border-border bg-surface p-1.5 shadow-xl",
+                className: "og-realtime-menu flex w-72 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] flex-col overflow-hidden",
                 onCloseAutoFocus: (event) => event.preventDefault(),
                 children: [
                   /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx2(
@@ -840,8 +907,9 @@ function RealtimeVoiceControl(props) {
                       }
                     }
                   ) }),
-                  status.phase !== "idle" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-                    /* @__PURE__ */ jsx2(DropdownMenuSeparator, { className: "mx-1 bg-og-border" }),
+                  status.phase !== "idle" && // Say it once: the selected model's row already carries its reason.
+                  !(status.phase === "unavailable" && pickerProvider === selectedModel.provider && selectedModel.unavailableReason === status.detail) ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                    /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}),
                     /* @__PURE__ */ jsxs2("div", { className: "px-2.5 py-2", role: "status", "aria-live": "polite", children: [
                       /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-og-sm font-medium text-og-fg", children: [
                         /* @__PURE__ */ jsx2(
@@ -859,7 +927,6 @@ function RealtimeVoiceControl(props) {
                   audioBlocked ? /* @__PURE__ */ jsxs2(
                     DropdownMenuItem,
                     {
-                      className: "rounded-og-md",
                       onSelect: () => void props.onRetryAudibleOutput().catch(() => void 0),
                       children: [
                         /* @__PURE__ */ jsx2(Volume2Icon, {}),
@@ -867,22 +934,14 @@ function RealtimeVoiceControl(props) {
                       ]
                     }
                   ) : null,
-                  retryConnection ? /* @__PURE__ */ jsxs2(
-                    DropdownMenuItem,
-                    {
-                      className: "rounded-og-md",
-                      onSelect: () => void props.onRetry().catch(() => void 0),
-                      children: [
-                        /* @__PURE__ */ jsx2(RotateCcwIcon, {}),
-                        "Retry connection"
-                      ]
-                    }
-                  ) : null,
+                  retryConnection ? /* @__PURE__ */ jsxs2(DropdownMenuItem, { onSelect: () => void props.onRetry().catch(() => void 0), children: [
+                    /* @__PURE__ */ jsx2(RotateCcwIcon, {}),
+                    "Retry connection"
+                  ] }) : null,
                   modeOwned && props.snapshot.status !== "lost_owner" ? /* @__PURE__ */ jsxs2(
                     DropdownMenuItem,
                     {
                       variant: "destructive",
-                      className: "rounded-og-md",
                       disabled: props.snapshot.status === "stopping",
                       onSelect: () => void props.onStop().catch(() => void 0),
                       children: [
@@ -911,28 +970,28 @@ function RealtimeVoiceModelPanel(props) {
   const [provider, setProvider] = useState(null);
   const [direction, setDirection] = useState(1);
   return /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1 flex-col", "data-testid": "realtime-voice-model-panel", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-start gap-1 px-2 pt-1 pb-1.5", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-h-10 shrink-0 items-center gap-2 border-b border-og-border px-2 pb-2", children: [
       props.leading,
-      /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx2("div", { className: "text-og-menu font-medium text-og-fg", children: "Voice model" }),
-        /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-og-control text-og-fg-subtle", children: "Used when you start a voice conversation." })
-      ] })
+      /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1 text-og-menu font-medium text-og-fg", children: "Voice model" })
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-1.5 pb-1.5", children: /* @__PURE__ */ jsx2(
-      RealtimeModelPickerMenu,
-      {
-        models: props.models,
-        selectedModel: props.selectedModel,
-        provider,
-        direction,
-        disabled: props.disabled === true,
-        onProviderChange: (next, nextDirection) => {
-          setDirection(nextDirection);
-          setProvider(next);
-        },
-        onSelect: props.onSelect
-      }
-    ) })
+    /* @__PURE__ */ jsxs2("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-2", children: [
+      /* @__PURE__ */ jsx2("p", { className: "mb-3 text-og-control text-og-fg-muted", children: "Used when you start a voice conversation." }),
+      /* @__PURE__ */ jsx2(
+        RealtimeModelPickerMenu,
+        {
+          models: props.models,
+          selectedModel: props.selectedModel,
+          provider,
+          direction,
+          disabled: props.disabled === true,
+          onProviderChange: (next, nextDirection) => {
+            setDirection(nextDirection);
+            setProvider(next);
+          },
+          onSelect: props.onSelect
+        }
+      )
+    ] })
   ] });
 }
 function RealtimeMuteButton(props) {
@@ -998,7 +1057,7 @@ function RealtimeModelPickerMenu(props) {
           title: model.unavailableReason ?? model.description,
           active: selected,
           showChevron: false,
-          trailing: selected ? /* @__PURE__ */ jsx2(CheckIcon, { className: "size-3.5", "aria-hidden": true }) : void 0,
+          trailing: selected ? /* @__PURE__ */ jsx2(CheckIcon, { className: MENU_CHECK_CLASS, "aria-hidden": true }) : void 0,
           testId: `realtime-model-choice-${model.id}`,
           onClick: () => props.onSelect(model.id)
         },
@@ -1047,10 +1106,10 @@ function RealtimeDiagnosticsMenu({ snapshot }) {
     ["diagnostic", snapshot.diagnostic?.kind ?? "none"]
   ];
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2(DropdownMenuSeparator, { className: "mx-1 bg-og-border" }),
+    /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}),
     /* @__PURE__ */ jsxs2(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsx2(DropdownMenuSubTrigger, { className: "rounded-og-md text-og-fg-muted", children: "Realtime diagnostics" }),
-      /* @__PURE__ */ jsx2(DropdownMenuSubContent, { className: "max-h-80 w-72 overflow-y-auto rounded-og-lg border-og-border bg-og-surface-1 p-1.5 text-og-fg shadow-og-lg", children: rows.map(([label, value]) => /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsx2(DropdownMenuSubTrigger, { className: "text-og-fg-muted", children: "Realtime diagnostics" }),
+      /* @__PURE__ */ jsx2(DropdownMenuSubContent, { className: "max-h-80 w-72 overflow-y-auto", children: rows.map(([label, value]) => /* @__PURE__ */ jsxs2(
         DropdownMenuItem,
         {
           disabled: true,
@@ -1224,7 +1283,7 @@ function RealtimeStatusDot(props) {
 }
 function voiceButtonTone(phase) {
   if (phase === "listening" || phase === "speaking") {
-    return "border border-og-accent/45 bg-og-accent text-og-accent-fg shadow-og-sm hover:bg-og-accent-strong";
+    return "border border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover";
   }
   if (phase === "blocked" || phase === "error") {
     return "border border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting hover:bg-og-status-waiting/15";
@@ -1236,7 +1295,7 @@ function voiceButtonTone(phase) {
 }
 function voiceChevronTone(phase) {
   if (phase === "listening" || phase === "speaking") {
-    return "border border-l-0 border-og-accent/45 bg-og-accent text-og-accent-fg hover:bg-og-accent-strong";
+    return "border border-l-0 border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover";
   }
   if (phase === "blocked" || phase === "error") {
     return "border border-l-0 border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting hover:bg-og-status-waiting/15";