@openhands/agent-canvas 1.12.0 → 1.13.0

package/dist/components/features/conversation/conversation-name-context-menu.js

@@ -1,27 +1,27 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
 import { ExternalLink as n } from "../../../node_modules/lucide-react/dist/esm/icons/external-link.js";
-import { Share2 as r } from "../../../node_modules/lucide-react/dist/esm/icons/share-2.js";
-import { cn as i } from "../../../utils/utils.js";
-import { useActiveBackend as a } from "../../../contexts/active-backend-context.js";
-import { useActiveConversation as ee } from "../../../hooks/query/use-active-conversation.js";
-import o from "../../../icons/copy.js";
-import s from "../../../icons/u-close.js";
-import { ContextMenu as c } from "../../../ui/context-menu.js";
-import { ContextMenuListItem as l } from "../context-menu/context-menu-list-item.js";
-import { useClickOutsideElement as u } from "../../../hooks/use-click-outside-element.js";
-import { Divider as d } from "../../../ui/divider.js";
-import f from "../../../icons/skills.js";
-import p from "../../../icons/fishing-hook.js";
+import { Gauge as r } from "../../../node_modules/lucide-react/dist/esm/icons/gauge.js";
+import { Share2 as i } from "../../../node_modules/lucide-react/dist/esm/icons/share-2.js";
+import { cn as a } from "../../../utils/utils.js";
+import { useActiveBackend as ee } from "../../../contexts/active-backend-context.js";
+import { useActiveConversation as o } from "../../../hooks/query/use-active-conversation.js";
+import s from "../../../icons/copy.js";
+import c from "../../../icons/u-close.js";
+import { ContextMenu as l } from "../../../ui/context-menu.js";
+import { ContextMenuListItem as u } from "../context-menu/context-menu-list-item.js";
+import { useClickOutsideElement as d } from "../../../hooks/use-click-outside-element.js";
+import { Divider as f } from "../../../ui/divider.js";
+import p from "../../../icons/skills.js";
+import m from "../../../icons/fishing-hook.js";
 import te from "../../../icons/u-tools.js";
-import { ArchivedDisabledTooltip as m } from "../context-menu/archived-disabled-tooltip.js";
+import { ArchivedDisabledTooltip as h } from "../context-menu/archived-disabled-tooltip.js";
 import { useIsArchivedConversation as ne } from "../../../hooks/use-is-archived-conversation.js";
-import { useBreakpoint as h } from "../../../hooks/use-breakpoint.js";
-import g from "../../../icons/u-edit.js";
-import _ from "../../../icons/u-download.js";
-import v from "../../../icons/u-credit-card.js";
-import y from "../../../icons/u-delete.js";
-import { ConversationNameContextMenuIconText as b } from "./conversation-name-context-menu-icon-text.js";
+import { ConversationNameContextMenuIconText as g } from "./conversation-name-context-menu-icon-text.js";
+import { useBreakpoint as _ } from "../../../hooks/use-breakpoint.js";
+import v from "../../../icons/u-edit.js";
+import y from "../../../icons/u-download.js";
+import b from "../../../icons/u-delete.js";
 import x from "react";
 import { jsx as S, jsxs as C } from "react/jsx-runtime";
 import w from "react-dom";
