@openhands/agent-canvas 1.16.0 → 1.18.0

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/chat-input-llm-profile-picker.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/checkmark.cjs"),a=require("../../../../utils/form-control-classes.cjs"),o=require("../../../../utils/format-model-name.cjs"),s=require("../../../../ui/typography.cjs"),c=require("../../../../ui/combobox-caret.cjs"),l=require("../../../../ui/context-menu.cjs"),u=require("../../context-menu/context-menu-list-item.cjs"),d=require("../../../../hooks/use-click-outside-element.cjs"),f=require("../../../../icons/settings-gear.cjs"),p=require("../../../shared/navigation-link.cjs"),m=require("../../../../ui/divider.cjs"),h=require("../../../../hooks/use-chat-input-llm-profile-state.cjs");let g=require("react");g=e.__toESM(g,1);let _=require("react/jsx-runtime");var v=18;function y(e){return e.length<=v?e:`${e.slice(0,v)}…`}function b({onClose:e,dividerInset:a,settingsLinkClassName:c,settingsIconClassName:l}){let{t:d}=t.useTranslation(`openhands`),{profiles:g,currentProfileName:v,currentProfileModel:y,canSwitchProfile:b,selectProfile:x}=h.useChatInputLlmProfileState(),S=b&&g.length>0,C=b?null:v,w=t=>{x(t),e()};return(0,_.jsxs)(_.Fragment,{children:[S&&(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`li`,{role:`presentation`,className:`px-2 pt-1 pb-0.5`,children:(0,_.jsx)(s.Typography.Text,{className:`text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4`,children:d(n.I18nKey.SETTINGS$AVAILABLE_PROFILES)})}),g.map(t=>{let n=t.name===v,a=o.formatModelNameForDisplay(t.model);return(0,_.jsxs)(u.ContextMenuListItem,{testId:`chat-input-llm-profile-option-${t.name}`,onClick:r=>{if(r.preventDefault(),r.stopPropagation(),n){e();return}w(t.name)},className:r.cn(`flex flex-col items-stretch gap-0.5`,n&&`bg-[var(--oh-interactive-hover)]`),children:[(0,_.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,_.jsx)(`span`,{className:`flex-1 truncate text-sm leading-5`,title:t.model??t.name,children:t.name}),n&&(0,_.jsx)(i.default,{width:14,height:14,className:`shrink-0`,"aria-hidden":!0})]}),a&&(0,_.jsx)(`span`,{className:`block truncate text-xs leading-4 text-[var(--oh-muted)]`,children:a})]},t.name)})]}),C&&(0,_.jsx)(`li`,{className:`text-sm`,"data-testid":`chat-input-llm-profile-current`,children:(0,_.jsxs)(`div`,{className:`flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]`,children:[(0,_.jsx)(`span`,{className:`truncate`,title:C,children:C}),y&&(0,_.jsx)(`span`,{className:`truncate text-xs leading-4 text-[var(--oh-muted)]`,children:o.formatModelNameForDisplay(y)})]})}),(S||C)&&(0,_.jsx)(m.Divider,{inset:a}),(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsxs)(p.NavigationLink,{to:`/settings/llm`,onClick:e,className:r.cn(`flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors`,c),children:[(0,_.jsx)(f.default,{width:16,height:16,className:r.cn(`shrink-0`,l),"aria-hidden":!0}),(0,_.jsx)(`span`,{children:d(n.I18nKey.SETTINGS$LLM_PROFILES)})]})})]})}function x(){let{t:e}=t.useTranslation(`openhands`),{profiles:i,currentProfileName:o,isLoading:s,isSwitching:u}=h.useChatInputLlmProfileState(),[f,p]=g.default.useState(!1),m=g.default.useRef(null),v=d.useClickOutsideElement(()=>p(!1),m);if(s||i.length===0)return null;let x=o??e(n.I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);return(0,_.jsxs)(`div`,{className:`relative min-w-0`,children:[(0,_.jsxs)(`button`,{ref:m,type:`button`,className:r.cn(a.chatInputPillButtonClassName,`max-w-[200px]`),title:o??void 0,"data-testid":`chat-input-llm-profile`,"aria-expanded":f,"aria-haspopup":`dialog`,disabled:u,"aria-busy":u,onClick:e=>{e.preventDefault(),e.stopPropagation(),p(e=>!e)},children:[(0,_.jsx)(`span`,{className:`truncate`,children:y(x)}),(0,_.jsx)(c.ComboboxCaretInline,{isOpen:f})]}),f&&(0,_.jsx)(l.ContextMenu,{ref:v,testId:`chat-input-llm-profile-popover`,position:`top`,alignment:`left`,spacing:`none`,className:`z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto`,children:(0,_.jsx)(b,{onClose:()=>p(!1)})})]})}exports.ChatInputLlmProfileMenuContent=b,exports.ChatInputLlmProfilePicker=x;
+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/checkmark.cjs"),a=require("../../../../utils/form-control-classes.cjs"),o=require("../../../../hooks/query/use-free-models.cjs"),s=require("../../../../utils/format-model-name.cjs"),c=require("../../../../ui/typography.cjs"),l=require("../../../../ui/combobox-caret.cjs"),u=require("../../../../ui/context-menu.cjs"),d=require("../../context-menu/context-menu-list-item.cjs"),f=require("../../../../hooks/use-click-outside-element.cjs"),p=require("../../../../icons/settings-gear.cjs"),m=require("../../../shared/navigation-link.cjs"),h=require("../../../../ui/divider.cjs"),g=require("../../../../hooks/use-chat-input-llm-profile-state.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime");var y=18;function b(e){return e.length<=y?e:`${e.slice(0,y)}…`}function x({onClose:e,dividerInset:a,settingsLinkClassName:l,settingsIconClassName:u}){let{t:f}=t.useTranslation(`openhands`),_=o.useFreeModels(),{profiles:y,currentProfileName:b,currentProfileModel:x,canSwitchProfile:S,selectProfile:C}=g.useChatInputLlmProfileState(),w=S&&y.length>0,T=S?null:b,E=t=>{C(t),e()};return(0,v.jsxs)(v.Fragment,{children:[w&&(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(`li`,{role:`presentation`,className:`px-2 pt-1 pb-0.5`,children:(0,v.jsx)(c.Typography.Text,{className:`text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4`,children:f(n.I18nKey.SETTINGS$AVAILABLE_PROFILES)})}),y.map(t=>{let n=t.name===b,a=s.formatModelPillLabel(t.model,_);return(0,v.jsxs)(d.ContextMenuListItem,{testId:`chat-input-llm-profile-option-${t.name}`,onClick:r=>{if(r.preventDefault(),r.stopPropagation(),n){e();return}E(t.name)},className:r.cn(`flex flex-col items-stretch gap-0.5`,n&&`bg-[var(--oh-interactive-hover)]`),children:[(0,v.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,v.jsx)(`span`,{className:`flex-1 truncate text-sm leading-5`,title:t.model??t.name,children:t.name}),n&&(0,v.jsx)(i.default,{width:14,height:14,className:`shrink-0`,"aria-hidden":!0})]}),a&&(0,v.jsx)(`span`,{className:`block truncate text-xs leading-4 text-[var(--oh-muted)]`,children:a})]},t.name)})]}),T&&(0,v.jsx)(`li`,{className:`text-sm`,"data-testid":`chat-input-llm-profile-current`,children:(0,v.jsxs)(`div`,{className:`flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]`,children:[(0,v.jsx)(`span`,{className:`truncate`,title:T,children:T}),x&&(0,v.jsx)(`span`,{className:`truncate text-xs leading-4 text-[var(--oh-muted)]`,children:s.formatModelPillLabel(x,_)})]})}),(w||T)&&(0,v.jsx)(h.Divider,{inset:a}),(0,v.jsx)(`li`,{className:`text-sm`,children:(0,v.jsxs)(m.NavigationLink,{to:`/settings/llm`,onClick:e,className:r.cn(`flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors`,l),children:[(0,v.jsx)(p.default,{width:16,height:16,className:r.cn(`shrink-0`,u),"aria-hidden":!0}),(0,v.jsx)(`span`,{children:f(n.I18nKey.SETTINGS$LLM_PROFILES)})]})})]})}function S(){let{t:e}=t.useTranslation(`openhands`),{profiles:i,currentProfileName:o,isLoading:s,isSwitching:c}=g.useChatInputLlmProfileState(),[d,p]=_.default.useState(!1),m=_.default.useRef(null),h=f.useClickOutsideElement(()=>p(!1),m);if(s||i.length===0)return null;let y=o??e(n.I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);return(0,v.jsxs)(`div`,{className:`relative min-w-0`,children:[(0,v.jsxs)(`button`,{ref:m,type:`button`,className:r.cn(a.chatInputPillButtonClassName,`max-w-[200px]`),title:o??void 0,"data-testid":`chat-input-llm-profile`,"aria-expanded":d,"aria-haspopup":`dialog`,disabled:c,"aria-busy":c,onClick:e=>{e.preventDefault(),e.stopPropagation(),p(e=>!e)},children:[(0,v.jsx)(`span`,{className:`truncate`,children:b(y)}),(0,v.jsx)(l.ComboboxCaretInline,{isOpen:d})]}),d&&(0,v.jsx)(u.ContextMenu,{ref:h,testId:`chat-input-llm-profile-popover`,position:`top`,alignment:`left`,spacing:`none`,className:`z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto`,children:(0,v.jsx)(x,{onClose:()=>p(!1)})})]})}exports.ChatInputLlmProfileMenuContent=x,exports.ChatInputLlmProfilePicker=S;
 //# sourceMappingURL=chat-input-llm-profile-picker.cjs.map

