LanguageModelsPage.tsx

"use client";

import { useState, useMemo } from "react";
import { useSWRConfig } from "swr";
import { useAdminLLMProviders } from "@/lib/languageModels/hooks";
import { PageLoader } from "@opal/layouts";
import { Content, ContentAction, InputHorizontal, toast } from "@opal/layouts";
import {
  Button,
  Divider,
  MessageCard,
  SelectCard,
  Text,
  Card,
} from "@opal/components";
import { Hoverable, Disabled } from "@opal/core";
import { SvgArrowExchange, SvgSettings, SvgTrash } from "@opal/icons";
import { SettingsLayouts } from "@opal/layouts";
import { ADMIN_ROUTES } from "@/lib/admin-routes";
import * as GeneralLayouts from "@/layouts/general-layouts";
import { getProvider } from "@/lib/languageModels";
import {
  refreshLlmProviderCaches,
  setDefaultLlmModelAndRefresh,
} from "@/lib/languageModels/cache";
import { deleteLlmProvider } from "@/lib/languageModels/svc";
import ModelSelector from "@/sections/model-selector/ModelSelector";
import { ConfirmationModalLayout } from "@opal/layouts";
import { useCreateModal } from "@opal/components";
import { LLMProviderName, LLMProviderView } from "@/lib/languageModels/types";
import { Section } from "@/layouts/general-layouts";
import { markdown } from "@opal/utils";
import { usePHFeatureFlag, PHFeatureFlag } from "@/lib/analytics/hooks";
import CostOverridesPanel from "@/views/admin/CostOverridesPanel";

const route = ADMIN_ROUTES.LLM_MODELS;

function providerDisplayName(provider: LLMProviderView): string {
  return provider.name || getProvider(provider.provider, provider).productName;
}

// ============================================================================
// Provider grouping (keyed by provider name from the API)
// ============================================================================

// The "Add Provider" area is split into labeled groups. Provider names must
// match the backend's WELL_KNOWN_PROVIDER_NAMES (minus any that lack a
// dedicated modal); order within each group controls display order.
interface ProviderGroup {
  title: string;
  description?: string;
  // Emphasized (main-content) header vs. a lighter secondary sub-header.
  emphasis?: boolean;
  providerNames: string[];
  // Append the custom-provider card to this group.
  includeCustom?: boolean;
}

const PROVIDER_GROUPS: ProviderGroup[] = [
  {
    title: "Add Provider",
    description: "Onyx supports both popular providers and self-hosted models.",
    emphasis: true,
    providerNames: [
      LLMProviderName.OPENAI,
      LLMProviderName.ANTHROPIC,
      LLMProviderName.VERTEX_AI,
      LLMProviderName.BEDROCK,
      LLMProviderName.AZURE,
    ],
  },
  {
    title: "Gateways & Routers",
    providerNames: [
      LLMProviderName.OPENROUTER,
      LLMProviderName.LITELLM_PROXY,
      LLMProviderName.PORTKEY,
      LLMProviderName.NEBIUS_TOKENFACTORY,
      LLMProviderName.BIFROST,
    ],
  },
  {
    title: "Self-hosted & Custom",
    providerNames: [
      LLMProviderName.OLLAMA_CHAT,
      LLMProviderName.LM_STUDIO,
      LLMProviderName.OPENAI_COMPATIBLE,
    ],
    includeCustom: true,
  },
];

// ============================================================================
// ExistingProviderCard — card for configured (existing) providers
// ============================================================================

interface ExistingProviderCardProps {
  provider: LLMProviderView;
  isDefault: boolean;
  isLastProvider: boolean;
  onBeforeOpen?: () => void;
}

