@openhands/agent-canvas 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/components/features/chat/components/chat-input-actions.js

@@ -7,75 +7,75 @@ import { useConversationStore as a } from "../../../../stores/conversation-store
 import { useActiveBackend as o } from "../../../../contexts/active-backend-context.js";
 import { Cpu as s } from "../../../../node_modules/lucide-react/dist/esm/icons/cpu.js";
 import { useAgentState as c } from "../../../../hooks/use-agent-state.js";
-import "../../../../utils/form-control-classes.js";
-import { useUnifiedWebSocketStatus as ee } from "../../../../hooks/use-unified-websocket-status.js";
-import te from "../../controls/agent-status.js";
-import ne from "../../../../icons/lesson-plan.js";
-import { CodePillIcon as l } from "../../../../icons/code-pill.js";
-import { ContextMenu as u } from "../../../../ui/context-menu.js";
-import { ContextMenuListItem as d } from "../../context-menu/context-menu-list-item.js";
-import { useClickOutsideElement as re } from "../../../../hooks/use-click-outside-element.js";
-import { useHandlePlanClick as f } from "../../../../hooks/use-handle-plan-click.js";
-import { ChangeAgentButton as ie } from "../change-agent-button.js";
-import { useChatInputModelState as ae } from "../../../../hooks/use-chat-input-model-state.js";
-import { ChatInputModel as oe, ChatInputModelMenuContent as se } from "./chat-input-model.js";
-import { SwitchProfileButton as ce } from "../switch-profile-button.js";
-import { useUnifiedPauseConversation as le } from "../../../../hooks/mutation/use-unified-stop-conversation.js";
-import p from "../../../../icons/carret-right-fill.js";
-import { ToolsContextMenuIconText as m } from "../../controls/tools-context-menu-icon-text.js";
-import { ChatAddFileButton as ue } from "../chat-add-file-button.js";
-import { ChatSendButton as de } from "../chat-send-button.js";
-import fe from "../../../../icons/three-dots-vertical.js";
-import { usePauseConversation as pe } from "../../../../hooks/mutation/use-pause-conversation.js";
-import { useResumeConversation as me } from "../../../../hooks/mutation/use-resume-conversation.js";
-import h from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import he from "react-dom";
+import { chatInputIconButtonClassName as ee, formControlTransitionClassName as l } from "../../../../utils/form-control-classes.js";
+import { useUnifiedWebSocketStatus as te } from "../../../../hooks/use-unified-websocket-status.js";
+import ne from "../../controls/agent-status.js";
+import re from "../../../../icons/lesson-plan.js";
+import { CodePillIcon as u } from "../../../../icons/code-pill.js";
+import { ContextMenu as d } from "../../../../ui/context-menu.js";
+import { ContextMenuListItem as f } from "../../context-menu/context-menu-list-item.js";
+import { useClickOutsideElement as ie } from "../../../../hooks/use-click-outside-element.js";
+import { useHandlePlanClick as p } from "../../../../hooks/use-handle-plan-click.js";
+import { ChangeAgentButton as ae } from "../change-agent-button.js";
+import { useChatInputModelState as oe } from "../../../../hooks/use-chat-input-model-state.js";
+import { ChatInputModel as se, ChatInputModelMenuContent as ce } from "./chat-input-model.js";
+import { SwitchProfileButton as le } from "../switch-profile-button.js";
+import { useUnifiedPauseConversation as ue } from "../../../../hooks/mutation/use-unified-stop-conversation.js";
+import m from "../../../../icons/carret-right-fill.js";
+import { ToolsContextMenuIconText as h } from "../../controls/tools-context-menu-icon-text.js";
+import { ChatAddFileButton as de } from "../chat-add-file-button.js";
+import { ChatSendButton as fe } from "../chat-send-button.js";
+import pe from "../../../../icons/three-dots-vertical.js";
+import { usePauseConversation as me } from "../../../../hooks/mutation/use-pause-conversation.js";
+import { useResumeConversation as he } from "../../../../hooks/mutation/use-resume-conversation.js";
+import g from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import ge from "react-dom";
 //#region src/components/features/chat/components/chat-input-actions.tsx