@@ -38,13 +38,13 @@ function T({ isPublic: e, onToggle: t, ariaLabel: n }) {
 			onChange: (e) => t(e.target.checked)
 		}), /* @__PURE__ */ S("span", {
 			"aria-hidden": !0,
-			className: i("inline-flex h-3.5 w-7 items-center rounded-full px-0.5 py-px transition-colors duration-200 ease-in-out", e ? "bg-white" : "bg-base-secondary"),
-			children: /* @__PURE__ */ S("span", { className: i("block h-2 w-2 shrink-0 rounded-full transition-transform duration-200 ease-in-out", e ? "translate-x-[calc(1rem-1px)] bg-base-secondary" : "translate-x-px bg-tertiary-light") })
+			className: a("inline-flex h-3.5 w-7 items-center rounded-full px-0.5 py-px transition-colors duration-200 ease-in-out", e ? "bg-white" : "bg-base-secondary"),
+			children: /* @__PURE__ */ S("span", { className: a("block h-2 w-2 shrink-0 rounded-full transition-transform duration-200 ease-in-out", e ? "translate-x-[calc(1rem-1px)] bg-base-secondary" : "translate-x-px bg-tertiary-light") })
 		})]
 	});
 }
 function E({ onClose: E, onRename: D, onDelete: O, onStop: k, onDisplayCost: A, onShowAgentTools: j, onShowSkills: M, onShowHooks: N, onTogglePublic: P, onCopyShareLink: F, onExportTranscript: I, onDownloadConversation: L, shareUrl: R, position: z = "bottom", anchorRef: B }) {
-	let V = h(), { t: H } = e("openhands"), { backend: U } = a(), { data: W } = ee(), G = ne(), K = u(E), q = B?.current ?? null, [J, Y] = x.useState();
+	let V = _(), { t: H } = e("openhands"), { backend: U } = ee(), { data: W } = o(), G = ne(), K = d(E, B), q = B?.current ?? null, [J, Y] = x.useState();
 	x.useLayoutEffect(() => {
 		if (!q) return;
 		let e = () => {
@@ -60,36 +60,36 @@ function E({ onClose: E, onRename: D, onDelete: O, onStop: k, onDisplayCost: A,
 			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
 		};
 	}, [q, z]);
-	let X = !!(j || M || N), re = !!A, ie = !!(k || O), ae = U.kind === "cloud" ? t.COMMON$CLOSE_CONVERSATION_STOP_RUNTIME : t.COMMON$STOP_CONVERSATION, oe = U.kind === "cloud" && !!P, Z = W?.public || !1, Q = !!q, $ = /* @__PURE__ */ C(c, {
+	let X = !!(j || M || N), re = !!A, ie = !!(k || O), ae = U.kind === "cloud" ? t.COMMON$CLOSE_CONVERSATION_STOP_RUNTIME : t.COMMON$STOP_CONVERSATION, oe = U.kind === "cloud" && !!P, Z = W?.public || !1, Q = !!q, $ = /* @__PURE__ */ C(l, {
 		ref: K,
 		testId: "conversation-name-context-menu",
 		position: z,
 		alignment: "left",
-		className: i(V ? "right-0 translate-x-[34%] left-auto" : "", Q ? "!static !top-auto !bottom-auto !left-auto !right-auto !mt-0" : ""),
+		className: a(V ? "right-0 translate-x-[34%] left-auto" : "", Q ? "!static !top-auto !bottom-auto !left-auto !right-auto !mt-0" : ""),
 		children: [
-			D && /* @__PURE__ */ S(l, {
+			D && /* @__PURE__ */ S(u, {
 				testId: "rename-button",
 				onClick: D,
-				children: /* @__PURE__ */ S(b, {
-					icon: /* @__PURE__ */ S(g, {
+				children: /* @__PURE__ */ S(g, {
+					icon: /* @__PURE__ */ S(v, {
 						width: 16,
 						height: 16
 					}),
 					text: H(t.BUTTON$RENAME)
 				})
 			}),
-			X && /* @__PURE__ */ S(d, {
+			X && /* @__PURE__ */ S(f, {
 				testId: "separator-tools",
 				inset: "menu"
 			}),
-			M && /* @__PURE__ */ S(m, {
+			M && /* @__PURE__ */ S(h, {
 				isDisabled: G,
-				children: /* @__PURE__ */ S(l, {
+				children: /* @__PURE__ */ S(u, {
 					testId: "show-skills-button",
 					onClick: M,
 					isDisabled: G,
-					children: /* @__PURE__ */ S(b, {
-						icon: /* @__PURE__ */ S(f, {
+					children: /* @__PURE__ */ S(g, {
+						icon: /* @__PURE__ */ S(p, {
 							width: 16,
 							height: 16,
 							className: "stroke-[1.75]",
@@ -99,14 +99,14 @@ function E({ onClose: E, onRename: D, onDelete: O, onStop: k, onDisplayCost: A,
 					})
 				})
 			}),
-			N && /* @__PURE__ */ S(m, {
+			N && /* @__PURE__ */ S(h, {
 				isDisabled: G,
-				children: /* @__PURE__ */ S(l, {
+				children: /* @__PURE__ */ S(u, {
 					testId: "show-hooks-button",
 					onClick: N,
 					isDisabled: G,
-					children: /* @__PURE__ */ S(b, {
-						icon: /* @__PURE__ */ S(p, {
+					children: /* @__PURE__ */ S(g, {
+						icon: /* @__PURE__ */ S(m, {
 							width: 16,
 							height: 16,
 							"aria-hidden": !0
@@ -115,13 +115,13 @@ function E({ onClose: E, onRename: D, onDelete: O, onStop: k, onDisplayCost: A,
 					})
 				})
 			}),
-			j && /* @__PURE__ */ S(m, {
+			j && /* @__PURE__ */ S(h, {
 				isDisabled: G,
-				children: /* @__PURE__ */ S(l, {
+				children: /* @__PURE__ */ S(u, {
 					testId: "show-agent-tools-button",
 					onClick: j,
 					isDisabled: G,
-					children: /* @__PURE__ */ S(b, {
+					children: /* @__PURE__ */ S(g, {
 						icon: /* @__PURE__ */ S(te, {
 							width: 16,
 							height: 16
@@ -130,40 +130,37 @@ function E({ onClose: E, onRename: D, onDelete: O, onStop: k, onDisplayCost: A,
 					})
 				})
 			}),
-			I && /* @__PURE__ */ S(l, {
+			I && /* @__PURE__ */ S(u, {
 				testId: "export-transcript-button",
 				onClick: I,
-				children: /* @__PURE__ */ S(b, {
-					icon: /* @__PURE__ */ S(_, {
+				children: /* @__PURE__ */ S(g, {
+					icon: /* @__PURE__ */ S(y, {
 						width: 16,
 						height: 16
 					}),
 					text: H(t.BUTTON$EXPORT_TRANSCRIPT)
 				})
 			}),
-			L && /* @__PURE__ */ S(l, {
+			L && /* @__PURE__ */ S(u, {
 				testId: "download-trajectory-button",
 				onClick: L,
-				children: /* @__PURE__ */ S(b, {
-					icon: /* @__PURE__ */ S(_, {
+				children: /* @__PURE__ */ S(g, {
+					icon: /* @__PURE__ */ S(y, {
 						width: 16,
 						height: 16
 					}),
 					text: H(t.BUTTON$DOWNLOAD_CONVERSATION_DATA)
 				})
 			}),
-			(re || ie) && /* @__PURE__ */ S(d, {
+			(re || ie) && /* @__PURE__ */ S(f, {
 				testId: "separator-info-control",
 				inset: "menu"
 			}),
-			A && /* @__PURE__ */ S(l, {
+			A && /* @__PURE__ */ S(u, {
 				testId: "display-cost-button",
 				onClick: A,
-				children: /* @__PURE__ */ S(b, {
-					icon: /* @__PURE__ */ S(v, {
-						width: 16,
-						height: 16
-					}),
+				children: /* @__PURE__ */ S(g, {
+					icon: /* @__PURE__ */ S(r, { size: 16 }),
 					text: H(t.BUTTON$DISPLAY_COST)
 				})
 			}),
@@ -173,7 +170,7 @@ function E({ onClose: E, onRename: D, onDelete: O, onStop: k, onDisplayCost: A,
 					/* @__PURE__ */ S("span", {
 						className: "flex shrink-0 items-center text-[var(--oh-muted)]",
 						"aria-hidden": !0,
-						children: /* @__PURE__ */ S(r, { size: 16 })
+						children: /* @__PURE__ */ S(i, { size: 16 })
 					}),
 					/* @__PURE__ */ S("span", {
 						className: "min-w-0 flex-1 truncate text-sm",
@@ -189,7 +186,7 @@ function E({ onClose: E, onRename: D, onDelete: O, onStop: k, onDisplayCost: A,
 								onClick: F,
 								className: "rounded p-0.5 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current",
 								title: H(t.BUTTON$COPY_TO_CLIPBOARD),
-								children: /* @__PURE__ */ S(o, {
+								children: /* @__PURE__ */ S(s, {
 									width: 14,
 									height: 14
 								})
@@ -214,14 +211,14 @@ function E({ onClose: E, onRename: D, onDelete: O, onStop: k, onDisplayCost: A,
 					})
 				]
 			}),
-			k && /* @__PURE__ */ S(m, {
+			k && /* @__PURE__ */ S(h, {
 				isDisabled: G,
-				children: /* @__PURE__ */ S(l, {
+				children: /* @__PURE__ */ S(u, {
 					testId: "stop-button",
 					onClick: k,
 					isDisabled: G,
-					children: /* @__PURE__ */ S(b, {
-						icon: /* @__PURE__ */ S(s, {
+					children: /* @__PURE__ */ S(g, {
+						icon: /* @__PURE__ */ S(c, {
 							width: 16,
 							height: 16
 						}),
@@ -229,11 +226,11 @@ function E({ onClose: E, onRename: D, onDelete: O, onStop: k, onDisplayCost: A,
 					})
 				})
 			}),
-			O && /* @__PURE__ */ S(l, {
+			O && /* @__PURE__ */ S(u, {
 				testId: "delete-button",
 				onClick: O,
-				children: /* @__PURE__ */ S(b, {
-					icon: /* @__PURE__ */ S(y, {
+				children: /* @__PURE__ */ S(g, {
+					icon: /* @__PURE__ */ S(b, {
 						width: 16,
 						height: 16
 					}),

package/dist/components/features/conversation/conversation-name-context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-name-context-menu.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-name-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { ExternalLink, Share2 } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\nimport { cn } from \"#/utils/utils\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"../context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nimport EditIcon from \"#/icons/u-edit.svg?react\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport FishingHookIcon from \"#/icons/fishing-hook.svg?react\";\nimport ToolsIcon from \"#/icons/u-tools.svg?react\";\nimport DownloadIcon from \"#/icons/u-download.svg?react\";\nimport CreditCardIcon from \"#/icons/u-credit-card.svg?react\";\nimport CloseIcon from \"#/icons/u-close.svg?react\";\nimport DeleteIcon from \"#/icons/u-delete.svg?react\";\nimport CopyIcon from \"#/icons/copy.svg?react\";\nimport { ConversationNameContextMenuIconText } from \"./conversation-name-context-menu-icon-text\";\nimport { ArchivedDisabledTooltip } from \"../context-menu/archived-disabled-tooltip\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\n\ninterface ConversationNameContextMenuProps {\n  onClose: () => void;\n  onRename?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onStop?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDisplayCost?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowAgentTools?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowSkills?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowHooks?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onTogglePublic?: (nextIsPublic: boolean) => void;\n  onCopyShareLink?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onExportTranscript?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDownloadConversation?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  shareUrl?: string;\n  position?: \"top\" | \"bottom\";\n  /**\n   * Element the menu should anchor against. When provided, the menu renders\n   * into a portal at the document body using fixed positioning so it cannot be\n   * clipped by ancestors with `overflow: hidden` (e.g. the chat panel that\n   * sits next to the right-side tabs panel).\n   */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n}\n\nfunction PublicShareToggle({\n  isPublic,\n  onToggle,\n  ariaLabel,\n}: {\n  isPublic: boolean;\n  onToggle: (nextIsPublic: boolean) => void;\n  ariaLabel: string;\n}) {\n  return (\n    <label className=\"relative inline-flex shrink-0 cursor-pointer items-center\">\n      <input\n        hidden\n        type=\"checkbox\"\n        data-testid=\"share-publicly-button\"\n        checked={isPublic}\n        aria-label={ariaLabel}\n        onChange={(event) => onToggle(event.target.checked)}\n      />\n      <span\n        aria-hidden\n        className={cn(\n          \"inline-flex h-3.5 w-7 items-center rounded-full px-0.5 py-px transition-colors duration-200 ease-in-out\",\n          isPublic ? \"bg-white\" : \"bg-base-secondary\",\n        )}\n      >\n        <span\n          className={cn(\n            \"block h-2 w-2 shrink-0 rounded-full transition-transform duration-200 ease-in-out\",\n            isPublic\n              ? \"translate-x-[calc(1rem-1px)] bg-base-secondary\"\n              : \"translate-x-px bg-tertiary-light\",\n          )}\n        />\n      </span>\n    </label>\n  );\n}\n\nexport function ConversationNameContextMenu({\n  onClose,\n  onRename,\n  onDelete,\n  onStop,\n  onDisplayCost,\n  onShowAgentTools,\n  onShowSkills,\n  onShowHooks,\n  onTogglePublic,\n  onCopyShareLink,\n  onExportTranscript,\n  onDownloadConversation,\n  shareUrl,\n  position = \"bottom\",\n  anchorRef,\n}: ConversationNameContextMenuProps) {\n  const isMobile = useBreakpoint();\n\n  const { t } = useTranslation(\"openhands\");\n  const { backend } = useActiveBackend();\n  const { data: conversation } = useActiveConversation();\n  const isArchivedConversation = useIsArchivedConversation();\n  const ref = useClickOutsideElement<HTMLUListElement>(onClose);\n\n  const anchorElement = anchorRef?.current ?? null;\n  const [portalStyle, setPortalStyle] = React.useState<React.CSSProperties>();\n  React.useLayoutEffect(() => {\n    if (!anchorElement) return undefined;\n\n    const updatePosition = () => {\n      const rect = anchorElement.getBoundingClientRect();\n      if (!rect) return;\n      const gap = 8;\n      const style: React.CSSProperties = {\n        position: \"fixed\",\n        zIndex: 9999,\n      };\n      if (position === \"top\") {\n        style.bottom = window.innerHeight - rect.top + gap;\n      } else {\n        style.top = rect.bottom + gap;\n      }\n      style.left = rect.left;\n      setPortalStyle(style);\n    };\n\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [anchorElement, position]);\n  const hasTools = Boolean(onShowAgentTools || onShowSkills || onShowHooks);\n  const hasInfo = Boolean(onDisplayCost);\n  const hasControl = Boolean(onStop || onDelete);\n  const stopLabelKey =\n    backend.kind === \"cloud\"\n      ? I18nKey.COMMON$CLOSE_CONVERSATION_STOP_RUNTIME\n      : I18nKey.COMMON$STOP_CONVERSATION;\n  const shouldShowPublicSharing =\n    backend.kind === \"cloud\" && Boolean(onTogglePublic);\n  const isPublic = conversation?.public || false;\n\n  const isPortaled = Boolean(anchorElement);\n  const portalClassName = isPortaled\n    ? \"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0\"\n    : \"\";\n\n  const menu = (\n    <ContextMenu\n      ref={ref}\n      testId=\"conversation-name-context-menu\"\n      position={position}\n      alignment=\"left\"\n      className={cn(\n        isMobile ? \"right-0 translate-x-[34%] left-auto\" : \"\",\n        portalClassName,\n      )}\n    >\n      {onRename && (\n        <ContextMenuListItem testId=\"rename-button\" onClick={onRename}>\n          <ConversationNameContextMenuIconText\n            icon={<EditIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$RENAME)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {hasTools && <Divider testId=\"separator-tools\" inset=\"menu\" />}\n\n      {onShowSkills && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-skills-button\"\n            onClick={onShowSkills}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={\n                <SkillsIcon\n                  width={16}\n                  height={16}\n                  className=\"stroke-[1.75]\"\n                  aria-hidden\n                />\n              }\n              text={t(I18nKey.CONVERSATION$SHOW_SKILLS)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onShowHooks && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-hooks-button\"\n            onClick={onShowHooks}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<FishingHookIcon width={16} height={16} aria-hidden />}\n              text={t(I18nKey.CONVERSATION$SHOW_HOOKS)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onShowAgentTools && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-agent-tools-button\"\n            onClick={onShowAgentTools}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<ToolsIcon width={16} height={16} />}\n              text={t(I18nKey.BUTTON$SHOW_AGENT_TOOLS_AND_METADATA)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onExportTranscript && (\n        <ContextMenuListItem\n          testId=\"export-transcript-button\"\n          onClick={onExportTranscript}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<DownloadIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$EXPORT_TRANSCRIPT)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {onDownloadConversation && (\n        <ContextMenuListItem\n          testId=\"download-trajectory-button\"\n          onClick={onDownloadConversation}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<DownloadIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$DOWNLOAD_CONVERSATION_DATA)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {(hasInfo || hasControl) && (\n        <Divider testId=\"separator-info-control\" inset=\"menu\" />\n      )}\n\n      {onDisplayCost && (\n        <ContextMenuListItem\n          testId=\"display-cost-button\"\n          onClick={onDisplayCost}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<CreditCardIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$DISPLAY_COST)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {shouldShowPublicSharing && onTogglePublic && (\n        <li className=\"flex w-full items-center gap-2 rounded px-2 py-2 hover:bg-[var(--oh-interactive-hover)]\">\n          <span\n            className=\"flex shrink-0 items-center text-[var(--oh-muted)]\"\n            aria-hidden\n          >\n            <Share2 size={16} />\n          </span>\n          <span className=\"min-w-0 flex-1 truncate text-sm\">\n            {t(I18nKey.CONVERSATION$SHARE_PUBLICLY)}\n          </span>\n          <div className=\"flex shrink-0 items-center\">\n            {isPublic && shareUrl && onCopyShareLink && (\n              <div className=\"mr-2 flex items-center gap-0.5\">\n                <button\n                  type=\"button\"\n                  data-testid=\"copy-share-link-button\"\n                  onClick={onCopyShareLink}\n                  className=\"rounded p-0.5 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current\"\n                  title={t(I18nKey.BUTTON$COPY_TO_CLIPBOARD)}\n                >\n                  <CopyIcon width={14} height={14} />\n                </button>\n                <a\n                  data-testid=\"open-share-link-button\"\n                  href={shareUrl}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  onClick={(event) => event.stopPropagation()}\n                  className=\"rounded p-0.5 text-[var(--oh-muted)] no-underline visited:text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current\"\n                  title={t(I18nKey.BUTTON$OPEN_IN_NEW_TAB)}\n                >\n                  <ExternalLink size={14} aria-hidden />\n                </a>\n              </div>\n            )}\n            <PublicShareToggle\n              isPublic={isPublic}\n              onToggle={onTogglePublic}\n              ariaLabel={t(I18nKey.CONVERSATION$SHARE_PUBLICLY)}\n            />\n          </div>\n        </li>\n      )}\n\n      {onStop && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"stop-button\"\n            onClick={onStop}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<CloseIcon width={16} height={16} />}\n              text={t(stopLabelKey)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onDelete && (\n        <ContextMenuListItem testId=\"delete-button\" onClick={onDelete}>\n          <ConversationNameContextMenuIconText\n            icon={<DeleteIcon width={16} height={16} />}\n            text={t(I18nKey.COMMON$DELETE_CONVERSATION)}\n          />\n        </ContextMenuListItem>\n      )}\n    </ContextMenu>\n  );\n\n  if (isPortaled) {\n    if (typeof document === \"undefined\" || !portalStyle) {\n      return null;\n    }\n    return ReactDOM.createPortal(\n      <div style={portalStyle}>{menu}</div>,\n      document.body,\n    );\n  }\n\n  return menu;\n}\n"],"mappings":"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"}
+{"version":3,"file":"conversation-name-context-menu.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-name-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { ExternalLink, Gauge, Share2 } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\nimport { cn } from \"#/utils/utils\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"../context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nimport EditIcon from \"#/icons/u-edit.svg?react\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport FishingHookIcon from \"#/icons/fishing-hook.svg?react\";\nimport ToolsIcon from \"#/icons/u-tools.svg?react\";\nimport DownloadIcon from \"#/icons/u-download.svg?react\";\nimport CloseIcon from \"#/icons/u-close.svg?react\";\nimport DeleteIcon from \"#/icons/u-delete.svg?react\";\nimport CopyIcon from \"#/icons/copy.svg?react\";\nimport { ConversationNameContextMenuIconText } from \"./conversation-name-context-menu-icon-text\";\nimport { ArchivedDisabledTooltip } from \"../context-menu/archived-disabled-tooltip\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\n\ninterface ConversationNameContextMenuProps {\n  onClose: () => void;\n  onRename?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onStop?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDisplayCost?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowAgentTools?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowSkills?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowHooks?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onTogglePublic?: (nextIsPublic: boolean) => void;\n  onCopyShareLink?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onExportTranscript?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDownloadConversation?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  shareUrl?: string;\n  position?: \"top\" | \"bottom\";\n  /**\n   * Element the menu should anchor against. When provided, the menu renders\n   * into a portal at the document body using fixed positioning so it cannot be\n   * clipped by ancestors with `overflow: hidden` (e.g. the chat panel that\n   * sits next to the right-side tabs panel).\n   */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n}\n\nfunction PublicShareToggle({\n  isPublic,\n  onToggle,\n  ariaLabel,\n}: {\n  isPublic: boolean;\n  onToggle: (nextIsPublic: boolean) => void;\n  ariaLabel: string;\n}) {\n  return (\n    <label className=\"relative inline-flex shrink-0 cursor-pointer items-center\">\n      <input\n        hidden\n        type=\"checkbox\"\n        data-testid=\"share-publicly-button\"\n        checked={isPublic}\n        aria-label={ariaLabel}\n        onChange={(event) => onToggle(event.target.checked)}\n      />\n      <span\n        aria-hidden\n        className={cn(\n          \"inline-flex h-3.5 w-7 items-center rounded-full px-0.5 py-px transition-colors duration-200 ease-in-out\",\n          isPublic ? \"bg-white\" : \"bg-base-secondary\",\n        )}\n      >\n        <span\n          className={cn(\n            \"block h-2 w-2 shrink-0 rounded-full transition-transform duration-200 ease-in-out\",\n            isPublic\n              ? \"translate-x-[calc(1rem-1px)] bg-base-secondary\"\n              : \"translate-x-px bg-tertiary-light\",\n          )}\n        />\n      </span>\n    </label>\n  );\n}\n\nexport function ConversationNameContextMenu({\n  onClose,\n  onRename,\n  onDelete,\n  onStop,\n  onDisplayCost,\n  onShowAgentTools,\n  onShowSkills,\n  onShowHooks,\n  onTogglePublic,\n  onCopyShareLink,\n  onExportTranscript,\n  onDownloadConversation,\n  shareUrl,\n  position = \"bottom\",\n  anchorRef,\n}: ConversationNameContextMenuProps) {\n  const isMobile = useBreakpoint();\n\n  const { t } = useTranslation(\"openhands\");\n  const { backend } = useActiveBackend();\n  const { data: conversation } = useActiveConversation();\n  const isArchivedConversation = useIsArchivedConversation();\n  const ref = useClickOutsideElement<HTMLUListElement>(onClose, anchorRef);\n\n  const anchorElement = anchorRef?.current ?? null;\n  const [portalStyle, setPortalStyle] = React.useState<React.CSSProperties>();\n  React.useLayoutEffect(() => {\n    if (!anchorElement) return undefined;\n\n    const updatePosition = () => {\n      const rect = anchorElement.getBoundingClientRect();\n      if (!rect) return;\n      const gap = 8;\n      const style: React.CSSProperties = {\n        position: \"fixed\",\n        zIndex: 9999,\n      };\n      if (position === \"top\") {\n        style.bottom = window.innerHeight - rect.top + gap;\n      } else {\n        style.top = rect.bottom + gap;\n      }\n      style.left = rect.left;\n      setPortalStyle(style);\n    };\n\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [anchorElement, position]);\n  const hasTools = Boolean(onShowAgentTools || onShowSkills || onShowHooks);\n  const hasInfo = Boolean(onDisplayCost);\n  const hasControl = Boolean(onStop || onDelete);\n  const stopLabelKey =\n    backend.kind === \"cloud\"\n      ? I18nKey.COMMON$CLOSE_CONVERSATION_STOP_RUNTIME\n      : I18nKey.COMMON$STOP_CONVERSATION;\n  const shouldShowPublicSharing =\n    backend.kind === \"cloud\" && Boolean(onTogglePublic);\n  const isPublic = conversation?.public || false;\n\n  const isPortaled = Boolean(anchorElement);\n  const portalClassName = isPortaled\n    ? \"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0\"\n    : \"\";\n\n  const menu = (\n    <ContextMenu\n      ref={ref}\n      testId=\"conversation-name-context-menu\"\n      position={position}\n      alignment=\"left\"\n      className={cn(\n        isMobile ? \"right-0 translate-x-[34%] left-auto\" : \"\",\n        portalClassName,\n      )}\n    >\n      {onRename && (\n        <ContextMenuListItem testId=\"rename-button\" onClick={onRename}>\n          <ConversationNameContextMenuIconText\n            icon={<EditIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$RENAME)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {hasTools && <Divider testId=\"separator-tools\" inset=\"menu\" />}\n\n      {onShowSkills && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-skills-button\"\n            onClick={onShowSkills}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={\n                <SkillsIcon\n                  width={16}\n                  height={16}\n                  className=\"stroke-[1.75]\"\n                  aria-hidden\n                />\n              }\n              text={t(I18nKey.CONVERSATION$SHOW_SKILLS)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onShowHooks && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-hooks-button\"\n            onClick={onShowHooks}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<FishingHookIcon width={16} height={16} aria-hidden />}\n              text={t(I18nKey.CONVERSATION$SHOW_HOOKS)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onShowAgentTools && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-agent-tools-button\"\n            onClick={onShowAgentTools}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<ToolsIcon width={16} height={16} />}\n              text={t(I18nKey.BUTTON$SHOW_AGENT_TOOLS_AND_METADATA)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onExportTranscript && (\n        <ContextMenuListItem\n          testId=\"export-transcript-button\"\n          onClick={onExportTranscript}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<DownloadIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$EXPORT_TRANSCRIPT)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {onDownloadConversation && (\n        <ContextMenuListItem\n          testId=\"download-trajectory-button\"\n          onClick={onDownloadConversation}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<DownloadIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$DOWNLOAD_CONVERSATION_DATA)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {(hasInfo || hasControl) && (\n        <Divider testId=\"separator-info-control\" inset=\"menu\" />\n      )}\n\n      {onDisplayCost && (\n        <ContextMenuListItem\n          testId=\"display-cost-button\"\n          onClick={onDisplayCost}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<Gauge size={16} />}\n            text={t(I18nKey.BUTTON$DISPLAY_COST)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {shouldShowPublicSharing && onTogglePublic && (\n        <li className=\"flex w-full items-center gap-2 rounded px-2 py-2 hover:bg-[var(--oh-interactive-hover)]\">\n          <span\n            className=\"flex shrink-0 items-center text-[var(--oh-muted)]\"\n            aria-hidden\n          >\n            <Share2 size={16} />\n          </span>\n          <span className=\"min-w-0 flex-1 truncate text-sm\">\n            {t(I18nKey.CONVERSATION$SHARE_PUBLICLY)}\n          </span>\n          <div className=\"flex shrink-0 items-center\">\n            {isPublic && shareUrl && onCopyShareLink && (\n              <div className=\"mr-2 flex items-center gap-0.5\">\n                <button\n                  type=\"button\"\n                  data-testid=\"copy-share-link-button\"\n                  onClick={onCopyShareLink}\n                  className=\"rounded p-0.5 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current\"\n                  title={t(I18nKey.BUTTON$COPY_TO_CLIPBOARD)}\n                >\n                  <CopyIcon width={14} height={14} />\n                </button>\n                <a\n                  data-testid=\"open-share-link-button\"\n                  href={shareUrl}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  onClick={(event) => event.stopPropagation()}\n                  className=\"rounded p-0.5 text-[var(--oh-muted)] no-underline visited:text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current\"\n                  title={t(I18nKey.BUTTON$OPEN_IN_NEW_TAB)}\n                >\n                  <ExternalLink size={14} aria-hidden />\n                </a>\n              </div>\n            )}\n            <PublicShareToggle\n              isPublic={isPublic}\n              onToggle={onTogglePublic}\n              ariaLabel={t(I18nKey.CONVERSATION$SHARE_PUBLICLY)}\n            />\n          </div>\n        </li>\n      )}\n\n      {onStop && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"stop-button\"\n            onClick={onStop}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<CloseIcon width={16} height={16} />}\n              text={t(stopLabelKey)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onDelete && (\n        <ContextMenuListItem testId=\"delete-button\" onClick={onDelete}>\n          <ConversationNameContextMenuIconText\n            icon={<DeleteIcon width={16} height={16} />}\n            text={t(I18nKey.COMMON$DELETE_CONVERSATION)}\n          />\n        </ContextMenuListItem>\n      )}\n    </ContextMenu>\n  );\n\n  if (isPortaled) {\n    if (typeof document === \"undefined\" || !portalStyle) {\n      return null;\n    }\n    return ReactDOM.createPortal(\n      <div style={portalStyle}>{menu}</div>,\n      document.body,\n    );\n  }\n\n  return menu;\n}\n"],"mappings":"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"}

package/dist/components/features/conversation/conversation-name-with-status.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../types/agent-state.cjs"),n=require("../../../utils/status.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../hooks/use-conversation-id.cjs"),a=require("../../../hooks/query/use-active-conversation.cjs"),o=require("../../../hooks/use-agent-state.cjs"),s=require("../../../hooks/query/use-task-polling.cjs"),c=require("../../../hooks/mutation/use-unified-stop-conversation.cjs"),l=require("../../../hooks/use-user-providers.cjs"),u=require("../../../icons/debug-stackframe-dot.cjs"),d=require("../../../hooks/mutation/use-unified-start-conversation.cjs"),f=require("../controls/server-status-context-menu.cjs"),p=require("./conversation-name.cjs"),m=require("./right-panel-toggle.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");function _(){let{conversationId:e}=i.useConversationId(),{data:h}=a.useActiveConversation(),{curAgentState:_}=o.useAgentState(),{isTask:v,taskStatus:y}=s.useTaskPolling(),{mutate:b}=c.useUnifiedPauseConversation(),{mutate:x}=d.useUnifiedResumeConversation(),{providers:S}=l.useUserProviders(),C=h?.execution_status??null,w=r.getStatusColor({isPausing:!1,isTask:v,taskStatus:y,isStartingStatus:_===t.AgentState.LOADING||_===t.AgentState.INIT,isStopStatus:n.isExecutionErrored(C),curAgentState:_});return(0,g.jsxs)(`div`,{className:`flex items-center justify-between w-full`,children:[(0,g.jsxs)(`div`,{className:`flex items-center min-w-0`,children:[(0,g.jsxs)(`div`,{className:`group relative shrink-0`,children:[(0,g.jsx)(u.default,{className:`ml-[3.5px] w-6 h-6 cursor-pointer`,color:w}),(0,g.jsx)(f.ServerStatusContextMenu,{onClose:()=>{},onStopServer:n.isExecutionActive(C)?t=>{t.preventDefault(),t.stopPropagation(),e&&b({conversationId:e})}:void 0,onStartServer:n.isExecutionPaused(C)?t=>{t.preventDefault(),t.stopPropagation(),e&&x({conversationId:e,providers:S})}:void 0,executionStatus:C,position:`bottom`,className:`opacity-0 invisible pointer-events-none group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto bottom-full left-0 mt-0 min-h-fit`,isPausing:!1})]}),(0,g.jsx)(p.ConversationName,{})]}),(0,g.jsx)(m.RightPanelToggle,{className:`mr-2`})]})}exports.ConversationNameWithStatus=_;
+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/status.cjs"),a=require("../../../utils/utils.cjs"),o=require("../../../hooks/use-conversation-id.cjs"),s=require("../../../hooks/query/use-active-conversation.cjs"),c=require("../../../hooks/use-agent-state.cjs"),l=require("../../../hooks/query/use-task-polling.cjs"),u=require("../../../hooks/mutation/use-unified-stop-conversation.cjs"),d=require("../../../hooks/use-user-providers.cjs"),f=require("../../../icons/debug-stackframe-dot.cjs"),p=require("../../../hooks/mutation/use-unified-start-conversation.cjs"),m=require("../controls/server-status-context-menu.cjs"),h=require("./conversation-name.cjs"),g=require("./right-panel-toggle.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime");function y(){let{t:e}=t.useTranslation(`openhands`),{conversationId:y}=o.useConversationId(),{data:b}=s.useActiveConversation(),{curAgentState:x}=c.useAgentState(),{isTask:S,taskStatus:C}=l.useTaskPolling(),{mutate:w}=u.useUnifiedPauseConversation(),{mutate:T}=p.useUnifiedResumeConversation(),{providers:E}=d.useUserProviders(),[D,O]=_.default.useState(!1),[k,A]=_.default.useState(!1),j=_.default.useRef(null),M=b?.execution_status??null,N=a.getStatusColor({isPausing:!1,isTask:S,taskStatus:C,isStartingStatus:x===r.AgentState.LOADING||x===r.AgentState.INIT,isStopStatus:i.isExecutionErrored(M),curAgentState:x}),P=D||k,F=()=>{O(!1),A(!1)};return(0,v.jsxs)(`div`,{className:`flex items-center justify-between w-full`,children:[(0,v.jsxs)(`div`,{className:`flex items-center min-w-0`,children:[(0,v.jsxs)(`div`,{className:`relative shrink-0`,onPointerEnter:e=>{e.pointerType===`mouse`&&A(!0)},onPointerLeave:e=>{e.pointerType===`mouse`&&A(!1)},children:[(0,v.jsx)(`button`,{ref:j,type:`button`,"data-testid":`server-status-menu-trigger`,"aria-label":e(n.I18nKey.COMMON$SERVER_STATUS),"aria-expanded":P,"aria-haspopup":`menu`,onClick:e=>{if(e.preventDefault(),e.stopPropagation(),P){F();return}O(!0)},className:a.cn(`flex items-center justify-center rounded-md`,`text-[var(--oh-muted)] hover:bg-white/10`),children:(0,v.jsx)(f.default,{className:`ml-[3.5px] w-6 h-6 cursor-pointer`,color:N,"aria-hidden":!0})}),P?(0,v.jsx)(m.ServerStatusContextMenu,{onClose:F,ignoreOutsideClickRef:j,onStopServer:i.isExecutionActive(M)?e=>{e.preventDefault(),e.stopPropagation(),y&&w({conversationId:y}),F()}:void 0,onStartServer:i.isExecutionPaused(M)?e=>{e.preventDefault(),e.stopPropagation(),y&&T({conversationId:y,providers:E}),F()}:void 0,executionStatus:M,position:`bottom`,className:`bottom-full left-0 mt-0 min-h-fit`,isPausing:!1}):null]}),(0,v.jsx)(h.ConversationName,{})]}),(0,v.jsx)(g.RightPanelToggle,{className:`mr-2`})]})}exports.ConversationNameWithStatus=y;
 //# sourceMappingURL=conversation-name-with-status.cjs.map

package/dist/components/features/conversation/conversation-name-with-status.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-name-with-status.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-name-with-status.tsx"],"sourcesContent":["import React from \"react\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useUnifiedResumeConversation } from \"#/hooks/mutation/use-unified-start-conversation\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useUserProviders } from \"#/hooks/use-user-providers\";\nimport { getStatusColor } from \"#/utils/utils\";\nimport { AgentState } from \"#/types/agent-state\";\nimport DebugStackframeDot from \"#/icons/debug-stackframe-dot.svg?react\";\nimport { ServerStatusContextMenu } from \"../controls/server-status-context-menu\";\nimport { ConversationName } from \"./conversation-name\";\nimport { RightPanelToggle } from \"./right-panel-toggle\";\nimport {\n  isExecutionActive,\n  isExecutionErrored,\n  isExecutionPaused,\n} from \"#/utils/status\";\n\nexport function ConversationNameWithStatus() {\n  const { conversationId } = useConversationId();\n  const { data: conversation } = useActiveConversation();\n  const { curAgentState } = useAgentState();\n  const { isTask, taskStatus } = useTaskPolling();\n  const { mutate: pauseConversation } = useUnifiedPauseConversation();\n  const { mutate: resumeConversation } = useUnifiedResumeConversation();\n  const { providers } = useUserProviders();\n\n  const executionStatus = conversation?.execution_status ?? null;\n  const isStartingStatus =\n    curAgentState === AgentState.LOADING || curAgentState === AgentState.INIT;\n  const isStopStatus = isExecutionErrored(executionStatus);\n\n  const statusColor = getStatusColor({\n    isPausing: false,\n    isTask,\n    taskStatus,\n    isStartingStatus,\n    isStopStatus,\n    curAgentState,\n  });\n\n  const handleStopServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      pauseConversation({ conversationId });\n    }\n  };\n\n  const handleStartServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      resumeConversation({ conversationId, providers });\n    }\n  };\n\n  return (\n    <div className=\"flex items-center justify-between w-full\">\n      <div className=\"flex items-center min-w-0\">\n        <div className=\"group relative shrink-0\">\n          <DebugStackframeDot\n            className=\"ml-[3.5px] w-6 h-6 cursor-pointer\"\n            color={statusColor}\n          />\n          <ServerStatusContextMenu\n            onClose={() => {}}\n            onStopServer={\n              isExecutionActive(executionStatus) ? handleStopServer : undefined\n            }\n            onStartServer={\n              isExecutionPaused(executionStatus) ? handleStartServer : undefined\n            }\n            executionStatus={executionStatus}\n            position=\"bottom\"\n            className=\"opacity-0 invisible pointer-events-none group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto bottom-full left-0 mt-0 min-h-fit\"\n            isPausing={false}\n          />\n        </div>\n        <ConversationName />\n      </div>\n      <RightPanelToggle className=\"mr-2\" />\n    </div>\n  );\n}\n"],"mappings":"k1BAoBA,SAAgB,GAA6B,CAC3C,GAAM,CAAE,kBAAmB,EAAA,kBAAkB,EACvC,CAAE,KAAM,GAAiB,EAAA,sBAAsB,EAC/C,CAAE,iBAAkB,EAAA,cAAc,EAClC,CAAE,SAAQ,cAAe,EAAA,eAAe,EACxC,CAAE,OAAQ,GAAsB,EAAA,4BAA4B,EAC5D,CAAE,OAAQ,GAAuB,EAAA,6BAA6B,EAC9D,CAAE,aAAc,EAAA,iBAAiB,EAEjC,EAAkB,GAAc,kBAAoB,KAKpD,EAAc,EAAA,eAAe,CACjC,UAAW,GACX,SACA,aACA,iBAPA,IAAkB,EAAA,WAAW,SAAW,IAAkB,EAAA,WAAW,KAQrE,aAPmB,EAAA,mBAAmB,CAOtC,EACA,eACF,CAAC,EAkBD,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,oDAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,qCAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mCAAf,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAU,oCACV,MAAO,CACR,CAAA,GACD,EAAA,EAAA,KAAC,EAAA,wBAAD,CACE,YAAe,CAAC,EAChB,aACE,EAAA,kBAAkB,CAAe,EA3BnB,GAA+C,CACvE,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAClB,GACF,EAAkB,CAAE,gBAAe,CAAC,CAExC,EAqBoE,IAAA,GAE1D,cACE,EAAA,kBAAkB,CAAe,EAtBlB,GAA+C,CACxE,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAClB,GACF,EAAmB,CAAE,iBAAgB,WAAU,CAAC,CAEpD,EAgBqE,IAAA,GAE1C,kBACjB,SAAS,SACT,UAAU,wJACV,UAAW,EACZ,CAAA,CACE,KACL,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAmB,CAAA,CAChB,KACL,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAkB,UAAU,MAAQ,CAAA,CACjC,GAET"}
+{"version":3,"file":"conversation-name-with-status.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-name-with-status.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useUnifiedResumeConversation } from \"#/hooks/mutation/use-unified-start-conversation\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useUserProviders } from \"#/hooks/use-user-providers\";\nimport { getStatusColor, cn } from \"#/utils/utils\";\nimport { AgentState } from \"#/types/agent-state\";\nimport DebugStackframeDot from \"#/icons/debug-stackframe-dot.svg?react\";\nimport { ServerStatusContextMenu } from \"../controls/server-status-context-menu\";\nimport { ConversationName } from \"./conversation-name\";\nimport { RightPanelToggle } from \"./right-panel-toggle\";\nimport {\n  isExecutionActive,\n  isExecutionErrored,\n  isExecutionPaused,\n} from \"#/utils/status\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nexport function ConversationNameWithStatus() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useConversationId();\n  const { data: conversation } = useActiveConversation();\n  const { curAgentState } = useAgentState();\n  const { isTask, taskStatus } = useTaskPolling();\n  const { mutate: pauseConversation } = useUnifiedPauseConversation();\n  const { mutate: resumeConversation } = useUnifiedResumeConversation();\n  const { providers } = useUserProviders();\n  const [menuOpen, setMenuOpen] = React.useState(false);\n  const [hoveredOpen, setHoveredOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n\n  const executionStatus = conversation?.execution_status ?? null;\n  const isStartingStatus =\n    curAgentState === AgentState.LOADING || curAgentState === AgentState.INIT;\n  const isStopStatus = isExecutionErrored(executionStatus);\n\n  const statusColor = getStatusColor({\n    isPausing: false,\n    isTask,\n    taskStatus,\n    isStartingStatus,\n    isStopStatus,\n    curAgentState,\n  });\n\n  const isMenuVisible = menuOpen || hoveredOpen;\n\n  const closeMenu = () => {\n    setMenuOpen(false);\n    setHoveredOpen(false);\n  };\n\n  const handleStopServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      pauseConversation({ conversationId });\n    }\n    closeMenu();\n  };\n\n  const handleStartServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      resumeConversation({ conversationId, providers });\n    }\n    closeMenu();\n  };\n\n  const handleStatusClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Click toggles for touch; on desktop it also dismisses a hover-opened menu\n    // instead of \"pinning\" it open under the cursor.\n    if (isMenuVisible) {\n      closeMenu();\n      return;\n    }\n    setMenuOpen(true);\n  };\n\n  return (\n    <div className=\"flex items-center justify-between w-full\">\n      <div className=\"flex items-center min-w-0\">\n        <div\n          className=\"relative shrink-0\"\n          onPointerEnter={(event) => {\n            // Gate on this event's pointer, not device-primary matchMedia — hybrid\n            // laptops can emit compatibility mouseenter for touchscreen taps.\n            if (event.pointerType === \"mouse\") {\n              setHoveredOpen(true);\n            }\n          }}\n          onPointerLeave={(event) => {\n            if (event.pointerType === \"mouse\") {\n              setHoveredOpen(false);\n            }\n          }}\n        >\n          <button\n            ref={triggerRef}\n            type=\"button\"\n            data-testid=\"server-status-menu-trigger\"\n            aria-label={t(I18nKey.COMMON$SERVER_STATUS)}\n            aria-expanded={isMenuVisible}\n            aria-haspopup=\"menu\"\n            onClick={handleStatusClick}\n            className={cn(\n              \"flex items-center justify-center rounded-md\",\n              \"text-[var(--oh-muted)] hover:bg-white/10\",\n            )}\n          >\n            <DebugStackframeDot\n              className=\"ml-[3.5px] w-6 h-6 cursor-pointer\"\n              color={statusColor}\n              aria-hidden\n            />\n          </button>\n          {isMenuVisible ? (\n            <ServerStatusContextMenu\n              onClose={closeMenu}\n              ignoreOutsideClickRef={triggerRef}\n              onStopServer={\n                isExecutionActive(executionStatus)\n                  ? handleStopServer\n                  : undefined\n              }\n              onStartServer={\n                isExecutionPaused(executionStatus)\n                  ? handleStartServer\n                  : undefined\n              }\n              executionStatus={executionStatus}\n              position=\"bottom\"\n              className=\"bottom-full left-0 mt-0 min-h-fit\"\n              isPausing={false}\n            />\n          ) : null}\n        </div>\n        <ConversationName />\n      </div>\n      <RightPanelToggle className=\"mr-2\" />\n    </div>\n  );\n}\n"],"mappings":"y8BAsBA,SAAgB,GAA6B,CAC3C,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,kBAAmB,EAAA,kBAAkB,EACvC,CAAE,KAAM,GAAiB,EAAA,sBAAsB,EAC/C,CAAE,iBAAkB,EAAA,cAAc,EAClC,CAAE,SAAQ,cAAe,EAAA,eAAe,EACxC,CAAE,OAAQ,GAAsB,EAAA,4BAA4B,EAC5D,CAAE,OAAQ,GAAuB,EAAA,6BAA6B,EAC9D,CAAE,aAAc,EAAA,iBAAiB,EACjC,CAAC,EAAU,GAAe,EAAA,QAAM,SAAS,EAAK,EAC9C,CAAC,EAAa,GAAkB,EAAA,QAAM,SAAS,EAAK,EACpD,EAAa,EAAA,QAAM,OAA0B,IAAI,EAEjD,EAAkB,GAAc,kBAAoB,KAKpD,EAAc,EAAA,eAAe,CACjC,UAAW,GACX,SACA,aACA,iBAPA,IAAkB,EAAA,WAAW,SAAW,IAAkB,EAAA,WAAW,KAQrE,aAPmB,EAAA,mBAAmB,CAOtC,EACA,eACF,CAAC,EAEK,EAAgB,GAAY,EAE5B,MAAkB,CACtB,EAAY,EAAK,EACjB,EAAe,EAAK,CACtB,EAgCA,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,oDAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,qCAAf,EACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,oBACV,eAAiB,GAAU,CAGrB,EAAM,cAAgB,SACxB,EAAe,EAAI,CAEvB,EACA,eAAiB,GAAU,CACrB,EAAM,cAAgB,SACxB,EAAe,EAAK,CAExB,WAbF,EAeE,EAAA,EAAA,KAAC,SAAD,CACE,IAAK,EACL,KAAK,SACL,cAAY,6BACZ,aAAY,EAAE,EAAA,QAAQ,oBAAoB,EAC1C,gBAAe,EACf,gBAAc,OACd,QArCiB,GAA+C,CAKxE,GAJA,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAGlB,EAAe,CACjB,EAAU,EACV,MACF,CACA,EAAY,EAAI,CAClB,EA4BU,UAAW,EAAA,GACT,8CACA,0CACF,YAEA,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAU,oCACV,MAAO,EACP,cAAA,EACD,CAAA,CACK,CAAA,EACP,GACC,EAAA,EAAA,KAAC,EAAA,wBAAD,CACE,QAAS,EACT,sBAAuB,EACvB,aACE,EAAA,kBAAkB,CAAe,EAxErB,GAA+C,CACvE,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAClB,GACF,EAAkB,CAAE,gBAAe,CAAC,EAEtC,EAAU,CACZ,EAmEkB,IAAA,GAEN,cACE,EAAA,kBAAkB,CAAe,EApEpB,GAA+C,CACxE,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAClB,GACF,EAAmB,CAAE,iBAAgB,WAAU,CAAC,EAElD,EAAU,CACZ,EA+DkB,IAAA,GAEW,kBACjB,SAAS,SACT,UAAU,oCACV,UAAW,EACZ,CAAA,EACC,IACD,KACL,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAmB,CAAA,CAChB,KACL,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAkB,UAAU,MAAQ,CAAA,CACjC,GAET"}

package/dist/components/features/conversation/conversation-name-with-status.js

@@ -1,59 +1,87 @@
-import { AgentState as e } from "../../../types/agent-state.js";
-import { isExecutionActive as t, isExecutionErrored as n, isExecutionPaused as r } from "../../../utils/status.js";
-import { getStatusColor as i } from "../../../utils/utils.js";
-import { useConversationId as a } from "../../../hooks/use-conversation-id.js";
-import { useActiveConversation as o } from "../../../hooks/query/use-active-conversation.js";
-import { useAgentState as s } from "../../../hooks/use-agent-state.js";
-import { useTaskPolling as c } from "../../../hooks/query/use-task-polling.js";
-import { useUnifiedPauseConversation as l } from "../../../hooks/mutation/use-unified-stop-conversation.js";
-import { useUserProviders as u } from "../../../hooks/use-user-providers.js";
-import d from "../../../icons/debug-stackframe-dot.js";
-import { useUnifiedResumeConversation as f } from "../../../hooks/mutation/use-unified-start-conversation.js";
-import { ServerStatusContextMenu as p } from "../controls/server-status-context-menu.js";
-import { ConversationName as m } from "./conversation-name.js";
-import { RightPanelToggle as h } from "./right-panel-toggle.js";
-import "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { AgentState as n } from "../../../types/agent-state.js";
+import { isExecutionActive as r, isExecutionErrored as i, isExecutionPaused as a } from "../../../utils/status.js";
+import { cn as o, getStatusColor as s } from "../../../utils/utils.js";
+import { useConversationId as c } from "../../../hooks/use-conversation-id.js";
+import { useActiveConversation as l } from "../../../hooks/query/use-active-conversation.js";
+import { useAgentState as u } from "../../../hooks/use-agent-state.js";
+import { useTaskPolling as d } from "../../../hooks/query/use-task-polling.js";
+import { useUnifiedPauseConversation as f } from "../../../hooks/mutation/use-unified-stop-conversation.js";
+import { useUserProviders as p } from "../../../hooks/use-user-providers.js";
+import m from "../../../icons/debug-stackframe-dot.js";
+import { useUnifiedResumeConversation as h } from "../../../hooks/mutation/use-unified-start-conversation.js";
+import { ServerStatusContextMenu as g } from "../controls/server-status-context-menu.js";
+import { ConversationName as _ } from "./conversation-name.js";
+import { RightPanelToggle as v } from "./right-panel-toggle.js";
+import y from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-name-with-status.tsx
-function v() {
-	let { conversationId: v } = a(), { data: y } = o(), { curAgentState: b } = s(), { isTask: x, taskStatus: S } = c(), { mutate: C } = l(), { mutate: w } = f(), { providers: T } = u(), E = y?.execution_status ?? null;
-	return /* @__PURE__ */ _("div", {
+function S() {
+	let { t: S } = e("openhands"), { conversationId: C } = c(), { data: w } = l(), { curAgentState: T } = u(), { isTask: E, taskStatus: D } = d(), { mutate: O } = f(), { mutate: k } = h(), { providers: A } = p(), [j, M] = y.useState(!1), [N, P] = y.useState(!1), F = y.useRef(null), I = w?.execution_status ?? null, L = s({
+		isPausing: !1,
+		isTask: E,
+		taskStatus: D,
+		isStartingStatus: T === n.LOADING || T === n.INIT,
+		isStopStatus: i(I),
+		curAgentState: T
+	}), R = j || N, z = () => {
+		M(!1), P(!1);
+	};
+	return /* @__PURE__ */ x("div", {
 		className: "flex items-center justify-between w-full",
-		children: [/* @__PURE__ */ _("div", {
+		children: [/* @__PURE__ */ x("div", {
 			className: "flex items-center min-w-0",
-			children: [/* @__PURE__ */ _("div", {
-				className: "group relative shrink-0",
-				children: [/* @__PURE__ */ g(d, {
-					className: "ml-[3.5px] w-6 h-6 cursor-pointer",
-					color: i({
-						isPausing: !1,
-						isTask: x,
-						taskStatus: S,
-						isStartingStatus: b === e.LOADING || b === e.INIT,
-						isStopStatus: n(E),
-						curAgentState: b
+			children: [/* @__PURE__ */ x("div", {
+				className: "relative shrink-0",
+				onPointerEnter: (e) => {
+					e.pointerType === "mouse" && P(!0);
+				},
+				onPointerLeave: (e) => {
+					e.pointerType === "mouse" && P(!1);
+				},
+				children: [/* @__PURE__ */ b("button", {
+					ref: F,
+					type: "button",
+					"data-testid": "server-status-menu-trigger",
+					"aria-label": S(t.COMMON$SERVER_STATUS),
+					"aria-expanded": R,
+					"aria-haspopup": "menu",
+					onClick: (e) => {
+						if (e.preventDefault(), e.stopPropagation(), R) {
+							z();
+							return;
+						}
+						M(!0);
+					},
+					className: o("flex items-center justify-center rounded-md", "text-[var(--oh-muted)] hover:bg-white/10"),
+					children: /* @__PURE__ */ b(m, {
+						className: "ml-[3.5px] w-6 h-6 cursor-pointer",
+						color: L,
+						"aria-hidden": !0
 					})
-				}), /* @__PURE__ */ g(p, {
-					onClose: () => {},
-					onStopServer: t(E) ? (e) => {
-						e.preventDefault(), e.stopPropagation(), v && C({ conversationId: v });
+				}), R ? /* @__PURE__ */ b(g, {
+					onClose: z,
+					ignoreOutsideClickRef: F,
+					onStopServer: r(I) ? (e) => {
+						e.preventDefault(), e.stopPropagation(), C && O({ conversationId: C }), z();
 					} : void 0,
-					onStartServer: r(E) ? (e) => {
-						e.preventDefault(), e.stopPropagation(), v && w({
-							conversationId: v,
-							providers: T
-						});
+					onStartServer: a(I) ? (e) => {
+						e.preventDefault(), e.stopPropagation(), C && k({
+							conversationId: C,
+							providers: A
+						}), z();
 					} : void 0,
-					executionStatus: E,
+					executionStatus: I,
 					position: "bottom",
-					className: "opacity-0 invisible pointer-events-none group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto bottom-full left-0 mt-0 min-h-fit",
+					className: "bottom-full left-0 mt-0 min-h-fit",
 					isPausing: !1
-				})]
-			}), /* @__PURE__ */ g(m, {})]
-		}), /* @__PURE__ */ g(h, { className: "mr-2" })]
+				}) : null]
+			}), /* @__PURE__ */ b(_, {})]
+		}), /* @__PURE__ */ b(v, { className: "mr-2" })]
 	});
 }
 //#endregion
-export { v as ConversationNameWithStatus };
+export { S as ConversationNameWithStatus };
 
 //# sourceMappingURL=conversation-name-with-status.js.map

package/dist/components/features/conversation/conversation-name-with-status.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-name-with-status.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-name-with-status.tsx"],"sourcesContent":["import React from \"react\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useUnifiedResumeConversation } from \"#/hooks/mutation/use-unified-start-conversation\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useUserProviders } from \"#/hooks/use-user-providers\";\nimport { getStatusColor } from \"#/utils/utils\";\nimport { AgentState } from \"#/types/agent-state\";\nimport DebugStackframeDot from \"#/icons/debug-stackframe-dot.svg?react\";\nimport { ServerStatusContextMenu } from \"../controls/server-status-context-menu\";\nimport { ConversationName } from \"./conversation-name\";\nimport { RightPanelToggle } from \"./right-panel-toggle\";\nimport {\n  isExecutionActive,\n  isExecutionErrored,\n  isExecutionPaused,\n} from \"#/utils/status\";\n\nexport function ConversationNameWithStatus() {\n  const { conversationId } = useConversationId();\n  const { data: conversation } = useActiveConversation();\n  const { curAgentState } = useAgentState();\n  const { isTask, taskStatus } = useTaskPolling();\n  const { mutate: pauseConversation } = useUnifiedPauseConversation();\n  const { mutate: resumeConversation } = useUnifiedResumeConversation();\n  const { providers } = useUserProviders();\n\n  const executionStatus = conversation?.execution_status ?? null;\n  const isStartingStatus =\n    curAgentState === AgentState.LOADING || curAgentState === AgentState.INIT;\n  const isStopStatus = isExecutionErrored(executionStatus);\n\n  const statusColor = getStatusColor({\n    isPausing: false,\n    isTask,\n    taskStatus,\n    isStartingStatus,\n    isStopStatus,\n    curAgentState,\n  });\n\n  const handleStopServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      pauseConversation({ conversationId });\n    }\n  };\n\n  const handleStartServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      resumeConversation({ conversationId, providers });\n    }\n  };\n\n  return (\n    <div className=\"flex items-center justify-between w-full\">\n      <div className=\"flex items-center min-w-0\">\n        <div className=\"group relative shrink-0\">\n          <DebugStackframeDot\n            className=\"ml-[3.5px] w-6 h-6 cursor-pointer\"\n            color={statusColor}\n          />\n          <ServerStatusContextMenu\n            onClose={() => {}}\n            onStopServer={\n              isExecutionActive(executionStatus) ? handleStopServer : undefined\n            }\n            onStartServer={\n              isExecutionPaused(executionStatus) ? handleStartServer : undefined\n            }\n            executionStatus={executionStatus}\n            position=\"bottom\"\n            className=\"opacity-0 invisible pointer-events-none group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto bottom-full left-0 mt-0 min-h-fit\"\n            isPausing={false}\n          />\n        </div>\n        <ConversationName />\n      </div>\n      <RightPanelToggle className=\"mr-2\" />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,SAAgB,IAA6B;CAC3C,IAAM,EAAE,sBAAmB,EAAkB,GACvC,EAAE,MAAM,MAAiB,EAAsB,GAC/C,EAAE,qBAAkB,EAAc,GAClC,EAAE,WAAQ,kBAAe,EAAe,GACxC,EAAE,QAAQ,MAAsB,EAA4B,GAC5D,EAAE,QAAQ,MAAuB,EAA6B,GAC9D,EAAE,iBAAc,EAAiB,GAEjC,IAAkB,GAAc,oBAAoB;CA8B1D,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,WAAU;KACV,OA/BU,EAAe;MACjC,WAAW;MACX;MACA;MACA,kBAPA,MAAkB,EAAW,WAAW,MAAkB,EAAW;MAQrE,cAPmB,EAAmB,CAOtC;MACA;KACF,CAwBiB;IACR,CAAA,GACD,kBAAC,GAAD;KACE,eAAe,CAAC;KAChB,cACE,EAAkB,CAAe,KA3BnB,MAA+C;MAGvE,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAClB,KACF,EAAkB,EAAE,kBAAe,CAAC;KAExC,IAqBoE,KAAA;KAE1D,eACE,EAAkB,CAAe,KAtBlB,MAA+C;MAGxE,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAClB,KACF,EAAmB;OAAE;OAAgB;MAAU,CAAC;KAEpD,IAgBqE,KAAA;KAE1C;KACjB,UAAS;KACT,WAAU;KACV,WAAW;IACZ,CAAA,CACE;OACL,kBAAC,GAAD,CAAmB,CAAA,CAChB;MACL,kBAAC,GAAD,EAAkB,WAAU,OAAQ,CAAA,CACjC;;AAET"}
+{"version":3,"file":"conversation-name-with-status.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-name-with-status.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useUnifiedResumeConversation } from \"#/hooks/mutation/use-unified-start-conversation\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useUserProviders } from \"#/hooks/use-user-providers\";\nimport { getStatusColor, cn } from \"#/utils/utils\";\nimport { AgentState } from \"#/types/agent-state\";\nimport DebugStackframeDot from \"#/icons/debug-stackframe-dot.svg?react\";\nimport { ServerStatusContextMenu } from \"../controls/server-status-context-menu\";\nimport { ConversationName } from \"./conversation-name\";\nimport { RightPanelToggle } from \"./right-panel-toggle\";\nimport {\n  isExecutionActive,\n  isExecutionErrored,\n  isExecutionPaused,\n} from \"#/utils/status\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nexport function ConversationNameWithStatus() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useConversationId();\n  const { data: conversation } = useActiveConversation();\n  const { curAgentState } = useAgentState();\n  const { isTask, taskStatus } = useTaskPolling();\n  const { mutate: pauseConversation } = useUnifiedPauseConversation();\n  const { mutate: resumeConversation } = useUnifiedResumeConversation();\n  const { providers } = useUserProviders();\n  const [menuOpen, setMenuOpen] = React.useState(false);\n  const [hoveredOpen, setHoveredOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n\n  const executionStatus = conversation?.execution_status ?? null;\n  const isStartingStatus =\n    curAgentState === AgentState.LOADING || curAgentState === AgentState.INIT;\n  const isStopStatus = isExecutionErrored(executionStatus);\n\n  const statusColor = getStatusColor({\n    isPausing: false,\n    isTask,\n    taskStatus,\n    isStartingStatus,\n    isStopStatus,\n    curAgentState,\n  });\n\n  const isMenuVisible = menuOpen || hoveredOpen;\n\n  const closeMenu = () => {\n    setMenuOpen(false);\n    setHoveredOpen(false);\n  };\n\n  const handleStopServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      pauseConversation({ conversationId });\n    }\n    closeMenu();\n  };\n\n  const handleStartServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      resumeConversation({ conversationId, providers });\n    }\n    closeMenu();\n  };\n\n  const handleStatusClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Click toggles for touch; on desktop it also dismisses a hover-opened menu\n    // instead of \"pinning\" it open under the cursor.\n    if (isMenuVisible) {\n      closeMenu();\n      return;\n    }\n    setMenuOpen(true);\n  };\n\n  return (\n    <div className=\"flex items-center justify-between w-full\">\n      <div className=\"flex items-center min-w-0\">\n        <div\n          className=\"relative shrink-0\"\n          onPointerEnter={(event) => {\n            // Gate on this event's pointer, not device-primary matchMedia — hybrid\n            // laptops can emit compatibility mouseenter for touchscreen taps.\n            if (event.pointerType === \"mouse\") {\n              setHoveredOpen(true);\n            }\n          }}\n          onPointerLeave={(event) => {\n            if (event.pointerType === \"mouse\") {\n              setHoveredOpen(false);\n            }\n          }}\n        >\n          <button\n            ref={triggerRef}\n            type=\"button\"\n            data-testid=\"server-status-menu-trigger\"\n            aria-label={t(I18nKey.COMMON$SERVER_STATUS)}\n            aria-expanded={isMenuVisible}\n            aria-haspopup=\"menu\"\n            onClick={handleStatusClick}\n            className={cn(\n              \"flex items-center justify-center rounded-md\",\n              \"text-[var(--oh-muted)] hover:bg-white/10\",\n            )}\n          >\n            <DebugStackframeDot\n              className=\"ml-[3.5px] w-6 h-6 cursor-pointer\"\n              color={statusColor}\n              aria-hidden\n            />\n          </button>\n          {isMenuVisible ? (\n            <ServerStatusContextMenu\n              onClose={closeMenu}\n              ignoreOutsideClickRef={triggerRef}\n              onStopServer={\n                isExecutionActive(executionStatus)\n                  ? handleStopServer\n                  : undefined\n              }\n              onStartServer={\n                isExecutionPaused(executionStatus)\n                  ? handleStartServer\n                  : undefined\n              }\n              executionStatus={executionStatus}\n              position=\"bottom\"\n              className=\"bottom-full left-0 mt-0 min-h-fit\"\n              isPausing={false}\n            />\n          ) : null}\n        </div>\n        <ConversationName />\n      </div>\n      <RightPanelToggle className=\"mr-2\" />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,IAA6B;CAC3C,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,sBAAmB,EAAkB,GACvC,EAAE,MAAM,MAAiB,EAAsB,GAC/C,EAAE,qBAAkB,EAAc,GAClC,EAAE,WAAQ,kBAAe,EAAe,GACxC,EAAE,QAAQ,MAAsB,EAA4B,GAC5D,EAAE,QAAQ,MAAuB,EAA6B,GAC9D,EAAE,iBAAc,EAAiB,GACjC,CAAC,GAAU,KAAe,EAAM,SAAS,EAAK,GAC9C,CAAC,GAAa,KAAkB,EAAM,SAAS,EAAK,GACpD,IAAa,EAAM,OAA0B,IAAI,GAEjD,IAAkB,GAAc,oBAAoB,MAKpD,IAAc,EAAe;EACjC,WAAW;EACX;EACA;EACA,kBAPA,MAAkB,EAAW,WAAW,MAAkB,EAAW;EAQrE,cAPmB,EAAmB,CAOtC;EACA;CACF,CAAC,GAEK,IAAgB,KAAY,GAE5B,UAAkB;EAEtB,AADA,EAAY,EAAK,GACjB,EAAe,EAAK;CACtB;CAgCA,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IACE,WAAU;IACV,iBAAiB,MAAU;KAGzB,AAAI,EAAM,gBAAgB,WACxB,EAAe,EAAI;IAEvB;IACA,iBAAiB,MAAU;KACzB,AAAI,EAAM,gBAAgB,WACxB,EAAe,EAAK;IAExB;cAbF,CAeE,kBAAC,UAAD;KACE,KAAK;KACL,MAAK;KACL,eAAY;KACZ,cAAY,EAAE,EAAQ,oBAAoB;KAC1C,iBAAe;KACf,iBAAc;KACd,UArCiB,MAA+C;MAKxE,IAJA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAGlB,GAAe;OACjB,EAAU;OACV;MACF;MACA,EAAY,EAAI;KAClB;KA4BU,WAAW,EACT,+CACA,0CACF;eAEA,kBAAC,GAAD;MACE,WAAU;MACV,OAAO;MACP,eAAA;KACD,CAAA;IACK,CAAA,GACP,IACC,kBAAC,GAAD;KACE,SAAS;KACT,uBAAuB;KACvB,cACE,EAAkB,CAAe,KAxErB,MAA+C;MAMvE,AALA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAClB,KACF,EAAkB,EAAE,kBAAe,CAAC,GAEtC,EAAU;KACZ,IAmEkB,KAAA;KAEN,eACE,EAAkB,CAAe,KApEpB,MAA+C;MAMxE,AALA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAClB,KACF,EAAmB;OAAE;OAAgB;MAAU,CAAC,GAElD,EAAU;KACZ,IA+DkB,KAAA;KAEW;KACjB,UAAS;KACT,WAAU;KACV,WAAW;IACZ,CAAA,IACC,IACD;OACL,kBAAC,GAAD,CAAmB,CAAA,CAChB;MACL,kBAAC,GAAD,EAAkB,WAAU,OAAQ,CAAA,CACjC;;AAET"}

package/dist/components/features/conversation/conversation-name.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("../../../hooks/use-conversation-id.cjs"),i=require("../../../utils/custom-toast-handlers.cjs"),a=require("../../../hooks/query/use-active-conversation.cjs"),o=require("../../../hooks/use-conversation-name-context-menu.cjs"),s=require("../conversation-panel/system-message-modal.cjs"),c=require("../conversation-panel/skills-modal.cjs"),l=require("../conversation-panel/hooks-modal.cjs"),u=require("../../../hooks/mutation/use-update-conversation.cjs"),d=require("../conversation-panel/ellipsis-button.cjs"),f=require("./conversation-name-context-menu.cjs"),p=require("../conversation-panel/confirm-delete-modal.cjs"),m=require("../conversation-panel/confirm-stop-modal.cjs"),h=require("./metrics-modal/metrics-modal.cjs"),g=require("./transcript-export-modal.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime");function y(){let{t:e}=t.useTranslation(`openhands`),{conversationId:y}=r.useConversationId(),{data:b}=a.useActiveConversation(),{mutate:x}=u.useUpdateConversation(),[S,C]=_.default.useState(`view`),[w,T]=_.default.useState(!1),[E,D]=_.default.useState(!1),O=_.default.useRef(null),k=_.default.useRef(null),{handleDelete:A,handleStop:j,handleDownloadConversation:M,handleDisplayCost:N,handleShowAgentTools:ee,handleShowSkills:P,handleShowHooks:F,handleTogglePublic:I,handleCopyShareLink:L,shareUrl:R,handleConfirmDelete:z,handleConfirmStop:B,metricsModalVisible:V,setMetricsModalVisible:H,systemModalVisible:U,setSystemModalVisible:W,skillsModalVisible:G,setSkillsModalVisible:K,hooksModalVisible:q,setHooksModalVisible:J,confirmDeleteModalVisible:Y,setConfirmDeleteModalVisible:X,confirmStopModalVisible:Z,setConfirmStopModalVisible:Q,systemMessage:$,shouldShowStop:te,shouldShowDownloadConversation:ne,shouldShowDisplayCost:re,shouldShowAgentTools:ie,shouldShowSkills:ae,shouldShowHooks:oe}=o.useConversationNameContextMenu({conversationId:y,executionStatus:b?.execution_status,showOptions:!0,onContextMenuToggle:T});return _.default.useEffect(()=>{S===`edit`&&O.current?.focus()},[S]),b?(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)(`div`,{className:`flex items-center gap-2 h-[22px] text-base font-normal text-left pl-0 lg:pl-1 min-w-0`,"data-testid":`conversation-name`,children:[S===`edit`?(0,v.jsx)(`input`,{ref:O,"data-testid":`conversation-name-input`,onClick:e=>{S===`edit`&&(e.preventDefault(),e.stopPropagation())},onBlur:()=>{if(O.current?.value&&y){let t=O.current.value.trim();t!==b?.title&&x({conversationId:y,newTitle:t},{onSuccess:()=>{i.displaySuccessToast(e(n.I18nKey.CONVERSATION$TITLE_UPDATED))}})}else O.current&&(O.current.value=b?.title??``);C(`view`)},onKeyUp:e=>{e.nativeEvent.isComposing||e.key===`Enter`&&e.currentTarget.blur()},type:`text`,defaultValue:b.title||``,className:`text-white leading-5 bg-transparent border-none outline-none text-base font-normal w-fit max-w-fit field-sizing-content`}):(0,v.jsx)(`div`,{className:`text-white leading-5 truncate`,"data-testid":`conversation-name-title`,onDoubleClick:()=>{C(`edit`)},title:b.title||``,children:b.title}),S!==`edit`&&(0,v.jsxs)(`div`,{ref:k,className:`relative flex items-center shrink-0`,children:[(0,v.jsx)(d.EllipsisButton,{onClick:e=>{e.preventDefault(),e.stopPropagation(),T(!w)}}),w&&(0,v.jsx)(f.ConversationNameContextMenu,{onClose:()=>T(!1),onRename:e=>{e.preventDefault(),e.stopPropagation(),C(`edit`),T(!1)},onDelete:A,onStop:te?j:void 0,onDisplayCost:re?N:void 0,onShowAgentTools:ie?ee:void 0,onShowSkills:ae?P:void 0,onShowHooks:oe?F:void 0,onTogglePublic:I,onCopyShareLink:L,shareUrl:R,onExportTranscript:e=>{e.preventDefault(),e.stopPropagation(),D(!0),T(!1)},onDownloadConversation:ne?M:void 0,position:`bottom`,anchorRef:k})]})]}),(0,v.jsx)(h.MetricsModal,{isOpen:V,onOpenChange:H}),E&&y&&(0,v.jsx)(g.TranscriptExportModal,{conversationId:y,conversationUrl:b.conversation_url,sessionApiKey:b.session_api_key,conversationTitle:b.title,model:b.llm_model,onClose:()=>D(!1)}),(0,v.jsx)(s.SystemMessageModal,{isOpen:U,onClose:()=>W(!1),systemMessage:$||null}),G&&(0,v.jsx)(c.SkillsModal,{onClose:()=>K(!1)}),q&&(0,v.jsx)(l.HooksModal,{onClose:()=>J(!1)}),Y&&(0,v.jsx)(p.ConfirmDeleteModal,{onConfirm:z,onCancel:()=>X(!1),conversationTitle:b?.title||``}),Z&&(0,v.jsx)(m.ConfirmStopModal,{onConfirm:B,onCancel:()=>Q(!1)})]}):null}exports.ConversationName=y;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../hooks/use-conversation-id.cjs"),i=require("../../../utils/custom-toast-handlers.cjs"),a=require("../../../hooks/query/use-active-conversation.cjs"),o=require("../../../hooks/use-conversation-name-context-menu.cjs"),s=require("../conversation-panel/system-message-modal.cjs"),c=require("../conversation-panel/skills-modal.cjs"),l=require("../conversation-panel/hooks-modal.cjs"),u=require("../../../hooks/mutation/use-update-conversation.cjs"),d=require("../conversation-panel/ellipsis-button.cjs"),f=require("./conversation-name-context-menu.cjs"),p=require("../conversation-panel/confirm-delete-modal.cjs"),m=require("../conversation-panel/confirm-stop-modal.cjs"),h=require("./transcript-export-modal.cjs");let g=require("react");g=e.__toESM(g,1);let _=require("react/jsx-runtime");function v(){let{t:e}=t.useTranslation(`openhands`),{conversationId:v}=r.useConversationId(),{data:y}=a.useActiveConversation(),{mutate:b}=u.useUpdateConversation(),[x,S]=g.default.useState(`view`),[C,w]=g.default.useState(!1),[T,E]=g.default.useState(!1),D=g.default.useRef(null),O=g.default.useRef(null),{handleDelete:k,handleStop:A,handleDownloadConversation:j,handleDisplayCost:M,handleShowAgentTools:N,handleShowSkills:P,handleShowHooks:ee,handleTogglePublic:F,handleCopyShareLink:I,shareUrl:L,handleConfirmDelete:R,handleConfirmStop:z,systemModalVisible:B,setSystemModalVisible:V,skillsModalVisible:H,setSkillsModalVisible:U,hooksModalVisible:W,setHooksModalVisible:G,confirmDeleteModalVisible:K,setConfirmDeleteModalVisible:q,confirmStopModalVisible:J,setConfirmStopModalVisible:Y,systemMessage:X,shouldShowStop:Z,shouldShowDownloadConversation:Q,shouldShowDisplayCost:$,shouldShowAgentTools:te,shouldShowSkills:ne,shouldShowHooks:re}=o.useConversationNameContextMenu({conversationId:v,executionStatus:y?.execution_status,showOptions:!0,onContextMenuToggle:w});return g.default.useEffect(()=>{x===`edit`&&D.current?.focus()},[x]),y?(0,_.jsxs)(_.Fragment,{children:[(0,_.jsxs)(`div`,{className:`flex items-center gap-2 h-[22px] text-base font-normal text-left pl-0 lg:pl-1 min-w-0`,"data-testid":`conversation-name`,children:[x===`edit`?(0,_.jsx)(`input`,{ref:D,"data-testid":`conversation-name-input`,onClick:e=>{x===`edit`&&(e.preventDefault(),e.stopPropagation())},onBlur:()=>{if(D.current?.value&&v){let t=D.current.value.trim();t!==y?.title&&b({conversationId:v,newTitle:t},{onSuccess:()=>{i.displaySuccessToast(e(n.I18nKey.CONVERSATION$TITLE_UPDATED))}})}else D.current&&(D.current.value=y?.title??``);S(`view`)},onKeyUp:e=>{e.nativeEvent.isComposing||e.key===`Enter`&&e.currentTarget.blur()},type:`text`,defaultValue:y.title||``,className:`text-white leading-5 bg-transparent border-none outline-none text-base font-normal w-fit max-w-fit field-sizing-content`}):(0,_.jsx)(`div`,{className:`text-white leading-5 truncate`,"data-testid":`conversation-name-title`,onDoubleClick:()=>{S(`edit`)},title:y.title||``,children:y.title}),x!==`edit`&&(0,_.jsxs)(`div`,{ref:O,className:`relative flex items-center shrink-0`,children:[(0,_.jsx)(d.EllipsisButton,{onClick:e=>{e.preventDefault(),e.stopPropagation(),w(!C)},ariaLabel:e(n.I18nKey.COMMON$MORE_OPTIONS)}),C&&(0,_.jsx)(f.ConversationNameContextMenu,{onClose:()=>w(!1),onRename:e=>{e.preventDefault(),e.stopPropagation(),S(`edit`),w(!1)},onDelete:k,onStop:Z?A:void 0,onDisplayCost:$?M:void 0,onShowAgentTools:te?N:void 0,onShowSkills:ne?P:void 0,onShowHooks:re?ee:void 0,onTogglePublic:F,onCopyShareLink:I,shareUrl:L,onExportTranscript:e=>{e.preventDefault(),e.stopPropagation(),E(!0),w(!1)},onDownloadConversation:Q?j:void 0,position:`bottom`,anchorRef:O})]})]}),T&&v&&(0,_.jsx)(h.TranscriptExportModal,{conversationId:v,conversationUrl:y.conversation_url,sessionApiKey:y.session_api_key,conversationTitle:y.title,model:y.llm_model,onClose:()=>E(!1)}),(0,_.jsx)(s.SystemMessageModal,{isOpen:B,onClose:()=>V(!1),systemMessage:X||null}),H&&(0,_.jsx)(c.SkillsModal,{onClose:()=>U(!1)}),W&&(0,_.jsx)(l.HooksModal,{onClose:()=>G(!1)}),K&&(0,_.jsx)(p.ConfirmDeleteModal,{onConfirm:R,onCancel:()=>q(!1),conversationTitle:y?.title||``}),J&&(0,_.jsx)(m.ConfirmStopModal,{onConfirm:z,onCancel:()=>Y(!1)})]}):null}exports.ConversationName=v;
 //# sourceMappingURL=conversation-name.cjs.map