@opengeni/react 0.42.1 → 0.44.1

package/dist/{chunk-SJKT4TKW.js → chunk-23EJ676W.js}

@@ -131,6 +131,7 @@ function projectPickerRows(models) {
     return {
       id: catalog.id,
       label: catalog.label,
+      ...catalog.shortLabel ? { shortLabel: catalog.shortLabel } : {},
       billingClass,
       billingClassLabel: billingClassLabel(billingClass),
       selectable: catalog.availability.selectable,
@@ -147,6 +148,7 @@ function projectClientModelRows(models) {
     return {
       id: catalog.id,
       label: catalog.label,
+      ...catalog.shortLabel ? { shortLabel: catalog.shortLabel } : {},
       billingClass,
       billingClassLabel: billingClassLabel(billingClass),
       selectable: true,
@@ -208,4 +210,4 @@ export {
   findPickerRow,
   groupPickerRowsByBillingClass
 };
-//# sourceMappingURL=chunk-SJKT4TKW.js.map
+//# sourceMappingURL=chunk-23EJ676W.js.map

package/dist/chunk-23EJ676W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/model-policy.ts"],"sourcesContent":["import type { ClientModel, ReasoningEffort, WorkspaceModelCatalogModel } from \"@opengeni/sdk\";\n\nexport type PickerBillingClass = \"opengeni_credits\" | \"codex_subscription\" | \"byok\";\n\nexport type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogModel> = {\n  id: string;\n  label: string;\n  /** Catalog-curated compact label for dense UI; fall back to `label` when absent. */\n  shortLabel?: string | undefined;\n  billingClass: PickerBillingClass;\n  billingClassLabel: string;\n  selectable: boolean;\n  unavailableReason: string | null;\n  provider: string;\n  providerLabel: string;\n  catalog: TCatalog;\n};\n\nexport type LatencyModeId = \"standard\" | \"priority\" | \"fast\";\n\nconst BILLING_CLASS_ORDER: PickerBillingClass[] = [\n  \"opengeni_credits\",\n  \"codex_subscription\",\n  \"byok\",\n];\n\nconst BILLING_CLASS_LABELS: Record<PickerBillingClass, string> = {\n  opengeni_credits: \"OpenGeni\",\n  codex_subscription: \"Codex\",\n  byok: \"Your Gateway\",\n};\n\nconst AVAILABILITY_REASON_LABELS: Record<string, string> = {\n  missing_credential: \"Credentials required\",\n  needs_reauth: \"Reconnect required\",\n  credential_not_ready: \"Credential not ready\",\n  not_entitled: \"Not entitled\",\n  provider_unhealthy: \"Provider unavailable\",\n  policy_blocked: \"Blocked by workspace policy\",\n  unsupported: \"Unsupported\",\n};\n\nexport function billingClassForModel(model: ClientModel): PickerBillingClass {\n  if (model.source === \"codex\") {\n    return \"codex_subscription\";\n  }\n  if (model.source === \"workspace_gateway\") {\n    return \"byok\";\n  }\n  if (model.credentialSource?.kind === \"connected_subscription\") {\n    return \"codex_subscription\";\n  }\n  if (model.credentialSource?.kind === \"workspace_connection\") {\n    return \"byok\";\n  }\n  if (model.billing?.upstreamPayer === \"connected_subscription\") {\n    return \"codex_subscription\";\n  }\n  if (model.billing?.upstreamPayer === \"workspace\") {\n    return \"byok\";\n  }\n  return \"opengeni_credits\";\n}\n\nexport function billingClassLabel(billingClass: PickerBillingClass): string {\n  return BILLING_CLASS_LABELS[billingClass];\n}\n\nexport function availabilityReasonLabel(\n  reason: WorkspaceModelCatalogModel[\"availability\"][\"reason\"],\n): string | null {\n  if (!reason) {\n    return null;\n  }\n  return AVAILABILITY_REASON_LABELS[reason] ?? \"Unavailable\";\n}\n\nexport function effortOptionsForModel(model: ClientModel): ReasoningEffort[] {\n  const efforts = model.capabilities?.reasoning.efforts;\n  if (!efforts || efforts.length === 0) {\n    return [\"low\"];\n  }\n  const order: ReasoningEffort[] = [\"none\", \"minimal\", \"low\", \"medium\", \"high\", \"xhigh\", \"max\"];\n  return order.filter((effort) => efforts.includes(effort));\n}\n\nexport function defaultEffortForModel(model: ClientModel): ReasoningEffort {\n  const options = effortOptionsForModel(model);\n  const configured = model.capabilities?.reasoning.defaultEffort;\n  if (configured && options.includes(configured)) {\n    return configured;\n  }\n  return options[0] ?? \"low\";\n}\n\nexport function coerceReasoningEffortForModel(\n  model: ClientModel,\n  effort: ReasoningEffort,\n): ReasoningEffort {\n  const options = effortOptionsForModel(model);\n  if (options.includes(effort)) {\n    return effort;\n  }\n  return defaultEffortForModel(model);\n}\n\nexport function runnableLatencyModesForModel(model: ClientModel): LatencyModeId[] {\n  const modes = model.capabilities?.latencyModes ?? [];\n  return modes.filter((mode) => mode.runnable).map((mode) => mode.id);\n}\n\nexport function labelLatencyMode(mode: LatencyModeId): string {\n  if (mode === \"fast\") {\n    return \"Fast\";\n  }\n  if (mode === \"priority\") {\n    return \"Priority\";\n  }\n  return \"Standard\";\n}\n\nexport function labelReasoningEffort(effort: ReasoningEffort): string {\n  if (effort === \"xhigh\") {\n    return \"Extra high\";\n  }\n  return effort.slice(0, 1).toUpperCase() + effort.slice(1);\n}\n\nexport function payerSummaryForModel(model: ClientModel): string {\n  const billing = model.billing;\n  if (!billing) {\n    return \"Route unknown\";\n  }\n  if (billing.metering === \"opengeni_credits\") {\n    return \"OpenGeni credits · automatic managed route\";\n  }\n  if (billing.upstreamPayer === \"connected_subscription\") {\n    return \"Codex subscription · external billing\";\n  }\n  if (billing.upstreamPayer === \"workspace\") {\n    return \"Billed to your AI Gateway\";\n  }\n  return \"Deployment route · external billing\";\n}\n\nexport function advancedSourceSummary(model: ClientModel): string | null {\n  const source = model.credentialSource;\n  if (!source) {\n    return null;\n  }\n  if (source.kind === \"connected_subscription\") {\n    return \"Connected Codex subscription\";\n  }\n  if (source.kind === \"workspace_connection\") {\n    return \"Workspace AI Gateway\";\n  }\n  if (source.kind === \"deployment\") {\n    return source.mechanism === \"azure_ad_bearer\"\n      ? \"Deployment Azure identity\"\n      : \"Deployment API key\";\n  }\n  return null;\n}\n\nexport function projectPickerRows(models: WorkspaceModelCatalogModel[]): PickerModelRow[] {\n  return models\n    .filter((catalog) => {\n      const billingClass = billingClassForModel(catalog);\n      return billingClass === \"opengeni_credits\" || catalog.credentialReadiness.status === \"ready\";\n    })\n    .map((catalog) => {\n      const billingClass = billingClassForModel(catalog);\n      return {\n        id: catalog.id,\n        label: catalog.label,\n        ...(catalog.shortLabel ? { shortLabel: catalog.shortLabel } : {}),\n        billingClass,\n        billingClassLabel: billingClassLabel(billingClass),\n        selectable: catalog.availability.selectable,\n        unavailableReason: catalog.availability.selectable\n          ? null\n          : availabilityReasonLabel(catalog.availability.reason),\n        provider: catalog.provider,\n        providerLabel: catalog.providerLabel,\n        catalog,\n      };\n    });\n}\n\n/** Project the lightweight client-config model list into the same picker contract. */\nexport function projectClientModelRows(models: ClientModel[]): PickerModelRow<ClientModel>[] {\n  return models.map((catalog) => {\n    const billingClass = billingClassForModel(catalog);\n    return {\n      id: catalog.id,\n      label: catalog.label,\n      ...(catalog.shortLabel ? { shortLabel: catalog.shortLabel } : {}),\n      billingClass,\n      billingClassLabel: billingClassLabel(billingClass),\n      selectable: true,\n      unavailableReason: null,\n      provider: catalog.provider,\n      providerLabel: catalog.providerLabel,\n      catalog,\n    };\n  });\n}\n\nexport function sortPickerRows<TCatalog extends ClientModel>(\n  rows: PickerModelRow<TCatalog>[],\n): PickerModelRow<TCatalog>[] {\n  return [...rows].sort((left, right) => {\n    const classDelta =\n      BILLING_CLASS_ORDER.indexOf(left.billingClass) -\n      BILLING_CLASS_ORDER.indexOf(right.billingClass);\n    if (classDelta !== 0) {\n      return classDelta;\n    }\n    if (left.selectable !== right.selectable) {\n      return left.selectable ? -1 : 1;\n    }\n    return left.label.localeCompare(right.label);\n  });\n}\n\nexport function findPickerRow<TCatalog extends ClientModel>(\n  rows: PickerModelRow<TCatalog>[],\n  modelId: string,\n): PickerModelRow<TCatalog> | null {\n  return rows.find((row) => row.id === modelId) ?? null;\n}\n\nexport function groupPickerRowsByBillingClass(\n  rows: PickerModelRow[],\n): Array<{ billingClass: PickerBillingClass; label: string; rows: PickerModelRow[] }>;\nexport function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(\n  rows: PickerModelRow<TCatalog>[],\n): Array<{\n  billingClass: PickerBillingClass;\n  label: string;\n  rows: PickerModelRow<TCatalog>[];\n}>;\nexport function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(\n  rows: PickerModelRow<TCatalog>[],\n): Array<{\n  billingClass: PickerBillingClass;\n  label: string;\n  rows: PickerModelRow<TCatalog>[];\n}> {\n  const sorted = sortPickerRows(rows);\n  const groups: Array<{\n    billingClass: PickerBillingClass;\n    label: string;\n    rows: PickerModelRow<TCatalog>[];\n  }> = [];\n  for (const row of sorted) {\n    const existing = groups.find((group) => group.billingClass === row.billingClass);\n    if (existing) {\n      existing.rows.push(row);\n      continue;\n    }\n    groups.push({\n      billingClass: row.billingClass,\n      label: row.billingClassLabel,\n      rows: [row],\n    });\n  }\n  return groups;\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-UWYTCQWW.js → chunk-KC27K42G.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-Q2NCKWTK.js";
 import {
   groupPickerRowsByBillingClass
-} from "./chunk-SJKT4TKW.js";
+} from "./chunk-23EJ676W.js";
 import {
   Tooltip,
   TooltipContent,
@@ -2613,16 +2613,60 @@ var defaultChatComposerMessages = {
   formatBytes,
   formatRelativeTime
 };
-function applyComposerTextareaHeight(textarea, maxPx = 220) {
-  if (textarea.scrollHeight > textarea.clientHeight + 1) {
-    textarea.style.height = `${Math.min(textarea.scrollHeight, maxPx)}px`;
-    return;
+var composerHeightMirror = null;
+function measureComposerContentHeight(textarea) {
+  if (typeof document === "undefined") {
+    return textarea.scrollHeight;
+  }
+  const width = textarea.clientWidth;
+  if (width <= 0) {
+    return textarea.offsetHeight;
+  }
+  let mirror = composerHeightMirror;
+  if (!mirror) {
+    mirror = document.createElement("textarea");
+    mirror.setAttribute("aria-hidden", "true");
+    mirror.tabIndex = -1;
+    mirror.rows = 1;
+    mirror.style.cssText = "position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;height:auto;min-height:0;max-height:none;overflow:hidden;z-index:-1;";
+    composerHeightMirror = mirror;
   }
+  const style = getComputedStyle(textarea);
+  mirror.style.width = `${width}px`;
+  mirror.style.boxSizing = style.boxSizing;
+  mirror.style.font = style.font;
+  mirror.style.fontSize = style.fontSize;
+  mirror.style.fontFamily = style.fontFamily;
+  mirror.style.fontWeight = style.fontWeight;
+  mirror.style.fontStyle = style.fontStyle;
+  mirror.style.letterSpacing = style.letterSpacing;
+  mirror.style.lineHeight = style.lineHeight;
+  mirror.style.textTransform = style.textTransform;
+  mirror.style.paddingTop = style.paddingTop;
+  mirror.style.paddingRight = style.paddingRight;
+  mirror.style.paddingBottom = style.paddingBottom;
+  mirror.style.paddingLeft = style.paddingLeft;
+  mirror.style.borderTopWidth = style.borderTopWidth;
+  mirror.style.borderRightWidth = style.borderRightWidth;
+  mirror.style.borderBottomWidth = style.borderBottomWidth;
+  mirror.style.borderLeftWidth = style.borderLeftWidth;
+  mirror.style.borderStyle = style.borderStyle;
+  mirror.style.whiteSpace = style.whiteSpace;
+  mirror.style.wordBreak = style.wordBreak;
+  mirror.style.overflowWrap = style.overflowWrap;
+  mirror.value = textarea.value;
+  if (!mirror.isConnected) {
+    document.documentElement.appendChild(mirror);
+  }
+  return mirror.scrollHeight;
+}
+function applyComposerTextareaHeight(textarea, maxPx = 220, measure = measureComposerContentHeight) {
   const before = textarea.offsetHeight;
-  textarea.style.height = "auto";
-  const nextPx = Math.min(textarea.scrollHeight, maxPx);
+  const nextPx = Math.min(
+    textarea.scrollHeight > textarea.clientHeight + 1 ? textarea.scrollHeight : measure(textarea),
+    maxPx
+  );
   if (Math.abs(nextPx - before) < 1) {
-    textarea.style.height = `${before}px`;
     return;
   }
   textarea.style.height = `${nextPx}px`;
@@ -3150,7 +3194,8 @@ var Footer = forwardRef(function ComposerFooter({ className, ...props }, ref) {
       ref,
       className: cn(
         "flex items-end gap-1.5 px-2 pb-2 pt-0.5 sm:px-2.5 sm:pb-2.5",
-        "max-sm:items-center max-sm:gap-1",
+        // Mobile: one control row — never wrap into a second toolbar line.
+        "max-sm:flex-nowrap max-sm:items-center max-sm:gap-1",
         className
       )
     }
@@ -3190,7 +3235,11 @@ var Actions = forwardRef(function ComposerActions({ className, ...props }, ref)
     {
       ...props,
       ref,
-      className: cn("ml-auto flex shrink-0 items-center gap-1.5", className)
+      className: cn(
+        "ml-auto flex shrink-0 items-center gap-1.5",
+        "max-sm:flex-nowrap max-sm:gap-1",
+        className
+      )
     }
   );
 });
@@ -3743,7 +3792,8 @@ function ComposerTranscriptionControl({
   messages: overrides,
   className,
   createRecordingStore,
-  createOwnerId
+  createOwnerId,
+  suppressed = false
 }) {
   const composer = useChatComposer();
   const messages = { ...defaultMessages, ...overrides };
@@ -3751,7 +3801,7 @@ function ComposerTranscriptionControl({
     client,
     workspaceId,
     capability,
-    enabled: workspaceEnabled,
+    enabled: workspaceEnabled && !suppressed,
     value: composer.value,
     setValue: composer.setValue,
     focusInput: composer.focusInput,
@@ -3760,6 +3810,13 @@ function ComposerTranscriptionControl({
     createOwnerId
   });
   const { status } = transcription;
+  const cancelTranscription = transcription.cancel;
+  useEffect4(() => {
+    if (!suppressed) return;
+    if (status === "recording" || status === "requesting-permission") {
+      cancelTranscription();
+    }
+  }, [cancelTranscription, status, suppressed]);
   const active = status === "requesting-permission" || status === "recording" || status === "saving" || status === "transcribing";
   const recoverable = transcription.hasRecoverableRecording && (status === "recovered" || status === "transcript-ready" || status === "error");
   const savedTranscript = status === "transcript-ready" && transcription.savedTranscript !== null;
@@ -3774,12 +3831,16 @@ function ComposerTranscriptionControl({
     }
     void transcription.start();
   }
-  return /* @__PURE__ */ jsxs4(
-    "span",
+  return /* @__PURE__ */ jsx4(AnimatePresence3, { initial: false, children: suppressed ? null : /* @__PURE__ */ jsx4(
+    motion3.span,
     {
-      className: cn("inline-flex min-w-0 items-center gap-1.5", className),
+      initial: { opacity: 0, width: 0 },
+      animate: { opacity: 1, width: "auto" },
+      exit: { opacity: 0, width: 0 },
+      transition: { duration: 0.36, ease: [0.22, 1, 0.36, 1] },
+      className: cn("inline-flex min-w-0 overflow-hidden", className),
       "data-transcription-status": status,
-      children: [
+      children: /* @__PURE__ */ jsxs4("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [
         /* @__PURE__ */ jsx4(AnimatePresence3, { mode: "popLayout", initial: false, children: recoverable ? /* @__PURE__ */ jsxs4(
           motion3.span,
           {
@@ -3896,6 +3957,7 @@ function ComposerTranscriptionControl({
           motion3.button,
           {
             type: "button",
+            "data-og-composer-dictate": true,
             initial: { opacity: 0, scale: 0.96 },
             animate: { opacity: 1, scale: 1 },
             exit: { opacity: 0, scale: 0.96 },
@@ -3920,10 +3982,19 @@ function ComposerTranscriptionControl({
             children: errorMessage3
           }
         ) }) : null,
-        /* @__PURE__ */ jsx4("span", { className: "sr-only", role: status === "error" ? "alert" : "status", "aria-live": "polite", children: announcement })
-      ]
-    }
-  );
+        /* @__PURE__ */ jsx4(
+          "span",
+          {
+            className: "sr-only",
+            role: status === "error" ? "alert" : "status",
+            "aria-live": "polite",
+            children: announcement
+          }
+        )
+      ] })
+    },
+    "composer-dictate"
+  ) });
 }
 function VoiceWaveform({
   stream,
@@ -4091,4 +4162,4 @@ export {
   Status,
   ComposerTranscriptionControl
 };
-//# sourceMappingURL=chunk-UWYTCQWW.js.map
+//# sourceMappingURL=chunk-KC27K42G.js.map