@openhands/agent-canvas 1.16.0 → 1.17.0

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"),s=require("../../shared/text-shimmer.cjs"),c=require("./pending-stop-icon.cjs"),l=require("./user-message-body.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");function f({type:e,message:f,children:p,actions:m,isFromPlanningAgent:h=!1,pendingStatus:g,onRetry:_,onDismiss:v,onStop:y}){let{t:b}=t.useTranslation(`openhands`),[x,S]=u.default.useState(!1),[C,w]=u.default.useState(!1),[T,E]=u.default.useState(!1),[D,O]=u.default.useState(!1),[k,A]=u.default.useState(!0),j=u.default.useRef(null);u.default.useEffect(()=>{E(!1)},[f]);let M=async()=>{await navigator.clipboard.writeText(f),w(!0)};u.default.useEffect(()=>{let e;return C&&(e=setTimeout(()=>{w(!1)},2e3)),()=>{clearTimeout(e)}},[C]);let N=e===`user`&&(g===`error`||g===`sending`),P=g===`sending`&&y!=null,F=P&&x,I=e===`user`&&g==null,L=I&&D&&!T,R=u.default.Children.count(p)>0;u.default.useLayoutEffect(()=>{if(!P||I)return;let e=j.current;if(!e)return;let t=()=>{let t=Number.parseFloat(getComputedStyle(e).lineHeight),n=Number.isFinite(t)&&t>0?t:24;A(e.scrollHeight<=n+1)};t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[f,P,I]);let z=I?(0,d.jsx)(l.UserMessageBody,{message:f,isHovering:x,isExpanded:T,onTruncatableChange:O}):(0,d.jsx)(`div`,{ref:j,className:`min-w-0 text-sm leading-6 whitespace-normal [word-break:break-word]`,children:(0,d.jsx)(a.MarkdownRenderer,{includeStandard:!0,includeHeadings:!0,allowHtml:e!==`user`,components:l.chatBubbleMarkdownComponents,children:f})}),B=(0,d.jsxs)(`article`,{"data-testid":`${e}-message`,"data-pending-status":g,onMouseEnter:()=>S(!0),onMouseLeave:()=>S(!1),className:r.cn(`rounded-xl relative w-fit max-w-full flex flex-col`,R&&`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`,h&&e===`agent`&&`border border-[#597ff4] bg-tertiary p-4 mt-2`,g===`error`&&`border border-[var(--oh-status-error)]/40`,!N&&`last:mb-4`),children:[(0,d.jsxs)(`div`,{className:r.cn(`absolute -top-2.5 -right-2.5 z-10`,!x||g===`sending`?`hidden`:`flex`,`items-center gap-1`),onClick:e=>e.stopPropagation(),children:[m?.map((e,t)=>e.tooltip?(0,d.jsx)(o.StyledTooltip,{content:e.tooltip,placement:`top`,children:(0,d.jsx)(`button`,{type:`button`,onClick:e.onClick,className:`button-base p-1 cursor-pointer`,"aria-label":e.tooltip,children:e.icon})},t):(0,d.jsx)(`button`,{type:`button`,onClick:e.onClick,className:`button-base p-1 cursor-pointer`,"aria-label":`Action ${t+1}`,children:e.icon},t)),(0,d.jsx)(i.CopyToClipboardButton,{isHidden:!x,isDisabled:C,onClick:M,mode:C?`copied`:`copy`})]}),z,P?(0,d.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),y?.()},"data-testid":`chat-message-stop`,"aria-label":b(n.I18nKey.BUTTON$STOP),"aria-hidden":!F,tabIndex:F?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`,k?`right-3 top-1/2 -translate-y-1/2`:`right-3 bottom-2.5`,F?`opacity-100`:`pointer-events-none opacity-0`),children:(0,d.jsx)(c.PendingStopIcon,{className:`block h-7 w-7 max-w-none`})}):null,L?(0,d.jsx)(`button`,{type:`button`,"data-testid":`chat-message-expand`,"aria-expanded":!1,"aria-label":b(n.I18nKey.COMMON$VIEW_MORE),className:`absolute inset-0 z-[1] cursor-pointer rounded-xl border-0 bg-transparent p-0`,onClick:()=>E(!0)}):null,p]});return e===`user`&&g===`error`?(0,d.jsxs)(`div`,{className:`flex w-fit max-w-full flex-col items-end gap-1.5 self-end last:mb-4`,children:[B,(0,d.jsxs)(`div`,{role:`alert`,"data-testid":`chat-message-error`,className:`flex items-center gap-2 text-xs text-[var(--oh-status-error)]`,children:[(0,d.jsx)(`span`,{children:b(n.I18nKey.CHAT_INTERFACE$MESSAGE_SEND_FAILED)}),_?(0,d.jsx)(`button`,{type:`button`,onClick:_,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:b(n.I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}):null,v?(0,d.jsx)(`button`,{type:`button`,onClick:v,className:`cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,"data-testid":`chat-message-dismiss`,children:b(n.I18nKey.CHAT_INTERFACE$MESSAGE_DISMISS)}):null]})]}):e===`user`&&g===`sending`?(0,d.jsxs)(`div`,{className:`flex w-full max-w-full flex-col last:mb-4`,children:[B,(0,d.jsx)(`div`,{className:`my-1 w-full py-1 text-sm`,children:(0,d.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:b(n.I18nKey.CHAT_INTERFACE$MESSAGE_SENDING)})})]}):B}exports.ChatMessage=f;
+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("../../../utils/format-event-timestamp.cjs"),c=require("../../shared/text-shimmer.cjs"),l=require("./pending-stop-icon.cjs"),u=require("./user-message-body.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");function p({type:e,message:p,children:m,actions:h,isFromPlanningAgent:g=!1,pendingStatus:_,onRetry:v,onDismiss:y,onStop:b,timestamp:x}){let{t:S,i18n:C}=t.useTranslation(`openhands`),[w,T]=d.default.useState(!1),[E,D]=d.default.useState(!1),[O,k]=d.default.useState(!1),[A,j]=d.default.useState(!1),[M,N]=d.default.useState(!0),P=d.default.useRef(null),F=s.formatEventTimestamp(x,C?.language);d.default.useEffect(()=>{k(!1)},[p]);let I=async()=>{await navigator.clipboard.writeText(p),D(!0)};d.default.useEffect(()=>{let e;return E&&(e=setTimeout(()=>{D(!1)},2e3)),()=>{clearTimeout(e)}},[E]);let L=e===`user`&&(_===`error`||_===`sending`),R=_===`sending`&&b!=null,z=R&&w,B=e===`user`&&_==null,V=B&&A&&!O,H=d.default.Children.count(m)>0;d.default.useLayoutEffect(()=>{if(!R||B)return;let e=P.current;if(!e)return;let t=()=>{let t=Number.parseFloat(getComputedStyle(e).lineHeight),n=Number.isFinite(t)&&t>0?t:24;N(e.scrollHeight<=n+1)};t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[p,R,B]);let U=B?(0,f.jsx)(u.UserMessageBody,{message:p,isHovering:w,isExpanded:O,onTruncatableChange:j}):(0,f.jsx)(`div`,{ref:P,className:`min-w-0 text-sm leading-6 whitespace-normal [word-break:break-word]`,children:(0,f.jsx)(a.MarkdownRenderer,{includeStandard:!0,includeHeadings:!0,allowHtml:e!==`user`,components:u.chatBubbleMarkdownComponents,children:p})}),W=(0,f.jsxs)(`article`,{"data-testid":`${e}-message`,"data-pending-status":_,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),className:r.cn(`rounded-xl relative w-fit max-w-full flex flex-col`,H&&`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`,g&&e===`agent`&&`border border-[#597ff4] bg-tertiary p-4 mt-2`,_===`error`&&`border border-[var(--oh-status-error)]/40`,!L&&`last:mb-4`),children:[(0,f.jsxs)(`div`,{className:r.cn(`absolute -top-2.5 -right-2.5 z-10`,!w||_===`sending`?`hidden`:`flex`,`items-center gap-1`),onClick:e=>e.stopPropagation(),children:[h?.map((e,t)=>e.tooltip?(0,f.jsx)(o.StyledTooltip,{content:e.tooltip,placement:`top`,children:(0,f.jsx)(`button`,{type:`button`,onClick:e.onClick,className:`button-base p-1 cursor-pointer`,"aria-label":e.tooltip,children:e.icon})},t):(0,f.jsx)(`button`,{type:`button`,onClick:e.onClick,className:`button-base p-1 cursor-pointer`,"aria-label":`Action ${t+1}`,children:e.icon},t)),(0,f.jsx)(i.CopyToClipboardButton,{isHidden:!w,isDisabled:E,onClick:I,mode:E?`copied`:`copy`})]}),U,R?(0,f.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),b?.()},"data-testid":`chat-message-stop`,"aria-label":S(n.I18nKey.BUTTON$STOP),"aria-hidden":!z,tabIndex:z?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`,M?`right-3 top-1/2 -translate-y-1/2`:`right-3 bottom-2.5`,z?`opacity-100`:`pointer-events-none opacity-0`),children:(0,f.jsx)(l.PendingStopIcon,{className:`block h-7 w-7 max-w-none`})}):null,V?(0,f.jsx)(`button`,{type:`button`,"data-testid":`chat-message-expand`,"aria-expanded":!1,"aria-label":S(n.I18nKey.COMMON$VIEW_MORE),className:`absolute inset-0 z-[1] cursor-pointer rounded-xl border-0 bg-transparent p-0`,onClick:()=>k(!0)}):null,m]}),G=F?(0,f.jsx)(o.StyledTooltip,{content:(0,f.jsx)(`time`,{dateTime:x,children:F}),placement:`top`,isOpen:w,children:W}):W;return e===`user`&&_===`error`?(0,f.jsxs)(`div`,{className:`flex w-fit max-w-full flex-col items-end gap-1.5 self-end last:mb-4`,children:[G,(0,f.jsxs)(`div`,{role:`alert`,"data-testid":`chat-message-error`,className:`flex items-center gap-2 text-xs text-[var(--oh-status-error)]`,children:[(0,f.jsx)(`span`,{children:S(n.I18nKey.CHAT_INTERFACE$MESSAGE_SEND_FAILED)}),v?(0,f.jsx)(`button`,{type:`button`,onClick:v,className:`cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,"data-testid":`chat-message-retry`,children:S(n.I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}):null,y?(0,f.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-dismiss`,children:S(n.I18nKey.CHAT_INTERFACE$MESSAGE_DISMISS)}):null]})]}):e===`user`&&_===`sending`?(0,f.jsxs)(`div`,{className:`flex w-full max-w-full flex-col last:mb-4`,children:[G,(0,f.jsx)(`div`,{className:`my-1 w-full py-1 text-sm`,children:(0,f.jsx)(c.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:S(n.I18nKey.CHAT_INTERFACE$MESSAGE_SENDING)})})]}):G}exports.ChatMessage=p;
 //# 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 { TextShimmer } from \"#/components/shared/text-shimmer\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\nimport { PendingStopIcon } from \"./pending-stop-icon\";\nimport {\n  UserMessageBody,\n  chatBubbleMarkdownComponents,\n  USER_MESSAGE_LINE_HEIGHT_PX,\n} from \"./user-message-body\";\n\nexport type ChatMessagePendingStatus = \"sending\" | \"error\";\n\ninterface ChatMessageProps {\n  type: SourceType;\n  message: string;\n  actions?: Array<{\n    icon: React.ReactNode;\n    onClick: () => void;\n    tooltip?: string;\n  }>;\n  isFromPlanningAgent?: boolean;\n  pendingStatus?: ChatMessagePendingStatus;\n  onRetry?: () => void;\n  onDismiss?: () => void;\n  onStop?: () => void;\n}\n\nexport function ChatMessage({\n  type,\n  message,\n  children,\n  actions,\n  isFromPlanningAgent = false,\n  pendingStatus,\n  onRetry,\n  onDismiss,\n  onStop,\n}: React.PropsWithChildren<ChatMessageProps>) {\n  const { t } = useTranslation(\"openhands\");\n  const [isHovering, setIsHovering] = React.useState(false);\n  const [isCopy, setIsCopy] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const [isTruncatable, setIsTruncatable] = React.useState(false);\n  const [isSingleLinePendingMessage, setIsSingleLinePendingMessage] =\n    React.useState(true);\n  const pendingMessageContentRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    setIsExpanded(false);\n  }, [message]);\n\n  const handleCopyToClipboard = async () => {\n    await navigator.clipboard.writeText(message);\n    setIsCopy(true);\n  };\n\n  React.useEffect(() => {\n    let timeout: NodeJS.Timeout;\n\n    if (isCopy) {\n      timeout = setTimeout(() => {\n        setIsCopy(false);\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isCopy]);\n\n  const isPendingUserMessage =\n    type === \"user\" &&\n    (pendingStatus === \"error\" || pendingStatus === \"sending\");\n  const canStopPendingMessage = pendingStatus === \"sending\" && onStop != null;\n  const showStopButton = canStopPendingMessage && isHovering;\n  const useTruncatedUserBody = type === \"user\" && pendingStatus == null;\n  const isCollapsed = useTruncatedUserBody && isTruncatable && !isExpanded;\n  const hasBubbleChildren = React.Children.count(children) > 0;\n\n  React.useLayoutEffect(() => {\n    if (!canStopPendingMessage || useTruncatedUserBody) {\n      return undefined;\n    }\n\n    const content = pendingMessageContentRef.current;\n    if (!content) {\n      return undefined;\n    }\n\n    const measure = () => {\n      const lineHeight = Number.parseFloat(\n        getComputedStyle(content).lineHeight,\n      );\n      const linePx =\n        Number.isFinite(lineHeight) && lineHeight > 0\n          ? lineHeight\n          : USER_MESSAGE_LINE_HEIGHT_PX;\n\n      setIsSingleLinePendingMessage(content.scrollHeight <= linePx + 1);\n    };\n\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [message, canStopPendingMessage, useTruncatedUserBody]);\n\n  const messageContent = useTruncatedUserBody ? (\n    <UserMessageBody\n      message={message}\n      isHovering={isHovering}\n      isExpanded={isExpanded}\n      onTruncatableChange={setIsTruncatable}\n    />\n  ) : (\n    <div\n      ref={pendingMessageContentRef}\n      className=\"min-w-0 text-sm leading-6 whitespace-normal [word-break:break-word]\"\n    >\n      <MarkdownRenderer\n        includeStandard\n        includeHeadings\n        allowHtml={type !== \"user\"}\n        components={chatBubbleMarkdownComponents}\n      >\n        {message}\n      </MarkdownRenderer>\n    </div>\n  );\n\n  const renderedMessageContent = messageContent;\n\n  const messageBubble = (\n    <article\n      data-testid={`${type}-message`}\n      data-pending-status={pendingStatus}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      className={cn(\n        \"rounded-xl relative w-fit max-w-full flex flex-col\",\n        hasBubbleChildren && \"gap-2\",\n        type === \"user\" && \"mt-6 bg-tertiary self-end px-4 py-2.5\",\n        type === \"agent\" && \"mt-6 w-full max-w-full bg-transparent\",\n        isFromPlanningAgent &&\n          type === \"agent\" &&\n          \"border border-[#597ff4] bg-tertiary p-4 mt-2\",\n        pendingStatus === \"error\" &&\n          \"border border-[var(--oh-status-error)]/40\",\n        !isPendingUserMessage && \"last:mb-4\",\n      )}\n    >\n      <div\n        className={cn(\n          \"absolute -top-2.5 -right-2.5 z-10\",\n          !isHovering || pendingStatus === \"sending\" ? \"hidden\" : \"flex\",\n          \"items-center gap-1\",\n        )}\n        onClick={(event) => event.stopPropagation()}\n      >\n        {actions?.map((action, index) =>\n          action.tooltip ? (\n            <StyledTooltip key={index} content={action.tooltip} placement=\"top\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className=\"button-base p-1 cursor-pointer\"\n                aria-label={action.tooltip}\n              >\n                {action.icon}\n              </button>\n            </StyledTooltip>\n          ) : (\n            <button\n              key={index}\n              type=\"button\"\n              onClick={action.onClick}\n              className=\"button-base p-1 cursor-pointer\"\n              aria-label={`Action ${index + 1}`}\n            >\n              {action.icon}\n            </button>\n          ),\n        )}\n\n        <CopyToClipboardButton\n          isHidden={!isHovering}\n          isDisabled={isCopy}\n          onClick={handleCopyToClipboard}\n          mode={isCopy ? \"copied\" : \"copy\"}\n        />\n      </div>\n\n      {renderedMessageContent}\n\n      {canStopPendingMessage ? (\n        <button\n          type=\"button\"\n          onClick={(event) => {\n            event.stopPropagation();\n            onStop?.();\n          }}\n          data-testid=\"chat-message-stop\"\n          aria-label={t(I18nKey.BUTTON$STOP)}\n          aria-hidden={!showStopButton}\n          tabIndex={showStopButton ? 0 : -1}\n          className={cn(\n            \"group absolute z-10 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-[var(--oh-color-tertiary)] text-[var(--oh-foreground)] transition-opacity duration-150\",\n            isSingleLinePendingMessage\n              ? \"right-3 top-1/2 -translate-y-1/2\"\n              : \"right-3 bottom-2.5\",\n            showStopButton ? \"opacity-100\" : \"pointer-events-none opacity-0\",\n          )}\n        >\n          <PendingStopIcon className=\"block h-7 w-7 max-w-none\" />\n        </button>\n      ) : null}\n\n      {isCollapsed ? (\n        <button\n          type=\"button\"\n          data-testid=\"chat-message-expand\"\n          aria-expanded={false}\n          aria-label={t(I18nKey.COMMON$VIEW_MORE)}\n          className=\"absolute inset-0 z-[1] cursor-pointer rounded-xl border-0 bg-transparent p-0\"\n          onClick={() => setIsExpanded(true)}\n        />\n      ) : null}\n\n      {children}\n    </article>\n  );\n\n  if (type === \"user\" && pendingStatus === \"error\") {\n    return (\n      <div className=\"flex w-fit max-w-full flex-col items-end gap-1.5 self-end last:mb-4\">\n        {messageBubble}\n        <div\n          role=\"alert\"\n          data-testid=\"chat-message-error\"\n          className=\"flex items-center gap-2 text-xs text-[var(--oh-status-error)]\"\n        >\n          <span>{t(I18nKey.CHAT_INTERFACE$MESSAGE_SEND_FAILED)}</span>\n          {onRetry ? (\n            <button\n              type=\"button\"\n              onClick={onRetry}\n              className=\"cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\"\n              data-testid=\"chat-message-retry\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}\n            </button>\n          ) : null}\n          {onDismiss ? (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              className=\"cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\"\n              data-testid=\"chat-message-dismiss\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_DISMISS)}\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  if (type === \"user\" && pendingStatus === \"sending\") {\n    return (\n      <div className=\"flex w-full max-w-full flex-col last:mb-4\">\n        {messageBubble}\n        <div className=\"my-1 w-full py-1 text-sm\">\n          <TextShimmer\n            as=\"p\"\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"chat-message-sending\"\n            className=\"block w-full text-sm font-normal\"\n            duration={1}\n            spread={2}\n          >\n            {t(I18nKey.CHAT_INTERFACE$MESSAGE_SENDING)}\n          </TextShimmer>\n        </div>\n      </div>\n    );\n  }\n\n  return messageBubble;\n}\n"],"mappings":"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"}
+{"version":3,"file":"chat-message.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 { formatEventTimestamp } from \"#/utils/format-event-timestamp\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\nimport { PendingStopIcon } from \"./pending-stop-icon\";\nimport {\n  UserMessageBody,\n  chatBubbleMarkdownComponents,\n  USER_MESSAGE_LINE_HEIGHT_PX,\n} from \"./user-message-body\";\n\nexport type ChatMessagePendingStatus = \"sending\" | \"error\";\n\ninterface ChatMessageProps {\n  type: SourceType;\n  message: string;\n  actions?: Array<{\n    icon: React.ReactNode;\n    onClick: () => void;\n    tooltip?: string;\n  }>;\n  isFromPlanningAgent?: boolean;\n  pendingStatus?: ChatMessagePendingStatus;\n  onRetry?: () => void;\n  onDismiss?: () => void;\n  onStop?: () => void;\n  timestamp?: string;\n}\n\nexport function ChatMessage({\n  type,\n  message,\n  children,\n  actions,\n  isFromPlanningAgent = false,\n  pendingStatus,\n  onRetry,\n  onDismiss,\n  onStop,\n  timestamp,\n}: React.PropsWithChildren<ChatMessageProps>) {\n  const { t, i18n } = useTranslation(\"openhands\");\n  const [isHovering, setIsHovering] = React.useState(false);\n  const [isCopy, setIsCopy] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const [isTruncatable, setIsTruncatable] = React.useState(false);\n  const [isSingleLinePendingMessage, setIsSingleLinePendingMessage] =\n    React.useState(true);\n  const pendingMessageContentRef = React.useRef<HTMLDivElement>(null);\n  const timestampLabel = formatEventTimestamp(timestamp, i18n?.language);\n\n  React.useEffect(() => {\n    setIsExpanded(false);\n  }, [message]);\n\n  const handleCopyToClipboard = async () => {\n    await navigator.clipboard.writeText(message);\n    setIsCopy(true);\n  };\n\n  React.useEffect(() => {\n    let timeout: NodeJS.Timeout;\n\n    if (isCopy) {\n      timeout = setTimeout(() => {\n        setIsCopy(false);\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isCopy]);\n\n  const isPendingUserMessage =\n    type === \"user\" &&\n    (pendingStatus === \"error\" || pendingStatus === \"sending\");\n  const canStopPendingMessage = pendingStatus === \"sending\" && onStop != null;\n  const showStopButton = canStopPendingMessage && isHovering;\n  const useTruncatedUserBody = type === \"user\" && pendingStatus == null;\n  const isCollapsed = useTruncatedUserBody && isTruncatable && !isExpanded;\n  const hasBubbleChildren = React.Children.count(children) > 0;\n\n  React.useLayoutEffect(() => {\n    if (!canStopPendingMessage || useTruncatedUserBody) {\n      return undefined;\n    }\n\n    const content = pendingMessageContentRef.current;\n    if (!content) {\n      return undefined;\n    }\n\n    const measure = () => {\n      const lineHeight = Number.parseFloat(\n        getComputedStyle(content).lineHeight,\n      );\n      const linePx =\n        Number.isFinite(lineHeight) && lineHeight > 0\n          ? lineHeight\n          : USER_MESSAGE_LINE_HEIGHT_PX;\n\n      setIsSingleLinePendingMessage(content.scrollHeight <= linePx + 1);\n    };\n\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [message, canStopPendingMessage, useTruncatedUserBody]);\n\n  const messageContent = useTruncatedUserBody ? (\n    <UserMessageBody\n      message={message}\n      isHovering={isHovering}\n      isExpanded={isExpanded}\n      onTruncatableChange={setIsTruncatable}\n    />\n  ) : (\n    <div\n      ref={pendingMessageContentRef}\n      className=\"min-w-0 text-sm leading-6 whitespace-normal [word-break:break-word]\"\n    >\n      <MarkdownRenderer\n        includeStandard\n        includeHeadings\n        allowHtml={type !== \"user\"}\n        components={chatBubbleMarkdownComponents}\n      >\n        {message}\n      </MarkdownRenderer>\n    </div>\n  );\n\n  const renderedMessageContent = messageContent;\n\n  const messageBubble = (\n    <article\n      data-testid={`${type}-message`}\n      data-pending-status={pendingStatus}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      className={cn(\n        \"rounded-xl relative w-fit max-w-full flex flex-col\",\n        hasBubbleChildren && \"gap-2\",\n        type === \"user\" && \"mt-6 bg-tertiary self-end px-4 py-2.5\",\n        type === \"agent\" && \"mt-6 w-full max-w-full bg-transparent\",\n        isFromPlanningAgent &&\n          type === \"agent\" &&\n          \"border border-[#597ff4] bg-tertiary p-4 mt-2\",\n        pendingStatus === \"error\" &&\n          \"border border-[var(--oh-status-error)]/40\",\n        !isPendingUserMessage && \"last:mb-4\",\n      )}\n    >\n      <div\n        className={cn(\n          \"absolute -top-2.5 -right-2.5 z-10\",\n          !isHovering || pendingStatus === \"sending\" ? \"hidden\" : \"flex\",\n          \"items-center gap-1\",\n        )}\n        onClick={(event) => event.stopPropagation()}\n      >\n        {actions?.map((action, index) =>\n          action.tooltip ? (\n            <StyledTooltip key={index} content={action.tooltip} placement=\"top\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className=\"button-base p-1 cursor-pointer\"\n                aria-label={action.tooltip}\n              >\n                {action.icon}\n              </button>\n            </StyledTooltip>\n          ) : (\n            <button\n              key={index}\n              type=\"button\"\n              onClick={action.onClick}\n              className=\"button-base p-1 cursor-pointer\"\n              aria-label={`Action ${index + 1}`}\n            >\n              {action.icon}\n            </button>\n          ),\n        )}\n\n        <CopyToClipboardButton\n          isHidden={!isHovering}\n          isDisabled={isCopy}\n          onClick={handleCopyToClipboard}\n          mode={isCopy ? \"copied\" : \"copy\"}\n        />\n      </div>\n\n      {renderedMessageContent}\n\n      {canStopPendingMessage ? (\n        <button\n          type=\"button\"\n          onClick={(event) => {\n            event.stopPropagation();\n            onStop?.();\n          }}\n          data-testid=\"chat-message-stop\"\n          aria-label={t(I18nKey.BUTTON$STOP)}\n          aria-hidden={!showStopButton}\n          tabIndex={showStopButton ? 0 : -1}\n          className={cn(\n            \"group absolute z-10 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-[var(--oh-color-tertiary)] text-[var(--oh-foreground)] transition-opacity duration-150\",\n            isSingleLinePendingMessage\n              ? \"right-3 top-1/2 -translate-y-1/2\"\n              : \"right-3 bottom-2.5\",\n            showStopButton ? \"opacity-100\" : \"pointer-events-none opacity-0\",\n          )}\n        >\n          <PendingStopIcon className=\"block h-7 w-7 max-w-none\" />\n        </button>\n      ) : null}\n\n      {isCollapsed ? (\n        <button\n          type=\"button\"\n          data-testid=\"chat-message-expand\"\n          aria-expanded={false}\n          aria-label={t(I18nKey.COMMON$VIEW_MORE)}\n          className=\"absolute inset-0 z-[1] cursor-pointer rounded-xl border-0 bg-transparent p-0\"\n          onClick={() => setIsExpanded(true)}\n        />\n      ) : null}\n\n      {children}\n    </article>\n  );\n\n  const messageBubbleWithTimestamp = timestampLabel ? (\n    <StyledTooltip\n      content={<time dateTime={timestamp}>{timestampLabel}</time>}\n      placement=\"top\"\n      isOpen={isHovering}\n    >\n      {messageBubble}\n    </StyledTooltip>\n  ) : (\n    messageBubble\n  );\n\n  if (type === \"user\" && pendingStatus === \"error\") {\n    return (\n      <div className=\"flex w-fit max-w-full flex-col items-end gap-1.5 self-end last:mb-4\">\n        {messageBubbleWithTimestamp}\n        <div\n          role=\"alert\"\n          data-testid=\"chat-message-error\"\n          className=\"flex items-center gap-2 text-xs text-[var(--oh-status-error)]\"\n        >\n          <span>{t(I18nKey.CHAT_INTERFACE$MESSAGE_SEND_FAILED)}</span>\n          {onRetry ? (\n            <button\n              type=\"button\"\n              onClick={onRetry}\n              className=\"cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\"\n              data-testid=\"chat-message-retry\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}\n            </button>\n          ) : null}\n          {onDismiss ? (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              className=\"cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\"\n              data-testid=\"chat-message-dismiss\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_DISMISS)}\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  if (type === \"user\" && pendingStatus === \"sending\") {\n    return (\n      <div className=\"flex w-full max-w-full flex-col last:mb-4\">\n        {messageBubbleWithTimestamp}\n        <div className=\"my-1 w-full py-1 text-sm\">\n          <TextShimmer\n            as=\"p\"\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"chat-message-sending\"\n            className=\"block w-full text-sm font-normal\"\n            duration={1}\n            spread={2}\n          >\n            {t(I18nKey.CHAT_INTERFACE$MESSAGE_SENDING)}\n          </TextShimmer>\n        </div>\n      </div>\n    );\n  }\n\n  return messageBubbleWithTimestamp;\n}\n"],"mappings":"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"}

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

@@ -14,6 +14,7 @@ interface ChatMessageProps {
     onRetry?: () => void;
     onDismiss?: () => void;
     onStop?: () => void;
+    timestamp?: string;
 }
-export declare function ChatMessage({ type, message, children, actions, isFromPlanningAgent, pendingStatus, onRetry, onDismiss, onStop, }: React.PropsWithChildren<ChatMessageProps>): React.JSX.Element;
+export declare function ChatMessage({ type, message, children, actions, isFromPlanningAgent, pendingStatus, onRetry, onDismiss, onStop, timestamp, }: React.PropsWithChildren<ChatMessageProps>): React.JSX.Element;
 export {};

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"chat-message.js","names":[],"sources":["../../../../src/components/features/chat/chat-message.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport type { SourceType } from \"#/types/agent-server/core/base/common\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { TextShimmer } from \"#/components/shared/text-shimmer\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\nimport { PendingStopIcon } from \"./pending-stop-icon\";\nimport {\n  UserMessageBody,\n  chatBubbleMarkdownComponents,\n  USER_MESSAGE_LINE_HEIGHT_PX,\n} from \"./user-message-body\";\n\nexport type ChatMessagePendingStatus = \"sending\" | \"error\";\n\ninterface ChatMessageProps {\n  type: SourceType;\n  message: string;\n  actions?: Array<{\n    icon: React.ReactNode;\n    onClick: () => void;\n    tooltip?: string;\n  }>;\n  isFromPlanningAgent?: boolean;\n  pendingStatus?: ChatMessagePendingStatus;\n  onRetry?: () => void;\n  onDismiss?: () => void;\n  onStop?: () => void;\n}\n\nexport function ChatMessage({\n  type,\n  message,\n  children,\n  actions,\n  isFromPlanningAgent = false,\n  pendingStatus,\n  onRetry,\n  onDismiss,\n  onStop,\n}: React.PropsWithChildren<ChatMessageProps>) {\n  const { t } = useTranslation(\"openhands\");\n  const [isHovering, setIsHovering] = React.useState(false);\n  const [isCopy, setIsCopy] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const [isTruncatable, setIsTruncatable] = React.useState(false);\n  const [isSingleLinePendingMessage, setIsSingleLinePendingMessage] =\n    React.useState(true);\n  const pendingMessageContentRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    setIsExpanded(false);\n  }, [message]);\n\n  const handleCopyToClipboard = async () => {\n    await navigator.clipboard.writeText(message);\n    setIsCopy(true);\n  };\n\n  React.useEffect(() => {\n    let timeout: NodeJS.Timeout;\n\n    if (isCopy) {\n      timeout = setTimeout(() => {\n        setIsCopy(false);\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isCopy]);\n\n  const isPendingUserMessage =\n    type === \"user\" &&\n    (pendingStatus === \"error\" || pendingStatus === \"sending\");\n  const canStopPendingMessage = pendingStatus === \"sending\" && onStop != null;\n  const showStopButton = canStopPendingMessage && isHovering;\n  const useTruncatedUserBody = type === \"user\" && pendingStatus == null;\n  const isCollapsed = useTruncatedUserBody && isTruncatable && !isExpanded;\n  const hasBubbleChildren = React.Children.count(children) > 0;\n\n  React.useLayoutEffect(() => {\n    if (!canStopPendingMessage || useTruncatedUserBody) {\n      return undefined;\n    }\n\n    const content = pendingMessageContentRef.current;\n    if (!content) {\n      return undefined;\n    }\n\n    const measure = () => {\n      const lineHeight = Number.parseFloat(\n        getComputedStyle(content).lineHeight,\n      );\n      const linePx =\n        Number.isFinite(lineHeight) && lineHeight > 0\n          ? lineHeight\n          : USER_MESSAGE_LINE_HEIGHT_PX;\n\n      setIsSingleLinePendingMessage(content.scrollHeight <= linePx + 1);\n    };\n\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [message, canStopPendingMessage, useTruncatedUserBody]);\n\n  const messageContent = useTruncatedUserBody ? (\n    <UserMessageBody\n      message={message}\n      isHovering={isHovering}\n      isExpanded={isExpanded}\n      onTruncatableChange={setIsTruncatable}\n    />\n  ) : (\n    <div\n      ref={pendingMessageContentRef}\n      className=\"min-w-0 text-sm leading-6 whitespace-normal [word-break:break-word]\"\n    >\n      <MarkdownRenderer\n        includeStandard\n        includeHeadings\n        allowHtml={type !== \"user\"}\n        components={chatBubbleMarkdownComponents}\n      >\n        {message}\n      </MarkdownRenderer>\n    </div>\n  );\n\n  const renderedMessageContent = messageContent;\n\n  const messageBubble = (\n    <article\n      data-testid={`${type}-message`}\n      data-pending-status={pendingStatus}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      className={cn(\n        \"rounded-xl relative w-fit max-w-full flex flex-col\",\n        hasBubbleChildren && \"gap-2\",\n        type === \"user\" && \"mt-6 bg-tertiary self-end px-4 py-2.5\",\n        type === \"agent\" && \"mt-6 w-full max-w-full bg-transparent\",\n        isFromPlanningAgent &&\n          type === \"agent\" &&\n          \"border border-[#597ff4] bg-tertiary p-4 mt-2\",\n        pendingStatus === \"error\" &&\n          \"border border-[var(--oh-status-error)]/40\",\n        !isPendingUserMessage && \"last:mb-4\",\n      )}\n    >\n      <div\n        className={cn(\n          \"absolute -top-2.5 -right-2.5 z-10\",\n          !isHovering || pendingStatus === \"sending\" ? \"hidden\" : \"flex\",\n          \"items-center gap-1\",\n        )}\n        onClick={(event) => event.stopPropagation()}\n      >\n        {actions?.map((action, index) =>\n          action.tooltip ? (\n            <StyledTooltip key={index} content={action.tooltip} placement=\"top\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className=\"button-base p-1 cursor-pointer\"\n                aria-label={action.tooltip}\n              >\n                {action.icon}\n              </button>\n            </StyledTooltip>\n          ) : (\n            <button\n              key={index}\n              type=\"button\"\n              onClick={action.onClick}\n              className=\"button-base p-1 cursor-pointer\"\n              aria-label={`Action ${index + 1}`}\n            >\n              {action.icon}\n            </button>\n          ),\n        )}\n\n        <CopyToClipboardButton\n          isHidden={!isHovering}\n          isDisabled={isCopy}\n          onClick={handleCopyToClipboard}\n          mode={isCopy ? \"copied\" : \"copy\"}\n        />\n      </div>\n\n      {renderedMessageContent}\n\n      {canStopPendingMessage ? (\n        <button\n          type=\"button\"\n          onClick={(event) => {\n            event.stopPropagation();\n            onStop?.();\n          }}\n          data-testid=\"chat-message-stop\"\n          aria-label={t(I18nKey.BUTTON$STOP)}\n          aria-hidden={!showStopButton}\n          tabIndex={showStopButton ? 0 : -1}\n          className={cn(\n            \"group absolute z-10 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-[var(--oh-color-tertiary)] text-[var(--oh-foreground)] transition-opacity duration-150\",\n            isSingleLinePendingMessage\n              ? \"right-3 top-1/2 -translate-y-1/2\"\n              : \"right-3 bottom-2.5\",\n            showStopButton ? \"opacity-100\" : \"pointer-events-none opacity-0\",\n          )}\n        >\n          <PendingStopIcon className=\"block h-7 w-7 max-w-none\" />\n        </button>\n      ) : null}\n\n      {isCollapsed ? (\n        <button\n          type=\"button\"\n          data-testid=\"chat-message-expand\"\n          aria-expanded={false}\n          aria-label={t(I18nKey.COMMON$VIEW_MORE)}\n          className=\"absolute inset-0 z-[1] cursor-pointer rounded-xl border-0 bg-transparent p-0\"\n          onClick={() => setIsExpanded(true)}\n        />\n      ) : null}\n\n      {children}\n    </article>\n  );\n\n  if (type === \"user\" && pendingStatus === \"error\") {\n    return (\n      <div className=\"flex w-fit max-w-full flex-col items-end gap-1.5 self-end last:mb-4\">\n        {messageBubble}\n        <div\n          role=\"alert\"\n          data-testid=\"chat-message-error\"\n          className=\"flex items-center gap-2 text-xs text-[var(--oh-status-error)]\"\n        >\n          <span>{t(I18nKey.CHAT_INTERFACE$MESSAGE_SEND_FAILED)}</span>\n          {onRetry ? (\n            <button\n              type=\"button\"\n              onClick={onRetry}\n              className=\"cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\"\n              data-testid=\"chat-message-retry\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}\n            </button>\n          ) : null}\n          {onDismiss ? (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              className=\"cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\"\n              data-testid=\"chat-message-dismiss\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_DISMISS)}\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  if (type === \"user\" && pendingStatus === \"sending\") {\n    return (\n      <div className=\"flex w-full max-w-full flex-col last:mb-4\">\n        {messageBubble}\n        <div className=\"my-1 w-full py-1 text-sm\">\n          <TextShimmer\n            as=\"p\"\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"chat-message-sending\"\n            className=\"block w-full text-sm font-normal\"\n            duration={1}\n            spread={2}\n          >\n            {t(I18nKey.CHAT_INTERFACE$MESSAGE_SENDING)}\n          </TextShimmer>\n        </div>\n      </div>\n    );\n  }\n\n  return messageBubble;\n}\n"],"mappings":"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"}
+{"version":3,"file":"chat-message.js","names":[],"sources":["../../../../src/components/features/chat/chat-message.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport type { SourceType } from \"#/types/agent-server/core/base/common\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { TextShimmer } from \"#/components/shared/text-shimmer\";\nimport { formatEventTimestamp } from \"#/utils/format-event-timestamp\";\nimport { MarkdownRenderer } from \"../markdown/markdown-renderer\";\nimport { PendingStopIcon } from \"./pending-stop-icon\";\nimport {\n  UserMessageBody,\n  chatBubbleMarkdownComponents,\n  USER_MESSAGE_LINE_HEIGHT_PX,\n} from \"./user-message-body\";\n\nexport type ChatMessagePendingStatus = \"sending\" | \"error\";\n\ninterface ChatMessageProps {\n  type: SourceType;\n  message: string;\n  actions?: Array<{\n    icon: React.ReactNode;\n    onClick: () => void;\n    tooltip?: string;\n  }>;\n  isFromPlanningAgent?: boolean;\n  pendingStatus?: ChatMessagePendingStatus;\n  onRetry?: () => void;\n  onDismiss?: () => void;\n  onStop?: () => void;\n  timestamp?: string;\n}\n\nexport function ChatMessage({\n  type,\n  message,\n  children,\n  actions,\n  isFromPlanningAgent = false,\n  pendingStatus,\n  onRetry,\n  onDismiss,\n  onStop,\n  timestamp,\n}: React.PropsWithChildren<ChatMessageProps>) {\n  const { t, i18n } = useTranslation(\"openhands\");\n  const [isHovering, setIsHovering] = React.useState(false);\n  const [isCopy, setIsCopy] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const [isTruncatable, setIsTruncatable] = React.useState(false);\n  const [isSingleLinePendingMessage, setIsSingleLinePendingMessage] =\n    React.useState(true);\n  const pendingMessageContentRef = React.useRef<HTMLDivElement>(null);\n  const timestampLabel = formatEventTimestamp(timestamp, i18n?.language);\n\n  React.useEffect(() => {\n    setIsExpanded(false);\n  }, [message]);\n\n  const handleCopyToClipboard = async () => {\n    await navigator.clipboard.writeText(message);\n    setIsCopy(true);\n  };\n\n  React.useEffect(() => {\n    let timeout: NodeJS.Timeout;\n\n    if (isCopy) {\n      timeout = setTimeout(() => {\n        setIsCopy(false);\n      }, 2000);\n    }\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isCopy]);\n\n  const isPendingUserMessage =\n    type === \"user\" &&\n    (pendingStatus === \"error\" || pendingStatus === \"sending\");\n  const canStopPendingMessage = pendingStatus === \"sending\" && onStop != null;\n  const showStopButton = canStopPendingMessage && isHovering;\n  const useTruncatedUserBody = type === \"user\" && pendingStatus == null;\n  const isCollapsed = useTruncatedUserBody && isTruncatable && !isExpanded;\n  const hasBubbleChildren = React.Children.count(children) > 0;\n\n  React.useLayoutEffect(() => {\n    if (!canStopPendingMessage || useTruncatedUserBody) {\n      return undefined;\n    }\n\n    const content = pendingMessageContentRef.current;\n    if (!content) {\n      return undefined;\n    }\n\n    const measure = () => {\n      const lineHeight = Number.parseFloat(\n        getComputedStyle(content).lineHeight,\n      );\n      const linePx =\n        Number.isFinite(lineHeight) && lineHeight > 0\n          ? lineHeight\n          : USER_MESSAGE_LINE_HEIGHT_PX;\n\n      setIsSingleLinePendingMessage(content.scrollHeight <= linePx + 1);\n    };\n\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [message, canStopPendingMessage, useTruncatedUserBody]);\n\n  const messageContent = useTruncatedUserBody ? (\n    <UserMessageBody\n      message={message}\n      isHovering={isHovering}\n      isExpanded={isExpanded}\n      onTruncatableChange={setIsTruncatable}\n    />\n  ) : (\n    <div\n      ref={pendingMessageContentRef}\n      className=\"min-w-0 text-sm leading-6 whitespace-normal [word-break:break-word]\"\n    >\n      <MarkdownRenderer\n        includeStandard\n        includeHeadings\n        allowHtml={type !== \"user\"}\n        components={chatBubbleMarkdownComponents}\n      >\n        {message}\n      </MarkdownRenderer>\n    </div>\n  );\n\n  const renderedMessageContent = messageContent;\n\n  const messageBubble = (\n    <article\n      data-testid={`${type}-message`}\n      data-pending-status={pendingStatus}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      className={cn(\n        \"rounded-xl relative w-fit max-w-full flex flex-col\",\n        hasBubbleChildren && \"gap-2\",\n        type === \"user\" && \"mt-6 bg-tertiary self-end px-4 py-2.5\",\n        type === \"agent\" && \"mt-6 w-full max-w-full bg-transparent\",\n        isFromPlanningAgent &&\n          type === \"agent\" &&\n          \"border border-[#597ff4] bg-tertiary p-4 mt-2\",\n        pendingStatus === \"error\" &&\n          \"border border-[var(--oh-status-error)]/40\",\n        !isPendingUserMessage && \"last:mb-4\",\n      )}\n    >\n      <div\n        className={cn(\n          \"absolute -top-2.5 -right-2.5 z-10\",\n          !isHovering || pendingStatus === \"sending\" ? \"hidden\" : \"flex\",\n          \"items-center gap-1\",\n        )}\n        onClick={(event) => event.stopPropagation()}\n      >\n        {actions?.map((action, index) =>\n          action.tooltip ? (\n            <StyledTooltip key={index} content={action.tooltip} placement=\"top\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className=\"button-base p-1 cursor-pointer\"\n                aria-label={action.tooltip}\n              >\n                {action.icon}\n              </button>\n            </StyledTooltip>\n          ) : (\n            <button\n              key={index}\n              type=\"button\"\n              onClick={action.onClick}\n              className=\"button-base p-1 cursor-pointer\"\n              aria-label={`Action ${index + 1}`}\n            >\n              {action.icon}\n            </button>\n          ),\n        )}\n\n        <CopyToClipboardButton\n          isHidden={!isHovering}\n          isDisabled={isCopy}\n          onClick={handleCopyToClipboard}\n          mode={isCopy ? \"copied\" : \"copy\"}\n        />\n      </div>\n\n      {renderedMessageContent}\n\n      {canStopPendingMessage ? (\n        <button\n          type=\"button\"\n          onClick={(event) => {\n            event.stopPropagation();\n            onStop?.();\n          }}\n          data-testid=\"chat-message-stop\"\n          aria-label={t(I18nKey.BUTTON$STOP)}\n          aria-hidden={!showStopButton}\n          tabIndex={showStopButton ? 0 : -1}\n          className={cn(\n            \"group absolute z-10 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-[var(--oh-color-tertiary)] text-[var(--oh-foreground)] transition-opacity duration-150\",\n            isSingleLinePendingMessage\n              ? \"right-3 top-1/2 -translate-y-1/2\"\n              : \"right-3 bottom-2.5\",\n            showStopButton ? \"opacity-100\" : \"pointer-events-none opacity-0\",\n          )}\n        >\n          <PendingStopIcon className=\"block h-7 w-7 max-w-none\" />\n        </button>\n      ) : null}\n\n      {isCollapsed ? (\n        <button\n          type=\"button\"\n          data-testid=\"chat-message-expand\"\n          aria-expanded={false}\n          aria-label={t(I18nKey.COMMON$VIEW_MORE)}\n          className=\"absolute inset-0 z-[1] cursor-pointer rounded-xl border-0 bg-transparent p-0\"\n          onClick={() => setIsExpanded(true)}\n        />\n      ) : null}\n\n      {children}\n    </article>\n  );\n\n  const messageBubbleWithTimestamp = timestampLabel ? (\n    <StyledTooltip\n      content={<time dateTime={timestamp}>{timestampLabel}</time>}\n      placement=\"top\"\n      isOpen={isHovering}\n    >\n      {messageBubble}\n    </StyledTooltip>\n  ) : (\n    messageBubble\n  );\n\n  if (type === \"user\" && pendingStatus === \"error\") {\n    return (\n      <div className=\"flex w-fit max-w-full flex-col items-end gap-1.5 self-end last:mb-4\">\n        {messageBubbleWithTimestamp}\n        <div\n          role=\"alert\"\n          data-testid=\"chat-message-error\"\n          className=\"flex items-center gap-2 text-xs text-[var(--oh-status-error)]\"\n        >\n          <span>{t(I18nKey.CHAT_INTERFACE$MESSAGE_SEND_FAILED)}</span>\n          {onRetry ? (\n            <button\n              type=\"button\"\n              onClick={onRetry}\n              className=\"cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\"\n              data-testid=\"chat-message-retry\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}\n            </button>\n          ) : null}\n          {onDismiss ? (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              className=\"cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\"\n              data-testid=\"chat-message-dismiss\"\n            >\n              {t(I18nKey.CHAT_INTERFACE$MESSAGE_DISMISS)}\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  if (type === \"user\" && pendingStatus === \"sending\") {\n    return (\n      <div className=\"flex w-full max-w-full flex-col last:mb-4\">\n        {messageBubbleWithTimestamp}\n        <div className=\"my-1 w-full py-1 text-sm\">\n          <TextShimmer\n            as=\"p\"\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"chat-message-sending\"\n            className=\"block w-full text-sm font-normal\"\n            duration={1}\n            spread={2}\n          >\n            {t(I18nKey.CHAT_INTERFACE$MESSAGE_SENDING)}\n          </TextShimmer>\n        </div>\n      </div>\n    );\n  }\n\n  return messageBubbleWithTimestamp;\n}\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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