@openhands/agent-canvas 1.0.0-alpha.7 → 1.0.0-alpha.8

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

@@ -6,81 +6,76 @@ import { useOptionalConversationId as i } from "../../../../hooks/use-conversati
 import { useConversationStore as a } from "../../../../stores/conversation-store.js";
 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 { labelForAcpModel as c } from "../../../../constants/acp-providers.js";
-import { useActiveConversation as ee } from "../../../../hooks/query/use-active-conversation.js";
-import { useAgentState as te } from "../../../../hooks/use-agent-state.js";
+import { useAgentState as c } from "../../../../hooks/use-agent-state.js";
 import "../../../../utils/form-control-classes.js";
-import { useUnifiedWebSocketStatus as ne } from "../../../../hooks/use-unified-websocket-status.js";
-import re from "../../controls/agent-status.js";
-import l 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 ae } from "../../../../hooks/use-handle-plan-click.js";
-import { ChangeAgentButton as oe } from "../change-agent-button.js";
-import { useAcpModelContext as se } from "../../../../hooks/use-acp-model-context.js";
-import ce from "../../../../icons/settings-gear.js";
-import { NavigationLink as le } from "../../../shared/navigation-link.js";
-import { Divider as ue } from "../../../../ui/divider.js";
-import { ChatInputModel as de } from "./chat-input-model.js";
-import { SwitchProfileButton as fe } from "../switch-profile-button.js";
-import { useUnifiedPauseConversation as pe } from "../../../../hooks/mutation/use-unified-stop-conversation.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 me } from "../chat-add-file-button.js";
-import { ChatSendButton as he } from "../chat-send-button.js";
-import ge from "../../../../icons/three-dots-vertical.js";
-import { usePauseConversation as _e } from "../../../../hooks/mutation/use-pause-conversation.js";
-import { useResumeConversation as h } from "../../../../hooks/mutation/use-resume-conversation.js";
-import g from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import ve from "react-dom";
+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";
 //#region src/components/features/chat/components/chat-input-actions.tsx