function ExistingProviderCard({
  provider,
  isDefault,
  isLastProvider,
  onBeforeOpen,
}: ExistingProviderCardProps) {
  const { mutate } = useSWRConfig();
  const [isOpen, setIsOpen] = useState(false);
  const deleteModal = useCreateModal();

  const handleOpen = () => {
    onBeforeOpen?.();
    setIsOpen(true);
  };

  const handleDelete = async () => {
    try {
      await deleteLlmProvider(provider.id, isLastProvider);
      await refreshLlmProviderCaches(mutate);
      deleteModal.toggle(false);
      toast.success("Provider deleted successfully!");
    } catch (e) {
      const message = e instanceof Error ? e.message : "Unknown error";
      toast.error(`Failed to delete provider: ${message}`);
    }
  };

  const { icon, companyName, Modal } = getProvider(provider.provider, provider);

  return (
    <>
      {isOpen && (
        <Modal existingLlmProvider={provider} onOpenChange={setIsOpen} />
      )}

      {deleteModal.isOpen && (
        <ConfirmationModalLayout
          icon={SvgTrash}
          title={markdown(`Delete *${providerDisplayName(provider)}*`)}
          onClose={() => deleteModal.toggle(false)}
          submit={
            <Button
              variant="danger"
              onClick={handleDelete}
              disabled={isDefault && !isLastProvider}
            >
              Delete
            </Button>
          }
        >
          <Section alignItems="start" gap={2}>
            {isDefault && !isLastProvider ? (
              <Text font="main-ui-body" color="text-03">
                Cannot delete the default provider. Select another provider as
                the default prior to deleting this one.
              </Text>
            ) : (
              <>
                <Text font="main-ui-body" color="text-03">
                  {markdown(
                    `All LLM models from provider **${providerDisplayName(
                      provider
                    )}** will be removed and unavailable for future chats. Chat history will be preserved.`
                  )}
                </Text>
                {isLastProvider && (
                  <Text font="main-ui-body" color="text-03">
                    Connect another provider to continue using chats.
                  </Text>
                )}
              </>
            )}
          </Section>
        </ConfirmationModalLayout>
      )}

      <Hoverable.Root
        group="ExistingProviderCard"
        interaction={deleteModal.isOpen ? "hover" : "rest"}
      >
        <SelectCard
          state="filled"
          padding={2}
          rounding="lg"
          onClick={handleOpen}
        >
          <ContentAction
            icon={icon}
            title={providerDisplayName(provider)}
            description={companyName}
            sizePreset="main-ui"
            variant="section"
            padding={2}
            tag={isDefault ? { title: "Default", color: "blue" } : undefined}
            rightChildren={
              <div className="flex flex-row">
                <Hoverable.Item
                  group="ExistingProviderCard"
                  variant="appear-on-hover"
                >
                  <Button
                    icon={SvgTrash}
                    prominence="tertiary"
                    aria-label={`Delete ${providerDisplayName(provider)}`}
                    onClick={(e) => {
                      e.stopPropagation();
                      deleteModal.toggle(true);
                    }}
                  />
                </Hoverable.Item>
                <Button
                  icon={SvgSettings}
                  prominence="tertiary"
                  aria-label={`Edit ${providerDisplayName(provider)}`}
                  onClick={(e) => {
                    e.stopPropagation();
                    handleOpen();
                  }}
                />
              </div>
            }
          />
        </SelectCard>
      </Hoverable.Root>
    </>
  );
}

// ============================================================================
// NewProviderCard — card for the "Add Provider" list
// ============================================================================

interface NewProviderCardProps {
  providerName: string;
  isFirstProvider: boolean;
  onBeforeOpen?: () => void;
}

function NewProviderCard({
  providerName,
  isFirstProvider,
  onBeforeOpen,
}: NewProviderCardProps) {
  const [isOpen, setIsOpen] = useState(false);
  const { icon, productName, companyName, Modal } = getProvider(providerName);

  const handleOpen = () => {
    onBeforeOpen?.();
    setIsOpen(true);
  };

  return (
    <SelectCard
      state="empty"
      padding={2}
      rounding="lg"
      onClick={handleOpen}
    >
      <ContentAction
        icon={icon}
        title={productName}
        description={companyName}
        sizePreset="main-ui"
        variant="section"
        padding={2}
        rightChildren={
          <Button
            rightIcon={SvgArrowExchange}
            prominence="tertiary"
            onClick={(e) => {
              e.stopPropagation();
              handleOpen();
            }}
          >
            Connect
          </Button>
        }
      />
      {isOpen && (
        <Modal
          shouldMarkAsDefault={isFirstProvider}
          onOpenChange={setIsOpen}
        />
      )}
    </SelectCard>
  );
}

