@opengeni/react 3.1.0 → 3.1.2

package/src/components/model-mark.tsx

@@ -0,0 +1,102 @@
+import { CHATGPT_MARK_PATH } from "../model-mark-paths";
+import {
+  modelDisplayName,
+  modelLogoUrl,
+  modelVendor,
+  type ModelDisplayInput,
+  type ModelVendor,
+} from "@opengeni/sdk/model-display";
+import { SparklesIcon } from "lucide-react";
+import { useState, type ReactNode, type SVGProps } from "react";
+import { cn } from "../lib/cn";
+import { ClaudeMark } from "./claude-mark";
+import { GrokMark } from "./grok-mark";
+
+/** ChatGPT / OpenAI mark (Simple Icons path), currentColor like the other marks. */
+export function ChatGptMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+      <path d={CHATGPT_MARK_PATH} />
+    </svg>
+  );
+}
+
+const MARKED_VENDORS: ReadonlySet<ModelVendor> = new Set(["openai", "anthropic", "xai"]);
+
+/** True when `ModelMark` has a real maker logo for this model (not the neutral fallback). */
+export function modelHasMark(model: ModelDisplayInput): boolean {
+  const vendor = modelVendor(model);
+  return modelLogoUrl(model) !== null || (vendor !== null && MARKED_VENDORS.has(vendor));
+}
+
+/**
+ * The catalog's maker logo, with bundled maker logos and a neutral fallback.
+ * Makers without a configured or bundled logo get a neutral mark, so an org- and
+ * a workspace-connected copy of one model always look the same.
+ */
+export function ModelMark(props: {
+  model: ModelDisplayInput;
+  className?: string | undefined;
+  /** Shown when the maker has no bundled logo. Defaults to a neutral sparkle. */
+  fallback?: ReactNode;
+  "aria-label"?: string | undefined;
+}) {
+  const logoUrl = modelLogoUrl(props.model);
+  const [failedUrl, setFailedUrl] = useState<string | null>(null);
+  const vendor = modelVendor(props.model);
+  const className = cn("size-3.5 shrink-0", props.className);
+  const label = props["aria-label"];
+  const a11y = label ? { role: "img" as const, "aria-label": label } : { "aria-hidden": true };
+  const mark =
+    logoUrl && logoUrl !== failedUrl ? (
+      <img
+        src={logoUrl}
+        alt=""
+        className="size-full object-contain"
+        referrerPolicy="no-referrer"
+        onError={() => setFailedUrl(logoUrl)}
+      />
+    ) : vendor === "openai" ? (
+      <ChatGptMark className="size-full" />
+    ) : vendor === "anthropic" ? (
+      <ClaudeMark className="size-full" />
+    ) : vendor === "xai" ? (
+      <GrokMark className="size-full" />
+    ) : props.fallback !== undefined ? (
+      props.fallback
+    ) : (
+      <SparklesIcon className="size-full" aria-hidden />
+    );
+  if (mark === null) return null;
+  return (
+    <span
+      className={cn("inline-flex items-center justify-center [&>svg]:size-full", className)}
+      data-model-vendor={vendor ?? "unknown"}
+      {...a11y}
+    >
+      {mark}
+    </span>
+  );
+}
+
+/**
+ * A model as people should see it outside model settings: the maker's mark and
+ * the clean display name. Never a routing prefix, connection id or scope.
+ */
+export function ModelName(props: {
+  model: ModelDisplayInput;
+  /** Hide the maker mark for dense text-only contexts. */
+  mark?: boolean | undefined;
+  className?: string | undefined;
+  markClassName?: string | undefined;
+}) {
+  const name = modelDisplayName(props.model);
+  return (
+    <span className={cn("inline-flex min-w-0 items-center gap-1.5", props.className)} title={name}>
+      {props.mark === false ? null : (
+        <ModelMark model={props.model} className={props.markClassName} />
+      )}
+      <span className="min-w-0 truncate">{name}</span>
+    </span>
+  );
+}

package/src/components/model-picker.tsx

@@ -1,4 +1,5 @@
 import type { ClientModel } from "@opengeni/sdk";
