@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

package/src/model-mark-paths.ts

@@ -0,0 +1,53 @@
+// Model maker marks as plain path data (24×24 viewBox, filled with the current
+// color), shared by the web SVG components and native renderers so both draw
+// identical geometry.
+import { modelVendor, type ModelDisplayInput, type ModelVendor } from "@opengeni/sdk/model-display";
+
+/** ChatGPT / OpenAI mark (Simple Icons, CC0). */
+export const CHATGPT_MARK_PATH =
+  "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";
+
+/** Claude mark (Simple Icons, CC0; https://github.com/simple-icons/simple-icons). */
+export const CLAUDE_MARK_PATH =
+  "m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z";
+
+/**
+ * MIT License
+ *
+ * Copyright (c) 2023 LobeHub
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * Source: https://raw.githubusercontent.com/lobehub/lobe-icons/master/src/Grok/components/Mono.tsx
+ */
+export const GROK_MARK_PATH =
+  "M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815";
+
+export type MarkedModelVendor = Extract<ModelVendor, "openai" | "anthropic" | "xai">;
+
+export const MODEL_MARK_PATHS: Record<MarkedModelVendor, string> = {
+  openai: CHATGPT_MARK_PATH,
+  anthropic: CLAUDE_MARK_PATH,
+  xai: GROK_MARK_PATH,
+};
+
+/** The maker whose logo marks this model, or null for the neutral fallback. */
+export function modelMarkVendor(model: ModelDisplayInput): MarkedModelVendor | null {
+  const vendor = modelVendor(model);
+  return vendor === "openai" || vendor === "anthropic" || vendor === "xai" ? vendor : null;
+}

package/src/model-picker-model.ts

