@openhands/agent-canvas 1.0.0-rc.9 → 1.0.0

package/dist/components/features/settings/llm-settings/openai-subscription-auth-card.js

@@ -0,0 +1,167 @@
+import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../../i18n/declaration.js";
+import { ExternalLink as n } from "../../../../node_modules/lucide-react/dist/esm/icons/external-link.js";
+import { displayErrorToast as r, displaySuccessToast as i } from "../../../../utils/custom-toast-handlers.js";
+import { CopyToClipboardButton as a } from "../../../shared/buttons/copy-to-clipboard-button.js";
+import { Typography as o } from "../../../../ui/typography.js";
+import { BrandButton as s } from "../brand-button.js";
+import { useLogoutOpenAISubscription as c, usePollOpenAISubscriptionLogin as l, useStartOpenAISubscriptionLogin as u } from "../../../../hooks/mutation/use-llm-subscription-auth.js";
+import { useOpenAISubscriptionStatus as d } from "../../../../hooks/query/use-llm-subscription-status.js";
+import f from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/features/settings/llm-settings/openai-subscription-auth-card.tsx
+var g = 5, _ = 1;
+function v(e) {
+	let t = e.verificationUriComplete ?? e.verificationUri;
+	window.open(t, "_blank", "noopener,noreferrer");
+}
+function y({ isDisabled: y = !1 }) {
+	let { t: b } = e("openhands"), x = d(), S = u(), C = l(), w = c(), [T, E] = f.useState(null), [D, O] = f.useState(!1), [k, A] = f.useState(!1), j = f.useRef(null), M = f.useCallback(() => {
+		j.current !== null && (window.clearTimeout(j.current), j.current = null);
+	}, []), N = () => {
+		T && (navigator.clipboard.writeText(T.userCode), O(!0), setTimeout(() => O(!1), 2e3));
+	}, P = S.isPending || C.isPending || w.isPending, F = !!x.data?.connected, I = f.useCallback(async (e) => {
+		try {
+			return (await C.mutateAsync(e)).connected ? (E(null), A(!1), i(b(t.SETTINGS$SUBSCRIPTION_CONNECTED_TOAST)), !0) : (A(!0), !1);
+		} catch {
+			return r(b(t.SETTINGS$SUBSCRIPTION_CONNECT_ERROR)), !0;
+		}
+	}, [C, b]);
+	return f.useEffect(() => {
+		if (!T || F || y) return;
+		let e = !1, t = Math.max(T.intervalSeconds ?? g, _), n = () => {
+			M(), j.current = window.setTimeout(async () => {
+				if (e) return;
+				let t = await I(T.deviceCode);
+				!e && !t && n();
+			}, t * 1e3);
+		};
+		return n(), () => {
+			e = !0, M();
+		};
+	}, [
+		T,
+		M,
+		F,
+		y,
+		I
+	]), /* @__PURE__ */ h("section", {
+		"data-testid": "openai-subscription-auth-card",
+		className: "flex flex-col gap-4 rounded-xl border border-[var(--oh-border)] bg-[var(--oh-surface-raised)] p-4",
+		children: [
+			/* @__PURE__ */ h("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ m(o.H3, { children: b(t.SETTINGS$SUBSCRIPTION_CARD_TITLE) }), /* @__PURE__ */ m(o.Paragraph, {
+					className: "text-tertiary-alt text-sm leading-5",
+					children: b(t.SETTINGS$SUBSCRIPTION_CARD_DESCRIPTION)
+				})]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "flex flex-col gap-1 text-sm",
+				"data-testid": "subscription-status",
+				children: x.isLoading ? /* @__PURE__ */ m("span", {
+					className: "text-tertiary-light",
+					children: b(t.SETTINGS$SUBSCRIPTION_STATUS_CHECKING)
+				}) : x.isError ? /* @__PURE__ */ m("span", {
+					className: "text-danger",
+					children: b(t.SETTINGS$SUBSCRIPTION_STATUS_UNAVAILABLE)
+				}) : F ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", {
+					className: "text-success",
+					children: b(t.SETTINGS$SUBSCRIPTION_STATUS_CONNECTED)
+				}), x.data?.accountEmail ? /* @__PURE__ */ m("span", {
+					className: "text-tertiary-light",
+					children: b(t.SETTINGS$SUBSCRIPTION_ACCOUNT, { account: x.data.accountEmail })
+				}) : null] }) : /* @__PURE__ */ m("span", {
+					className: "text-warning",
+					children: b(t.SETTINGS$SUBSCRIPTION_STATUS_DISCONNECTED)
+				})
+			}),
+			T ? /* @__PURE__ */ h("div", {
+				"data-testid": "subscription-device-challenge",
+				className: "flex flex-col gap-2 rounded-lg border border-[var(--oh-border-subtle)] p-3 text-sm",
+				children: [
+					/* @__PURE__ */ m("span", { children: b(t.SETTINGS$SUBSCRIPTION_DEVICE_INSTRUCTIONS) }),
+					/* @__PURE__ */ h("div", {
+						className: "flex items-center gap-2 rounded-lg bg-[var(--oh-surface-deep)] px-3 py-2 font-mono text-base text-[var(--oh-foreground)]",
+						children: [/* @__PURE__ */ m("span", {
+							className: "flex-1 select-all",
+							children: T.userCode
+						}), /* @__PURE__ */ m(a, {
+							isHidden: !1,
+							isDisabled: !1,
+							onClick: N,
+							mode: D ? "copied" : "copy"
+						})]
+					}),
+					/* @__PURE__ */ h("a", {
+						href: T.verificationUriComplete ?? T.verificationUri,
+						target: "_blank",
+						rel: "noreferrer",
+						className: "inline-flex items-center gap-1 text-sm text-[var(--oh-accent)] underline",
+						children: [b(t.SETTINGS$SUBSCRIPTION_OPEN_LOGIN), /* @__PURE__ */ m(n, {
+							size: 14,
+							"aria-hidden": !0
+						})]
+					}),
+					k ? /* @__PURE__ */ m("span", {
+						className: "text-warning",
+						children: b(t.SETTINGS$SUBSCRIPTION_PENDING_TOAST)
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ h("div", {
+				className: "flex flex-wrap gap-2",
+				children: [F ? /* @__PURE__ */ m(s, {
+					testId: "subscription-disconnect",
+					type: "button",
+					variant: "tertiary",
+					isDisabled: y || P,
+					onClick: async () => {
+						try {
+							await w.mutateAsync(), M(), E(null), A(!1), i(b(t.SETTINGS$SUBSCRIPTION_DISCONNECTED_TOAST));
+						} catch {
+							r(b(t.ERROR$GENERIC));
+						}
+					},
+					children: b(t.SETTINGS$SUBSCRIPTION_DISCONNECT)
+				}) : /* @__PURE__ */ m(s, {
+					testId: "subscription-connect",
+					type: "button",
+					variant: "primary",
+					isDisabled: y || P,
+					onClick: async () => {
+						try {
+							let e = await S.mutateAsync();
+							E(e), A(!0), v(e);
+						} catch {
+							r(b(t.SETTINGS$SUBSCRIPTION_CONNECT_ERROR));
+						}
+					},
+					children: b(t.SETTINGS$SUBSCRIPTION_CONNECT)
+				}), T ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(s, {
+					testId: "subscription-poll",
+					type: "button",
+					variant: "secondary",
+					isDisabled: y || P,
+					onClick: async () => {
+						T && (M(), I(T.deviceCode));
+					},
+					children: b(t.SETTINGS$SUBSCRIPTION_FINISH_SIGN_IN)
+				}), /* @__PURE__ */ m(s, {
+					testId: "subscription-cancel",
+					type: "button",
+					variant: "tertiary",
+					isDisabled: y || P,
+					onClick: () => {
+						M(), E(null), A(!1);
+					},
+					children: b(t.BUTTON$CANCEL)
+				})] }) : null]
+			})
+		]
+	});
+}
+//#endregion
+export { y as OpenAISubscriptionAuthCard };
+
+//# sourceMappingURL=openai-subscription-auth-card.js.map

