@openhands/agent-canvas 1.15.0 → 1.17.0

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

@@ -4,146 +4,155 @@ 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 { TextShimmer as o } from "../../shared/text-shimmer.js";
-import { PendingStopIcon as s } from "./pending-stop-icon.js";
-import { UserMessageBody as c, chatBubbleMarkdownComponents as l } from "./user-message-body.js";
-import u from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { formatEventTimestamp as o } from "../../../utils/format-event-timestamp.js";
+import { TextShimmer as s } from "../../shared/text-shimmer.js";
+import { PendingStopIcon as c } from "./pending-stop-icon.js";
+import { UserMessageBody as l, chatBubbleMarkdownComponents as u } from "./user-message-body.js";
+import d from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/features/chat/chat-message.tsx
-function p({ type: p, message: m, children: h, actions: g, isFromPlanningAgent: _ = !1, pendingStatus: v, onRetry: y, onDismiss: b, onStop: x }) {
-	let { t: S } = e("openhands"), [C, w] = u.useState(!1), [T, E] = u.useState(!1), [D, O] = u.useState(!1), [k, A] = u.useState(!1), [j, M] = u.useState(!0), N = u.useRef(null);
-	u.useEffect(() => {
-		O(!1);
-	}, [m]);
-	let P = async () => {
-		await navigator.clipboard.writeText(m), E(!0);
+function m({ type: m, message: h, children: g, actions: _, isFromPlanningAgent: v = !1, pendingStatus: y, onRetry: b, onDismiss: x, onStop: S, timestamp: C }) {
+	let { t: w, i18n: T } = e("openhands"), [E, D] = d.useState(!1), [O, k] = d.useState(!1), [A, j] = d.useState(!1), [M, N] = d.useState(!1), [P, F] = d.useState(!0), I = d.useRef(null), L = o(C, T?.language);
+	d.useEffect(() => {
+		j(!1);
+	}, [h]);
+	let R = async () => {
+		await navigator.clipboard.writeText(h), k(!0);
 	};
-	u.useEffect(() => {
+	d.useEffect(() => {
 		let e;
-		return T && (e = setTimeout(() => {
-			E(!1);
+		return O && (e = setTimeout(() => {
+			k(!1);
 		}, 2e3)), () => {
 			clearTimeout(e);
 		};
-	}, [T]);
-	let F = p === "user" && (v === "error" || v === "sending"), I = v === "sending" && x != null, L = I && C, R = p === "user" && v == null, z = R && k && !D, B = u.Children.count(h) > 0;
-	u.useLayoutEffect(() => {
-		if (!I || R) return;
-		let e = N.current;
+	}, [O]);
+	let z = m === "user" && (y === "error" || y === "sending"), B = y === "sending" && S != null, V = B && E, H = m === "user" && y == null, U = H && M && !A, W = d.Children.count(g) > 0;
+	d.useLayoutEffect(() => {
+		if (!B || H) return;
+		let e = I.current;
 		if (!e) return;
 		let t = () => {
 			let t = Number.parseFloat(getComputedStyle(e).lineHeight), n = Number.isFinite(t) && t > 0 ? t : 24;
-			M(e.scrollHeight <= n + 1);
+			F(e.scrollHeight <= n + 1);
 		};
 		t();
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
 	}, [
-		m,
-		I,
-		R
+		h,
+		B,
+		H
 	]);
-	let V = R ? /* @__PURE__ */ d(c, {
-		message: m,
-		isHovering: C,
-		isExpanded: D,
-		onTruncatableChange: A
-	}) : /* @__PURE__ */ d("div", {
-		ref: N,
+	let G = H ? /* @__PURE__ */ f(l, {
+		message: h,
+		isHovering: E,
+		isExpanded: A,
+		onTruncatableChange: N
+	}) : /* @__PURE__ */ f("div", {
+		ref: I,
 		className: "min-w-0 text-sm leading-6 whitespace-normal [word-break:break-word]",
-		children: /* @__PURE__ */ d(i, {
+		children: /* @__PURE__ */ f(i, {
 			includeStandard: !0,
 			includeHeadings: !0,
-			allowHtml: p !== "user",
-			components: l,
-			children: m
+			allowHtml: m !== "user",
+			components: u,
+			children: h
 		})
-	}), H = /* @__PURE__ */ f("article", {
-		"data-testid": `${p}-message`,
-		"data-pending-status": v,
-		onMouseEnter: () => w(!0),
-		onMouseLeave: () => w(!1),
-		className: n("rounded-xl relative w-fit max-w-full flex flex-col", B && "gap-2", p === "user" && "mt-6 bg-tertiary self-end px-4 py-2.5", p === "agent" && "mt-6 w-full max-w-full bg-transparent", _ && p === "agent" && "border border-[#597ff4] bg-tertiary p-4 mt-2", v === "error" && "border border-[var(--oh-status-error)]/40", !F && "last:mb-4"),
+	}), K = /* @__PURE__ */ p("article", {
+		"data-testid": `${m}-message`,
+		"data-pending-status": y,
+		onMouseEnter: () => D(!0),
+		onMouseLeave: () => D(!1),
+		className: n("rounded-xl relative w-fit max-w-full flex flex-col", W && "gap-2", m === "user" && "mt-6 bg-tertiary self-end px-4 py-2.5", m === "agent" && "mt-6 w-full max-w-full bg-transparent", v && m === "agent" && "border border-[#597ff4] bg-tertiary p-4 mt-2", y === "error" && "border border-[var(--oh-status-error)]/40", !z && "last:mb-4"),
 		children: [
-			/* @__PURE__ */ f("div", {
-				className: n("absolute -top-2.5 -right-2.5 z-10", !C || v === "sending" ? "hidden" : "flex", "items-center gap-1"),
+			/* @__PURE__ */ p("div", {
+				className: n("absolute -top-2.5 -right-2.5 z-10", !E || y === "sending" ? "hidden" : "flex", "items-center gap-1"),
 				onClick: (e) => e.stopPropagation(),
-				children: [g?.map((e, t) => e.tooltip ? /* @__PURE__ */ d(a, {
+				children: [_?.map((e, t) => e.tooltip ? /* @__PURE__ */ f(a, {
 					content: e.tooltip,
 					placement: "top",
-					children: /* @__PURE__ */ d("button", {
+					children: /* @__PURE__ */ f("button", {
 						type: "button",
 						onClick: e.onClick,
 						className: "button-base p-1 cursor-pointer",
 						"aria-label": e.tooltip,
 						children: e.icon
 					})
-				}, t) : /* @__PURE__ */ d("button", {
+				}, t) : /* @__PURE__ */ f("button", {
 					type: "button",
 					onClick: e.onClick,
 					className: "button-base p-1 cursor-pointer",
 					"aria-label": `Action ${t + 1}`,
 					children: e.icon
-				}, t)), /* @__PURE__ */ d(r, {
-					isHidden: !C,
-					isDisabled: T,
-					onClick: P,
-					mode: T ? "copied" : "copy"
+				}, t)), /* @__PURE__ */ f(r, {
+					isHidden: !E,
+					isDisabled: O,
+					onClick: R,
+					mode: O ? "copied" : "copy"
 				})]
 			}),
-			V,
-			I ? /* @__PURE__ */ d("button", {
+			G,
+			B ? /* @__PURE__ */ f("button", {
 				type: "button",
 				onClick: (e) => {
-					e.stopPropagation(), x?.();
+					e.stopPropagation(), S?.();
 				},
 				"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__ */ d(s, { className: "block h-7 w-7 max-w-none" })
+				"aria-label": w(t.BUTTON$STOP),
+				"aria-hidden": !V,
+				tabIndex: V ? 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", P ? "right-3 top-1/2 -translate-y-1/2" : "right-3 bottom-2.5", V ? "opacity-100" : "pointer-events-none opacity-0"),
+				children: /* @__PURE__ */ f(c, { className: "block h-7 w-7 max-w-none" })
 			}) : null,
-			z ? /* @__PURE__ */ d("button", {
+			U ? /* @__PURE__ */ f("button", {
 				type: "button",
 				"data-testid": "chat-message-expand",
 				"aria-expanded": !1,
-				"aria-label": S(t.COMMON$VIEW_MORE),
+				"aria-label": w(t.COMMON$VIEW_MORE),
 				className: "absolute inset-0 z-[1] cursor-pointer rounded-xl border-0 bg-transparent p-0",
-				onClick: () => O(!0)
+				onClick: () => j(!0)
 			}) : null,
-			h
+			g
 		]
-	});
-	return p === "user" && v === "error" ? /* @__PURE__ */ f("div", {
+	}), q = L ? /* @__PURE__ */ f(a, {
+		content: /* @__PURE__ */ f("time", {
+			dateTime: C,
+			children: L
+		}),
+		placement: "top",
+		isOpen: E,
+		children: K
+	}) : K;
+	return m === "user" && y === "error" ? /* @__PURE__ */ p("div", {
 		className: "flex w-fit max-w-full flex-col items-end gap-1.5 self-end last:mb-4",
-		children: [H, /* @__PURE__ */ f("div", {
+		children: [q, /* @__PURE__ */ p("div", {
 			role: "alert",
 			"data-testid": "chat-message-error",
 			className: "flex items-center gap-2 text-xs text-[var(--oh-status-error)]",
 			children: [
-				/* @__PURE__ */ d("span", { children: S(t.CHAT_INTERFACE$MESSAGE_SEND_FAILED) }),
-				y ? /* @__PURE__ */ d("button", {
+				/* @__PURE__ */ f("span", { children: w(t.CHAT_INTERFACE$MESSAGE_SEND_FAILED) }),
+				b ? /* @__PURE__ */ f("button", {
 					type: "button",
-					onClick: y,
+					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)
+					children: w(t.CHAT_INTERFACE$MESSAGE_RETRY)
 				}) : null,
-				b ? /* @__PURE__ */ d("button", {
+				x ? /* @__PURE__ */ f("button", {
 					type: "button",
-					onClick: b,
+					onClick: x,
 					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-dismiss",
-					children: S(t.CHAT_INTERFACE$MESSAGE_DISMISS)
+					children: w(t.CHAT_INTERFACE$MESSAGE_DISMISS)
 				}) : null
 			]
 		})]
-	}) : p === "user" && v === "sending" ? /* @__PURE__ */ f("div", {
+	}) : m === "user" && y === "sending" ? /* @__PURE__ */ p("div", {
 		className: "flex w-full max-w-full flex-col last:mb-4",
-		children: [H, /* @__PURE__ */ d("div", {
+		children: [q, /* @__PURE__ */ f("div", {
 			className: "my-1 w-full py-1 text-sm",
-			children: /* @__PURE__ */ d(o, {
+			children: /* @__PURE__ */ f(s, {
 				as: "p",
 				role: "status",
 				"aria-live": "polite",
@@ -151,12 +160,12 @@ function p({ type: p, message: m, children: h, actions: g, isFromPlanningAgent:
 				className: "block w-full text-sm font-normal",
 				duration: 1,
 				spread: 2,
-				children: S(t.CHAT_INTERFACE$MESSAGE_SENDING)
+				children: w(t.CHAT_INTERFACE$MESSAGE_SENDING)
 			})
 		})]
-	}) : H;
+	}) : q;
 }
 //#endregion
-export { p as ChatMessage };
+export { m 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 { TextShimmer } from \"#/components/shared/text-shimmer\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\nimport { PendingStopIcon } from \"./pending-stop-icon\";\nimport {\n  UserMessageBody,\n  chatBubbleMarkdownComponents,\n  USER_MESSAGE_LINE_HEIGHT_PX,\n} from \"./user-message-body\";\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  onDismiss?: () => 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  onDismiss,\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        allowHtml={type !== \"user\"}\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          {onDismiss ? (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\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-dismiss\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_DISMISS)}\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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"}
+{"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 { formatEventTimestamp } from \"#/utils/format-event-timestamp\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\nimport { PendingStopIcon } from \"./pending-stop-icon\";\nimport {\n  UserMessageBody,\n  chatBubbleMarkdownComponents,\n  USER_MESSAGE_LINE_HEIGHT_PX,\n} from \"./user-message-body\";\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  onDismiss?: () => void;\n  onStop?: () => void;\n  timestamp?: string;\n}\n\nexport function ChatMessage({\n  type,\n  message,\n  children,\n  actions,\n  isFromPlanningAgent = false,\n  pendingStatus,\n  onRetry,\n  onDismiss,\n  onStop,\n  timestamp,\n}: React.PropsWithChildren<ChatMessageProps>) {\n  const { t, i18n } = 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  const timestampLabel = formatEventTimestamp(timestamp, i18n?.language);\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        allowHtml={type !== \"user\"}\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  const messageBubbleWithTimestamp = timestampLabel ? (\n    <StyledTooltip\n      content={<time dateTime={timestamp}>{timestampLabel}</time>}\n      placement=\"top\"\n      isOpen={isHovering}\n    >\n      {messageBubble}\n    </StyledTooltip>\n  ) : (\n    messageBubble\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        {messageBubbleWithTimestamp}\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          {onDismiss ? (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\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-dismiss\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_DISMISS)}\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        {messageBubbleWithTimestamp}\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 messageBubbleWithTimestamp;\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/context-window-meter.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../../i18n/declaration.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/gauge.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/minimize.cjs"),o=require("../../../../utils/utils.cjs"),s=require("../../../../utils/form-control-classes.cjs"),c=require("../../../shared/buttons/styled-tooltip.cjs"),l=require("../../context-menu/context-menu-list-item.cjs"),u=require("../../../../hooks/use-click-outside-element.cjs"),d=require("../../../../ui/divider.cjs"),f=require("../../../../hooks/use-select-conversation-tab.cjs"),p=require("../../../../hooks/use-context-window-usage.cjs"),m=require("../../../../utils/format-token-count.cjs"),h=require("../../../../hooks/use-compact-context-action.cjs"),g=require("../../conversation/conversation-name-context-menu-icon-text.cjs"),_=require("../../conversation/usage-panel/context-meter.cjs"),v=require("./context-window-ring.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");var x={neutral:`bg-foreground`,warning:`bg-amber-500`,danger:`bg-red-500`},S={neutral:`text-[var(--oh-muted)]`,warning:`text-amber-500`,danger:`text-red-500`};function C(){let{t:e}=t.useTranslation(`openhands`),C=p.useContextWindowUsage(),{navigateToTab:w}=f.useSelectConversationTab(),[T,E]=y.default.useState(!1),D=y.default.useRef(null),O=u.useClickOutsideElement(()=>E(!1),D),{handleCompact:k,isCompacting:A,isDisabled:j}=h.useCompactContextAction(C?.perTurnToken??0);if(!C)return null;let M=m.getContextWindowUsagePercentage(C.perTurnToken,C.contextWindow),N=Math.round(M),P=Math.max(0,100-N),F=`${N}% ${e(n.I18nKey.CONVERSATION$USED)} (${P}% ${e(n.I18nKey.CONVERSATION$LEFT)})`,I=`${m.formatCompactTokenCount(C.perTurnToken)} / ${m.formatCompactTokenCount(C.contextWindow)}`,L=_.getContextFillTone(M),R=()=>{E(!1),w(`usage`)};return(0,b.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,b.jsx)(c.StyledTooltip,{content:e(n.I18nKey.CHAT_INTERFACE$SHOW_CONTEXT),placement:`top`,children:(0,b.jsx)(`button`,{ref:D,type:`button`,className:o.cn(s.chatInputIconButtonClassName,`size-8`),"aria-label":`${e(n.I18nKey.CHAT_INTERFACE$CONTEXT_WINDOW_METER_LABEL)}: ${F}`,"aria-expanded":T,"aria-haspopup":`dialog`,"data-testid":`context-window-meter`,onClick:e=>{e.preventDefault(),e.stopPropagation(),E(e=>!e)},children:(0,b.jsx)(v.ContextWindowRing,{percentage:M})})}),T&&(0,b.jsxs)(`div`,{ref:O,"data-testid":`context-window-meter-popover`,className:o.cn(`absolute bottom-full right-0 z-[60] mb-2 w-[280px]`,`flex flex-col gap-0.5 rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg`),children:[(0,b.jsxs)(`div`,{className:`flex flex-col gap-2 px-2 py-1.5`,children:[(0,b.jsxs)(`div`,{className:`flex items-center justify-between gap-2 text-sm`,children:[(0,b.jsx)(`span`,{className:`font-semibold text-[var(--oh-foreground)]`,children:e(n.I18nKey.CONVERSATION$CONTEXT_WINDOW)}),(0,b.jsx)(`span`,{className:o.cn(`shrink-0 text-xs`,S[L]),children:F})]}),(0,b.jsx)(`button`,{type:`button`,"data-testid":`context-window-meter-bar-button`,className:`relative h-1.5 w-full rounded-full cursor-pointer`,style:{backgroundColor:v.CONTEXT_WINDOW_TRACK_COLOR},"aria-label":e(n.I18nKey.COMMON$USAGE),onClick:e=>{e.preventDefault(),e.stopPropagation(),R()},children:(0,b.jsx)(`span`,{className:o.cn(`absolute inset-y-0 left-0 rounded-full transition-all duration-300`,x[L]),style:{width:`${Math.min(100,M)}%`}})}),(0,b.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,b.jsxs)(`button`,{type:`button`,"data-testid":`context-window-compact-button`,disabled:j,"aria-busy":A,"aria-label":e(n.I18nKey.CONVERSATION$COMPACT_CONTEXT),className:o.cn(`inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs`,`text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]`,`transition-colors disabled:cursor-not-allowed disabled:opacity-50`),onClick:e=>{e.preventDefault(),e.stopPropagation(),k()},children:[A?(0,b.jsx)(i.LoaderCircle,{className:`size-3 animate-spin`,"aria-hidden":!0}):(0,b.jsx)(a.Minimize,{className:`size-3`,"aria-hidden":!0}),(0,b.jsx)(`span`,{children:e(n.I18nKey.CONVERSATION$COMPACT_CONTEXT)})]}),(0,b.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,children:I})]})]}),(0,b.jsx)(d.Divider,{inset:`menu`}),(0,b.jsx)(l.ContextMenuListItem,{testId:`context-window-plan-usage`,onClick:e=>{e.preventDefault(),e.stopPropagation(),R()},children:(0,b.jsx)(g.ConversationNameContextMenuIconText,{icon:(0,b.jsx)(r.Gauge,{size:16}),text:e(n.I18nKey.COMMON$USAGE)})})]})]})}exports.ContextWindowMeter=C;
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../../i18n/declaration.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/gauge.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/minimize.cjs"),o=require("../../../../utils/utils.cjs"),s=require("../../../shared/buttons/styled-tooltip.cjs"),c=require("../../../../utils/form-control-classes.cjs"),l=require("../../context-menu/context-menu-list-item.cjs"),u=require("../../../../hooks/use-click-outside-element.cjs"),d=require("../../../../ui/divider.cjs"),f=require("../../../../hooks/use-select-conversation-tab.cjs"),p=require("../../../../hooks/use-context-window-usage.cjs"),m=require("../../../../utils/format-token-count.cjs"),h=require("../../../../hooks/use-compact-context-action.cjs"),g=require("../../conversation/conversation-name-context-menu-icon-text.cjs"),_=require("../../conversation/usage-panel/context-meter.cjs"),v=require("./context-window-ring.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");var x={neutral:`bg-foreground`,warning:`bg-amber-500`,danger:`bg-red-500`},S={neutral:`text-[var(--oh-muted)]`,warning:`text-amber-500`,danger:`text-red-500`};function C(){let{t:e}=t.useTranslation(`openhands`),C=p.useContextWindowUsage(),{navigateToTab:w}=f.useSelectConversationTab(),[T,E]=y.default.useState(!1),D=y.default.useRef(null),O=u.useClickOutsideElement(()=>E(!1),D),{handleCompact:k,isCompacting:A,isDisabled:j}=h.useCompactContextAction(C?.perTurnToken??0);if(!C)return null;let M=m.getContextWindowUsagePercentage(C.perTurnToken,C.contextWindow),N=Math.round(M),P=Math.max(0,100-N),F=`${N}% ${e(n.I18nKey.CONVERSATION$USED)} (${P}% ${e(n.I18nKey.CONVERSATION$LEFT)})`,I=`${m.formatCompactTokenCount(C.perTurnToken)} / ${m.formatCompactTokenCount(C.contextWindow)}`,L=_.getContextFillTone(M),R=()=>{E(!1),w(`usage`)};return(0,b.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,b.jsx)(s.StyledTooltip,{content:e(n.I18nKey.CHAT_INTERFACE$SHOW_CONTEXT),placement:`top`,children:(0,b.jsx)(`button`,{ref:D,type:`button`,className:o.cn(c.chatInputIconButtonClassName,`size-8`),"aria-label":`${e(n.I18nKey.CHAT_INTERFACE$CONTEXT_WINDOW_METER_LABEL)}: ${F}`,"aria-expanded":T,"aria-haspopup":`dialog`,"data-testid":`context-window-meter`,onClick:e=>{e.preventDefault(),e.stopPropagation(),E(e=>!e)},children:(0,b.jsx)(v.ContextWindowRing,{percentage:M})})}),T&&(0,b.jsxs)(`div`,{ref:O,"data-testid":`context-window-meter-popover`,className:o.cn(`absolute bottom-full right-0 z-[60] mb-2 w-[280px]`,`flex flex-col gap-0.5 rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg`),children:[(0,b.jsxs)(`div`,{className:`flex flex-col gap-2 px-2 py-1.5`,children:[(0,b.jsxs)(`div`,{className:`flex items-center justify-between gap-2 text-sm`,children:[(0,b.jsx)(`span`,{className:`font-semibold text-[var(--oh-foreground)]`,children:e(n.I18nKey.CONVERSATION$CONTEXT_WINDOW)}),(0,b.jsx)(`span`,{className:o.cn(`shrink-0 text-xs`,S[L]),children:F})]}),(0,b.jsx)(`button`,{type:`button`,"data-testid":`context-window-meter-bar-button`,className:`relative h-1.5 w-full rounded-full cursor-pointer`,style:{backgroundColor:v.CONTEXT_WINDOW_TRACK_COLOR},"aria-label":e(n.I18nKey.COMMON$USAGE),onClick:e=>{e.preventDefault(),e.stopPropagation(),R()},children:(0,b.jsx)(`span`,{className:o.cn(`absolute inset-y-0 left-0 rounded-full transition-all duration-300`,x[L]),style:{width:`${Math.min(100,M)}%`}})}),(0,b.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,b.jsxs)(`button`,{type:`button`,"data-testid":`context-window-compact-button`,disabled:j,"aria-busy":A,"aria-label":e(n.I18nKey.CONVERSATION$COMPACT_CONTEXT),className:o.cn(`inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs`,`text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]`,`transition-colors disabled:cursor-not-allowed disabled:opacity-50`),onClick:e=>{e.preventDefault(),e.stopPropagation(),k()},children:[A?(0,b.jsx)(i.LoaderCircle,{className:`size-3 animate-spin`,"aria-hidden":!0}):(0,b.jsx)(a.Minimize,{className:`size-3`,"aria-hidden":!0}),(0,b.jsx)(`span`,{children:e(n.I18nKey.CONVERSATION$COMPACT_CONTEXT)})]}),(0,b.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,children:I})]})]}),(0,b.jsx)(d.Divider,{inset:`menu`}),(0,b.jsx)(l.ContextMenuListItem,{testId:`context-window-plan-usage`,onClick:e=>{e.preventDefault(),e.stopPropagation(),R()},children:(0,b.jsx)(g.ConversationNameContextMenuIconText,{icon:(0,b.jsx)(r.Gauge,{size:16}),text:e(n.I18nKey.COMMON$USAGE)})})]})]})}exports.ContextWindowMeter=C;
 //# sourceMappingURL=context-window-meter.cjs.map

package/dist/components/features/chat/components/context-window-meter.js

@@ -4,8 +4,8 @@ import { Gauge as n } from "../../../../node_modules/lucide-react/dist/esm/icons
 import { LoaderCircle as r } from "../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
 import { Minimize as i } from "../../../../node_modules/lucide-react/dist/esm/icons/minimize.js";
 import { cn as a } from "../../../../utils/utils.js";
-import { chatInputIconButtonClassName as o } from "../../../../utils/form-control-classes.js";
-import { StyledTooltip as s } from "../../../shared/buttons/styled-tooltip.js";
+import { StyledTooltip as o } from "../../../shared/buttons/styled-tooltip.js";
+import { chatInputIconButtonClassName as s } from "../../../../utils/form-control-classes.js";
 import { ContextMenuListItem as c } from "../../context-menu/context-menu-list-item.js";
 import { useClickOutsideElement as l } from "../../../../hooks/use-click-outside-element.js";
 import { Divider as u } from "../../../../ui/divider.js";
@@ -36,13 +36,13 @@ function T() {
 	};
 	return /* @__PURE__ */ S("div", {
 		className: "relative shrink-0",
-		children: [/* @__PURE__ */ x(s, {
+		children: [/* @__PURE__ */ x(o, {
 			content: T(t.CHAT_INTERFACE$SHOW_CONTEXT),
 			placement: "top",
 			children: /* @__PURE__ */ x("button", {
 				ref: A,
 				type: "button",
-				className: a(o, "size-8"),
+				className: a(s, "size-8"),
 				"aria-label": `${T(t.CHAT_INTERFACE$CONTEXT_WINDOW_METER_LABEL)}: ${R}`,
 				"aria-expanded": O,
 				"aria-haspopup": "dialog",

package/dist/components/features/chat/confirmation-mode-enabled.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../shared/buttons/styled-tooltip.cjs"),r=require("../../../hooks/query/use-settings.cjs"),i=require("../../../icons/lock.cjs");let a=require("react/jsx-runtime");function o(){let{t:o}=e.useTranslation(`openhands`),{data:s}=r.useSettings();return s?.confirmation_mode?(0,a.jsx)(n.StyledTooltip,{closeDelay:100,content:o(t.I18nKey.COMMON$CONFIRMATION_MODE_ENABLED),tooltipClassName:`bg-white text-black hover:bg-transparent`,children:(0,a.jsx)(`div`,{className:`flex items-center justify-center w-[26px] h-[26px] rounded-lg bg-[var(--oh-surface)]`,children:(0,a.jsx)(i.default,{width:15,height:15})})}):null}exports.default=o;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../hooks/query/use-settings.cjs"),r=require("../../shared/buttons/styled-tooltip.cjs"),i=require("../../../icons/lock.cjs");let a=require("react/jsx-runtime");function o(){let{t:o}=e.useTranslation(`openhands`),{data:s}=n.useSettings();return s?.confirmation_mode?(0,a.jsx)(r.StyledTooltip,{closeDelay:100,content:o(t.I18nKey.COMMON$CONFIRMATION_MODE_ENABLED),tooltipClassName:`bg-white text-black hover:bg-transparent`,children:(0,a.jsx)(`div`,{className:`flex items-center justify-center w-[26px] h-[26px] rounded-lg bg-[var(--oh-surface)]`,children:(0,a.jsx)(i.default,{width:15,height:15})})}):null}exports.default=o;
 //# sourceMappingURL=confirmation-mode-enabled.cjs.map

package/dist/components/features/chat/confirmation-mode-enabled.js

@@ -1,13 +1,13 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
-import { StyledTooltip as n } from "../../shared/buttons/styled-tooltip.js";
-import { useSettings as r } from "../../../hooks/query/use-settings.js";
+import { useSettings as n } from "../../../hooks/query/use-settings.js";
+import { StyledTooltip as r } from "../../shared/buttons/styled-tooltip.js";
 import i from "../../../icons/lock.js";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/features/chat/confirmation-mode-enabled.tsx
 function o() {
-	let { t: o } = e("openhands"), { data: s } = r();
-	return s?.confirmation_mode ? /* @__PURE__ */ a(n, {
+	let { t: o } = e("openhands"), { data: s } = n();
+	return s?.confirmation_mode ? /* @__PURE__ */ a(r, {
 		closeDelay: 100,
 		content: o(t.COMMON$CONFIRMATION_MODE_ENABLED),
 		tooltipClassName: "bg-white text-black hover:bg-transparent",

package/dist/components/features/chat/generic-event-message.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../icons/angle-down-solid.cjs"),a=require("../../../icons/angle-up-solid.cjs"),o=require("./success-indicator.cjs"),s=require("../markdown/markdown-renderer.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");function u({title:e,details:u,success:d,initiallyExpanded:f=!1,chevronPosition:p=`after`,titleTrailing:m,titleIcon:h}){let{t:g}=t.useTranslation(`openhands`),[_,v]=c.default.useState(f),y=u?(0,l.jsx)(`button`,{type:`button`,onClick:()=>v(e=>!e),className:`cursor-pointer text-left`,"aria-label":g(_?n.I18nKey.BUTTON$COLLAPSE:n.I18nKey.BUTTON$EXPAND),children:_?(0,l.jsx)(a.default,{className:r.cn(`h-4 w-4 inline fill-[var(--oh-muted)]`,p===`after`?`ml-2`:`mr-2`)}):(0,l.jsx)(i.default,{className:r.cn(`h-4 w-4 inline fill-[var(--oh-muted)]`,p===`after`?`ml-2`:`mr-2`)})}):null;return(0,l.jsxs)(`div`,{className:`flex flex-col gap-1.5 my-1 py-1 text-sm w-full`,children:[(0,l.jsxs)(`div`,{className:`flex items-center justify-between font-normal text-[var(--oh-muted)]`,children:[(0,l.jsxs)(`div`,{className:`flex items-center`,children:[p===`before`&&y,h,(0,l.jsx)(`span`,{children:e}),p===`after`&&y]}),(0,l.jsxs)(`div`,{className:`flex items-center`,children:[m,d&&(0,l.jsx)(o.SuccessIndicator,{status:d})]})]}),_&&(typeof u==`string`?(0,l.jsx)(s.MarkdownRenderer,{children:u}):u)]})}exports.GenericEventMessage=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../icons/angle-down-solid.cjs"),a=require("../../../icons/angle-up-solid.cjs"),o=require("./success-indicator.cjs"),s=require("../markdown/markdown-renderer.cjs"),c=require("../../shared/buttons/styled-tooltip.cjs"),l=require("../../../utils/format-event-timestamp.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");function f({title:e,details:f,success:p,initiallyExpanded:m=!1,chevronPosition:h=`after`,titleTrailing:g,titleIcon:_,timestamp:v}){let{t:y,i18n:b}=t.useTranslation(`openhands`),[x,S]=u.default.useState(m),[C,w]=u.default.useState(!1),[T,E]=u.default.useState(!1),D=l.formatEventTimestamp(v,b?.language),O=f?(0,d.jsx)(`button`,{type:`button`,onClick:e=>{S(e=>!e),e.detail>0&&(w(!1),e.currentTarget.blur())},className:`cursor-pointer text-left`,"aria-label":y(x?n.I18nKey.BUTTON$COLLAPSE:n.I18nKey.BUTTON$EXPAND),children:x?(0,d.jsx)(a.default,{className:r.cn(`h-4 w-4 inline fill-[var(--oh-muted)]`,h===`after`?`ml-2`:`mr-2`)}):(0,d.jsx)(i.default,{className:r.cn(`h-4 w-4 inline fill-[var(--oh-muted)]`,h===`after`?`ml-2`:`mr-2`)})}):null,k=(0,d.jsxs)(`div`,{"data-testid":`generic-event-message-title`,className:`flex items-center`,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1),onFocusCapture:()=>E(!0),onBlurCapture:e=>{e.currentTarget.contains(e.relatedTarget)||E(!1)},children:[h===`before`&&O,_,(0,d.jsx)(`span`,{children:e}),h===`after`&&O]});return(0,d.jsxs)(`div`,{className:`flex flex-col gap-1.5 my-1 py-1 text-sm w-full`,children:[(0,d.jsxs)(`div`,{className:`flex items-center justify-between font-normal text-[var(--oh-muted)]`,children:[D?(0,d.jsx)(c.StyledTooltip,{content:(0,d.jsx)(`time`,{dateTime:v,children:D}),placement:`top`,isOpen:C||T,children:k}):k,(0,d.jsxs)(`div`,{className:`flex items-center`,children:[g,p&&(0,d.jsx)(o.SuccessIndicator,{status:p})]})]}),x&&(typeof f==`string`?(0,d.jsx)(s.MarkdownRenderer,{children:f}):f)]})}exports.GenericEventMessage=f;
 //# sourceMappingURL=generic-event-message.cjs.map

package/dist/components/features/chat/generic-event-message.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"generic-event-message.cjs","names":[],"sources":["../../../../src/components/features/chat/generic-event-message.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport ArrowDown from \"#/icons/angle-down-solid.svg?react\";\nimport ArrowUp from \"#/icons/angle-up-solid.svg?react\";\nimport { SuccessIndicator } from \"./success-indicator\";\nimport { ObservationResultStatus } from \"#/components/conversation-events/chat/event-content-helpers/get-observation-result\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\nimport { cn } from \"#/utils/utils\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface GenericEventMessageProps {\n  title: React.ReactNode;\n  details: string | React.ReactNode;\n  success?: ObservationResultStatus;\n  initiallyExpanded?: boolean;\n  /** Where to place the expand/collapse chevron relative to the title. */\n  chevronPosition?: \"before\" | \"after\";\n  /** Extra content rendered at the end of the title row (right side). */\n  titleTrailing?: React.ReactNode;\n  /** Optional icon rendered before the title text. */\n  titleIcon?: React.ReactNode;\n}\n\nexport function GenericEventMessage({\n  title,\n  details,\n  success,\n  initiallyExpanded = false,\n  chevronPosition = \"after\",\n  titleTrailing,\n  titleIcon,\n}: GenericEventMessageProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [showDetails, setShowDetails] = React.useState(initiallyExpanded);\n\n  const chevron = details ? (\n    <button\n      type=\"button\"\n      onClick={() => setShowDetails((prev) => !prev)}\n      className=\"cursor-pointer text-left\"\n      aria-label={\n        showDetails ? t(I18nKey.BUTTON$COLLAPSE) : t(I18nKey.BUTTON$EXPAND)\n      }\n    >\n      {showDetails ? (\n        <ArrowUp\n          className={cn(\n            \"h-4 w-4 inline fill-[var(--oh-muted)]\",\n            chevronPosition === \"after\" ? \"ml-2\" : \"mr-2\",\n          )}\n        />\n      ) : (\n        <ArrowDown\n          className={cn(\n            \"h-4 w-4 inline fill-[var(--oh-muted)]\",\n            chevronPosition === \"after\" ? \"ml-2\" : \"mr-2\",\n          )}\n        />\n      )}\n    </button>\n  ) : null;\n\n  return (\n    <div className=\"flex flex-col gap-1.5 my-1 py-1 text-sm w-full\">\n      <div className=\"flex items-center justify-between font-normal text-[var(--oh-muted)]\">\n        <div className=\"flex items-center\">\n          {chevronPosition === \"before\" && chevron}\n          {titleIcon}\n          {/* Wrap the title in a span so any whitespace inside Trans-rendered\n              fragments (e.g. \"Editing <path>...</path>\") is preserved by\n              normal inline flow instead of being collapsed between\n              anonymous flex items. */}\n          <span>{title}</span>\n          {chevronPosition === \"after\" && chevron}\n        </div>\n\n        <div className=\"flex items-center\">\n          {titleTrailing}\n          {success && <SuccessIndicator status={success} />}\n        </div>\n      </div>\n\n      {showDetails &&\n        (typeof details === \"string\" ? (\n          <MarkdownRenderer>{details}</MarkdownRenderer>\n        ) : (\n          details\n        ))}\n    </div>\n  );\n}\n"],"mappings":"udAuBA,SAAgB,EAAoB,CAClC,QACA,UACA,UACA,oBAAoB,GACpB,kBAAkB,QAClB,gBACA,aAC2B,CAC3B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAa,GAAkB,EAAA,QAAM,SAAS,CAAiB,EAEhE,EAAU,GACd,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,YAAe,EAAgB,GAAS,CAAC,CAAI,EAC7C,UAAU,2BACV,aACgB,EAAd,EAAgB,EAAA,QAAQ,gBAAqB,EAAA,QAAQ,aAAa,WAGnE,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAW,EAAA,GACT,wCACA,IAAoB,QAAU,OAAS,MACzC,CACD,CAAA,GAED,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAW,EAAA,GACT,wCACA,IAAoB,QAAU,OAAS,MACzC,CACD,CAAA,CAEG,CAAA,EACN,KAEJ,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0DAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,gFAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,6BAAf,CACG,IAAoB,UAAY,EAChC,GAKD,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,CAAY,CAAA,EAClB,IAAoB,SAAW,CAC7B,KAEL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,6BAAf,CACG,EACA,IAAW,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAkB,OAAQ,CAAU,CAAA,CAC7C,GACF,IAEJ,IACE,OAAO,GAAY,UAClB,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAA,SAAmB,CAA0B,CAAA,EAE7C,EAED,GAET"}
+{"version":3,"file":"generic-event-message.cjs","names":[],"sources":["../../../../src/components/features/chat/generic-event-message.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport ArrowDown from \"#/icons/angle-down-solid.svg?react\";\nimport ArrowUp from \"#/icons/angle-up-solid.svg?react\";\nimport { SuccessIndicator } from \"./success-indicator\";\nimport { ObservationResultStatus } from \"#/components/conversation-events/chat/event-content-helpers/get-observation-result\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\nimport { cn } from \"#/utils/utils\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { formatEventTimestamp } from \"#/utils/format-event-timestamp\";\n\ninterface GenericEventMessageProps {\n  title: React.ReactNode;\n  details: string | React.ReactNode;\n  success?: ObservationResultStatus;\n  initiallyExpanded?: boolean;\n  /** Where to place the expand/collapse chevron relative to the title. */\n  chevronPosition?: \"before\" | \"after\";\n  /** Extra content rendered at the end of the title row (right side). */\n  titleTrailing?: React.ReactNode;\n  /** Optional icon rendered before the title text. */\n  titleIcon?: React.ReactNode;\n  timestamp?: string;\n}\n\nexport function GenericEventMessage({\n  title,\n  details,\n  success,\n  initiallyExpanded = false,\n  chevronPosition = \"after\",\n  titleTrailing,\n  titleIcon,\n  timestamp,\n}: GenericEventMessageProps) {\n  const { t, i18n } = useTranslation(\"openhands\");\n  const [showDetails, setShowDetails] = React.useState(initiallyExpanded);\n  const [isHovered, setIsHovered] = React.useState(false);\n  const [hasFocusWithin, setHasFocusWithin] = React.useState(false);\n  const timestampLabel = formatEventTimestamp(timestamp, i18n?.language);\n\n  const chevron = details ? (\n    <button\n      type=\"button\"\n      onClick={(event) => {\n        setShowDetails((prev) => !prev);\n        if (event.detail > 0) {\n          setIsHovered(false);\n          event.currentTarget.blur();\n        }\n      }}\n      className=\"cursor-pointer text-left\"\n      aria-label={\n        showDetails ? t(I18nKey.BUTTON$COLLAPSE) : t(I18nKey.BUTTON$EXPAND)\n      }\n    >\n      {showDetails ? (\n        <ArrowUp\n          className={cn(\n            \"h-4 w-4 inline fill-[var(--oh-muted)]\",\n            chevronPosition === \"after\" ? \"ml-2\" : \"mr-2\",\n          )}\n        />\n      ) : (\n        <ArrowDown\n          className={cn(\n            \"h-4 w-4 inline fill-[var(--oh-muted)]\",\n            chevronPosition === \"after\" ? \"ml-2\" : \"mr-2\",\n          )}\n        />\n      )}\n    </button>\n  ) : null;\n\n  const titleContent = (\n    <div\n      data-testid=\"generic-event-message-title\"\n      className=\"flex items-center\"\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onFocusCapture={() => setHasFocusWithin(true)}\n      onBlurCapture={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n          setHasFocusWithin(false);\n        }\n      }}\n    >\n      {chevronPosition === \"before\" && chevron}\n      {titleIcon}\n      {/* Wrap the title in a span so any whitespace inside Trans-rendered\n          fragments (e.g. \"Editing <path>...</path>\") is preserved by\n          normal inline flow instead of being collapsed between\n          anonymous flex items. */}\n      <span>{title}</span>\n      {chevronPosition === \"after\" && chevron}\n    </div>\n  );\n\n  const titleContentWithTimestamp = timestampLabel ? (\n    <StyledTooltip\n      content={<time dateTime={timestamp}>{timestampLabel}</time>}\n      placement=\"top\"\n      isOpen={isHovered || hasFocusWithin}\n    >\n      {titleContent}\n    </StyledTooltip>\n  ) : (\n    titleContent\n  );\n\n  const titleRow = (\n    <div className=\"flex items-center justify-between font-normal text-[var(--oh-muted)]\">\n      {titleContentWithTimestamp}\n      <div className=\"flex items-center\">\n        {titleTrailing}\n        {success && <SuccessIndicator status={success} />}\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5 my-1 py-1 text-sm w-full\">\n      {titleRow}\n      {showDetails &&\n        (typeof details === \"string\" ? (\n          <MarkdownRenderer>{details}</MarkdownRenderer>\n        ) : (\n          details\n        ))}\n    </div>\n  );\n}\n"],"mappings":"mkBA0BA,SAAgB,EAAoB,CAClC,QACA,UACA,UACA,oBAAoB,GACpB,kBAAkB,QAClB,gBACA,YACA,aAC2B,CAC3B,GAAM,CAAE,IAAG,QAAS,EAAA,eAAe,WAAW,EACxC,CAAC,EAAa,GAAkB,EAAA,QAAM,SAAS,CAAiB,EAChE,CAAC,EAAW,GAAgB,EAAA,QAAM,SAAS,EAAK,EAChD,CAAC,EAAgB,GAAqB,EAAA,QAAM,SAAS,EAAK,EAC1D,EAAiB,EAAA,qBAAqB,EAAW,GAAM,QAAQ,EAE/D,EAAU,GACd,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAU,GAAU,CAClB,EAAgB,GAAS,CAAC,CAAI,EAC1B,EAAM,OAAS,IACjB,EAAa,EAAK,EAClB,EAAM,cAAc,KAAK,EAE7B,EACA,UAAU,2BACV,aACgB,EAAd,EAAgB,EAAA,QAAQ,gBAAqB,EAAA,QAAQ,aAAa,WAGnE,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAW,EAAA,GACT,wCACA,IAAoB,QAAU,OAAS,MACzC,CACD,CAAA,GAED,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAW,EAAA,GACT,wCACA,IAAoB,QAAU,OAAS,MACzC,CACD,CAAA,CAEG,CAAA,EACN,KAEE,GACJ,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,8BACZ,UAAU,oBACV,iBAAoB,EAAa,EAAI,EACrC,iBAAoB,EAAa,EAAK,EACtC,mBAAsB,EAAkB,EAAI,EAC5C,cAAgB,GAAU,CACnB,EAAM,cAAc,SAAS,EAAM,aAAa,GACnD,EAAkB,EAAK,CAE3B,WAVF,CAYG,IAAoB,UAAY,EAChC,GAKD,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,CAAY,CAAA,EAClB,IAAoB,SAAW,CAC7B,IAyBP,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0DAAf,EACG,EAAA,EAAA,MAXF,MAAD,CAAK,UAAU,gFAAf,CAbgC,GAChC,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,SAAS,EAAA,EAAA,KAAC,OAAD,CAAM,SAAU,WAAY,CAAqB,CAAA,EAC1D,UAAU,MACV,OAAQ,GAAa,WAEpB,CACY,CAAA,EAEf,GAME,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,6BAAf,CACG,EACA,IAAW,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAkB,OAAQ,CAAU,CAAA,CAC7C,GACF,EAKF,EACA,IACE,OAAO,GAAY,UAClB,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAA,SAAmB,CAA0B,CAAA,EAE7C,EAED,GAET"}

package/dist/components/features/chat/generic-event-message.d.ts

@@ -11,6 +11,7 @@ interface GenericEventMessageProps {
     titleTrailing?: React.ReactNode;
     /** Optional icon rendered before the title text. */
     titleIcon?: React.ReactNode;
+    timestamp?: string;
 }
-export declare function GenericEventMessage({ title, details, success, initiallyExpanded, chevronPosition, titleTrailing, titleIcon, }: GenericEventMessageProps): React.JSX.Element;
+export declare function GenericEventMessage({ title, details, success, initiallyExpanded, chevronPosition, titleTrailing, titleIcon, timestamp, }: GenericEventMessageProps): React.JSX.Element;
 export {};

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

@@ -5,37 +5,56 @@ import r from "../../../icons/angle-down-solid.js";
 import i from "../../../icons/angle-up-solid.js";
 import { SuccessIndicator as a } from "./success-indicator.js";
 import { MarkdownRenderer as o } from "../markdown/markdown-renderer.js";
-import s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { StyledTooltip as s } from "../../shared/buttons/styled-tooltip.js";
+import { formatEventTimestamp as c } from "../../../utils/format-event-timestamp.js";
+import l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/features/chat/generic-event-message.tsx
-function u({ title: u, details: d, success: f, initiallyExpanded: p = !1, chevronPosition: m = "after", titleTrailing: h, titleIcon: g }) {
-	let { t: _ } = e("openhands"), [v, y] = s.useState(p), b = d ? /* @__PURE__ */ c("button", {
+function f({ title: f, details: p, success: m, initiallyExpanded: h = !1, chevronPosition: g = "after", titleTrailing: _, titleIcon: v, timestamp: y }) {
+	let { t: b, i18n: x } = e("openhands"), [S, C] = l.useState(h), [w, T] = l.useState(!1), [E, D] = l.useState(!1), O = c(y, x?.language), k = p ? /* @__PURE__ */ u("button", {
 		type: "button",
-		onClick: () => y((e) => !e),
+		onClick: (e) => {
+			C((e) => !e), e.detail > 0 && (T(!1), e.currentTarget.blur());
+		},
 		className: "cursor-pointer text-left",
-		"aria-label": _(v ? t.BUTTON$COLLAPSE : t.BUTTON$EXPAND),
-		children: c(v ? i : r, { className: n("h-4 w-4 inline fill-[var(--oh-muted)]", m === "after" ? "ml-2" : "mr-2") })
-	}) : null;
-	return /* @__PURE__ */ l("div", {
+		"aria-label": b(S ? t.BUTTON$COLLAPSE : t.BUTTON$EXPAND),
+		children: u(S ? i : r, { className: n("h-4 w-4 inline fill-[var(--oh-muted)]", g === "after" ? "ml-2" : "mr-2") })
+	}) : null, A = /* @__PURE__ */ d("div", {
+		"data-testid": "generic-event-message-title",
+		className: "flex items-center",
+		onMouseEnter: () => T(!0),
+		onMouseLeave: () => T(!1),
+		onFocusCapture: () => D(!0),
+		onBlurCapture: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || D(!1);
+		},
+		children: [
+			g === "before" && k,
+			v,
+			/* @__PURE__ */ u("span", { children: f }),
+			g === "after" && k
+		]
+	});
+	return /* @__PURE__ */ d("div", {
 		className: "flex flex-col gap-1.5 my-1 py-1 text-sm w-full",
-		children: [/* @__PURE__ */ l("div", {
+		children: [/* @__PURE__ */ d("div", {
 			className: "flex items-center justify-between font-normal text-[var(--oh-muted)]",
-			children: [/* @__PURE__ */ l("div", {
-				className: "flex items-center",
-				children: [
-					m === "before" && b,
-					g,
-					/* @__PURE__ */ c("span", { children: u }),
-					m === "after" && b
-				]
-			}), /* @__PURE__ */ l("div", {
+			children: [O ? /* @__PURE__ */ u(s, {
+				content: /* @__PURE__ */ u("time", {
+					dateTime: y,
+					children: O
+				}),
+				placement: "top",
+				isOpen: w || E,
+				children: A
+			}) : A, /* @__PURE__ */ d("div", {
 				className: "flex items-center",
-				children: [h, f && /* @__PURE__ */ c(a, { status: f })]
+				children: [_, m && /* @__PURE__ */ u(a, { status: m })]
 			})]
-		}), v && (typeof d == "string" ? /* @__PURE__ */ c(o, { children: d }) : d)]
+		}), S && (typeof p == "string" ? /* @__PURE__ */ u(o, { children: p }) : p)]
 	});
 }
 //#endregion
-export { u as GenericEventMessage };
+export { f as GenericEventMessage };
 
 //# sourceMappingURL=generic-event-message.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generic-event-message.js","names":[],"sources":["../../../../src/components/features/chat/generic-event-message.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport ArrowDown from \"#/icons/angle-down-solid.svg?react\";\nimport ArrowUp from \"#/icons/angle-up-solid.svg?react\";\nimport { SuccessIndicator } from \"./success-indicator\";\nimport { ObservationResultStatus } from \"#/components/conversation-events/chat/event-content-helpers/get-observation-result\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\nimport { cn } from \"#/utils/utils\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface GenericEventMessageProps {\n  title: React.ReactNode;\n  details: string | React.ReactNode;\n  success?: ObservationResultStatus;\n  initiallyExpanded?: boolean;\n  /** Where to place the expand/collapse chevron relative to the title. */\n  chevronPosition?: \"before\" | \"after\";\n  /** Extra content rendered at the end of the title row (right side). */\n  titleTrailing?: React.ReactNode;\n  /** Optional icon rendered before the title text. */\n  titleIcon?: React.ReactNode;\n}\n\nexport function GenericEventMessage({\n  title,\n  details,\n  success,\n  initiallyExpanded = false,\n  chevronPosition = \"after\",\n  titleTrailing,\n  titleIcon,\n}: GenericEventMessageProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [showDetails, setShowDetails] = React.useState(initiallyExpanded);\n\n  const chevron = details ? (\n    <button\n      type=\"button\"\n      onClick={() => setShowDetails((prev) => !prev)}\n      className=\"cursor-pointer text-left\"\n      aria-label={\n        showDetails ? t(I18nKey.BUTTON$COLLAPSE) : t(I18nKey.BUTTON$EXPAND)\n      }\n    >\n      {showDetails ? (\n        <ArrowUp\n          className={cn(\n            \"h-4 w-4 inline fill-[var(--oh-muted)]\",\n            chevronPosition === \"after\" ? \"ml-2\" : \"mr-2\",\n          )}\n        />\n      ) : (\n        <ArrowDown\n          className={cn(\n            \"h-4 w-4 inline fill-[var(--oh-muted)]\",\n            chevronPosition === \"after\" ? \"ml-2\" : \"mr-2\",\n          )}\n        />\n      )}\n    </button>\n  ) : null;\n\n  return (\n    <div className=\"flex flex-col gap-1.5 my-1 py-1 text-sm w-full\">\n      <div className=\"flex items-center justify-between font-normal text-[var(--oh-muted)]\">\n        <div className=\"flex items-center\">\n          {chevronPosition === \"before\" && chevron}\n          {titleIcon}\n          {/* Wrap the title in a span so any whitespace inside Trans-rendered\n              fragments (e.g. \"Editing <path>...</path>\") is preserved by\n              normal inline flow instead of being collapsed between\n              anonymous flex items. */}\n          <span>{title}</span>\n          {chevronPosition === \"after\" && chevron}\n        </div>\n\n        <div className=\"flex items-center\">\n          {titleTrailing}\n          {success && <SuccessIndicator status={success} />}\n        </div>\n      </div>\n\n      {showDetails &&\n        (typeof details === \"string\" ? (\n          <MarkdownRenderer>{details}</MarkdownRenderer>\n        ) : (\n          details\n        ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,EAAoB,EAClC,UACA,YACA,YACA,uBAAoB,IACpB,qBAAkB,SAClB,kBACA,gBAC2B;CAC3B,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,CAAC,GAAa,KAAkB,EAAM,SAAS,CAAiB,GAEhE,IAAU,IACd,kBAAC,UAAD;EACE,MAAK;EACL,eAAe,GAAgB,MAAS,CAAC,CAAI;EAC7C,WAAU;EACV,cACgB,EAAd,IAAgB,EAAQ,kBAAqB,EAAQ,aAAa;YAIlE,EADD,IACE,IAOA,GAPD,EACE,WAAW,EACT,yCACA,MAAoB,UAAU,SAAS,MACzC,EACD,CAOA;CAEG,CAAA,IACN;CAEJ,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,MAAoB,YAAY;KAChC;KAKD,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA;KAClB,MAAoB,WAAW;IAC7B;OAEL,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,GACA,KAAW,kBAAC,GAAD,EAAkB,QAAQ,EAAU,CAAA,CAC7C;KACF;MAEJ,MACE,OAAO,KAAY,WAClB,kBAAC,GAAD,EAAA,UAAmB,EAA0B,CAAA,IAE7C,EAED;;AAET"}
+{"version":3,"file":"generic-event-message.js","names":[],"sources":["../../../../src/components/features/chat/generic-event-message.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport ArrowDown from \"#/icons/angle-down-solid.svg?react\";\nimport ArrowUp from \"#/icons/angle-up-solid.svg?react\";\nimport { SuccessIndicator } from \"./success-indicator\";\nimport { ObservationResultStatus } from \"#/components/conversation-events/chat/event-content-helpers/get-observation-result\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\nimport { cn } from \"#/utils/utils\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { formatEventTimestamp } from \"#/utils/format-event-timestamp\";\n\ninterface GenericEventMessageProps {\n  title: React.ReactNode;\n  details: string | React.ReactNode;\n  success?: ObservationResultStatus;\n  initiallyExpanded?: boolean;\n  /** Where to place the expand/collapse chevron relative to the title. */\n  chevronPosition?: \"before\" | \"after\";\n  /** Extra content rendered at the end of the title row (right side). */\n  titleTrailing?: React.ReactNode;\n  /** Optional icon rendered before the title text. */\n  titleIcon?: React.ReactNode;\n  timestamp?: string;\n}\n\nexport function GenericEventMessage({\n  title,\n  details,\n  success,\n  initiallyExpanded = false,\n  chevronPosition = \"after\",\n  titleTrailing,\n  titleIcon,\n  timestamp,\n}: GenericEventMessageProps) {\n  const { t, i18n } = useTranslation(\"openhands\");\n  const [showDetails, setShowDetails] = React.useState(initiallyExpanded);\n  const [isHovered, setIsHovered] = React.useState(false);\n  const [hasFocusWithin, setHasFocusWithin] = React.useState(false);\n  const timestampLabel = formatEventTimestamp(timestamp, i18n?.language);\n\n  const chevron = details ? (\n    <button\n      type=\"button\"\n      onClick={(event) => {\n        setShowDetails((prev) => !prev);\n        if (event.detail > 0) {\n          setIsHovered(false);\n          event.currentTarget.blur();\n        }\n      }}\n      className=\"cursor-pointer text-left\"\n      aria-label={\n        showDetails ? t(I18nKey.BUTTON$COLLAPSE) : t(I18nKey.BUTTON$EXPAND)\n      }\n    >\n      {showDetails ? (\n        <ArrowUp\n          className={cn(\n            \"h-4 w-4 inline fill-[var(--oh-muted)]\",\n            chevronPosition === \"after\" ? \"ml-2\" : \"mr-2\",\n          )}\n        />\n      ) : (\n        <ArrowDown\n          className={cn(\n            \"h-4 w-4 inline fill-[var(--oh-muted)]\",\n            chevronPosition === \"after\" ? \"ml-2\" : \"mr-2\",\n          )}\n        />\n      )}\n    </button>\n  ) : null;\n\n  const titleContent = (\n    <div\n      data-testid=\"generic-event-message-title\"\n      className=\"flex items-center\"\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onFocusCapture={() => setHasFocusWithin(true)}\n      onBlurCapture={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n          setHasFocusWithin(false);\n        }\n      }}\n    >\n      {chevronPosition === \"before\" && chevron}\n      {titleIcon}\n      {/* Wrap the title in a span so any whitespace inside Trans-rendered\n          fragments (e.g. \"Editing <path>...</path>\") is preserved by\n          normal inline flow instead of being collapsed between\n          anonymous flex items. */}\n      <span>{title}</span>\n      {chevronPosition === \"after\" && chevron}\n    </div>\n  );\n\n  const titleContentWithTimestamp = timestampLabel ? (\n    <StyledTooltip\n      content={<time dateTime={timestamp}>{timestampLabel}</time>}\n      placement=\"top\"\n      isOpen={isHovered || hasFocusWithin}\n    >\n      {titleContent}\n    </StyledTooltip>\n  ) : (\n    titleContent\n  );\n\n  const titleRow = (\n    <div className=\"flex items-center justify-between font-normal text-[var(--oh-muted)]\">\n      {titleContentWithTimestamp}\n      <div className=\"flex items-center\">\n        {titleTrailing}\n        {success && <SuccessIndicator status={success} />}\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1.5 my-1 py-1 text-sm w-full\">\n      {titleRow}\n      {showDetails &&\n        (typeof details === \"string\" ? (\n          <MarkdownRenderer>{details}</MarkdownRenderer>\n        ) : (\n          details\n        ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA0BA,SAAgB,EAAoB,EAClC,UACA,YACA,YACA,uBAAoB,IACpB,qBAAkB,SAClB,kBACA,cACA,gBAC2B;CAC3B,IAAM,EAAE,MAAG,YAAS,EAAe,WAAW,GACxC,CAAC,GAAa,KAAkB,EAAM,SAAS,CAAiB,GAChE,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAgB,KAAqB,EAAM,SAAS,EAAK,GAC1D,IAAiB,EAAqB,GAAW,GAAM,QAAQ,GAE/D,IAAU,IACd,kBAAC,UAAD;EACE,MAAK;EACL,UAAU,MAAU;GAElB,AADA,GAAgB,MAAS,CAAC,CAAI,GAC1B,EAAM,SAAS,MACjB,EAAa,EAAK,GAClB,EAAM,cAAc,KAAK;EAE7B;EACA,WAAU;EACV,cACgB,EAAd,IAAgB,EAAQ,kBAAqB,EAAQ,aAAa;YAIlE,EADD,IACE,IAOA,GAPD,EACE,WAAW,EACT,yCACA,MAAoB,UAAU,SAAS,MACzC,EACD,CAOA;CAEG,CAAA,IACN,MAEE,IACJ,kBAAC,OAAD;EACE,eAAY;EACZ,WAAU;EACV,oBAAoB,EAAa,EAAI;EACrC,oBAAoB,EAAa,EAAK;EACtC,sBAAsB,EAAkB,EAAI;EAC5C,gBAAgB,MAAU;GACxB,AAAK,EAAM,cAAc,SAAS,EAAM,aAAa,KACnD,EAAkB,EAAK;EAE3B;YAVF;GAYG,MAAoB,YAAY;GAChC;GAKD,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA;GAClB,MAAoB,WAAW;EAC7B;;CAyBP,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAVA,kBAAC,OAAD;GAAK,WAAU;aAAf,CAbgC,IAChC,kBAAC,GAAD;IACE,SAAS,kBAAC,QAAD;KAAM,UAAU;eAAY;IAAqB,CAAA;IAC1D,WAAU;IACV,QAAQ,KAAa;cAEpB;GACY,CAAA,IAEf,GAME,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,GACA,KAAW,kBAAC,GAAD,EAAkB,QAAQ,EAAU,CAAA,CAC7C;KACF;GAKF,GACA,MACE,OAAO,KAAY,WAClB,kBAAC,GAAD,EAAA,UAAmB,EAA0B,CAAA,IAE7C,EAED;;AAET"}

package/dist/components/features/chat/interactive-chat-box.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../types/agent-state.cjs"),t=require("../../../utils/utils.cjs"),n=require("../../../hooks/use-conversation-id.cjs"),r=require("../../../stores/conversation-store.cjs"),i=require("../../../hooks/query/use-active-conversation.cjs"),a=require("../../../hooks/use-agent-state.cjs"),o=require("./utils/chat-input.utils.cjs"),s=require("../../../hooks/query/use-sub-conversation-task-polling.cjs"),c=require("./custom-chat-input.cjs"),l=require("../../../hooks/chat/use-btw-interceptor.cjs"),u=require("../../../hooks/chat/use-goal-interceptor.cjs"),d=require("../../../hooks/chat/use-model-interceptor.cjs"),f=require("../../../hooks/chat/use-chat-attachment-upload.cjs"),p=require("./git-control-bar.cjs");let m=require("react/jsx-runtime");function h({onSubmit:h,disabled:g=!1,hasStartedConversation:_}){let{images:v,files:y,imagesMarkedUploadAsFile:b,clearAllFiles:x,subConversationTaskId:S}=r.useConversationStore(),{curAgentState:C}=a.useAgentState(),{data:w}=i.useActiveConversation(),{conversationId:T}=n.useOptionalConversationId(),E=T??w?.id??null,{taskStatus:D}=s.useSubConversationTaskPolling(S,w?.id||null),{handleUpload:O}=f.useChatAttachmentUpload(),k=d.useModelInterceptor(E,u.useGoalInterceptor(E,l.useBtwInterceptor(E,e=>{let{imagesToEmbed:t,imagesAsFiles:n}=o.partitionImagesForUpload(v,b);h(e,t,[...y,...n]),x()})));return(0,m.jsxs)(`div`,{"data-testid":`interactive-chat-box`,children:[(0,m.jsx)(c.CustomChatInput,{disabled:g||C===e.AgentState.AWAITING_USER_CONFIRMATION||t.isTaskPolling(D),isNewConversationPending:g,hasStartedConversation:_,onSubmit:k,onFilesPaste:O}),(0,m.jsx)(`div`,{className:`mt-3 pb-3`,children:(0,m.jsx)(p.GitControlBar,{onSuggestionsClick:e=>{k(e)}})})]})}exports.InteractiveChatBox=h;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../types/agent-state.cjs"),t=require("../../../utils/utils.cjs"),n=require("../../../hooks/use-conversation-id.cjs"),r=require("../../../stores/conversation-store.cjs"),i=require("../../../hooks/query/use-active-conversation.cjs"),a=require("../../../hooks/use-agent-state.cjs"),o=require("./utils/chat-input.utils.cjs"),s=require("../../../hooks/query/use-sub-conversation-task-polling.cjs"),c=require("./custom-chat-input.cjs"),l=require("../../../hooks/chat/use-btw-interceptor.cjs"),u=require("../../../hooks/chat/use-goal-interceptor.cjs"),d=require("../../../hooks/chat/use-model-interceptor.cjs"),f=require("../../../hooks/chat/use-plan-mode-interceptor.cjs"),p=require("../../../hooks/chat/use-chat-attachment-upload.cjs"),m=require("./git-control-bar.cjs");let h=require("react/jsx-runtime");function g({onSubmit:g,disabled:_=!1,hasStartedConversation:v}){let{images:y,files:b,imagesMarkedUploadAsFile:x,clearAllFiles:S,subConversationTaskId:C}=r.useConversationStore(),{curAgentState:w}=a.useAgentState(),{data:T}=i.useActiveConversation(),{conversationId:E}=n.useOptionalConversationId(),D=E??T?.id??null,{taskStatus:O}=s.useSubConversationTaskPolling(C,T?.id||null),{handleUpload:k}=p.useChatAttachmentUpload(),A=d.useModelInterceptor(D,u.useGoalInterceptor(D,f.usePlanModeInterceptor(D,w,l.useBtwInterceptor(D,e=>{let{imagesToEmbed:t,imagesAsFiles:n}=o.partitionImagesForUpload(y,x);g(e,t,[...b,...n]),S()}))));return(0,h.jsxs)(`div`,{"data-testid":`interactive-chat-box`,children:[(0,h.jsx)(c.CustomChatInput,{disabled:_||w===e.AgentState.AWAITING_USER_CONFIRMATION||t.isTaskPolling(O),isNewConversationPending:_,hasStartedConversation:v,onSubmit:A,onFilesPaste:k}),(0,h.jsx)(`div`,{className:`mt-3 pb-3`,children:(0,h.jsx)(m.GitControlBar,{onSuggestionsClick:e=>{A(e)}})})]})}exports.InteractiveChatBox=g;
 //# sourceMappingURL=interactive-chat-box.cjs.map