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

package/dist/components/features/chat/change-agent-context-menu.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(`../../../icons/lesson-plan.cjs`),i=require(`../../../icons/code-tag.cjs`),a=require(`../../../ui/context-menu.cjs`),o=require(`../context-menu/context-menu-list-item.cjs`),s=require(`../context-menu/context-menu-icon-text-with-description.cjs`),c=require(`../../../hooks/use-click-outside-element.cjs`);let l=require(`react`);l=e.__toESM(l,1);let u=require(`react/jsx-runtime`);function d({onClose:e,onCodeClick:l,onPlanClick:d}){let{t:f}=t.useTranslation(`openhands`),p=c.useClickOutsideElement(e);return(0,u.jsxs)(a.ContextMenu,{ref:p,testId:`change-agent-context-menu`,position:`top`,alignment:`left`,className:`min-h-fit mb-2 min-w-[195px] max-w-[195px] gap-0`,children:[(0,u.jsx)(o.ContextMenuListItem,{testId:`code-option`,onClick:t=>{t.preventDefault(),t.stopPropagation(),l?.(t),e()},children:(0,u.jsx)(s.ContextMenuIconTextWithDescription,{icon:i.default,title:f(n.I18nKey.COMMON$CODE),description:f(n.I18nKey.COMMON$CODE_AGENT_DESCRIPTION)})}),(0,u.jsx)(o.ContextMenuListItem,{testId:`plan-option`,onClick:t=>{t.preventDefault(),t.stopPropagation(),d?.(t),e()},children:(0,u.jsx)(s.ContextMenuIconTextWithDescription,{icon:r.default,title:f(n.I18nKey.COMMON$PLAN),description:f(n.I18nKey.COMMON$PLAN_AGENT_DESCRIPTION)})})]})}exports.ChangeAgentContextMenu=d;
+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/lesson-plan.cjs`),a=require(`../../../icons/code-tag.cjs`),o=require(`../../../ui/context-menu.cjs`),s=require(`../context-menu/context-menu-list-item.cjs`),c=require(`../context-menu/context-menu-icon-text-with-description.cjs`),l=require(`../../../hooks/use-click-outside-element.cjs`);let u=require(`react`);u=e.__toESM(u,1);let d=require(`react/jsx-runtime`);function f({activeMode:e,onClose:u,onCodeClick:f,onPlanClick:p}){let{t:m}=t.useTranslation(`openhands`),h=l.useClickOutsideElement(u);return(0,d.jsxs)(o.ContextMenu,{ref:h,testId:`change-agent-context-menu`,position:`top`,alignment:`left`,className:`min-h-fit mb-2 min-w-[195px] max-w-[195px]`,children:[(0,d.jsx)(s.ContextMenuListItem,{testId:`code-option`,onClick:e=>{e.preventDefault(),e.stopPropagation(),f?.(e),u()},className:r.cn(e===`code`&&`bg-[var(--oh-interactive-hover)]`),children:(0,d.jsx)(c.ContextMenuIconTextWithDescription,{icon:a.default,title:m(n.I18nKey.COMMON$CODE),description:m(n.I18nKey.COMMON$CODE_AGENT_DESCRIPTION),isActive:e===`code`})}),(0,d.jsx)(s.ContextMenuListItem,{testId:`plan-option`,onClick:e=>{e.preventDefault(),e.stopPropagation(),p?.(e),u()},className:r.cn(e===`plan`&&`bg-[var(--oh-interactive-hover)]`),children:(0,d.jsx)(c.ContextMenuIconTextWithDescription,{icon:i.default,title:m(n.I18nKey.COMMON$PLAN),description:m(n.I18nKey.COMMON$PLAN_AGENT_DESCRIPTION),isActive:e===`plan`})})]})}exports.ChangeAgentContextMenu=f;
 //# sourceMappingURL=change-agent-context-menu.cjs.map

package/dist/components/features/chat/change-agent-context-menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"change-agent-context-menu.cjs","names":[],"sources":["../../../../src/components/features/chat/change-agent-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport CodeTagIcon from \"#/icons/code-tag.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"../context-menu/context-menu-list-item\";\nimport { ContextMenuIconTextWithDescription } from \"../context-menu/context-menu-icon-text-with-description\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\n\ninterface ChangeAgentContextMenuProps {\n  onClose: () => void;\n  onCodeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onPlanClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport function ChangeAgentContextMenu({\n  onClose,\n  onCodeClick,\n  onPlanClick,\n}: ChangeAgentContextMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const menuRef = useClickOutsideElement<HTMLUListElement>(onClose);\n\n  const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onCodeClick?.(event);\n    onClose();\n  };\n\n  const handlePlanClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onPlanClick?.(event);\n    onClose();\n  };\n\n  return (\n    <ContextMenu\n      ref={menuRef}\n      testId=\"change-agent-context-menu\"\n      position=\"top\"\n      alignment=\"left\"\n      className=\"min-h-fit mb-2 min-w-[195px] max-w-[195px] gap-0\"\n    >\n      <ContextMenuListItem testId=\"code-option\" onClick={handleCodeClick}>\n        <ContextMenuIconTextWithDescription\n          icon={CodeTagIcon}\n          title={t(I18nKey.COMMON$CODE)}\n          description={t(I18nKey.COMMON$CODE_AGENT_DESCRIPTION)}\n        />\n      </ContextMenuListItem>\n      <ContextMenuListItem testId=\"plan-option\" onClick={handlePlanClick}>\n        <ContextMenuIconTextWithDescription\n          icon={LessonPlanIcon}\n          title={t(I18nKey.COMMON$PLAN)}\n          description={t(I18nKey.COMMON$PLAN_AGENT_DESCRIPTION)}\n        />\n      </ContextMenuListItem>\n    </ContextMenu>\n  );\n}\n"],"mappings":"ujBAgBA,SAAgB,EAAuB,CACrC,UACA,cACA,eAC8B,CAC9B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,EAAU,EAAA,uBAAyC,EAAQ,CAgBjE,OACE,EAAA,EAAA,MAAC,EAAA,YAAD,CACE,IAAK,EACL,OAAO,4BACP,SAAS,MACT,UAAU,OACV,UAAU,4DALZ,EAOE,EAAA,EAAA,KAAC,EAAA,oBAAD,CAAqB,OAAO,cAAc,QAtBrB,GAA+C,CACtE,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,IAAc,EAAM,CACpB,GAAS,YAmBL,EAAA,EAAA,KAAC,EAAA,mCAAD,CACE,KAAM,EAAA,QACN,MAAO,EAAE,EAAA,QAAQ,YAAY,CAC7B,YAAa,EAAE,EAAA,QAAQ,8BAA8B,CACrD,CAAA,CACkB,CAAA,EACtB,EAAA,EAAA,KAAC,EAAA,oBAAD,CAAqB,OAAO,cAAc,QAtBrB,GAA+C,CACtE,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,IAAc,EAAM,CACpB,GAAS,YAmBL,EAAA,EAAA,KAAC,EAAA,mCAAD,CACE,KAAM,EAAA,QACN,MAAO,EAAE,EAAA,QAAQ,YAAY,CAC7B,YAAa,EAAE,EAAA,QAAQ,8BAA8B,CACrD,CAAA,CACkB,CAAA,CACV"}
+{"version":3,"file":"change-agent-context-menu.cjs","names":[],"sources":["../../../../src/components/features/chat/change-agent-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport CodeTagIcon from \"#/icons/code-tag.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"../context-menu/context-menu-list-item\";\nimport { ContextMenuIconTextWithDescription } from \"../context-menu/context-menu-icon-text-with-description\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport type { ConversationMode } from \"#/stores/conversation-store\";\n\ninterface ChangeAgentContextMenuProps {\n  activeMode: ConversationMode;\n  onClose: () => void;\n  onCodeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onPlanClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport function ChangeAgentContextMenu({\n  activeMode,\n  onClose,\n  onCodeClick,\n  onPlanClick,\n}: ChangeAgentContextMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const menuRef = useClickOutsideElement<HTMLUListElement>(onClose);\n\n  const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onCodeClick?.(event);\n    onClose();\n  };\n\n  const handlePlanClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onPlanClick?.(event);\n    onClose();\n  };\n\n  return (\n    <ContextMenu\n      ref={menuRef}\n      testId=\"change-agent-context-menu\"\n      position=\"top\"\n      alignment=\"left\"\n      className=\"min-h-fit mb-2 min-w-[195px] max-w-[195px]\"\n    >\n      <ContextMenuListItem\n        testId=\"code-option\"\n        onClick={handleCodeClick}\n        className={cn(\n          activeMode === \"code\" && \"bg-[var(--oh-interactive-hover)]\",\n        )}\n      >\n        <ContextMenuIconTextWithDescription\n          icon={CodeTagIcon}\n          title={t(I18nKey.COMMON$CODE)}\n          description={t(I18nKey.COMMON$CODE_AGENT_DESCRIPTION)}\n          isActive={activeMode === \"code\"}\n        />\n      </ContextMenuListItem>\n      <ContextMenuListItem\n        testId=\"plan-option\"\n        onClick={handlePlanClick}\n        className={cn(\n          activeMode === \"plan\" && \"bg-[var(--oh-interactive-hover)]\",\n        )}\n      >\n        <ContextMenuIconTextWithDescription\n          icon={LessonPlanIcon}\n          title={t(I18nKey.COMMON$PLAN)}\n          description={t(I18nKey.COMMON$PLAN_AGENT_DESCRIPTION)}\n          isActive={activeMode === \"plan\"}\n        />\n      </ContextMenuListItem>\n    </ContextMenu>\n  );\n}\n"],"mappings":"6lBAmBA,SAAgB,EAAuB,CACrC,aACA,UACA,cACA,eAC8B,CAC9B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,EAAU,EAAA,uBAAyC,EAAQ,CAgBjE,OACE,EAAA,EAAA,MAAC,EAAA,YAAD,CACE,IAAK,EACL,OAAO,4BACP,SAAS,MACT,UAAU,OACV,UAAU,sDALZ,EAOE,EAAA,EAAA,KAAC,EAAA,oBAAD,CACE,OAAO,cACP,QAxBmB,GAA+C,CACtE,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,IAAc,EAAM,CACpB,GAAS,EAqBL,UAAW,EAAA,GACT,IAAe,QAAU,mCAC1B,WAED,EAAA,EAAA,KAAC,EAAA,mCAAD,CACE,KAAM,EAAA,QACN,MAAO,EAAE,EAAA,QAAQ,YAAY,CAC7B,YAAa,EAAE,EAAA,QAAQ,8BAA8B,CACrD,SAAU,IAAe,OACzB,CAAA,CACkB,CAAA,EACtB,EAAA,EAAA,KAAC,EAAA,oBAAD,CACE,OAAO,cACP,QA/BmB,GAA+C,CACtE,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,IAAc,EAAM,CACpB,GAAS,EA4BL,UAAW,EAAA,GACT,IAAe,QAAU,mCAC1B,WAED,EAAA,EAAA,KAAC,EAAA,mCAAD,CACE,KAAM,EAAA,QACN,MAAO,EAAE,EAAA,QAAQ,YAAY,CAC7B,YAAa,EAAE,EAAA,QAAQ,8BAA8B,CACrD,SAAU,IAAe,OACzB,CAAA,CACkB,CAAA,CACV"}

package/dist/components/features/chat/change-agent-context-menu.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
+import type { ConversationMode } from "#/stores/conversation-store";
 interface ChangeAgentContextMenuProps {
+    activeMode: ConversationMode;
     onClose: () => void;
     onCodeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onPlanClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
-export declare function ChangeAgentContextMenu({ onClose, onCodeClick, onPlanClick, }: ChangeAgentContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChangeAgentContextMenu({ activeMode, onClose, onCodeClick, onPlanClick, }: ChangeAgentContextMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/chat/change-agent-context-menu.js

@@ -1,46 +1,51 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
-import n from "../../../icons/lesson-plan.js";
-import r from "../../../icons/code-tag.js";
-import { ContextMenu as i } from "../../../ui/context-menu.js";
-import { ContextMenuListItem as a } from "../context-menu/context-menu-list-item.js";
-import { ContextMenuIconTextWithDescription as o } from "../context-menu/context-menu-icon-text-with-description.js";
-import { useClickOutsideElement as s } from "../../../hooks/use-click-outside-element.js";
+import { cn as n } from "../../../utils/utils.js";
+import r from "../../../icons/lesson-plan.js";
+import i from "../../../icons/code-tag.js";
+import { ContextMenu as a } from "../../../ui/context-menu.js";
+import { ContextMenuListItem as o } from "../context-menu/context-menu-list-item.js";
+import { ContextMenuIconTextWithDescription as s } from "../context-menu/context-menu-icon-text-with-description.js";
+import { useClickOutsideElement as c } from "../../../hooks/use-click-outside-element.js";
 import "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/features/chat/change-agent-context-menu.tsx
-function u({ onClose: u, onCodeClick: d, onPlanClick: f }) {
-	let { t: p } = e("openhands");
-	return /* @__PURE__ */ l(i, {
-		ref: s(u),
+function d({ activeMode: d, onClose: f, onCodeClick: p, onPlanClick: m }) {
+	let { t: h } = e("openhands");
+	return /* @__PURE__ */ u(a, {
+		ref: c(f),
 		testId: "change-agent-context-menu",
 		position: "top",
 		alignment: "left",
-		className: "min-h-fit mb-2 min-w-[195px] max-w-[195px] gap-0",
-		children: [/* @__PURE__ */ c(a, {
+		className: "min-h-fit mb-2 min-w-[195px] max-w-[195px]",
+		children: [/* @__PURE__ */ l(o, {
 			testId: "code-option",
 			onClick: (e) => {
-				e.preventDefault(), e.stopPropagation(), d?.(e), u();
+				e.preventDefault(), e.stopPropagation(), p?.(e), f();
 			},
-			children: /* @__PURE__ */ c(o, {
-				icon: r,
-				title: p(t.COMMON$CODE),
-				description: p(t.COMMON$CODE_AGENT_DESCRIPTION)
+			className: n(d === "code" && "bg-[var(--oh-interactive-hover)]"),
+			children: /* @__PURE__ */ l(s, {
+				icon: i,
+				title: h(t.COMMON$CODE),
+				description: h(t.COMMON$CODE_AGENT_DESCRIPTION),
+				isActive: d === "code"
 			})
-		}), /* @__PURE__ */ c(a, {
+		}), /* @__PURE__ */ l(o, {
 			testId: "plan-option",
 			onClick: (e) => {
-				e.preventDefault(), e.stopPropagation(), f?.(e), u();
+				e.preventDefault(), e.stopPropagation(), m?.(e), f();
 			},
-			children: /* @__PURE__ */ c(o, {
-				icon: n,
-				title: p(t.COMMON$PLAN),
-				description: p(t.COMMON$PLAN_AGENT_DESCRIPTION)
+			className: n(d === "plan" && "bg-[var(--oh-interactive-hover)]"),
+			children: /* @__PURE__ */ l(s, {
+				icon: r,
+				title: h(t.COMMON$PLAN),
+				description: h(t.COMMON$PLAN_AGENT_DESCRIPTION),
+				isActive: d === "plan"
 			})
 		})]
 	});
 }
 //#endregion
-export { u as ChangeAgentContextMenu };
+export { d as ChangeAgentContextMenu };
 
 //# sourceMappingURL=change-agent-context-menu.js.map

package/dist/components/features/chat/change-agent-context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"change-agent-context-menu.js","names":[],"sources":["../../../../src/components/features/chat/change-agent-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport CodeTagIcon from \"#/icons/code-tag.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"../context-menu/context-menu-list-item\";\nimport { ContextMenuIconTextWithDescription } from \"../context-menu/context-menu-icon-text-with-description\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\n\ninterface ChangeAgentContextMenuProps {\n  onClose: () => void;\n  onCodeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onPlanClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport function ChangeAgentContextMenu({\n  onClose,\n  onCodeClick,\n  onPlanClick,\n}: ChangeAgentContextMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const menuRef = useClickOutsideElement<HTMLUListElement>(onClose);\n\n  const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onCodeClick?.(event);\n    onClose();\n  };\n\n  const handlePlanClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onPlanClick?.(event);\n    onClose();\n  };\n\n  return (\n    <ContextMenu\n      ref={menuRef}\n      testId=\"change-agent-context-menu\"\n      position=\"top\"\n      alignment=\"left\"\n      className=\"min-h-fit mb-2 min-w-[195px] max-w-[195px] gap-0\"\n    >\n      <ContextMenuListItem testId=\"code-option\" onClick={handleCodeClick}>\n        <ContextMenuIconTextWithDescription\n          icon={CodeTagIcon}\n          title={t(I18nKey.COMMON$CODE)}\n          description={t(I18nKey.COMMON$CODE_AGENT_DESCRIPTION)}\n        />\n      </ContextMenuListItem>\n      <ContextMenuListItem testId=\"plan-option\" onClick={handlePlanClick}>\n        <ContextMenuIconTextWithDescription\n          icon={LessonPlanIcon}\n          title={t(I18nKey.COMMON$PLAN)}\n          description={t(I18nKey.COMMON$PLAN_AGENT_DESCRIPTION)}\n        />\n      </ContextMenuListItem>\n    </ContextMenu>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgB,EAAuB,EACrC,YACA,gBACA,kBAC8B;CAC9B,IAAM,EAAE,SAAM,EAAe,YAAY;AAiBzC,QACE,kBAAC,GAAD;EACE,KAlBY,EAAyC,EAkBhD;EACL,QAAO;EACP,UAAS;EACT,WAAU;EACV,WAAU;YALZ,CAOE,kBAAC,GAAD;GAAqB,QAAO;GAAc,UAtBrB,MAA+C;AAItE,IAHA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,IAAc,EAAM,EACpB,GAAS;;aAmBL,kBAAC,GAAD;IACE,MAAM;IACN,OAAO,EAAE,EAAQ,YAAY;IAC7B,aAAa,EAAE,EAAQ,8BAA8B;IACrD,CAAA;GACkB,CAAA,EACtB,kBAAC,GAAD;GAAqB,QAAO;GAAc,UAtBrB,MAA+C;AAItE,IAHA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,IAAc,EAAM,EACpB,GAAS;;aAmBL,kBAAC,GAAD;IACE,MAAM;IACN,OAAO,EAAE,EAAQ,YAAY;IAC7B,aAAa,EAAE,EAAQ,8BAA8B;IACrD,CAAA;GACkB,CAAA,CACV"}
+{"version":3,"file":"change-agent-context-menu.js","names":[],"sources":["../../../../src/components/features/chat/change-agent-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport CodeTagIcon from \"#/icons/code-tag.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"../context-menu/context-menu-list-item\";\nimport { ContextMenuIconTextWithDescription } from \"../context-menu/context-menu-icon-text-with-description\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport type { ConversationMode } from \"#/stores/conversation-store\";\n\ninterface ChangeAgentContextMenuProps {\n  activeMode: ConversationMode;\n  onClose: () => void;\n  onCodeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onPlanClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport function ChangeAgentContextMenu({\n  activeMode,\n  onClose,\n  onCodeClick,\n  onPlanClick,\n}: ChangeAgentContextMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const menuRef = useClickOutsideElement<HTMLUListElement>(onClose);\n\n  const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onCodeClick?.(event);\n    onClose();\n  };\n\n  const handlePlanClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onPlanClick?.(event);\n    onClose();\n  };\n\n  return (\n    <ContextMenu\n      ref={menuRef}\n      testId=\"change-agent-context-menu\"\n      position=\"top\"\n      alignment=\"left\"\n      className=\"min-h-fit mb-2 min-w-[195px] max-w-[195px]\"\n    >\n      <ContextMenuListItem\n        testId=\"code-option\"\n        onClick={handleCodeClick}\n        className={cn(\n          activeMode === \"code\" && \"bg-[var(--oh-interactive-hover)]\",\n        )}\n      >\n        <ContextMenuIconTextWithDescription\n          icon={CodeTagIcon}\n          title={t(I18nKey.COMMON$CODE)}\n          description={t(I18nKey.COMMON$CODE_AGENT_DESCRIPTION)}\n          isActive={activeMode === \"code\"}\n        />\n      </ContextMenuListItem>\n      <ContextMenuListItem\n        testId=\"plan-option\"\n        onClick={handlePlanClick}\n        className={cn(\n          activeMode === \"plan\" && \"bg-[var(--oh-interactive-hover)]\",\n        )}\n      >\n        <ContextMenuIconTextWithDescription\n          icon={LessonPlanIcon}\n          title={t(I18nKey.COMMON$PLAN)}\n          description={t(I18nKey.COMMON$PLAN_AGENT_DESCRIPTION)}\n          isActive={activeMode === \"plan\"}\n        />\n      </ContextMenuListItem>\n    </ContextMenu>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,EAAuB,EACrC,eACA,YACA,gBACA,kBAC8B;CAC9B,IAAM,EAAE,SAAM,EAAe,YAAY;AAiBzC,QACE,kBAAC,GAAD;EACE,KAlBY,EAAyC,EAkBhD;EACL,QAAO;EACP,UAAS;EACT,WAAU;EACV,WAAU;YALZ,CAOE,kBAAC,GAAD;GACE,QAAO;GACP,UAxBmB,MAA+C;AAItE,IAHA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,IAAc,EAAM,EACpB,GAAS;;GAqBL,WAAW,EACT,MAAe,UAAU,mCAC1B;aAED,kBAAC,GAAD;IACE,MAAM;IACN,OAAO,EAAE,EAAQ,YAAY;IAC7B,aAAa,EAAE,EAAQ,8BAA8B;IACrD,UAAU,MAAe;IACzB,CAAA;GACkB,CAAA,EACtB,kBAAC,GAAD;GACE,QAAO;GACP,UA/BmB,MAA+C;AAItE,IAHA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,IAAc,EAAM,EACpB,GAAS;;GA4BL,WAAW,EACT,MAAe,UAAU,mCAC1B;aAED,kBAAC,GAAD;IACE,MAAM;IACN,OAAO,EAAE,EAAQ,YAAY;IAC7B,aAAa,EAAE,EAAQ,8BAA8B;IACrD,UAAU,MAAe;IACzB,CAAA;GACkB,CAAA,CACV"}

package/dist/components/features/chat/chat-add-file-button.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(`../../../hooks/use-conversation-id.cjs`),a=require(`../../../node_modules/lucide-react/dist/esm/icons/paperclip.cjs`),o=require(`../../../node_modules/lucide-react/dist/esm/icons/plus.cjs`),s=require(`../../../hooks/query/use-active-conversation.cjs`),c=require(`../../../hooks/use-conversation-name-context-menu.cjs`),l=require(`../controls/tools-context-menu.cjs`),u=require(`../conversation-panel/system-message-modal.cjs`),d=require(`../conversation-panel/skills-modal.cjs`),f=require(`../conversation-panel/hooks-modal.cjs`);let p=require(`react`);p=e.__toESM(p,1);let m=require(`react/jsx-runtime`);function h({handleFileIconClick:e,disabled:h=!1}){let{t:g}=t.useTranslation(`openhands`),{conversationId:_}=i.useOptionalConversationId(),{data:v}=s.useActiveConversation(),[y,b]=p.default.useState(!1),{handleShowAgentTools:x,handleShowSkills:S,handleShowHooks:C,systemModalVisible:w,setSystemModalVisible:T,skillsModalVisible:E,setSkillsModalVisible:D,hooksModalVisible:O,setHooksModalVisible:k,systemMessage:A,shouldShowAgentTools:j,shouldShowHooks:M}=c.useConversationNameContextMenu({conversationId:_??void 0,executionStatus:v?.execution_status,showOptions:!0,onContextMenuToggle:b});return(0,m.jsxs)(`div`,{className:`relative`,children:[(0,m.jsx)(`button`,{type:`button`,className:r.cn(`relative shrink-0 size-6 rounded-full transition-colors`,h?`cursor-not-allowed text-[var(--oh-text-subtle)]`:`cursor-pointer text-[var(--oh-muted)] hover:text-white hover:bg-white/10`,y&&!h&&`text-white bg-white/10`),"aria-label":g(n.I18nKey.CHAT_INTERFACE$PLUS_MENU),"aria-expanded":y,"aria-haspopup":`menu`,"data-testid":`chat-plus-button`,onClick:e=>{e.preventDefault(),e.stopPropagation(),!h&&b(e=>!e)},disabled:h,children:(0,m.jsx)(`span`,{className:`flex h-full w-full items-center justify-center`,children:(0,m.jsx)(o.Plus,{className:`h-[13px] w-[13px] shrink-0`,strokeWidth:2})})}),y&&(0,m.jsx)(l.ToolsContextMenu,{onClose:()=>b(!1),onShowSkills:S,onShowHooks:C,onShowAgentTools:x,shouldShowAgentTools:j,shouldShowHooks:M,footerAction:{testId:`add-files-and-images-button`,icon:(0,m.jsx)(a.Paperclip,{className:`h-4 w-4 shrink-0`,strokeWidth:2,"aria-hidden":!0}),label:g(n.I18nKey.CHAT_INTERFACE$ADD_FILES_AND_IMAGES),onClick:e}}),(0,m.jsx)(u.SystemMessageModal,{isOpen:w,onClose:()=>T(!1),systemMessage:A||null}),E&&(0,m.jsx)(d.SkillsModal,{onClose:()=>D(!1)}),O&&(0,m.jsx)(f.HooksModal,{onClose:()=>k(!1)})]})}exports.ChatAddFileButton=h;
+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(`../../../hooks/use-conversation-id.cjs`),a=require(`../../../node_modules/lucide-react/dist/esm/icons/paperclip.cjs`),o=require(`../../../node_modules/lucide-react/dist/esm/icons/plus.cjs`),s=require(`../../../hooks/query/use-active-conversation.cjs`),c=require(`../../../utils/form-control-classes.cjs`),l=require(`../../../hooks/use-conversation-name-context-menu.cjs`),u=require(`../controls/tools-context-menu.cjs`),d=require(`../conversation-panel/system-message-modal.cjs`),f=require(`../conversation-panel/skills-modal.cjs`),p=require(`../conversation-panel/hooks-modal.cjs`);let m=require(`react`);m=e.__toESM(m,1);let h=require(`react/jsx-runtime`);function g({handleFileIconClick:e,disabled:g=!1}){let{t:_}=t.useTranslation(`openhands`),{conversationId:v}=i.useOptionalConversationId(),{data:y}=s.useActiveConversation(),[b,x]=m.default.useState(!1),{handleShowAgentTools:S,handleShowSkills:C,handleShowHooks:w,systemModalVisible:T,setSystemModalVisible:E,skillsModalVisible:D,setSkillsModalVisible:O,hooksModalVisible:k,setHooksModalVisible:A,systemMessage:j,shouldShowAgentTools:M,shouldShowHooks:N}=l.useConversationNameContextMenu({conversationId:v??void 0,executionStatus:y?.execution_status,showOptions:!0,onContextMenuToggle:x});return(0,h.jsxs)(`div`,{className:`relative`,children:[(0,h.jsx)(`button`,{type:`button`,className:r.cn(c.chatInputIconButtonClassName,`relative shrink-0 size-6`,g?`cursor-not-allowed text-[var(--oh-text-subtle)]`:void 0,b&&!g&&`text-white bg-white/10`),"aria-label":_(n.I18nKey.CHAT_INTERFACE$PLUS_MENU),"aria-expanded":b,"aria-haspopup":`menu`,"data-testid":`chat-plus-button`,onClick:e=>{e.preventDefault(),e.stopPropagation(),!g&&x(e=>!e)},disabled:g,children:(0,h.jsx)(`span`,{className:`flex h-full w-full items-center justify-center`,children:(0,h.jsx)(o.Plus,{className:`h-[13px] w-[13px] shrink-0`,strokeWidth:2})})}),b&&(0,h.jsx)(u.ToolsContextMenu,{onClose:()=>x(!1),onShowSkills:C,onShowHooks:w,onShowAgentTools:S,shouldShowAgentTools:M,shouldShowHooks:N,footerAction:{testId:`add-files-and-images-button`,icon:(0,h.jsx)(a.Paperclip,{className:`h-4 w-4 shrink-0`,strokeWidth:2,"aria-hidden":!0}),label:_(n.I18nKey.CHAT_INTERFACE$ADD_FILES_AND_IMAGES),onClick:e}}),(0,h.jsx)(d.SystemMessageModal,{isOpen:T,onClose:()=>E(!1),systemMessage:j||null}),D&&(0,h.jsx)(f.SkillsModal,{onClose:()=>O(!1)}),k&&(0,h.jsx)(p.HooksModal,{onClose:()=>A(!1)})]})}exports.ChatAddFileButton=g;
 //# sourceMappingURL=chat-add-file-button.cjs.map

package/dist/components/features/chat/chat-add-file-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat-add-file-button.cjs","names":[],"sources":["../../../../src/components/features/chat/chat-add-file-button.tsx"],"sourcesContent":["import React from \"react\";\nimport { Paperclip, Plus } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useConversationNameContextMenu } from \"#/hooks/use-conversation-name-context-menu\";\nimport { ToolsContextMenu } from \"#/components/features/controls/tools-context-menu\";\nimport { SystemMessageModal } from \"#/components/features/conversation-panel/system-message-modal\";\nimport { SkillsModal } from \"#/components/features/conversation-panel/skills-modal\";\nimport { HooksModal } from \"#/components/features/conversation-panel/hooks-modal\";\n\nexport interface ChatAddFileButtonProps {\n  handleFileIconClick: () => void;\n  disabled?: boolean;\n}\n\nexport function ChatAddFileButton({\n  handleFileIconClick,\n  disabled = false,\n}: ChatAddFileButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useOptionalConversationId();\n  const { data: conversation } = useActiveConversation();\n  const [menuOpen, setMenuOpen] = React.useState(false);\n\n  const {\n    handleShowAgentTools,\n    handleShowSkills,\n    handleShowHooks,\n    systemModalVisible,\n    setSystemModalVisible,\n    skillsModalVisible,\n    setSkillsModalVisible,\n    hooksModalVisible,\n    setHooksModalVisible,\n    systemMessage,\n    shouldShowAgentTools,\n    shouldShowHooks,\n  } = useConversationNameContextMenu({\n    conversationId: conversationId ?? undefined,\n    executionStatus: conversation?.execution_status,\n    showOptions: true,\n    onContextMenuToggle: setMenuOpen,\n  });\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (disabled) return;\n    setMenuOpen((open) => !open);\n  };\n\n  return (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        className={cn(\n          \"relative shrink-0 size-6 rounded-full transition-colors\",\n          disabled\n            ? \"cursor-not-allowed text-[var(--oh-text-subtle)]\"\n            : \"cursor-pointer text-[var(--oh-muted)] hover:text-white hover:bg-white/10\",\n          menuOpen && !disabled && \"text-white bg-white/10\",\n        )}\n        aria-label={t(I18nKey.CHAT_INTERFACE$PLUS_MENU)}\n        aria-expanded={menuOpen}\n        aria-haspopup=\"menu\"\n        data-testid=\"chat-plus-button\"\n        onClick={handleClick}\n        disabled={disabled}\n      >\n        <span className=\"flex h-full w-full items-center justify-center\">\n          <Plus className=\"h-[13px] w-[13px] shrink-0\" strokeWidth={2} />\n        </span>\n      </button>\n\n      {menuOpen && (\n        <ToolsContextMenu\n          onClose={() => setMenuOpen(false)}\n          onShowSkills={handleShowSkills}\n          onShowHooks={handleShowHooks}\n          onShowAgentTools={handleShowAgentTools}\n          shouldShowAgentTools={shouldShowAgentTools}\n          shouldShowHooks={shouldShowHooks}\n          footerAction={{\n            testId: \"add-files-and-images-button\",\n            icon: (\n              <Paperclip\n                className=\"h-4 w-4 shrink-0\"\n                strokeWidth={2}\n                aria-hidden\n              />\n            ),\n            label: t(I18nKey.CHAT_INTERFACE$ADD_FILES_AND_IMAGES),\n            onClick: handleFileIconClick,\n          }}\n        />\n      )}\n\n      <SystemMessageModal\n        isOpen={systemModalVisible}\n        onClose={() => setSystemModalVisible(false)}\n        systemMessage={systemMessage || null}\n      />\n      {skillsModalVisible && (\n        <SkillsModal onClose={() => setSkillsModalVisible(false)} />\n      )}\n      {hooksModalVisible && (\n        <HooksModal onClose={() => setHooksModalVisible(false)} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"g0BAkBA,SAAgB,EAAkB,CAChC,sBACA,WAAW,IACc,CACzB,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,kBAAmB,EAAA,2BAA2B,CAChD,CAAE,KAAM,GAAiB,EAAA,uBAAuB,CAChD,CAAC,EAAU,GAAe,EAAA,QAAM,SAAS,GAAM,CAE/C,CACJ,uBACA,mBACA,kBACA,qBACA,wBACA,qBACA,wBACA,oBACA,uBACA,gBACA,uBACA,mBACE,EAAA,+BAA+B,CACjC,eAAgB,GAAkB,IAAA,GAClC,gBAAiB,GAAc,iBAC/B,YAAa,GACb,oBAAqB,EACtB,CAAC,CASF,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,oBAAf,EACE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,GACT,0DACA,EACI,kDACA,2EACJ,GAAY,CAAC,GAAY,yBAC1B,CACD,aAAY,EAAE,EAAA,QAAQ,yBAAyB,CAC/C,gBAAe,EACf,gBAAc,OACd,cAAY,mBACZ,QAtBe,GAA+C,CAClE,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACnB,IACJ,EAAa,GAAS,CAAC,EAAK,EAmBd,qBAEV,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2DACd,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,UAAU,6BAA6B,YAAa,EAAK,CAAA,CAC1D,CAAA,CACA,CAAA,CAER,IACC,EAAA,EAAA,KAAC,EAAA,iBAAD,CACE,YAAe,EAAY,GAAM,CACjC,aAAc,EACd,YAAa,EACb,iBAAkB,EACI,uBACL,kBACjB,aAAc,CACZ,OAAQ,8BACR,MACE,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,UAAU,mBACV,YAAa,EACb,cAAA,GACA,CAAA,CAEJ,MAAO,EAAE,EAAA,QAAQ,oCAAoC,CACrD,QAAS,EACV,CACD,CAAA,EAGJ,EAAA,EAAA,KAAC,EAAA,mBAAD,CACE,OAAQ,EACR,YAAe,EAAsB,GAAM,CAC3C,cAAe,GAAiB,KAChC,CAAA,CACD,IACC,EAAA,EAAA,KAAC,EAAA,YAAD,CAAa,YAAe,EAAsB,GAAM,CAAI,CAAA,CAE7D,IACC,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,YAAe,EAAqB,GAAM,CAAI,CAAA,CAExD"}
+{"version":3,"file":"chat-add-file-button.cjs","names":[],"sources":["../../../../src/components/features/chat/chat-add-file-button.tsx"],"sourcesContent":["import React from \"react\";\nimport { Paperclip, Plus } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputIconButtonClassName } from \"#/utils/form-control-classes\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useConversationNameContextMenu } from \"#/hooks/use-conversation-name-context-menu\";\nimport { ToolsContextMenu } from \"#/components/features/controls/tools-context-menu\";\nimport { SystemMessageModal } from \"#/components/features/conversation-panel/system-message-modal\";\nimport { SkillsModal } from \"#/components/features/conversation-panel/skills-modal\";\nimport { HooksModal } from \"#/components/features/conversation-panel/hooks-modal\";\n\nexport interface ChatAddFileButtonProps {\n  handleFileIconClick: () => void;\n  disabled?: boolean;\n}\n\nexport function ChatAddFileButton({\n  handleFileIconClick,\n  disabled = false,\n}: ChatAddFileButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useOptionalConversationId();\n  const { data: conversation } = useActiveConversation();\n  const [menuOpen, setMenuOpen] = React.useState(false);\n\n  const {\n    handleShowAgentTools,\n    handleShowSkills,\n    handleShowHooks,\n    systemModalVisible,\n    setSystemModalVisible,\n    skillsModalVisible,\n    setSkillsModalVisible,\n    hooksModalVisible,\n    setHooksModalVisible,\n    systemMessage,\n    shouldShowAgentTools,\n    shouldShowHooks,\n  } = useConversationNameContextMenu({\n    conversationId: conversationId ?? undefined,\n    executionStatus: conversation?.execution_status,\n    showOptions: true,\n    onContextMenuToggle: setMenuOpen,\n  });\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (disabled) return;\n    setMenuOpen((open) => !open);\n  };\n\n  return (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        className={cn(\n          chatInputIconButtonClassName,\n          \"relative shrink-0 size-6\",\n          disabled\n            ? \"cursor-not-allowed text-[var(--oh-text-subtle)]\"\n            : undefined,\n          menuOpen && !disabled && \"text-white bg-white/10\",\n        )}\n        aria-label={t(I18nKey.CHAT_INTERFACE$PLUS_MENU)}\n        aria-expanded={menuOpen}\n        aria-haspopup=\"menu\"\n        data-testid=\"chat-plus-button\"\n        onClick={handleClick}\n        disabled={disabled}\n      >\n        <span className=\"flex h-full w-full items-center justify-center\">\n          <Plus className=\"h-[13px] w-[13px] shrink-0\" strokeWidth={2} />\n        </span>\n      </button>\n\n      {menuOpen && (\n        <ToolsContextMenu\n          onClose={() => setMenuOpen(false)}\n          onShowSkills={handleShowSkills}\n          onShowHooks={handleShowHooks}\n          onShowAgentTools={handleShowAgentTools}\n          shouldShowAgentTools={shouldShowAgentTools}\n          shouldShowHooks={shouldShowHooks}\n          footerAction={{\n            testId: \"add-files-and-images-button\",\n            icon: (\n              <Paperclip\n                className=\"h-4 w-4 shrink-0\"\n                strokeWidth={2}\n                aria-hidden\n              />\n            ),\n            label: t(I18nKey.CHAT_INTERFACE$ADD_FILES_AND_IMAGES),\n            onClick: handleFileIconClick,\n          }}\n        />\n      )}\n\n      <SystemMessageModal\n        isOpen={systemModalVisible}\n        onClose={() => setSystemModalVisible(false)}\n        systemMessage={systemMessage || null}\n      />\n      {skillsModalVisible && (\n        <SkillsModal onClose={() => setSkillsModalVisible(false)} />\n      )}\n      {hooksModalVisible && (\n        <HooksModal onClose={() => setHooksModalVisible(false)} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"q3BAmBA,SAAgB,EAAkB,CAChC,sBACA,WAAW,IACc,CACzB,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,kBAAmB,EAAA,2BAA2B,CAChD,CAAE,KAAM,GAAiB,EAAA,uBAAuB,CAChD,CAAC,EAAU,GAAe,EAAA,QAAM,SAAS,GAAM,CAE/C,CACJ,uBACA,mBACA,kBACA,qBACA,wBACA,qBACA,wBACA,oBACA,uBACA,gBACA,uBACA,mBACE,EAAA,+BAA+B,CACjC,eAAgB,GAAkB,IAAA,GAClC,gBAAiB,GAAc,iBAC/B,YAAa,GACb,oBAAqB,EACtB,CAAC,CASF,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,oBAAf,EACE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,GACT,EAAA,6BACA,2BACA,EACI,kDACA,IAAA,GACJ,GAAY,CAAC,GAAY,yBAC1B,CACD,aAAY,EAAE,EAAA,QAAQ,yBAAyB,CAC/C,gBAAe,EACf,gBAAc,OACd,cAAY,mBACZ,QAvBe,GAA+C,CAClE,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACnB,IACJ,EAAa,GAAS,CAAC,EAAK,EAoBd,qBAEV,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2DACd,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,UAAU,6BAA6B,YAAa,EAAK,CAAA,CAC1D,CAAA,CACA,CAAA,CAER,IACC,EAAA,EAAA,KAAC,EAAA,iBAAD,CACE,YAAe,EAAY,GAAM,CACjC,aAAc,EACd,YAAa,EACb,iBAAkB,EACI,uBACL,kBACjB,aAAc,CACZ,OAAQ,8BACR,MACE,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,UAAU,mBACV,YAAa,EACb,cAAA,GACA,CAAA,CAEJ,MAAO,EAAE,EAAA,QAAQ,oCAAoC,CACrD,QAAS,EACV,CACD,CAAA,EAGJ,EAAA,EAAA,KAAC,EAAA,mBAAD,CACE,OAAQ,EACR,YAAe,EAAsB,GAAM,CAC3C,cAAe,GAAiB,KAChC,CAAA,CACD,IACC,EAAA,EAAA,KAAC,EAAA,YAAD,CAAa,YAAe,EAAsB,GAAM,CAAI,CAAA,CAE7D,IACC,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,YAAe,EAAqB,GAAM,CAAI,CAAA,CAExD"}

package/dist/components/features/chat/chat-add-file-button.js

@@ -5,72 +5,73 @@ import { useOptionalConversationId as r } from "../../../hooks/use-conversation-
 import { Paperclip as i } from "../../../node_modules/lucide-react/dist/esm/icons/paperclip.js";
 import { Plus as a } from "../../../node_modules/lucide-react/dist/esm/icons/plus.js";
 import { useActiveConversation as o } from "../../../hooks/query/use-active-conversation.js";
-import { useConversationNameContextMenu as s } from "../../../hooks/use-conversation-name-context-menu.js";
-import { ToolsContextMenu as c } from "../controls/tools-context-menu.js";
-import { SystemMessageModal as l } from "../conversation-panel/system-message-modal.js";
-import { SkillsModal as u } from "../conversation-panel/skills-modal.js";
-import { HooksModal as d } from "../conversation-panel/hooks-modal.js";
-import f from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { chatInputIconButtonClassName as s } from "../../../utils/form-control-classes.js";
+import { useConversationNameContextMenu as c } from "../../../hooks/use-conversation-name-context-menu.js";
+import { ToolsContextMenu as l } from "../controls/tools-context-menu.js";
+import { SystemMessageModal as u } from "../conversation-panel/system-message-modal.js";
+import { SkillsModal as d } from "../conversation-panel/skills-modal.js";
+import { HooksModal as f } from "../conversation-panel/hooks-modal.js";
+import p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/features/chat/chat-add-file-button.tsx
-function h({ handleFileIconClick: h, disabled: g = !1 }) {
-	let { t: _ } = e("openhands"), { conversationId: v } = r(), { data: y } = o(), [b, x] = f.useState(!1), { handleShowAgentTools: S, handleShowSkills: C, handleShowHooks: w, systemModalVisible: T, setSystemModalVisible: E, skillsModalVisible: D, setSkillsModalVisible: O, hooksModalVisible: k, setHooksModalVisible: A, systemMessage: j, shouldShowAgentTools: M, shouldShowHooks: N } = s({
-		conversationId: v ?? void 0,
-		executionStatus: y?.execution_status,
+function g({ handleFileIconClick: g, disabled: _ = !1 }) {
+	let { t: v } = e("openhands"), { conversationId: y } = r(), { data: b } = o(), [x, S] = p.useState(!1), { handleShowAgentTools: C, handleShowSkills: w, handleShowHooks: T, systemModalVisible: E, setSystemModalVisible: D, skillsModalVisible: O, setSkillsModalVisible: k, hooksModalVisible: A, setHooksModalVisible: j, systemMessage: M, shouldShowAgentTools: N, shouldShowHooks: P } = c({
+		conversationId: y ?? void 0,
+		executionStatus: b?.execution_status,
 		showOptions: !0,
-		onContextMenuToggle: x
+		onContextMenuToggle: S
 	});
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ h("div", {
 		className: "relative",
 		children: [
-			/* @__PURE__ */ p("button", {
+			/* @__PURE__ */ m("button", {
 				type: "button",
-				className: n("relative shrink-0 size-6 rounded-full transition-colors", g ? "cursor-not-allowed text-[var(--oh-text-subtle)]" : "cursor-pointer text-[var(--oh-muted)] hover:text-white hover:bg-white/10", b && !g && "text-white bg-white/10"),
-				"aria-label": _(t.CHAT_INTERFACE$PLUS_MENU),
-				"aria-expanded": b,
+				className: n(s, "relative shrink-0 size-6", _ ? "cursor-not-allowed text-[var(--oh-text-subtle)]" : void 0, x && !_ && "text-white bg-white/10"),
+				"aria-label": v(t.CHAT_INTERFACE$PLUS_MENU),
+				"aria-expanded": x,
 				"aria-haspopup": "menu",
 				"data-testid": "chat-plus-button",
 				onClick: (e) => {
-					e.preventDefault(), e.stopPropagation(), !g && x((e) => !e);
+					e.preventDefault(), e.stopPropagation(), !_ && S((e) => !e);
 				},
-				disabled: g,
-				children: /* @__PURE__ */ p("span", {
+				disabled: _,
+				children: /* @__PURE__ */ m("span", {
 					className: "flex h-full w-full items-center justify-center",
-					children: /* @__PURE__ */ p(a, {
+					children: /* @__PURE__ */ m(a, {
 						className: "h-[13px] w-[13px] shrink-0",
 						strokeWidth: 2
 					})
 				})
 			}),
-			b && /* @__PURE__ */ p(c, {
-				onClose: () => x(!1),
-				onShowSkills: C,
-				onShowHooks: w,
-				onShowAgentTools: S,
-				shouldShowAgentTools: M,
-				shouldShowHooks: N,
+			x && /* @__PURE__ */ m(l, {
+				onClose: () => S(!1),
+				onShowSkills: w,
+				onShowHooks: T,
+				onShowAgentTools: C,
+				shouldShowAgentTools: N,
+				shouldShowHooks: P,
 				footerAction: {
 					testId: "add-files-and-images-button",
-					icon: /* @__PURE__ */ p(i, {
+					icon: /* @__PURE__ */ m(i, {
 						className: "h-4 w-4 shrink-0",
 						strokeWidth: 2,
 						"aria-hidden": !0
 					}),
-					label: _(t.CHAT_INTERFACE$ADD_FILES_AND_IMAGES),
-					onClick: h
+					label: v(t.CHAT_INTERFACE$ADD_FILES_AND_IMAGES),
+					onClick: g
 				}
 			}),
-			/* @__PURE__ */ p(l, {
-				isOpen: T,
-				onClose: () => E(!1),
-				systemMessage: j || null
+			/* @__PURE__ */ m(u, {
+				isOpen: E,
+				onClose: () => D(!1),
+				systemMessage: M || null
 			}),
-			D && /* @__PURE__ */ p(u, { onClose: () => O(!1) }),
-			k && /* @__PURE__ */ p(d, { onClose: () => A(!1) })
+			O && /* @__PURE__ */ m(d, { onClose: () => k(!1) }),
+			A && /* @__PURE__ */ m(f, { onClose: () => j(!1) })
 		]
 	});
 }
 //#endregion
-export { h as ChatAddFileButton };
+export { g as ChatAddFileButton };
 
 //# sourceMappingURL=chat-add-file-button.js.map

package/dist/components/features/chat/chat-add-file-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-add-file-button.js","names":[],"sources":["../../../../src/components/features/chat/chat-add-file-button.tsx"],"sourcesContent":["import React from \"react\";\nimport { Paperclip, Plus } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useConversationNameContextMenu } from \"#/hooks/use-conversation-name-context-menu\";\nimport { ToolsContextMenu } from \"#/components/features/controls/tools-context-menu\";\nimport { SystemMessageModal } from \"#/components/features/conversation-panel/system-message-modal\";\nimport { SkillsModal } from \"#/components/features/conversation-panel/skills-modal\";\nimport { HooksModal } from \"#/components/features/conversation-panel/hooks-modal\";\n\nexport interface ChatAddFileButtonProps {\n  handleFileIconClick: () => void;\n  disabled?: boolean;\n}\n\nexport function ChatAddFileButton({\n  handleFileIconClick,\n  disabled = false,\n}: ChatAddFileButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useOptionalConversationId();\n  const { data: conversation } = useActiveConversation();\n  const [menuOpen, setMenuOpen] = React.useState(false);\n\n  const {\n    handleShowAgentTools,\n    handleShowSkills,\n    handleShowHooks,\n    systemModalVisible,\n    setSystemModalVisible,\n    skillsModalVisible,\n    setSkillsModalVisible,\n    hooksModalVisible,\n    setHooksModalVisible,\n    systemMessage,\n    shouldShowAgentTools,\n    shouldShowHooks,\n  } = useConversationNameContextMenu({\n    conversationId: conversationId ?? undefined,\n    executionStatus: conversation?.execution_status,\n    showOptions: true,\n    onContextMenuToggle: setMenuOpen,\n  });\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (disabled) return;\n    setMenuOpen((open) => !open);\n  };\n\n  return (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        className={cn(\n          \"relative shrink-0 size-6 rounded-full transition-colors\",\n          disabled\n            ? \"cursor-not-allowed text-[var(--oh-text-subtle)]\"\n            : \"cursor-pointer text-[var(--oh-muted)] hover:text-white hover:bg-white/10\",\n          menuOpen && !disabled && \"text-white bg-white/10\",\n        )}\n        aria-label={t(I18nKey.CHAT_INTERFACE$PLUS_MENU)}\n        aria-expanded={menuOpen}\n        aria-haspopup=\"menu\"\n        data-testid=\"chat-plus-button\"\n        onClick={handleClick}\n        disabled={disabled}\n      >\n        <span className=\"flex h-full w-full items-center justify-center\">\n          <Plus className=\"h-[13px] w-[13px] shrink-0\" strokeWidth={2} />\n        </span>\n      </button>\n\n      {menuOpen && (\n        <ToolsContextMenu\n          onClose={() => setMenuOpen(false)}\n          onShowSkills={handleShowSkills}\n          onShowHooks={handleShowHooks}\n          onShowAgentTools={handleShowAgentTools}\n          shouldShowAgentTools={shouldShowAgentTools}\n          shouldShowHooks={shouldShowHooks}\n          footerAction={{\n            testId: \"add-files-and-images-button\",\n            icon: (\n              <Paperclip\n                className=\"h-4 w-4 shrink-0\"\n                strokeWidth={2}\n                aria-hidden\n              />\n            ),\n            label: t(I18nKey.CHAT_INTERFACE$ADD_FILES_AND_IMAGES),\n            onClick: handleFileIconClick,\n          }}\n        />\n      )}\n\n      <SystemMessageModal\n        isOpen={systemModalVisible}\n        onClose={() => setSystemModalVisible(false)}\n        systemMessage={systemMessage || null}\n      />\n      {skillsModalVisible && (\n        <SkillsModal onClose={() => setSkillsModalVisible(false)} />\n      )}\n      {hooksModalVisible && (\n        <HooksModal onClose={() => setHooksModalVisible(false)} />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,SAAgB,EAAkB,EAChC,wBACA,cAAW,MACc;CACzB,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,sBAAmB,GAA2B,EAChD,EAAE,MAAM,MAAiB,GAAuB,EAChD,CAAC,GAAU,KAAe,EAAM,SAAS,GAAM,EAE/C,EACJ,yBACA,qBACA,oBACA,uBACA,0BACA,uBACA,0BACA,sBACA,yBACA,kBACA,yBACA,uBACE,EAA+B;EACjC,gBAAgB,KAAkB,KAAA;EAClC,iBAAiB,GAAc;EAC/B,aAAa;EACb,qBAAqB;EACtB,CAAC;AASF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EACT,2DACA,IACI,oDACA,4EACJ,KAAY,CAAC,KAAY,yBAC1B;IACD,cAAY,EAAE,EAAQ,yBAAyB;IAC/C,iBAAe;IACf,iBAAc;IACd,eAAY;IACZ,UAtBe,MAA+C;AAClE,OAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACnB,MACJ,GAAa,MAAS,CAAC,EAAK;;IAmBd;cAEV,kBAAC,QAAD;KAAM,WAAU;eACd,kBAAC,GAAD;MAAM,WAAU;MAA6B,aAAa;MAAK,CAAA;KAC1D,CAAA;IACA,CAAA;GAER,KACC,kBAAC,GAAD;IACE,eAAe,EAAY,GAAM;IACjC,cAAc;IACd,aAAa;IACb,kBAAkB;IACI;IACL;IACjB,cAAc;KACZ,QAAQ;KACR,MACE,kBAAC,GAAD;MACE,WAAU;MACV,aAAa;MACb,eAAA;MACA,CAAA;KAEJ,OAAO,EAAE,EAAQ,oCAAoC;KACrD,SAAS;KACV;IACD,CAAA;GAGJ,kBAAC,GAAD;IACE,QAAQ;IACR,eAAe,EAAsB,GAAM;IAC3C,eAAe,KAAiB;IAChC,CAAA;GACD,KACC,kBAAC,GAAD,EAAa,eAAe,EAAsB,GAAM,EAAI,CAAA;GAE7D,KACC,kBAAC,GAAD,EAAY,eAAe,EAAqB,GAAM,EAAI,CAAA;GAExD"}
+{"version":3,"file":"chat-add-file-button.js","names":[],"sources":["../../../../src/components/features/chat/chat-add-file-button.tsx"],"sourcesContent":["import React from \"react\";\nimport { Paperclip, Plus } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputIconButtonClassName } from \"#/utils/form-control-classes\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useConversationNameContextMenu } from \"#/hooks/use-conversation-name-context-menu\";\nimport { ToolsContextMenu } from \"#/components/features/controls/tools-context-menu\";\nimport { SystemMessageModal } from \"#/components/features/conversation-panel/system-message-modal\";\nimport { SkillsModal } from \"#/components/features/conversation-panel/skills-modal\";\nimport { HooksModal } from \"#/components/features/conversation-panel/hooks-modal\";\n\nexport interface ChatAddFileButtonProps {\n  handleFileIconClick: () => void;\n  disabled?: boolean;\n}\n\nexport function ChatAddFileButton({\n  handleFileIconClick,\n  disabled = false,\n}: ChatAddFileButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useOptionalConversationId();\n  const { data: conversation } = useActiveConversation();\n  const [menuOpen, setMenuOpen] = React.useState(false);\n\n  const {\n    handleShowAgentTools,\n    handleShowSkills,\n    handleShowHooks,\n    systemModalVisible,\n    setSystemModalVisible,\n    skillsModalVisible,\n    setSkillsModalVisible,\n    hooksModalVisible,\n    setHooksModalVisible,\n    systemMessage,\n    shouldShowAgentTools,\n    shouldShowHooks,\n  } = useConversationNameContextMenu({\n    conversationId: conversationId ?? undefined,\n    executionStatus: conversation?.execution_status,\n    showOptions: true,\n    onContextMenuToggle: setMenuOpen,\n  });\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (disabled) return;\n    setMenuOpen((open) => !open);\n  };\n\n  return (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        className={cn(\n          chatInputIconButtonClassName,\n          \"relative shrink-0 size-6\",\n          disabled\n            ? \"cursor-not-allowed text-[var(--oh-text-subtle)]\"\n            : undefined,\n          menuOpen && !disabled && \"text-white bg-white/10\",\n        )}\n        aria-label={t(I18nKey.CHAT_INTERFACE$PLUS_MENU)}\n        aria-expanded={menuOpen}\n        aria-haspopup=\"menu\"\n        data-testid=\"chat-plus-button\"\n        onClick={handleClick}\n        disabled={disabled}\n      >\n        <span className=\"flex h-full w-full items-center justify-center\">\n          <Plus className=\"h-[13px] w-[13px] shrink-0\" strokeWidth={2} />\n        </span>\n      </button>\n\n      {menuOpen && (\n        <ToolsContextMenu\n          onClose={() => setMenuOpen(false)}\n          onShowSkills={handleShowSkills}\n          onShowHooks={handleShowHooks}\n          onShowAgentTools={handleShowAgentTools}\n          shouldShowAgentTools={shouldShowAgentTools}\n          shouldShowHooks={shouldShowHooks}\n          footerAction={{\n            testId: \"add-files-and-images-button\",\n            icon: (\n              <Paperclip\n                className=\"h-4 w-4 shrink-0\"\n                strokeWidth={2}\n                aria-hidden\n              />\n            ),\n            label: t(I18nKey.CHAT_INTERFACE$ADD_FILES_AND_IMAGES),\n            onClick: handleFileIconClick,\n          }}\n        />\n      )}\n\n      <SystemMessageModal\n        isOpen={systemModalVisible}\n        onClose={() => setSystemModalVisible(false)}\n        systemMessage={systemMessage || null}\n      />\n      {skillsModalVisible && (\n        <SkillsModal onClose={() => setSkillsModalVisible(false)} />\n      )}\n      {hooksModalVisible && (\n        <HooksModal onClose={() => setHooksModalVisible(false)} />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,SAAgB,EAAkB,EAChC,wBACA,cAAW,MACc;CACzB,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,sBAAmB,GAA2B,EAChD,EAAE,MAAM,MAAiB,GAAuB,EAChD,CAAC,GAAU,KAAe,EAAM,SAAS,GAAM,EAE/C,EACJ,yBACA,qBACA,oBACA,uBACA,0BACA,uBACA,0BACA,sBACA,yBACA,kBACA,yBACA,uBACE,EAA+B;EACjC,gBAAgB,KAAkB,KAAA;EAClC,iBAAiB,GAAc;EAC/B,aAAa;EACb,qBAAqB;EACtB,CAAC;AASF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EACT,GACA,4BACA,IACI,oDACA,KAAA,GACJ,KAAY,CAAC,KAAY,yBAC1B;IACD,cAAY,EAAE,EAAQ,yBAAyB;IAC/C,iBAAe;IACf,iBAAc;IACd,eAAY;IACZ,UAvBe,MAA+C;AAClE,OAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACnB,MACJ,GAAa,MAAS,CAAC,EAAK;;IAoBd;cAEV,kBAAC,QAAD;KAAM,WAAU;eACd,kBAAC,GAAD;MAAM,WAAU;MAA6B,aAAa;MAAK,CAAA;KAC1D,CAAA;IACA,CAAA;GAER,KACC,kBAAC,GAAD;IACE,eAAe,EAAY,GAAM;IACjC,cAAc;IACd,aAAa;IACb,kBAAkB;IACI;IACL;IACjB,cAAc;KACZ,QAAQ;KACR,MACE,kBAAC,GAAD;MACE,WAAU;MACV,aAAa;MACb,eAAA;MACA,CAAA;KAEJ,OAAO,EAAE,EAAQ,oCAAoC;KACrD,SAAS;KACV;IACD,CAAA;GAGJ,kBAAC,GAAD;IACE,QAAQ;IACR,eAAe,EAAsB,GAAM;IAC3C,eAAe,KAAiB;IAChC,CAAA;GACD,KACC,kBAAC,GAAD,EAAa,eAAe,EAAsB,GAAM,EAAI,CAAA;GAE7D,KACC,kBAAC,GAAD,EAAY,eAAe,EAAqB,GAAM,EAAI,CAAA;GAExD"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"chat-message.cjs","names":[],"sources":["../../../../src/components/features/chat/chat-message.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport type { SourceType } from \"#/types/agent-server/core/base/common\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\n\nexport type ChatMessagePendingStatus = \"sending\" | \"error\";\n\ninterface ChatMessageProps {\n  type: SourceType;\n  message: string;\n  actions?: Array<{\n    icon: React.ReactNode;\n    onClick: () => void;\n    tooltip?: string;\n  }>;\n  isFromPlanningAgent?: boolean;\n  pendingStatus?: ChatMessagePendingStatus;\n  onRetry?: () => void;\n}\n\nexport function ChatMessage({\n  type,\n  message,\n  children,\n  actions,\n  isFromPlanningAgent = false,\n  pendingStatus,\n  onRetry,\n}: React.PropsWithChildren<ChatMessageProps>) {\n  const { t } = useTranslation(\"openhands\");\n  const [isHovering, setIsHovering] = React.useState(false);\n  const [isCopy, setIsCopy] = React.useState(false);\n\n  const handleCopyToClipboard = async () => {\n    await navigator.clipboard.writeText(message);\n    setIsCopy(true);\n  };\n\n  React.useEffect(() => {\n    let timeout: NodeJS.Timeout;\n\n    if (isCopy) {\n      timeout = setTimeout(() => {\n        setIsCopy(false);\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isCopy]);\n\n  return (\n    <article\n      data-testid={`${type}-message`}\n      data-pending-status={pendingStatus}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      className={cn(\n        \"rounded-xl relative w-fit max-w-full last:mb-4\",\n        \"flex flex-col gap-2\",\n        type === \"user\" && \"p-4 bg-tertiary self-end\",\n        type === \"agent\" && \"mt-6 w-full max-w-full bg-transparent\",\n        isFromPlanningAgent &&\n          type === \"agent\" &&\n          \"border border-[#597ff4] bg-tertiary p-4 mt-2\",\n        pendingStatus === \"sending\" && \"opacity-60\",\n        pendingStatus === \"error\" && \"border border-status-fail-border\",\n      )}\n    >\n      <div\n        className={cn(\n          \"absolute -top-2.5 -right-2.5\",\n          !isHovering ? \"hidden\" : \"flex\",\n          \"items-center gap-1\",\n        )}\n      >\n        {actions?.map((action, index) =>\n          action.tooltip ? (\n            <StyledTooltip key={index} content={action.tooltip} placement=\"top\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className=\"button-base p-1 cursor-pointer\"\n                aria-label={action.tooltip}\n              >\n                {action.icon}\n              </button>\n            </StyledTooltip>\n          ) : (\n            <button\n              key={index}\n              type=\"button\"\n              onClick={action.onClick}\n              className=\"button-base p-1 cursor-pointer\"\n              aria-label={`Action ${index + 1}`}\n            >\n              {action.icon}\n            </button>\n          ),\n        )}\n\n        <CopyToClipboardButton\n          isHidden={!isHovering}\n          isDisabled={isCopy}\n          onClick={handleCopyToClipboard}\n          mode={isCopy ? \"copied\" : \"copy\"}\n        />\n      </div>\n\n      <div className=\"text-sm whitespace-normal [word-break:break-word]\">\n        <MarkdownRenderer includeStandard includeHeadings>\n          {message}\n        </MarkdownRenderer>\n      </div>\n\n      {pendingStatus === \"sending\" && (\n        <span\n          role=\"status\"\n          aria-live=\"polite\"\n          data-testid=\"chat-message-sending\"\n          className=\"self-end text-xs italic text-content-muted\"\n        >\n          {t(I18nKey.CHAT_INTERFACE$MESSAGE_SENDING)}\n        </span>\n      )}\n\n      {pendingStatus === \"error\" && (\n        <span\n          role=\"alert\"\n          data-testid=\"chat-message-error\"\n          className=\"self-end text-xs text-status-fail-text\"\n        >\n          {t(I18nKey.CHAT_INTERFACE$MESSAGE_SEND_FAILED)}{\" \"}\n          {onRetry && (\n            <button\n              type=\"button\"\n              onClick={onRetry}\n              className=\"underline cursor-pointer\"\n              data-testid=\"chat-message-retry\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}\n            </button>\n          )}\n        </span>\n      )}\n\n      {children}\n    </article>\n  );\n}\n"],"mappings":"scAwBA,SAAgB,EAAY,CAC1B,OACA,UACA,WACA,UACA,sBAAsB,GACtB,gBACA,WAC4C,CAC5C,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAC,EAAY,GAAiB,EAAA,QAAM,SAAS,GAAM,CACnD,CAAC,EAAQ,GAAa,EAAA,QAAM,SAAS,GAAM,CAqBjD,OAdA,EAAA,QAAM,cAAgB,CACpB,IAAI,EAQJ,OANI,IACF,EAAU,eAAiB,CACzB,EAAU,GAAM,EACf,IAAK,MAGG,CACX,aAAa,EAAQ,GAEtB,CAAC,EAAO,CAAC,EAGV,EAAA,EAAA,MAAC,UAAD,CACE,cAAa,GAAG,EAAK,UACrB,sBAAqB,EACrB,iBAAoB,EAAc,GAAK,CACvC,iBAAoB,EAAc,GAAM,CACxC,UAAW,EAAA,GACT,iDACA,sBACA,IAAS,QAAU,2BACnB,IAAS,SAAW,wCACpB,GACE,IAAS,SACT,+CACF,IAAkB,WAAa,aAC/B,IAAkB,SAAW,mCAC9B,UAfH,EAiBE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,+BACC,EAAwB,OAAX,SACd,qBACD,UALH,CAOG,GAAS,KAAK,EAAQ,IACrB,EAAO,SACL,EAAA,EAAA,KAAC,EAAA,cAAD,CAA2B,QAAS,EAAO,QAAS,UAAU,gBAC5D,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EAAO,QAChB,UAAU,iCACV,aAAY,EAAO,iBAElB,EAAO,KACD,CAAA,CACK,CATI,EASJ,EAEhB,EAAA,EAAA,KAAC,SAAD,CAEE,KAAK,SACL,QAAS,EAAO,QAChB,UAAU,iCACV,aAAY,UAAU,EAAQ,aAE7B,EAAO,KACD,CAPF,EAOE,CAEZ,EAED,EAAA,EAAA,KAAC,EAAA,sBAAD,CACE,SAAU,CAAC,EACX,WAAY,EACZ,QAAS,SAxEyB,CACxC,MAAM,UAAU,UAAU,UAAU,EAAQ,CAC5C,EAAU,GAAK,EAuET,KAAM,EAAS,SAAW,OAC1B,CAAA,CACE,IAEN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8DACb,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAkB,gBAAA,GAAgB,gBAAA,YAC/B,EACgB,CAAA,CACf,CAAA,CAEL,IAAkB,YACjB,EAAA,EAAA,KAAC,OAAD,CACE,KAAK,SACL,YAAU,SACV,cAAY,uBACZ,UAAU,sDAET,EAAE,EAAA,QAAQ,+BAA+B,CACrC,CAAA,CAGR,IAAkB,UACjB,EAAA,EAAA,MAAC,OAAD,CACE,KAAK,QACL,cAAY,qBACZ,UAAU,kDAHZ,CAKG,EAAE,EAAA,QAAQ,mCAAmC,CAAE,IAC/C,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,UAAU,2BACV,cAAY,8BAEX,EAAE,EAAA,QAAQ,6BAA6B,CACjC,CAAA,CAEN,GAGR,EACO"}
+{"version":3,"file":"chat-message.cjs","names":[],"sources":["../../../../src/components/features/chat/chat-message.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport type { SourceType } from \"#/types/agent-server/core/base/common\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { TextShimmer } from \"#/components/shared/text-shimmer\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\n\nexport type ChatMessagePendingStatus = \"sending\" | \"error\";\n\nconst USER_MESSAGE_MAX_LINES = 3;\nconst USER_MESSAGE_LINE_HEIGHT_PX = 24;\n\nfunction PendingStopIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden\n      className={className}\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        className=\"fill-[var(--oh-foreground)] transition-colors duration-150 group-hover:fill-[var(--oh-text-secondary)]\"\n      />\n      <rect\n        x=\"9\"\n        y=\"9\"\n        width=\"6\"\n        height=\"6\"\n        rx=\"1\"\n        className=\"fill-[var(--oh-color-tertiary)]\"\n      />\n    </svg>\n  );\n}\n\nconst chatBubbleMarkdownComponents = {\n  p: ({ children }: React.ComponentProps<\"p\">) => (\n    <p className=\"m-0 leading-6\">{children}</p>\n  ),\n};\n\nfunction UserMessageBody({\n  message,\n  isHovering,\n  isExpanded,\n  onTruncatableChange,\n}: {\n  message: string;\n  isHovering: boolean;\n  isExpanded: boolean;\n  onTruncatableChange: (truncatable: boolean) => void;\n}) {\n  const { t } = useTranslation(\"openhands\");\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const [isTruncatable, setIsTruncatable] = React.useState(false);\n\n  React.useLayoutEffect(() => {\n    const content = contentRef.current;\n    if (!content || isExpanded) {\n      setIsTruncatable(false);\n      onTruncatableChange(false);\n      return undefined;\n    }\n\n    const measure = () => {\n      const lineHeight = Number.parseFloat(\n        getComputedStyle(content).lineHeight,\n      );\n      const linePx =\n        Number.isFinite(lineHeight) && lineHeight > 0\n          ? lineHeight\n          : USER_MESSAGE_LINE_HEIGHT_PX;\n      const maxHeight = USER_MESSAGE_MAX_LINES * linePx;\n      const newlineCount = (message.match(/\\n/g) ?? []).length;\n\n      const truncatable =\n        content.scrollHeight > maxHeight + 1 ||\n        newlineCount >= USER_MESSAGE_MAX_LINES ||\n        message.trim().length > 220;\n\n      setIsTruncatable((previous) => {\n        if (previous !== truncatable) {\n          onTruncatableChange(truncatable);\n        }\n        return truncatable;\n      });\n    };\n\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [message, isExpanded, onTruncatableChange]);\n\n  const isCollapsed = isTruncatable && !isExpanded;\n\n  return (\n    <div className=\"relative min-w-0\">\n      <div\n        ref={contentRef}\n        className={cn(\n          \"text-sm leading-6 whitespace-normal [word-break:break-word]\",\n          isCollapsed && \"line-clamp-3\",\n        )}\n      >\n        <MarkdownRenderer\n          includeStandard\n          includeHeadings\n          components={chatBubbleMarkdownComponents}\n        >\n          {message}\n        </MarkdownRenderer>\n      </div>\n\n      {isCollapsed ? (\n        <>\n          <div\n            aria-hidden\n            data-testid=\"chat-message-truncation-gradient\"\n            className=\"pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-tertiary to-transparent\"\n          />\n          <span\n            data-testid=\"chat-message-view-more\"\n            className={cn(\n              \"pointer-events-none absolute bottom-1 left-1/2 z-10 inline-flex -translate-x-1/2 items-center rounded-full border border-[var(--oh-border-subtle)] bg-[var(--oh-surface-raised)] px-2.5 py-0.5 text-xs font-normal text-[var(--oh-foreground)] transition-opacity duration-150\",\n              isHovering ? \"opacity-100\" : \"opacity-0\",\n            )}\n          >\n            {t(I18nKey.COMMON$VIEW_MORE)}\n          </span>\n        </>\n      ) : null}\n    </div>\n  );\n}\n\ninterface ChatMessageProps {\n  type: SourceType;\n  message: string;\n  actions?: Array<{\n    icon: React.ReactNode;\n    onClick: () => void;\n    tooltip?: string;\n  }>;\n  isFromPlanningAgent?: boolean;\n  pendingStatus?: ChatMessagePendingStatus;\n  onRetry?: () => void;\n  onStop?: () => void;\n}\n\nexport function ChatMessage({\n  type,\n  message,\n  children,\n  actions,\n  isFromPlanningAgent = false,\n  pendingStatus,\n  onRetry,\n  onStop,\n}: React.PropsWithChildren<ChatMessageProps>) {\n  const { t } = useTranslation(\"openhands\");\n  const [isHovering, setIsHovering] = React.useState(false);\n  const [isCopy, setIsCopy] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const [isTruncatable, setIsTruncatable] = React.useState(false);\n  const [isSingleLinePendingMessage, setIsSingleLinePendingMessage] =\n    React.useState(true);\n  const pendingMessageContentRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    setIsExpanded(false);\n  }, [message]);\n\n  const handleCopyToClipboard = async () => {\n    await navigator.clipboard.writeText(message);\n    setIsCopy(true);\n  };\n\n  React.useEffect(() => {\n    let timeout: NodeJS.Timeout;\n\n    if (isCopy) {\n      timeout = setTimeout(() => {\n        setIsCopy(false);\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isCopy]);\n\n  const isPendingUserMessage =\n    type === \"user\" &&\n    (pendingStatus === \"error\" || pendingStatus === \"sending\");\n  const canStopPendingMessage = pendingStatus === \"sending\" && onStop != null;\n  const showStopButton = canStopPendingMessage && isHovering;\n  const useTruncatedUserBody = type === \"user\" && pendingStatus == null;\n  const isCollapsed = useTruncatedUserBody && isTruncatable && !isExpanded;\n  const hasBubbleChildren = React.Children.count(children) > 0;\n\n  React.useLayoutEffect(() => {\n    if (!canStopPendingMessage || useTruncatedUserBody) {\n      return undefined;\n    }\n\n    const content = pendingMessageContentRef.current;\n    if (!content) {\n      return undefined;\n    }\n\n    const measure = () => {\n      const lineHeight = Number.parseFloat(\n        getComputedStyle(content).lineHeight,\n      );\n      const linePx =\n        Number.isFinite(lineHeight) && lineHeight > 0\n          ? lineHeight\n          : USER_MESSAGE_LINE_HEIGHT_PX;\n\n      setIsSingleLinePendingMessage(content.scrollHeight <= linePx + 1);\n    };\n\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [message, canStopPendingMessage, useTruncatedUserBody]);\n\n  const messageContent = useTruncatedUserBody ? (\n    <UserMessageBody\n      message={message}\n      isHovering={isHovering}\n      isExpanded={isExpanded}\n      onTruncatableChange={setIsTruncatable}\n    />\n  ) : (\n    <div\n      ref={pendingMessageContentRef}\n      className=\"min-w-0 text-sm leading-6 whitespace-normal [word-break:break-word]\"\n    >\n      <MarkdownRenderer\n        includeStandard\n        includeHeadings\n        components={chatBubbleMarkdownComponents}\n      >\n        {message}\n      </MarkdownRenderer>\n    </div>\n  );\n\n  const renderedMessageContent = messageContent;\n\n  const messageBubble = (\n    <article\n      data-testid={`${type}-message`}\n      data-pending-status={pendingStatus}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      className={cn(\n        \"rounded-xl relative w-fit max-w-full flex flex-col\",\n        hasBubbleChildren && \"gap-2\",\n        type === \"user\" && \"mt-6 bg-tertiary self-end px-4 py-2.5\",\n        type === \"agent\" && \"mt-6 w-full max-w-full bg-transparent\",\n        isFromPlanningAgent &&\n          type === \"agent\" &&\n          \"border border-[#597ff4] bg-tertiary p-4 mt-2\",\n        pendingStatus === \"error\" &&\n          \"border border-[var(--oh-status-error)]/40\",\n        !isPendingUserMessage && \"last:mb-4\",\n      )}\n    >\n      <div\n        className={cn(\n          \"absolute -top-2.5 -right-2.5 z-10\",\n          !isHovering || pendingStatus === \"sending\" ? \"hidden\" : \"flex\",\n          \"items-center gap-1\",\n        )}\n        onClick={(event) => event.stopPropagation()}\n      >\n        {actions?.map((action, index) =>\n          action.tooltip ? (\n            <StyledTooltip key={index} content={action.tooltip} placement=\"top\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className=\"button-base p-1 cursor-pointer\"\n                aria-label={action.tooltip}\n              >\n                {action.icon}\n              </button>\n            </StyledTooltip>\n          ) : (\n            <button\n              key={index}\n              type=\"button\"\n              onClick={action.onClick}\n              className=\"button-base p-1 cursor-pointer\"\n              aria-label={`Action ${index + 1}`}\n            >\n              {action.icon}\n            </button>\n          ),\n        )}\n\n        <CopyToClipboardButton\n          isHidden={!isHovering}\n          isDisabled={isCopy}\n          onClick={handleCopyToClipboard}\n          mode={isCopy ? \"copied\" : \"copy\"}\n        />\n      </div>\n\n      {renderedMessageContent}\n\n      {canStopPendingMessage ? (\n        <button\n          type=\"button\"\n          onClick={(event) => {\n            event.stopPropagation();\n            onStop?.();\n          }}\n          data-testid=\"chat-message-stop\"\n          aria-label={t(I18nKey.BUTTON$STOP)}\n          aria-hidden={!showStopButton}\n          tabIndex={showStopButton ? 0 : -1}\n          className={cn(\n            \"group absolute z-10 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-[var(--oh-color-tertiary)] text-[var(--oh-foreground)] transition-opacity duration-150\",\n            isSingleLinePendingMessage\n              ? \"right-3 top-1/2 -translate-y-1/2\"\n              : \"right-3 bottom-2.5\",\n            showStopButton ? \"opacity-100\" : \"pointer-events-none opacity-0\",\n          )}\n        >\n          <PendingStopIcon className=\"block h-7 w-7 max-w-none\" />\n        </button>\n      ) : null}\n\n      {isCollapsed ? (\n        <button\n          type=\"button\"\n          data-testid=\"chat-message-expand\"\n          aria-expanded={false}\n          aria-label={t(I18nKey.COMMON$VIEW_MORE)}\n          className=\"absolute inset-0 z-[1] cursor-pointer rounded-xl border-0 bg-transparent p-0\"\n          onClick={() => setIsExpanded(true)}\n        />\n      ) : null}\n\n      {children}\n    </article>\n  );\n\n  if (type === \"user\" && pendingStatus === \"error\") {\n    return (\n      <div className=\"flex w-fit max-w-full flex-col items-end gap-1.5 self-end last:mb-4\">\n        {messageBubble}\n        <div\n          role=\"alert\"\n          data-testid=\"chat-message-error\"\n          className=\"flex items-center gap-2 text-xs text-[var(--oh-status-error)]\"\n        >\n          <span>{t(I18nKey.CHAT_INTERFACE$MESSAGE_SEND_FAILED)}</span>\n          {onRetry ? (\n            <button\n              type=\"button\"\n              onClick={onRetry}\n              className=\"cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\"\n              data-testid=\"chat-message-retry\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  if (type === \"user\" && pendingStatus === \"sending\") {\n    return (\n      <div className=\"flex w-full max-w-full flex-col last:mb-4\">\n        {messageBubble}\n        <div className=\"my-1 w-full py-1 text-sm\">\n          <TextShimmer\n            as=\"p\"\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"chat-message-sending\"\n            className=\"block w-full text-sm font-normal\"\n            duration={1}\n            spread={2}\n          >\n            {t(I18nKey.CHAT_INTERFACE$MESSAGE_SENDING)}\n          </TextShimmer>\n        </div>\n      </div>\n    );\n  }\n\n  return messageBubble;\n}\n"],"mappings":"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"}

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

@@ -12,6 +12,7 @@ interface ChatMessageProps {
     isFromPlanningAgent?: boolean;
     pendingStatus?: ChatMessagePendingStatus;
     onRetry?: () => void;
+    onStop?: () => void;
 }
-export declare function ChatMessage({ type, message, children, actions, isFromPlanningAgent, pendingStatus, onRetry, }: React.PropsWithChildren<ChatMessageProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ChatMessage({ type, message, children, actions, isFromPlanningAgent, pendingStatus, onRetry, onStop, }: React.PropsWithChildren<ChatMessageProps>): import("react/jsx-runtime").JSX.Element;
 export {};