-function v({ disabled: v, canSubmit: ge = !0, onAddFileClick: _e = () => {}, showButton: ve = !0, buttonClassName: ye = "", handleSubmit: be = () => {} }) {
-	let { t: y } = e("openhands"), xe = le(), b = pe(), Se = me(), { conversationId: x } = i(), { backend: Ce } = o(), S = Ce.kind === "cloud", C = ae(), w = S, T = ee(), { curAgentState: E } = c(), { conversationMode: D, setConversationMode: O } = a(), { handlePlanClick: k, isCreatingConversation: A } = f(), j = h.useRef(null), M = h.useRef(null), N = h.useRef(null), P = h.useRef(null), F = h.useRef(null), I = h.useRef(null), [L, we] = h.useState(Infinity), [Te, Ee] = h.useState(0), [De, Oe] = h.useState(32), [R, ke] = h.useState(96), [z, Ae] = h.useState(120), [B, V] = h.useState(!1), [H, U] = h.useState(null), [W, je] = h.useState();
-	h.useEffect(() => {
-		let e = j.current, t = M.current, n = N.current, r = P.current, i = F.current;
-		if (!e || !t || !n || !i || w && !r || typeof ResizeObserver > "u") return;
+function y({ disabled: y, canSubmit: _e = !0, onAddFileClick: ve = () => {}, showButton: ye = !0, buttonClassName: be = "", handleSubmit: xe = () => {} }) {
+	let { t: b } = e("openhands"), Se = ue(), x = me(), Ce = he(), { conversationId: S } = i(), { backend: we } = o(), C = we.kind === "cloud", w = oe(), T = C, E = te(), { curAgentState: D } = c(), { conversationMode: O, setConversationMode: k } = a(), { handlePlanClick: Te, isCreatingConversation: Ee } = p(), A = g.useRef(null), j = g.useRef(null), M = g.useRef(null), N = g.useRef(null), P = g.useRef(null), F = g.useRef(null), [I, De] = g.useState(Infinity), [Oe, L] = g.useState(0), [ke, Ae] = g.useState(32), [R, je] = g.useState(96), [z, Me] = g.useState(120), [B, V] = g.useState(!1), [H, U] = g.useState(null), [W, Ne] = g.useState();
+	g.useEffect(() => {
+		let e = A.current, t = j.current, n = M.current, r = N.current, i = P.current;
+		if (!e || !t || !n || !i || T && !r || typeof ResizeObserver > "u") return;
 		let a = () => {
 			let a = e.getBoundingClientRect().width, o = t.getBoundingClientRect().width, s = n.getBoundingClientRect().width, c = i.getBoundingClientRect().width;
-			if (a > 0 && we(a), o > 0 && Ee(o), s > 0 && Oe(s), c > 0 && Ae(c), r) {
+			if (a > 0 && De(a), o > 0 && L(o), s > 0 && Ae(s), c > 0 && Me(c), r) {
 				let e = r.getBoundingClientRect().width;
-				e > 0 && ke(e);
+				e > 0 && je(e);
 			}
 		}, o = new ResizeObserver(() => {
 			a();
 		});
 		return o.observe(e), o.observe(t), o.observe(n), o.observe(i), r && o.observe(r), a(), () => o.disconnect();
-	}, [w]);
-	let Me = () => {
-		x && b.mutate({ conversationId: x });
-	}, Ne = () => {
-		x && Se.mutate({ conversationId: x });
-	}, Pe = xe.isPending || b.isPending, G = h.useCallback((e) => {
+	}, [T]);
+	let Pe = () => {
+		S && x.mutate({ conversationId: S });
+	}, Fe = () => {
+		S && Ce.mutate({ conversationId: S });
+	}, Ie = Se.isPending || x.isPending, G = g.useCallback((e) => {
 		let t = e, n = {
 			showCodeInline: !1,
 			showModelInline: !1
 		};
-		return w && t >= R && (n.showCodeInline = !0, t -= R + 12), t >= z && (n.showModelInline = !0), n;
+		return T && t >= R && (n.showCodeInline = !0, t -= R + 12), t >= z && (n.showModelInline = !0), n;
 	}, [
-		w,
+		T,
 		R,
 		z
-	]), K = L - Te - 8 - De - 12, q = G(K), J = (!w || q.showCodeInline) && q.showModelInline ? q : G(K - 28 - 12), Y = w ? J.showCodeInline : !1, X = J.showModelInline, Fe = L >= 360, Z = w && !Y || !X;
-	h.useEffect(() => {
+	]), K = I - Oe - 8 - ke - 12, q = G(K), J = (!T || q.showCodeInline) && q.showModelInline ? q : G(K - 28 - 12), Y = T ? J.showCodeInline : !1, X = J.showModelInline, Le = I >= 360, Z = T && !Y || !X;
+	g.useEffect(() => {
 		Z || (V(!1), U(null));
 	}, [Z]);
-	let Ie = re(() => {
+	let Re = ie(() => {
 		V(!1), U(null);
-	}), Q = E === n.RUNNING || A || T !== "OPEN", $ = () => {
+	}), Q = D === n.RUNNING || Ee || E !== "OPEN", $ = () => {
 		U(null), V(!1);
 	};
-	h.useLayoutEffect(() => {
-		if (!B || !I.current) return;
-		let e = I.current, t = () => {
+	g.useLayoutEffect(() => {
+		if (!B || !F.current) return;
+		let e = F.current, t = () => {
 			let t = e.getBoundingClientRect();
-			je({
+			Ne({
 				position: "fixed",
 				top: t.top - 8,
 				left: t.left,
@@ -87,157 +87,157 @@ function v({ disabled: v, canSubmit: ge = !0, onAddFileClick: _e = () => {}, sho
 			window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
 		};
 	}, [B]);
-	let Le = /* @__PURE__ */ _(u, {
-		ref: Ie,
+	let ze = /* @__PURE__ */ v(d, {
+		ref: Re,
 		testId: "chat-input-overflow-menu",
 		position: "top",
 		alignment: "left",
 		className: "!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]",
-		children: [w && !Y && /* @__PURE__ */ _("div", {
+		children: [T && !Y && /* @__PURE__ */ v("div", {
 			className: "relative group/overflow-agent",
-			children: [/* @__PURE__ */ g(d, {
+			children: [/* @__PURE__ */ _(f, {
 				testId: "overflow-agent-button",
 				onClick: () => U((e) => e === "agent" ? null : "agent"),
 				isDisabled: Q,
-				children: /* @__PURE__ */ g(m, {
-					icon: /* @__PURE__ */ g(l, { className: "h-[11px] w-[11px]" }),
-					text: y(D === "code" ? t.COMMON$CODE : t.COMMON$PLAN),
-					rightIcon: /* @__PURE__ */ g(p, {
+				children: /* @__PURE__ */ _(h, {
+					icon: /* @__PURE__ */ _(u, { className: "h-[11px] w-[11px]" }),
+					text: b(O === "code" ? t.COMMON$CODE : t.COMMON$PLAN),
+					rightIcon: /* @__PURE__ */ _(m, {
 						width: 10,
 						height: 10
 					})
 				})
-			}), !Q && /* @__PURE__ */ g("div", {
+			}), !Q && /* @__PURE__ */ _("div", {
 				className: r("absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]", "group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto", "hover:opacity-100 hover:visible hover:pointer-events-auto", H === "agent" && "opacity-100 visible pointer-events-auto"),
-				children: /* @__PURE__ */ _(u, {
+				children: /* @__PURE__ */ v(d, {
 					testId: "overflow-agent-submenu",
-					className: "overflow-visible min-w-[195px] gap-0",
-					children: [/* @__PURE__ */ g(d, {
+					className: "overflow-visible min-w-[195px]",
+					children: [/* @__PURE__ */ _(f, {
 						testId: "overflow-agent-code",
 						onClick: (e) => {
-							e.preventDefault(), e.stopPropagation(), O("code"), $();
+							e.preventDefault(), e.stopPropagation(), k("code"), $();
 						},
-						children: /* @__PURE__ */ g(m, {
-							icon: /* @__PURE__ */ g(l, { className: "h-[11px] w-[11px]" }),
-							text: y(t.COMMON$CODE)
+						children: /* @__PURE__ */ _(h, {
+							icon: /* @__PURE__ */ _(u, { className: "h-[11px] w-[11px]" }),
+							text: b(t.COMMON$CODE)
 						})
-					}), /* @__PURE__ */ g(d, {
+					}), /* @__PURE__ */ _(f, {
 						testId: "overflow-agent-plan",
 						onClick: (e) => {
-							k(e), $();
+							Te(e), $();
 						},
-						children: /* @__PURE__ */ g(m, {
-							icon: /* @__PURE__ */ g(ne, {
+						children: /* @__PURE__ */ _(h, {
+							icon: /* @__PURE__ */ _(re, {
 								width: 16,
 								height: 16,
 								color: "currentColor"
 							}),
-							text: y(t.COMMON$PLAN)
+							text: b(t.COMMON$PLAN)
 						})
 					})]
 				})
 			})]
-		}), !X && /* @__PURE__ */ _("div", {
+		}), !X && /* @__PURE__ */ v("div", {
 			className: "relative group/overflow-model",
-			children: [/* @__PURE__ */ g(d, {
+			children: [/* @__PURE__ */ _(f, {
 				testId: "overflow-model-button",
 				onClick: () => U((e) => e === "model" ? null : "model"),
-				children: /* @__PURE__ */ g(m, {
-					icon: /* @__PURE__ */ g(s, {
+				children: /* @__PURE__ */ _(h, {
+					icon: /* @__PURE__ */ _(s, {
 						width: 16,
 						height: 16,
 						strokeWidth: 2,
 						"aria-hidden": !0
 					}),
 					text: "Model",
-					rightIcon: /* @__PURE__ */ g(p, {
+					rightIcon: /* @__PURE__ */ _(m, {
 						width: 10,
 						height: 10
 					})
 				})
-			}), /* @__PURE__ */ g("div", {
+			}), /* @__PURE__ */ _("div", {
 				className: r("absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]", "group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto", "hover:opacity-100 hover:visible hover:pointer-events-auto", H === "model" && "opacity-100 visible pointer-events-auto"),
-				children: /* @__PURE__ */ g(u, {
+				children: /* @__PURE__ */ _(d, {
 					testId: "overflow-model-submenu",
 					className: "min-w-[220px] max-w-[320px] max-h-[60vh] overflow-y-auto gap-0",
-					children: /* @__PURE__ */ g(se, {
-						model: C,
+					children: /* @__PURE__ */ _(ce, {
+						model: w,
 						onClose: $,
 						dividerInset: "menu",
-						settingsLinkClassName: r("group", "transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none"),
-						settingsIconClassName: r("text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]", "transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none")
+						settingsLinkClassName: r("group", l),
+						settingsIconClassName: r("text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]", l)
 					})
 				})
 			})]
 		})]
 	});
-	return /* @__PURE__ */ _("div", {
-		ref: j,
+	return /* @__PURE__ */ v("div", {
+		ref: A,
 		className: "w-full min-w-0 flex items-center justify-between gap-2",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ _("div", {
 			className: "flex min-w-0 items-center gap-1",
-			children: /* @__PURE__ */ _("div", {
+			children: /* @__PURE__ */ v("div", {
 				className: "flex min-w-0 items-center gap-3",
 				children: [
-					/* @__PURE__ */ g("div", {
-						ref: N,
+					/* @__PURE__ */ _("div", {
+						ref: M,
 						className: r(!1),
-						children: /* @__PURE__ */ g(ue, {
-							disabled: v,
-							handleFileIconClick: _e
+						children: /* @__PURE__ */ _(de, {
+							disabled: y,
+							handleFileIconClick: ve
 						})
 					}),
-					w && /* @__PURE__ */ g("div", {
-						ref: P,
+					T && /* @__PURE__ */ _("div", {
+						ref: N,
 						className: r(!Y && "hidden"),
-						children: /* @__PURE__ */ g(ie, {})
+						children: /* @__PURE__ */ _(ae, {})
 					}),
-					/* @__PURE__ */ g("div", {
-						ref: F,
+					/* @__PURE__ */ _("div", {
+						ref: P,
 						className: r(!X && "hidden"),
-						children: S || C.isAcpContext ? /* @__PURE__ */ g(oe, {}) : /* @__PURE__ */ g(ce, {})
+						children: C || w.isAcpContext ? /* @__PURE__ */ _(se, {}) : /* @__PURE__ */ _(le, {})
 					}),
-					Z && /* @__PURE__ */ _("div", {
+					Z && /* @__PURE__ */ v("div", {
 						className: "relative shrink-0",
-						children: [/* @__PURE__ */ g("button", {
-							ref: I,
+						children: [/* @__PURE__ */ _("button", {
+							ref: F,
 							type: "button",
-							className: r("flex size-6 items-center justify-center rounded-full text-[var(--oh-muted)]", "transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none", "hover:bg-white/10 hover:text-white cursor-pointer"),
+							className: r(ee, "size-6"),
 							"aria-label": "More input actions",
 							"aria-expanded": B,
 							"aria-haspopup": "menu",
 							onClick: (e) => {
 								e.preventDefault(), e.stopPropagation(), V((e) => !e);
 							},
-							children: /* @__PURE__ */ g(fe, {
+							children: /* @__PURE__ */ _(pe, {
 								width: 16,
 								height: 16,
 								color: "currentColor"
 							})
-						}), B && typeof document < "u" && W && he.createPortal(/* @__PURE__ */ g("div", {
+						}), B && typeof document < "u" && W && ge.createPortal(/* @__PURE__ */ _("div", {
 							style: W,
-							children: Le
+							children: ze
 						}), document.body)]
 					})
 				]
 			})
-		}), /* @__PURE__ */ _("div", {
-			ref: M,
+		}), /* @__PURE__ */ v("div", {
+			ref: j,
 			className: "ml-auto flex shrink-0 items-center gap-2",
-			children: [Fe && x && /* @__PURE__ */ g(te, {
-				handleStop: Me,
-				handleResumeAgent: Ne,
-				disabled: v,
-				isPausing: Pe
-			}), ve && /* @__PURE__ */ g(de, {
-				buttonClassName: ye,
-				handleSubmit: be,
-				disabled: v || !ge
+			children: [Le && S && /* @__PURE__ */ _(ne, {
+				handleStop: Pe,
+				handleResumeAgent: Fe,
+				disabled: y,
+				isPausing: Ie
+			}), ye && /* @__PURE__ */ _(fe, {
+				buttonClassName: be,
+				handleSubmit: xe,
+				disabled: y || !_e
 			})]
 		})]
 	});
 }
 //#endregion
-export { v as ChatInputActions };
+export { y as ChatInputActions };
 
 //# sourceMappingURL=chat-input-actions.js.map

package/dist/components/features/chat/components/chat-input-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-actions.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-actions.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { Cpu } from \"lucide-react\";\nimport { AgentStatus } from \"#/components/features/controls/agent-status\";\nimport { ChangeAgentButton } from \"../change-agent-button\";\nimport { ChatInputModel, ChatInputModelMenuContent } from \"./chat-input-model\";\nimport { SwitchProfileButton } from \"../switch-profile-button\";\nimport { ChatAddFileButton } from \"../chat-add-file-button\";\nimport { ChatSendButton } from \"../chat-send-button\";\nimport CarretRightFillIcon from \"#/icons/carret-right-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport ThreeDotsVerticalIcon from \"#/icons/three-dots-vertical.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { usePauseConversation } from \"#/hooks/mutation/use-pause-conversation\";\nimport { useResumeConversation } from \"#/hooks/mutation/use-resume-conversation\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useChatInputModelState } from \"#/hooks/use-chat-input-model-state\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ToolsContextMenuIconText } from \"../../controls/tools-context-menu-icon-text\";\nimport { ContextMenuListItem } from \"../../context-menu/context-menu-list-item\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\n\ninterface ChatInputActionsProps {\n  disabled: boolean;\n  canSubmit?: boolean;\n  onAddFileClick?: () => void;\n  showButton?: boolean;\n  buttonClassName?: string;\n  handleSubmit?: () => void;\n}\n\nexport function ChatInputActions({\n  disabled,\n  canSubmit = true,\n  onAddFileClick = () => {},\n  showButton = true,\n  buttonClassName = \"\",\n  handleSubmit = () => {},\n}: ChatInputActionsProps) {\n  const { t } = useTranslation(\"openhands\");\n  const unifiedPauseMutation = useUnifiedPauseConversation();\n  const pauseConversationMutation = usePauseConversation();\n  const resumeConversationMutation = useResumeConversation();\n  const { conversationId } = useOptionalConversationId();\n  const { backend } = useActiveBackend();\n  const isCloud = backend.kind === \"cloud\";\n  const modelState = useChatInputModelState();\n  const showChangeAgentButton = isCloud;\n  const webSocketStatus = useUnifiedWebSocketStatus();\n  const { curAgentState } = useAgentState();\n  const { conversationMode, setConversationMode } = useConversationStore();\n  const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n  const actionsRowRef = React.useRef<HTMLDivElement>(null);\n  const rightSectionRef = React.useRef<HTMLDivElement>(null);\n  const addFileRef = React.useRef<HTMLDivElement>(null);\n  const codeRef = React.useRef<HTMLDivElement>(null);\n  const modelRef = React.useRef<HTMLDivElement>(null);\n  const overflowTriggerRef = React.useRef<HTMLButtonElement>(null);\n  const [actionsRowWidth, setActionsRowWidth] = React.useState<number>(\n    Number.POSITIVE_INFINITY,\n  );\n  const [rightSectionWidth, setRightSectionWidth] = React.useState(0);\n  const [addFileWidth, setAddFileWidth] = React.useState(32);\n  const [codeWidth, setCodeWidth] = React.useState(96);\n  const [modelWidth, setModelWidth] = React.useState(120);\n  const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);\n  const [activeSubmenu, setActiveSubmenu] = React.useState<\n    \"agent\" | \"model\" | null\n  >(null);\n  const [overflowPortalStyle, setOverflowPortalStyle] =\n    React.useState<React.CSSProperties>();\n\n  React.useEffect(() => {\n    const rowEl = actionsRowRef.current;\n    const rightEl = rightSectionRef.current;\n    const addEl = addFileRef.current;\n    const codeEl = codeRef.current;\n    const modelEl = modelRef.current;\n\n    if (\n      !rowEl ||\n      !rightEl ||\n      !addEl ||\n      !modelEl ||\n      (showChangeAgentButton && !codeEl) ||\n      typeof ResizeObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const syncWidths = () => {\n      const nextRowWidth = rowEl.getBoundingClientRect().width;\n      const nextRightWidth = rightEl.getBoundingClientRect().width;\n      const nextAddWidth = addEl.getBoundingClientRect().width;\n      const nextModelWidth = modelEl.getBoundingClientRect().width;\n\n      if (nextRowWidth > 0) setActionsRowWidth(nextRowWidth);\n      if (nextRightWidth > 0) setRightSectionWidth(nextRightWidth);\n      if (nextAddWidth > 0) setAddFileWidth(nextAddWidth);\n      if (nextModelWidth > 0) setModelWidth(nextModelWidth);\n\n      if (codeEl) {\n        const nextCodeWidth = codeEl.getBoundingClientRect().width;\n        if (nextCodeWidth > 0) setCodeWidth(nextCodeWidth);\n      }\n    };\n\n    const observer = new ResizeObserver(() => {\n      syncWidths();\n    });\n\n    observer.observe(rowEl);\n    observer.observe(rightEl);\n    observer.observe(addEl);\n    observer.observe(modelEl);\n    if (codeEl) {\n      observer.observe(codeEl);\n    }\n\n    syncWidths();\n\n    return () => observer.disconnect();\n  }, [showChangeAgentButton]);\n\n  const handlePauseAgent = () => {\n    if (!conversationId) return;\n    pauseConversationMutation.mutate({ conversationId });\n  };\n\n  const handleResumeAgentClick = () => {\n    if (!conversationId) return;\n    resumeConversationMutation.mutate({ conversationId });\n  };\n\n  const isPausing =\n    unifiedPauseMutation.isPending || pauseConversationMutation.isPending;\n\n  const OVERFLOW_BUTTON_WIDTH = 28;\n  const INLINE_GAP = 12;\n  const ROOT_GAP = 8;\n\n  const fitOptionalItems = React.useCallback(\n    (availableWidth: number) => {\n      let remaining = availableWidth;\n      const next = {\n        showCodeInline: false,\n        showModelInline: false,\n      };\n\n      if (showChangeAgentButton && remaining >= codeWidth) {\n        next.showCodeInline = true;\n        remaining -= codeWidth + INLINE_GAP;\n      }\n\n      if (remaining >= modelWidth) {\n        next.showModelInline = true;\n      }\n\n      return next;\n    },\n    [showChangeAgentButton, codeWidth, modelWidth],\n  );\n\n  const leftBaseWidth =\n    actionsRowWidth - rightSectionWidth - ROOT_GAP - addFileWidth - INLINE_GAP;\n\n  const fitWithoutOverflow = fitOptionalItems(leftBaseWidth);\n  const allOptionalFit =\n    (!showChangeAgentButton || fitWithoutOverflow.showCodeInline) &&\n    fitWithoutOverflow.showModelInline;\n\n  const fitWithOverflow = allOptionalFit\n    ? fitWithoutOverflow\n    : fitOptionalItems(leftBaseWidth - OVERFLOW_BUTTON_WIDTH - INLINE_GAP);\n\n  const showCodeInline = !showChangeAgentButton\n    ? false\n    : fitWithOverflow.showCodeInline;\n  const showModelInline = fitWithOverflow.showModelInline;\n  const showAddFileInline = true;\n  const showAgentStatusInline = actionsRowWidth >= 360;\n\n  const hasOverflowItems =\n    !showAddFileInline ||\n    (showChangeAgentButton && !showCodeInline) ||\n    !showModelInline;\n\n  React.useEffect(() => {\n    if (!hasOverflowItems) {\n      setIsOverflowOpen(false);\n      setActiveSubmenu(null);\n    }\n  }, [hasOverflowItems]);\n\n  const overflowMenuRef = useClickOutsideElement<HTMLUListElement>(() => {\n    setIsOverflowOpen(false);\n    setActiveSubmenu(null);\n  });\n\n  const isAgentSwitcherDisabled =\n    curAgentState === AgentState.RUNNING ||\n    isCreatingConversation ||\n    webSocketStatus !== \"OPEN\";\n\n  const closeOverflowMenus = () => {\n    setActiveSubmenu(null);\n    setIsOverflowOpen(false);\n  };\n\n  React.useLayoutEffect(() => {\n    if (!isOverflowOpen || !overflowTriggerRef.current) {\n      return;\n    }\n\n    const trigger = overflowTriggerRef.current;\n\n    const updatePosition = () => {\n      const rect = trigger.getBoundingClientRect();\n      const GAP = 8;\n      setOverflowPortalStyle({\n        position: \"fixed\",\n        top: rect.top - GAP,\n        left: rect.left,\n        transform: \"translateY(-100%)\",\n        zIndex: 9999,\n      });\n    };\n\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [isOverflowOpen]);\n\n  const overflowMenu = (\n    <ContextMenu\n      ref={overflowMenuRef}\n      testId=\"chat-input-overflow-menu\"\n      position=\"top\"\n      alignment=\"left\"\n      className=\"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]\"\n    >\n      {showChangeAgentButton && !showCodeInline && (\n        <div className=\"relative group/overflow-agent\">\n          <ContextMenuListItem\n            testId=\"overflow-agent-button\"\n            onClick={() =>\n              setActiveSubmenu((current) =>\n                current === \"agent\" ? null : \"agent\",\n              )\n            }\n            isDisabled={isAgentSwitcherDisabled}\n          >\n            <ToolsContextMenuIconText\n              icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n              text={\n                conversationMode === \"code\"\n                  ? t(I18nKey.COMMON$CODE)\n                  : t(I18nKey.COMMON$PLAN)\n              }\n              rightIcon={<CarretRightFillIcon width={10} height={10} />}\n            />\n          </ContextMenuListItem>\n          {!isAgentSwitcherDisabled && (\n            <div\n              className={cn(\n                \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n                \"group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto\",\n                \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n                activeSubmenu === \"agent\" &&\n                  \"opacity-100 visible pointer-events-auto\",\n              )}\n            >\n              <ContextMenu\n                testId=\"overflow-agent-submenu\"\n                className=\"overflow-visible min-w-[195px] gap-0\"\n              >\n                <ContextMenuListItem\n                  testId=\"overflow-agent-code\"\n                  onClick={(event) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setConversationMode(\"code\");\n                    closeOverflowMenus();\n                  }}\n                >\n                  <ToolsContextMenuIconText\n                    icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n                    text={t(I18nKey.COMMON$CODE)}\n                  />\n                </ContextMenuListItem>\n                <ContextMenuListItem\n                  testId=\"overflow-agent-plan\"\n                  onClick={(event) => {\n                    handlePlanClick(event);\n                    closeOverflowMenus();\n                  }}\n                >\n                  <ToolsContextMenuIconText\n                    icon={\n                      <LessonPlanIcon\n                        width={16}\n                        height={16}\n                        color=\"currentColor\"\n                      />\n                    }\n                    text={t(I18nKey.COMMON$PLAN)}\n                  />\n                </ContextMenuListItem>\n              </ContextMenu>\n            </div>\n          )}\n        </div>\n      )}\n      {!showModelInline && (\n        <div className=\"relative group/overflow-model\">\n          <ContextMenuListItem\n            testId=\"overflow-model-button\"\n            onClick={() =>\n              setActiveSubmenu((current) =>\n                current === \"model\" ? null : \"model\",\n              )\n            }\n          >\n            <ToolsContextMenuIconText\n              icon={<Cpu width={16} height={16} strokeWidth={2} aria-hidden />}\n              text=\"Model\"\n              rightIcon={<CarretRightFillIcon width={10} height={10} />}\n            />\n          </ContextMenuListItem>\n          <div\n            className={cn(\n              \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n              \"group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto\",\n              \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n              activeSubmenu === \"model\" &&\n                \"opacity-100 visible pointer-events-auto\",\n            )}\n          >\n            {/* overflow-y-auto (not overflow-visible) so a long ACP model list\n                scrolls within the menu instead of overflowing the viewport.\n                Safe because this menu has no floating children (tooltips /\n                nested popovers) that would be clipped — only a flat model list\n                + Settings link. Revisit if floating children are added here. */}\n            <ContextMenu\n              testId=\"overflow-model-submenu\"\n              className=\"min-w-[220px] max-w-[320px] max-h-[60vh] overflow-y-auto gap-0\"\n            >\n              <ChatInputModelMenuContent\n                model={modelState}\n                onClose={closeOverflowMenus}\n                dividerInset=\"menu\"\n                settingsLinkClassName={cn(\n                  \"group\",\n                  formControlTransitionClassName,\n                )}\n                settingsIconClassName={cn(\n                  \"text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]\",\n                  formControlTransitionClassName,\n                )}\n              />\n            </ContextMenu>\n          </div>\n        </div>\n      )}\n    </ContextMenu>\n  );\n\n  return (\n    <div\n      ref={actionsRowRef}\n      className=\"w-full min-w-0 flex items-center justify-between gap-2\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1\">\n        <div className=\"flex min-w-0 items-center gap-3\">\n          <div ref={addFileRef} className={cn(!showAddFileInline && \"hidden\")}>\n            <ChatAddFileButton\n              disabled={disabled}\n              handleFileIconClick={onAddFileClick}\n            />\n          </div>\n          {showChangeAgentButton && (\n            <div ref={codeRef} className={cn(!showCodeInline && \"hidden\")}>\n              <ChangeAgentButton />\n            </div>\n          )}\n          <div ref={modelRef} className={cn(!showModelInline && \"hidden\")}>\n            {isCloud || modelState.isAcpContext ? (\n              <ChatInputModel />\n            ) : (\n              <SwitchProfileButton />\n            )}\n          </div>\n\n          {hasOverflowItems && (\n            <div className=\"relative shrink-0\">\n              <button\n                ref={overflowTriggerRef}\n                type=\"button\"\n                className={cn(\n                  \"flex size-6 items-center justify-center rounded-full text-[var(--oh-muted)]\",\n                  formControlTransitionClassName,\n                  \"hover:bg-white/10 hover:text-white cursor-pointer\",\n                )}\n                aria-label=\"More input actions\"\n                aria-expanded={isOverflowOpen}\n                aria-haspopup=\"menu\"\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  setIsOverflowOpen((open) => !open);\n                }}\n              >\n                <ThreeDotsVerticalIcon\n                  width={16}\n                  height={16}\n                  color=\"currentColor\"\n                />\n              </button>\n\n              {isOverflowOpen &&\n                typeof document !== \"undefined\" &&\n                overflowPortalStyle &&\n                ReactDOM.createPortal(\n                  <div style={overflowPortalStyle}>{overflowMenu}</div>,\n                  document.body,\n                )}\n            </div>\n          )}\n        </div>\n      </div>\n      <div\n        ref={rightSectionRef}\n        className=\"ml-auto flex shrink-0 items-center gap-2\"\n      >\n        {showAgentStatusInline && conversationId && (\n          <AgentStatus\n            handleStop={handlePauseAgent}\n            handleResumeAgent={handleResumeAgentClick}\n            disabled={disabled}\n            isPausing={isPausing}\n          />\n        )}\n        {showButton && (\n          <ChatSendButton\n            buttonClassName={buttonClassName}\n            handleSubmit={handleSubmit}\n            disabled={disabled || !canSubmit}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"chat-input-actions.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-actions.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { Cpu } from \"lucide-react\";\nimport { AgentStatus } from \"#/components/features/controls/agent-status\";\nimport { ChangeAgentButton } from \"../change-agent-button\";\nimport { ChatInputModel, ChatInputModelMenuContent } from \"./chat-input-model\";\nimport { SwitchProfileButton } from \"../switch-profile-button\";\nimport { ChatAddFileButton } from \"../chat-add-file-button\";\nimport { ChatSendButton } from \"../chat-send-button\";\nimport CarretRightFillIcon from \"#/icons/carret-right-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport ThreeDotsVerticalIcon from \"#/icons/three-dots-vertical.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { usePauseConversation } from \"#/hooks/mutation/use-pause-conversation\";\nimport { useResumeConversation } from \"#/hooks/mutation/use-resume-conversation\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useChatInputModelState } from \"#/hooks/use-chat-input-model-state\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ToolsContextMenuIconText } from \"../../controls/tools-context-menu-icon-text\";\nimport { ContextMenuListItem } from \"../../context-menu/context-menu-list-item\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  chatInputIconButtonClassName,\n  formControlTransitionClassName,\n} from \"#/utils/form-control-classes\";\n\ninterface ChatInputActionsProps {\n  disabled: boolean;\n  canSubmit?: boolean;\n  onAddFileClick?: () => void;\n  showButton?: boolean;\n  buttonClassName?: string;\n  handleSubmit?: () => void;\n}\n\nexport function ChatInputActions({\n  disabled,\n  canSubmit = true,\n  onAddFileClick = () => {},\n  showButton = true,\n  buttonClassName = \"\",\n  handleSubmit = () => {},\n}: ChatInputActionsProps) {\n  const { t } = useTranslation(\"openhands\");\n  const unifiedPauseMutation = useUnifiedPauseConversation();\n  const pauseConversationMutation = usePauseConversation();\n  const resumeConversationMutation = useResumeConversation();\n  const { conversationId } = useOptionalConversationId();\n  const { backend } = useActiveBackend();\n  const isCloud = backend.kind === \"cloud\";\n  const modelState = useChatInputModelState();\n  const showChangeAgentButton = isCloud;\n  const webSocketStatus = useUnifiedWebSocketStatus();\n  const { curAgentState } = useAgentState();\n  const { conversationMode, setConversationMode } = useConversationStore();\n  const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n  const actionsRowRef = React.useRef<HTMLDivElement>(null);\n  const rightSectionRef = React.useRef<HTMLDivElement>(null);\n  const addFileRef = React.useRef<HTMLDivElement>(null);\n  const codeRef = React.useRef<HTMLDivElement>(null);\n  const modelRef = React.useRef<HTMLDivElement>(null);\n  const overflowTriggerRef = React.useRef<HTMLButtonElement>(null);\n  const [actionsRowWidth, setActionsRowWidth] = React.useState<number>(\n    Number.POSITIVE_INFINITY,\n  );\n  const [rightSectionWidth, setRightSectionWidth] = React.useState(0);\n  const [addFileWidth, setAddFileWidth] = React.useState(32);\n  const [codeWidth, setCodeWidth] = React.useState(96);\n  const [modelWidth, setModelWidth] = React.useState(120);\n  const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);\n  const [activeSubmenu, setActiveSubmenu] = React.useState<\n    \"agent\" | \"model\" | null\n  >(null);\n  const [overflowPortalStyle, setOverflowPortalStyle] =\n    React.useState<React.CSSProperties>();\n\n  React.useEffect(() => {\n    const rowEl = actionsRowRef.current;\n    const rightEl = rightSectionRef.current;\n    const addEl = addFileRef.current;\n    const codeEl = codeRef.current;\n    const modelEl = modelRef.current;\n\n    if (\n      !rowEl ||\n      !rightEl ||\n      !addEl ||\n      !modelEl ||\n      (showChangeAgentButton && !codeEl) ||\n      typeof ResizeObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const syncWidths = () => {\n      const nextRowWidth = rowEl.getBoundingClientRect().width;\n      const nextRightWidth = rightEl.getBoundingClientRect().width;\n      const nextAddWidth = addEl.getBoundingClientRect().width;\n      const nextModelWidth = modelEl.getBoundingClientRect().width;\n\n      if (nextRowWidth > 0) setActionsRowWidth(nextRowWidth);\n      if (nextRightWidth > 0) setRightSectionWidth(nextRightWidth);\n      if (nextAddWidth > 0) setAddFileWidth(nextAddWidth);\n      if (nextModelWidth > 0) setModelWidth(nextModelWidth);\n\n      if (codeEl) {\n        const nextCodeWidth = codeEl.getBoundingClientRect().width;\n        if (nextCodeWidth > 0) setCodeWidth(nextCodeWidth);\n      }\n    };\n\n    const observer = new ResizeObserver(() => {\n      syncWidths();\n    });\n\n    observer.observe(rowEl);\n    observer.observe(rightEl);\n    observer.observe(addEl);\n    observer.observe(modelEl);\n    if (codeEl) {\n      observer.observe(codeEl);\n    }\n\n    syncWidths();\n\n    return () => observer.disconnect();\n  }, [showChangeAgentButton]);\n\n  const handlePauseAgent = () => {\n    if (!conversationId) return;\n    pauseConversationMutation.mutate({ conversationId });\n  };\n\n  const handleResumeAgentClick = () => {\n    if (!conversationId) return;\n    resumeConversationMutation.mutate({ conversationId });\n  };\n\n  const isPausing =\n    unifiedPauseMutation.isPending || pauseConversationMutation.isPending;\n\n  const OVERFLOW_BUTTON_WIDTH = 28;\n  const INLINE_GAP = 12;\n  const ROOT_GAP = 8;\n\n  const fitOptionalItems = React.useCallback(\n    (availableWidth: number) => {\n      let remaining = availableWidth;\n      const next = {\n        showCodeInline: false,\n        showModelInline: false,\n      };\n\n      if (showChangeAgentButton && remaining >= codeWidth) {\n        next.showCodeInline = true;\n        remaining -= codeWidth + INLINE_GAP;\n      }\n\n      if (remaining >= modelWidth) {\n        next.showModelInline = true;\n      }\n\n      return next;\n    },\n    [showChangeAgentButton, codeWidth, modelWidth],\n  );\n\n  const leftBaseWidth =\n    actionsRowWidth - rightSectionWidth - ROOT_GAP - addFileWidth - INLINE_GAP;\n\n  const fitWithoutOverflow = fitOptionalItems(leftBaseWidth);\n  const allOptionalFit =\n    (!showChangeAgentButton || fitWithoutOverflow.showCodeInline) &&\n    fitWithoutOverflow.showModelInline;\n\n  const fitWithOverflow = allOptionalFit\n    ? fitWithoutOverflow\n    : fitOptionalItems(leftBaseWidth - OVERFLOW_BUTTON_WIDTH - INLINE_GAP);\n\n  const showCodeInline = !showChangeAgentButton\n    ? false\n    : fitWithOverflow.showCodeInline;\n  const showModelInline = fitWithOverflow.showModelInline;\n  const showAddFileInline = true;\n  const showAgentStatusInline = actionsRowWidth >= 360;\n\n  const hasOverflowItems =\n    !showAddFileInline ||\n    (showChangeAgentButton && !showCodeInline) ||\n    !showModelInline;\n\n  React.useEffect(() => {\n    if (!hasOverflowItems) {\n      setIsOverflowOpen(false);\n      setActiveSubmenu(null);\n    }\n  }, [hasOverflowItems]);\n\n  const overflowMenuRef = useClickOutsideElement<HTMLUListElement>(() => {\n    setIsOverflowOpen(false);\n    setActiveSubmenu(null);\n  });\n\n  const isAgentSwitcherDisabled =\n    curAgentState === AgentState.RUNNING ||\n    isCreatingConversation ||\n    webSocketStatus !== \"OPEN\";\n\n  const closeOverflowMenus = () => {\n    setActiveSubmenu(null);\n    setIsOverflowOpen(false);\n  };\n\n  React.useLayoutEffect(() => {\n    if (!isOverflowOpen || !overflowTriggerRef.current) {\n      return;\n    }\n\n    const trigger = overflowTriggerRef.current;\n\n    const updatePosition = () => {\n      const rect = trigger.getBoundingClientRect();\n      const GAP = 8;\n      setOverflowPortalStyle({\n        position: \"fixed\",\n        top: rect.top - GAP,\n        left: rect.left,\n        transform: \"translateY(-100%)\",\n        zIndex: 9999,\n      });\n    };\n\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [isOverflowOpen]);\n\n  const overflowMenu = (\n    <ContextMenu\n      ref={overflowMenuRef}\n      testId=\"chat-input-overflow-menu\"\n      position=\"top\"\n      alignment=\"left\"\n      className=\"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]\"\n    >\n      {showChangeAgentButton && !showCodeInline && (\n        <div className=\"relative group/overflow-agent\">\n          <ContextMenuListItem\n            testId=\"overflow-agent-button\"\n            onClick={() =>\n              setActiveSubmenu((current) =>\n                current === \"agent\" ? null : \"agent\",\n              )\n            }\n            isDisabled={isAgentSwitcherDisabled}\n          >\n            <ToolsContextMenuIconText\n              icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n              text={\n                conversationMode === \"code\"\n                  ? t(I18nKey.COMMON$CODE)\n                  : t(I18nKey.COMMON$PLAN)\n              }\n              rightIcon={<CarretRightFillIcon width={10} height={10} />}\n            />\n          </ContextMenuListItem>\n          {!isAgentSwitcherDisabled && (\n            <div\n              className={cn(\n                \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n                \"group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto\",\n                \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n                activeSubmenu === \"agent\" &&\n                  \"opacity-100 visible pointer-events-auto\",\n              )}\n            >\n              <ContextMenu\n                testId=\"overflow-agent-submenu\"\n                className=\"overflow-visible min-w-[195px]\"\n              >\n                <ContextMenuListItem\n                  testId=\"overflow-agent-code\"\n                  onClick={(event) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setConversationMode(\"code\");\n                    closeOverflowMenus();\n                  }}\n                >\n                  <ToolsContextMenuIconText\n                    icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n                    text={t(I18nKey.COMMON$CODE)}\n                  />\n                </ContextMenuListItem>\n                <ContextMenuListItem\n                  testId=\"overflow-agent-plan\"\n                  onClick={(event) => {\n                    handlePlanClick(event);\n                    closeOverflowMenus();\n                  }}\n                >\n                  <ToolsContextMenuIconText\n                    icon={\n                      <LessonPlanIcon\n                        width={16}\n                        height={16}\n                        color=\"currentColor\"\n                      />\n                    }\n                    text={t(I18nKey.COMMON$PLAN)}\n                  />\n                </ContextMenuListItem>\n              </ContextMenu>\n            </div>\n          )}\n        </div>\n      )}\n      {!showModelInline && (\n        <div className=\"relative group/overflow-model\">\n          <ContextMenuListItem\n            testId=\"overflow-model-button\"\n            onClick={() =>\n              setActiveSubmenu((current) =>\n                current === \"model\" ? null : \"model\",\n              )\n            }\n          >\n            <ToolsContextMenuIconText\n              icon={<Cpu width={16} height={16} strokeWidth={2} aria-hidden />}\n              text=\"Model\"\n              rightIcon={<CarretRightFillIcon width={10} height={10} />}\n            />\n          </ContextMenuListItem>\n          <div\n            className={cn(\n              \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n              \"group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto\",\n              \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n              activeSubmenu === \"model\" &&\n                \"opacity-100 visible pointer-events-auto\",\n            )}\n          >\n            {/* overflow-y-auto (not overflow-visible) so a long ACP model list\n                scrolls within the menu instead of overflowing the viewport.\n                Safe because this menu has no floating children (tooltips /\n                nested popovers) that would be clipped — only a flat model list\n                + Settings link. Revisit if floating children are added here. */}\n            <ContextMenu\n              testId=\"overflow-model-submenu\"\n              className=\"min-w-[220px] max-w-[320px] max-h-[60vh] overflow-y-auto gap-0\"\n            >\n              <ChatInputModelMenuContent\n                model={modelState}\n                onClose={closeOverflowMenus}\n                dividerInset=\"menu\"\n                settingsLinkClassName={cn(\n                  \"group\",\n                  formControlTransitionClassName,\n                )}\n                settingsIconClassName={cn(\n                  \"text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]\",\n                  formControlTransitionClassName,\n                )}\n              />\n            </ContextMenu>\n          </div>\n        </div>\n      )}\n    </ContextMenu>\n  );\n\n  return (\n    <div\n      ref={actionsRowRef}\n      className=\"w-full min-w-0 flex items-center justify-between gap-2\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1\">\n        <div className=\"flex min-w-0 items-center gap-3\">\n          <div ref={addFileRef} className={cn(!showAddFileInline && \"hidden\")}>\n            <ChatAddFileButton\n              disabled={disabled}\n              handleFileIconClick={onAddFileClick}\n            />\n          </div>\n          {showChangeAgentButton && (\n            <div ref={codeRef} className={cn(!showCodeInline && \"hidden\")}>\n              <ChangeAgentButton />\n            </div>\n          )}\n          <div ref={modelRef} className={cn(!showModelInline && \"hidden\")}>\n            {isCloud || modelState.isAcpContext ? (\n              <ChatInputModel />\n            ) : (\n              <SwitchProfileButton />\n            )}\n          </div>\n\n          {hasOverflowItems && (\n            <div className=\"relative shrink-0\">\n              <button\n                ref={overflowTriggerRef}\n                type=\"button\"\n                className={cn(chatInputIconButtonClassName, \"size-6\")}\n                aria-label=\"More input actions\"\n                aria-expanded={isOverflowOpen}\n                aria-haspopup=\"menu\"\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  setIsOverflowOpen((open) => !open);\n                }}\n              >\n                <ThreeDotsVerticalIcon\n                  width={16}\n                  height={16}\n                  color=\"currentColor\"\n                />\n              </button>\n\n              {isOverflowOpen &&\n                typeof document !== \"undefined\" &&\n                overflowPortalStyle &&\n                ReactDOM.createPortal(\n                  <div style={overflowPortalStyle}>{overflowMenu}</div>,\n                  document.body,\n                )}\n            </div>\n          )}\n        </div>\n      </div>\n      <div\n        ref={rightSectionRef}\n        className=\"ml-auto flex shrink-0 items-center gap-2\"\n      >\n        {showAgentStatusInline && conversationId && (\n          <AgentStatus\n            handleStop={handlePauseAgent}\n            handleResumeAgent={handleResumeAgentClick}\n            disabled={disabled}\n            isPausing={isPausing}\n          />\n        )}\n        {showButton && (\n          <ChatSendButton\n            buttonClassName={buttonClassName}\n            handleSubmit={handleSubmit}\n            disabled={disabled || !canSubmit}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/chat-input-model.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../../i18n/declaration.cjs`),r=require(`../../../../utils/utils.cjs`),i=require(`../../../../icons/checkmark.cjs`),a=require(`../../../../ui/typography.cjs`),o=require(`../../../../ui/combobox-caret.cjs`),s=require(`../../../../ui/context-menu.cjs`),c=require(`../../context-menu/context-menu-list-item.cjs`),l=require(`../../../../hooks/use-click-outside-element.cjs`),u=require(`../../../../hooks/use-chat-input-model-state.cjs`),d=require(`../../../../hooks/mutation/use-switch-acp-model.cjs`),f=require(`../../../../icons/settings-gear.cjs`),p=require(`../../../shared/navigation-link.cjs`),m=require(`../../../../ui/divider.cjs`);let h=require(`react`);h=e.__toESM(h,1);let g=require(`react/jsx-runtime`);var _=10,v=22;function y(e,t=_){return e.length<=t?e:`${e.slice(0,t)}…`}function b({model:e,onClose:o,dividerInset:s,settingsLinkClassName:l,settingsIconClassName:u}){let{t:h}=t.useTranslation(`openhands`),_=d.useSwitchAcpModel(),v=e.showAcpPicker||!!e.displayModel,y=t=>{t!==e.currentModelId&&_.mutate({conversationId:e.switchConversationId,model:t}),o()};return(0,g.jsxs)(g.Fragment,{children:[e.showAcpPicker?(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(`li`,{role:`presentation`,className:`px-2 pt-1 pb-0.5`,children:(0,g.jsx)(a.Typography.Text,{className:`text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4`,children:h(n.I18nKey.MODEL$AVAILABLE_MODELS)})}),e.availableAcpModels.map(t=>{let n=t.id===e.currentModelId;return(0,g.jsxs)(c.ContextMenuListItem,{testId:`chat-input-acp-model-option-${t.id}`,onClick:e=>{e.preventDefault(),e.stopPropagation(),y(t.id)},className:r.cn(`flex items-center gap-2`,n&&`bg-[var(--oh-interactive-hover)]`),children:[(0,g.jsx)(`span`,{className:`flex-1 truncate text-sm leading-5`,title:t.label,children:t.label}),n&&(0,g.jsx)(i.default,{width:14,height:14,className:`shrink-0`,"aria-hidden":!0})]},t.id)})]}):e.displayModel?(0,g.jsx)(`li`,{className:`text-sm`,children:(0,g.jsx)(`div`,{className:`p-2 leading-5 text-[var(--oh-foreground)] break-all`,children:e.displayModel})}):null,v&&(0,g.jsx)(m.Divider,{inset:s}),(0,g.jsx)(`li`,{className:`text-sm`,children:(0,g.jsxs)(p.NavigationLink,{to:e.destinationPath,onClick:o,className:r.cn(`flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors`,l),children:[(0,g.jsx)(f.default,{width:16,height:16,className:r.cn(`shrink-0`,u),"aria-hidden":!0}),(0,g.jsx)(`span`,{children:e.destinationLabel})]})})]})}function x(){let e=u.useChatInputModelState(),[t,n]=h.default.useState(!1),i=h.default.useRef(null),a=l.useClickOutsideElement(()=>n(!1),i);if(!e.displayModel)return null;let c=y(e.displayModel,e.isAcpContext?v:_);return(0,g.jsxs)(`div`,{className:`relative min-w-0`,children:[(0,g.jsxs)(`button`,{ref:i,type:`button`,className:r.cn(`inline-flex items-center gap-1 rounded-[100px] border border-transparent px-1.5 text-sm font-normal leading-5 text-[var(--oh-muted)] whitespace-nowrap min-w-0 transition-[border-color,background-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`,`hover:text-white hover:bg-white/10 cursor-pointer`),title:e.displayModel,"data-testid":`chat-input-llm-model`,"aria-expanded":t,"aria-haspopup":`dialog`,onClick:e=>{e.preventDefault(),e.stopPropagation(),n(e=>!e)},children:[(0,g.jsx)(`span`,{children:c}),(0,g.jsx)(o.ComboboxCaretInline,{isOpen:t})]}),t&&(0,g.jsx)(s.ContextMenu,{ref:a,testId:`chat-input-llm-model-popover`,position:`top`,alignment:`left`,spacing:`none`,className:`z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto`,children:(0,g.jsx)(b,{model:e,onClose:()=>n(!1)})})]})}exports.ChatInputModel=x,exports.ChatInputModelMenuContent=b;
+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/utils.cjs`),i=require(`../../../../utils/form-control-classes.cjs`),a=require(`../../../../icons/checkmark.cjs`),o=require(`../../../../ui/typography.cjs`),s=require(`../../../../ui/combobox-caret.cjs`),c=require(`../../../../ui/context-menu.cjs`),l=require(`../../context-menu/context-menu-list-item.cjs`),u=require(`../../../../hooks/use-click-outside-element.cjs`),d=require(`../../../../hooks/use-chat-input-model-state.cjs`),f=require(`../../../../hooks/mutation/use-switch-acp-model.cjs`),p=require(`../../../../icons/settings-gear.cjs`),m=require(`../../../shared/navigation-link.cjs`),h=require(`../../../../ui/divider.cjs`);let g=require(`react`);g=e.__toESM(g,1);let _=require(`react/jsx-runtime`);var v=10,y=22;function b(e,t=v){return e.length<=t?e:`${e.slice(0,t)}…`}function x({model:e,onClose:i,dividerInset:s,settingsLinkClassName:c,settingsIconClassName:u}){let{t:d}=t.useTranslation(`openhands`),g=f.useSwitchAcpModel(),v=e.showAcpPicker||!!e.displayModel,y=t=>{t!==e.currentModelId&&g.mutate({conversationId:e.switchConversationId,model:t}),i()};return(0,_.jsxs)(_.Fragment,{children:[e.showAcpPicker?(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`li`,{role:`presentation`,className:`px-2 pt-1 pb-0.5`,children:(0,_.jsx)(o.Typography.Text,{className:`text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4`,children:d(n.I18nKey.MODEL$AVAILABLE_MODELS)})}),e.availableAcpModels.map(t=>{let n=t.id===e.currentModelId;return(0,_.jsxs)(l.ContextMenuListItem,{testId:`chat-input-acp-model-option-${t.id}`,onClick:e=>{e.preventDefault(),e.stopPropagation(),y(t.id)},className:r.cn(`flex items-center gap-2`,n&&`bg-[var(--oh-interactive-hover)]`),children:[(0,_.jsx)(`span`,{className:`flex-1 truncate text-sm leading-5`,title:t.label,children:t.label}),n&&(0,_.jsx)(a.default,{width:14,height:14,className:`shrink-0`,"aria-hidden":!0})]},t.id)})]}):e.displayModel?(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsx)(`div`,{className:`p-2 leading-5 text-[var(--oh-foreground)] break-all`,children:e.displayModel})}):null,v&&(0,_.jsx)(h.Divider,{inset:s}),(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsxs)(m.NavigationLink,{to:e.destinationPath,onClick:i,className:r.cn(`flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors`,c),children:[(0,_.jsx)(p.default,{width:16,height:16,className:r.cn(`shrink-0`,u),"aria-hidden":!0}),(0,_.jsx)(`span`,{children:e.destinationLabel})]})})]})}function S(){let e=d.useChatInputModelState(),[t,n]=g.default.useState(!1),r=g.default.useRef(null),a=u.useClickOutsideElement(()=>n(!1),r);if(!e.displayModel)return null;let o=b(e.displayModel,e.isAcpContext?y:v);return(0,_.jsxs)(`div`,{className:`relative min-w-0`,children:[(0,_.jsxs)(`button`,{ref:r,type:`button`,className:i.chatInputPillButtonClassName,title:e.displayModel,"data-testid":`chat-input-llm-model`,"aria-expanded":t,"aria-haspopup":`dialog`,onClick:e=>{e.preventDefault(),e.stopPropagation(),n(e=>!e)},children:[(0,_.jsx)(`span`,{children:o}),(0,_.jsx)(s.ComboboxCaretInline,{isOpen:t})]}),t&&(0,_.jsx)(c.ContextMenu,{ref:a,testId:`chat-input-llm-model-popover`,position:`top`,alignment:`left`,spacing:`none`,className:`z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto`,children:(0,_.jsx)(x,{model:e,onClose:()=>n(!1)})})]})}exports.ChatInputModel=S,exports.ChatInputModelMenuContent=x;
 //# sourceMappingURL=chat-input-model.cjs.map

package/dist/components/features/chat/components/chat-input-model.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-model.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-model.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport {\n  useChatInputModelState,\n  type ChatInputModelState,\n} from \"#/hooks/use-chat-input-model-state\";\nimport { useSwitchAcpModel } from \"#/hooks/mutation/use-switch-acp-model\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport React from \"react\";\n\nconst MODEL_LABEL_MAX_CHARS = 10;\n// ACP surfaces show the provider's human label (e.g. \"Claude Opus 4.7\"),\n// which is longer than a raw model id, so the inline button gets a wider cap\n// before truncating. The full string still shows in the title + popover.\nconst ACP_MODEL_LABEL_MAX_CHARS = 22;\n\nfunction truncateModelLabel(\n  model: string,\n  maxChars: number = MODEL_LABEL_MAX_CHARS,\n): string {\n  if (model.length <= maxChars) {\n    return model;\n  }\n  return `${model.slice(0, maxChars)}…`;\n}\n\ninterface ChatInputModelMenuContentProps {\n  model: ChatInputModelState;\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\nexport function ChatInputModelMenuContent({\n  model,\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputModelMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const switchAcpModel = useSwitchAcpModel();\n  const hasModelRows = model.showAcpPicker || Boolean(model.displayModel);\n\n  const handleSelectAcpModel = (modelId: string) => {\n    if (modelId !== model.currentModelId) {\n      switchAcpModel.mutate({\n        conversationId: model.switchConversationId,\n        model: modelId,\n      });\n    }\n    onClose();\n  };\n\n  return (\n    <>\n      {model.showAcpPicker ? (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the section label as a\n              selectable menu item (the label text is still announced). */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.MODEL$AVAILABLE_MODELS)}\n            </Typography.Text>\n          </li>\n          {model.availableAcpModels.map((option) => {\n            const isSelected = option.id === model.currentModelId;\n            return (\n              <ContextMenuListItem\n                key={option.id}\n                testId={`chat-input-acp-model-option-${option.id}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  handleSelectAcpModel(option.id);\n                }}\n                className={cn(\n                  \"flex items-center gap-2\",\n                  isSelected && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span\n                  className=\"flex-1 truncate text-sm leading-5\"\n                  title={option.label}\n                >\n                  {option.label}\n                </span>\n                {isSelected && (\n                  <CheckIcon\n                    width={14}\n                    height={14}\n                    className=\"shrink-0\"\n                    aria-hidden\n                  />\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      ) : model.displayModel ? (\n        <li className=\"text-sm\">\n          <div className=\"p-2 leading-5 text-[var(--oh-foreground)] break-all\">\n            {model.displayModel}\n          </div>\n        </li>\n      ) : null}\n      {hasModelRows && <Divider inset={dividerInset} />}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to={model.destinationPath}\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{model.destinationLabel}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputModel() {\n  const model = useChatInputModelState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  if (!model.displayModel) {\n    return null;\n  }\n\n  const truncatedModelLabel = truncateModelLabel(\n    model.displayModel,\n    model.isAcpContext ? ACP_MODEL_LABEL_MAX_CHARS : MODEL_LABEL_MAX_CHARS,\n  );\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(\n          \"inline-flex items-center gap-1 rounded-[100px] border border-transparent px-1.5 text-sm font-normal leading-5 text-[var(--oh-muted)] whitespace-nowrap min-w-0 transition-[border-color,background-color,box-shadow,opacity] duration-150 motion-reduce:transition-none\",\n          \"hover:text-white hover:bg-white/10 cursor-pointer\",\n        )}\n        title={model.displayModel}\n        data-testid=\"chat-input-llm-model\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span>{truncatedModelLabel}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-model-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputModelMenuContent\n            model={model}\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"chat-input-model.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-model.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport {\n  useChatInputModelState,\n  type ChatInputModelState,\n} from \"#/hooks/use-chat-input-model-state\";\nimport { useSwitchAcpModel } from \"#/hooks/mutation/use-switch-acp-model\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\nimport React from \"react\";\n\nconst MODEL_LABEL_MAX_CHARS = 10;\n// ACP surfaces show the provider's human label (e.g. \"Claude Opus 4.7\"),\n// which is longer than a raw model id, so the inline button gets a wider cap\n// before truncating. The full string still shows in the title + popover.\nconst ACP_MODEL_LABEL_MAX_CHARS = 22;\n\nfunction truncateModelLabel(\n  model: string,\n  maxChars: number = MODEL_LABEL_MAX_CHARS,\n): string {\n  if (model.length <= maxChars) {\n    return model;\n  }\n  return `${model.slice(0, maxChars)}…`;\n}\n\ninterface ChatInputModelMenuContentProps {\n  model: ChatInputModelState;\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\nexport function ChatInputModelMenuContent({\n  model,\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputModelMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const switchAcpModel = useSwitchAcpModel();\n  const hasModelRows = model.showAcpPicker || Boolean(model.displayModel);\n\n  const handleSelectAcpModel = (modelId: string) => {\n    if (modelId !== model.currentModelId) {\n      switchAcpModel.mutate({\n        conversationId: model.switchConversationId,\n        model: modelId,\n      });\n    }\n    onClose();\n  };\n\n  return (\n    <>\n      {model.showAcpPicker ? (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the section label as a\n              selectable menu item (the label text is still announced). */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.MODEL$AVAILABLE_MODELS)}\n            </Typography.Text>\n          </li>\n          {model.availableAcpModels.map((option) => {\n            const isSelected = option.id === model.currentModelId;\n            return (\n              <ContextMenuListItem\n                key={option.id}\n                testId={`chat-input-acp-model-option-${option.id}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  handleSelectAcpModel(option.id);\n                }}\n                className={cn(\n                  \"flex items-center gap-2\",\n                  isSelected && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span\n                  className=\"flex-1 truncate text-sm leading-5\"\n                  title={option.label}\n                >\n                  {option.label}\n                </span>\n                {isSelected && (\n                  <CheckIcon\n                    width={14}\n                    height={14}\n                    className=\"shrink-0\"\n                    aria-hidden\n                  />\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      ) : model.displayModel ? (\n        <li className=\"text-sm\">\n          <div className=\"p-2 leading-5 text-[var(--oh-foreground)] break-all\">\n            {model.displayModel}\n          </div>\n        </li>\n      ) : null}\n      {hasModelRows && <Divider inset={dividerInset} />}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to={model.destinationPath}\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{model.destinationLabel}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputModel() {\n  const model = useChatInputModelState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  if (!model.displayModel) {\n    return null;\n  }\n\n  const truncatedModelLabel = truncateModelLabel(\n    model.displayModel,\n    model.isAcpContext ? ACP_MODEL_LABEL_MAX_CHARS : MODEL_LABEL_MAX_CHARS,\n  );\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={chatInputPillButtonClassName}\n        title={model.displayModel}\n        data-testid=\"chat-input-llm-model\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span>{truncatedModelLabel}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-model-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputModelMenuContent\n            model={model}\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}