import { jsxs, jsx } from "react/jsx-runtime";
import { Dropdown, Button } from "@choiceform/design-system";
import { memo, useState, useEffect } from "react";
import { t } from "../../../../i18n/index.js";
import { modelLogos } from "../../../../utils/model-logos.js";
import { usePromptInputContext } from "../../context/prompt-input-context.js";
import { useModelSelection } from "../../hooks/use-model-selection.js";
const PromptModelMenu = memo(function PromptModelMenu2() {
  const { modelMenuOpen, setModelMenuOpen, focusInput } = usePromptInputContext();
  const [modelMenuSearch, setModelMenuSearch] = useState("");
  useEffect(() => {
    if (modelMenuOpen === false) {
      setModelMenuSearch("");
      focusInput();
    }
  }, [modelMenuOpen]);
  const {
    availableModels,
    currentModel,
    isLoading: isModelLoading,
    error: modelError,
    selectModel,
    getCurrentModelDisplayName,
    refreshModels
  } = useModelSelection();
  const modelMenuShortcuts = t("prompt-input", "model-menu-shortcuts");
  const loadingModels = t("prompt-input", "loading-models");
  const failedToLoadModels = t("prompt-input", "failed-to-load-models");
  const noModelsAvailable = t("prompt-input", "no-models-available");
  return /* @__PURE__ */ jsxs(
    Dropdown,
    {
      selection: true,
      open: modelMenuOpen,
      onOpenChange: setModelMenuOpen,
      children: [
        /* @__PURE__ */ jsx(Dropdown.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
          Button,
          {
            variant: "ghost",
            disabled: isModelLoading,
            className: "min-w-0",
            children: [
              /* @__PURE__ */ jsx(
                "div",
                {
                  className: "size-3",
                  dangerouslySetInnerHTML: {
                    __html: modelLogos({
                      model: currentModel?.name.split(/[ :/-]/)[0].toLowerCase()
                    })?.logo || ""
                  }
                }
              ),
              /* @__PURE__ */ jsx("span", { className: "text-secondary-foreground text-body-small min-w-0 truncate", children: getCurrentModelDisplayName() })
            ]
          }
        ) }),
        /* @__PURE__ */ jsxs(Dropdown.Content, { children: [
          /* @__PURE__ */ jsx(
            Dropdown.Search,
            {
              placeholder: modelMenuShortcuts,
              value: modelMenuSearch,
              onChange: setModelMenuSearch
            }
          ),
          /* @__PURE__ */ jsx(Dropdown.Divider, {}),
          availableModels.length > 0 ? availableModels.filter((model) => {
            return model.name.toLowerCase().includes(modelMenuSearch.toLowerCase());
          }).map((model) => {
            return /* @__PURE__ */ jsxs(
              Dropdown.Item,
              {
                onClick: () => {
                  if (model.isAvailable) {
                    selectModel(model);
                  }
                },
                disabled: !model.isAvailable,
                selected: currentModel?.id === model.id,
                children: [
                  /* @__PURE__ */ jsx(
                    "div",
                    {
                      className: "size-4",
                      dangerouslySetInnerHTML: {
                        __html: modelLogos({
                          model: model.name.split(/[ :/-]/)[0].toLowerCase()
                        })?.logo || ""
                      }
                    }
                  ),
                  /* @__PURE__ */ jsx(Dropdown.Value, { children: model.name }),
                  /* @__PURE__ */ 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__ */ jsx(
            Dropdown.Item,
            {
              onClick: () => {
                if (!isModelLoading) {
                  refreshModels();
                }
              },
              disabled: isModelLoading,
              children: /* @__PURE__ */ jsx(Dropdown.Value, { children: isModelLoading ? loadingModels : modelError ? failedToLoadModels : noModelsAvailable })
            }
          )
        ] })
      ]
    }
  );
});
export {
  PromptModelMenu
};
//# sourceMappingURL=prompt-model-menu.js.map