+import { modelDisplayName } from "@opengeni/sdk/model-display";
 import { ChevronDownIcon } from "lucide-react";
 import { useId, useMemo } from "react";
 import { groupPickerRowsByBillingClass, type PickerModelRow } from "../model-policy";
@@ -59,7 +60,14 @@ function providerGroups(models: ClientModel[], codexOnly: boolean) {
       optionDisabled: codexOnly && !isCodexClientModel(model),
     });
   }
-  return [...byProvider.values()];
+  const groups = [...byProvider.values()];
+  if (codexOnly) {
+    const codexIndex = groups.findIndex((group) =>
+      group.models.some((model) => !model.optionDisabled && isCodexClientModel(model)),
+    );
+    if (codexIndex > 0) groups.unshift(...groups.splice(codexIndex, 1));
+  }
+  return groups;
 }
 
 export function ModelPicker({
@@ -78,8 +86,11 @@ export function ModelPicker({
     [rows, codexOnly],
   );
   const billingGroups = useMemo(
-    () => (effectiveRows.length > 0 ? groupPickerRowsByBillingClass(effectiveRows) : []),
-    [effectiveRows],
+    () =>
+      effectiveRows.length > 0
+        ? groupPickerRowsByBillingClass(effectiveRows, { codexOnly, selectedId: value })
+        : [],
+    [effectiveRows, codexOnly, value],
   );
   const providerGroupList = useMemo(() => providerGroups(models, codexOnly), [models, codexOnly]);
   const useBillingGroups = Boolean(effectiveRows.length);
@@ -121,7 +132,7 @@ export function ModelPicker({
               <optgroup key={group.label} label={group.label}>
                 {group.models.map((model) => (
                   <option key={model.id} value={model.id} disabled={model.optionDisabled}>
-                    {model.label}
+                    {modelDisplayName(model)}
                   </option>
                 ))}
               </optgroup>

package/src/components/model-policy-picker-menu.tsx

@@ -0,0 +1,371 @@
+import type { ClientModel, ReasoningEffort } from "@opengeni/sdk";
+import { ArrowRightIcon, CheckIcon, SearchIcon, ZapIcon } from "lucide-react";
+import { useRef, useState, type RefObject, type CSSProperties } from "react";
+import { Popover, RadioGroup } from "radix-ui";
+import { cn } from "../lib/cn";
+import {
+  MENU_CHECK_CLASS,
+  MENU_LABEL_CLASS,
+  MENU_NOTE_CLASS,
+  MENU_SURFACE_CLASS,
+} from "../lib/menu-styles";
+import { labelReasoningEffort, type PickerModelRow } from "../model-policy";
+import {
+  compactEffortLabel,
+  groupPresentationFor,
+  modelPickerChoice,
+  modelPickerMenuView,
+} from "../model-picker-model";
+import {
+  BillingClassMark,
+  defaultModelPolicyPickerMessages,
+  PickerNavRow,
+  type ModelPolicyPickerProps,
+} from "./model-policy-picker";
+import { ModelMark } from "./model-mark";
+type ClientPickerModelRow = PickerModelRow<ClientModel>;
+
+/** Model selection stays flat; reasoning never becomes a navigation destination. */
+export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
+  const [query, setQuery] = useState("");
+  const view = modelPickerMenuView(props, query);
+  const { messages, rows, groups } = view;
+  const selected = view.selected;
+  const choose = (row: ClientPickerModelRow) => {
+    if (props.disabled) return;
+    const choice = modelPickerChoice(props, row);
+    if (!choice) return;
+    if (choice.model !== null) props.onModelChange(choice.model);
+    // Hosts may commit the combined model/effort draft through this callback.
+    props.onEffortChange(choice.effort);
+    if (choice.latencyMode !== null) props.onLatencyModeChange(choice.latencyMode);
+  };
+  const modelRow = (row: ClientPickerModelRow) => (
+    <PickerNavRow
+      key={row.id}
+      icon={
+        props.collapseScopes === false ? undefined : (
+          <ModelMark model={row.catalog} className="size-4 text-og-fg-muted" />
+        )
+      }
+      label={row.label}
+      hint={row.unavailableReason ?? row.fundingHint}
+      disabled={props.disabled || !row.selectable}
+      title={[row.label, row.unavailableReason ?? row.fundingHint].filter(Boolean).join(" · ")}
+      active={row.selectable && row.id === props.model}
+      showChevron={false}
+      trailing={
+        row.catalog.cost === "free" || row.id === props.model ? (
+          <span className="flex items-center gap-2">
+            {row.catalog.cost === "free" ? (
+              <span className="rounded-full bg-og-surface-2 px-1.5 py-0.5 text-og-control text-og-fg-muted">
+                {messages.free}
+              </span>
+            ) : null}
+            {row.id === props.model ? (
+              <CheckIcon className={MENU_CHECK_CLASS} aria-label={messages.selected} />
+            ) : null}
+          </span>
+        ) : null
+      }
+      testId={`model-picker-choice-${row.id}`}
+      onClick={() => choose(row)}
+    />
+  );
+  return (
+    <div
+      data-testid="model-picker-menu"
+      className="flex min-h-0 flex-col"
+      onKeyDown={(event) => {
+        if (
+          !(event.target instanceof HTMLButtonElement) ||
+          !["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)
+        )
+          return;
+        const buttons = Array.from(
+          event.currentTarget.querySelectorAll<HTMLButtonElement>(
+            '[data-testid^="model-picker-choice-"]:not(:disabled)',
+          ),
+        );
+        const index = buttons.indexOf(event.target);
+        if (index < 0) return;
+        event.preventDefault();
+        const next =
+          event.key === "Home"
+            ? 0
+            : event.key === "End"
+              ? buttons.length - 1
+              : (index + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length;
+        buttons[next]?.focus();
+      }}
+    >
+      {rows.some((row) => row.selectable) ? (
+        <div className="border-b border-og-border py-1">
+          <label className="og-model-policy-search flex items-center gap-2 px-2.5 py-0.5">
+            <SearchIcon className="size-4 shrink-0 text-og-fg-subtle" aria-hidden />
+            <input
+              aria-label={messages.searchLabel}
+              placeholder={messages.searchPlaceholder}
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key !== "Escape" && event.key !== "Tab") event.stopPropagation();
+                if (event.key === "ArrowDown") {
+                  event.preventDefault();
+                  event.currentTarget
+                    .closest('[data-testid="model-picker-menu"]')
+                    ?.querySelector<HTMLButtonElement>("button:not(:disabled)")
+                    ?.focus();
+                }
+              }}
+              className="og-model-policy-search-input h-8 min-w-0 flex-1 bg-transparent text-og-menu text-og-fg outline-hidden placeholder:text-og-fg-subtle"
+            />
+          </label>
+        </div>
+      ) : null}
+      {props.error ? (
+        <p className={cn(MENU_NOTE_CLASS, "text-og-sm text-og-status-failed")} role="alert">
+          {props.error}
+        </p>
+      ) : null}
+      <div
+        className="min-h-0 flex-1 overflow-y-auto overscroll-contain py-1"
+        data-testid="model-picker-models"
+      >
+        {props.loading ? (
+          // Rows at the menu's row height, never a sentence, so nothing jumps.
+          <div role="status" aria-label={messages.loading}>
+            {[58, 44, 66, 50].map((width) => (
+              <div key={width} aria-hidden="true" className="flex h-8 items-center gap-3 px-2.5">
+                <span className="size-4 shrink-0 animate-pulse rounded bg-og-surface-2" />
+                <span
+                  className="h-2.5 animate-pulse rounded bg-og-surface-2"
+                  style={{ width: `${width}%` }}
+                />
+              </div>
+            ))}
+          </div>
+        ) : rows.some((row) => row.selectable) ? (
+          <>
+            {groups.map((group) => (
+              <section
+                key={group.billingClass}
+                aria-label={group.label}
+                className="[&+section]:mt-1.5 [&+section]:border-t [&+section]:border-og-border [&+section]:pt-1.5"
+              >
+                <div className={cn(MENU_LABEL_CLASS, "flex items-center gap-2")}>
+                  <BillingClassMark
+                    billingClass={group.billingClass}
+                    presentation={groupPresentationFor(props, group.billingClass)}
+                    aria-label=""
+                  />
+                  <span className="min-w-0 break-words">{group.label}</span>
+                </div>
+                {group.description ? (
+                  <p className="break-words px-2.5 pb-1 text-og-sm text-og-fg-muted">
+                    {group.description}
+                  </p>
+                ) : null}
+                {group.rows.map(modelRow)}
+              </section>
+            ))}
+            {view.matchCount === 0 ? (
+              <p className={MENU_NOTE_CLASS}>
+                {view.searching ? messages.noMatches : messages.noModels}
+              </p>
+            ) : null}
+          </>
+        ) : props.connectModelsHref || rows.length > 0 ? (
+          <ConnectModelsPanel href={props.connectModelsHref} messages={messages} />
+        ) : (
+          <p className={MENU_NOTE_CLASS}>{messages.noModels}</p>
+        )}
+      </div>
+      {view.anySelectable &&
+      selected &&
+      (view.unsupportedAttachments || (props.allowModelOptions !== false && view.thinking)) ? (
+        <div className="border-t border-og-border px-2.5 py-2.5">
+          {view.unsupportedAttachments ? (
+            <p className="pb-1.5 text-og-control leading-relaxed text-og-fg-subtle">
+              {messages.unsupportedAttachments}
+            </p>
+          ) : null}
+          {props.allowModelOptions !== false ? <ModelThinkingControls {...props} /> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+const CONNECT_MODEL_OPTIONS: Array<{
+  billingClass: "codex_subscription" | "supergrok_subscription" | "byok" | "external";
+  title: string;
+  detail: string;
+}> = [
+  { billingClass: "codex_subscription", title: "Codex", detail: "ChatGPT" },
+  { billingClass: "supergrok_subscription", title: "SuperGrok", detail: "xAI" },
+  { billingClass: "byok", title: "AI Gateway", detail: "Vercel" },
+  { billingClass: "external", title: "OpenRouter", detail: "API key" },
+];
+
+function ConnectModelsPanel(props: {
+  href: string | undefined;
+  messages: typeof defaultModelPolicyPickerMessages;
+}) {
+  return (
+    <div className="px-1.5 pb-1.5 pt-2" data-testid="model-picker-connect">
+      <div className="px-1.5 pb-3">
+        <p className="text-og-menu font-medium tracking-tight text-og-fg">
+          {props.messages.connectTitle}
+        </p>
+        <p className="mt-1 text-og-control leading-snug text-og-fg-subtle">
+          {props.messages.connectBody}
+        </p>
+      </div>
+      <div className="grid grid-cols-2 gap-1">
+        {CONNECT_MODEL_OPTIONS.map((option) => {
+          const content = (
+            <>
+              <span className="flex size-8 shrink-0 items-center justify-center rounded-og-md bg-og-surface-2 text-og-fg">
+                <BillingClassMark
+                  billingClass={option.billingClass}
+                  aria-label=""
+                  className="size-4 text-og-fg"
+                />
+              </span>
+              <span className="min-w-0">
+                <span className="block truncate text-og-control font-medium text-og-fg">
+                  {option.title}
+                </span>
+                <span className="block truncate text-og-control text-og-fg-subtle">
+                  {option.detail}
+                </span>
+              </span>
+            </>
+          );
+          const className =
+            "flex min-w-0 items-center gap-2 rounded-og-md px-1.5 py-1.5 outline-hidden transition-colors hover:bg-og-hover focus-visible:ring-2 focus-visible:ring-og-accent/40";
+          return props.href ? (
+            <a key={option.title} href={props.href} className={className}>
+              {content}
+            </a>
+          ) : (
+            <div key={option.title} className={className}>
+              {content}
+            </div>
+          );
+        })}
+      </div>
+      {props.href ? (
+        <a
+          href={props.href}
+          className="mt-2 flex h-9 w-full items-center justify-center gap-1.5 rounded-og-md border border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover text-og-control font-medium outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-og-accent/40"
+        >
+          {props.messages.connectAction}
+          <ArrowRightIcon className="size-3.5" aria-hidden />
+        </a>
+      ) : (
+        <p className="px-1.5 pt-3 text-og-control text-og-fg-subtle">{props.messages.noModels}</p>
+      )}
+    </div>
+  );
+}
+
+function ModelThinkingControls(props: ModelPolicyPickerProps) {
+  const view = modelPickerMenuView(props, "");
+  const thinking = view.thinking;
+  if (!view.selected || !thinking) return null;
+  const messages = view.messages;
+  const efforts = thinking.efforts;
+  const showThinking = thinking.showThinking;
+  const showFast = thinking.showFast;
+  return (
+    <div className="space-y-2 text-og-control" data-testid="model-picker-reasoning">
+      <div className="flex min-h-7 items-center justify-between gap-3">
+        {showThinking ? <span className="text-og-fg-subtle">{messages.thinking}</span> : <span />}
+        {showFast ? (
+          <button
+            type="button"
+            data-testid="model-picker-fast"
+            disabled={props.disabled || thinking.disabled}
+            aria-pressed={props.latencyMode === "fast"}
+            title={messages.fast + " · " + messages.fastRateHint}
+            onClick={() =>
+              props.onLatencyModeChange(props.latencyMode === "fast" ? "standard" : "fast")
+            }
+            className="flex min-h-8 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-og-sm px-2 text-og-fg-muted hover:bg-og-hover focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50"
+          >
+            <ZapIcon className={cn("size-3.5", props.latencyMode === "fast" && "fill-current")} />
+            {messages.fast}
+            <span className="text-og-fg-subtle">{messages.fastRateHint}</span>
+          </button>
+        ) : null}
+      </div>
+      {showThinking ? (
+        <RadioGroup.Root
+          aria-label={messages.thinkingEffort}
+          value={thinking.value}
+          disabled={props.disabled || thinking.disabled}
+          onValueChange={(value) => props.onEffortChange(value as ReasoningEffort)}
+          orientation="horizontal"
+          className="flex flex-wrap gap-0.5 rounded-og-md bg-og-surface-2 p-0.5"
+        >
+          {efforts.map((effort) => (
+            <RadioGroup.Item
+              key={effort}
+              value={effort}
+              aria-label={labelReasoningEffort(effort)}
+              title={labelReasoningEffort(effort)}
+              className="min-h-8 min-w-10 flex-1 cursor-pointer whitespace-nowrap rounded-og-sm px-1.5 text-og-control text-og-fg-muted outline-hidden transition-colors hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 data-[state=checked]:bg-og-surface-1 data-[state=checked]:text-og-fg data-[state=checked]:shadow-sm disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {compactEffortLabel(effort, labelReasoningEffort(effort))}
+            </RadioGroup.Item>
+          ))}
+        </RadioGroup.Root>
+      ) : null}
+    </div>
+  );
+}
+
+export function ModelPolicyPickerPopover(
+  props: ModelPolicyPickerProps & {
+    anchor: RefObject<HTMLButtonElement | null>;
+    contentId: string;
+    portalStyle: CSSProperties;
+  },
+) {
+  const outside = useRef(false);
+  const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
+  return (
+    <Popover.Root open onOpenChange={(open) => props.onOpenChange?.(open)}>
+      <Popover.Anchor virtualRef={props.anchor} />
+      <Popover.Portal>
+        <Popover.Content
+          id={props.contentId}
+          aria-label={messages.label}
+          align="start"
+          side={props.menuSide ?? "bottom"}
+          sideOffset={8}
+          collisionPadding={12}
+          onInteractOutside={(event) => {
+            if (props.anchor.current?.contains(event.target as Node)) event.preventDefault();
+            else outside.current = true;
+          }}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            if (!outside.current) props.anchor.current?.focus();
+          }}
+          className={cn(
+            MENU_SURFACE_CLASS,
+            "og-root og-model-policy-menu z-50 flex max-h-[min(32rem,var(--radix-popover-content-available-height))] w-[22rem] max-w-[calc(100vw-16px)] flex-col overflow-hidden p-[var(--og-model-picker-menu-padding)]",
+            props.contentClassName,
+          )}
+          style={{ ...props.portalStyle, ...props.contentStyle }}
+          data-testid="model-picker-content"
+        >
+          <ModelPolicyPickerMenu {...props} />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}