package/dist/components/features/settings/llm-settings/openai-subscription-auth-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"openai-subscription-auth-card.js","names":[],"sources":["../../../../../src/components/features/settings/llm-settings/openai-subscription-auth-card.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLink } from \"lucide-react\";\nimport type { LLMSubscriptionDeviceChallenge } from \"#/api/llm-subscription-service\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport {\n  useLogoutOpenAISubscription,\n  usePollOpenAISubscriptionLogin,\n  useStartOpenAISubscriptionLogin,\n} from \"#/hooks/mutation/use-llm-subscription-auth\";\nimport { useOpenAISubscriptionStatus } from \"#/hooks/query/use-llm-subscription-status\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Typography } from \"#/ui/typography\";\nimport {\n  displayErrorToast,\n  displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\n\nconst DEFAULT_DEVICE_POLL_INTERVAL_SECONDS = 5;\nconst MIN_DEVICE_POLL_INTERVAL_SECONDS = 1;\n\ninterface OpenAISubscriptionAuthCardProps {\n  isDisabled?: boolean;\n}\n\nfunction openVerificationUrl(challenge: LLMSubscriptionDeviceChallenge) {\n  const url = challenge.verificationUriComplete ?? challenge.verificationUri;\n  window.open(url, \"_blank\", \"noopener,noreferrer\");\n}\n\nexport function OpenAISubscriptionAuthCard({\n  isDisabled = false,\n}: OpenAISubscriptionAuthCardProps) {\n  const { t } = useTranslation(\"openhands\");\n  const status = useOpenAISubscriptionStatus();\n  const startLogin = useStartOpenAISubscriptionLogin();\n  const pollLogin = usePollOpenAISubscriptionLogin();\n  const logout = useLogoutOpenAISubscription();\n  const [challenge, setChallenge] =\n    React.useState<LLMSubscriptionDeviceChallenge | null>(null);\n  const [copied, setCopied] = React.useState(false);\n  const [isPendingLogin, setIsPendingLogin] = React.useState(false);\n  const pollTimeoutRef = React.useRef<number | null>(null);\n\n  const clearPollTimeout = React.useCallback(() => {\n    if (pollTimeoutRef.current !== null) {\n      window.clearTimeout(pollTimeoutRef.current);\n      pollTimeoutRef.current = null;\n    }\n  }, []);\n\n  const handleCopyCode = () => {\n    if (!challenge) return;\n    navigator.clipboard.writeText(challenge.userCode);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  const isBusy =\n    startLogin.isPending || pollLogin.isPending || logout.isPending;\n  const connected = Boolean(status.data?.connected);\n\n  const pollDeviceLogin = React.useCallback(\n    async (deviceCode: string) => {\n      try {\n        const nextStatus = await pollLogin.mutateAsync(deviceCode);\n        if (nextStatus.connected) {\n          setChallenge(null);\n          setIsPendingLogin(false);\n          displaySuccessToast(t(I18nKey.SETTINGS$SUBSCRIPTION_CONNECTED_TOAST));\n          return true;\n        }\n        setIsPendingLogin(true);\n        return false;\n      } catch {\n        displayErrorToast(t(I18nKey.SETTINGS$SUBSCRIPTION_CONNECT_ERROR));\n        return true;\n      }\n    },\n    [pollLogin, t],\n  );\n\n  React.useEffect(() => {\n    if (!challenge || connected || isDisabled) {\n      return undefined;\n    }\n\n    let cancelled = false;\n    const intervalSeconds = Math.max(\n      challenge.intervalSeconds ?? DEFAULT_DEVICE_POLL_INTERVAL_SECONDS,\n      MIN_DEVICE_POLL_INTERVAL_SECONDS,\n    );\n\n    const schedulePoll = () => {\n      clearPollTimeout();\n      pollTimeoutRef.current = window.setTimeout(async () => {\n        if (cancelled) {\n          return;\n        }\n\n        const shouldStop = await pollDeviceLogin(challenge.deviceCode);\n        if (!cancelled && !shouldStop) {\n          schedulePoll();\n        }\n      }, intervalSeconds * 1000);\n    };\n\n    schedulePoll();\n\n    return () => {\n      cancelled = true;\n      clearPollTimeout();\n    };\n  }, [challenge, clearPollTimeout, connected, isDisabled, pollDeviceLogin]);\n\n  const handleStartLogin = async () => {\n    try {\n      const nextChallenge = await startLogin.mutateAsync();\n      setChallenge(nextChallenge);\n      setIsPendingLogin(true);\n      openVerificationUrl(nextChallenge);\n    } catch {\n      displayErrorToast(t(I18nKey.SETTINGS$SUBSCRIPTION_CONNECT_ERROR));\n    }\n  };\n\n  const handlePollLogin = async () => {\n    if (!challenge) return;\n    clearPollTimeout();\n    void pollDeviceLogin(challenge.deviceCode);\n  };\n\n  const handleLogout = async () => {\n    try {\n      await logout.mutateAsync();\n      clearPollTimeout();\n      setChallenge(null);\n      setIsPendingLogin(false);\n      displaySuccessToast(t(I18nKey.SETTINGS$SUBSCRIPTION_DISCONNECTED_TOAST));\n    } catch {\n      displayErrorToast(t(I18nKey.ERROR$GENERIC));\n    }\n  };\n\n  const handleCancelLogin = () => {\n    clearPollTimeout();\n    setChallenge(null);\n    setIsPendingLogin(false);\n  };\n\n  return (\n    <section\n      data-testid=\"openai-subscription-auth-card\"\n      className=\"flex flex-col gap-4 rounded-xl border border-[var(--oh-border)] bg-[var(--oh-surface-raised)] p-4\"\n    >\n      <div className=\"flex flex-col gap-2\">\n        <Typography.H3>\n          {t(I18nKey.SETTINGS$SUBSCRIPTION_CARD_TITLE)}\n        </Typography.H3>\n        <Typography.Paragraph className=\"text-tertiary-alt text-sm leading-5\">\n          {t(I18nKey.SETTINGS$SUBSCRIPTION_CARD_DESCRIPTION)}\n        </Typography.Paragraph>\n      </div>\n\n      <div\n        className=\"flex flex-col gap-1 text-sm\"\n        data-testid=\"subscription-status\"\n      >\n        {status.isLoading ? (\n          <span className=\"text-tertiary-light\">\n            {t(I18nKey.SETTINGS$SUBSCRIPTION_STATUS_CHECKING)}\n          </span>\n        ) : status.isError ? (\n          <span className=\"text-danger\">\n            {t(I18nKey.SETTINGS$SUBSCRIPTION_STATUS_UNAVAILABLE)}\n          </span>\n        ) : connected ? (\n          <>\n            <span className=\"text-success\">\n              {t(I18nKey.SETTINGS$SUBSCRIPTION_STATUS_CONNECTED)}\n            </span>\n            {status.data?.accountEmail ? (\n              <span className=\"text-tertiary-light\">\n                {t(I18nKey.SETTINGS$SUBSCRIPTION_ACCOUNT, {\n                  account: status.data.accountEmail,\n                })}\n              </span>\n            ) : null}\n          </>\n        ) : (\n          <span className=\"text-warning\">\n            {t(I18nKey.SETTINGS$SUBSCRIPTION_STATUS_DISCONNECTED)}\n          </span>\n        )}\n      </div>\n\n      {challenge ? (\n        <div\n          data-testid=\"subscription-device-challenge\"\n          className=\"flex flex-col gap-2 rounded-lg border border-[var(--oh-border-subtle)] p-3 text-sm\"\n        >\n          <span>{t(I18nKey.SETTINGS$SUBSCRIPTION_DEVICE_INSTRUCTIONS)}</span>\n          <div className=\"flex items-center gap-2 rounded-lg bg-[var(--oh-surface-deep)] px-3 py-2 font-mono text-base text-[var(--oh-foreground)]\">\n            <span className=\"flex-1 select-all\">{challenge.userCode}</span>\n            <CopyToClipboardButton\n              isHidden={false}\n              isDisabled={false}\n              onClick={handleCopyCode}\n              mode={copied ? \"copied\" : \"copy\"}\n            />\n          </div>\n          <a\n            href={\n              challenge.verificationUriComplete ?? challenge.verificationUri\n            }\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"inline-flex items-center gap-1 text-sm text-[var(--oh-accent)] underline\"\n          >\n            {t(I18nKey.SETTINGS$SUBSCRIPTION_OPEN_LOGIN)}\n            <ExternalLink size={14} aria-hidden />\n          </a>\n          {isPendingLogin ? (\n            <span className=\"text-warning\">\n              {t(I18nKey.SETTINGS$SUBSCRIPTION_PENDING_TOAST)}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n\n      <div className=\"flex flex-wrap gap-2\">\n        {connected ? (\n          <BrandButton\n            testId=\"subscription-disconnect\"\n            type=\"button\"\n            variant=\"tertiary\"\n            isDisabled={isDisabled || isBusy}\n            onClick={handleLogout}\n          >\n            {t(I18nKey.SETTINGS$SUBSCRIPTION_DISCONNECT)}\n          </BrandButton>\n        ) : (\n          <BrandButton\n            testId=\"subscription-connect\"\n            type=\"button\"\n            variant=\"primary\"\n            isDisabled={isDisabled || isBusy}\n            onClick={handleStartLogin}\n          >\n            {t(I18nKey.SETTINGS$SUBSCRIPTION_CONNECT)}\n          </BrandButton>\n        )}\n\n        {challenge ? (\n          <>\n            <BrandButton\n              testId=\"subscription-poll\"\n              type=\"button\"\n              variant=\"secondary\"\n              isDisabled={isDisabled || isBusy}\n              onClick={handlePollLogin}\n            >\n              {t(I18nKey.SETTINGS$SUBSCRIPTION_FINISH_SIGN_IN)}\n            </BrandButton>\n            <BrandButton\n              testId=\"subscription-cancel\"\n              type=\"button\"\n              variant=\"tertiary\"\n              isDisabled={isDisabled || isBusy}\n              onClick={handleCancelLogin}\n            >\n              {t(I18nKey.BUTTON$CANCEL)}\n            </BrandButton>\n          </>\n        ) : null}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/modals/settings/model-selector.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../../i18n/declaration.cjs`),r=require(`../../../../utils/constants.cjs`),i=require(`../../../../utils/utils.cjs`),a=require(`../../../../utils/form-control-classes.cjs`),o=require(`../../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.cjs`),s=require(`../../../../node_modules/@heroui/listbox/dist/chunk-ANTZPR32.cjs`),c=require(`../../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.cjs`),l=require(`../../../../ui/combobox-caret.cjs`),u=require(`../../../../utils/map-provider.cjs`),d=require(`../../../../utils/extract-model-and-provider.cjs`),f=require(`../../../../ui/help-link.cjs`),p=require(`../../../../hooks/query/use-search-providers.cjs`),m=require(`../../../../hooks/query/use-provider-models.cjs`),h=require(`../../../../hooks/query/use-openhands-verified-models.cjs`),g=require(`../../../../utils/normalize-display-model.cjs`);let _=require(`react`);_=e.__toESM(_,1);let v=require(`react/jsx-runtime`);function y({isDisabled:e,currentModel:y,currentBaseUrl:b,onChange:x,onDefaultValuesChanged:S,wrapperClassName:C,labelClassName:w}){let[,T]=_.default.useState(null),[E,D]=_.default.useState(null),[O,k]=_.default.useState(null),{data:A=[]}=p.useSearchProviders(),{data:j}=h.useOpenhandsVerifiedModels(),{data:M=[],isLoading:N,error:P}=m.useProviderModels(E),F=_.default.useMemo(()=>A.filter(e=>e.verified),[A]),I=_.default.useMemo(()=>A.filter(e=>!e.verified),[A]),L=_.default.useMemo(()=>M.filter(e=>e.verified),[M]),R=_.default.useMemo(()=>M.filter(e=>!e.verified),[M]);_.default.useEffect(()=>{if(y&&j!==void 0){let e=g.normalizeDisplayModel(y,b,j),{provider:t,model:n}=d.extractModelAndProvider(e);T(e),D(t||null),k(n),S?.(t||null,n)}},[y,b,j]);let z=e=>{D(e),k(null),T(`${e}/`),x?.(e,null)},B=e=>{let t=`${E}/${e}`;E===`openai`&&(t=e),T(t),k(e),x?.(E,e)},V=()=>{D(null),T(null)},{t:H}=t.useTranslation(`openhands`);return(0,v.jsxs)(`div`,{className:i.cn(`flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]`,C),children:[(0,v.jsxs)(`fieldset`,{className:`flex flex-col gap-2.5 w-full`,children:[(0,v.jsx)(`label`,{className:i.cn(`text-sm`,w),children:H(n.I18nKey.LLM$PROVIDER)}),(0,v.jsxs)(c.autocomplete_default,{"data-testid":`llm-provider-input`,isRequired:!0,isVirtualized:!1,name:`llm-provider-input`,isDisabled:e,"aria-label":H(n.I18nKey.LLM$PROVIDER),isClearable:!1,onSelectionChange:e=>{e?.toString()&&z(e.toString())},onInputChange:e=>!e&&V(),defaultSelectedKey:E??void 0,selectedKey:E,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:l.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:a.formControlSettingsFieldClassName}},children:[(0,v.jsx)(s.listbox_section_base_default,{title:H(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:F.map(e=>(0,v.jsx)(o.listbox_item_base_default,{"data-testid":`provider-item-${e.name}`,children:u.mapProvider(e.name)},e.name))}),I.length>0?(0,v.jsx)(s.listbox_section_base_default,{title:H(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:I.map(e=>(0,v.jsx)(o.listbox_item_base_default,{children:u.mapProvider(e.name)},e.name))}):null]})]}),E===`openhands`&&(0,v.jsx)(f.HelpLink,{testId:`openhands-account-help`,text:H(n.I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT),linkText:H(n.I18nKey.SETTINGS$CLICK_HERE),href:r.PRODUCT_URL.PRODUCTION,size:`settings`,linkColor:`white`}),(0,v.jsxs)(`fieldset`,{className:`flex flex-col gap-2.5 w-full`,children:[(0,v.jsx)(`label`,{className:i.cn(`text-sm`,w),children:H(n.I18nKey.LLM$MODEL)}),(0,v.jsxs)(c.autocomplete_default,{"data-testid":`llm-model-input`,isRequired:!0,isVirtualized:!1,isLoading:N,name:`llm-model-input`,"aria-label":H(n.I18nKey.LLM$MODEL),isClearable:!1,onSelectionChange:e=>{e?.toString()&&B(e.toString())},isDisabled:e||!E,selectedKey:O,defaultSelectedKey:O??void 0,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:l.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:a.formControlSettingsFieldClassName}},children:[(0,v.jsx)(s.listbox_section_base_default,{title:H(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:L.map(e=>(0,v.jsx)(o.listbox_item_base_default,{children:e.name},e.name))}),R.length>0?(0,v.jsx)(s.listbox_section_base_default,{title:H(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:R.map(e=>(0,v.jsx)(o.listbox_item_base_default,{"data-testid":`model-item-${e.name}`,children:e.name},e.name))}):null]}),P&&(0,v.jsx)(`p`,{"data-testid":`models-error`,className:`text-danger text-xs`,children:H(n.I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)})]})]})}exports.ModelSelector=y;
+const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../../i18n/declaration.cjs`),r=require(`../../../../utils/constants.cjs`),i=require(`../../../../utils/utils.cjs`),a=require(`../../../../utils/form-control-classes.cjs`),o=require(`../../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.cjs`),s=require(`../../../../node_modules/@heroui/listbox/dist/chunk-ANTZPR32.cjs`),c=require(`../../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.cjs`),l=require(`../../../../ui/combobox-caret.cjs`),u=require(`../../../../utils/map-provider.cjs`),d=require(`../../../../utils/extract-model-and-provider.cjs`),f=require(`../../../../ui/help-link.cjs`),p=require(`../../../../hooks/query/use-search-providers.cjs`),m=require(`../../../../hooks/query/use-provider-models.cjs`);let h=require(`react`);h=e.__toESM(h,1);let g=require(`react/jsx-runtime`);function _({isDisabled:e,currentModel:_,onChange:v,onDefaultValuesChanged:y,wrapperClassName:b,labelClassName:x}){let[,S]=h.default.useState(null),[C,w]=h.default.useState(null),[T,E]=h.default.useState(null),{data:D=[]}=p.useSearchProviders(),{data:O=[],isLoading:k,error:A}=m.useProviderModels(C),j=h.default.useMemo(()=>D.filter(e=>e.verified),[D]),M=h.default.useMemo(()=>D.filter(e=>!e.verified),[D]),N=h.default.useMemo(()=>O.filter(e=>e.verified),[O]),P=h.default.useMemo(()=>O.filter(e=>!e.verified),[O]);h.default.useEffect(()=>{if(_){let{provider:e,model:t}=d.extractModelAndProvider(_);S(_),w(e||null),E(t),y?.(e||null,t)}},[_]);let F=e=>{w(e),E(null),S(`${e}/`),v?.(e,null)},I=e=>{let t=`${C}/${e}`;C===`openai`&&(t=e),S(t),E(e),v?.(C,e)},L=()=>{w(null),S(null)},{t:R}=t.useTranslation(`openhands`);return(0,g.jsxs)(`div`,{className:i.cn(`flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]`,b),children:[(0,g.jsxs)(`fieldset`,{className:`flex flex-col gap-2.5 w-full`,children:[(0,g.jsx)(`label`,{className:i.cn(`text-sm`,x),children:R(n.I18nKey.LLM$PROVIDER)}),(0,g.jsxs)(c.autocomplete_default,{"data-testid":`llm-provider-input`,isRequired:!0,isVirtualized:!1,name:`llm-provider-input`,isDisabled:e,"aria-label":R(n.I18nKey.LLM$PROVIDER),isClearable:!1,onSelectionChange:e=>{e?.toString()&&F(e.toString())},onInputChange:e=>!e&&L(),defaultSelectedKey:C??void 0,selectedKey:C,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:l.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:a.formControlSettingsFieldClassName}},children:[(0,g.jsx)(s.listbox_section_base_default,{title:R(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:j.map(e=>(0,g.jsx)(o.listbox_item_base_default,{"data-testid":`provider-item-${e.name}`,children:u.mapProvider(e.name)},e.name))}),M.length>0?(0,g.jsx)(s.listbox_section_base_default,{title:R(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:M.map(e=>(0,g.jsx)(o.listbox_item_base_default,{children:u.mapProvider(e.name)},e.name))}):null]})]}),C===`openhands`&&(0,g.jsx)(f.HelpLink,{testId:`openhands-account-help`,text:R(n.I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT),linkText:R(n.I18nKey.SETTINGS$CLICK_HERE),href:r.PRODUCT_URL.PRODUCTION,size:`settings`,linkColor:`white`}),(0,g.jsxs)(`fieldset`,{className:`flex flex-col gap-2.5 w-full`,children:[(0,g.jsx)(`label`,{className:i.cn(`text-sm`,x),children:R(n.I18nKey.LLM$MODEL)}),(0,g.jsxs)(c.autocomplete_default,{"data-testid":`llm-model-input`,isRequired:!0,isVirtualized:!1,isLoading:k,name:`llm-model-input`,"aria-label":R(n.I18nKey.LLM$MODEL),isClearable:!1,onSelectionChange:e=>{e?.toString()&&I(e.toString())},isDisabled:e||!C,selectedKey:T,defaultSelectedKey:T??void 0,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:l.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:a.formControlSettingsFieldClassName}},children:[(0,g.jsx)(s.listbox_section_base_default,{title:R(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:N.map(e=>(0,g.jsx)(o.listbox_item_base_default,{children:e.name},e.name))}),P.length>0?(0,g.jsx)(s.listbox_section_base_default,{title:R(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:P.map(e=>(0,g.jsx)(o.listbox_item_base_default,{"data-testid":`model-item-${e.name}`,children:e.name},e.name))}):null]}),A&&(0,g.jsx)(`p`,{"data-testid":`models-error`,className:`text-danger text-xs`,children:R(n.I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)})]})]})}exports.ModelSelector=_;
 //# sourceMappingURL=model-selector.cjs.map

package/dist/components/shared/modals/settings/model-selector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"model-selector.cjs","names":[],"sources":["../../../../../src/components/shared/modals/settings/model-selector.tsx"],"sourcesContent":["import {\n  Autocomplete,\n  AutocompleteItem,\n  AutocompleteSection,\n} from \"@heroui/react\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { mapProvider } from \"#/utils/map-provider\";\nimport { extractModelAndProvider } from \"#/utils/extract-model-and-provider\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { heroUiAutocompleteSelectorButtonClassName } from \"#/ui/combobox-caret\";\nimport { HelpLink } from \"#/ui/help-link\";\nimport { PRODUCT_URL } from \"#/utils/constants\";\nimport { useSearchProviders } from \"#/hooks/query/use-search-providers\";\nimport { useProviderModels } from \"#/hooks/query/use-provider-models\";\nimport { useOpenhandsVerifiedModels } from \"#/hooks/query/use-openhands-verified-models\";\nimport { normalizeDisplayModel } from \"#/utils/normalize-display-model\";\n\ninterface ModelSelectorProps {\n  isDisabled?: boolean;\n  currentModel?: string;\n  currentBaseUrl?: string;\n  onChange?: (provider: string | null, model: string | null) => void;\n  onDefaultValuesChanged?: (\n    provider: string | null,\n    model: string | null,\n  ) => void;\n  wrapperClassName?: string;\n  labelClassName?: string;\n}\n\nexport function ModelSelector({\n  isDisabled,\n  currentModel,\n  currentBaseUrl,\n  onChange,\n  onDefaultValuesChanged,\n  wrapperClassName,\n  labelClassName,\n}: ModelSelectorProps) {\n  const [, setLitellmId] = React.useState<string | null>(null);\n  const [selectedProvider, setSelectedProvider] = React.useState<string | null>(\n    null,\n  );\n  const [selectedModel, setSelectedModel] = React.useState<string | null>(null);\n\n  const { data: providers = [] } = useSearchProviders();\n  const { data: openhandsVerifiedModels } = useOpenhandsVerifiedModels();\n  const {\n    data: providerModels = [],\n    isLoading: isLoadingModels,\n    error: modelsError,\n  } = useProviderModels(selectedProvider);\n\n  const verifiedProviders = React.useMemo(\n    () => providers.filter((p) => p.verified),\n    [providers],\n  );\n  const unverifiedProviders = React.useMemo(\n    () => providers.filter((p) => !p.verified),\n    [providers],\n  );\n\n  const verifiedModels = React.useMemo(\n    () => providerModels.filter((m) => m.verified),\n    [providerModels],\n  );\n  const unverifiedModels = React.useMemo(\n    () => providerModels.filter((m) => !m.verified),\n    [providerModels],\n  );\n\n  React.useEffect(() => {\n    // Wait for the openhands verified list before initializing — otherwise a\n    // persisted `litellm_proxy/<m>` model would first land as `litellm_proxy`\n    // and only later flip to `openhands`, triggering a redundant /api/llm/models\n    // fetch for the throwaway provider value.\n    if (currentModel && openhandsVerifiedModels !== undefined) {\n      const displayModel = normalizeDisplayModel(\n        currentModel,\n        currentBaseUrl,\n        openhandsVerifiedModels,\n      );\n      const { provider, model } = extractModelAndProvider(displayModel);\n\n      setLitellmId(displayModel);\n      setSelectedProvider(provider || null);\n      setSelectedModel(model);\n      onDefaultValuesChanged?.(provider || null, model);\n    }\n  }, [currentModel, currentBaseUrl, openhandsVerifiedModels]);\n\n  const handleChangeProvider = (provider: string) => {\n    setSelectedProvider(provider);\n    setSelectedModel(null);\n    setLitellmId(`${provider}/`);\n    onChange?.(provider, null);\n  };\n\n  const handleChangeModel = (model: string) => {\n    let fullModel = `${selectedProvider}/${model}`;\n    if (selectedProvider === \"openai\") {\n      fullModel = model;\n    }\n    setLitellmId(fullModel);\n    setSelectedModel(model);\n    onChange?.(selectedProvider, model);\n  };\n\n  const clear = () => {\n    setSelectedProvider(null);\n    setLitellmId(null);\n  };\n\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]\",\n        wrapperClassName,\n      )}\n    >\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$PROVIDER)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-provider-input\"\n          isRequired\n          isVirtualized={false}\n          name=\"llm-provider-input\"\n          isDisabled={isDisabled}\n          aria-label={t(I18nKey.LLM$PROVIDER)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeProvider(e.toString());\n          }}\n          onInputChange={(value) => !value && clear()}\n          defaultSelectedKey={selectedProvider ?? undefined}\n          selectedKey={selectedProvider}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedProviders.map((provider) => (\n              <AutocompleteItem\n                data-testid={`provider-item-${provider.name}`}\n                key={provider.name}\n              >\n                {mapProvider(provider.name)}\n              </AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedProviders.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedProviders.map((provider) => (\n                <AutocompleteItem key={provider.name}>\n                  {mapProvider(provider.name)}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n      </fieldset>\n\n      {selectedProvider === \"openhands\" && (\n        <HelpLink\n          testId=\"openhands-account-help\"\n          text={t(I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT)}\n          linkText={t(I18nKey.SETTINGS$CLICK_HERE)}\n          href={PRODUCT_URL.PRODUCTION}\n          size=\"settings\"\n          linkColor=\"white\"\n        />\n      )}\n\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$MODEL)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-model-input\"\n          isRequired\n          isVirtualized={false}\n          isLoading={isLoadingModels}\n          name=\"llm-model-input\"\n          aria-label={t(I18nKey.LLM$MODEL)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeModel(e.toString());\n          }}\n          isDisabled={isDisabled || !selectedProvider}\n          selectedKey={selectedModel}\n          defaultSelectedKey={selectedModel ?? undefined}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedModels.map((model) => (\n              <AutocompleteItem key={model.name}>{model.name}</AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedModels.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedModels.map((model) => (\n                <AutocompleteItem\n                  data-testid={`model-item-${model.name}`}\n                  key={model.name}\n                >\n                  {model.name}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n        {modelsError && (\n          <p data-testid=\"models-error\" className=\"text-danger text-xs\">\n            {t(I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}\n          </p>\n        )}\n      </fieldset>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"model-selector.cjs","names":[],"sources":["../../../../../src/components/shared/modals/settings/model-selector.tsx"],"sourcesContent":["import {\n  Autocomplete,\n  AutocompleteItem,\n  AutocompleteSection,\n} from \"@heroui/react\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { mapProvider } from \"#/utils/map-provider\";\nimport { extractModelAndProvider } from \"#/utils/extract-model-and-provider\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { heroUiAutocompleteSelectorButtonClassName } from \"#/ui/combobox-caret\";\nimport { HelpLink } from \"#/ui/help-link\";\nimport { PRODUCT_URL } from \"#/utils/constants\";\nimport { useSearchProviders } from \"#/hooks/query/use-search-providers\";\nimport { useProviderModels } from \"#/hooks/query/use-provider-models\";\n\ninterface ModelSelectorProps {\n  isDisabled?: boolean;\n  currentModel?: string;\n  onChange?: (provider: string | null, model: string | null) => void;\n  onDefaultValuesChanged?: (\n    provider: string | null,\n    model: string | null,\n  ) => void;\n  wrapperClassName?: string;\n  labelClassName?: string;\n}\n\nexport function ModelSelector({\n  isDisabled,\n  currentModel,\n  onChange,\n  onDefaultValuesChanged,\n  wrapperClassName,\n  labelClassName,\n}: ModelSelectorProps) {\n  const [, setLitellmId] = React.useState<string | null>(null);\n  const [selectedProvider, setSelectedProvider] = React.useState<string | null>(\n    null,\n  );\n  const [selectedModel, setSelectedModel] = React.useState<string | null>(null);\n\n  const { data: providers = [] } = useSearchProviders();\n  const {\n    data: providerModels = [],\n    isLoading: isLoadingModels,\n    error: modelsError,\n  } = useProviderModels(selectedProvider);\n\n  const verifiedProviders = React.useMemo(\n    () => providers.filter((p) => p.verified),\n    [providers],\n  );\n  const unverifiedProviders = React.useMemo(\n    () => providers.filter((p) => !p.verified),\n    [providers],\n  );\n\n  const verifiedModels = React.useMemo(\n    () => providerModels.filter((m) => m.verified),\n    [providerModels],\n  );\n  const unverifiedModels = React.useMemo(\n    () => providerModels.filter((m) => !m.verified),\n    [providerModels],\n  );\n\n  React.useEffect(() => {\n    if (currentModel) {\n      const { provider, model } = extractModelAndProvider(currentModel);\n\n      setLitellmId(currentModel);\n      setSelectedProvider(provider || null);\n      setSelectedModel(model);\n      onDefaultValuesChanged?.(provider || null, model);\n    }\n  }, [currentModel]);\n\n  const handleChangeProvider = (provider: string) => {\n    setSelectedProvider(provider);\n    setSelectedModel(null);\n    setLitellmId(`${provider}/`);\n    onChange?.(provider, null);\n  };\n\n  const handleChangeModel = (model: string) => {\n    let fullModel = `${selectedProvider}/${model}`;\n    if (selectedProvider === \"openai\") {\n      fullModel = model;\n    }\n    setLitellmId(fullModel);\n    setSelectedModel(model);\n    onChange?.(selectedProvider, model);\n  };\n\n  const clear = () => {\n    setSelectedProvider(null);\n    setLitellmId(null);\n  };\n\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]\",\n        wrapperClassName,\n      )}\n    >\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$PROVIDER)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-provider-input\"\n          isRequired\n          isVirtualized={false}\n          name=\"llm-provider-input\"\n          isDisabled={isDisabled}\n          aria-label={t(I18nKey.LLM$PROVIDER)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeProvider(e.toString());\n          }}\n          onInputChange={(value) => !value && clear()}\n          defaultSelectedKey={selectedProvider ?? undefined}\n          selectedKey={selectedProvider}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedProviders.map((provider) => (\n              <AutocompleteItem\n                data-testid={`provider-item-${provider.name}`}\n                key={provider.name}\n              >\n                {mapProvider(provider.name)}\n              </AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedProviders.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedProviders.map((provider) => (\n                <AutocompleteItem key={provider.name}>\n                  {mapProvider(provider.name)}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n      </fieldset>\n\n      {selectedProvider === \"openhands\" && (\n        <HelpLink\n          testId=\"openhands-account-help\"\n          text={t(I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT)}\n          linkText={t(I18nKey.SETTINGS$CLICK_HERE)}\n          href={PRODUCT_URL.PRODUCTION}\n          size=\"settings\"\n          linkColor=\"white\"\n        />\n      )}\n\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$MODEL)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-model-input\"\n          isRequired\n          isVirtualized={false}\n          isLoading={isLoadingModels}\n          name=\"llm-model-input\"\n          aria-label={t(I18nKey.LLM$MODEL)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeModel(e.toString());\n          }}\n          isDisabled={isDisabled || !selectedProvider}\n          selectedKey={selectedModel}\n          defaultSelectedKey={selectedModel ?? undefined}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedModels.map((model) => (\n              <AutocompleteItem key={model.name}>{model.name}</AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedModels.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedModels.map((model) => (\n                <AutocompleteItem\n                  data-testid={`model-item-${model.name}`}\n                  key={model.name}\n                >\n                  {model.name}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n        {modelsError && (\n          <p data-testid=\"models-error\" className=\"text-danger text-xs\">\n            {t(I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}\n          </p>\n        )}\n      </fieldset>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/modals/settings/model-selector.d.ts

@@ -1,11 +1,10 @@
 interface ModelSelectorProps {
     isDisabled?: boolean;
     currentModel?: string;
-    currentBaseUrl?: string;
     onChange?: (provider: string | null, model: string | null) => void;
     onDefaultValuesChanged?: (provider: string | null, model: string | null) => void;
     wrapperClassName?: string;
     labelClassName?: string;
 }
-export declare function ModelSelector({ isDisabled, currentModel, currentBaseUrl, onChange, onDefaultValuesChanged, wrapperClassName, labelClassName, }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModelSelector({ isDisabled, currentModel, onChange, onDefaultValuesChanged, wrapperClassName, labelClassName, }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/shared/modals/settings/model-selector.js

@@ -12,125 +12,119 @@ import { extractModelAndProvider as u } from "../../../../utils/extract-model-an
 import { HelpLink as d } from "../../../../ui/help-link.js";
 import { useSearchProviders as f } from "../../../../hooks/query/use-search-providers.js";
 import { useProviderModels as p } from "../../../../hooks/query/use-provider-models.js";
-import { useOpenhandsVerifiedModels as m } from "../../../../hooks/query/use-openhands-verified-models.js";
-import { normalizeDisplayModel as h } from "../../../../utils/normalize-display-model.js";
-import g from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import m from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/shared/modals/settings/model-selector.tsx
-function y({ isDisabled: y, currentModel: b, currentBaseUrl: x, onChange: S, onDefaultValuesChanged: C, wrapperClassName: w, labelClassName: T }) {
-	let [, E] = g.useState(null), [D, O] = g.useState(null), [k, A] = g.useState(null), { data: j = [] } = f(), { data: M } = m(), { data: N = [], isLoading: P, error: F } = p(D), I = g.useMemo(() => j.filter((e) => e.verified), [j]), L = g.useMemo(() => j.filter((e) => !e.verified), [j]), R = g.useMemo(() => N.filter((e) => e.verified), [N]), z = g.useMemo(() => N.filter((e) => !e.verified), [N]);
-	g.useEffect(() => {
-		if (b && M !== void 0) {
-			let e = h(b, x, M), { provider: t, model: n } = u(e);
-			E(e), O(t || null), A(n), C?.(t || null, n);
+function _({ isDisabled: _, currentModel: v, onChange: y, onDefaultValuesChanged: b, wrapperClassName: x, labelClassName: S }) {
+	let [, C] = m.useState(null), [w, T] = m.useState(null), [E, D] = m.useState(null), { data: O = [] } = f(), { data: k = [], isLoading: A, error: j } = p(w), M = m.useMemo(() => O.filter((e) => e.verified), [O]), N = m.useMemo(() => O.filter((e) => !e.verified), [O]), P = m.useMemo(() => k.filter((e) => e.verified), [k]), F = m.useMemo(() => k.filter((e) => !e.verified), [k]);
+	m.useEffect(() => {
+		if (v) {
+			let { provider: e, model: t } = u(v);
+			C(v), T(e || null), D(t), b?.(e || null, t);
 		}
-	}, [
-		b,
-		x,
-		M
-	]);
-	let B = (e) => {
-		O(e), A(null), E(`${e}/`), S?.(e, null);
-	}, V = (e) => {
-		let t = `${D}/${e}`;
-		D === "openai" && (t = e), E(t), A(e), S?.(D, e);
-	}, H = () => {
-		O(null), E(null);
-	}, { t: U } = e("openhands");
-	return /* @__PURE__ */ v("div", {
-		className: r("flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]", w),
+	}, [v]);
+	let I = (e) => {
+		T(e), D(null), C(`${e}/`), y?.(e, null);
+	}, L = (e) => {
+		let t = `${w}/${e}`;
+		w === "openai" && (t = e), C(t), D(e), y?.(w, e);
+	}, R = () => {
+		T(null), C(null);
+	}, { t: z } = e("openhands");
+	return /* @__PURE__ */ g("div", {
+		className: r("flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]", x),
 		children: [
-			/* @__PURE__ */ v("fieldset", {
+			/* @__PURE__ */ g("fieldset", {
 				className: "flex flex-col gap-2.5 w-full",
-				children: [/* @__PURE__ */ _("label", {
-					className: r("text-sm", T),
-					children: U(t.LLM$PROVIDER)
-				}), /* @__PURE__ */ v(s, {
+				children: [/* @__PURE__ */ h("label", {
+					className: r("text-sm", S),
+					children: z(t.LLM$PROVIDER)
+				}), /* @__PURE__ */ g(s, {
 					"data-testid": "llm-provider-input",
 					isRequired: !0,
 					isVirtualized: !1,
 					name: "llm-provider-input",
-					isDisabled: y,
-					"aria-label": U(t.LLM$PROVIDER),
+					isDisabled: _,
+					"aria-label": z(t.LLM$PROVIDER),
 					isClearable: !1,
 					onSelectionChange: (e) => {
-						e?.toString() && B(e.toString());
+						e?.toString() && I(e.toString());
 					},
-					onInputChange: (e) => !e && H(),
-					defaultSelectedKey: D ?? void 0,
-					selectedKey: D,
+					onInputChange: (e) => !e && R(),
+					defaultSelectedKey: w ?? void 0,
+					selectedKey: w,
 					classNames: {
 						popoverContent: "bg-content1 rounded-xl border border-[var(--oh-border)]",
 						selectorButton: c
 					},
 					selectorButtonProps: { disableRipple: !0 },
 					inputProps: { classNames: { inputWrapper: i } },
-					children: [/* @__PURE__ */ _(o, {
-						title: U(t.MODEL_SELECTOR$VERIFIED),
+					children: [/* @__PURE__ */ h(o, {
+						title: z(t.MODEL_SELECTOR$VERIFIED),
 						classNames: { heading: "text-[var(--oh-muted)]" },
-						children: I.map((e) => /* @__PURE__ */ _(a, {
+						children: M.map((e) => /* @__PURE__ */ h(a, {
 							"data-testid": `provider-item-${e.name}`,
 							children: l(e.name)
 						}, e.name))
-					}), L.length > 0 ? /* @__PURE__ */ _(o, {
-						title: U(t.MODEL_SELECTOR$OTHERS),
+					}), N.length > 0 ? /* @__PURE__ */ h(o, {
+						title: z(t.MODEL_SELECTOR$OTHERS),
 						classNames: { heading: "text-[var(--oh-muted)]" },
-						children: L.map((e) => /* @__PURE__ */ _(a, { children: l(e.name) }, e.name))
+						children: N.map((e) => /* @__PURE__ */ h(a, { children: l(e.name) }, e.name))
 					}) : null]
 				})]
 			}),
-			D === "openhands" && /* @__PURE__ */ _(d, {
+			w === "openhands" && /* @__PURE__ */ h(d, {
 				testId: "openhands-account-help",
-				text: U(t.SETTINGS$NEED_OPENHANDS_ACCOUNT),
-				linkText: U(t.SETTINGS$CLICK_HERE),
+				text: z(t.SETTINGS$NEED_OPENHANDS_ACCOUNT),
+				linkText: z(t.SETTINGS$CLICK_HERE),
 				href: n.PRODUCTION,
 				size: "settings",
 				linkColor: "white"
 			}),
-			/* @__PURE__ */ v("fieldset", {
+			/* @__PURE__ */ g("fieldset", {
 				className: "flex flex-col gap-2.5 w-full",
 				children: [
-					/* @__PURE__ */ _("label", {
-						className: r("text-sm", T),
-						children: U(t.LLM$MODEL)
+					/* @__PURE__ */ h("label", {
+						className: r("text-sm", S),
+						children: z(t.LLM$MODEL)
 					}),
-					/* @__PURE__ */ v(s, {
+					/* @__PURE__ */ g(s, {
 						"data-testid": "llm-model-input",
 						isRequired: !0,
 						isVirtualized: !1,
-						isLoading: P,
+						isLoading: A,
 						name: "llm-model-input",
-						"aria-label": U(t.LLM$MODEL),
+						"aria-label": z(t.LLM$MODEL),
 						isClearable: !1,
 						onSelectionChange: (e) => {
-							e?.toString() && V(e.toString());
+							e?.toString() && L(e.toString());
 						},
-						isDisabled: y || !D,
-						selectedKey: k,
-						defaultSelectedKey: k ?? void 0,
+						isDisabled: _ || !w,
+						selectedKey: E,
+						defaultSelectedKey: E ?? void 0,
 						classNames: {
 							popoverContent: "bg-content1 rounded-xl border border-[var(--oh-border)]",
 							selectorButton: c
 						},
 						selectorButtonProps: { disableRipple: !0 },
 						inputProps: { classNames: { inputWrapper: i } },
-						children: [/* @__PURE__ */ _(o, {
-							title: U(t.MODEL_SELECTOR$VERIFIED),
+						children: [/* @__PURE__ */ h(o, {
+							title: z(t.MODEL_SELECTOR$VERIFIED),
 							classNames: { heading: "text-[var(--oh-muted)]" },
-							children: R.map((e) => /* @__PURE__ */ _(a, { children: e.name }, e.name))
-						}), z.length > 0 ? /* @__PURE__ */ _(o, {
-							title: U(t.MODEL_SELECTOR$OTHERS),
+							children: P.map((e) => /* @__PURE__ */ h(a, { children: e.name }, e.name))
+						}), F.length > 0 ? /* @__PURE__ */ h(o, {
+							title: z(t.MODEL_SELECTOR$OTHERS),
 							classNames: { heading: "text-[var(--oh-muted)]" },
-							children: z.map((e) => /* @__PURE__ */ _(a, {
+							children: F.map((e) => /* @__PURE__ */ h(a, {
 								"data-testid": `model-item-${e.name}`,
 								children: e.name
 							}, e.name))
 						}) : null]
 					}),
-					F && /* @__PURE__ */ _("p", {
+					j && /* @__PURE__ */ h("p", {
 						"data-testid": "models-error",
 						className: "text-danger text-xs",
-						children: U(t.CONFIGURATION$ERROR_FETCH_MODELS)
+						children: z(t.CONFIGURATION$ERROR_FETCH_MODELS)
 					})
 				]
 			})
@@ -138,6 +132,6 @@ function y({ isDisabled: y, currentModel: b, currentBaseUrl: x, onChange: S, onD
 	});
 }
 //#endregion
-export { y as ModelSelector };
+export { _ as ModelSelector };
 
 //# sourceMappingURL=model-selector.js.map

package/dist/components/shared/modals/settings/model-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"model-selector.js","names":[],"sources":["../../../../../src/components/shared/modals/settings/model-selector.tsx"],"sourcesContent":["import {\n  Autocomplete,\n  AutocompleteItem,\n  AutocompleteSection,\n} from \"@heroui/react\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { mapProvider } from \"#/utils/map-provider\";\nimport { extractModelAndProvider } from \"#/utils/extract-model-and-provider\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { heroUiAutocompleteSelectorButtonClassName } from \"#/ui/combobox-caret\";\nimport { HelpLink } from \"#/ui/help-link\";\nimport { PRODUCT_URL } from \"#/utils/constants\";\nimport { useSearchProviders } from \"#/hooks/query/use-search-providers\";\nimport { useProviderModels } from \"#/hooks/query/use-provider-models\";\nimport { useOpenhandsVerifiedModels } from \"#/hooks/query/use-openhands-verified-models\";\nimport { normalizeDisplayModel } from \"#/utils/normalize-display-model\";\n\ninterface ModelSelectorProps {\n  isDisabled?: boolean;\n  currentModel?: string;\n  currentBaseUrl?: string;\n  onChange?: (provider: string | null, model: string | null) => void;\n  onDefaultValuesChanged?: (\n    provider: string | null,\n    model: string | null,\n  ) => void;\n  wrapperClassName?: string;\n  labelClassName?: string;\n}\n\nexport function ModelSelector({\n  isDisabled,\n  currentModel,\n  currentBaseUrl,\n  onChange,\n  onDefaultValuesChanged,\n  wrapperClassName,\n  labelClassName,\n}: ModelSelectorProps) {\n  const [, setLitellmId] = React.useState<string | null>(null);\n  const [selectedProvider, setSelectedProvider] = React.useState<string | null>(\n    null,\n  );\n  const [selectedModel, setSelectedModel] = React.useState<string | null>(null);\n\n  const { data: providers = [] } = useSearchProviders();\n  const { data: openhandsVerifiedModels } = useOpenhandsVerifiedModels();\n  const {\n    data: providerModels = [],\n    isLoading: isLoadingModels,\n    error: modelsError,\n  } = useProviderModels(selectedProvider);\n\n  const verifiedProviders = React.useMemo(\n    () => providers.filter((p) => p.verified),\n    [providers],\n  );\n  const unverifiedProviders = React.useMemo(\n    () => providers.filter((p) => !p.verified),\n    [providers],\n  );\n\n  const verifiedModels = React.useMemo(\n    () => providerModels.filter((m) => m.verified),\n    [providerModels],\n  );\n  const unverifiedModels = React.useMemo(\n    () => providerModels.filter((m) => !m.verified),\n    [providerModels],\n  );\n\n  React.useEffect(() => {\n    // Wait for the openhands verified list before initializing — otherwise a\n    // persisted `litellm_proxy/<m>` model would first land as `litellm_proxy`\n    // and only later flip to `openhands`, triggering a redundant /api/llm/models\n    // fetch for the throwaway provider value.\n    if (currentModel && openhandsVerifiedModels !== undefined) {\n      const displayModel = normalizeDisplayModel(\n        currentModel,\n        currentBaseUrl,\n        openhandsVerifiedModels,\n      );\n      const { provider, model } = extractModelAndProvider(displayModel);\n\n      setLitellmId(displayModel);\n      setSelectedProvider(provider || null);\n      setSelectedModel(model);\n      onDefaultValuesChanged?.(provider || null, model);\n    }\n  }, [currentModel, currentBaseUrl, openhandsVerifiedModels]);\n\n  const handleChangeProvider = (provider: string) => {\n    setSelectedProvider(provider);\n    setSelectedModel(null);\n    setLitellmId(`${provider}/`);\n    onChange?.(provider, null);\n  };\n\n  const handleChangeModel = (model: string) => {\n    let fullModel = `${selectedProvider}/${model}`;\n    if (selectedProvider === \"openai\") {\n      fullModel = model;\n    }\n    setLitellmId(fullModel);\n    setSelectedModel(model);\n    onChange?.(selectedProvider, model);\n  };\n\n  const clear = () => {\n    setSelectedProvider(null);\n    setLitellmId(null);\n  };\n\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]\",\n        wrapperClassName,\n      )}\n    >\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$PROVIDER)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-provider-input\"\n          isRequired\n          isVirtualized={false}\n          name=\"llm-provider-input\"\n          isDisabled={isDisabled}\n          aria-label={t(I18nKey.LLM$PROVIDER)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeProvider(e.toString());\n          }}\n          onInputChange={(value) => !value && clear()}\n          defaultSelectedKey={selectedProvider ?? undefined}\n          selectedKey={selectedProvider}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedProviders.map((provider) => (\n              <AutocompleteItem\n                data-testid={`provider-item-${provider.name}`}\n                key={provider.name}\n              >\n                {mapProvider(provider.name)}\n              </AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedProviders.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedProviders.map((provider) => (\n                <AutocompleteItem key={provider.name}>\n                  {mapProvider(provider.name)}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n      </fieldset>\n\n      {selectedProvider === \"openhands\" && (\n        <HelpLink\n          testId=\"openhands-account-help\"\n          text={t(I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT)}\n          linkText={t(I18nKey.SETTINGS$CLICK_HERE)}\n          href={PRODUCT_URL.PRODUCTION}\n          size=\"settings\"\n          linkColor=\"white\"\n        />\n      )}\n\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$MODEL)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-model-input\"\n          isRequired\n          isVirtualized={false}\n          isLoading={isLoadingModels}\n          name=\"llm-model-input\"\n          aria-label={t(I18nKey.LLM$MODEL)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeModel(e.toString());\n          }}\n          isDisabled={isDisabled || !selectedProvider}\n          selectedKey={selectedModel}\n          defaultSelectedKey={selectedModel ?? undefined}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedModels.map((model) => (\n              <AutocompleteItem key={model.name}>{model.name}</AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedModels.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedModels.map((model) => (\n                <AutocompleteItem\n                  data-testid={`model-item-${model.name}`}\n                  key={model.name}\n                >\n                  {model.name}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n        {modelsError && (\n          <p data-testid=\"models-error\" className=\"text-danger text-xs\">\n            {t(I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}\n          </p>\n        )}\n      </fieldset>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"model-selector.js","names":[],"sources":["../../../../../src/components/shared/modals/settings/model-selector.tsx"],"sourcesContent":["import {\n  Autocomplete,\n  AutocompleteItem,\n  AutocompleteSection,\n} from \"@heroui/react\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { mapProvider } from \"#/utils/map-provider\";\nimport { extractModelAndProvider } from \"#/utils/extract-model-and-provider\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { heroUiAutocompleteSelectorButtonClassName } from \"#/ui/combobox-caret\";\nimport { HelpLink } from \"#/ui/help-link\";\nimport { PRODUCT_URL } from \"#/utils/constants\";\nimport { useSearchProviders } from \"#/hooks/query/use-search-providers\";\nimport { useProviderModels } from \"#/hooks/query/use-provider-models\";\n\ninterface ModelSelectorProps {\n  isDisabled?: boolean;\n  currentModel?: string;\n  onChange?: (provider: string | null, model: string | null) => void;\n  onDefaultValuesChanged?: (\n    provider: string | null,\n    model: string | null,\n  ) => void;\n  wrapperClassName?: string;\n  labelClassName?: string;\n}\n\nexport function ModelSelector({\n  isDisabled,\n  currentModel,\n  onChange,\n  onDefaultValuesChanged,\n  wrapperClassName,\n  labelClassName,\n}: ModelSelectorProps) {\n  const [, setLitellmId] = React.useState<string | null>(null);\n  const [selectedProvider, setSelectedProvider] = React.useState<string | null>(\n    null,\n  );\n  const [selectedModel, setSelectedModel] = React.useState<string | null>(null);\n\n  const { data: providers = [] } = useSearchProviders();\n  const {\n    data: providerModels = [],\n    isLoading: isLoadingModels,\n    error: modelsError,\n  } = useProviderModels(selectedProvider);\n\n  const verifiedProviders = React.useMemo(\n    () => providers.filter((p) => p.verified),\n    [providers],\n  );\n  const unverifiedProviders = React.useMemo(\n    () => providers.filter((p) => !p.verified),\n    [providers],\n  );\n\n  const verifiedModels = React.useMemo(\n    () => providerModels.filter((m) => m.verified),\n    [providerModels],\n  );\n  const unverifiedModels = React.useMemo(\n    () => providerModels.filter((m) => !m.verified),\n    [providerModels],\n  );\n\n  React.useEffect(() => {\n    if (currentModel) {\n      const { provider, model } = extractModelAndProvider(currentModel);\n\n      setLitellmId(currentModel);\n      setSelectedProvider(provider || null);\n      setSelectedModel(model);\n      onDefaultValuesChanged?.(provider || null, model);\n    }\n  }, [currentModel]);\n\n  const handleChangeProvider = (provider: string) => {\n    setSelectedProvider(provider);\n    setSelectedModel(null);\n    setLitellmId(`${provider}/`);\n    onChange?.(provider, null);\n  };\n\n  const handleChangeModel = (model: string) => {\n    let fullModel = `${selectedProvider}/${model}`;\n    if (selectedProvider === \"openai\") {\n      fullModel = model;\n    }\n    setLitellmId(fullModel);\n    setSelectedModel(model);\n    onChange?.(selectedProvider, model);\n  };\n\n  const clear = () => {\n    setSelectedProvider(null);\n    setLitellmId(null);\n  };\n\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]\",\n        wrapperClassName,\n      )}\n    >\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$PROVIDER)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-provider-input\"\n          isRequired\n          isVirtualized={false}\n          name=\"llm-provider-input\"\n          isDisabled={isDisabled}\n          aria-label={t(I18nKey.LLM$PROVIDER)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeProvider(e.toString());\n          }}\n          onInputChange={(value) => !value && clear()}\n          defaultSelectedKey={selectedProvider ?? undefined}\n          selectedKey={selectedProvider}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedProviders.map((provider) => (\n              <AutocompleteItem\n                data-testid={`provider-item-${provider.name}`}\n                key={provider.name}\n              >\n                {mapProvider(provider.name)}\n              </AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedProviders.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedProviders.map((provider) => (\n                <AutocompleteItem key={provider.name}>\n                  {mapProvider(provider.name)}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n      </fieldset>\n\n      {selectedProvider === \"openhands\" && (\n        <HelpLink\n          testId=\"openhands-account-help\"\n          text={t(I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT)}\n          linkText={t(I18nKey.SETTINGS$CLICK_HERE)}\n          href={PRODUCT_URL.PRODUCTION}\n          size=\"settings\"\n          linkColor=\"white\"\n        />\n      )}\n\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$MODEL)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-model-input\"\n          isRequired\n          isVirtualized={false}\n          isLoading={isLoadingModels}\n          name=\"llm-model-input\"\n          aria-label={t(I18nKey.LLM$MODEL)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeModel(e.toString());\n          }}\n          isDisabled={isDisabled || !selectedProvider}\n          selectedKey={selectedModel}\n          defaultSelectedKey={selectedModel ?? undefined}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedModels.map((model) => (\n              <AutocompleteItem key={model.name}>{model.name}</AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedModels.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedModels.map((model) => (\n                <AutocompleteItem\n                  data-testid={`model-item-${model.name}`}\n                  key={model.name}\n                >\n                  {model.name}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n        {modelsError && (\n          <p data-testid=\"models-error\" className=\"text-danger text-xs\">\n            {t(I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}\n          </p>\n        )}\n      </fieldset>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/modals/settings/settings-form.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../../i18n/declaration.cjs`),r=require(`../../../../utils/constants.cjs`),i=require(`../../../../context/navigation-context.cjs`),a=require(`../../../../hooks/use-tracking.cjs`),o=require(`../modal-backdrop.cjs`),s=require(`../../../features/settings/brand-button.cjs`),c=require(`../../../../utils/settings-utils.cjs`),l=require(`../../../../hooks/mutation/use-save-settings.cjs`),u=require(`../../../features/settings/settings-input.cjs`),d=require(`../../../../ui/help-link.cjs`),f=require(`./model-selector.cjs`),p=require(`../../../../utils/sdk-settings-schema.cjs`),m=require(`../confirmation-modals/danger-modal.cjs`);let h=require(`react`);h=e.__toESM(h,1);let g=require(`react/jsx-runtime`);function _({settings:e,onClose:_}){let{trackSettingsSaved:v}=a.useTracking(),{mutate:y}=l.useSaveSettings(),{currentPath:b}=i.useNavigation(),{t:x}=t.useTranslation(`openhands`),S=h.default.useRef(null),[C,w]=h.default.useState(!1),T=async e=>{let t=c.extractSettings(e);await y(t,{onSuccess:()=>{_();let e=t.agent_settings_diff?.llm??{};v({llmModel:e.model,llmApiKeySet:e.api_key?`SET`:`UNSET`,searchApiKeySet:t.search_api_key?`SET`:`UNSET`,remoteRuntimeResourceFactor:t.remote_runtime_resource_factor})}})},E=()=>{T(new FormData(S.current??void 0))},D=e=>{e.preventDefault();let t=new FormData(e.currentTarget);b.startsWith(`/conversations/`)?w(!0):T(t)},O=e.llm_api_key_set,k=p.getAgentSettingValue(e,`llm.model`),A=p.getAgentSettingValue(e,`llm.base_url`);return(0,g.jsxs)(`div`,{children:[(0,g.jsxs)(`form`,{ref:S,"data-testid":`settings-form`,className:`flex flex-col gap-6`,onSubmit:D,children:[(0,g.jsxs)(`div`,{className:`flex flex-col gap-[17px]`,children:[(0,g.jsx)(f.ModelSelector,{currentModel:typeof k==`string`?k:void 0,currentBaseUrl:typeof A==`string`?A:void 0,wrapperClassName:`!flex-col !gap-[17px]`,labelClassName:r.SETTINGS_FORM.LABEL_CLASSNAME}),(0,g.jsx)(u.SettingsInput,{testId:`llm-api-key-input`,name:`llm-api-key-input`,label:x(n.I18nKey.SETTINGS_FORM$API_KEY),type:`password`,className:`w-full`,placeholder:O?`<hidden>`:``,labelClassName:r.SETTINGS_FORM.LABEL_CLASSNAME}),(0,g.jsx)(d.HelpLink,{testId:`llm-api-key-help-anchor`,text:x(n.I18nKey.SETTINGS$DONT_KNOW_API_KEY),linkText:x(n.I18nKey.SETTINGS$CLICK_FOR_INSTRUCTIONS),href:`https://docs.openhands.dev/usage/local-setup#getting-an-api-key`,size:`settings`,linkColor:`white`})]}),(0,g.jsx)(`div`,{className:`flex flex-col gap-2`,children:(0,g.jsx)(s.BrandButton,{testId:`save-settings-button`,type:`submit`,variant:`primary`,className:`w-full`,children:x(n.I18nKey.BUTTON$SAVE)})})]}),C&&(0,g.jsx)(o.ModalBackdrop,{children:(0,g.jsx)(m.DangerModal,{title:x(n.I18nKey.MODAL$END_SESSION_TITLE),description:x(n.I18nKey.MODAL$END_SESSION_MESSAGE),buttons:{danger:{text:x(n.I18nKey.BUTTON$END_SESSION),onClick:E},cancel:{text:x(n.I18nKey.BUTTON$CANCEL),onClick:()=>w(!1)}}})})]})}exports.SettingsForm=_;
+const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../../i18n/declaration.cjs`),r=require(`../../../../utils/constants.cjs`),i=require(`../../../../context/navigation-context.cjs`),a=require(`../../../../hooks/use-tracking.cjs`),o=require(`../modal-backdrop.cjs`),s=require(`../../../features/settings/brand-button.cjs`),c=require(`../../../../utils/settings-utils.cjs`),l=require(`../../../../hooks/mutation/use-save-settings.cjs`),u=require(`../../../features/settings/settings-input.cjs`),d=require(`../../../../ui/help-link.cjs`),f=require(`./model-selector.cjs`),p=require(`../../../../utils/sdk-settings-schema.cjs`),m=require(`../confirmation-modals/danger-modal.cjs`);let h=require(`react`);h=e.__toESM(h,1);let g=require(`react/jsx-runtime`);function _({settings:e,onClose:_}){let{trackSettingsSaved:v}=a.useTracking(),{mutate:y}=l.useSaveSettings(),{currentPath:b}=i.useNavigation(),{t:x}=t.useTranslation(`openhands`),S=h.default.useRef(null),[C,w]=h.default.useState(!1),T=async e=>{let t=c.extractSettings(e);await y(t,{onSuccess:()=>{_();let e=t.agent_settings_diff?.llm??{};v({llmModel:e.model,llmApiKeySet:e.api_key?`SET`:`UNSET`,searchApiKeySet:t.search_api_key?`SET`:`UNSET`,remoteRuntimeResourceFactor:t.remote_runtime_resource_factor})}})},E=()=>{T(new FormData(S.current??void 0))},D=e=>{e.preventDefault();let t=new FormData(e.currentTarget);b.startsWith(`/conversations/`)?w(!0):T(t)},O=e.llm_api_key_set,k=p.getAgentSettingValue(e,`llm.model`);return(0,g.jsxs)(`div`,{children:[(0,g.jsxs)(`form`,{ref:S,"data-testid":`settings-form`,className:`flex flex-col gap-6`,onSubmit:D,children:[(0,g.jsxs)(`div`,{className:`flex flex-col gap-[17px]`,children:[(0,g.jsx)(f.ModelSelector,{currentModel:typeof k==`string`?k:void 0,wrapperClassName:`!flex-col !gap-[17px]`,labelClassName:r.SETTINGS_FORM.LABEL_CLASSNAME}),(0,g.jsx)(u.SettingsInput,{testId:`llm-api-key-input`,name:`llm-api-key-input`,label:x(n.I18nKey.SETTINGS_FORM$API_KEY),type:`password`,className:`w-full`,placeholder:O?`<hidden>`:``,labelClassName:r.SETTINGS_FORM.LABEL_CLASSNAME}),(0,g.jsx)(d.HelpLink,{testId:`llm-api-key-help-anchor`,text:x(n.I18nKey.SETTINGS$DONT_KNOW_API_KEY),linkText:x(n.I18nKey.SETTINGS$CLICK_FOR_INSTRUCTIONS),href:`https://docs.openhands.dev/usage/local-setup#getting-an-api-key`,size:`settings`,linkColor:`white`})]}),(0,g.jsx)(`div`,{className:`flex flex-col gap-2`,children:(0,g.jsx)(s.BrandButton,{testId:`save-settings-button`,type:`submit`,variant:`primary`,className:`w-full`,children:x(n.I18nKey.BUTTON$SAVE)})})]}),C&&(0,g.jsx)(o.ModalBackdrop,{children:(0,g.jsx)(m.DangerModal,{title:x(n.I18nKey.MODAL$END_SESSION_TITLE),description:x(n.I18nKey.MODAL$END_SESSION_MESSAGE),buttons:{danger:{text:x(n.I18nKey.BUTTON$END_SESSION),onClick:E},cancel:{text:x(n.I18nKey.BUTTON$CANCEL),onClick:()=>w(!1)}}})})]})}exports.SettingsForm=_;
 //# sourceMappingURL=settings-form.cjs.map