@openhands/agent-canvas 1.0.0-beta.6 → 1.0.0-beta.8

package/dist/components/features/chat/chat-message.js

@@ -4,88 +4,216 @@ import { cn as n } from "../../../utils/utils.js";
 import { CopyToClipboardButton as r } from "../../shared/buttons/copy-to-clipboard-button.js";
 import { MarkdownRenderer as i } from "../markdown/markdown-renderer.js";
 import { StyledTooltip as a } from "../../shared/buttons/styled-tooltip.js";
-import o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { TextShimmer as o } from "../../shared/text-shimmer.js";
+import s from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/features/chat/chat-message.tsx
-function l({ type: l, message: u, children: d, actions: f, isFromPlanningAgent: p = !1, pendingStatus: m, onRetry: h }) {
-	let { t: g } = e("openhands"), [_, v] = o.useState(!1), [y, b] = o.useState(!1);
-	return o.useEffect(() => {
+var d = 3, f = 24;
+function p({ className: e }) {
+	return /* @__PURE__ */ u("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": !0,
+		className: e,
+		children: [/* @__PURE__ */ l("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10",
+			className: "fill-[var(--oh-foreground)] transition-colors duration-150 group-hover:fill-[var(--oh-text-secondary)]"
+		}), /* @__PURE__ */ l("rect", {
+			x: "9",
+			y: "9",
+			width: "6",
+			height: "6",
+			rx: "1",
+			className: "fill-[var(--oh-color-tertiary)]"
+		})]
+	});
+}
+var m = { p: ({ children: e }) => /* @__PURE__ */ l("p", {
+	className: "m-0 leading-6",
+	children: e
+}) };
+function h({ message: r, isHovering: a, isExpanded: o, onTruncatableChange: p }) {
+	let { t: h } = e("openhands"), g = s.useRef(null), [_, v] = s.useState(!1);
+	s.useLayoutEffect(() => {
+		let e = g.current;
+		if (!e || o) {
+			v(!1), p(!1);
+			return;
+		}
+		let t = () => {
+			let t = Number.parseFloat(getComputedStyle(e).lineHeight), n = d * (Number.isFinite(t) && t > 0 ? t : f), i = (r.match(/\n/g) ?? []).length, a = e.scrollHeight > n + 1 || i >= d || r.trim().length > 220;
+			v((e) => (e !== a && p(a), a));
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [
+		r,
+		o,
+		p
+	]);
+	let y = _ && !o;
+	return /* @__PURE__ */ u("div", {
+		className: "relative min-w-0",
+		children: [/* @__PURE__ */ l("div", {
+			ref: g,
+			className: n("text-sm leading-6 whitespace-normal [word-break:break-word]", y && "line-clamp-3"),
+			children: /* @__PURE__ */ l(i, {
+				includeStandard: !0,
+				includeHeadings: !0,
+				components: m,
+				children: r
+			})
+		}), y ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
+			"aria-hidden": !0,
+			"data-testid": "chat-message-truncation-gradient",
+			className: "pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-tertiary to-transparent"
+		}), /* @__PURE__ */ l("span", {
+			"data-testid": "chat-message-view-more",
+			className: n("pointer-events-none absolute bottom-1 left-1/2 z-10 inline-flex -translate-x-1/2 items-center rounded-full border border-[var(--oh-border-subtle)] bg-[var(--oh-surface-raised)] px-2.5 py-0.5 text-xs font-normal text-[var(--oh-foreground)] transition-opacity duration-150", a ? "opacity-100" : "opacity-0"),
+			children: h(t.COMMON$VIEW_MORE)
+		})] }) : null]
+	});
+}
+function g({ type: c, message: d, children: g, actions: _, isFromPlanningAgent: v = !1, pendingStatus: y, onRetry: b, onStop: x }) {
+	let { t: S } = e("openhands"), [C, w] = s.useState(!1), [T, E] = s.useState(!1), [D, O] = s.useState(!1), [k, A] = s.useState(!1), [j, M] = s.useState(!0), N = s.useRef(null);
+	s.useEffect(() => {
+		O(!1);
+	}, [d]);
+	let P = async () => {
+		await navigator.clipboard.writeText(d), E(!0);
+	};
+	s.useEffect(() => {
 		let e;
-		return y && (e = setTimeout(() => {
-			b(!1);
+		return T && (e = setTimeout(() => {
+			E(!1);
 		}, 2e3)), () => {
 			clearTimeout(e);
 		};
-	}, [y]), /* @__PURE__ */ c("article", {
-		"data-testid": `${l}-message`,
-		"data-pending-status": m,
-		onMouseEnter: () => v(!0),
-		onMouseLeave: () => v(!1),
-		className: n("rounded-xl relative w-fit max-w-full last:mb-4", "flex flex-col gap-2", l === "user" && "p-4 bg-tertiary self-end", l === "agent" && "mt-6 w-full max-w-full bg-transparent", p && l === "agent" && "border border-[#597ff4] bg-tertiary p-4 mt-2", m === "sending" && "opacity-60", m === "error" && "border border-status-fail-border"),
+	}, [T]);
+	let F = c === "user" && (y === "error" || y === "sending"), I = y === "sending" && x != null, L = I && C, R = c === "user" && y == null, z = R && k && !D, B = s.Children.count(g) > 0;
+	s.useLayoutEffect(() => {
+		if (!I || R) return;
+		let e = N.current;
+		if (!e) return;
+		let t = () => {
+			let t = Number.parseFloat(getComputedStyle(e).lineHeight), n = Number.isFinite(t) && t > 0 ? t : f;
+			M(e.scrollHeight <= n + 1);
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [
+		d,
+		I,
+		R
+	]);
+	let V = R ? /* @__PURE__ */ l(h, {
+		message: d,
+		isHovering: C,
+		isExpanded: D,
+		onTruncatableChange: A
+	}) : /* @__PURE__ */ l("div", {
+		ref: N,
+		className: "min-w-0 text-sm leading-6 whitespace-normal [word-break:break-word]",
+		children: /* @__PURE__ */ l(i, {
+			includeStandard: !0,
+			includeHeadings: !0,
+			components: m,
+			children: d
+		})
+	}), H = /* @__PURE__ */ u("article", {
+		"data-testid": `${c}-message`,
+		"data-pending-status": y,
+		onMouseEnter: () => w(!0),
+		onMouseLeave: () => w(!1),
+		className: n("rounded-xl relative w-fit max-w-full flex flex-col", B && "gap-2", c === "user" && "mt-6 bg-tertiary self-end px-4 py-2.5", c === "agent" && "mt-6 w-full max-w-full bg-transparent", v && c === "agent" && "border border-[#597ff4] bg-tertiary p-4 mt-2", y === "error" && "border border-[var(--oh-status-error)]/40", !F && "last:mb-4"),
 		children: [
-			/* @__PURE__ */ c("div", {
-				className: n("absolute -top-2.5 -right-2.5", _ ? "flex" : "hidden", "items-center gap-1"),
-				children: [f?.map((e, t) => e.tooltip ? /* @__PURE__ */ s(a, {
+			/* @__PURE__ */ u("div", {
+				className: n("absolute -top-2.5 -right-2.5 z-10", !C || y === "sending" ? "hidden" : "flex", "items-center gap-1"),
+				onClick: (e) => e.stopPropagation(),
+				children: [_?.map((e, t) => e.tooltip ? /* @__PURE__ */ l(a, {
 					content: e.tooltip,
 					placement: "top",
-					children: /* @__PURE__ */ s("button", {
+					children: /* @__PURE__ */ l("button", {
 						type: "button",
 						onClick: e.onClick,
 						className: "button-base p-1 cursor-pointer",
 						"aria-label": e.tooltip,
 						children: e.icon
 					})
-				}, t) : /* @__PURE__ */ s("button", {
+				}, t) : /* @__PURE__ */ l("button", {
 					type: "button",
 					onClick: e.onClick,
 					className: "button-base p-1 cursor-pointer",
 					"aria-label": `Action ${t + 1}`,
 					children: e.icon
-				}, t)), /* @__PURE__ */ s(r, {
-					isHidden: !_,
-					isDisabled: y,
-					onClick: async () => {
-						await navigator.clipboard.writeText(u), b(!0);
-					},
-					mode: y ? "copied" : "copy"
+				}, t)), /* @__PURE__ */ l(r, {
+					isHidden: !C,
+					isDisabled: T,
+					onClick: P,
+					mode: T ? "copied" : "copy"
 				})]
 			}),
-			/* @__PURE__ */ s("div", {
-				className: "text-sm whitespace-normal [word-break:break-word]",
-				children: /* @__PURE__ */ s(i, {
-					includeStandard: !0,
-					includeHeadings: !0,
-					children: u
-				})
-			}),
-			m === "sending" && /* @__PURE__ */ s("span", {
+			V,
+			I ? /* @__PURE__ */ l("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation(), x?.();
+				},
+				"data-testid": "chat-message-stop",
+				"aria-label": S(t.BUTTON$STOP),
+				"aria-hidden": !L,
+				tabIndex: L ? 0 : -1,
+				className: n("group absolute z-10 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-[var(--oh-color-tertiary)] text-[var(--oh-foreground)] transition-opacity duration-150", j ? "right-3 top-1/2 -translate-y-1/2" : "right-3 bottom-2.5", L ? "opacity-100" : "pointer-events-none opacity-0"),
+				children: /* @__PURE__ */ l(p, { className: "block h-7 w-7 max-w-none" })
+			}) : null,
+			z ? /* @__PURE__ */ l("button", {
+				type: "button",
+				"data-testid": "chat-message-expand",
+				"aria-expanded": !1,
+				"aria-label": S(t.COMMON$VIEW_MORE),
+				className: "absolute inset-0 z-[1] cursor-pointer rounded-xl border-0 bg-transparent p-0",
+				onClick: () => O(!0)
+			}) : null,
+			g
+		]
+	});
+	return c === "user" && y === "error" ? /* @__PURE__ */ u("div", {
+		className: "flex w-fit max-w-full flex-col items-end gap-1.5 self-end last:mb-4",
+		children: [H, /* @__PURE__ */ u("div", {
+			role: "alert",
+			"data-testid": "chat-message-error",
+			className: "flex items-center gap-2 text-xs text-[var(--oh-status-error)]",
+			children: [/* @__PURE__ */ l("span", { children: S(t.CHAT_INTERFACE$MESSAGE_SEND_FAILED) }), b ? /* @__PURE__ */ l("button", {
+				type: "button",
+				onClick: b,
+				className: "cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]",
+				"data-testid": "chat-message-retry",
+				children: S(t.CHAT_INTERFACE$MESSAGE_RETRY)
+			}) : null]
+		})]
+	}) : c === "user" && y === "sending" ? /* @__PURE__ */ u("div", {
+		className: "flex w-full max-w-full flex-col last:mb-4",
+		children: [H, /* @__PURE__ */ l("div", {
+			className: "my-1 w-full py-1 text-sm",
+			children: /* @__PURE__ */ l(o, {
+				as: "p",
 				role: "status",
 				"aria-live": "polite",
 				"data-testid": "chat-message-sending",
-				className: "self-end text-xs italic text-content-muted",
-				children: g(t.CHAT_INTERFACE$MESSAGE_SENDING)
-			}),
-			m === "error" && /* @__PURE__ */ c("span", {
-				role: "alert",
-				"data-testid": "chat-message-error",
-				className: "self-end text-xs text-status-fail-text",
-				children: [
-					g(t.CHAT_INTERFACE$MESSAGE_SEND_FAILED),
-					" ",
-					h && /* @__PURE__ */ s("button", {
-						type: "button",
-						onClick: h,
-						className: "underline cursor-pointer",
-						"data-testid": "chat-message-retry",
-						children: g(t.CHAT_INTERFACE$MESSAGE_RETRY)
-					})
-				]
-			}),
-			d
-		]
-	});
+				className: "block w-full text-sm font-normal",
+				duration: 1,
+				spread: 2,
+				children: S(t.CHAT_INTERFACE$MESSAGE_SENDING)
+			})
+		})]
+	}) : H;
 }
 //#endregion
-export { l as ChatMessage };
+export { g as ChatMessage };
 
 //# sourceMappingURL=chat-message.js.map

package/dist/components/features/chat/chat-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.js","names":[],"sources":["../../../../src/components/features/chat/chat-message.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport type { SourceType } from \"#/types/agent-server/core/base/common\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\n\nexport type ChatMessagePendingStatus = \"sending\" | \"error\";\n\ninterface ChatMessageProps {\n  type: SourceType;\n  message: string;\n  actions?: Array<{\n    icon: React.ReactNode;\n    onClick: () => void;\n    tooltip?: string;\n  }>;\n  isFromPlanningAgent?: boolean;\n  pendingStatus?: ChatMessagePendingStatus;\n  onRetry?: () => void;\n}\n\nexport function ChatMessage({\n  type,\n  message,\n  children,\n  actions,\n  isFromPlanningAgent = false,\n  pendingStatus,\n  onRetry,\n}: React.PropsWithChildren<ChatMessageProps>) {\n  const { t } = useTranslation(\"openhands\");\n  const [isHovering, setIsHovering] = React.useState(false);\n  const [isCopy, setIsCopy] = React.useState(false);\n\n  const handleCopyToClipboard = async () => {\n    await navigator.clipboard.writeText(message);\n    setIsCopy(true);\n  };\n\n  React.useEffect(() => {\n    let timeout: NodeJS.Timeout;\n\n    if (isCopy) {\n      timeout = setTimeout(() => {\n        setIsCopy(false);\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isCopy]);\n\n  return (\n    <article\n      data-testid={`${type}-message`}\n      data-pending-status={pendingStatus}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      className={cn(\n        \"rounded-xl relative w-fit max-w-full last:mb-4\",\n        \"flex flex-col gap-2\",\n        type === \"user\" && \"p-4 bg-tertiary self-end\",\n        type === \"agent\" && \"mt-6 w-full max-w-full bg-transparent\",\n        isFromPlanningAgent &&\n          type === \"agent\" &&\n          \"border border-[#597ff4] bg-tertiary p-4 mt-2\",\n        pendingStatus === \"sending\" && \"opacity-60\",\n        pendingStatus === \"error\" && \"border border-status-fail-border\",\n      )}\n    >\n      <div\n        className={cn(\n          \"absolute -top-2.5 -right-2.5\",\n          !isHovering ? \"hidden\" : \"flex\",\n          \"items-center gap-1\",\n        )}\n      >\n        {actions?.map((action, index) =>\n          action.tooltip ? (\n            <StyledTooltip key={index} content={action.tooltip} placement=\"top\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className=\"button-base p-1 cursor-pointer\"\n                aria-label={action.tooltip}\n              >\n                {action.icon}\n              </button>\n            </StyledTooltip>\n          ) : (\n            <button\n              key={index}\n              type=\"button\"\n              onClick={action.onClick}\n              className=\"button-base p-1 cursor-pointer\"\n              aria-label={`Action ${index + 1}`}\n            >\n              {action.icon}\n            </button>\n          ),\n        )}\n\n        <CopyToClipboardButton\n          isHidden={!isHovering}\n          isDisabled={isCopy}\n          onClick={handleCopyToClipboard}\n          mode={isCopy ? \"copied\" : \"copy\"}\n        />\n      </div>\n\n      <div className=\"text-sm whitespace-normal [word-break:break-word]\">\n        <MarkdownRenderer includeStandard includeHeadings>\n          {message}\n        </MarkdownRenderer>\n      </div>\n\n      {pendingStatus === \"sending\" && (\n        <span\n          role=\"status\"\n          aria-live=\"polite\"\n          data-testid=\"chat-message-sending\"\n          className=\"self-end text-xs italic text-content-muted\"\n        >\n          {t(I18nKey.CHAT_INTERFACE$MESSAGE_SENDING)}\n        </span>\n      )}\n\n      {pendingStatus === \"error\" && (\n        <span\n          role=\"alert\"\n          data-testid=\"chat-message-error\"\n          className=\"self-end text-xs text-status-fail-text\"\n        >\n          {t(I18nKey.CHAT_INTERFACE$MESSAGE_SEND_FAILED)}{\" \"}\n          {onRetry && (\n            <button\n              type=\"button\"\n              onClick={onRetry}\n              className=\"underline cursor-pointer\"\n              data-testid=\"chat-message-retry\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}\n            </button>\n          )}\n        </span>\n      )}\n\n      {children}\n    </article>\n  );\n}\n"],"mappings":";;;;;;;;;AAwBA,SAAgB,EAAY,EAC1B,SACA,YACA,aACA,YACA,yBAAsB,IACtB,kBACA,cAC4C;CAC5C,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,CAAC,GAAY,KAAiB,EAAM,SAAS,GAAM,EACnD,CAAC,GAAQ,KAAa,EAAM,SAAS,GAAM;AAqBjD,QAdA,EAAM,gBAAgB;EACpB,IAAI;AAQJ,SANI,MACF,IAAU,iBAAiB;AACzB,KAAU,GAAM;KACf,IAAK,SAGG;AACX,gBAAa,EAAQ;;IAEtB,CAAC,EAAO,CAAC,EAGV,kBAAC,WAAD;EACE,eAAa,GAAG,EAAK;EACrB,uBAAqB;EACrB,oBAAoB,EAAc,GAAK;EACvC,oBAAoB,EAAc,GAAM;EACxC,WAAW,EACT,kDACA,uBACA,MAAS,UAAU,4BACnB,MAAS,WAAW,yCACpB,KACE,MAAS,WACT,gDACF,MAAkB,aAAa,cAC/B,MAAkB,WAAW,mCAC9B;YAfH;GAiBE,kBAAC,OAAD;IACE,WAAW,EACT,gCACC,IAAwB,SAAX,UACd,qBACD;cALH,CAOG,GAAS,KAAK,GAAQ,MACrB,EAAO,UACL,kBAAC,GAAD;KAA2B,SAAS,EAAO;KAAS,WAAU;eAC5D,kBAAC,UAAD;MACE,MAAK;MACL,SAAS,EAAO;MAChB,WAAU;MACV,cAAY,EAAO;gBAElB,EAAO;MACD,CAAA;KACK,EATI,EASJ,GAEhB,kBAAC,UAAD;KAEE,MAAK;KACL,SAAS,EAAO;KAChB,WAAU;KACV,cAAY,UAAU,IAAQ;eAE7B,EAAO;KACD,EAPF,EAOE,CAEZ,EAED,kBAAC,GAAD;KACE,UAAU,CAAC;KACX,YAAY;KACZ,SAAS,YAxEyB;AAExC,MADA,MAAM,UAAU,UAAU,UAAU,EAAQ,EAC5C,EAAU,GAAK;;KAuET,MAAM,IAAS,WAAW;KAC1B,CAAA,CACE;;GAEN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAAkB,iBAAA;KAAgB,iBAAA;eAC/B;KACgB,CAAA;IACf,CAAA;GAEL,MAAkB,aACjB,kBAAC,QAAD;IACE,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAU;cAET,EAAE,EAAQ,+BAA+B;IACrC,CAAA;GAGR,MAAkB,WACjB,kBAAC,QAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;cAHZ;KAKG,EAAE,EAAQ,mCAAmC;KAAE;KAC/C,KACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;MACV,eAAY;gBAEX,EAAE,EAAQ,6BAA6B;MACjC,CAAA;KAEN;;GAGR;GACO"}
+{"version":3,"file":"chat-message.js","names":[],"sources":["../../../../src/components/features/chat/chat-message.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport type { SourceType } from \"#/types/agent-server/core/base/common\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { TextShimmer } from \"#/components/shared/text-shimmer\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\n\nexport type ChatMessagePendingStatus = \"sending\" | \"error\";\n\nconst USER_MESSAGE_MAX_LINES = 3;\nconst USER_MESSAGE_LINE_HEIGHT_PX = 24;\n\nfunction PendingStopIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden\n      className={className}\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        className=\"fill-[var(--oh-foreground)] transition-colors duration-150 group-hover:fill-[var(--oh-text-secondary)]\"\n      />\n      <rect\n        x=\"9\"\n        y=\"9\"\n        width=\"6\"\n        height=\"6\"\n        rx=\"1\"\n        className=\"fill-[var(--oh-color-tertiary)]\"\n      />\n    </svg>\n  );\n}\n\nconst chatBubbleMarkdownComponents = {\n  p: ({ children }: React.ComponentProps<\"p\">) => (\n    <p className=\"m-0 leading-6\">{children}</p>\n  ),\n};\n\nfunction UserMessageBody({\n  message,\n  isHovering,\n  isExpanded,\n  onTruncatableChange,\n}: {\n  message: string;\n  isHovering: boolean;\n  isExpanded: boolean;\n  onTruncatableChange: (truncatable: boolean) => void;\n}) {\n  const { t } = useTranslation(\"openhands\");\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const [isTruncatable, setIsTruncatable] = React.useState(false);\n\n  React.useLayoutEffect(() => {\n    const content = contentRef.current;\n    if (!content || isExpanded) {\n      setIsTruncatable(false);\n      onTruncatableChange(false);\n      return undefined;\n    }\n\n    const measure = () => {\n      const lineHeight = Number.parseFloat(\n        getComputedStyle(content).lineHeight,\n      );\n      const linePx =\n        Number.isFinite(lineHeight) && lineHeight > 0\n          ? lineHeight\n          : USER_MESSAGE_LINE_HEIGHT_PX;\n      const maxHeight = USER_MESSAGE_MAX_LINES * linePx;\n      const newlineCount = (message.match(/\\n/g) ?? []).length;\n\n      const truncatable =\n        content.scrollHeight > maxHeight + 1 ||\n        newlineCount >= USER_MESSAGE_MAX_LINES ||\n        message.trim().length > 220;\n\n      setIsTruncatable((previous) => {\n        if (previous !== truncatable) {\n          onTruncatableChange(truncatable);\n        }\n        return truncatable;\n      });\n    };\n\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [message, isExpanded, onTruncatableChange]);\n\n  const isCollapsed = isTruncatable && !isExpanded;\n\n  return (\n    <div className=\"relative min-w-0\">\n      <div\n        ref={contentRef}\n        className={cn(\n          \"text-sm leading-6 whitespace-normal [word-break:break-word]\",\n          isCollapsed && \"line-clamp-3\",\n        )}\n      >\n        <MarkdownRenderer\n          includeStandard\n          includeHeadings\n          components={chatBubbleMarkdownComponents}\n        >\n          {message}\n        </MarkdownRenderer>\n      </div>\n\n      {isCollapsed ? (\n        <>\n          <div\n            aria-hidden\n            data-testid=\"chat-message-truncation-gradient\"\n            className=\"pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-tertiary to-transparent\"\n          />\n          <span\n            data-testid=\"chat-message-view-more\"\n            className={cn(\n              \"pointer-events-none absolute bottom-1 left-1/2 z-10 inline-flex -translate-x-1/2 items-center rounded-full border border-[var(--oh-border-subtle)] bg-[var(--oh-surface-raised)] px-2.5 py-0.5 text-xs font-normal text-[var(--oh-foreground)] transition-opacity duration-150\",\n              isHovering ? \"opacity-100\" : \"opacity-0\",\n            )}\n          >\n            {t(I18nKey.COMMON$VIEW_MORE)}\n          </span>\n        </>\n      ) : null}\n    </div>\n  );\n}\n\ninterface ChatMessageProps {\n  type: SourceType;\n  message: string;\n  actions?: Array<{\n    icon: React.ReactNode;\n    onClick: () => void;\n    tooltip?: string;\n  }>;\n  isFromPlanningAgent?: boolean;\n  pendingStatus?: ChatMessagePendingStatus;\n  onRetry?: () => void;\n  onStop?: () => void;\n}\n\nexport function ChatMessage({\n  type,\n  message,\n  children,\n  actions,\n  isFromPlanningAgent = false,\n  pendingStatus,\n  onRetry,\n  onStop,\n}: React.PropsWithChildren<ChatMessageProps>) {\n  const { t } = useTranslation(\"openhands\");\n  const [isHovering, setIsHovering] = React.useState(false);\n  const [isCopy, setIsCopy] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const [isTruncatable, setIsTruncatable] = React.useState(false);\n  const [isSingleLinePendingMessage, setIsSingleLinePendingMessage] =\n    React.useState(true);\n  const pendingMessageContentRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    setIsExpanded(false);\n  }, [message]);\n\n  const handleCopyToClipboard = async () => {\n    await navigator.clipboard.writeText(message);\n    setIsCopy(true);\n  };\n\n  React.useEffect(() => {\n    let timeout: NodeJS.Timeout;\n\n    if (isCopy) {\n      timeout = setTimeout(() => {\n        setIsCopy(false);\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isCopy]);\n\n  const isPendingUserMessage =\n    type === \"user\" &&\n    (pendingStatus === \"error\" || pendingStatus === \"sending\");\n  const canStopPendingMessage = pendingStatus === \"sending\" && onStop != null;\n  const showStopButton = canStopPendingMessage && isHovering;\n  const useTruncatedUserBody = type === \"user\" && pendingStatus == null;\n  const isCollapsed = useTruncatedUserBody && isTruncatable && !isExpanded;\n  const hasBubbleChildren = React.Children.count(children) > 0;\n\n  React.useLayoutEffect(() => {\n    if (!canStopPendingMessage || useTruncatedUserBody) {\n      return undefined;\n    }\n\n    const content = pendingMessageContentRef.current;\n    if (!content) {\n      return undefined;\n    }\n\n    const measure = () => {\n      const lineHeight = Number.parseFloat(\n        getComputedStyle(content).lineHeight,\n      );\n      const linePx =\n        Number.isFinite(lineHeight) && lineHeight > 0\n          ? lineHeight\n          : USER_MESSAGE_LINE_HEIGHT_PX;\n\n      setIsSingleLinePendingMessage(content.scrollHeight <= linePx + 1);\n    };\n\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [message, canStopPendingMessage, useTruncatedUserBody]);\n\n  const messageContent = useTruncatedUserBody ? (\n    <UserMessageBody\n      message={message}\n      isHovering={isHovering}\n      isExpanded={isExpanded}\n      onTruncatableChange={setIsTruncatable}\n    />\n  ) : (\n    <div\n      ref={pendingMessageContentRef}\n      className=\"min-w-0 text-sm leading-6 whitespace-normal [word-break:break-word]\"\n    >\n      <MarkdownRenderer\n        includeStandard\n        includeHeadings\n        components={chatBubbleMarkdownComponents}\n      >\n        {message}\n      </MarkdownRenderer>\n    </div>\n  );\n\n  const renderedMessageContent = messageContent;\n\n  const messageBubble = (\n    <article\n      data-testid={`${type}-message`}\n      data-pending-status={pendingStatus}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      className={cn(\n        \"rounded-xl relative w-fit max-w-full flex flex-col\",\n        hasBubbleChildren && \"gap-2\",\n        type === \"user\" && \"mt-6 bg-tertiary self-end px-4 py-2.5\",\n        type === \"agent\" && \"mt-6 w-full max-w-full bg-transparent\",\n        isFromPlanningAgent &&\n          type === \"agent\" &&\n          \"border border-[#597ff4] bg-tertiary p-4 mt-2\",\n        pendingStatus === \"error\" &&\n          \"border border-[var(--oh-status-error)]/40\",\n        !isPendingUserMessage && \"last:mb-4\",\n      )}\n    >\n      <div\n        className={cn(\n          \"absolute -top-2.5 -right-2.5 z-10\",\n          !isHovering || pendingStatus === \"sending\" ? \"hidden\" : \"flex\",\n          \"items-center gap-1\",\n        )}\n        onClick={(event) => event.stopPropagation()}\n      >\n        {actions?.map((action, index) =>\n          action.tooltip ? (\n            <StyledTooltip key={index} content={action.tooltip} placement=\"top\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className=\"button-base p-1 cursor-pointer\"\n                aria-label={action.tooltip}\n              >\n                {action.icon}\n              </button>\n            </StyledTooltip>\n          ) : (\n            <button\n              key={index}\n              type=\"button\"\n              onClick={action.onClick}\n              className=\"button-base p-1 cursor-pointer\"\n              aria-label={`Action ${index + 1}`}\n            >\n              {action.icon}\n            </button>\n          ),\n        )}\n\n        <CopyToClipboardButton\n          isHidden={!isHovering}\n          isDisabled={isCopy}\n          onClick={handleCopyToClipboard}\n          mode={isCopy ? \"copied\" : \"copy\"}\n        />\n      </div>\n\n      {renderedMessageContent}\n\n      {canStopPendingMessage ? (\n        <button\n          type=\"button\"\n          onClick={(event) => {\n            event.stopPropagation();\n            onStop?.();\n          }}\n          data-testid=\"chat-message-stop\"\n          aria-label={t(I18nKey.BUTTON$STOP)}\n          aria-hidden={!showStopButton}\n          tabIndex={showStopButton ? 0 : -1}\n          className={cn(\n            \"group absolute z-10 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-[var(--oh-color-tertiary)] text-[var(--oh-foreground)] transition-opacity duration-150\",\n            isSingleLinePendingMessage\n              ? \"right-3 top-1/2 -translate-y-1/2\"\n              : \"right-3 bottom-2.5\",\n            showStopButton ? \"opacity-100\" : \"pointer-events-none opacity-0\",\n          )}\n        >\n          <PendingStopIcon className=\"block h-7 w-7 max-w-none\" />\n        </button>\n      ) : null}\n\n      {isCollapsed ? (\n        <button\n          type=\"button\"\n          data-testid=\"chat-message-expand\"\n          aria-expanded={false}\n          aria-label={t(I18nKey.COMMON$VIEW_MORE)}\n          className=\"absolute inset-0 z-[1] cursor-pointer rounded-xl border-0 bg-transparent p-0\"\n          onClick={() => setIsExpanded(true)}\n        />\n      ) : null}\n\n      {children}\n    </article>\n  );\n\n  if (type === \"user\" && pendingStatus === \"error\") {\n    return (\n      <div className=\"flex w-fit max-w-full flex-col items-end gap-1.5 self-end last:mb-4\">\n        {messageBubble}\n        <div\n          role=\"alert\"\n          data-testid=\"chat-message-error\"\n          className=\"flex items-center gap-2 text-xs text-[var(--oh-status-error)]\"\n        >\n          <span>{t(I18nKey.CHAT_INTERFACE$MESSAGE_SEND_FAILED)}</span>\n          {onRetry ? (\n            <button\n              type=\"button\"\n              onClick={onRetry}\n              className=\"cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\"\n              data-testid=\"chat-message-retry\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  if (type === \"user\" && pendingStatus === \"sending\") {\n    return (\n      <div className=\"flex w-full max-w-full flex-col last:mb-4\">\n        {messageBubble}\n        <div className=\"my-1 w-full py-1 text-sm\">\n          <TextShimmer\n            as=\"p\"\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"chat-message-sending\"\n            className=\"block w-full text-sm font-normal\"\n            duration={1}\n            spread={2}\n          >\n            {t(I18nKey.CHAT_INTERFACE$MESSAGE_SENDING)}\n          </TextShimmer>\n        </div>\n      </div>\n    );\n  }\n\n  return messageBubble;\n}\n"],"mappings":"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"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"chat-input-actions.cjs","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.cjs","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":"wxDA6CA,SAAgB,EAAiB,CAC/B,WACA,YAAY,GACZ,sBAAuB,GACvB,cAAa,GACb,kBAAkB,GAClB,oBAAqB,IACG,CACxB,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,GAAuB,GAAA,6BAA6B,CACpD,EAA4B,GAAA,sBAAsB,CAClD,GAA6B,GAAA,uBAAuB,CACpD,CAAE,kBAAmB,EAAA,2BAA2B,CAChD,CAAE,YAAY,EAAA,kBAAkB,CAChC,EAAU,GAAQ,OAAS,QAC3B,EAAa,GAAA,wBAAwB,CACrC,EAAwB,EACxB,GAAkB,GAAA,2BAA2B,CAC7C,CAAE,kBAAkB,GAAA,eAAe,CACnC,CAAE,oBAAkB,uBAAwB,EAAA,sBAAsB,CAClE,CAAE,kBAAiB,0BAA2B,GAAA,oBAAoB,CAElE,EAAgB,EAAA,QAAM,OAAuB,KAAK,CAClD,EAAkB,EAAA,QAAM,OAAuB,KAAK,CACpD,EAAa,EAAA,QAAM,OAAuB,KAAK,CAC/C,EAAU,EAAA,QAAM,OAAuB,KAAK,CAC5C,EAAW,EAAA,QAAM,OAAuB,KAAK,CAC7C,EAAqB,EAAA,QAAM,OAA0B,KAAK,CAC1D,CAAC,EAAiB,IAAsB,EAAA,QAAM,SAClD,IACD,CACK,CAAC,GAAmB,IAAwB,EAAA,QAAM,SAAS,EAAE,CAC7D,CAAC,GAAc,IAAmB,EAAA,QAAM,SAAS,GAAG,CACpD,CAAC,EAAW,IAAgB,EAAA,QAAM,SAAS,GAAG,CAC9C,CAAC,EAAY,GAAiB,EAAA,QAAM,SAAS,IAAI,CACjD,CAAC,EAAgB,GAAqB,EAAA,QAAM,SAAS,GAAM,CAC3D,CAAC,EAAe,GAAoB,EAAA,QAAM,SAE9C,KAAK,CACD,CAAC,EAAqB,IAC1B,EAAA,QAAM,UAA+B,CAEvC,EAAA,QAAM,cAAgB,CACpB,IAAM,EAAQ,EAAc,QACtB,EAAU,EAAgB,QAC1B,EAAQ,EAAW,QACnB,EAAS,EAAQ,QACjB,EAAU,EAAS,QAEzB,GACE,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACA,GAAyB,CAAC,GAC3B,OAAO,eAAmB,IAE1B,OAGF,IAAM,MAAmB,CACvB,IAAM,EAAe,EAAM,uBAAuB,CAAC,MAC7C,EAAiB,EAAQ,uBAAuB,CAAC,MACjD,EAAe,EAAM,uBAAuB,CAAC,MAC7C,EAAiB,EAAQ,uBAAuB,CAAC,MAOvD,GALI,EAAe,GAAG,GAAmB,EAAa,CAClD,EAAiB,GAAG,GAAqB,EAAe,CACxD,EAAe,GAAG,GAAgB,EAAa,CAC/C,EAAiB,GAAG,EAAc,EAAe,CAEjD,EAAQ,CACV,IAAM,EAAgB,EAAO,uBAAuB,CAAC,MACjD,EAAgB,GAAG,GAAa,EAAc,GAIhD,EAAW,IAAI,mBAAqB,CACxC,GAAY,EACZ,CAYF,OAVA,EAAS,QAAQ,EAAM,CACvB,EAAS,QAAQ,EAAQ,CACzB,EAAS,QAAQ,EAAM,CACvB,EAAS,QAAQ,EAAQ,CACrB,GACF,EAAS,QAAQ,EAAO,CAG1B,GAAY,KAEC,EAAS,YAAY,EACjC,CAAC,EAAsB,CAAC,CAE3B,IAAM,OAAyB,CACxB,GACL,EAA0B,OAAO,CAAE,iBAAgB,CAAC,EAGhD,OAA+B,CAC9B,GACL,GAA2B,OAAO,CAAE,iBAAgB,CAAC,EAGjD,GACJ,GAAqB,WAAa,EAA0B,UAMxD,EAAmB,EAAA,QAAM,YAC5B,GAA2B,CAC1B,IAAI,EAAY,EACV,EAAO,CACX,eAAgB,GAChB,gBAAiB,GAClB,CAWD,OATI,GAAyB,GAAa,IACxC,EAAK,eAAiB,GACtB,GAAa,EAAY,IAGvB,GAAa,IACf,EAAK,gBAAkB,IAGlB,GAET,CAAC,EAAuB,EAAW,EAAW,CAC/C,CAEK,EACJ,EAAkB,GAAoB,EAAW,GAAe,GAE5D,EAAqB,EAAiB,EAAc,CAKpD,GAHH,CAAC,GAAyB,EAAmB,iBAC9C,EAAmB,gBAGjB,EACA,EAAiB,EAAgB,GAAwB,GAAW,CAElE,EAAkB,EAEpB,EAAgB,eADhB,GAEE,EAAkB,EAAgB,gBAElC,GAAwB,GAAmB,IAE3C,EAEH,GAAyB,CAAC,GAC3B,CAAC,EAEH,EAAA,QAAM,cAAgB,CACf,IACH,EAAkB,GAAM,CACxB,EAAiB,KAAK,GAEvB,CAAC,EAAiB,CAAC,CAEtB,IAAM,GAAkB,GAAA,2BAA+C,CACrE,EAAkB,GAAM,CACxB,EAAiB,KAAK,EACtB,CAEI,EACJ,KAAkB,EAAA,WAAW,SAC7B,GACA,KAAoB,OAEhB,MAA2B,CAC/B,EAAiB,KAAK,CACtB,EAAkB,GAAM,EAG1B,EAAA,QAAM,oBAAsB,CAC1B,GAAI,CAAC,GAAkB,CAAC,EAAmB,QACzC,OAGF,IAAM,EAAU,EAAmB,QAE7B,MAAuB,CAC3B,IAAM,EAAO,EAAQ,uBAAuB,CAE5C,GAAuB,CACrB,SAAU,QACV,IAAK,EAAK,IAAM,EAChB,KAAM,EAAK,KACX,UAAW,oBACX,OAAQ,KACT,CAAC,EAOJ,OAJA,GAAgB,CAChB,OAAO,iBAAiB,SAAU,EAAe,CACjD,OAAO,iBAAiB,SAAU,EAAgB,GAAK,KAE1C,CACX,OAAO,oBAAoB,SAAU,EAAe,CACpD,OAAO,oBAAoB,SAAU,EAAgB,GAAK,GAE3D,CAAC,EAAe,CAAC,CAEpB,IAAM,IACJ,EAAA,EAAA,MAAC,EAAA,YAAD,CACE,IAAK,GACL,OAAO,2BACP,SAAS,MACT,UAAU,OACV,UAAU,sGALZ,CAOG,GAAyB,CAAC,IACzB,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,yCAAf,EACE,EAAA,EAAA,KAAC,EAAA,oBAAD,CACE,OAAO,wBACP,YACE,EAAkB,GAChB,IAAY,QAAU,KAAO,QAC9B,CAEH,WAAY,YAEZ,EAAA,EAAA,KAAC,EAAA,yBAAD,CACE,MAAM,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,UAAU,oBAAsB,CAAA,CACpD,KAEM,EADJ,KAAqB,OACf,EAAA,QAAQ,YACR,EAAA,QAAQ,YAAY,CAE5B,WAAW,EAAA,EAAA,KAAC,EAAA,QAAD,CAAqB,MAAO,GAAI,OAAQ,GAAM,CAAA,CACzD,CAAA,CACkB,CAAA,CACrB,CAAC,IACA,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,kHACA,2HACA,4DACA,IAAkB,SAChB,0CACH,WAED,EAAA,EAAA,MAAC,EAAA,YAAD,CACE,OAAO,yBACP,UAAU,0CAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,oBAAD,CACE,OAAO,sBACP,QAAU,GAAU,CAClB,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,EAAoB,OAAO,CAC3B,GAAoB,YAGtB,EAAA,EAAA,KAAC,EAAA,yBAAD,CACE,MAAM,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,UAAU,oBAAsB,CAAA,CACpD,KAAM,EAAE,EAAA,QAAQ,YAAY,CAC5B,CAAA,CACkB,CAAA,EACtB,EAAA,EAAA,KAAC,EAAA,oBAAD,CACE,OAAO,sBACP,QAAU,GAAU,CAClB,EAAgB,EAAM,CACtB,GAAoB,YAGtB,EAAA,EAAA,KAAC,EAAA,yBAAD,CACE,MACE,EAAA,EAAA,KAAC,GAAA,QAAD,CACE,MAAO,GACP,OAAQ,GACR,MAAM,eACN,CAAA,CAEJ,KAAM,EAAE,EAAA,QAAQ,YAAY,CAC5B,CAAA,CACkB,CAAA,CACV,GACV,CAAA,CAEJ,GAEP,CAAC,IACA,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,yCAAf,EACE,EAAA,EAAA,KAAC,EAAA,oBAAD,CACE,OAAO,wBACP,YACE,EAAkB,GAChB,IAAY,QAAU,KAAO,QAC9B,WAGH,EAAA,EAAA,KAAC,EAAA,yBAAD,CACE,MAAM,EAAA,EAAA,KAAC,EAAA,IAAD,CAAK,MAAO,GAAI,OAAQ,GAAI,YAAa,EAAG,cAAA,GAAc,CAAA,CAChE,KAAK,QACL,WAAW,EAAA,EAAA,KAAC,EAAA,QAAD,CAAqB,MAAO,GAAI,OAAQ,GAAM,CAAA,CACzD,CAAA,CACkB,CAAA,EACtB,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,kHACA,2HACA,4DACA,IAAkB,SAChB,0CACH,WAOD,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAO,yBACP,UAAU,2EAEV,EAAA,EAAA,KAAC,EAAA,0BAAD,CACE,MAAO,EACP,QAAS,EACT,aAAa,OACb,sBAAuB,EAAA,GACrB,QACA,EAAA,+BACD,CACD,sBAAuB,EAAA,GACrB,iEACA,EAAA,+BACD,CACD,CAAA,CACU,CAAA,CACV,CAAA,CACF,GAEI,GAGhB,OACE,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAU,kEAFZ,EAIE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,4CACb,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,2CAAf,EACE,EAAA,EAAA,KAAC,MAAD,CAAK,IAAK,EAAY,UAAW,EAAA,GAAG,GAA+B,WACjE,EAAA,EAAA,KAAC,GAAA,kBAAD,CACY,WACV,oBAAqB,GACrB,CAAA,CACE,CAAA,CACL,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,IAAK,EAAS,UAAW,EAAA,GAAG,CAAC,GAAkB,SAAS,WAC3D,EAAA,EAAA,KAAC,GAAA,kBAAD,EAAqB,CAAA,CACjB,CAAA,EAER,EAAA,EAAA,KAAC,MAAD,CAAK,IAAK,EAAU,UAAW,EAAA,GAAG,CAAC,GAAmB,SAAS,UAC5D,GAAW,EAAW,cACrB,EAAA,EAAA,KAAC,EAAA,eAAD,EAAkB,CAAA,EAElB,EAAA,EAAA,KAAC,GAAA,oBAAD,EAAuB,CAAA,CAErB,CAAA,CAEL,IACC,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,6BAAf,EACE,EAAA,EAAA,KAAC,SAAD,CACE,IAAK,EACL,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,6BAA8B,SAAS,CACrD,aAAW,qBACX,gBAAe,EACf,gBAAc,OACd,QAAU,GAAU,CAClB,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,EAAmB,GAAS,CAAC,EAAK,YAGpC,EAAA,EAAA,KAAC,GAAA,QAAD,CACE,MAAO,GACP,OAAQ,GACR,MAAM,eACN,CAAA,CACK,CAAA,CAER,GACC,OAAO,SAAa,KACpB,GACA,EAAA,QAAS,cACP,EAAA,EAAA,KAAC,MAAD,CAAK,MAAO,WAAsB,GAAmB,CAAA,CACrD,SAAS,KACV,CACC,GAEJ,GACF,CAAA,EACN,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAU,oDAFZ,CAIG,IAAyB,IACxB,EAAA,EAAA,KAAC,GAAA,QAAD,CACE,WAAY,GACZ,kBAAmB,GACT,WACC,aACX,CAAA,CAEH,KACC,EAAA,EAAA,KAAC,GAAA,eAAD,CACmB,kBACH,gBACd,SAAU,GAAY,CAAC,EACvB,CAAA,CAEA,GACF"}