@openhands/agent-canvas 1.16.0 → 1.18.0

package/dist/components/providers/agent-server-ui-providers.js.map

@@ -1 +1 @@
-{"version":3,"file":"agent-server-ui-providers.js","names":[],"sources":["../../../src/components/providers/agent-server-ui-providers.tsx"],"sourcesContent":["import React from \"react\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { I18nextProvider } from \"react-i18next\";\nimport { type i18n as I18nInstance } from \"i18next\";\nimport {\n  getDefaultQueryClient,\n  getQueryClient,\n  setQueryClient,\n} from \"#/query-client-config\";\nimport {\n  OPENHANDS_I18N_NAMESPACE,\n  getDefaultI18n,\n  getI18n,\n  setI18n,\n} from \"#/i18n\";\nimport { ActiveBackendProvider } from \"#/contexts/active-backend-context\";\nimport type { TelemetryConfig } from \"#/services/telemetry\";\nimport { TelemetryProvider } from \"./telemetry-provider\";\nimport {\n  AgentServerUIRoot,\n  type AgentServerUIRootProps,\n} from \"./agent-server-ui-root\";\n\nexport interface AgentServerUIPostHogAnalyticsConfig extends TelemetryConfig {\n  provider: \"posthog\";\n}\n\nexport type AgentServerUIAnalyticsConfig =\n  | AgentServerUIPostHogAnalyticsConfig\n  | false\n  | null;\n\nexport const DEFAULT_AGENT_SERVER_ANALYTICS: AgentServerUIAnalyticsConfig = {\n  provider: \"posthog\",\n};\n\nexport interface AgentServerUIProvidersProps extends Pick<\n  AgentServerUIRootProps,\n  \"className\" | \"contentClassName\" | \"style\" | \"styleOverrides\" | \"theme\"\n> {\n  children: React.ReactNode;\n  queryClient?: QueryClient;\n  analytics?: AgentServerUIAnalyticsConfig;\n  i18n?: I18nInstance;\n  withStyleRoot?: boolean;\n}\n\nexport function AgentServerUIProviders({\n  children,\n  queryClient,\n  analytics,\n  i18n,\n  className,\n  contentClassName,\n  style,\n  styleOverrides,\n  theme,\n  withStyleRoot = true,\n}: AgentServerUIProvidersProps) {\n  const resolvedQueryClient = React.useMemo(\n    () => queryClient ?? getDefaultQueryClient(),\n    [queryClient],\n  );\n  const resolvedI18n = React.useMemo(() => i18n ?? getDefaultI18n(), [i18n]);\n  const previousProvidersRef = React.useRef<{\n    queryClient: QueryClient;\n    i18n: I18nInstance;\n  } | null>(null);\n\n  if (!previousProvidersRef.current) {\n    previousProvidersRef.current = {\n      queryClient: getQueryClient(),\n      i18n: getI18n(),\n    };\n  }\n\n  setQueryClient(resolvedQueryClient);\n  setI18n(resolvedI18n);\n\n  React.useEffect(\n    () => () => {\n      if (previousProvidersRef.current) {\n        setQueryClient(previousProvidersRef.current.queryClient);\n        setI18n(previousProvidersRef.current.i18n);\n      }\n    },\n    [],\n  );\n\n  const posthogConfig =\n    analytics && analytics.provider === \"posthog\"\n      ? {\n          apiKey: analytics.apiKey,\n          apiHost: analytics.apiHost,\n          uiHost: analytics.uiHost,\n        }\n      : false;\n  const content = (\n    <TelemetryProvider config={posthogConfig}>{children}</TelemetryProvider>\n  );\n\n  const wrappedContent = withStyleRoot ? (\n    <AgentServerUIRoot\n      className={className}\n      contentClassName={contentClassName}\n      style={style}\n      styleOverrides={styleOverrides}\n      theme={theme}\n    >\n      {content}\n    </AgentServerUIRoot>\n  ) : (\n    content\n  );\n\n  return (\n    <I18nextProvider i18n={resolvedI18n} defaultNS={OPENHANDS_I18N_NAMESPACE}>\n      <QueryClientProvider client={resolvedQueryClient}>\n        <ActiveBackendProvider>{wrappedContent}</ActiveBackendProvider>\n      </QueryClientProvider>\n    </I18nextProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;AAgCA,IAAa,IAA+D,EAC1E,UAAU,UACZ;AAaA,SAAgB,EAAuB,EACrC,aACA,gBACA,cACA,SACA,cACA,qBACA,UACA,mBACA,UACA,mBAAgB,MACc;CAC9B,IAAM,IAAsB,EAAM,cAC1B,KAAe,EAAsB,GAC3C,CAAC,CAAW,CACd,GACM,IAAe,EAAM,cAAc,KAAQ,EAAe,GAAG,CAAC,CAAI,CAAC,GACnE,IAAuB,EAAM,OAGzB,IAAI;CAYd,AAVA,AACE,EAAqB,YAAU;EAC7B,aAAa,EAAe;EAC5B,MAAM,EAAQ;CAChB,GAGF,EAAe,CAAmB,GAClC,EAAQ,CAAY,GAEpB,EAAM,sBACQ;EACV,AAAI,EAAqB,YACvB,EAAe,EAAqB,QAAQ,WAAW,GACvD,EAAQ,EAAqB,QAAQ,IAAI;CAE7C,GACA,CAAC,CACH;CAUA,IAAM,IACJ,kBAAC,GAAD;EAAmB,QARnB,KAAa,EAAU,aAAa,YAChC;GACE,QAAQ,EAAU;GAClB,SAAS,EAAU;GACnB,QAAQ,EAAU;EACpB,IACA;EAEuC;CAA4B,CAAA;CAiBzE,OACE,kBAAC,GAAD;EAAiB,MAAM;EAAc,WAAW;YAC9C,kBAAC,GAAD;GAAqB,QAAQ;aAC3B,kBAAC,GAAD,EAAA,UAjBiB,IACrB,kBAAC,GAAD;IACa;IACO;IACX;IACS;IACT;cAEN;GACgB,CAAA,IAEnB,EAMkE,CAAA;EAC3C,CAAA;CACN,CAAA;AAErB"}
+{"version":3,"file":"agent-server-ui-providers.js","names":[],"sources":["../../../src/components/providers/agent-server-ui-providers.tsx"],"sourcesContent":["import React from \"react\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { I18nextProvider } from \"react-i18next\";\nimport { type i18n as I18nInstance } from \"i18next\";\nimport {\n  getDefaultQueryClient,\n  getQueryClient,\n  setQueryClient,\n} from \"#/query-client-config\";\nimport {\n  OPENHANDS_I18N_NAMESPACE,\n  getDefaultI18n,\n  getI18n,\n  setI18n,\n} from \"#/i18n\";\nimport { ActiveBackendProvider } from \"#/contexts/active-backend-context\";\nimport { useHydrateFreeModels } from \"#/hooks/query/use-free-models\";\nimport type { TelemetryConfig } from \"#/services/telemetry\";\nimport { TelemetryProvider } from \"./telemetry-provider\";\nimport {\n  AgentServerUIRoot,\n  type AgentServerUIRootProps,\n} from \"./agent-server-ui-root\";\n\nexport interface AgentServerUIPostHogAnalyticsConfig extends TelemetryConfig {\n  provider: \"posthog\";\n}\n\nexport type AgentServerUIAnalyticsConfig =\n  | AgentServerUIPostHogAnalyticsConfig\n  | false\n  | null;\n\nexport const DEFAULT_AGENT_SERVER_ANALYTICS: AgentServerUIAnalyticsConfig = {\n  provider: \"posthog\",\n};\n\nexport interface AgentServerUIProvidersProps extends Pick<\n  AgentServerUIRootProps,\n  \"className\" | \"contentClassName\" | \"style\" | \"styleOverrides\" | \"theme\"\n> {\n  children: React.ReactNode;\n  queryClient?: QueryClient;\n  analytics?: AgentServerUIAnalyticsConfig;\n  i18n?: I18nInstance;\n  withStyleRoot?: boolean;\n}\n\n/**\n * Fetches the DB-driven free / default model flags once and mirrors them into\n * the free-models store. Rendered inside the query provider so leaf components\n * can read the flags synchronously without a QueryClientProvider in scope.\n */\nfunction FreeModelsHydrator() {\n  useHydrateFreeModels();\n  return null;\n}\n\nexport function AgentServerUIProviders({\n  children,\n  queryClient,\n  analytics,\n  i18n,\n  className,\n  contentClassName,\n  style,\n  styleOverrides,\n  theme,\n  withStyleRoot = true,\n}: AgentServerUIProvidersProps) {\n  const resolvedQueryClient = React.useMemo(\n    () => queryClient ?? getDefaultQueryClient(),\n    [queryClient],\n  );\n  const resolvedI18n = React.useMemo(() => i18n ?? getDefaultI18n(), [i18n]);\n  const previousProvidersRef = React.useRef<{\n    queryClient: QueryClient;\n    i18n: I18nInstance;\n  } | null>(null);\n\n  if (!previousProvidersRef.current) {\n    previousProvidersRef.current = {\n      queryClient: getQueryClient(),\n      i18n: getI18n(),\n    };\n  }\n\n  setQueryClient(resolvedQueryClient);\n  setI18n(resolvedI18n);\n\n  React.useEffect(\n    () => () => {\n      if (previousProvidersRef.current) {\n        setQueryClient(previousProvidersRef.current.queryClient);\n        setI18n(previousProvidersRef.current.i18n);\n      }\n    },\n    [],\n  );\n\n  const posthogConfig =\n    analytics && analytics.provider === \"posthog\"\n      ? {\n          apiKey: analytics.apiKey,\n          apiHost: analytics.apiHost,\n          uiHost: analytics.uiHost,\n        }\n      : false;\n  const content = (\n    <TelemetryProvider config={posthogConfig}>\n      <FreeModelsHydrator />\n      {children}\n    </TelemetryProvider>\n  );\n\n  const wrappedContent = withStyleRoot ? (\n    <AgentServerUIRoot\n      className={className}\n      contentClassName={contentClassName}\n      style={style}\n      styleOverrides={styleOverrides}\n      theme={theme}\n    >\n      {content}\n    </AgentServerUIRoot>\n  ) : (\n    content\n  );\n\n  return (\n    <I18nextProvider i18n={resolvedI18n} defaultNS={OPENHANDS_I18N_NAMESPACE}>\n      <QueryClientProvider client={resolvedQueryClient}>\n        <ActiveBackendProvider>{wrappedContent}</ActiveBackendProvider>\n      </QueryClientProvider>\n    </I18nextProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAiCA,IAAa,IAA+D,EAC1E,UAAU,UACZ;AAkBA,SAAS,IAAqB;CAE5B,OADA,EAAqB,GACd;AACT;AAEA,SAAgB,EAAuB,EACrC,aACA,gBACA,cACA,SACA,cACA,qBACA,UACA,mBACA,UACA,mBAAgB,MACc;CAC9B,IAAM,IAAsB,EAAM,cAC1B,KAAe,EAAsB,GAC3C,CAAC,CAAW,CACd,GACM,IAAe,EAAM,cAAc,KAAQ,EAAe,GAAG,CAAC,CAAI,CAAC,GACnE,IAAuB,EAAM,OAGzB,IAAI;CAYd,AAVA,AACE,EAAqB,YAAU;EAC7B,aAAa,EAAe;EAC5B,MAAM,EAAQ;CAChB,GAGF,EAAe,CAAmB,GAClC,EAAQ,CAAY,GAEpB,EAAM,sBACQ;EACV,AAAI,EAAqB,YACvB,EAAe,EAAqB,QAAQ,WAAW,GACvD,EAAQ,EAAqB,QAAQ,IAAI;CAE7C,GACA,CAAC,CACH;CAUA,IAAM,IACJ,kBAAC,GAAD;EAAmB,QARnB,KAAa,EAAU,aAAa,YAChC;GACE,QAAQ,EAAU;GAClB,SAAS,EAAU;GACnB,QAAQ,EAAU;EACpB,IACA;YAEJ,CACE,kBAAC,GAAD,CAAqB,CAAA,GACpB,CACgB;;CAiBrB,OACE,kBAAC,GAAD;EAAiB,MAAM;EAAc,WAAW;YAC9C,kBAAC,GAAD;GAAqB,QAAQ;aAC3B,kBAAC,GAAD,EAAA,UAjBiB,IACrB,kBAAC,GAAD;IACa;IACO;IACX;IACS;IACT;cAEN;GACgB,CAAA,IAEnB,EAMkE,CAAA;EAC3C,CAAA;CACN,CAAA;AAErB"}

package/dist/components/shared/buttons/remove-button.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs"),t=require("../../../icons/close.cjs");let n=require("react/jsx-runtime");function r({onClick:r,className:i}){return(0,n.jsx)(`button`,{type:`button`,onClick:r,className:e.cn(`bg-[var(--oh-muted)] rounded-full w-5 h-5 flex items-center justify-center cursor-pointer`,i),children:(0,n.jsx)(t.default,{width:18,height:18})})}exports.RemoveButton=r;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs"),t=require("../../../icons/close.cjs");let n=require("react/jsx-runtime");function r({onClick:r,className:i,"aria-label":a}){return(0,n.jsx)(`button`,{type:`button`,onClick:r,"aria-label":a,className:e.cn(`bg-[var(--oh-muted)] rounded-full w-5 h-5 flex items-center justify-center cursor-pointer`,i),children:(0,n.jsx)(t.default,{width:18,height:18})})}exports.RemoveButton=r;
 //# sourceMappingURL=remove-button.cjs.map

package/dist/components/shared/buttons/remove-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"remove-button.cjs","names":[],"sources":["../../../../src/components/shared/buttons/remove-button.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport CloseIcon from \"#/icons/close.svg?react\";\n\ninterface RemoveButtonProps {\n  onClick: () => void;\n  className?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n}\n\nexport function RemoveButton({ onClick, className }: RemoveButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        \"bg-[var(--oh-muted)] rounded-full w-5 h-5 flex items-center justify-center cursor-pointer\",\n        className,\n      )}\n    >\n      <CloseIcon width={18} height={18} />\n    </button>\n  );\n}\n"],"mappings":"wKAQA,SAAgB,EAAa,CAAE,UAAS,aAAgC,CACtE,OACE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACI,UACT,UAAW,EAAA,GACT,4FACA,CACF,YAEA,EAAA,EAAA,KAAC,EAAA,QAAD,CAAW,MAAO,GAAI,OAAQ,EAAK,CAAA,CAC7B,CAAA,CAEZ"}
+{"version":3,"file":"remove-button.cjs","names":[],"sources":["../../../../src/components/shared/buttons/remove-button.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport CloseIcon from \"#/icons/close.svg?react\";\n\ninterface RemoveButtonProps {\n  onClick: () => void;\n  className?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n  \"aria-label\"?: string;\n}\n\nexport function RemoveButton({\n  onClick,\n  className,\n  \"aria-label\": ariaLabel,\n}: RemoveButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={ariaLabel}\n      className={cn(\n        \"bg-[var(--oh-muted)] rounded-full w-5 h-5 flex items-center justify-center cursor-pointer\",\n        className,\n      )}\n    >\n      <CloseIcon width={18} height={18} />\n    </button>\n  );\n}\n"],"mappings":"wKASA,SAAgB,EAAa,CAC3B,UACA,YACA,aAAc,GACM,CACpB,OACE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACI,UACT,aAAY,EACZ,UAAW,EAAA,GACT,4FACA,CACF,YAEA,EAAA,EAAA,KAAC,EAAA,QAAD,CAAW,MAAO,GAAI,OAAQ,EAAK,CAAA,CAC7B,CAAA,CAEZ"}