package/dist/components/features/chat/components/chat-input-llm-profile-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-llm-profile-picker.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-llm-profile-picker.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useChatInputLlmProfileState } from \"#/hooks/use-chat-input-llm-profile-state\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\nimport { formatModelNameForDisplay } from \"#/utils/format-model-name\";\n\nconst PROFILE_LABEL_MAX_CHARS = 18;\n\nfunction truncateLabel(label: string): string {\n  return label.length <= PROFILE_LABEL_MAX_CHARS\n    ? label\n    : `${label.slice(0, PROFILE_LABEL_MAX_CHARS)}…`;\n}\n\ninterface ChatInputLlmProfileMenuContentProps {\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\n/**\n * The in-conversation OpenHands LLM-profile switcher list. Selecting a profile\n * live-swaps the running conversation's LLM via `/switch_profile` (the ACP\n * analog is {@link ChatInputModelMenuContent}). Shared by the inline pill and\n * the chat-input overflow submenu.\n */\nexport function ChatInputLlmProfileMenuContent({\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputLlmProfileMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const {\n    profiles,\n    currentProfileName,\n    currentProfileModel,\n    canSwitchProfile,\n    selectProfile,\n  } = useChatInputLlmProfileState();\n  // Read-only surfaces (a cloud member on the home page, or a start-task route)\n  // still name the active profile — the same shape ChatInputModelMenuContent\n  // uses when the ACP picker is gated off.\n  const showProfileList = canSwitchProfile && profiles.length > 0;\n  const readOnlyProfileName = canSwitchProfile ? null : currentProfileName;\n\n  const handleSelect = (profileName: string) => {\n    selectProfile(profileName);\n    onClose();\n  };\n\n  return (\n    <>\n      {showProfileList && (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the label as a menu item. */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.SETTINGS$AVAILABLE_PROFILES)}\n            </Typography.Text>\n          </li>\n          {profiles.map((profile) => {\n            const isCurrent = profile.name === currentProfileName;\n            const displayModel = formatModelNameForDisplay(profile.model);\n            return (\n              <ContextMenuListItem\n                key={profile.name}\n                testId={`chat-input-llm-profile-option-${profile.name}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  if (isCurrent) {\n                    onClose();\n                    return;\n                  }\n                  handleSelect(profile.name);\n                }}\n                className={cn(\n                  \"flex flex-col items-stretch gap-0.5\",\n                  isCurrent && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span className=\"flex items-center gap-2\">\n                  <span\n                    className=\"flex-1 truncate text-sm leading-5\"\n                    title={profile.model ?? profile.name}\n                  >\n                    {profile.name}\n                  </span>\n                  {isCurrent && (\n                    <CheckIcon\n                      width={14}\n                      height={14}\n                      className=\"shrink-0\"\n                      aria-hidden\n                    />\n                  )}\n                </span>\n                {displayModel && (\n                  <span className=\"block truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                    {displayModel}\n                  </span>\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      )}\n      {readOnlyProfileName && (\n        <li className=\"text-sm\" data-testid=\"chat-input-llm-profile-current\">\n          <div className=\"flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]\">\n            <span className=\"truncate\" title={readOnlyProfileName}>\n              {readOnlyProfileName}\n            </span>\n            {currentProfileModel && (\n              <span className=\"truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                {formatModelNameForDisplay(currentProfileModel)}\n              </span>\n            )}\n          </div>\n        </li>\n      )}\n      {(showProfileList || readOnlyProfileName) && (\n        <Divider inset={dividerInset} />\n      )}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to=\"/settings/llm\"\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{t(I18nKey.SETTINGS$LLM_PROFILES)}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputLlmProfilePicker() {\n  const { t } = useTranslation(\"openhands\");\n  const { profiles, currentProfileName, isLoading, isSwitching } =\n    useChatInputLlmProfileState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  // No LLM profiles yet (or the agent-server lacks the surface): stay out of\n  // the way, exactly like the ACP/AgentProfile pickers.\n  if (isLoading || profiles.length === 0) {\n    return null;\n  }\n\n  const label = currentProfileName ?? t(I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(chatInputPillButtonClassName, \"max-w-[200px]\")}\n        title={currentProfileName ?? undefined}\n        data-testid=\"chat-input-llm-profile\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        // Disabled mid-switch so re-opening can't fire a second /switch_profile.\n        disabled={isSwitching}\n        aria-busy={isSwitching}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span className=\"truncate\">{truncateLabel(label)}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-profile-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputLlmProfileMenuContent\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"chat-input-llm-profile-picker.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-llm-profile-picker.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useChatInputLlmProfileState } from \"#/hooks/use-chat-input-llm-profile-state\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\nimport { useFreeModels } from \"#/hooks/query/use-free-models\";\nimport { formatModelPillLabel } from \"#/utils/format-model-name\";\n\nconst PROFILE_LABEL_MAX_CHARS = 18;\n\nfunction truncateLabel(label: string): string {\n  return label.length <= PROFILE_LABEL_MAX_CHARS\n    ? label\n    : `${label.slice(0, PROFILE_LABEL_MAX_CHARS)}…`;\n}\n\ninterface ChatInputLlmProfileMenuContentProps {\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\n/**\n * The in-conversation OpenHands LLM-profile switcher list. Selecting a profile\n * live-swaps the running conversation's LLM via `/switch_profile` (the ACP\n * analog is {@link ChatInputModelMenuContent}). Shared by the inline pill and\n * the chat-input overflow submenu.\n */\nexport function ChatInputLlmProfileMenuContent({\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputLlmProfileMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const freeModels = useFreeModels();\n  const {\n    profiles,\n    currentProfileName,\n    currentProfileModel,\n    canSwitchProfile,\n    selectProfile,\n  } = useChatInputLlmProfileState();\n  // Read-only surfaces (a cloud member on the home page, or a start-task route)\n  // still name the active profile — the same shape ChatInputModelMenuContent\n  // uses when the ACP picker is gated off.\n  const showProfileList = canSwitchProfile && profiles.length > 0;\n  const readOnlyProfileName = canSwitchProfile ? null : currentProfileName;\n\n  const handleSelect = (profileName: string) => {\n    selectProfile(profileName);\n    onClose();\n  };\n\n  return (\n    <>\n      {showProfileList && (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the label as a menu item. */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.SETTINGS$AVAILABLE_PROFILES)}\n            </Typography.Text>\n          </li>\n          {profiles.map((profile) => {\n            const isCurrent = profile.name === currentProfileName;\n            const displayModel = formatModelPillLabel(\n              profile.model,\n              freeModels,\n            );\n            return (\n              <ContextMenuListItem\n                key={profile.name}\n                testId={`chat-input-llm-profile-option-${profile.name}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  if (isCurrent) {\n                    onClose();\n                    return;\n                  }\n                  handleSelect(profile.name);\n                }}\n                className={cn(\n                  \"flex flex-col items-stretch gap-0.5\",\n                  isCurrent && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span className=\"flex items-center gap-2\">\n                  <span\n                    className=\"flex-1 truncate text-sm leading-5\"\n                    title={profile.model ?? profile.name}\n                  >\n                    {profile.name}\n                  </span>\n                  {isCurrent && (\n                    <CheckIcon\n                      width={14}\n                      height={14}\n                      className=\"shrink-0\"\n                      aria-hidden\n                    />\n                  )}\n                </span>\n                {displayModel && (\n                  <span className=\"block truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                    {displayModel}\n                  </span>\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      )}\n      {readOnlyProfileName && (\n        <li className=\"text-sm\" data-testid=\"chat-input-llm-profile-current\">\n          <div className=\"flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]\">\n            <span className=\"truncate\" title={readOnlyProfileName}>\n              {readOnlyProfileName}\n            </span>\n            {currentProfileModel && (\n              <span className=\"truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                {formatModelPillLabel(currentProfileModel, freeModels)}\n              </span>\n            )}\n          </div>\n        </li>\n      )}\n      {(showProfileList || readOnlyProfileName) && (\n        <Divider inset={dividerInset} />\n      )}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to=\"/settings/llm\"\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{t(I18nKey.SETTINGS$LLM_PROFILES)}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputLlmProfilePicker() {\n  const { t } = useTranslation(\"openhands\");\n  const { profiles, currentProfileName, isLoading, isSwitching } =\n    useChatInputLlmProfileState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  // No LLM profiles yet (or the agent-server lacks the surface): stay out of\n  // the way, exactly like the ACP/AgentProfile pickers.\n  if (isLoading || profiles.length === 0) {\n    return null;\n  }\n\n  const label = currentProfileName ?? t(I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(chatInputPillButtonClassName, \"max-w-[200px]\")}\n        title={currentProfileName ?? undefined}\n        data-testid=\"chat-input-llm-profile\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        // Disabled mid-switch so re-opening can't fire a second /switch_profile.\n        disabled={isSwitching}\n        aria-busy={isSwitching}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span className=\"truncate\">{truncateLabel(label)}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-profile-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputLlmProfileMenuContent\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/chat-input-llm-profile-picker.js

