"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const designSystem = require("@choiceform/design-system");
const React = require("react");
const index = require("../../../../i18n/index.cjs");
const promptInputContext = require("../../context/prompt-input-context.cjs");
const useModelSelection = require("../../hooks/use-model-selection.cjs");
const modelLogos = require("../../../../utils/model-logos.cjs");
const PromptModelMenu = React.memo(function PromptModelMenu2() {
  const { modelMenuOpen, setModelMenuOpen, focusInput } = promptInputContext.usePromptInputContext();
  const [modelMenuSearch, setModelMenuSearch] = React.useState("");
  React.useEffect(() => {
    if (modelMenuOpen === false) {
      setModelMenuSearch("");
      focusInput();
    }
  }, [modelMenuOpen]);
  const {
    availableModels,
    currentModel,
    isLoading: isModelLoading,
    error: modelError,
    selectModel,
    getCurrentModelDisplayName,
    refreshModels
  } = useModelSelection.useModelSelection();
  const modelMenuShortcuts = index.t("prompt-input", "model-menu-shortcuts");
  const loadingModels = index.t("prompt-input", "loading-models");
  const failedToLoadModels = index.t("prompt-input", "failed-to-load-models");
  const noModelsAvailable = index.t("prompt-input", "no-models-available");
  return /* @__PURE__ */ require$$0.jsxs(
    designSystem.Dropdown,
    {
      selection: true,
      open: modelMenuOpen,
      onOpenChange: setModelMenuOpen,
      children: [
        /* @__PURE__ */ require$$0.jsx(designSystem.Dropdown.Trigger, { asChild: true, children: /* @__PURE__ */ require$$0.jsxs(
          designSystem.Button,
          {
            variant: "ghost",
            disabled: isModelLoading,
            className: "min-w-0",
            children: [
              /* @__PURE__ */ require$$0.jsx(
                "div",
                {
                  className: "size-3",
                  dangerouslySetInnerHTML: {
                    __html: modelLogos.modelLogos({
                      model: currentModel?.name.split(/[ :/-]/)[0].toLowerCase()
                    })?.logo || ""
                  }
                }
              ),
              /* @__PURE__ */ require$$0.jsx("span", { className: "text-secondary-foreground text-body-small min-w-0 truncate", children: getCurrentModelDisplayName() })
            ]
          }
        ) }),
        /* @__PURE__ */ require$$0.jsxs(designSystem.Dropdown.Content, { children: [
          /* @__PURE__ */ require$$0.jsx(
            designSystem.Dropdown.Search,
            {
              placeholder: modelMenuShortcuts,
              value: modelMenuSearch,
              onChange: setModelMenuSearch
            }
          ),
          /* @__PURE__ */ require$$0.jsx(designSystem.Dropdown.Divider, {}),
          availableModels.length > 0 ? availableModels.filter((model) => {
            return model.name.toLowerCase().includes(modelMenuSearch.toLowerCase());
          }).map((model) => {
            return /* @__PURE__ */ require$$0.jsxs(
              designSystem.Dropdown.Item,
              {
                onClick: () => {
                  if (model.isAvailable) {
                    selectModel(model);
                  }
                },
                disabled: !model.isAvailable,
                selected: currentModel?.id === model.id,
                children: [
                  /* @__PURE__ */ require$$0.jsx(
                    "div",
                    {
                      className: "size-4",
                      dangerouslySetInnerHTML: {
                        __html: modelLogos.modelLogos({
                          model: model.name.split(/[ :/-]/)[0].toLowerCase()
                        })?.logo || ""
                      }
                    }
                  ),
                  /* @__PURE__ */ require$$0.jsx(designSystem.Dropdown.Value, { children: model.name }),
                  /* @__PURE__ */ require$$0.jsx("div", { className: "ml-4 flex items-center gap-2 capitalize text-white/50", children: "supportedFeatures" in model && Array.isArray(model.supportedFeatures) ? model.supportedFeatures.map((feature) => feature.toLowerCase()).join(" / ") : null })
                ]
              },
              model.id
            );
          }) : /* @__PURE__ */ require$$0.jsx(
            designSystem.Dropdown.Item,
            {
              onClick: () => {
                if (!isModelLoading) {
                  refreshModels();
                }
              },
              disabled: isModelLoading,
              children: /* @__PURE__ */ require$$0.jsx(designSystem.Dropdown.Value, { children: isModelLoading ? loadingModels : modelError ? failedToLoadModels : noModelsAvailable })
            }
          )
        ] })
      ]
    }
  );
});
exports.PromptModelMenu = PromptModelMenu;
//# sourceMappingURL=prompt-model-menu.cjs.map