// ============================================================================
// NewCustomProviderCard — card for adding a custom LLM provider
// ============================================================================

interface NewCustomProviderCardProps {
  isFirstProvider: boolean;
  onBeforeOpen?: () => void;
}

function NewCustomProviderCard({
  isFirstProvider,
  onBeforeOpen,
}: NewCustomProviderCardProps) {
  const [isOpen, setIsOpen] = useState(false);
  const { icon, productName, companyName, Modal } = getProvider("custom");

  const handleOpen = () => {
    onBeforeOpen?.();
    setIsOpen(true);
  };

  return (
    <>
      {isOpen && (
        <Modal
          shouldMarkAsDefault={isFirstProvider}
          onOpenChange={setIsOpen}
        />
      )}

      <SelectCard
        state="empty"
        padding={2}
        rounding="lg"
        onClick={handleOpen}
      >
        <ContentAction
          icon={icon}
          title={productName}
          description={companyName}
          sizePreset="main-ui"
          variant="section"
          padding={2}
          rightChildren={
            <Button
              rightIcon={SvgArrowExchange}
              prominence="tertiary"
              onClick={(e) => {
                e.stopPropagation();
                handleOpen();
              }}
            >
              Set Up
            </Button>
          }
        />
      </SelectCard>
    </>
  );
}

// ============================================================================
// LanguageModelsPage — main page component
// ============================================================================

