@opengeni/react 0.36.0 → 0.37.0

package/dist/{chunk-PVW56EVR.js → chunk-IP22SLO6.js}

@@ -1,10 +1,16 @@
 import {
   shouldSteerOnKey,
   shouldSubmitOnKey
-} from "./chunk-FT2TXNGZ.js";
+} from "./chunk-HJ4OQVGW.js";
 import {
-  groupPickerRowsByBillingClass
-} from "./chunk-U255M5EZ.js";
+  coerceReasoningEffortForModel,
+  effortOptionsForModel,
+  findPickerRow,
+  groupPickerRowsByBillingClass,
+  labelReasoningEffort,
+  projectClientModelRows,
+  runnableLatencyModesForModel
+} from "./chunk-SJKT4TKW.js";
 import {
   Tooltip,
   TooltipContent,
@@ -1249,10 +1255,10 @@ import { useId, useMemo as useMemo3 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var EMPTY_CLIENT_MODELS = [];
 function isCodexClientModel(model) {
-  return model.id.startsWith("codex/") || model.provider === "codex-subscription";
+  return model.id.startsWith("codex/") || model.source === "codex";
 }
 function isCodexPickerRow(row) {
-  return row.id.startsWith("codex/") || row.provider === "codex-subscription";
+  return row.id.startsWith("codex/") || row.catalog.source === "codex";
 }
 function applyCodexOnlyRows(rows, codexOnly) {
   if (!codexOnly) return rows;
@@ -1291,17 +1297,17 @@ function ModelPicker({
   codexOnly = false
 }) {
   const selectId = useId();
-  const effectiveRows = useMemo3(
+  const effectiveRows2 = useMemo3(
     () => rows && rows.length > 0 ? applyCodexOnlyRows(rows, codexOnly) : [],
     [rows, codexOnly]
   );
   const billingGroups = useMemo3(
-    () => effectiveRows.length > 0 ? groupPickerRowsByBillingClass(effectiveRows) : [],
-    [effectiveRows]
+    () => effectiveRows2.length > 0 ? groupPickerRowsByBillingClass(effectiveRows2) : [],
+    [effectiveRows2]
   );
   const providerGroupList = useMemo3(() => providerGroups(models, codexOnly), [models, codexOnly]);
-  const useBillingGroups = Boolean(effectiveRows.length);
-  if (models.length === 0 && effectiveRows.length === 0) {
+  const useBillingGroups = Boolean(effectiveRows2.length);
+  if (models.length === 0 && effectiveRows2.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs2("span", { className: cn("relative inline-flex items-center", className), children: [
@@ -1902,9 +1908,20 @@ function Attachments() {
     }
   );
 }
-var Input = forwardRef(function ComposerInput({ rows = 1, placeholder, className, "aria-label": ariaLabel, ...props }, forwardedRef) {
+var Input = forwardRef(function ComposerInput({ rows = 1, placeholder, className, "aria-label": ariaLabel, autoFocus = false, ...props }, forwardedRef) {
   const controller = useComposerController();
+  const autoFocusedRef = useRef4(false);
   const paletteOpen = controller.paletteEnabled && controller.paletteMounted && controller.palette.open;
+  useEffect3(() => {
+    if (!autoFocus || controller.disabled || autoFocusedRef.current) return;
+    const frame = window.requestAnimationFrame(() => {
+      const textarea = controller.textareaRef.current;
+      if (!textarea || textarea.disabled) return;
+      autoFocusedRef.current = true;
+      textarea.focus();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [autoFocus, controller.disabled, controller.textareaRef]);
   return /* @__PURE__ */ jsx3(
     "textarea",
     {
@@ -1917,6 +1934,7 @@ var Input = forwardRef(function ComposerInput({ rows = 1, placeholder, className
       onPaste: controller.handlePaste,
       placeholder: controller.paused && !controller.disabled ? controller.messages.pausedPlaceholder : placeholder ?? controller.messages.messagePlaceholder,
       disabled: controller.disabled,
+      autoFocus: autoFocus && !controller.disabled,
       "aria-label": ariaLabel ?? controller.messages.inputLabel,
       "aria-keyshortcuts": "Enter Meta+Enter Control+Enter Shift+Enter",
       "aria-autocomplete": controller.paletteEnabled && controller.paletteMounted ? "list" : void 0,
@@ -2758,6 +2776,415 @@ function transcriptionErrorMessage(code, messages) {
   }
 }
 
+// src/components/model-policy-picker.tsx
+import {
+  CheckIcon,
+  ChevronDownIcon as ChevronDownIcon3,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  KeyRoundIcon,
+  ZapIcon
+} from "lucide-react";
+import { motion as motion4, useReducedMotion } from "motion/react";
+import { DropdownMenu } from "radix-ui";
+import { useEffect as useEffect5, useMemo as useMemo5, useState as useState6 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var defaultModelPolicyPickerMessages = {
+  label: "Model and effort",
+  loading: "Loading model catalog\u2026",
+  noModels: "No models available.",
+  thinking: "Thinking",
+  fast: "Fast",
+  fastRateHint: "2\xD7 rate",
+  codexOnly: "Codex-only session",
+  billingHints: {
+    opengeni_credits: "Will use credits",
+    codex_subscription: "ChatGPT / Codex plan",
+    byok: "Billed to your AI Gateway"
+  }
+};
+var SLIDE_EASE = [0.22, 1, 0.36, 1];
+function OpenGeniMark(props) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      viewBox: "0 0 140 133",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.2,
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: /* @__PURE__ */ jsx5("g", { transform: "translate(-17.5,-20.999893188476562) scale(1.75)", children: /* @__PURE__ */ jsx5("g", { transform: "translate(0,-952.36218)", children: /* @__PURE__ */ jsx5("path", { d: "m 60.7828,964.36215 27.1809,0.8834 -27.1809,25.9958 z m -1.9745,1.4513 0,26.7845 -25.2681,0 c 8.6166,-8.7334 16.8796,-17.8103 25.2681,-26.7845 z m 27.7053,3.628 3.4864,1.1989 -12.5877,7.4768 z m -68.1835,2.9656 5.5226,0 12.8654,14.0705 -5.9854,6.1204 -12.4026,0 c 9e-4,-6.7347 0,-13.4597 0,-20.1909 z m -1.9746,1.2304 0,5.8364 -6.3555,0 z m 3.363,20.9796 38.627,0 -10.7675,29.43465 z m 39.0898,4.54286 0,41.20229 -12.5878,-6.8775 c 4.1972,-11.443 8.3886,-22.879 12.5878,-34.32479 z" }) }) })
+    }
+  );
+}
+function ChatGptMark(props) {
+  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx5("path", { d: "M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3653-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8414 3.3698-2.02 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.783-2.7622a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" }) });
+}
+function BillingClassMark(props) {
+  const labels = {
+    opengeni_credits: "OpenGeni",
+    codex_subscription: "Codex",
+    byok: "Bring your own key"
+  };
+  const label = props["aria-label"] ?? labels[props.billingClass];
+  const accessibility = label.length === 0 ? { "aria-hidden": true } : { role: "img", "aria-label": label };
+  const shell = cn(
+    "inline-flex size-3.5 shrink-0 items-center justify-center overflow-hidden text-og-fg-subtle",
+    props.className
+  );
+  const mark = "size-3.5";
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      className: shell,
+      "data-testid": `billing-class-icon-${props.billingClass}`,
+      ...accessibility,
+      children: props.billingClass === "opengeni_credits" ? /* @__PURE__ */ jsx5(OpenGeniMark, { className: mark }) : props.billingClass === "codex_subscription" ? /* @__PURE__ */ jsx5(ChatGptMark, { className: mark }) : /* @__PURE__ */ jsx5(KeyRoundIcon, { className: mark, "aria-hidden": true })
+    }
+  );
+}
+function isCodexModel(model) {
+  return model.id.startsWith("codex/") || model.source === "codex";
+}
+function applyCodexOnly(rows, codexOnly, unavailableReason) {
+  if (!codexOnly) return rows;
+  return rows.map(
+    (row) => isCodexModel(row.catalog) ? row : {
+      ...row,
+      selectable: false,
+      unavailableReason: row.unavailableReason ?? unavailableReason
+    }
+  );
+}
+function effectiveRows(props) {
+  const rows = props.rows !== void 0 ? props.rows : projectClientModelRows(props.models ?? []);
+  const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
+  return applyCodexOnly(rows, props.codexOnly === true, messages.codexOnly);
+}
+function defaultNavState(rows, modelId) {
+  const selected = findPickerRow(rows, modelId);
+  if (!selected) {
+    const rails = new Set(rows.map((row) => row.billingClass));
+    const onlyRail = rails.size === 1 ? rows[0]?.billingClass : null;
+    return onlyRail ? { level: "models", rail: onlyRail, modelId: null } : { level: "providers", rail: null, modelId: null };
+  }
+  return { level: "thinking", rail: selected.billingClass, modelId: selected.id };
+}
+function usePickerNavState(sessionKey, rows, model) {
+  const [state, setState] = useState6(() => defaultNavState(rows, model));
+  useEffect5(() => {
+    setState(defaultNavState(rows, model));
+  }, [sessionKey]);
+  return [state, setState];
+}
+function PickerNavRow(props) {
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      disabled: props.disabled,
+      title: props.title,
+      onClick: props.onClick,
+      "data-testid": props.testId,
+      className: cn(
+        "flex w-full cursor-pointer items-center gap-2 rounded-og-sm px-2.5 py-2 text-left text-og-fg outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40",
+        props.disabled && "cursor-not-allowed opacity-50"
+      ),
+      children: [
+        props.icon,
+        /* @__PURE__ */ jsxs5("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx5("span", { className: cn("block truncate text-sm", props.active && "font-medium"), children: props.label }),
+          props.hint ? /* @__PURE__ */ jsx5("span", { className: "mt-0.5 block truncate text-xs text-og-fg-subtle", children: props.hint }) : null
+        ] }),
+        props.trailing ? /* @__PURE__ */ jsx5("span", { className: "ml-auto shrink-0", children: props.trailing }) : null,
+        props.showChevron === false ? null : /* @__PURE__ */ jsx5(ChevronRightIcon, { className: "size-3.5 shrink-0 text-og-fg-subtle" })
+      ]
+    }
+  );
+}
+function PickerBackHeader(props) {
+  return /* @__PURE__ */ jsxs5("div", { className: "mb-1 flex items-center gap-0.5 border-b border-og-border/70 px-0.5 pb-1.5", children: [
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        onClick: props.onBack,
+        "data-testid": "model-picker-back",
+        className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-og-sm px-1.5 py-1.5 text-left text-og-fg outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40",
+        children: [
+          /* @__PURE__ */ jsx5(ChevronLeftIcon, { className: "size-3.5 shrink-0 text-og-fg-subtle" }),
+          props.icon,
+          /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: props.label })
+        ]
+      }
+    ),
+    props.trailing ? /* @__PURE__ */ jsx5("div", { className: "relative z-10 shrink-0", children: props.trailing }) : null
+  ] });
+}
+function PickerAnimatedPage(props) {
+  const reduceMotion = useReducedMotion();
+  return /* @__PURE__ */ jsx5(
+    motion4.div,
+    {
+      initial: reduceMotion ? false : { x: props.direction * 14, opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      transition: { duration: reduceMotion ? 0 : 0.18, ease: SLIDE_EASE },
+      className: "w-full",
+      children: props.children
+    },
+    props.pageKey
+  );
+}
+function ModelPolicyPickerMenu(props) {
+  const messages = useMemo5(
+    () => ({ ...defaultModelPolicyPickerMessages, ...props.messages }),
+    [props.messages]
+  );
+  const rows = effectiveRows(props);
+  const groups = useMemo5(() => groupPickerRowsByBillingClass(rows), [rows]);
+  const [localNav, setLocalNav] = usePickerNavState(
+    props.nav === void 0 ? props.sessionKey : void 0,
+    rows,
+    props.model
+  );
+  const nav = props.nav ?? localNav;
+  const setNav = props.onNavChange ?? setLocalNav;
+  const [direction, setDirection] = useState6(1);
+  const effectiveNav = nav.level === "providers" && groups.length === 1 ? { level: "models", rail: groups[0].billingClass, modelId: null } : nav;
+  const activeGroup = effectiveNav.rail === null ? void 0 : groups.find((group) => group.billingClass === effectiveNav.rail);
+  const focusModel = effectiveNav.modelId === null ? void 0 : findPickerRow(rows, effectiveNav.modelId);
+  const selectedRow = findPickerRow(rows, props.model);
+  const { latencyMode, loading, onLatencyModeChange } = props;
+  useEffect5(() => {
+    if (loading || !selectedRow?.selectable) return;
+    const supportsCurrentMode = runnableLatencyModesForModel(selectedRow.catalog).includes(
+      latencyMode
+    );
+    if (!supportsCurrentMode && latencyMode !== "standard") {
+      onLatencyModeChange("standard");
+    }
+  }, [latencyMode, loading, onLatencyModeChange, selectedRow]);
+  const go = (next, nextDirection) => {
+    setDirection(nextDirection);
+    setNav(next);
+  };
+  const selectEffort = (row, effort) => {
+    if (!row.selectable) return;
+    if (row.id !== props.model) props.onModelChange(row.id);
+    props.onEffortChange(coerceReasoningEffortForModel(row.catalog, effort));
+  };
+  const pageKey = effectiveNav.level === "providers" ? "providers" : effectiveNav.level === "models" ? `models:${effectiveNav.rail ?? ""}` : `thinking:${effectiveNav.modelId ?? ""}`;
+  let body;
+  if (props.loading) {
+    body = /* @__PURE__ */ jsx5("p", { className: "px-2 py-3 text-xs text-og-fg-subtle", children: messages.loading });
+  } else if (groups.length === 0) {
+    body = /* @__PURE__ */ jsx5("p", { className: "px-2 py-3 text-xs text-og-fg-subtle", children: messages.noModels });
+  } else if (effectiveNav.level === "providers") {
+    body = /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-0.5", "data-testid": "model-picker-providers", children: groups.map((group) => /* @__PURE__ */ jsx5(
+      PickerNavRow,
+      {
+        label: group.label,
+        hint: messages.billingHints[group.billingClass],
+        icon: /* @__PURE__ */ jsx5(BillingClassMark, { billingClass: group.billingClass }),
+        active: selectedRow?.billingClass === group.billingClass,
+        testId: `model-picker-rail-${group.billingClass}`,
+        onClick: () => go({ level: "models", rail: group.billingClass, modelId: null }, 1)
+      },
+      group.billingClass
+    )) });
+  } else if (effectiveNav.level === "models" && activeGroup) {
+    body = /* @__PURE__ */ jsxs5("div", { "data-testid": "model-picker-models", children: [
+      groups.length > 1 ? /* @__PURE__ */ jsx5(
+        PickerBackHeader,
+        {
+          label: activeGroup.label,
+          icon: /* @__PURE__ */ jsx5(BillingClassMark, { billingClass: activeGroup.billingClass }),
+          onBack: () => go({ level: "providers", rail: null, modelId: null }, -1)
+        }
+      ) : null,
+      /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-0.5", children: activeGroup.rows.map((row) => /* @__PURE__ */ jsx5(
+        PickerNavRow,
+        {
+          label: row.label,
+          hint: row.unavailableReason ?? void 0,
+          disabled: !row.selectable,
+          title: row.unavailableReason ?? void 0,
+          active: row.id === props.model,
+          testId: `model-picker-choice-${row.id}`,
+          onClick: () => {
+            if (row.selectable) {
+              go({ level: "thinking", rail: row.billingClass, modelId: row.id }, 1);
+            }
+          }
+        },
+        `${row.billingClass}:${row.id}`
+      )) })
+    ] });
+  } else if (effectiveNav.level === "thinking" && focusModel) {
+    const activeModel = focusModel.id === props.model;
+    const supportsFast = runnableLatencyModesForModel(focusModel.catalog).includes("fast");
+    body = /* @__PURE__ */ jsxs5("div", { "data-testid": "model-picker-reasoning", children: [
+      /* @__PURE__ */ jsx5(
+        PickerBackHeader,
+        {
+          label: focusModel.label,
+          icon: /* @__PURE__ */ jsx5(BillingClassMark, { billingClass: focusModel.billingClass }),
+          onBack: () => go({ level: "models", rail: focusModel.billingClass, modelId: null }, -1),
+          trailing: supportsFast ? /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              disabled: !focusModel.selectable,
+              "aria-pressed": activeModel && props.latencyMode === "fast",
+              "aria-label": activeModel && props.latencyMode === "fast" ? `Disable ${messages.fast}` : `Enable ${messages.fast}`,
+              title: `${messages.fast} \xB7 ${messages.fastRateHint}`,
+              "data-testid": "model-picker-fast",
+              onClick: () => {
+                if (!activeModel) {
+                  props.onModelChange(focusModel.id);
+                  props.onEffortChange(
+                    coerceReasoningEffortForModel(focusModel.catalog, props.effort)
+                  );
+                }
+                props.onLatencyModeChange(
+                  activeModel && props.latencyMode === "fast" ? "standard" : "fast"
+                );
+              },
+              className: cn(
+                "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-og-sm text-og-fg-subtle outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
+                activeModel && props.latencyMode === "fast" && "text-og-fg"
+              ),
+              children: /* @__PURE__ */ jsx5(
+                ZapIcon,
+                {
+                  className: cn(
+                    "size-3.5",
+                    activeModel && props.latencyMode === "fast" && "fill-current"
+                  )
+                }
+              )
+            }
+          ) : null
+        }
+      ),
+      /* @__PURE__ */ jsx5("p", { className: "px-2.5 pt-1 pb-1 text-xs font-medium tracking-wide text-og-fg-subtle uppercase", children: messages.thinking }),
+      /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-0.5", children: effortOptionsForModel(focusModel.catalog).map((effort) => {
+        const selected = activeModel && effort === props.effort;
+        return /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            disabled: !focusModel.selectable,
+            onClick: () => selectEffort(focusModel, effort),
+            className: cn(
+              "flex h-8 w-full cursor-pointer items-center rounded-og-sm px-2.5 text-left text-sm text-og-fg outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
+              selected && "bg-og-surface-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate", children: labelReasoningEffort(effort) }),
+              selected ? /* @__PURE__ */ jsx5(
+                CheckIcon,
+                {
+                  className: "ml-auto size-3.5 shrink-0",
+                  "data-testid": "model-picker-effort-check"
+                }
+              ) : null
+            ]
+          },
+          effort
+        );
+      }) })
+    ] });
+  } else {
+    body = /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-0.5", "data-testid": "model-picker-providers", children: groups.map((group) => /* @__PURE__ */ jsx5(
+      PickerNavRow,
+      {
+        label: group.label,
+        hint: messages.billingHints[group.billingClass],
+        icon: /* @__PURE__ */ jsx5(BillingClassMark, { billingClass: group.billingClass }),
+        testId: `model-picker-rail-${group.billingClass}`,
+        onClick: () => go({ level: "models", rail: group.billingClass, modelId: null }, 1)
+      },
+      group.billingClass
+    )) });
+  }
+  return /* @__PURE__ */ jsxs5("div", { "data-testid": "model-picker-menu", className: "relative overflow-hidden", children: [
+    props.error ? /* @__PURE__ */ jsx5("p", { className: "px-2 py-1 text-xs text-og-status-failed", role: "alert", children: props.error }) : null,
+    /* @__PURE__ */ jsx5(PickerAnimatedPage, { pageKey, direction, children: body })
+  ] });
+}
+function ModelPolicyPicker(props) {
+  const [open, setOpen] = useState6(false);
+  const messages = useMemo5(
+    () => ({ ...defaultModelPolicyPickerMessages, ...props.messages }),
+    [props.messages]
+  );
+  const rows = effectiveRows(props);
+  const [nav, setNav] = usePickerNavState(props.sessionKey, rows, props.model);
+  const selected = findPickerRow(rows, props.model);
+  if (props.loading) {
+    return /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: cn(
+          "inline-flex h-8 w-40 shrink-0 animate-pulse rounded-full bg-og-surface-2",
+          props.className
+        ),
+        "aria-label": messages.loading,
+        "data-testid": "model-picker-loading"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(DropdownMenu.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx5(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        disabled: props.disabled,
+        "aria-label": messages.label,
+        className: cn(
+          "inline-flex h-8 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-xs text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
+          props.className
+        ),
+        children: [
+          /* @__PURE__ */ jsx5(
+            BillingClassMark,
+            {
+              billingClass: selected?.billingClass ?? (props.model.startsWith("codex/") ? "codex_subscription" : "opengeni_credits"),
+              className: "text-og-fg"
+            }
+          ),
+          /* @__PURE__ */ jsx5("span", { className: "truncate font-medium text-og-fg", children: selected?.label ?? props.model }),
+          /* @__PURE__ */ jsx5("span", { children: labelReasoningEffort(props.effort) }),
+          props.latencyMode === "fast" ? /* @__PURE__ */ jsx5(
+            ZapIcon,
+            {
+              className: "size-3.5 shrink-0 text-og-fg",
+              "aria-label": messages.fast,
+              "data-testid": "model-picker-fast-icon"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx5(ChevronDownIcon3, { className: "size-3 shrink-0" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx5(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx5(
+      DropdownMenu.Content,
+      {
+        align: "start",
+        side: props.menuSide ?? "bottom",
+        sideOffset: 8,
+        collisionPadding: 12,
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        className: "z-50 flex max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] w-72 max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 p-1.5 text-og-fg shadow-og-lg",
+        children: /* @__PURE__ */ jsx5("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx5(ModelPolicyPickerMenu, { ...props, nav, onNavChange: setNav }) })
+      }
+    ) })
+  ] });
+}
+
 export {
   INITIAL_TRANSCRIPTION_CONTROL_STATE,
   transitionTranscriptionControl,
@@ -2797,6 +3224,13 @@ export {
   SendButton,
   Help,
   Status,
-  ComposerTranscriptionControl
+  ComposerTranscriptionControl,
+  defaultModelPolicyPickerMessages,
+  BillingClassMark,
+  PickerNavRow,
+  PickerBackHeader,
+  PickerAnimatedPage,
+  ModelPolicyPickerMenu,
+  ModelPolicyPicker
 };
-//# sourceMappingURL=chunk-PVW56EVR.js.map
+//# sourceMappingURL=chunk-IP22SLO6.js.map