ModelSelector.tsx

"use client";

import React, { useState, useCallback, useMemo, useRef } from "react";
import { Popover, OpenButton } from "@opal/components";
import { getModelIcon } from "@/lib/languageModels";
import {
  GLOBAL_DEFAULT_LLM_OPTION,
  LLMOption,
  ModelOptionProvider,
} from "@/lib/languageModels/options";
import { useLLMProviders } from "@/lib/languageModels/hooks";
import ModelSelectorContent, {
  ReasoningManager,
  TemperatureManager,
  useModelDetailManagers,
} from "@/sections/model-selector/ModelSelectorContent";

export interface ModelSelectorProps {
  /** The currently selected model, identified by model_configuration_id. */
  value: number | null;
  onChange: (option: LLMOption) => void;
  providerOptions?: ModelOptionProvider[];
  includeHiddenModels?: boolean;
  requiresImageInput?: boolean;

  /**
   * Custom trigger element. When omitted the default OpenButton (icon +
   * display name) is rendered.
   */
  renderTrigger?: () => React.ReactNode;

  /**
   * When provided, a temperature slider is shown in the per-model detail
   * pane (gated on user.preferences.temperature_override_enabled).
   */
  temperatureManager?: TemperatureManager;

  /**
   * When provided, the reasoning-level slider in the per-model detail pane is
   * enabled for models that report supports_reasoning, disabled otherwise.
   */
  reasoningManager?: ReasoningManager;

  disabled?: boolean;

  /**
   * When true, a "Global Default Model" entry is prepended to the list.
   * Selecting it calls onChange with GLOBAL_DEFAULT_LLM_OPTION
   * (modelConfigurationId === null), which callers should treat as "clear."
   */
  includeGlobalDefault?: boolean;

  /** Which side of the trigger the popover prefers to open on. */
  side?: "top" | "bottom" | "left" | "right";

  /** Optional controlled open state for the popover. */
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}

export default function ModelSelector({
  value,
  onChange,
  providerOptions,
  includeHiddenModels = false,
  requiresImageInput,
  renderTrigger,
  temperatureManager,
  reasoningManager,
  disabled = false,
  includeGlobalDefault = false,
  side = "top",
  open: controlledOpen,
  onOpenChange,
}: ModelSelectorProps) {
  // Unscoped by default. An agent narrows the model list, but only a chat has
  // an agent. The admin and settings pages that embed this picker have none,
  // and must not be filtered by whichever agent happens to be active. A chat
  // caller passes its own scoped list through providerOptions.
  // The list stays defined even before it arrives, so the child never sees
  // undefined and never falls through to its own agent-scoped list.
  const {
    llmProviders: allProviderOptions,
    defaultText,
    isLoading: allProvidersLoading,
  } = useLLMProviders();

  const llmProviders = providerOptions ?? allProviderOptions ?? [];
  const isLoading = providerOptions === undefined && allProvidersLoading;

  const [internalOpen, setInternalOpen] = useState(false);

  const isControlled = controlledOpen !== undefined;
  const open = isControlled ? controlledOpen : internalOpen;

  const handleOpenChange = useCallback(
    (nextOpen: boolean) => {
      if (!isControlled) {
        setInternalOpen(nextOpen);
      }
      onOpenChange?.(nextOpen);
    },
    [isControlled, onOpenChange]
  );

  const scrollContainerRef = useRef<HTMLDivElement>(null);

  // Resolve the currently selected option from the ID
  const currentOption = useMemo(() => {
    if (value == null || !llmProviders) return null;

    for (const provider of llmProviders) {
      const mc = provider.model_configurations.find((m) => m.id === value);

      if (mc) {
        return {
          provider: provider.provider,
          modelName: mc.name,
          displayName: mc.effectiveDisplayName,
        };
      }
    }

    return null;
  }, [value, llmProviders]);

  // When no model is explicitly selected, fall back to showing the global default.
  const defaultModelOption = useMemo(() => {
    if (!defaultText || !llmProviders) return null;

    const provider = llmProviders.find(
      (p) => p.id === defaultText.provider_id
    );

    const mc = provider?.model_configurations.find(
      (m) => m.name === defaultText.model_name
    );

    if (!mc || !provider) return null;

    return {
      provider: provider.provider,
      modelName: mc.name,
      displayName: mc.custom_display_name ?? mc.display_name ?? mc.name,
    };
  }, [defaultText, llmProviders]);

  const effectiveOption = currentOption ?? defaultModelOption;
  const currentDisplayName = effectiveOption?.displayName ?? "Select Model";

  const isSelected = useCallback(
    (option: LLMOption) => {
      if (option === GLOBAL_DEFAULT_LLM_OPTION) return value === null;

      return option.modelConfigurationId != null
        ? option.modelConfigurationId === value
        : option.provider === currentOption?.provider &&
            option.modelName === currentOption?.modelName;
    },
    [value, currentOption]
  );

  const handleSelect = useCallback(
    (option: LLMOption) => {
      onChange(option);
      handleOpenChange(false);
    },
    [onChange, handleOpenChange]
  );

  const modelDetail = useModelDetailManagers(
    temperatureManager,
    reasoningManager
  );

  const triggerIcon = effectiveOption
    ? getModelIcon(effectiveOption.provider, effectiveOption.modelName)
    : getModelIcon("", "");

  return (
    <Popover open={open} onOpenChange={handleOpenChange}>
      <div data-testid="llm-popover-trigger">
        <Popover.Trigger asChild disabled={disabled}>
          {renderTrigger ? (
            renderTrigger()
          ) : (
            <OpenButton disabled={disabled} icon={triggerIcon}>
              {currentDisplayName}
            </OpenButton>
          )}
        </Popover.Trigger>
      </div>

      <Popover.Content side={side} align="end" width="xl" sticky="partial">
        <ModelSelectorContent
          currentModelName={currentOption?.modelName}
          providerOptions={llmProviders}
          isLoading={isLoading}
          includeHiddenModels={includeHiddenModels}
          requiresImageInput={requiresImageInput}
          onSelect={handleSelect}
          isSelected={isSelected}
          includeGlobalDefault={includeGlobalDefault}
          scrollContainerRef={scrollContainerRef}
          modelDetail={modelDetail}
        />
      </Popover.Content>
    </Popover>
  );
}