export default function LanguageModelsPage() {
  const { mutate } = useSWRConfig();
  const { llmProviders: existingLlmProviders, defaultText } =
    useAdminLLMProviders();
  const isConfigurationDisabled = usePHFeatureFlag(
    PHFeatureFlag.LANGUAGE_MODEL_CONFIGURATION_DISABLED
  );
  const [isDefaultModelSelectorOpen, setIsDefaultModelSelectorOpen] =
    useState(false);

  // Resolve the current default to a model_configuration_id for ModelSelector
  const defaultModelConfigId = useMemo(() => {
    if (!defaultText || !existingLlmProviders) return null;
    const provider = existingLlmProviders.find(
      (p) => p.id === defaultText.provider_id
    );
    return (
      provider?.model_configurations.find(
        (m) => m.name === defaultText.model_name
      )?.id ?? null
    );
  }, [defaultText, existingLlmProviders]);

  if (!existingLlmProviders) {
    return <PageLoader />;
  }

  const hasProviders = existingLlmProviders.length > 0;
  const isFirstProvider = !hasProviders;

  // Pre-sort providers so the default appears first
  const sortedProviders = [...existingLlmProviders].sort((a, b) => {
    const aIsDefault = defaultText?.provider_id === a.id;
    const bIsDefault = defaultText?.provider_id === b.id;
    if (aIsDefault && !bIsDefault) return -1;
    if (!aIsDefault && bIsDefault) return 1;
    return 0;
  });

  // Pre-filter to providers that have at least one visible model
  const providersWithVisibleModels = existingLlmProviders
    .map((provider) => ({
      provider,
      visibleModels: provider.model_configurations.filter((m) => m.is_visible),
    }))
    .filter(({ visibleModels }) => visibleModels.length > 0);

  // Default model logic — use the global default from the API response
  const currentDefaultValue = defaultText
    ? `${defaultText.provider_id}:${defaultText.model_name}`
    : undefined;

  async function handleDefaultModelChange(compositeValue: string) {
    const separatorIndex = compositeValue.indexOf(":");
    const providerId = Number(compositeValue.slice(0, separatorIndex));
    const modelName = compositeValue.slice(separatorIndex + 1);
    await setDefaultLlmModelAndRefresh(providerId, modelName, mutate);
  }

  return (
    <SettingsLayouts.Root>
      <SettingsLayouts.Header icon={route.icon} title={route.title} divider />

      <SettingsLayouts.Body>
        {hasProviders ? (
          <Card border="solid" rounding="lg">
            <InputHorizontal
              title="Default Model"
              description="This model will be used by Onyx by default in your chats."
              center
              withLabel
            >
              <ModelSelector
                value={defaultModelConfigId}
                onChange={(opt) => {
                  const provider = existingLlmProviders?.find(
                    (p) =>
                      p.provider === opt.provider &&
                      (p.name === opt.name || (!p.name && !opt.name))
                  );
                  if (provider) {
                    void handleDefaultModelChange(
                      `${provider.id}:${opt.modelName}`
                    );
                  }
                }}
                side="bottom"
                open={isDefaultModelSelectorOpen}
                onOpenChange={setIsDefaultModelSelectorOpen}
              />
            </InputHorizontal>
          </Card>
        ) : (
          <MessageCard
            variant="info"
            title="Set up an LLM provider to start chatting."
          />
        )}

        {/* ── Available Providers (only when providers exist) ── */}
        {hasProviders && (
          <>
            <GeneralLayouts.Section
              gap={3}
              height="fit"
              alignItems="stretch"
              justifyContent="start"
            >
              <Content
                title="Available Providers"
                sizePreset="main-content"
                variant="section"
              />

              <div className="flex flex-col gap-2">
                {sortedProviders.map((provider) => (
                  <ExistingProviderCard
                    key={provider.id}
                    provider={provider}
                    isDefault={defaultText?.provider_id === provider.id}
                    isLastProvider={sortedProviders.length === 1}
                    onBeforeOpen={() =>
                      setIsDefaultModelSelectorOpen(false)
                    }
                  />
                ))}
              </div>
            </GeneralLayouts.Section>

            <Divider paddingParallel={0} paddingPerpendicular={0} />
          </>
        )}

        {/* ── LLM configuration disablement notice ── */}
        {isConfigurationDisabled && (
          <MessageCard
            title="New LLM configuration temporarily unavailable."
            description="Existing LLM providers can still be used and updated."
            headerPadding={1}
          />
        )}

        {/* ── Add Provider groups (always visible) ── */}
        <Disabled disabled={isConfigurationDisabled}>
          <div className="@container/providercards flex flex-col gap-8">
            {PROVIDER_GROUPS.map((group) => (
              <GeneralLayouts.Section
                key={group.title}
                gap={3}
                height="fit"
                alignItems="stretch"
                justifyContent="start"
              >
                {group.emphasis ? (
                  <Content
                    title={group.title}
                    description={group.description}
                    sizePreset="main-content"
                    variant="section"
                  />
                ) : (
                  <Text font="main-ui-action" color="text-03">
                    {group.title}
                  </Text>
                )}

                <div className="grid grid-cols-1 @xl/providercards:grid-cols-2 gap-2">
                  {group.providerNames.map((name) => (
                    <NewProviderCard
                      key={name}
                      providerName={name}
                      isFirstProvider={isFirstProvider}
                      onBeforeOpen={() =>
                        setIsDefaultModelSelectorOpen(false)
                      }
                    />
                  ))}
                  {group.includeCustom && (
                    <NewCustomProviderCard
                      isFirstProvider={isFirstProvider}
                      onBeforeOpen={() =>
                        setIsDefaultModelSelectorOpen(false)
                      }
                    />
                  )}
                </div>
              </GeneralLayouts.Section>
            ))}
          </div>
        </Disabled>

        <Divider paddingParallel={0} paddingPerpendicular={0} />

        {/* ── Cost Overrides — negotiated per-model rates for usage costing ── */}
        <CostOverridesPanel />
      </SettingsLayouts.Body>
    </SettingsLayouts.Root>
  );
}