package/dist/components/shared/buttons/remove-button.d.ts

@@ -1,6 +1,7 @@
 interface RemoveButtonProps {
     onClick: () => void;
     className?: React.HTMLAttributes<HTMLDivElement>["className"];
+    "aria-label"?: string;
 }
-export declare function RemoveButton({ onClick, className }: RemoveButtonProps): import("react").JSX.Element;
+export declare function RemoveButton({ onClick, className, "aria-label": ariaLabel, }: RemoveButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/shared/buttons/remove-button.js

@@ -2,10 +2,11 @@ import { cn as e } from "../../../utils/utils.js";
 import t from "../../../icons/close.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/shared/buttons/remove-button.tsx
-function r({ onClick: r, className: i }) {
+function r({ onClick: r, className: i, "aria-label": a }) {
 	return /* @__PURE__ */ n("button", {
 		type: "button",
 		onClick: r,
+		"aria-label": a,
 		className: e("bg-[var(--oh-muted)] rounded-full w-5 h-5 flex items-center justify-center cursor-pointer", i),
 		children: /* @__PURE__ */ n(t, {
 			width: 18,

package/dist/components/shared/buttons/remove-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"remove-button.js","names":[],"sources":["../../../../src/components/shared/buttons/remove-button.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport CloseIcon from \"#/icons/close.svg?react\";\n\ninterface RemoveButtonProps {\n  onClick: () => void;\n  className?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n}\n\nexport function RemoveButton({ onClick, className }: RemoveButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        \"bg-[var(--oh-muted)] rounded-full w-5 h-5 flex items-center justify-center cursor-pointer\",\n        className,\n      )}\n    >\n      <CloseIcon width={18} height={18} />\n    </button>\n  );\n}\n"],"mappings":";;;;AAQA,SAAgB,EAAa,EAAE,YAAS,gBAAgC;CACtE,OACE,kBAAC,UAAD;EACE,MAAK;EACI;EACT,WAAW,EACT,6FACA,CACF;YAEA,kBAAC,GAAD;GAAW,OAAO;GAAI,QAAQ;EAAK,CAAA;CAC7B,CAAA;AAEZ"}
+{"version":3,"file":"remove-button.js","names":[],"sources":["../../../../src/components/shared/buttons/remove-button.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport CloseIcon from \"#/icons/close.svg?react\";\n\ninterface RemoveButtonProps {\n  onClick: () => void;\n  className?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n  \"aria-label\"?: string;\n}\n\nexport function RemoveButton({\n  onClick,\n  className,\n  \"aria-label\": ariaLabel,\n}: RemoveButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={ariaLabel}\n      className={cn(\n        \"bg-[var(--oh-muted)] rounded-full w-5 h-5 flex items-center justify-center cursor-pointer\",\n        className,\n      )}\n    >\n      <CloseIcon width={18} height={18} />\n    </button>\n  );\n}\n"],"mappings":";;;;AASA,SAAgB,EAAa,EAC3B,YACA,cACA,cAAc,KACM;CACpB,OACE,kBAAC,UAAD;EACE,MAAK;EACI;EACT,cAAY;EACZ,WAAW,EACT,6FACA,CACF;YAEA,kBAAC,GAAD;GAAW,OAAO;GAAI,QAAQ;EAAK,CAAA;CAC7B,CAAA;AAEZ"}

package/dist/components/shared/buttons/styled-tooltip.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/utils.cjs"),n=require("../../../node_modules/@heroui/tooltip/dist/chunk-AUA5GDXN.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(e){return r.default.Children.count(e)===1&&r.default.isValidElement(e)?e:(0,i.jsx)(`span`,{className:`inline-flex`,children:e})}function o({children:e,content:r,tooltipClassName:o,placement:s=`right`,showArrow:c=!1,closeDelay:l=100,shouldFlip:u,offset:d=7}){return(0,i.jsx)(n.tooltip_default,{content:r,closeDelay:l,placement:s,offset:d,shouldFlip:u,className:t.cn(`bg-white text-black`,o),showArrow:c,disableAnimation:!1,classNames:{content:t.cn(`z-[9999] rounded-md px-2 py-1 text-xs font-medium shadow-md`,`!bg-white !text-black`,o)},children:a(e)})}exports.StyledTooltip=o;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/utils.cjs"),n=require("../../../node_modules/@heroui/tooltip/dist/chunk-AUA5GDXN.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(e){return r.default.Children.count(e)===1&&r.default.isValidElement(e)?e:(0,i.jsx)(`span`,{className:`inline-flex`,children:e})}function o({children:e,content:r,tooltipClassName:o,placement:s=`right`,showArrow:c=!1,closeDelay:l=100,shouldFlip:u,offset:d=7,isOpen:f}){return(0,i.jsx)(n.tooltip_default,{content:r,closeDelay:l,placement:s,offset:d,shouldFlip:u,isOpen:f,className:t.cn(`bg-white text-black`,o),showArrow:c,disableAnimation:!1,classNames:{content:t.cn(`z-[9999] rounded-md px-2 py-1 text-xs font-medium shadow-md`,`!bg-white !text-black`,o)},children:a(e)})}exports.StyledTooltip=o;
 //# sourceMappingURL=styled-tooltip.cjs.map

package/dist/components/shared/buttons/styled-tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled-tooltip.cjs","names":[],"sources":["../../../../src/components/shared/buttons/styled-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from \"@heroui/react\";\nimport React, { ReactNode } from \"react\";\nimport { cn } from \"#/utils/utils\";\n\nexport interface StyledTooltipProps {\n  children: ReactNode;\n  content: string | ReactNode;\n  tooltipClassName?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n  placement?: TooltipProps[\"placement\"];\n  showArrow?: boolean;\n  closeDelay?: number;\n  offset?: number;\n  shouldFlip?: boolean;\n}\n\nfunction getTooltipTriggerChild(children: ReactNode) {\n  if (React.Children.count(children) === 1 && React.isValidElement(children)) {\n    return children;\n  }\n  return <span className=\"inline-flex\">{children}</span>;\n}\n\nexport function StyledTooltip({\n  children,\n  content,\n  tooltipClassName,\n  placement = \"right\",\n  showArrow = false,\n  closeDelay = 100,\n  shouldFlip,\n  offset = 7,\n}: StyledTooltipProps) {\n  const disableAnimation = import.meta.env.MODE === \"test\";\n\n  return (\n    <Tooltip\n      content={content}\n      closeDelay={closeDelay}\n      placement={placement}\n      offset={offset}\n      shouldFlip={shouldFlip}\n      className={cn(\"bg-white text-black\", tooltipClassName)}\n      showArrow={showArrow}\n      disableAnimation={disableAnimation}\n      classNames={{\n        content: cn(\n          \"z-[9999] rounded-md px-2 py-1 text-xs font-medium shadow-md\",\n          \"!bg-white !text-black\",\n          tooltipClassName,\n        ),\n      }}\n    >\n      {getTooltipTriggerChild(children)}\n    </Tooltip>\n  );\n}\n"],"mappings":"uPAeA,SAAS,EAAuB,EAAqB,CAInD,OAHI,EAAA,QAAM,SAAS,MAAM,CAAQ,IAAM,GAAK,EAAA,QAAM,eAAe,CAAQ,EAChE,GAEF,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,cAAe,UAAe,CAAA,CACvD,CAEA,SAAgB,EAAc,CAC5B,WACA,UACA,mBACA,YAAY,QACZ,YAAY,GACZ,aAAa,IACb,aACA,SAAS,GACY,CAGrB,OACE,EAAA,EAAA,KAAC,EAAA,gBAAD,CACW,UACG,aACD,YACH,SACI,aACZ,UAAW,EAAA,GAAG,sBAAuB,CAAgB,EAC1C,YACO,iBAAA,GAClB,WAAY,CACV,QAAS,EAAA,GACP,8DACA,wBACA,CACF,CACF,WAEC,EAAuB,CAAQ,CACzB,CAAA,CAEb"}
+{"version":3,"file":"styled-tooltip.cjs","names":[],"sources":["../../../../src/components/shared/buttons/styled-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from \"@heroui/react\";\nimport React, { ReactNode } from \"react\";\nimport { cn } from \"#/utils/utils\";\n\nexport interface StyledTooltipProps {\n  children: ReactNode;\n  content: string | ReactNode;\n  tooltipClassName?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n  placement?: TooltipProps[\"placement\"];\n  showArrow?: boolean;\n  closeDelay?: number;\n  offset?: number;\n  shouldFlip?: boolean;\n  isOpen?: TooltipProps[\"isOpen\"];\n}\n\nfunction getTooltipTriggerChild(children: ReactNode) {\n  if (React.Children.count(children) === 1 && React.isValidElement(children)) {\n    return children;\n  }\n  return <span className=\"inline-flex\">{children}</span>;\n}\n\nexport function StyledTooltip({\n  children,\n  content,\n  tooltipClassName,\n  placement = \"right\",\n  showArrow = false,\n  closeDelay = 100,\n  shouldFlip,\n  offset = 7,\n  isOpen,\n}: StyledTooltipProps) {\n  const disableAnimation = import.meta.env.MODE === \"test\";\n\n  return (\n    <Tooltip\n      content={content}\n      closeDelay={closeDelay}\n      placement={placement}\n      offset={offset}\n      shouldFlip={shouldFlip}\n      isOpen={isOpen}\n      className={cn(\"bg-white text-black\", tooltipClassName)}\n      showArrow={showArrow}\n      disableAnimation={disableAnimation}\n      classNames={{\n        content: cn(\n          \"z-[9999] rounded-md px-2 py-1 text-xs font-medium shadow-md\",\n          \"!bg-white !text-black\",\n          tooltipClassName,\n        ),\n      }}\n    >\n      {getTooltipTriggerChild(children)}\n    </Tooltip>\n  );\n}\n"],"mappings":"uPAgBA,SAAS,EAAuB,EAAqB,CAInD,OAHI,EAAA,QAAM,SAAS,MAAM,CAAQ,IAAM,GAAK,EAAA,QAAM,eAAe,CAAQ,EAChE,GAEF,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,cAAe,UAAe,CAAA,CACvD,CAEA,SAAgB,EAAc,CAC5B,WACA,UACA,mBACA,YAAY,QACZ,YAAY,GACZ,aAAa,IACb,aACA,SAAS,EACT,UACqB,CAGrB,OACE,EAAA,EAAA,KAAC,EAAA,gBAAD,CACW,UACG,aACD,YACH,SACI,aACJ,SACR,UAAW,EAAA,GAAG,sBAAuB,CAAgB,EAC1C,YACO,iBAAA,GAClB,WAAY,CACV,QAAS,EAAA,GACP,8DACA,wBACA,CACF,CACF,WAEC,EAAuB,CAAQ,CACzB,CAAA,CAEb"}

package/dist/components/shared/buttons/styled-tooltip.d.ts

@@ -9,5 +9,6 @@ export interface StyledTooltipProps {
     closeDelay?: number;
     offset?: number;
     shouldFlip?: boolean;
+    isOpen?: TooltipProps["isOpen"];
 }
-export declare function StyledTooltip({ children, content, tooltipClassName, placement, showArrow, closeDelay, shouldFlip, offset, }: StyledTooltipProps): React.JSX.Element;
+export declare function StyledTooltip({ children, content, tooltipClassName, placement, showArrow, closeDelay, shouldFlip, offset, isOpen, }: StyledTooltipProps): React.JSX.Element;

package/dist/components/shared/buttons/styled-tooltip.js

@@ -9,13 +9,14 @@ function i(e) {
 		children: e
 	});
 }
-function a({ children: n, content: a, tooltipClassName: o, placement: s = "right", showArrow: c = !1, closeDelay: l = 100, shouldFlip: u, offset: d = 7 }) {
+function a({ children: n, content: a, tooltipClassName: o, placement: s = "right", showArrow: c = !1, closeDelay: l = 100, shouldFlip: u, offset: d = 7, isOpen: f }) {
 	return /* @__PURE__ */ r(t, {
 		content: a,
 		closeDelay: l,
 		placement: s,
 		offset: d,
 		shouldFlip: u,
+		isOpen: f,
 		className: e("bg-white text-black", o),
 		showArrow: c,
 		disableAnimation: !1,

package/dist/components/shared/buttons/styled-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-tooltip.js","names":[],"sources":["../../../../src/components/shared/buttons/styled-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from \"@heroui/react\";\nimport React, { ReactNode } from \"react\";\nimport { cn } from \"#/utils/utils\";\n\nexport interface StyledTooltipProps {\n  children: ReactNode;\n  content: string | ReactNode;\n  tooltipClassName?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n  placement?: TooltipProps[\"placement\"];\n  showArrow?: boolean;\n  closeDelay?: number;\n  offset?: number;\n  shouldFlip?: boolean;\n}\n\nfunction getTooltipTriggerChild(children: ReactNode) {\n  if (React.Children.count(children) === 1 && React.isValidElement(children)) {\n    return children;\n  }\n  return <span className=\"inline-flex\">{children}</span>;\n}\n\nexport function StyledTooltip({\n  children,\n  content,\n  tooltipClassName,\n  placement = \"right\",\n  showArrow = false,\n  closeDelay = 100,\n  shouldFlip,\n  offset = 7,\n}: StyledTooltipProps) {\n  const disableAnimation = import.meta.env.MODE === \"test\";\n\n  return (\n    <Tooltip\n      content={content}\n      closeDelay={closeDelay}\n      placement={placement}\n      offset={offset}\n      shouldFlip={shouldFlip}\n      className={cn(\"bg-white text-black\", tooltipClassName)}\n      showArrow={showArrow}\n      disableAnimation={disableAnimation}\n      classNames={{\n        content: cn(\n          \"z-[9999] rounded-md px-2 py-1 text-xs font-medium shadow-md\",\n          \"!bg-white !text-black\",\n          tooltipClassName,\n        ),\n      }}\n    >\n      {getTooltipTriggerChild(children)}\n    </Tooltip>\n  );\n}\n"],"mappings":";;;;;AAeA,SAAS,EAAuB,GAAqB;CAInD,OAHI,EAAM,SAAS,MAAM,CAAQ,MAAM,KAAK,EAAM,eAAe,CAAQ,IAChE,IAEF,kBAAC,QAAD;EAAM,WAAU;EAAe;CAAe,CAAA;AACvD;AAEA,SAAgB,EAAc,EAC5B,aACA,YACA,qBACA,eAAY,SACZ,eAAY,IACZ,gBAAa,KACb,eACA,YAAS,KACY;CAGrB,OACE,kBAAC,GAAD;EACW;EACG;EACD;EACH;EACI;EACZ,WAAW,EAAG,uBAAuB,CAAgB;EAC1C;EACO,kBAAA;EAClB,YAAY,EACV,SAAS,EACP,+DACA,yBACA,CACF,EACF;YAEC,EAAuB,CAAQ;CACzB,CAAA;AAEb"}
+{"version":3,"file":"styled-tooltip.js","names":[],"sources":["../../../../src/components/shared/buttons/styled-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from \"@heroui/react\";\nimport React, { ReactNode } from \"react\";\nimport { cn } from \"#/utils/utils\";\n\nexport interface StyledTooltipProps {\n  children: ReactNode;\n  content: string | ReactNode;\n  tooltipClassName?: React.HTMLAttributes<HTMLDivElement>[\"className\"];\n  placement?: TooltipProps[\"placement\"];\n  showArrow?: boolean;\n  closeDelay?: number;\n  offset?: number;\n  shouldFlip?: boolean;\n  isOpen?: TooltipProps[\"isOpen\"];\n}\n\nfunction getTooltipTriggerChild(children: ReactNode) {\n  if (React.Children.count(children) === 1 && React.isValidElement(children)) {\n    return children;\n  }\n  return <span className=\"inline-flex\">{children}</span>;\n}\n\nexport function StyledTooltip({\n  children,\n  content,\n  tooltipClassName,\n  placement = \"right\",\n  showArrow = false,\n  closeDelay = 100,\n  shouldFlip,\n  offset = 7,\n  isOpen,\n}: StyledTooltipProps) {\n  const disableAnimation = import.meta.env.MODE === \"test\";\n\n  return (\n    <Tooltip\n      content={content}\n      closeDelay={closeDelay}\n      placement={placement}\n      offset={offset}\n      shouldFlip={shouldFlip}\n      isOpen={isOpen}\n      className={cn(\"bg-white text-black\", tooltipClassName)}\n      showArrow={showArrow}\n      disableAnimation={disableAnimation}\n      classNames={{\n        content: cn(\n          \"z-[9999] rounded-md px-2 py-1 text-xs font-medium shadow-md\",\n          \"!bg-white !text-black\",\n          tooltipClassName,\n        ),\n      }}\n    >\n      {getTooltipTriggerChild(children)}\n    </Tooltip>\n  );\n}\n"],"mappings":";;;;;AAgBA,SAAS,EAAuB,GAAqB;CAInD,OAHI,EAAM,SAAS,MAAM,CAAQ,MAAM,KAAK,EAAM,eAAe,CAAQ,IAChE,IAEF,kBAAC,QAAD;EAAM,WAAU;EAAe;CAAe,CAAA;AACvD;AAEA,SAAgB,EAAc,EAC5B,aACA,YACA,qBACA,eAAY,SACZ,eAAY,IACZ,gBAAa,KACb,eACA,YAAS,GACT,aACqB;CAGrB,OACE,kBAAC,GAAD;EACW;EACG;EACD;EACH;EACI;EACJ;EACR,WAAW,EAAG,uBAAuB,CAAgB;EAC1C;EACO,kBAAA;EAClB,YAAY,EACV,SAAS,EACP,+DACA,yBACA,CACF,EACF;YAEC,EAAuB,CAAQ;CACzB,CAAA;AAEb"}

package/dist/components/shared/filters/enum-filter-dropdown.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("../../../node_modules/lucide-react/dist/esm/icons/check.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs"),a=require("../../../utils/utils.cjs"),o=require("../../../utils/dropdown-classes.cjs"),s=require("../../../hooks/use-click-outside-element.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");function u({testId:e,value:u,onChange:d,options:f,labelKeyByValue:p,labelByValue:m,ariaLabel:h,className:g,fullWidth:_=!1}){let{t:v}=t.useTranslation(`openhands`),[y,b]=c.default.useState(!1),x=s.useClickOutsideElement(()=>b(!1)),S=e=>m?.[e]??(p?v(p[e]):e),C=h??v(n.I18nKey.CONVERSATION_PANEL$FILTER_LABEL),w=f[0],T=S(u);return(0,l.jsxs)(`div`,{ref:x,className:a.cn(`relative shrink-0`,_?`w-full`:`w-auto`,g),"data-testid":e,children:[(0,l.jsxs)(`button`,{type:`button`,"data-testid":`dropdown-trigger`,"aria-haspopup":`menu`,"aria-expanded":y,"aria-label":C,onClick:()=>b(e=>!e),className:a.cn(o.dropdownFilterTriggerClassName,_&&`w-full justify-between`,w&&u!==w&&`border-white/60 bg-white/10`),children:[(0,l.jsx)(`span`,{className:`whitespace-nowrap`,children:T}),(0,l.jsx)(i.ChevronDown,{className:a.cn(`h-4 w-4 shrink-0 text-tertiary-alt transition-transform`,y&&`rotate-180`),"aria-hidden":!0})]}),y?(0,l.jsx)(`div`,{role:`menu`,"data-testid":`${e}-menu`,"aria-label":C,className:a.cn(`absolute right-0 top-full z-50 mt-1 min-w-full w-max`,`max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow`,o.dropdownMenuListClassName),children:f.map(t=>{let n=t===u;return(0,l.jsxs)(`button`,{type:`button`,role:`menuitemradio`,"aria-checked":n,"data-testid":`${e}-${t}`,onClick:()=>{d(t),b(!1)},className:a.cn(o.dropdownMenuRowClassName,n&&`bg-[var(--oh-interactive-selected)]`),children:[(0,l.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:S(t)}),n?(0,l.jsx)(r.Check,{className:`h-4 w-4 shrink-0`,"aria-hidden":!0}):null]},t)})}):null]})}exports.EnumFilterDropdown=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/check.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs"),a=require("../../../utils/utils.cjs"),o=require("../../../utils/dropdown-classes.cjs"),s=require("../../../hooks/use-click-outside-element.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");function u({testId:e,value:u,onChange:d,options:f,labelKeyByValue:p,labelByValue:m,ariaLabel:h,className:g,triggerClassName:_,fullWidth:v=!1,emphasizeNonDefault:y=!0}){let{t:b}=t.useTranslation(`openhands`),[x,S]=c.default.useState(!1),C=s.useClickOutsideElement(()=>S(!1)),w=e=>m?.[e]??(p?b(p[e]):e),T=h??b(n.I18nKey.CONVERSATION_PANEL$FILTER_LABEL),E=f[0],D=w(u);return(0,l.jsxs)(`div`,{ref:C,className:a.cn(`relative shrink-0`,v?`w-full`:`w-auto`,g),"data-testid":e,children:[(0,l.jsxs)(`button`,{type:`button`,"data-testid":`dropdown-trigger`,"aria-haspopup":`menu`,"aria-expanded":x,"aria-label":T,onClick:()=>S(e=>!e),className:a.cn(o.dropdownFilterTriggerClassName,v&&`w-full justify-between`,y&&E&&u!==E&&`border-white/60 bg-white/10`,_),children:[(0,l.jsx)(`span`,{className:`whitespace-nowrap`,children:D}),(0,l.jsx)(i.ChevronDown,{className:a.cn(`h-4 w-4 shrink-0 text-tertiary-alt transition-transform`,x&&`rotate-180`),"aria-hidden":!0})]}),x?(0,l.jsx)(`div`,{role:`menu`,"data-testid":`${e}-menu`,"aria-label":T,className:a.cn(`absolute right-0 top-full z-50 mt-1 min-w-full w-max`,`max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow`,o.dropdownMenuListClassName),children:f.map(t=>{let n=t===u;return(0,l.jsxs)(`button`,{type:`button`,role:`menuitemradio`,"aria-checked":n,"data-testid":`${e}-${t}`,onClick:()=>{d(t),S(!1)},className:a.cn(o.dropdownMenuRowClassName,n&&`bg-[var(--oh-interactive-selected)]`),children:[(0,l.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:w(t)}),n?(0,l.jsx)(r.Check,{className:`h-4 w-4 shrink-0`,"aria-hidden":!0}):null]},t)})}):null]})}exports.EnumFilterDropdown=u;
 //# sourceMappingURL=enum-filter-dropdown.cjs.map

package/dist/components/shared/filters/enum-filter-dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"enum-filter-dropdown.cjs","names":[],"sources":["../../../../src/components/shared/filters/enum-filter-dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  dropdownFilterTriggerClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface EnumFilterDropdownProps<T extends string> {\n  testId: string;\n  value: T;\n  onChange: (value: T) => void;\n  options: readonly T[];\n  labelKeyByValue?: Record<T, I18nKey>;\n  /** Plain-string labels, e.g. manifest-supplied copy. Wins over the keys. */\n  labelByValue?: Record<T, string>;\n  ariaLabel?: string;\n  className?: string;\n  /** Stretch the trigger to the container width, e.g. inside a parent menu. */\n  fullWidth?: boolean;\n}\n\nexport function EnumFilterDropdown<T extends string>({\n  testId,\n  value,\n  onChange,\n  options,\n  labelKeyByValue,\n  labelByValue,\n  ariaLabel,\n  className,\n  fullWidth = false,\n}: EnumFilterDropdownProps<T>) {\n  const { t } = useTranslation(\"openhands\");\n  const [open, setOpen] = React.useState(false);\n  const containerRef = useClickOutsideElement<HTMLDivElement>(() =>\n    setOpen(false),\n  );\n\n  const getOptionLabel = (option: T): string =>\n    labelByValue?.[option] ??\n    (labelKeyByValue ? t(labelKeyByValue[option]) : option);\n  const resolvedAriaLabel =\n    ariaLabel ?? t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL);\n\n  const defaultOption = options[0];\n  const selectedLabel = getOptionLabel(value);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"relative shrink-0\",\n        fullWidth ? \"w-full\" : \"w-auto\",\n        className,\n      )}\n      data-testid={testId}\n    >\n      <button\n        type=\"button\"\n        data-testid=\"dropdown-trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-label={resolvedAriaLabel}\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          dropdownFilterTriggerClassName,\n          fullWidth && \"w-full justify-between\",\n          defaultOption &&\n            value !== defaultOption &&\n            \"border-white/60 bg-white/10\",\n        )}\n      >\n        <span className=\"whitespace-nowrap\">{selectedLabel}</span>\n        <ChevronDown\n          className={cn(\n            \"h-4 w-4 shrink-0 text-tertiary-alt transition-transform\",\n            open && \"rotate-180\",\n          )}\n          aria-hidden\n        />\n      </button>\n\n      {open ? (\n        <div\n          role=\"menu\"\n          data-testid={`${testId}-menu`}\n          aria-label={resolvedAriaLabel}\n          className={cn(\n            \"absolute right-0 top-full z-50 mt-1 min-w-full w-max\",\n            \"max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow\",\n            dropdownMenuListClassName,\n          )}\n        >\n          {options.map((option) => {\n            const selected = option === value;\n            return (\n              <button\n                key={option}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={selected}\n                data-testid={`${testId}-${option}`}\n                onClick={() => {\n                  onChange(option);\n                  setOpen(false);\n                }}\n                className={cn(\n                  dropdownMenuRowClassName,\n                  selected && \"bg-[var(--oh-interactive-selected)]\",\n                )}\n              >\n                <span className=\"min-w-0 flex-1 truncate\">\n                  {getOptionLabel(option)}\n                </span>\n                {selected ? (\n                  <Check className=\"h-4 w-4 shrink-0\" aria-hidden />\n                ) : null}\n              </button>\n            );\n          })}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"uiBA0BA,SAAgB,EAAqC,CACnD,SACA,QACA,WACA,UACA,kBACA,eACA,YACA,YACA,YAAY,IACiB,CAC7B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAM,GAAW,EAAA,QAAM,SAAS,EAAK,EACtC,EAAe,EAAA,2BACnB,EAAQ,EAAK,CACf,EAEM,EAAkB,GACtB,IAAe,KACd,EAAkB,EAAE,EAAgB,EAAO,EAAI,GAC5C,EACJ,GAAa,EAAE,EAAA,QAAQ,+BAA+B,EAElD,EAAgB,EAAQ,GACxB,EAAgB,EAAe,CAAK,EAE1C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,GACT,oBACA,EAAY,SAAW,SACvB,CACF,EACA,cAAa,WAPf,EASE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,cAAY,mBACZ,gBAAc,OACd,gBAAe,EACf,aAAY,EACZ,YAAe,EAAS,GAAS,CAAC,CAAI,EACtC,UAAW,EAAA,GACT,EAAA,+BACA,GAAa,yBACb,GACE,IAAU,GACV,6BACJ,WAbF,EAeE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,6BAAqB,CAAoB,CAAA,GACzD,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,UAAW,EAAA,GACT,0DACA,GAAQ,YACV,EACA,cAAA,EACD,CAAA,CACK,IAEP,GACC,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,OACL,cAAa,GAAG,EAAO,OACvB,aAAY,EACZ,UAAW,EAAA,GACT,uDACA,+EACA,EAAA,yBACF,WAEC,EAAQ,IAAK,GAAW,CACvB,IAAM,EAAW,IAAW,EAC5B,OACE,EAAA,EAAA,MAAC,SAAD,CAEE,KAAK,SACL,KAAK,gBACL,eAAc,EACd,cAAa,GAAG,EAAO,GAAG,IAC1B,YAAe,CACb,EAAS,CAAM,EACf,EAAQ,EAAK,CACf,EACA,UAAW,EAAA,GACT,EAAA,yBACA,GAAY,qCACd,WAbF,EAeE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,mCACb,EAAe,CAAM,CAClB,CAAA,EACL,GACC,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,UAAU,mBAAmB,cAAA,EAAa,CAAA,EAC/C,IACE,GApBD,CAoBC,CAEZ,CAAC,CACE,CAAA,EACH,IACD,GAET"}
+{"version":3,"file":"enum-filter-dropdown.cjs","names":[],"sources":["../../../../src/components/shared/filters/enum-filter-dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  dropdownFilterTriggerClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface EnumFilterDropdownProps<T extends string> {\n  testId: string;\n  value: T;\n  onChange: (value: T) => void;\n  options: readonly T[];\n  labelKeyByValue?: Record<T, I18nKey>;\n  /** Plain-string labels, e.g. manifest-supplied copy. Wins over the keys. */\n  labelByValue?: Record<T, string>;\n  ariaLabel?: string;\n  className?: string;\n  /** Overrides trigger chip colors, padding, and radius. Menu styles stay shared. */\n  triggerClassName?: string;\n  /** Stretch the trigger to the container width, e.g. inside a parent menu. */\n  fullWidth?: boolean;\n  /** Highlight the trigger when the value is not the first option. */\n  emphasizeNonDefault?: boolean;\n}\n\nexport function EnumFilterDropdown<T extends string>({\n  testId,\n  value,\n  onChange,\n  options,\n  labelKeyByValue,\n  labelByValue,\n  ariaLabel,\n  className,\n  triggerClassName,\n  fullWidth = false,\n  emphasizeNonDefault = true,\n}: EnumFilterDropdownProps<T>) {\n  const { t } = useTranslation(\"openhands\");\n  const [open, setOpen] = React.useState(false);\n  const containerRef = useClickOutsideElement<HTMLDivElement>(() =>\n    setOpen(false),\n  );\n\n  const getOptionLabel = (option: T): string =>\n    labelByValue?.[option] ??\n    (labelKeyByValue ? t(labelKeyByValue[option]) : option);\n  const resolvedAriaLabel =\n    ariaLabel ?? t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL);\n\n  const defaultOption = options[0];\n  const selectedLabel = getOptionLabel(value);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"relative shrink-0\",\n        fullWidth ? \"w-full\" : \"w-auto\",\n        className,\n      )}\n      data-testid={testId}\n    >\n      <button\n        type=\"button\"\n        data-testid=\"dropdown-trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-label={resolvedAriaLabel}\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          dropdownFilterTriggerClassName,\n          fullWidth && \"w-full justify-between\",\n          emphasizeNonDefault &&\n            defaultOption &&\n            value !== defaultOption &&\n            \"border-white/60 bg-white/10\",\n          triggerClassName,\n        )}\n      >\n        <span className=\"whitespace-nowrap\">{selectedLabel}</span>\n        <ChevronDown\n          className={cn(\n            \"h-4 w-4 shrink-0 text-tertiary-alt transition-transform\",\n            open && \"rotate-180\",\n          )}\n          aria-hidden\n        />\n      </button>\n\n      {open ? (\n        <div\n          role=\"menu\"\n          data-testid={`${testId}-menu`}\n          aria-label={resolvedAriaLabel}\n          className={cn(\n            \"absolute right-0 top-full z-50 mt-1 min-w-full w-max\",\n            \"max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow\",\n            dropdownMenuListClassName,\n          )}\n        >\n          {options.map((option) => {\n            const selected = option === value;\n            return (\n              <button\n                key={option}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={selected}\n                data-testid={`${testId}-${option}`}\n                onClick={() => {\n                  onChange(option);\n                  setOpen(false);\n                }}\n                className={cn(\n                  dropdownMenuRowClassName,\n                  selected && \"bg-[var(--oh-interactive-selected)]\",\n                )}\n              >\n                <span className=\"min-w-0 flex-1 truncate\">\n                  {getOptionLabel(option)}\n                </span>\n                {selected ? (\n                  <Check className=\"h-4 w-4 shrink-0\" aria-hidden />\n                ) : null}\n              </button>\n            );\n          })}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"uiBA8BA,SAAgB,EAAqC,CACnD,SACA,QACA,WACA,UACA,kBACA,eACA,YACA,YACA,mBACA,YAAY,GACZ,sBAAsB,IACO,CAC7B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAM,GAAW,EAAA,QAAM,SAAS,EAAK,EACtC,EAAe,EAAA,2BACnB,EAAQ,EAAK,CACf,EAEM,EAAkB,GACtB,IAAe,KACd,EAAkB,EAAE,EAAgB,EAAO,EAAI,GAC5C,EACJ,GAAa,EAAE,EAAA,QAAQ,+BAA+B,EAElD,EAAgB,EAAQ,GACxB,EAAgB,EAAe,CAAK,EAE1C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,GACT,oBACA,EAAY,SAAW,SACvB,CACF,EACA,cAAa,WAPf,EASE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,cAAY,mBACZ,gBAAc,OACd,gBAAe,EACf,aAAY,EACZ,YAAe,EAAS,GAAS,CAAC,CAAI,EACtC,UAAW,EAAA,GACT,EAAA,+BACA,GAAa,yBACb,GACE,GACA,IAAU,GACV,8BACF,CACF,WAfF,EAiBE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,6BAAqB,CAAoB,CAAA,GACzD,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,UAAW,EAAA,GACT,0DACA,GAAQ,YACV,EACA,cAAA,EACD,CAAA,CACK,IAEP,GACC,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,OACL,cAAa,GAAG,EAAO,OACvB,aAAY,EACZ,UAAW,EAAA,GACT,uDACA,+EACA,EAAA,yBACF,WAEC,EAAQ,IAAK,GAAW,CACvB,IAAM,EAAW,IAAW,EAC5B,OACE,EAAA,EAAA,MAAC,SAAD,CAEE,KAAK,SACL,KAAK,gBACL,eAAc,EACd,cAAa,GAAG,EAAO,GAAG,IAC1B,YAAe,CACb,EAAS,CAAM,EACf,EAAQ,EAAK,CACf,EACA,UAAW,EAAA,GACT,EAAA,yBACA,GAAY,qCACd,WAbF,EAeE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,mCACb,EAAe,CAAM,CAClB,CAAA,EACL,GACC,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,UAAU,mBAAmB,cAAA,EAAa,CAAA,EAC/C,IACE,GApBD,CAoBC,CAEZ,CAAC,CACE,CAAA,EACH,IACD,GAET"}

package/dist/components/shared/filters/enum-filter-dropdown.d.ts

@@ -10,8 +10,12 @@ interface EnumFilterDropdownProps<T extends string> {
     labelByValue?: Record<T, string>;
     ariaLabel?: string;
     className?: string;
+    /** Overrides trigger chip colors, padding, and radius. Menu styles stay shared. */
+    triggerClassName?: string;
     /** Stretch the trigger to the container width, e.g. inside a parent menu. */
     fullWidth?: boolean;
+    /** Highlight the trigger when the value is not the first option. */
+    emphasizeNonDefault?: boolean;
 }
-export declare function EnumFilterDropdown<T extends string>({ testId, value, onChange, options, labelKeyByValue, labelByValue, ariaLabel, className, fullWidth, }: EnumFilterDropdownProps<T>): React.JSX.Element;
+export declare function EnumFilterDropdown<T extends string>({ testId, value, onChange, options, labelKeyByValue, labelByValue, ariaLabel, className, triggerClassName, fullWidth, emphasizeNonDefault, }: EnumFilterDropdownProps<T>): React.JSX.Element;
 export {};

package/dist/components/shared/filters/enum-filter-dropdown.js

@@ -8,31 +8,31 @@ import { useClickOutsideElement as c } from "../../../hooks/use-click-outside-el
 import l from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/shared/filters/enum-filter-dropdown.tsx
-function f({ testId: f, value: p, onChange: m, options: h, labelKeyByValue: g, labelByValue: _, ariaLabel: v, className: y, fullWidth: b = !1 }) {
-	let { t: x } = e("openhands"), [S, C] = l.useState(!1), w = c(() => C(!1)), T = (e) => _?.[e] ?? (g ? x(g[e]) : e), E = v ?? x(t.CONVERSATION_PANEL$FILTER_LABEL), D = h[0], O = T(p);
+function f({ testId: f, value: p, onChange: m, options: h, labelKeyByValue: g, labelByValue: _, ariaLabel: v, className: y, triggerClassName: b, fullWidth: x = !1, emphasizeNonDefault: S = !0 }) {
+	let { t: C } = e("openhands"), [w, T] = l.useState(!1), E = c(() => T(!1)), D = (e) => _?.[e] ?? (g ? C(g[e]) : e), O = v ?? C(t.CONVERSATION_PANEL$FILTER_LABEL), k = h[0], A = D(p);
 	return /* @__PURE__ */ d("div", {
-		ref: w,
-		className: i("relative shrink-0", b ? "w-full" : "w-auto", y),
+		ref: E,
+		className: i("relative shrink-0", x ? "w-full" : "w-auto", y),
 		"data-testid": f,
 		children: [/* @__PURE__ */ d("button", {
 			type: "button",
 			"data-testid": "dropdown-trigger",
 			"aria-haspopup": "menu",
-			"aria-expanded": S,
-			"aria-label": E,
-			onClick: () => C((e) => !e),
-			className: i(a, b && "w-full justify-between", D && p !== D && "border-white/60 bg-white/10"),
+			"aria-expanded": w,
+			"aria-label": O,
+			onClick: () => T((e) => !e),
+			className: i(a, x && "w-full justify-between", S && k && p !== k && "border-white/60 bg-white/10", b),
 			children: [/* @__PURE__ */ u("span", {
 				className: "whitespace-nowrap",
-				children: O
+				children: A
 			}), /* @__PURE__ */ u(r, {
-				className: i("h-4 w-4 shrink-0 text-tertiary-alt transition-transform", S && "rotate-180"),
+				className: i("h-4 w-4 shrink-0 text-tertiary-alt transition-transform", w && "rotate-180"),
 				"aria-hidden": !0
 			})]
-		}), S ? /* @__PURE__ */ u("div", {
+		}), w ? /* @__PURE__ */ u("div", {
 			role: "menu",
 			"data-testid": `${f}-menu`,
-			"aria-label": E,
+			"aria-label": O,
 			className: i("absolute right-0 top-full z-50 mt-1 min-w-full w-max", "max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow", o),
 			children: h.map((e) => {
 				let t = e === p;
@@ -42,12 +42,12 @@ function f({ testId: f, value: p, onChange: m, options: h, labelKeyByValue: g, l
 					"aria-checked": t,
 					"data-testid": `${f}-${e}`,
 					onClick: () => {
-						m(e), C(!1);
+						m(e), T(!1);
 					},
 					className: i(s, t && "bg-[var(--oh-interactive-selected)]"),
 					children: [/* @__PURE__ */ u("span", {
 						className: "min-w-0 flex-1 truncate",
-						children: T(e)
+						children: D(e)
 					}), t ? /* @__PURE__ */ u(n, {
 						className: "h-4 w-4 shrink-0",
 						"aria-hidden": !0

package/dist/components/shared/filters/enum-filter-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"enum-filter-dropdown.js","names":[],"sources":["../../../../src/components/shared/filters/enum-filter-dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  dropdownFilterTriggerClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface EnumFilterDropdownProps<T extends string> {\n  testId: string;\n  value: T;\n  onChange: (value: T) => void;\n  options: readonly T[];\n  labelKeyByValue?: Record<T, I18nKey>;\n  /** Plain-string labels, e.g. manifest-supplied copy. Wins over the keys. */\n  labelByValue?: Record<T, string>;\n  ariaLabel?: string;\n  className?: string;\n  /** Stretch the trigger to the container width, e.g. inside a parent menu. */\n  fullWidth?: boolean;\n}\n\nexport function EnumFilterDropdown<T extends string>({\n  testId,\n  value,\n  onChange,\n  options,\n  labelKeyByValue,\n  labelByValue,\n  ariaLabel,\n  className,\n  fullWidth = false,\n}: EnumFilterDropdownProps<T>) {\n  const { t } = useTranslation(\"openhands\");\n  const [open, setOpen] = React.useState(false);\n  const containerRef = useClickOutsideElement<HTMLDivElement>(() =>\n    setOpen(false),\n  );\n\n  const getOptionLabel = (option: T): string =>\n    labelByValue?.[option] ??\n    (labelKeyByValue ? t(labelKeyByValue[option]) : option);\n  const resolvedAriaLabel =\n    ariaLabel ?? t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL);\n\n  const defaultOption = options[0];\n  const selectedLabel = getOptionLabel(value);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"relative shrink-0\",\n        fullWidth ? \"w-full\" : \"w-auto\",\n        className,\n      )}\n      data-testid={testId}\n    >\n      <button\n        type=\"button\"\n        data-testid=\"dropdown-trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-label={resolvedAriaLabel}\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          dropdownFilterTriggerClassName,\n          fullWidth && \"w-full justify-between\",\n          defaultOption &&\n            value !== defaultOption &&\n            \"border-white/60 bg-white/10\",\n        )}\n      >\n        <span className=\"whitespace-nowrap\">{selectedLabel}</span>\n        <ChevronDown\n          className={cn(\n            \"h-4 w-4 shrink-0 text-tertiary-alt transition-transform\",\n            open && \"rotate-180\",\n          )}\n          aria-hidden\n        />\n      </button>\n\n      {open ? (\n        <div\n          role=\"menu\"\n          data-testid={`${testId}-menu`}\n          aria-label={resolvedAriaLabel}\n          className={cn(\n            \"absolute right-0 top-full z-50 mt-1 min-w-full w-max\",\n            \"max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow\",\n            dropdownMenuListClassName,\n          )}\n        >\n          {options.map((option) => {\n            const selected = option === value;\n            return (\n              <button\n                key={option}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={selected}\n                data-testid={`${testId}-${option}`}\n                onClick={() => {\n                  onChange(option);\n                  setOpen(false);\n                }}\n                className={cn(\n                  dropdownMenuRowClassName,\n                  selected && \"bg-[var(--oh-interactive-selected)]\",\n                )}\n              >\n                <span className=\"min-w-0 flex-1 truncate\">\n                  {getOptionLabel(option)}\n                </span>\n                {selected ? (\n                  <Check className=\"h-4 w-4 shrink-0\" aria-hidden />\n                ) : null}\n              </button>\n            );\n          })}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AA0BA,SAAgB,EAAqC,EACnD,WACA,UACA,aACA,YACA,oBACA,iBACA,cACA,cACA,eAAY,MACiB;CAC7B,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GACtC,IAAe,QACnB,EAAQ,EAAK,CACf,GAEM,KAAkB,MACtB,IAAe,OACd,IAAkB,EAAE,EAAgB,EAAO,IAAI,IAC5C,IACJ,KAAa,EAAE,EAAQ,+BAA+B,GAElD,IAAgB,EAAQ,IACxB,IAAgB,EAAe,CAAK;CAE1C,OACE,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EACT,qBACA,IAAY,WAAW,UACvB,CACF;EACA,eAAa;YAPf,CASE,kBAAC,UAAD;GACE,MAAK;GACL,eAAY;GACZ,iBAAc;GACd,iBAAe;GACf,cAAY;GACZ,eAAe,GAAS,MAAS,CAAC,CAAI;GACtC,WAAW,EACT,GACA,KAAa,0BACb,KACE,MAAU,KACV,6BACJ;aAbF,CAeE,kBAAC,QAAD;IAAM,WAAU;cAAqB;GAAoB,CAAA,GACzD,kBAAC,GAAD;IACE,WAAW,EACT,2DACA,KAAQ,YACV;IACA,eAAA;GACD,CAAA,CACK;MAEP,IACC,kBAAC,OAAD;GACE,MAAK;GACL,eAAa,GAAG,EAAO;GACvB,cAAY;GACZ,WAAW,EACT,wDACA,gFACA,CACF;aAEC,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAW,MAAW;IAC5B,OACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,eAAa,GAAG,EAAO,GAAG;KAC1B,eAAe;MAEb,AADA,EAAS,CAAM,GACf,EAAQ,EAAK;KACf;KACA,WAAW,EACT,GACA,KAAY,qCACd;eAbF,CAeE,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAe,CAAM;KAClB,CAAA,GACL,IACC,kBAAC,GAAD;MAAO,WAAU;MAAmB,eAAA;KAAa,CAAA,IAC/C,IACE;OApBD,CAoBC;GAEZ,CAAC;EACE,CAAA,IACH,IACD;;AAET"}
+{"version":3,"file":"enum-filter-dropdown.js","names":[],"sources":["../../../../src/components/shared/filters/enum-filter-dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  dropdownFilterTriggerClassName,\n  dropdownMenuListClassName,\n  dropdownMenuRowClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface EnumFilterDropdownProps<T extends string> {\n  testId: string;\n  value: T;\n  onChange: (value: T) => void;\n  options: readonly T[];\n  labelKeyByValue?: Record<T, I18nKey>;\n  /** Plain-string labels, e.g. manifest-supplied copy. Wins over the keys. */\n  labelByValue?: Record<T, string>;\n  ariaLabel?: string;\n  className?: string;\n  /** Overrides trigger chip colors, padding, and radius. Menu styles stay shared. */\n  triggerClassName?: string;\n  /** Stretch the trigger to the container width, e.g. inside a parent menu. */\n  fullWidth?: boolean;\n  /** Highlight the trigger when the value is not the first option. */\n  emphasizeNonDefault?: boolean;\n}\n\nexport function EnumFilterDropdown<T extends string>({\n  testId,\n  value,\n  onChange,\n  options,\n  labelKeyByValue,\n  labelByValue,\n  ariaLabel,\n  className,\n  triggerClassName,\n  fullWidth = false,\n  emphasizeNonDefault = true,\n}: EnumFilterDropdownProps<T>) {\n  const { t } = useTranslation(\"openhands\");\n  const [open, setOpen] = React.useState(false);\n  const containerRef = useClickOutsideElement<HTMLDivElement>(() =>\n    setOpen(false),\n  );\n\n  const getOptionLabel = (option: T): string =>\n    labelByValue?.[option] ??\n    (labelKeyByValue ? t(labelKeyByValue[option]) : option);\n  const resolvedAriaLabel =\n    ariaLabel ?? t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL);\n\n  const defaultOption = options[0];\n  const selectedLabel = getOptionLabel(value);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"relative shrink-0\",\n        fullWidth ? \"w-full\" : \"w-auto\",\n        className,\n      )}\n      data-testid={testId}\n    >\n      <button\n        type=\"button\"\n        data-testid=\"dropdown-trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-label={resolvedAriaLabel}\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          dropdownFilterTriggerClassName,\n          fullWidth && \"w-full justify-between\",\n          emphasizeNonDefault &&\n            defaultOption &&\n            value !== defaultOption &&\n            \"border-white/60 bg-white/10\",\n          triggerClassName,\n        )}\n      >\n        <span className=\"whitespace-nowrap\">{selectedLabel}</span>\n        <ChevronDown\n          className={cn(\n            \"h-4 w-4 shrink-0 text-tertiary-alt transition-transform\",\n            open && \"rotate-180\",\n          )}\n          aria-hidden\n        />\n      </button>\n\n      {open ? (\n        <div\n          role=\"menu\"\n          data-testid={`${testId}-menu`}\n          aria-label={resolvedAriaLabel}\n          className={cn(\n            \"absolute right-0 top-full z-50 mt-1 min-w-full w-max\",\n            \"max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow\",\n            dropdownMenuListClassName,\n          )}\n        >\n          {options.map((option) => {\n            const selected = option === value;\n            return (\n              <button\n                key={option}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={selected}\n                data-testid={`${testId}-${option}`}\n                onClick={() => {\n                  onChange(option);\n                  setOpen(false);\n                }}\n                className={cn(\n                  dropdownMenuRowClassName,\n                  selected && \"bg-[var(--oh-interactive-selected)]\",\n                )}\n              >\n                <span className=\"min-w-0 flex-1 truncate\">\n                  {getOptionLabel(option)}\n                </span>\n                {selected ? (\n                  <Check className=\"h-4 w-4 shrink-0\" aria-hidden />\n                ) : null}\n              </button>\n            );\n          })}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AA8BA,SAAgB,EAAqC,EACnD,WACA,UACA,aACA,YACA,oBACA,iBACA,cACA,cACA,qBACA,eAAY,IACZ,yBAAsB,MACO;CAC7B,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GACtC,IAAe,QACnB,EAAQ,EAAK,CACf,GAEM,KAAkB,MACtB,IAAe,OACd,IAAkB,EAAE,EAAgB,EAAO,IAAI,IAC5C,IACJ,KAAa,EAAE,EAAQ,+BAA+B,GAElD,IAAgB,EAAQ,IACxB,IAAgB,EAAe,CAAK;CAE1C,OACE,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EACT,qBACA,IAAY,WAAW,UACvB,CACF;EACA,eAAa;YAPf,CASE,kBAAC,UAAD;GACE,MAAK;GACL,eAAY;GACZ,iBAAc;GACd,iBAAe;GACf,cAAY;GACZ,eAAe,GAAS,MAAS,CAAC,CAAI;GACtC,WAAW,EACT,GACA,KAAa,0BACb,KACE,KACA,MAAU,KACV,+BACF,CACF;aAfF,CAiBE,kBAAC,QAAD;IAAM,WAAU;cAAqB;GAAoB,CAAA,GACzD,kBAAC,GAAD;IACE,WAAW,EACT,2DACA,KAAQ,YACV;IACA,eAAA;GACD,CAAA,CACK;MAEP,IACC,kBAAC,OAAD;GACE,MAAK;GACL,eAAa,GAAG,EAAO;GACvB,cAAY;GACZ,WAAW,EACT,wDACA,gFACA,CACF;aAEC,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAW,MAAW;IAC5B,OACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,eAAa,GAAG,EAAO,GAAG;KAC1B,eAAe;MAEb,AADA,EAAS,CAAM,GACf,EAAQ,EAAK;KACf;KACA,WAAW,EACT,GACA,KAAY,qCACd;eAbF,CAeE,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAe,CAAM;KAClB,CAAA,GACL,IACC,kBAAC,GAAD;MAAO,WAAU;MAAmB,eAAA;KAAa,CAAA,IAC/C,IACE;OApBD,CAoBC;GAEZ,CAAC;EACE,CAAA,IACH,IACD;;AAET"}

package/dist/components/shared/free-models-note.cjs

@@ -0,0 +1,2 @@
+require("../../_virtual/_rolldown/runtime.cjs");const e=require("../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../i18n/declaration.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/info.cjs");let r=require("react/jsx-runtime");function i({modelIds:i}){let{t:a}=e.useTranslation(`openhands`);return(0,r.jsxs)(`p`,{"data-testid":`openhands-free-models-note`,className:`flex items-start gap-2 text-xs text-warning`,children:[(0,r.jsx)(n.Info,{className:`mt-0.5 size-4 shrink-0 text-warning`,"aria-hidden":!0}),(0,r.jsx)(`span`,{children:a(t.I18nKey.SETTINGS$OPENHANDS_FREE_MODELS_NOTE,{ids:[...i].join(`, `)})})]})}exports.FreeOpenHandsModelsNote=i;
+//# sourceMappingURL=free-models-note.cjs.map

package/dist/components/shared/free-models-note.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"free-models-note.cjs","names":[],"sources":["../../../src/components/shared/free-models-note.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nexport function FreeOpenHandsModelsNote({\n  modelIds,\n}: {\n  modelIds: Iterable<string>;\n}) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <p\n      data-testid=\"openhands-free-models-note\"\n      className=\"flex items-start gap-2 text-xs text-warning\"\n    >\n      <Info className=\"mt-0.5 size-4 shrink-0 text-warning\" aria-hidden />\n      <span>\n        {t(I18nKey.SETTINGS$OPENHANDS_FREE_MODELS_NOTE, {\n          ids: [...modelIds].join(\", \"),\n        })}\n      </span>\n    </p>\n  );\n}\n"],"mappings":"+QAIA,SAAgB,EAAwB,CACtC,YAGC,CACD,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAExC,OACE,EAAA,EAAA,MAAC,IAAD,CACE,cAAY,6BACZ,UAAU,uDAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,UAAU,sCAAsC,cAAA,EAAa,CAAA,GACnE,EAAA,EAAA,KAAC,OAAD,CAAA,SACG,EAAE,EAAA,QAAQ,oCAAqC,CAC9C,IAAK,CAAC,GAAG,CAAQ,EAAE,KAAK,IAAI,CAC9B,CAAC,CACG,CAAA,CACL,GAEP"}

package/dist/components/shared/free-models-note.d.ts

@@ -0,0 +1,3 @@
+export declare function FreeOpenHandsModelsNote({ modelIds, }: {
+    modelIds: Iterable<string>;
+}): import("react").JSX.Element;

package/dist/components/shared/free-models-note.js

@@ -0,0 +1,20 @@
+import { useTranslation as e } from "../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../i18n/declaration.js";
+import { Info as n } from "../../node_modules/lucide-react/dist/esm/icons/info.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/shared/free-models-note.tsx
+function a({ modelIds: a }) {
+	let { t: o } = e("openhands");
+	return /* @__PURE__ */ i("p", {
+		"data-testid": "openhands-free-models-note",
+		className: "flex items-start gap-2 text-xs text-warning",
+		children: [/* @__PURE__ */ r(n, {
+			className: "mt-0.5 size-4 shrink-0 text-warning",
+			"aria-hidden": !0
+		}), /* @__PURE__ */ r("span", { children: o(t.SETTINGS$OPENHANDS_FREE_MODELS_NOTE, { ids: [...a].join(", ") }) })]
+	});
+}
+//#endregion
+export { a as FreeOpenHandsModelsNote };
+
+//# sourceMappingURL=free-models-note.js.map

package/dist/components/shared/free-models-note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"free-models-note.js","names":[],"sources":["../../../src/components/shared/free-models-note.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nexport function FreeOpenHandsModelsNote({\n  modelIds,\n}: {\n  modelIds: Iterable<string>;\n}) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <p\n      data-testid=\"openhands-free-models-note\"\n      className=\"flex items-start gap-2 text-xs text-warning\"\n    >\n      <Info className=\"mt-0.5 size-4 shrink-0 text-warning\" aria-hidden />\n      <span>\n        {t(I18nKey.SETTINGS$OPENHANDS_FREE_MODELS_NOTE, {\n          ids: [...modelIds].join(\", \"),\n        })}\n      </span>\n    </p>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,EAAwB,EACtC,eAGC;CACD,IAAM,EAAE,SAAM,EAAe,WAAW;CAExC,OACE,kBAAC,KAAD;EACE,eAAY;EACZ,WAAU;YAFZ,CAIE,kBAAC,GAAD;GAAM,WAAU;GAAsC,eAAA;EAAa,CAAA,GACnE,kBAAC,QAAD,EAAA,UACG,EAAE,EAAQ,qCAAqC,EAC9C,KAAK,CAAC,GAAG,CAAQ,EAAE,KAAK,IAAI,EAC9B,CAAC,EACG,CAAA,CACL;;AAEP"}

package/dist/components/shared/modals/confirmation-modal.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("./modal-backdrop.cjs"),r=require("../../features/settings/brand-button.cjs");let i=require("react/jsx-runtime");function a({text:a,onConfirm:o,onCancel:s,isConfirming:c=!1}){let{t:l}=e.useTranslation(`openhands`);return(0,i.jsx)(n.ModalBackdrop,{onClose:c?void 0:s,closeOnEscape:!c,children:(0,i.jsxs)(`div`,{"data-testid":`confirmation-modal`,className:`bg-base-secondary p-4 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]`,children:[(0,i.jsx)(`p`,{children:a}),(0,i.jsxs)(`div`,{className:`w-full flex justify-end gap-2`,children:[(0,i.jsx)(r.BrandButton,{testId:`cancel-button`,type:`button`,onClick:s,variant:`secondary`,isDisabled:c,children:l(t.I18nKey.BUTTON$CANCEL)}),(0,i.jsx)(r.BrandButton,{testId:`confirm-button`,type:`button`,onClick:o,variant:`primary`,isDisabled:c,children:l(t.I18nKey.BUTTON$CONFIRM)})]})]})})}exports.ConfirmationModal=a;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("./modal-backdrop.cjs"),r=require("../../features/settings/brand-button.cjs");let i=require("react/jsx-runtime");function a({text:a,onConfirm:o,onCancel:s,confirmText:c,isConfirming:l=!1}){let{t:u}=e.useTranslation(`openhands`);return(0,i.jsx)(n.ModalBackdrop,{onClose:l?void 0:s,closeOnEscape:!l,children:(0,i.jsxs)(`div`,{"data-testid":`confirmation-modal`,className:`bg-base-secondary p-4 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]`,children:[(0,i.jsx)(`p`,{children:a}),(0,i.jsxs)(`div`,{className:`w-full flex justify-end gap-2`,children:[(0,i.jsx)(r.BrandButton,{testId:`cancel-button`,type:`button`,onClick:s,variant:`secondary`,isDisabled:l,children:u(t.I18nKey.BUTTON$CANCEL)}),(0,i.jsx)(r.BrandButton,{testId:`confirm-button`,type:`button`,onClick:o,variant:`primary`,isDisabled:l,children:c??u(t.I18nKey.BUTTON$CONFIRM)})]})]})})}exports.ConfirmationModal=a;
 //# sourceMappingURL=confirmation-modal.cjs.map

package/dist/components/shared/modals/confirmation-modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation-modal.cjs","names":[],"sources":["../../../../src/components/shared/modals/confirmation-modal.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"./modal-backdrop\";\n\ninterface ConfirmationModalProps {\n  text: string;\n  onConfirm: () => void;\n  onCancel: () => void;\n  /**\n   * Disables both action buttons while an asynchronous confirm\n   * mutation is in flight. Defaults to false to preserve existing\n   * call sites that don't track mutation state.\n   */\n  isConfirming?: boolean;\n}\n\nexport function ConfirmationModal({\n  text,\n  onConfirm,\n  onCancel,\n  isConfirming = false,\n}: ConfirmationModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  // Suppress the backdrop's click / Escape close handler while the\n  // confirm mutation is in flight; otherwise the user could dismiss\n  // the modal mid-request and never see the result (the buttons are\n  // already disabled, but the backdrop wasn't).\n  return (\n    <ModalBackdrop\n      onClose={isConfirming ? undefined : onCancel}\n      closeOnEscape={!isConfirming}\n    >\n      <div\n        data-testid=\"confirmation-modal\"\n        className=\"bg-base-secondary p-4 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]\"\n      >\n        <p>{text}</p>\n        <div className=\"w-full flex justify-end gap-2\">\n          <BrandButton\n            testId=\"cancel-button\"\n            type=\"button\"\n            onClick={onCancel}\n            variant=\"secondary\"\n            isDisabled={isConfirming}\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            testId=\"confirm-button\"\n            type=\"button\"\n            onClick={onConfirm}\n            variant=\"primary\"\n            isDisabled={isConfirming}\n          >\n            {t(I18nKey.BUTTON$CONFIRM)}\n          </BrandButton>\n        </div>\n      </div>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"2SAiBA,SAAgB,EAAkB,CAChC,OACA,YACA,WACA,eAAe,IACU,CACzB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAKxC,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,QAAS,EAAe,IAAA,GAAY,EACpC,cAAe,CAAC,YAEhB,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,qBACZ,UAAU,iGAFZ,EAIE,EAAA,EAAA,KAAC,IAAD,CAAA,SAAI,CAAQ,CAAA,GACZ,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,yCAAf,EACE,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAO,gBACP,KAAK,SACL,QAAS,EACT,QAAQ,YACR,WAAY,WAEX,EAAE,EAAA,QAAQ,aAAa,CACb,CAAA,GACb,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAO,iBACP,KAAK,SACL,QAAS,EACT,QAAQ,UACR,WAAY,WAEX,EAAE,EAAA,QAAQ,cAAc,CACd,CAAA,CACV,GACF,GACQ,CAAA,CAEnB"}
+{"version":3,"file":"confirmation-modal.cjs","names":[],"sources":["../../../../src/components/shared/modals/confirmation-modal.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"./modal-backdrop\";\n\ninterface ConfirmationModalProps {\n  text: string;\n  onConfirm: () => void;\n  onCancel: () => void;\n  confirmText?: string;\n  /**\n   * Disables both action buttons while an asynchronous confirm\n   * mutation is in flight. Defaults to false to preserve existing\n   * call sites that don't track mutation state.\n   */\n  isConfirming?: boolean;\n}\n\nexport function ConfirmationModal({\n  text,\n  onConfirm,\n  onCancel,\n  confirmText,\n  isConfirming = false,\n}: ConfirmationModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  // Suppress the backdrop's click / Escape close handler while the\n  // confirm mutation is in flight; otherwise the user could dismiss\n  // the modal mid-request and never see the result (the buttons are\n  // already disabled, but the backdrop wasn't).\n  return (\n    <ModalBackdrop\n      onClose={isConfirming ? undefined : onCancel}\n      closeOnEscape={!isConfirming}\n    >\n      <div\n        data-testid=\"confirmation-modal\"\n        className=\"bg-base-secondary p-4 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]\"\n      >\n        <p>{text}</p>\n        <div className=\"w-full flex justify-end gap-2\">\n          <BrandButton\n            testId=\"cancel-button\"\n            type=\"button\"\n            onClick={onCancel}\n            variant=\"secondary\"\n            isDisabled={isConfirming}\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            testId=\"confirm-button\"\n            type=\"button\"\n            onClick={onConfirm}\n            variant=\"primary\"\n            isDisabled={isConfirming}\n          >\n            {confirmText ?? t(I18nKey.BUTTON$CONFIRM)}\n          </BrandButton>\n        </div>\n      </div>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"2SAkBA,SAAgB,EAAkB,CAChC,OACA,YACA,WACA,cACA,eAAe,IACU,CACzB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAKxC,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,QAAS,EAAe,IAAA,GAAY,EACpC,cAAe,CAAC,YAEhB,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,qBACZ,UAAU,iGAFZ,EAIE,EAAA,EAAA,KAAC,IAAD,CAAA,SAAI,CAAQ,CAAA,GACZ,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,yCAAf,EACE,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAO,gBACP,KAAK,SACL,QAAS,EACT,QAAQ,YACR,WAAY,WAEX,EAAE,EAAA,QAAQ,aAAa,CACb,CAAA,GACb,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAO,iBACP,KAAK,SACL,QAAS,EACT,QAAQ,UACR,WAAY,WAEX,GAAe,EAAE,EAAA,QAAQ,cAAc,CAC7B,CAAA,CACV,GACF,GACQ,CAAA,CAEnB"}

package/dist/components/shared/modals/confirmation-modal.d.ts

@@ -2,6 +2,7 @@ interface ConfirmationModalProps {
     text: string;
     onConfirm: () => void;
     onCancel: () => void;
+    confirmText?: string;
     /**
      * Disables both action buttons while an asynchronous confirm
      * mutation is in flight. Defaults to false to preserve existing
@@ -9,5 +10,5 @@ interface ConfirmationModalProps {
      */
     isConfirming?: boolean;
 }
-export declare function ConfirmationModal({ text, onConfirm, onCancel, isConfirming, }: ConfirmationModalProps): import("react").JSX.Element;
+export declare function ConfirmationModal({ text, onConfirm, onCancel, confirmText, isConfirming, }: ConfirmationModalProps): import("react").JSX.Element;
 export {};

package/dist/components/shared/modals/confirmation-modal.js

@@ -4,11 +4,11 @@ import { ModalBackdrop as n } from "./modal-backdrop.js";
 import { BrandButton as r } from "../../features/settings/brand-button.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/shared/modals/confirmation-modal.tsx
-function o({ text: o, onConfirm: s, onCancel: c, isConfirming: l = !1 }) {
-	let { t: u } = e("openhands");
+function o({ text: o, onConfirm: s, onCancel: c, confirmText: l, isConfirming: u = !1 }) {
+	let { t: d } = e("openhands");
 	return /* @__PURE__ */ i(n, {
-		onClose: l ? void 0 : c,
-		closeOnEscape: !l,
+		onClose: u ? void 0 : c,
+		closeOnEscape: !u,
 		children: /* @__PURE__ */ a("div", {
 			"data-testid": "confirmation-modal",
 			className: "bg-base-secondary p-4 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]",
@@ -19,15 +19,15 @@ function o({ text: o, onConfirm: s, onCancel: c, isConfirming: l = !1 }) {
 					type: "button",
 					onClick: c,
 					variant: "secondary",
-					isDisabled: l,
-					children: u(t.BUTTON$CANCEL)
+					isDisabled: u,
+					children: d(t.BUTTON$CANCEL)
 				}), /* @__PURE__ */ i(r, {
 					testId: "confirm-button",
 					type: "button",
 					onClick: s,
 					variant: "primary",
-					isDisabled: l,
-					children: u(t.BUTTON$CONFIRM)
+					isDisabled: u,
+					children: l ?? d(t.BUTTON$CONFIRM)
 				})]
 			})]
 		})

package/dist/components/shared/modals/confirmation-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation-modal.js","names":[],"sources":["../../../../src/components/shared/modals/confirmation-modal.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"./modal-backdrop\";\n\ninterface ConfirmationModalProps {\n  text: string;\n  onConfirm: () => void;\n  onCancel: () => void;\n  /**\n   * Disables both action buttons while an asynchronous confirm\n   * mutation is in flight. Defaults to false to preserve existing\n   * call sites that don't track mutation state.\n   */\n  isConfirming?: boolean;\n}\n\nexport function ConfirmationModal({\n  text,\n  onConfirm,\n  onCancel,\n  isConfirming = false,\n}: ConfirmationModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  // Suppress the backdrop's click / Escape close handler while the\n  // confirm mutation is in flight; otherwise the user could dismiss\n  // the modal mid-request and never see the result (the buttons are\n  // already disabled, but the backdrop wasn't).\n  return (\n    <ModalBackdrop\n      onClose={isConfirming ? undefined : onCancel}\n      closeOnEscape={!isConfirming}\n    >\n      <div\n        data-testid=\"confirmation-modal\"\n        className=\"bg-base-secondary p-4 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]\"\n      >\n        <p>{text}</p>\n        <div className=\"w-full flex justify-end gap-2\">\n          <BrandButton\n            testId=\"cancel-button\"\n            type=\"button\"\n            onClick={onCancel}\n            variant=\"secondary\"\n            isDisabled={isConfirming}\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            testId=\"confirm-button\"\n            type=\"button\"\n            onClick={onConfirm}\n            variant=\"primary\"\n            isDisabled={isConfirming}\n          >\n            {t(I18nKey.BUTTON$CONFIRM)}\n          </BrandButton>\n        </div>\n      </div>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,EAAkB,EAChC,SACA,cACA,aACA,kBAAe,MACU;CACzB,IAAM,EAAE,SAAM,EAAe,WAAW;CAKxC,OACE,kBAAC,GAAD;EACE,SAAS,IAAe,KAAA,IAAY;EACpC,eAAe,CAAC;YAEhB,kBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAFZ,CAIE,kBAAC,KAAD,EAAA,UAAI,EAAQ,CAAA,GACZ,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,QAAO;KACP,MAAK;KACL,SAAS;KACT,SAAQ;KACR,YAAY;eAEX,EAAE,EAAQ,aAAa;IACb,CAAA,GACb,kBAAC,GAAD;KACE,QAAO;KACP,MAAK;KACL,SAAS;KACT,SAAQ;KACR,YAAY;eAEX,EAAE,EAAQ,cAAc;IACd,CAAA,CACV;KACF;;CACQ,CAAA;AAEnB"}
+{"version":3,"file":"confirmation-modal.js","names":[],"sources":["../../../../src/components/shared/modals/confirmation-modal.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"./modal-backdrop\";\n\ninterface ConfirmationModalProps {\n  text: string;\n  onConfirm: () => void;\n  onCancel: () => void;\n  confirmText?: string;\n  /**\n   * Disables both action buttons while an asynchronous confirm\n   * mutation is in flight. Defaults to false to preserve existing\n   * call sites that don't track mutation state.\n   */\n  isConfirming?: boolean;\n}\n\nexport function ConfirmationModal({\n  text,\n  onConfirm,\n  onCancel,\n  confirmText,\n  isConfirming = false,\n}: ConfirmationModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  // Suppress the backdrop's click / Escape close handler while the\n  // confirm mutation is in flight; otherwise the user could dismiss\n  // the modal mid-request and never see the result (the buttons are\n  // already disabled, but the backdrop wasn't).\n  return (\n    <ModalBackdrop\n      onClose={isConfirming ? undefined : onCancel}\n      closeOnEscape={!isConfirming}\n    >\n      <div\n        data-testid=\"confirmation-modal\"\n        className=\"bg-base-secondary p-4 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]\"\n      >\n        <p>{text}</p>\n        <div className=\"w-full flex justify-end gap-2\">\n          <BrandButton\n            testId=\"cancel-button\"\n            type=\"button\"\n            onClick={onCancel}\n            variant=\"secondary\"\n            isDisabled={isConfirming}\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            testId=\"confirm-button\"\n            type=\"button\"\n            onClick={onConfirm}\n            variant=\"primary\"\n            isDisabled={isConfirming}\n          >\n            {confirmText ?? t(I18nKey.BUTTON$CONFIRM)}\n          </BrandButton>\n        </div>\n      </div>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":";;;;;;AAkBA,SAAgB,EAAkB,EAChC,SACA,cACA,aACA,gBACA,kBAAe,MACU;CACzB,IAAM,EAAE,SAAM,EAAe,WAAW;CAKxC,OACE,kBAAC,GAAD;EACE,SAAS,IAAe,KAAA,IAAY;EACpC,eAAe,CAAC;YAEhB,kBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAFZ,CAIE,kBAAC,KAAD,EAAA,UAAI,EAAQ,CAAA,GACZ,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,QAAO;KACP,MAAK;KACL,SAAS;KACT,SAAQ;KACR,YAAY;eAEX,EAAE,EAAQ,aAAa;IACb,CAAA,GACb,kBAAC,GAAD;KACE,QAAO;KACP,MAAK;KACL,SAAS;KACT,SAAQ;KACR,YAAY;eAEX,KAAe,EAAE,EAAQ,cAAc;IAC7B,CAAA,CACV;KACF;;CACQ,CAAA;AAEnB"}

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("../../../../node_modules/lucide-react/dist/esm/icons/info.cjs"),i=require("../../../../utils/constants.cjs"),a=require("../../../../utils/utils.cjs"),o=require("../../../../utils/form-control-classes.cjs"),s=require("../../../../utils/format-model-name.cjs"),c=require("../../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.cjs"),l=require("../../../../node_modules/@heroui/listbox/dist/chunk-ANTZPR32.cjs"),u=require("../../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.cjs"),d=require("../../../../ui/combobox-caret.cjs"),f=require("../../../../utils/map-provider.cjs"),p=require("../../../../utils/extract-model-and-provider.cjs"),m=require("../../../../ui/help-link.cjs"),h=require("../../../../hooks/query/use-search-providers.cjs"),g=require("../../../../hooks/query/use-provider-models.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime");var y=`shrink-0 rounded-full border border-warning/40 bg-warning/10 px-1.5 py-0.5 text-[10px] leading-none text-warning`;function b(){return(0,v.jsxs)(`p`,{"data-testid":`openhands-free-models-note`,className:`flex items-start gap-2 text-xs text-warning`,children:[(0,v.jsx)(r.Info,{className:`mt-0.5 size-4 shrink-0 text-warning`,"aria-hidden":!0}),(0,v.jsx)(`span`,{children:s.FREE_OPENHANDS_MODEL_NOTE})]})}function x({isDisabled:e,currentModel:r,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=[]}=h.useSearchProviders(),{data:j=[],isLoading:M,error:N}=g.useProviderModels(E),P=_.default.useMemo(()=>A.filter(e=>e.verified),[A]),F=_.default.useMemo(()=>A.filter(e=>!e.verified),[A]),I=_.default.useMemo(()=>j.filter(e=>e.verified),[j]),L=_.default.useMemo(()=>j.filter(e=>!e.verified),[j]);_.default.useEffect(()=>{if(r){let{provider:e,model:t}=p.extractModelAndProvider(r);T(r),D(e||null),k(t),S?.(e||null,t)}},[r]);let R=e=>{D(e),k(null),T(`${e}/`),x?.(e,null)},z=e=>{let t=`${E}/${e}`;E===`openai`&&(t=e),T(t),k(e),x?.(E,e)},B=()=>{D(null),T(null)},V=s.isFreeOpenHandsModel(E&&O?`${E}/${O}`:null),H=_.default.useRef(null),[U,W]=_.default.useState(0);_.default.useLayoutEffect(()=>{if(!V||!H.current){W(0);return}let e=()=>{W(Math.ceil(H.current?.getBoundingClientRect().width??0))};if(e(),typeof ResizeObserver>`u`)return;let t=new ResizeObserver(e);return t.observe(H.current),()=>t.disconnect()},[V,O]);let{t:G}=t.useTranslation(`openhands`);return(0,v.jsxs)(`div`,{className:a.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:a.cn(`text-sm`,w),children:G(n.I18nKey.LLM$PROVIDER)}),(0,v.jsxs)(u.autocomplete_default,{"data-testid":`llm-provider-input`,isRequired:!0,isVirtualized:!1,name:`llm-provider-input`,isDisabled:e,"aria-label":G(n.I18nKey.LLM$PROVIDER),isClearable:!1,onSelectionChange:e=>{e?.toString()&&R(e.toString())},onInputChange:e=>!e&&B(),defaultSelectedKey:E??void 0,selectedKey:E,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:d.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:o.formControlSettingsFieldClassName}},children:[(0,v.jsx)(l.listbox_section_base_default,{title:G(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:P.map(e=>(0,v.jsx)(c.listbox_item_base_default,{"data-testid":`provider-item-${e.name}`,children:f.mapProvider(e.name)},e.name))}),F.length>0?(0,v.jsx)(l.listbox_section_base_default,{title:G(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:F.map(e=>(0,v.jsx)(c.listbox_item_base_default,{children:f.mapProvider(e.name)},e.name))}):null]})]}),E===`openhands`&&(0,v.jsx)(`div`,{className:`flex flex-col gap-2`,children:(0,v.jsx)(m.HelpLink,{testId:`openhands-account-help`,text:G(n.I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT),linkText:G(n.I18nKey.SETTINGS$CLICK_HERE),href:i.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:a.cn(`text-sm`,w),children:G(n.I18nKey.LLM$MODEL)}),(0,v.jsxs)(`div`,{className:`relative`,children:[(0,v.jsxs)(u.autocomplete_default,{"data-testid":`llm-model-input`,isRequired:!0,isVirtualized:!1,isLoading:M,name:`llm-model-input`,"aria-label":G(n.I18nKey.LLM$MODEL),isClearable:!1,onSelectionChange:e=>{e?.toString()&&z(e.toString())},isDisabled:e||!E,selectedKey:O,defaultSelectedKey:O??void 0,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:d.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:o.formControlSettingsFieldClassName}},children:[(0,v.jsx)(l.listbox_section_base_default,{title:G(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:I.map(e=>(0,v.jsx)(c.listbox_item_base_default,{textValue:e.name,children:(0,v.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,v.jsx)(`span`,{className:`truncate`,children:e.name}),s.isFreeOpenHandsModel(`${E}/${e.name}`)?(0,v.jsx)(`span`,{className:y,children:s.FREE_MODEL_BADGE_LABEL}):null]})},e.name))}),L.length>0?(0,v.jsx)(l.listbox_section_base_default,{title:G(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:L.map(e=>(0,v.jsx)(c.listbox_item_base_default,{"data-testid":`model-item-${e.name}`,textValue:e.name,children:e.name},e.name))}):null]}),V&&O?(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(`span`,{ref:H,className:`pointer-events-none absolute left-3 top-1/2 whitespace-pre text-sm opacity-0`,"aria-hidden":!0,children:O}),(0,v.jsx)(`span`,{"data-testid":`selected-free-model-badge`,className:a.cn(y,`pointer-events-none absolute top-1/2 z-10 -translate-y-1/2`),style:{left:`calc(0.75rem + ${U}px + 0.5rem)`},children:s.FREE_MODEL_BADGE_LABEL})]}):null]}),N&&(0,v.jsx)(`p`,{"data-testid":`models-error`,className:`text-danger text-xs`,children:G(n.I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}),E===`openhands`?(0,v.jsx)(b,{}):null]})]})}exports.ModelSelector=x;
+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("../../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.cjs"),o=require("../../../../node_modules/@heroui/listbox/dist/chunk-ANTZPR32.cjs"),s=require("../../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.cjs"),c=require("../../../../utils/form-control-classes.cjs"),l=require("../../../../utils/format-model-name.cjs"),u=require("../../../../ui/combobox-caret.cjs"),d=require("../../../../utils/map-provider.cjs"),f=require("../../../../utils/extract-model-and-provider.cjs"),p=require("../../../../ui/help-link.cjs"),m=require("../../../../hooks/query/use-search-providers.cjs"),h=require("../../../../hooks/query/use-provider-models.cjs"),g=require("../../free-models-note.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime");var y=`shrink-0 rounded-full border border-warning/40 bg-warning/10 px-1.5 py-0.5 text-[10px] leading-none text-warning`;function b({isDisabled:e,currentModel: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=[]}=m.useSearchProviders(),{data:j=[],isLoading:M,error:N}=h.useProviderModels(E),P=_.default.useMemo(()=>A.filter(e=>e.verified),[A]),F=_.default.useMemo(()=>A.filter(e=>!e.verified),[A]),I=_.default.useMemo(()=>j.filter(e=>e.verified),[j]),L=_.default.useMemo(()=>j.filter(e=>!e.verified),[j]),R=_.default.useMemo(()=>j.filter(e=>e.free).map(e=>e.name),[j]),z=_.default.useMemo(()=>new Set(R),[R]);_.default.useEffect(()=>{if(b){let{provider:e,model:t}=f.extractModelAndProvider(b);T(b),D(e||null),k(t),S?.(e||null,t)}},[b]);let B=e=>{D(e),k(null),T(`${e}/`),x?.(e,null)},V=e=>{let t=`${E}/${e}`;E===`openai`&&(t=e),T(t),k(e),x?.(E,e)},H=()=>{D(null),T(null)},U=!!(O&&z.has(O)),W=_.default.useRef(null),[G,K]=_.default.useState(0);_.default.useLayoutEffect(()=>{if(!U||!W.current){K(0);return}let e=()=>{K(Math.ceil(W.current?.getBoundingClientRect().width??0))};if(e(),typeof ResizeObserver>`u`)return;let t=new ResizeObserver(e);return t.observe(W.current),()=>t.disconnect()},[U,O]);let{t:q}=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:q(n.I18nKey.LLM$PROVIDER)}),(0,v.jsxs)(s.autocomplete_default,{"data-testid":`llm-provider-input`,isRequired:!0,isVirtualized:!1,name:`llm-provider-input`,isDisabled:e,"aria-label":q(n.I18nKey.LLM$PROVIDER),isClearable:!1,onSelectionChange:e=>{e?.toString()&&B(e.toString())},onInputChange:e=>!e&&H(),defaultSelectedKey:E??void 0,selectedKey:E,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:u.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:c.formControlSettingsFieldClassName}},children:[(0,v.jsx)(o.listbox_section_base_default,{title:q(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:P.map(e=>(0,v.jsx)(a.listbox_item_base_default,{"data-testid":`provider-item-${e.name}`,children:d.mapProvider(e.name)},e.name))}),F.length>0?(0,v.jsx)(o.listbox_section_base_default,{title:q(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:F.map(e=>(0,v.jsx)(a.listbox_item_base_default,{children:d.mapProvider(e.name)},e.name))}):null]})]}),E===`openhands`&&(0,v.jsx)(`div`,{className:`flex flex-col gap-2`,children:(0,v.jsx)(p.HelpLink,{testId:`openhands-account-help`,text:q(n.I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT),linkText:q(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:q(n.I18nKey.LLM$MODEL)}),(0,v.jsxs)(`div`,{className:`relative`,children:[(0,v.jsxs)(s.autocomplete_default,{"data-testid":`llm-model-input`,isRequired:!0,isVirtualized:!1,isLoading:M,name:`llm-model-input`,"aria-label":q(n.I18nKey.LLM$MODEL),isClearable:!1,onSelectionChange:e=>{e?.toString()&&V(e.toString())},isDisabled:e||!E,selectedKey:O,defaultSelectedKey:O??void 0,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:u.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:c.formControlSettingsFieldClassName}},children:[(0,v.jsx)(o.listbox_section_base_default,{title:q(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:I.map(e=>(0,v.jsx)(a.listbox_item_base_default,{textValue:e.name,children:(0,v.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,v.jsx)(`span`,{className:`truncate`,children:e.name}),e.free?(0,v.jsx)(`span`,{className:y,children:l.FREE_MODEL_BADGE_LABEL}):null]})},e.name))}),L.length>0?(0,v.jsx)(o.listbox_section_base_default,{title:q(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:L.map(e=>(0,v.jsx)(a.listbox_item_base_default,{"data-testid":`model-item-${e.name}`,textValue:e.name,children:e.name},e.name))}):null]}),U&&O?(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(`span`,{ref:W,className:`pointer-events-none absolute left-3 top-1/2 whitespace-pre text-sm opacity-0`,"aria-hidden":!0,children:O}),(0,v.jsx)(`span`,{"data-testid":`selected-free-model-badge`,className:i.cn(y,`pointer-events-none absolute top-1/2 z-10 -translate-y-1/2`),style:{left:`calc(0.75rem + ${G}px + 0.5rem)`},children:l.FREE_MODEL_BADGE_LABEL})]}):null]}),N&&(0,v.jsx)(`p`,{"data-testid":`models-error`,className:`text-danger text-xs`,children:q(n.I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}),E===`openhands`&&R.length>0?(0,v.jsx)(g.FreeOpenHandsModelsNote,{modelIds:R.map(e=>`${E}/${e}`)}):null]})]})}exports.ModelSelector=b;
 //# 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 { Info } from \"lucide-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 {\n  FREE_MODEL_BADGE_LABEL,\n  FREE_OPENHANDS_MODEL_NOTE,\n  isFreeOpenHandsModel,\n} from \"#/utils/format-model-name\";\n\nconst freeModelBadgeClassName =\n  \"shrink-0 rounded-full border border-warning/40 bg-warning/10 px-1.5 py-0.5 text-[10px] leading-none text-warning\";\n\nfunction FreeOpenHandsModelsNote() {\n  return (\n    <p\n      data-testid=\"openhands-free-models-note\"\n      className=\"flex items-start gap-2 text-xs text-warning\"\n    >\n      <Info className=\"mt-0.5 size-4 shrink-0 text-warning\" aria-hidden />\n      <span>{FREE_OPENHANDS_MODEL_NOTE}</span>\n    </p>\n  );\n}\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 selectedFullModel =\n    selectedProvider && selectedModel\n      ? `${selectedProvider}/${selectedModel}`\n      : null;\n  const isSelectedModelFree = isFreeOpenHandsModel(selectedFullModel);\n  const selectedModelMeasureRef = React.useRef<HTMLSpanElement>(null);\n  const [selectedModelTextWidth, setSelectedModelTextWidth] = React.useState(0);\n\n  React.useLayoutEffect(() => {\n    if (!isSelectedModelFree || !selectedModelMeasureRef.current) {\n      setSelectedModelTextWidth(0);\n      return undefined;\n    }\n\n    const measureSelectedModel = () => {\n      setSelectedModelTextWidth(\n        Math.ceil(\n          selectedModelMeasureRef.current?.getBoundingClientRect().width ?? 0,\n        ),\n      );\n    };\n    measureSelectedModel();\n\n    if (typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(measureSelectedModel);\n    observer.observe(selectedModelMeasureRef.current);\n    return () => observer.disconnect();\n  }, [isSelectedModelFree, selectedModel]);\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        <div className=\"flex flex-col gap-2\">\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        </div>\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        <div className=\"relative\">\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} textValue={model.name}>\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"truncate\">{model.name}</span>\n                    {isFreeOpenHandsModel(\n                      `${selectedProvider}/${model.name}`,\n                    ) ? (\n                      <span className={freeModelBadgeClassName}>\n                        {FREE_MODEL_BADGE_LABEL}\n                      </span>\n                    ) : null}\n                  </span>\n                </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                    textValue={model.name}\n                  >\n                    {model.name}\n                  </AutocompleteItem>\n                ))}\n              </AutocompleteSection>\n            ) : null}\n          </Autocomplete>\n          {isSelectedModelFree && selectedModel ? (\n            <>\n              <span\n                ref={selectedModelMeasureRef}\n                className=\"pointer-events-none absolute left-3 top-1/2 whitespace-pre text-sm opacity-0\"\n                aria-hidden\n              >\n                {selectedModel}\n              </span>\n              <span\n                data-testid=\"selected-free-model-badge\"\n                className={cn(\n                  freeModelBadgeClassName,\n                  \"pointer-events-none absolute top-1/2 z-10 -translate-y-1/2\",\n                )}\n                style={{\n                  left: `calc(0.75rem + ${selectedModelTextWidth}px + 0.5rem)`,\n                }}\n              >\n                {FREE_MODEL_BADGE_LABEL}\n              </span>\n            </>\n          ) : null}\n        </div>\n        {modelsError && (\n          <p data-testid=\"models-error\" className=\"text-danger text-xs\">\n            {t(I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}\n          </p>\n        )}\n        {selectedProvider === \"openhands\" ? <FreeOpenHandsModelsNote /> : null}\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\";\nimport { FREE_MODEL_BADGE_LABEL } from \"#/utils/format-model-name\";\nimport { FreeOpenHandsModelsNote } from \"#/components/shared/free-models-note\";\n\nconst freeModelBadgeClassName =\n  \"shrink-0 rounded-full border border-warning/40 bg-warning/10 px-1.5 py-0.5 text-[10px] leading-none text-warning\";\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  // DB-driven set of free model names for the selected provider. Mirrors the\n  // `verified` flag: the frontend no longer hardcodes which models are free.\n  const freeModelNames = React.useMemo(\n    () => providerModels.filter((m) => m.free).map((m) => m.name),\n    [providerModels],\n  );\n  const freeModelNameSet = React.useMemo(\n    () => new Set(freeModelNames),\n    [freeModelNames],\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 isSelectedModelFree = Boolean(\n    selectedModel && freeModelNameSet.has(selectedModel),\n  );\n  const selectedModelMeasureRef = React.useRef<HTMLSpanElement>(null);\n  const [selectedModelTextWidth, setSelectedModelTextWidth] = React.useState(0);\n\n  React.useLayoutEffect(() => {\n    if (!isSelectedModelFree || !selectedModelMeasureRef.current) {\n      setSelectedModelTextWidth(0);\n      return undefined;\n    }\n\n    const measureSelectedModel = () => {\n      setSelectedModelTextWidth(\n        Math.ceil(\n          selectedModelMeasureRef.current?.getBoundingClientRect().width ?? 0,\n        ),\n      );\n    };\n    measureSelectedModel();\n\n    if (typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(measureSelectedModel);\n    observer.observe(selectedModelMeasureRef.current);\n    return () => observer.disconnect();\n  }, [isSelectedModelFree, selectedModel]);\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        <div className=\"flex flex-col gap-2\">\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        </div>\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        <div className=\"relative\">\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} textValue={model.name}>\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"truncate\">{model.name}</span>\n                    {model.free ? (\n                      <span className={freeModelBadgeClassName}>\n                        {FREE_MODEL_BADGE_LABEL}\n                      </span>\n                    ) : null}\n                  </span>\n                </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                    textValue={model.name}\n                  >\n                    {model.name}\n                  </AutocompleteItem>\n                ))}\n              </AutocompleteSection>\n            ) : null}\n          </Autocomplete>\n          {isSelectedModelFree && selectedModel ? (\n            <>\n              <span\n                ref={selectedModelMeasureRef}\n                className=\"pointer-events-none absolute left-3 top-1/2 whitespace-pre text-sm opacity-0\"\n                aria-hidden\n              >\n                {selectedModel}\n              </span>\n              <span\n                data-testid=\"selected-free-model-badge\"\n                className={cn(\n                  freeModelBadgeClassName,\n                  \"pointer-events-none absolute top-1/2 z-10 -translate-y-1/2\",\n                )}\n                style={{\n                  left: `calc(0.75rem + ${selectedModelTextWidth}px + 0.5rem)`,\n                }}\n              >\n                {FREE_MODEL_BADGE_LABEL}\n              </span>\n            </>\n          ) : null}\n        </div>\n        {modelsError && (\n          <p data-testid=\"models-error\" className=\"text-danger text-xs\">\n            {t(I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}\n          </p>\n        )}\n        {selectedProvider === \"openhands\" && freeModelNames.length > 0 ? (\n          <FreeOpenHandsModelsNote\n            modelIds={freeModelNames.map(\n              (name) => `${selectedProvider}/${name}`,\n            )}\n          />\n        ) : null}\n      </fieldset>\n    </div>\n  );\n}\n"],"mappings":"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"}