@@ -3,132 +3,133 @@ import { I18nKey as t } from "../../../../i18n/declaration.js";
 import { cn as n } from "../../../../utils/utils.js";
 import r from "../../../../icons/checkmark.js";
 import { chatInputPillButtonClassName as i } from "../../../../utils/form-control-classes.js";
-import { formatModelNameForDisplay as a } from "../../../../utils/format-model-name.js";
-import { Typography as o } from "../../../../ui/typography.js";
-import { ComboboxCaretInline as s } from "../../../../ui/combobox-caret.js";
-import { ContextMenu as c } from "../../../../ui/context-menu.js";
-import { ContextMenuListItem as l } from "../../context-menu/context-menu-list-item.js";
-import { useClickOutsideElement as u } from "../../../../hooks/use-click-outside-element.js";
-import d from "../../../../icons/settings-gear.js";
-import { NavigationLink as f } from "../../../shared/navigation-link.js";
-import { Divider as p } from "../../../../ui/divider.js";
-import { useChatInputLlmProfileState as m } from "../../../../hooks/use-chat-input-llm-profile-state.js";
-import h from "react";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useFreeModels as a } from "../../../../hooks/query/use-free-models.js";
+import { formatModelPillLabel as o } from "../../../../utils/format-model-name.js";
+import { Typography as s } from "../../../../ui/typography.js";
+import { ComboboxCaretInline as c } from "../../../../ui/combobox-caret.js";
+import { ContextMenu as l } from "../../../../ui/context-menu.js";
+import { ContextMenuListItem as u } from "../../context-menu/context-menu-list-item.js";
+import { useClickOutsideElement as d } from "../../../../hooks/use-click-outside-element.js";
+import f from "../../../../icons/settings-gear.js";
+import { NavigationLink as p } from "../../../shared/navigation-link.js";
+import { Divider as m } from "../../../../ui/divider.js";
+import { useChatInputLlmProfileState as h } from "../../../../hooks/use-chat-input-llm-profile-state.js";
+import g from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/features/chat/components/chat-input-llm-profile-picker.tsx
-var y = 18;
-function b(e) {
-	return e.length <= y ? e : `${e.slice(0, y)}…`;
+var b = 18;
+function x(e) {
+	return e.length <= b ? e : `${e.slice(0, b)}…`;
 }
-function x({ onClose: i, dividerInset: s, settingsLinkClassName: c, settingsIconClassName: u }) {
-	let { t: h } = e("openhands"), { profiles: y, currentProfileName: b, currentProfileModel: x, canSwitchProfile: S, selectProfile: C } = m(), w = S && y.length > 0, T = S ? null : b, E = (e) => {
-		C(e), i();
+function S({ onClose: i, dividerInset: c, settingsLinkClassName: l, settingsIconClassName: d }) {
+	let { t: g } = e("openhands"), b = a(), { profiles: x, currentProfileName: S, currentProfileModel: C, canSwitchProfile: w, selectProfile: T } = h(), E = w && x.length > 0, D = w ? null : S, O = (e) => {
+		T(e), i();
 	};
-	return /* @__PURE__ */ v(g, { children: [
-		w && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("li", {
+	return /* @__PURE__ */ y(_, { children: [
+		E && /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("li", {
 			role: "presentation",
 			className: "px-2 pt-1 pb-0.5",
-			children: /* @__PURE__ */ _(o.Text, {
+			children: /* @__PURE__ */ v(s.Text, {
 				className: "text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4",
-				children: h(t.SETTINGS$AVAILABLE_PROFILES)
+				children: g(t.SETTINGS$AVAILABLE_PROFILES)
 			})
-		}), y.map((e) => {
-			let t = e.name === b, o = a(e.model);
-			return /* @__PURE__ */ v(l, {
+		}), x.map((e) => {
+			let t = e.name === S, a = o(e.model, b);
+			return /* @__PURE__ */ y(u, {
 				testId: `chat-input-llm-profile-option-${e.name}`,
 				onClick: (n) => {
 					if (n.preventDefault(), n.stopPropagation(), t) {
 						i();
 						return;
 					}
-					E(e.name);
+					O(e.name);
 				},
 				className: n("flex flex-col items-stretch gap-0.5", t && "bg-[var(--oh-interactive-hover)]"),
-				children: [/* @__PURE__ */ v("span", {
+				children: [/* @__PURE__ */ y("span", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ _("span", {
+					children: [/* @__PURE__ */ v("span", {
 						className: "flex-1 truncate text-sm leading-5",
 						title: e.model ?? e.name,
 						children: e.name
-					}), t && /* @__PURE__ */ _(r, {
+					}), t && /* @__PURE__ */ v(r, {
 						width: 14,
 						height: 14,
 						className: "shrink-0",
 						"aria-hidden": !0
 					})]
-				}), o && /* @__PURE__ */ _("span", {
+				}), a && /* @__PURE__ */ v("span", {
 					className: "block truncate text-xs leading-4 text-[var(--oh-muted)]",
-					children: o
+					children: a
 				})]
 			}, e.name);
 		})] }),
-		T && /* @__PURE__ */ _("li", {
+		D && /* @__PURE__ */ v("li", {
 			className: "text-sm",
 			"data-testid": "chat-input-llm-profile-current",
-			children: /* @__PURE__ */ v("div", {
+			children: /* @__PURE__ */ y("div", {
 				className: "flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]",
-				children: [/* @__PURE__ */ _("span", {
+				children: [/* @__PURE__ */ v("span", {
 					className: "truncate",
-					title: T,
-					children: T
-				}), x && /* @__PURE__ */ _("span", {
+					title: D,
+					children: D
+				}), C && /* @__PURE__ */ v("span", {
 					className: "truncate text-xs leading-4 text-[var(--oh-muted)]",
-					children: a(x)
+					children: o(C, b)
 				})]
 			})
 		}),
-		(w || T) && /* @__PURE__ */ _(p, { inset: s }),
-		/* @__PURE__ */ _("li", {
+		(E || D) && /* @__PURE__ */ v(m, { inset: c }),
+		/* @__PURE__ */ v("li", {
 			className: "text-sm",
-			children: /* @__PURE__ */ v(f, {
+			children: /* @__PURE__ */ y(p, {
 				to: "/settings/llm",
 				onClick: i,
-				className: n("flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors", c),
-				children: [/* @__PURE__ */ _(d, {
+				className: n("flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors", l),
+				children: [/* @__PURE__ */ v(f, {
 					width: 16,
 					height: 16,
-					className: n("shrink-0", u),
+					className: n("shrink-0", d),
 					"aria-hidden": !0
-				}), /* @__PURE__ */ _("span", { children: h(t.SETTINGS$LLM_PROFILES) })]
+				}), /* @__PURE__ */ v("span", { children: g(t.SETTINGS$LLM_PROFILES) })]
 			})
 		})
 	] });
 }
-function S() {
-	let { t: r } = e("openhands"), { profiles: a, currentProfileName: o, isLoading: l, isSwitching: d } = m(), [f, p] = h.useState(!1), g = h.useRef(null), y = u(() => p(!1), g);
-	if (l || a.length === 0) return null;
-	let S = o ?? r(t.LLM$SELECT_MODEL_PLACEHOLDER);
-	return /* @__PURE__ */ v("div", {
+function C() {
+	let { t: r } = e("openhands"), { profiles: a, currentProfileName: o, isLoading: s, isSwitching: u } = h(), [f, p] = g.useState(!1), m = g.useRef(null), _ = d(() => p(!1), m);
+	if (s || a.length === 0) return null;
+	let b = o ?? r(t.LLM$SELECT_MODEL_PLACEHOLDER);
+	return /* @__PURE__ */ y("div", {
 		className: "relative min-w-0",
-		children: [/* @__PURE__ */ v("button", {
-			ref: g,
+		children: [/* @__PURE__ */ y("button", {
+			ref: m,
 			type: "button",
 			className: n(i, "max-w-[200px]"),
 			title: o ?? void 0,
 			"data-testid": "chat-input-llm-profile",
 			"aria-expanded": f,
 			"aria-haspopup": "dialog",
-			disabled: d,
-			"aria-busy": d,
+			disabled: u,
+			"aria-busy": u,
 			onClick: (e) => {
 				e.preventDefault(), e.stopPropagation(), p((e) => !e);
 			},
-			children: [/* @__PURE__ */ _("span", {
+			children: [/* @__PURE__ */ v("span", {
 				className: "truncate",
-				children: b(S)
-			}), /* @__PURE__ */ _(s, { isOpen: f })]
-		}), f && /* @__PURE__ */ _(c, {
-			ref: y,
+				children: x(b)
+			}), /* @__PURE__ */ v(c, { isOpen: f })]
+		}), f && /* @__PURE__ */ v(l, {
+			ref: _,
 			testId: "chat-input-llm-profile-popover",
 			position: "top",
 			alignment: "left",
 			spacing: "none",
 			className: "z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto",
-			children: /* @__PURE__ */ _(x, { onClose: () => p(!1) })
+			children: /* @__PURE__ */ v(S, { onClose: () => p(!1) })
 		})]
 	});
 }
 //#endregion
-export { x as ChatInputLlmProfileMenuContent, S as ChatInputLlmProfilePicker };
+export { S as ChatInputLlmProfileMenuContent, C as ChatInputLlmProfilePicker };
 
 //# sourceMappingURL=chat-input-llm-profile-picker.js.map

package/dist/components/features/chat/components/chat-input-llm-profile-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-llm-profile-picker.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-llm-profile-picker.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useChatInputLlmProfileState } from \"#/hooks/use-chat-input-llm-profile-state\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\nimport { formatModelNameForDisplay } from \"#/utils/format-model-name\";\n\nconst PROFILE_LABEL_MAX_CHARS = 18;\n\nfunction truncateLabel(label: string): string {\n  return label.length <= PROFILE_LABEL_MAX_CHARS\n    ? label\n    : `${label.slice(0, PROFILE_LABEL_MAX_CHARS)}…`;\n}\n\ninterface ChatInputLlmProfileMenuContentProps {\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\n/**\n * The in-conversation OpenHands LLM-profile switcher list. Selecting a profile\n * live-swaps the running conversation's LLM via `/switch_profile` (the ACP\n * analog is {@link ChatInputModelMenuContent}). Shared by the inline pill and\n * the chat-input overflow submenu.\n */\nexport function ChatInputLlmProfileMenuContent({\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputLlmProfileMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const {\n    profiles,\n    currentProfileName,\n    currentProfileModel,\n    canSwitchProfile,\n    selectProfile,\n  } = useChatInputLlmProfileState();\n  // Read-only surfaces (a cloud member on the home page, or a start-task route)\n  // still name the active profile — the same shape ChatInputModelMenuContent\n  // uses when the ACP picker is gated off.\n  const showProfileList = canSwitchProfile && profiles.length > 0;\n  const readOnlyProfileName = canSwitchProfile ? null : currentProfileName;\n\n  const handleSelect = (profileName: string) => {\n    selectProfile(profileName);\n    onClose();\n  };\n\n  return (\n    <>\n      {showProfileList && (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the label as a menu item. */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.SETTINGS$AVAILABLE_PROFILES)}\n            </Typography.Text>\n          </li>\n          {profiles.map((profile) => {\n            const isCurrent = profile.name === currentProfileName;\n            const displayModel = formatModelNameForDisplay(profile.model);\n            return (\n              <ContextMenuListItem\n                key={profile.name}\n                testId={`chat-input-llm-profile-option-${profile.name}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  if (isCurrent) {\n                    onClose();\n                    return;\n                  }\n                  handleSelect(profile.name);\n                }}\n                className={cn(\n                  \"flex flex-col items-stretch gap-0.5\",\n                  isCurrent && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span className=\"flex items-center gap-2\">\n                  <span\n                    className=\"flex-1 truncate text-sm leading-5\"\n                    title={profile.model ?? profile.name}\n                  >\n                    {profile.name}\n                  </span>\n                  {isCurrent && (\n                    <CheckIcon\n                      width={14}\n                      height={14}\n                      className=\"shrink-0\"\n                      aria-hidden\n                    />\n                  )}\n                </span>\n                {displayModel && (\n                  <span className=\"block truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                    {displayModel}\n                  </span>\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      )}\n      {readOnlyProfileName && (\n        <li className=\"text-sm\" data-testid=\"chat-input-llm-profile-current\">\n          <div className=\"flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]\">\n            <span className=\"truncate\" title={readOnlyProfileName}>\n              {readOnlyProfileName}\n            </span>\n            {currentProfileModel && (\n              <span className=\"truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                {formatModelNameForDisplay(currentProfileModel)}\n              </span>\n            )}\n          </div>\n        </li>\n      )}\n      {(showProfileList || readOnlyProfileName) && (\n        <Divider inset={dividerInset} />\n      )}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to=\"/settings/llm\"\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{t(I18nKey.SETTINGS$LLM_PROFILES)}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputLlmProfilePicker() {\n  const { t } = useTranslation(\"openhands\");\n  const { profiles, currentProfileName, isLoading, isSwitching } =\n    useChatInputLlmProfileState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  // No LLM profiles yet (or the agent-server lacks the surface): stay out of\n  // the way, exactly like the ACP/AgentProfile pickers.\n  if (isLoading || profiles.length === 0) {\n    return null;\n  }\n\n  const label = currentProfileName ?? t(I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(chatInputPillButtonClassName, \"max-w-[200px]\")}\n        title={currentProfileName ?? undefined}\n        data-testid=\"chat-input-llm-profile\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        // Disabled mid-switch so re-opening can't fire a second /switch_profile.\n        disabled={isSwitching}\n        aria-busy={isSwitching}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span className=\"truncate\">{truncateLabel(label)}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-profile-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputLlmProfileMenuContent\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"chat-input-llm-profile-picker.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-llm-profile-picker.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useChatInputLlmProfileState } from \"#/hooks/use-chat-input-llm-profile-state\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\nimport { useFreeModels } from \"#/hooks/query/use-free-models\";\nimport { formatModelPillLabel } from \"#/utils/format-model-name\";\n\nconst PROFILE_LABEL_MAX_CHARS = 18;\n\nfunction truncateLabel(label: string): string {\n  return label.length <= PROFILE_LABEL_MAX_CHARS\n    ? label\n    : `${label.slice(0, PROFILE_LABEL_MAX_CHARS)}…`;\n}\n\ninterface ChatInputLlmProfileMenuContentProps {\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\n/**\n * The in-conversation OpenHands LLM-profile switcher list. Selecting a profile\n * live-swaps the running conversation's LLM via `/switch_profile` (the ACP\n * analog is {@link ChatInputModelMenuContent}). Shared by the inline pill and\n * the chat-input overflow submenu.\n */\nexport function ChatInputLlmProfileMenuContent({\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputLlmProfileMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const freeModels = useFreeModels();\n  const {\n    profiles,\n    currentProfileName,\n    currentProfileModel,\n    canSwitchProfile,\n    selectProfile,\n  } = useChatInputLlmProfileState();\n  // Read-only surfaces (a cloud member on the home page, or a start-task route)\n  // still name the active profile — the same shape ChatInputModelMenuContent\n  // uses when the ACP picker is gated off.\n  const showProfileList = canSwitchProfile && profiles.length > 0;\n  const readOnlyProfileName = canSwitchProfile ? null : currentProfileName;\n\n  const handleSelect = (profileName: string) => {\n    selectProfile(profileName);\n    onClose();\n  };\n\n  return (\n    <>\n      {showProfileList && (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the label as a menu item. */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.SETTINGS$AVAILABLE_PROFILES)}\n            </Typography.Text>\n          </li>\n          {profiles.map((profile) => {\n            const isCurrent = profile.name === currentProfileName;\n            const displayModel = formatModelPillLabel(\n              profile.model,\n              freeModels,\n            );\n            return (\n              <ContextMenuListItem\n                key={profile.name}\n                testId={`chat-input-llm-profile-option-${profile.name}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  if (isCurrent) {\n                    onClose();\n                    return;\n                  }\n                  handleSelect(profile.name);\n                }}\n                className={cn(\n                  \"flex flex-col items-stretch gap-0.5\",\n                  isCurrent && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span className=\"flex items-center gap-2\">\n                  <span\n                    className=\"flex-1 truncate text-sm leading-5\"\n                    title={profile.model ?? profile.name}\n                  >\n                    {profile.name}\n                  </span>\n                  {isCurrent && (\n                    <CheckIcon\n                      width={14}\n                      height={14}\n                      className=\"shrink-0\"\n                      aria-hidden\n                    />\n                  )}\n                </span>\n                {displayModel && (\n                  <span className=\"block truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                    {displayModel}\n                  </span>\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      )}\n      {readOnlyProfileName && (\n        <li className=\"text-sm\" data-testid=\"chat-input-llm-profile-current\">\n          <div className=\"flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]\">\n            <span className=\"truncate\" title={readOnlyProfileName}>\n              {readOnlyProfileName}\n            </span>\n            {currentProfileModel && (\n              <span className=\"truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                {formatModelPillLabel(currentProfileModel, freeModels)}\n              </span>\n            )}\n          </div>\n        </li>\n      )}\n      {(showProfileList || readOnlyProfileName) && (\n        <Divider inset={dividerInset} />\n      )}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to=\"/settings/llm\"\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{t(I18nKey.SETTINGS$LLM_PROFILES)}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputLlmProfilePicker() {\n  const { t } = useTranslation(\"openhands\");\n  const { profiles, currentProfileName, isLoading, isSwitching } =\n    useChatInputLlmProfileState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  // No LLM profiles yet (or the agent-server lacks the surface): stay out of\n  // the way, exactly like the ACP/AgentProfile pickers.\n  if (isLoading || profiles.length === 0) {\n    return null;\n  }\n\n  const label = currentProfileName ?? t(I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(chatInputPillButtonClassName, \"max-w-[200px]\")}\n        title={currentProfileName ?? undefined}\n        data-testid=\"chat-input-llm-profile\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        // Disabled mid-switch so re-opening can't fire a second /switch_profile.\n        disabled={isSwitching}\n        aria-busy={isSwitching}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span className=\"truncate\">{truncateLabel(label)}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-profile-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputLlmProfileMenuContent\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\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 {};