@@ -0,0 +1,330 @@
+/**
+ * The model picker's presentation logic, free of any renderer: which rows show,
+ * how they group and filter, and which thinking/latency controls apply. The web
+ * menu and native sheets both render from this.
+ */
+import type { ClientModel, LatencyMode, ReasoningEffort } from "@opengeni/sdk";
+import {
+  coerceReasoningEffortForModel,
+  effortOptionsForModel,
+  findPickerRow,
+  groupPickerRowsByBillingClass,
+  payerSummaryForModel,
+  projectClientModelRows,
+  runnableLatencyModesForModel,
+  scopedBillingClassLabel,
+  type PickerBillingClass,
+  type PickerModelRow,
+} from "./model-policy";
+
+type ClientPickerModelRow = PickerModelRow<ClientModel>;
+
+export type ModelPolicyPickerMessages = {
+  label: string;
+  loading: string;
+  noModels: string;
+  connectTitle: string;
+  connectBody: string;
+  connectAction: string;
+  thinking: string;
+  fast: string;
+  fastRateHint: string;
+  codexOnly: string;
+  searchLabel?: string;
+  searchPlaceholder?: string;
+  currentModel?: string;
+  noMatches?: string;
+  unsupportedAttachments?: string;
+  thinkingEffort?: string;
+  selected?: string;
+  free?: string;
+
+  billingHints: Record<PickerBillingClass, string>;
+};
+
+export const defaultModelPolicyPickerMessages: ModelPolicyPickerMessages = {
+  label: "Model and effort",
+  loading: "Loading model catalog…",
+  noModels: "No models available.",
+  connectTitle: "Connect a model",
+  connectBody: "Use a subscription or a provider key you already have.",
+  connectAction: "Open Models",
+  thinking: "Thinking",
+  fast: "Fast",
+  fastRateHint: "2× rate",
+  codexOnly: "Codex-only session",
+  searchLabel: "Search models or providers",
+  searchPlaceholder: "Search models or providers…",
+  currentModel: "Current model",
+  noMatches: "No matching models. Try a model or provider name.",
+  unsupportedAttachments: "This model cannot view the attached images.",
+  thinkingEffort: "Thinking effort",
+  selected: "Selected",
+  free: "Free",
+
+  billingHints: {
+    opengeni_credits: "Provided by Opengeni",
+    external: "Provider terms and limits apply",
+    codex_subscription: "ChatGPT / Codex plan",
+    supergrok_subscription: "SuperGrok / xAI plan",
+    claude_subscription: "Claude plan",
+    byok: "Billed to the connected provider account",
+    organization_byok: "Billed to the connected provider account",
+  },
+};
+
+/** Host branding for one payment group; the icon type belongs to the renderer. */
+export type ModelPickerGroupBranding<TIcon = unknown> = {
+  label?: string | undefined;
+  /** Omit to preserve the default; null hides the supporting text. */
+  description?: string | null | undefined;
+  /** Decorative, non-interactive content. Omit for the default; null hides it. */
+  icon?: TIcon | undefined;
+};
+
+export type ModelPickerGroupPresentation<TIcon = unknown> = Partial<
+  Record<PickerBillingClass, ModelPickerGroupBranding<TIcon>>
+>;
+
+/** The renderer-neutral inputs every picker surface shares. */
+export type ModelPickerInput<TIcon = unknown> = {
+  groupPresentation?: ModelPickerGroupPresentation<TIcon> | undefined;
+  models?: ClientModel[] | undefined;
+  rows?: PickerModelRow[] | undefined;
+  hasImageAttachments?: boolean | undefined;
+  model: string;
+  effort: ReasoningEffort;
+  latencyMode: LatencyMode;
+  codexOnly?: boolean | undefined;
+  collapseScopes?: boolean | undefined;
+  allowLatencyMode?: boolean | undefined;
+  messages?: Partial<ModelPolicyPickerMessages> | undefined;
+};
+
+/** Models settings keeps naming who is billed for a key. */
+export const SCOPED_BILLING_HINTS: Partial<Record<PickerBillingClass, string>> = {
+  byok: "Billed to the workspace provider account",
+  organization_byok: "Billed to the organization provider account",
+};
+
+export function isCodexPickerModel(model: ClientModel): boolean {
+  return model.id.startsWith("codex/") || model.source === "codex";
+}
+
+/** The payment group a selection the catalog no longer lists most likely belonged to. */
+export function billingClassForMissingSelection(modelId: string): PickerBillingClass {
+  if (modelId.startsWith("workspace-claude-subscription/")) return "claude_subscription";
+  if (modelId.startsWith("workspace-anthropic/")) return "byok";
+  if (modelId.startsWith("organization-claude-subscription/")) return "claude_subscription";
+  if (modelId.startsWith("organization-anthropic/")) return "organization_byok";
+  if (modelId.startsWith("workspace-gateway/")) return "byok";
+  if (modelId.startsWith("workspace-openrouter/")) return "byok";
+  if (modelId.startsWith("workspace-opper/")) return "byok";
+  // A deployment OpenRouter or Opper ID does not encode its workspace-facing cost.
+  // Missing rows therefore use the credits-safe rail instead of falsely
+  // claiming that an unknown former selection was externally funded.
+  if (modelId.startsWith("openrouter/")) return "opengeni_credits";
+  if (modelId.startsWith("opper/")) return "opengeni_credits";
+  if (modelId.startsWith("codex/")) return "codex_subscription";
+  if (modelId.startsWith("supergrok/")) return "supergrok_subscription";
+  return "opengeni_credits";
+}
+
+function applyCodexOnly(
+  rows: ClientPickerModelRow[],
+  codexOnly: boolean,
+  unavailableReason: string,
+): ClientPickerModelRow[] {
+  if (!codexOnly) return rows;
+  return rows.map((row) =>
+    isCodexPickerModel(row.catalog)
+      ? row
+      : {
+          ...row,
+          selectable: false,
+          unavailableReason: row.unavailableReason ?? unavailableReason,
+        },
+  );
+}
+
+/**
+ * Host branding for a payment group. While scopes are collapsed, API keys are
+ * one group, so either API-key presentation serves both.
+ */
+export function groupPresentationFor<TIcon>(
+  props: {
+    groupPresentation?: ModelPickerGroupPresentation<TIcon> | undefined;
+    collapseScopes?: boolean | undefined;
+  },
+  billingClass: PickerBillingClass,
+): ModelPickerGroupBranding<TIcon> | undefined {
+  const own = props.groupPresentation?.[billingClass];
+  if (own !== undefined || props.collapseScopes === false) return own;
+  if (billingClass === "byok") return props.groupPresentation?.organization_byok;
+  if (billingClass === "organization_byok") return props.groupPresentation?.byok;
+  return undefined;
+}
+
+export function effectiveRows<TIcon>(props: ModelPickerInput<TIcon>): ClientPickerModelRow[] {
+  const rows = props.rows !== undefined ? props.rows : projectClientModelRows(props.models ?? []);
+  const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
+  return applyCodexOnly(rows, props.codexOnly === true, messages.codexOnly).map((row) => {
+    const scoped =
+      props.collapseScopes === false
+        ? {
+            ...row,
+            label: row.catalog.label,
+            billingClassLabel: scopedBillingClassLabel(row.billingClass),
+          }
+        : row;
+    if (props.collapseScopes === false) {
+      if (row.catalog.shortLabel) scoped.shortLabel = row.catalog.shortLabel;
+      else delete scoped.shortLabel;
+    }
+    const label = groupPresentationFor(props, row.billingClass)?.label;
+    return label === undefined ? scoped : { ...scoped, billingClassLabel: label };
+  });
+}
+
+export type ModelPickerMenuGroup = {
+  billingClass: PickerBillingClass;
+  label: string;
+  description: string | null;
+  rows: ClientPickerModelRow[];
+};
+
+export type ModelPickerThinking = {
+  efforts: ReasoningEffort[];
+  value: ReasoningEffort;
+  showThinking: boolean;
+  showFast: boolean;
+  /** The selected row cannot run, so its controls are read-only. */
+  disabled: boolean;
+};
+
+export type ModelPickerMenuView = {
+  messages: ModelPolicyPickerMessages;
+  rows: ClientPickerModelRow[];
+  selected: ClientPickerModelRow | null;
+  /** Any row can run; otherwise the surface offers to connect models instead. */
+  anySelectable: boolean;
+  /** Whether the query is non-empty (decides "no matches" versus "no models"). */
+  searching: boolean;
+  groups: ModelPickerMenuGroup[];
+  matchCount: number;
+  /** Thinking and Fast controls for the selected model, or null when it has none. */
+  thinking: ModelPickerThinking | null;
+  /** The selected model cannot view images the draft carries. */
+  unsupportedAttachments: boolean;
+};
+
+/** Everything a picker menu shows for this input and search query. */
+export function modelPickerMenuView<TIcon>(
+  props: ModelPickerInput<TIcon>,
+  query: string,
+): ModelPickerMenuView {
+  const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
+  const rows = effectiveRows(props);
+  const selected = findPickerRow(rows, props.model);
+  const words = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
+  const filtered = rows.filter((row) => {
+    const description = groupPresentationFor(props, row.billingClass)?.description;
+    const text =
+      `${row.label} ${row.id} ${row.providerLabel} ${row.billingClassLabel} ${description === undefined ? payerSummaryForModel(row.catalog) : (description ?? "")}`.toLowerCase();
+    return words.every((word) => text.includes(word));
+  });
+  const matchingIds = new Set(filtered.map((row) => row.id));
+  const groups = groupPickerRowsByBillingClass(rows, {
+    codexOnly: props.codexOnly === true,
+    selectedId: props.model,
+    collapseScopes: props.collapseScopes !== false,
+  })
+    .map((group) => {
+      const presentation = groupPresentationFor(props, group.billingClass);
+      const override = presentation?.description;
+      const defaultHint =
+        props.collapseScopes === false &&
+        messages.billingHints[group.billingClass] ===
+          defaultModelPolicyPickerMessages.billingHints[group.billingClass]
+          ? (SCOPED_BILLING_HINTS[group.billingClass] ?? messages.billingHints[group.billingClass])
+          : messages.billingHints[group.billingClass];
+      return {
+        billingClass: group.billingClass,
+        label: presentation?.label ?? group.label,
+        rows: group.rows.filter((row) => matchingIds.has(row.id)),
+        description:
+          override === undefined
+            ? group.billingClass === "opengeni_credits"
+              ? null
+              : defaultHint
+            : override,
+      };
+    })
+    .filter((group) => group.rows.length > 0);
+  const anySelectable = rows.some((row) => row.selectable);
+  const unsupportedAttachments =
+    props.hasImageAttachments === true &&
+    selected?.catalog.capabilities?.inputModalities.includes("image") === false;
+  return {
+    messages,
+    rows,
+    selected,
+    anySelectable,
+    searching: words.length > 0,
+    groups,
+    matchCount: filtered.length,
+    thinking: selected ? modelPickerThinking(props, selected) : null,
+    unsupportedAttachments,
+  };
+}
+
+function modelPickerThinking(
+  props: Pick<ModelPickerInput, "effort" | "allowLatencyMode">,
+  selected: ClientPickerModelRow,
+): ModelPickerThinking | null {
+  const efforts = effortOptionsForModel(selected.catalog);
+  const showThinking =
+    efforts.length > 1 && selected.catalog.capabilities?.reasoning.runnable !== false;
+  const showFast =
+    props.allowLatencyMode !== false &&
+    runnableLatencyModesForModel(selected.catalog).includes("fast");
+  if (!showThinking && !showFast) return null;
+  return {
+    efforts,
+    value: coerceReasoningEffortForModel(selected.catalog, props.effort),
+    showThinking,
+    showFast,
+    disabled: !selected.selectable,
+  };
+}
+
+export type ModelPickerChoice = {
+  /** The new model, or null when the row is already selected. */
+  model: string | null;
+  /** Always reported, so hosts can commit model and effort together. */
+  effort: ReasoningEffort;
+  /** Fast falls back to standard when the new model cannot run it. */
+  latencyMode: LatencyMode | null;
+};
+
+/** What choosing a row changes, or null when the row cannot be chosen. */
+export function modelPickerChoice(
+  props: Pick<ModelPickerInput, "model" | "effort" | "latencyMode">,
+  row: ClientPickerModelRow,
+): ModelPickerChoice | null {
+  if (!row.selectable) return null;
+  return {
+    model: row.id === props.model ? null : row.id,
+    effort: coerceReasoningEffortForModel(row.catalog, props.effort),
+    latencyMode:
+      props.latencyMode !== "standard" &&
+      !runnableLatencyModesForModel(row.catalog).includes(props.latencyMode)
+        ? "standard"
+        : null,
+  };
+}
+
+/** The web segmented control's short labels ("X-high" fits a phone row). */
+export function compactEffortLabel(effort: ReasoningEffort, label: string): string {
+  return effort === "xhigh" ? "X-high" : label;
+}