-function y({ disabled: y, canSubmit: ye = !0, onAddFileClick: be = () => {}, showButton: xe = !0, buttonClassName: Se = "", handleSubmit: Ce = () => {} }) {
-	let { t: b } = e("openhands"), we = pe(), x = _e(), Te = h(), { conversationId: S } = i(), { data: C } = ee(), { backend: w } = o(), T = w.kind === "cloud", { isAcpContext: E, destinationPath: D, destinationLabel: O } = se(), Ee = E ? c(C?.acp_server, C?.llm_model) ?? C?.llm_model : C?.llm_model, k = T && !!S, De = ne(), { curAgentState: Oe } = te(), { conversationMode: ke, setConversationMode: Ae } = a(), { handlePlanClick: je, isCreatingConversation: Me } = ae(), 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, Ne] = g.useState(Infinity), [Pe, Fe] = g.useState(0), [Ie, Le] = g.useState(32), [L, Re] = g.useState(96), [R, ze] = g.useState(120), [z, B] = g.useState(!1), [V, H] = g.useState(null), [U, Be] = 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 || k && !r || typeof ResizeObserver > "u") return;
+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;
 		let a = () => {
 			let a = e.getBoundingClientRect().width, o = t.getBoundingClientRect().width, s = n.getBoundingClientRect().width, c = i.getBoundingClientRect().width;
-			if (a > 0 && Ne(a), o > 0 && Fe(o), s > 0 && Le(s), c > 0 && ze(c), r) {
+			if (a > 0 && we(a), o > 0 && Ee(o), s > 0 && Oe(s), c > 0 && Ae(c), r) {
 				let e = r.getBoundingClientRect().width;
-				e > 0 && Re(e);
+				e > 0 && ke(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();
-	}, [k]);
-	let Ve = () => {
-		S && x.mutate({ conversationId: S });
-	}, He = () => {
-		S && Te.mutate({ conversationId: S });
-	}, Ue = we.isPending || x.isPending, W = g.useCallback((e) => {
+	}, [w]);
+	let Me = () => {
+		x && b.mutate({ conversationId: x });
+	}, Ne = () => {
+		x && Se.mutate({ conversationId: x });
+	}, Pe = xe.isPending || b.isPending, G = h.useCallback((e) => {
 		let t = e, n = {
 			showCodeInline: !1,
 			showModelInline: !1
 		};
-		return k && t >= L && (n.showCodeInline = !0, t -= L + 12), t >= R && (n.showModelInline = !0), n;
+		return w && t >= R && (n.showCodeInline = !0, t -= R + 12), t >= z && (n.showModelInline = !0), n;
 	}, [
-		k,
-		L,
-		R
-	]), G = I - Pe - 8 - Ie - 12, K = W(G), q = (!k || K.showCodeInline) && K.showModelInline ? K : W(G - 28 - 12), J = k ? q.showCodeInline : !1, Y = q.showModelInline, X = I >= 360, Z = k && !J || !Y;
-	g.useEffect(() => {
-		Z || (B(!1), H(null));
+		w,
+		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(() => {
+		Z || (V(!1), U(null));
 	}, [Z]);
-	let We = ie(() => {
-		B(!1), H(null);
-	}), Q = Oe === n.RUNNING || Me || De !== "OPEN", $ = () => {
-		H(null), B(!1);
+	let Ie = re(() => {
+		V(!1), U(null);
+	}), Q = E === n.RUNNING || A || T !== "OPEN", $ = () => {
+		U(null), V(!1);
 	};
-	g.useLayoutEffect(() => {
-		if (!z || !F.current) return;
-		let e = F.current, t = () => {
+	h.useLayoutEffect(() => {
+		if (!B || !I.current) return;
+		let e = I.current, t = () => {
 			let t = e.getBoundingClientRect();
-			Be({
+			je({
 				position: "fixed",
 				top: t.top - 8,
 				left: t.left,
@@ -91,175 +86,158 @@ function y({ disabled: y, canSubmit: ye = !0, onAddFileClick: be = () => {}, sho
 		return t(), window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
 			window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
 		};
-	}, [z]);
-	let Ge = /* @__PURE__ */ v(d, {
-		ref: We,
+	}, [B]);
+	let Le = /* @__PURE__ */ _(u, {
+		ref: Ie,
 		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: [k && !J && /* @__PURE__ */ v("div", {
+		children: [w && !Y && /* @__PURE__ */ _("div", {
 			className: "relative group/overflow-agent",
-			children: [/* @__PURE__ */ _(f, {
+			children: [/* @__PURE__ */ g(d, {
 				testId: "overflow-agent-button",
-				onClick: () => H((e) => e === "agent" ? null : "agent"),
+				onClick: () => U((e) => e === "agent" ? null : "agent"),
 				isDisabled: Q,
-				children: /* @__PURE__ */ _(m, {
-					icon: /* @__PURE__ */ _(u, { className: "h-[11px] w-[11px]" }),
-					text: b(ke === "code" ? t.COMMON$CODE : t.COMMON$PLAN),
-					rightIcon: /* @__PURE__ */ _(p, {
+				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, {
 						width: 10,
 						height: 10
 					})
 				})
-			}), !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", V === "agent" && "opacity-100 visible pointer-events-auto"),
-				children: /* @__PURE__ */ v(d, {
+			}), !Q && /* @__PURE__ */ g("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, {
 					testId: "overflow-agent-submenu",
 					className: "overflow-visible min-w-[195px] gap-0",
-					children: [/* @__PURE__ */ _(f, {
+					children: [/* @__PURE__ */ g(d, {
 						testId: "overflow-agent-code",
 						onClick: (e) => {
-							e.preventDefault(), e.stopPropagation(), Ae("code"), $();
+							e.preventDefault(), e.stopPropagation(), O("code"), $();
 						},
-						children: /* @__PURE__ */ _(m, {
-							icon: /* @__PURE__ */ _(u, { className: "h-[11px] w-[11px]" }),
-							text: b(t.COMMON$CODE)
+						children: /* @__PURE__ */ g(m, {
+							icon: /* @__PURE__ */ g(l, { className: "h-[11px] w-[11px]" }),
+							text: y(t.COMMON$CODE)
 						})
-					}), /* @__PURE__ */ _(f, {
+					}), /* @__PURE__ */ g(d, {
 						testId: "overflow-agent-plan",
 						onClick: (e) => {
-							je(e), $();
+							k(e), $();
 						},
-						children: /* @__PURE__ */ _(m, {
-							icon: /* @__PURE__ */ _(l, {
+						children: /* @__PURE__ */ g(m, {
+							icon: /* @__PURE__ */ g(ne, {
 								width: 16,
 								height: 16,
 								color: "currentColor"
 							}),
-							text: b(t.COMMON$PLAN)
+							text: y(t.COMMON$PLAN)
 						})
 					})]
 				})
 			})]
-		}), !Y && /* @__PURE__ */ v("div", {
+		}), !X && /* @__PURE__ */ _("div", {
 			className: "relative group/overflow-model",
-			children: [/* @__PURE__ */ _(f, {
+			children: [/* @__PURE__ */ g(d, {
 				testId: "overflow-model-button",
-				onClick: () => H((e) => e === "model" ? null : "model"),
-				children: /* @__PURE__ */ _(m, {
-					icon: /* @__PURE__ */ _(s, {
+				onClick: () => U((e) => e === "model" ? null : "model"),
+				children: /* @__PURE__ */ g(m, {
+					icon: /* @__PURE__ */ g(s, {
 						width: 16,
 						height: 16,
 						strokeWidth: 2,
 						"aria-hidden": !0
 					}),
 					text: "Model",
-					rightIcon: /* @__PURE__ */ _(p, {
+					rightIcon: /* @__PURE__ */ g(p, {
 						width: 10,
 						height: 10
 					})
 				})
-			}), /* @__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", V === "model" && "opacity-100 visible pointer-events-auto"),
-				children: /* @__PURE__ */ v(d, {
+			}), /* @__PURE__ */ g("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, {
 					testId: "overflow-model-submenu",
-					className: "overflow-visible min-w-[220px] max-w-[320px] gap-0",
-					children: [
-						/* @__PURE__ */ _("li", {
-							className: "text-sm",
-							children: /* @__PURE__ */ _("div", {
-								className: "p-2 leading-5 text-[var(--oh-foreground)] break-all",
-								children: Ee
-							})
-						}),
-						/* @__PURE__ */ _(ue, { inset: "menu" }),
-						/* @__PURE__ */ _("li", {
-							className: "text-sm",
-							children: /* @__PURE__ */ v(le, {
-								to: D,
-								onClick: $,
-								className: r("group flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]", "transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none"),
-								children: [/* @__PURE__ */ _(ce, {
-									width: 16,
-									height: 16,
-									className: r("shrink-0 text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]", "transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none"),
-									"aria-hidden": !0
-								}), /* @__PURE__ */ _("span", { children: O })]
-							})
-						})
-					]
+					className: "min-w-[220px] max-w-[320px] max-h-[60vh] overflow-y-auto gap-0",
+					children: /* @__PURE__ */ g(se, {
+						model: C,
+						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")
+					})
 				})
 			})]
 		})]
 	});
-	return /* @__PURE__ */ v("div", {
-		ref: A,
+	return /* @__PURE__ */ _("div", {
+		ref: j,
 		className: "w-full min-w-0 flex items-center justify-between gap-2",
-		children: [/* @__PURE__ */ _("div", {
+		children: [/* @__PURE__ */ g("div", {
 			className: "flex min-w-0 items-center gap-1",
-			children: /* @__PURE__ */ v("div", {
+			children: /* @__PURE__ */ _("div", {
 				className: "flex min-w-0 items-center gap-3",
 				children: [
-					/* @__PURE__ */ _("div", {
-						ref: M,
+					/* @__PURE__ */ g("div", {
+						ref: N,
 						className: r(!1),
-						children: /* @__PURE__ */ _(me, {
-							disabled: y,
-							handleFileIconClick: be
+						children: /* @__PURE__ */ g(ue, {
+							disabled: v,
+							handleFileIconClick: _e
 						})
 					}),
-					k && /* @__PURE__ */ _("div", {
-						ref: N,
-						className: r(!J && "hidden"),
-						children: /* @__PURE__ */ _(oe, {})
-					}),
-					/* @__PURE__ */ _("div", {
+					w && /* @__PURE__ */ g("div", {
 						ref: P,
 						className: r(!Y && "hidden"),
-						children: _(T || E ? de : fe, {})
+						children: /* @__PURE__ */ g(ie, {})
+					}),
+					/* @__PURE__ */ g("div", {
+						ref: F,
+						className: r(!X && "hidden"),
+						children: S || C.isAcpContext ? /* @__PURE__ */ g(oe, {}) : /* @__PURE__ */ g(ce, {})
 					}),
-					Z && /* @__PURE__ */ v("div", {
+					Z && /* @__PURE__ */ _("div", {
 						className: "relative shrink-0",
-						children: [/* @__PURE__ */ _("button", {
-							ref: F,
+						children: [/* @__PURE__ */ g("button", {
+							ref: I,
 							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"),
 							"aria-label": "More input actions",
-							"aria-expanded": z,
+							"aria-expanded": B,
 							"aria-haspopup": "menu",
 							onClick: (e) => {
-								e.preventDefault(), e.stopPropagation(), B((e) => !e);
+								e.preventDefault(), e.stopPropagation(), V((e) => !e);
 							},
-							children: /* @__PURE__ */ _(ge, {
+							children: /* @__PURE__ */ g(fe, {
 								width: 16,
 								height: 16,
 								color: "currentColor"
 							})
-						}), z && typeof document < "u" && U && ve.createPortal(/* @__PURE__ */ _("div", {
-							style: U,
-							children: Ge
+						}), B && typeof document < "u" && W && he.createPortal(/* @__PURE__ */ g("div", {
+							style: W,
+							children: Le
 						}), document.body)]
 					})
 				]
 			})
-		}), /* @__PURE__ */ v("div", {
-			ref: j,
+		}), /* @__PURE__ */ _("div", {
+			ref: M,
 			className: "ml-auto flex shrink-0 items-center gap-2",
-			children: [X && S && /* @__PURE__ */ _(re, {
-				handleStop: Ve,
-				handleResumeAgent: He,
-				disabled: y,
-				isPausing: Ue
-			}), xe && /* @__PURE__ */ _(he, {
-				buttonClassName: Se,
-				handleSubmit: Ce,
-				disabled: y || !ye
+			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
 			})]
 		})]
 	});
 }
 //#endregion
-export { y as ChatInputActions };
+export { v 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 } from \"./chat-input-model\";\nimport { SwitchProfileButton } from \"../switch-profile-button\";\nimport { ChatAddFileButton } from \"../chat-add-file-button\";\nimport { ChatSendButton } from \"../chat-send-button\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\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 { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useAcpModelContext } from \"#/hooks/use-acp-model-context\";\nimport { labelForAcpModel } from \"#/constants/acp-providers\";\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 { Divider } from \"#/ui/divider\";\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 { data: conversation } = useActiveConversation();\n  const { backend } = useActiveBackend();\n  const isCloud = backend.kind === \"cloud\";\n  // Shared with ChatInputModel: routes the model affordance to ChatInputModel\n  // (which knows how to show the ACP model) instead of SwitchProfileButton for\n  // ACP conversations — and for the home screen when Settings → Agent already\n  // selects an ACP agent, since the next conversation will inherit it.\n  const { isAcpContext, destinationPath, destinationLabel } =\n    useAcpModelContext();\n  // Mirror ChatInputModel: ACP conversations show the provider's human label\n  // (e.g. \"Claude Opus 4.7\") in the overflow model submenu, not the raw\n  // ``acp_model`` id. OpenHands keeps the raw model string.\n  const overflowModelLabel = isAcpContext\n    ? (labelForAcpModel(conversation?.acp_server, conversation?.llm_model) ??\n      conversation?.llm_model)\n    : conversation?.llm_model;\n  // The change-agent button can never be enabled on the home page (no\n  // conversation → no WebSocket → permanently disabled), so hide it there\n  // entirely. It is still shown inside a conversation on cloud backends.\n  const showChangeAgentButton = isCloud && Boolean(conversationId);\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            <ContextMenu\n              testId=\"overflow-model-submenu\"\n              className=\"overflow-visible min-w-[220px] max-w-[320px] gap-0\"\n            >\n              <li className=\"text-sm\">\n                <div className=\"p-2 leading-5 text-[var(--oh-foreground)] break-all\">\n                  {overflowModelLabel}\n                </div>\n              </li>\n              <Divider inset=\"menu\" />\n              <li className=\"text-sm\">\n                <NavigationLink\n                  to={destinationPath}\n                  onClick={closeOverflowMenus}\n                  className={cn(\n                    \"group flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\",\n                    formControlTransitionClassName,\n                  )}\n                >\n                  <SettingsGearIcon\n                    width={16}\n                    height={16}\n                    className={cn(\n                      \"shrink-0 text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]\",\n                      formControlTransitionClassName,\n                    )}\n                    aria-hidden\n                  />\n                  <span>{destinationLabel}</span>\n                </NavigationLink>\n              </li>\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 || 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 { 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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"}

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

@@ -1,2 +1,2 @@
-const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../utils/utils.cjs`),n=require(`../../../../constants/acp-providers.cjs`),r=require(`../../../../hooks/query/use-active-conversation.cjs`),i=require(`../../../../hooks/query/use-settings.cjs`),a=require(`../../../../ui/combobox-caret.cjs`),o=require(`../../../../ui/context-menu.cjs`),s=require(`../../../../hooks/use-click-outside-element.cjs`),c=require(`../../../../hooks/use-acp-model-context.cjs`),l=require(`../../../../icons/settings-gear.cjs`),u=require(`../../../shared/navigation-link.cjs`),d=require(`../../../../ui/divider.cjs`);let f=require(`react`);f=e.__toESM(f,1);let p=require(`react/jsx-runtime`);var m=10,h=22;function g(e,t=m){return e.length<=t?e:`${e.slice(0,t)}…`}function _(){let{data:e}=r.useActiveConversation(),{data:_}=i.useSettings(),{isActiveAcpConversation:v,isHomeAcp:y,isAcpContext:b,destinationPath:x,destinationLabel:S}=c.useAcpModelContext(),C=v?e?.acp_server:y&&typeof _?.agent_settings?.acp_server==`string`?_.agent_settings.acp_server:null,w=y?n.getAcpProvider(C):void 0,T;T=v?e?.llm_model:y?n.resolveEffectiveAcpModel({configured:typeof _?.agent_settings?.acp_model==`string`?_.agent_settings.acp_model:null,providerDefault:w?.default_model}):e?.llm_model??_?.llm_model;let[E,D]=f.default.useState(!1),O=s.useClickOutsideElement(()=>{D(!1)});if(!T)return null;let k=b?n.labelForAcpModel(C,T)??T:T,A=g(k,b?h:m);return(0,p.jsxs)(`div`,{className:`relative min-w-0`,children:[(0,p.jsxs)(`button`,{type:`button`,className:t.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:k,"data-testid":`chat-input-llm-model`,"aria-expanded":E,"aria-haspopup":`dialog`,onClick:e=>{e.preventDefault(),e.stopPropagation(),D(e=>!e)},children:[(0,p.jsx)(`span`,{children:A}),(0,p.jsx)(a.ComboboxCaretInline,{isOpen:E})]}),E&&(0,p.jsxs)(o.ContextMenu,{ref:O,testId:`chat-input-llm-model-popover`,position:`top`,alignment:`left`,spacing:`none`,className:`z-[60] mb-2 min-w-[200px] max-w-[320px]`,children:[(0,p.jsx)(`li`,{className:`text-sm`,children:(0,p.jsx)(`div`,{className:`p-2 leading-5 text-white break-all`,children:k})}),(0,p.jsx)(d.Divider,{}),(0,p.jsx)(`li`,{className:`text-sm`,children:(0,p.jsxs)(u.NavigationLink,{to:x,onClick:()=>D(!1),className:`flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-white hover:bg-[var(--oh-interactive-hover)] transition-colors`,children:[(0,p.jsx)(l.default,{width:16,height:16,className:`shrink-0`,"aria-hidden":!0}),(0,p.jsx)(`span`,{children:S})]})})]})]})}exports.ChatInputModel=_;
+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;
 //# 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 { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { useAcpModelContext } from \"#/hooks/use-acp-model-context\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { Divider } from \"#/ui/divider\";\nimport {\n  getAcpProvider,\n  labelForAcpModel,\n  resolveEffectiveAcpModel,\n} from \"#/constants/acp-providers\";\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\nexport function ChatInputModel() {\n  const { data: conversation } = useActiveConversation();\n  // Home page has no active conversation; fall back to the user's default\n  // model so the switcher renders consistently across both surfaces.\n  const { data: settings } = useSettings();\n  const {\n    isActiveAcpConversation,\n    isHomeAcp,\n    isAcpContext,\n    destinationPath,\n    destinationLabel,\n  } = useAcpModelContext();\n  // ACP conversations do not use the OpenHands LLM profile. Resolve the model\n  // label through the shared helper so the displayed value matches what the\n  // conversation-creation path will actually send to the agent-server (the\n  // helper applies provider defaults + filters out the SDK ``\"default\"``\n  // placeholders + the ``\"acp-managed\"`` sentinel).\n  //\n  // The ACP server key whose registry owns the model label comes off the\n  // active conversation when there is one, else the saved agent settings the\n  // next home-page conversation will inherit.\n  const acpServerKey = isActiveAcpConversation\n    ? conversation?.acp_server\n    : isHomeAcp\n      ? typeof settings?.agent_settings?.acp_server === \"string\"\n        ? settings.agent_settings.acp_server\n        : null\n      : null;\n  const acpProvider = isHomeAcp ? getAcpProvider(acpServerKey) : undefined;\n  let llmModel: string | null | undefined;\n  if (isActiveAcpConversation) {\n    llmModel = conversation?.llm_model;\n  } else if (isHomeAcp) {\n    llmModel = resolveEffectiveAcpModel({\n      configured:\n        typeof settings?.agent_settings?.acp_model === \"string\"\n          ? settings.agent_settings.acp_model\n          : null,\n      providerDefault: acpProvider?.default_model,\n    });\n  } else {\n    llmModel = conversation?.llm_model ?? settings?.llm_model;\n  }\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(() => {\n    setIsPopoverOpen(false);\n  });\n\n  if (!llmModel) {\n    return null;\n  }\n  // For ACP, surface the provider's human label (matching the conversation\n  // list chip) instead of the raw ``acp_model`` id; falls back to the raw\n  // value for custom / unknown ids. OpenHands keeps the raw model string.\n  const displayModel = isAcpContext\n    ? (labelForAcpModel(acpServerKey, llmModel) ?? llmModel)\n    : llmModel;\n  const truncatedModelLabel = truncateModelLabel(\n    displayModel,\n    isAcpContext ? ACP_MODEL_LABEL_MAX_CHARS : MODEL_LABEL_MAX_CHARS,\n  );\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\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={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]\"\n        >\n          <li className=\"text-sm\">\n            <div className=\"p-2 leading-5 text-white break-all\">\n              {displayModel}\n            </div>\n          </li>\n          <Divider />\n          <li className=\"text-sm\">\n            <NavigationLink\n              to={destinationPath}\n              onClick={() => setIsPopoverOpen(false)}\n              className=\"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-white hover:bg-[var(--oh-interactive-hover)] transition-colors\"\n            >\n              <SettingsGearIcon\n                width={16}\n                height={16}\n                className=\"shrink-0\"\n                aria-hidden\n              />\n              <span>{destinationLabel}</span>\n            </NavigationLink>\n          </li>\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"0rBAiBA,IAAM,EAAwB,GAIxB,EAA4B,GAElC,SAAS,EACP,EACA,EAAmB,EACX,CAIR,OAHI,EAAM,QAAU,EACX,EAEF,GAAG,EAAM,MAAM,EAAG,EAAS,CAAC,GAGrC,SAAgB,GAAiB,CAC/B,GAAM,CAAE,KAAM,GAAiB,EAAA,uBAAuB,CAGhD,CAAE,KAAM,GAAa,EAAA,aAAa,CAClC,CACJ,0BACA,YACA,eACA,kBACA,oBACE,EAAA,oBAAoB,CAUlB,EAAe,EACjB,GAAc,WACd,GACE,OAAO,GAAU,gBAAgB,YAAe,SAC9C,EAAS,eAAe,WACxB,KAEF,EAAc,EAAY,EAAA,eAAe,EAAa,CAAG,IAAA,GAC3D,EACJ,AAWE,EAXE,EACS,GAAc,UAChB,EACE,EAAA,yBAAyB,CAClC,WACE,OAAO,GAAU,gBAAgB,WAAc,SAC3C,EAAS,eAAe,UACxB,KACN,gBAAiB,GAAa,cAC/B,CAAC,CAES,GAAc,WAAa,GAAU,UAElD,GAAM,CAAC,EAAe,GAAoB,EAAA,QAAM,SAAS,GAAM,CAEzD,EAAa,EAAA,2BAA+C,CAChE,EAAiB,GAAM,EACvB,CAEF,GAAI,CAAC,EACH,OAAO,KAKT,IAAM,EAAe,EAChB,EAAA,iBAAiB,EAAc,EAAS,EAAI,EAC7C,EACE,EAAsB,EAC1B,EACA,EAAe,EAA4B,EAC5C,CAED,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,4BAAf,EACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,GACT,0QACA,oDACD,CACD,MAAO,EACP,cAAY,uBACZ,gBAAe,EACf,gBAAc,SACd,QAAU,GAAU,CAClB,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,EAAkB,GAAS,CAAC,EAAK,WAbrC,EAgBE,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,EAA2B,CAAA,EAClC,EAAA,EAAA,KAAC,EAAA,oBAAD,CAAqB,OAAQ,EAAiB,CAAA,CACvC,GAER,IACC,EAAA,EAAA,MAAC,EAAA,YAAD,CACE,IAAK,EACL,OAAO,+BACP,SAAS,MACT,UAAU,OACV,QAAQ,OACR,UAAU,mDANZ,EAQE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,oBACZ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8CACZ,EACG,CAAA,CACH,CAAA,EACL,EAAA,EAAA,KAAC,EAAA,QAAD,EAAW,CAAA,EACX,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,oBACZ,EAAA,EAAA,MAAC,EAAA,eAAD,CACE,GAAI,EACJ,YAAe,EAAiB,GAAM,CACtC,UAAU,sIAHZ,EAKE,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,GACP,OAAQ,GACR,UAAU,WACV,cAAA,GACA,CAAA,EACF,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,EAAwB,CAAA,CAChB,GACd,CAAA,CACO,GAEZ"}
+{"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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"}