npm - @openhands/agent-canvas - Versions diffs - 1.1.0 → 1.2.0 - Mend

@openhands/agent-canvas 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1373) hide show

package/dist/components/features/chat/components/chat-input-actions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat-input-actions.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-actions.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { Cpu } from \"lucide-react\";\nimport { AgentStatus } from \"#/components/features/controls/agent-status\";\nimport { ChangeAgentButton } from \"../change-agent-button\";\nimport { ChatInputModel, ChatInputModelMenuContent } from \"./chat-input-model\";\nimport { SwitchProfileButton } from \"../switch-profile-button\";\nimport { ChatAddFileButton } from \"../chat-add-file-button\";\nimport { ChatSendButton } from \"../chat-send-button\";\nimport CarretRightFillIcon from \"#/icons/carret-right-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport ThreeDotsVerticalIcon from \"#/icons/three-dots-vertical.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { usePauseConversation } from \"#/hooks/mutation/use-pause-conversation\";\nimport { useResumeConversation } from \"#/hooks/mutation/use-resume-conversation\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useChatInputModelState } from \"#/hooks/use-chat-input-model-state\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ToolsContextMenuIconText } from \"../../controls/tools-context-menu-icon-text\";\nimport { ContextMenuListItem } from \"../../context-menu/context-menu-list-item\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n chatInputIconButtonClassName,\n formControlTransitionClassName,\n} from \"#/utils/form-control-classes\";\n\ninterface ChatInputActionsProps {\n disabled: boolean;\n canSubmit?: boolean;\n onAddFileClick?: () => void;\n showButton?: boolean;\n buttonClassName?: string;\n handleSubmit?: () => void;\n}\n\nexport function ChatInputActions({\n disabled,\n canSubmit = true,\n onAddFileClick = () => {},\n showButton = true,\n buttonClassName = \"\",\n handleSubmit = () => {},\n}: ChatInputActionsProps) {\n const { t } = useTranslation(\"openhands\");\n const unifiedPauseMutation = useUnifiedPauseConversation();\n const pauseConversationMutation = usePauseConversation();\n const resumeConversationMutation = useResumeConversation();\n const { conversationId } = useOptionalConversationId();\n const { backend } = useActiveBackend();\n const isCloud = backend.kind === \"cloud\";\n const modelState = useChatInputModelState();\n // Code/Plan mode switching is a cloud OpenHands feature — it doesn't apply\n // to ACP conversations (which have no \"plan\" mode), so hide it when ACP.\n const showChangeAgentButton = isCloud && !modelState.isAcpContext;\n const webSocketStatus = useUnifiedWebSocketStatus();\n const { curAgentState } = useAgentState();\n const { conversationMode, setConversationMode } = useConversationStore();\n const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n const actionsRowRef = React.useRef<HTMLDivElement>(null);\n const rightSectionRef = React.useRef<HTMLDivElement>(null);\n const addFileRef = React.useRef<HTMLDivElement>(null);\n const codeRef = React.useRef<HTMLDivElement>(null);\n const modelRef = React.useRef<HTMLDivElement>(null);\n const overflowTriggerRef = React.useRef<HTMLButtonElement>(null);\n const [actionsRowWidth, setActionsRowWidth] = React.useState<number>(\n Number.POSITIVE_INFINITY,\n );\n const [rightSectionWidth, setRightSectionWidth] = React.useState(0);\n const [addFileWidth, setAddFileWidth] = React.useState(32);\n const [codeWidth, setCodeWidth] = React.useState(96);\n const [modelWidth, setModelWidth] = React.useState(120);\n const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);\n const [activeSubmenu, setActiveSubmenu] = React.useState<\n \"agent\" \| \"model\" \| null\n >(null);\n const [overflowPortalStyle, setOverflowPortalStyle] =\n React.useState<React.CSSProperties>();\n\n React.useEffect(() => {\n const rowEl = actionsRowRef.current;\n const rightEl = rightSectionRef.current;\n const addEl = addFileRef.current;\n const codeEl = codeRef.current;\n const modelEl = modelRef.current;\n\n if (\n !rowEl \|\|\n !rightEl \|\|\n !addEl \|\|\n !modelEl \|\|\n (showChangeAgentButton && !codeEl) \|\|\n typeof ResizeObserver === \"undefined\"\n ) {\n return;\n }\n\n const syncWidths = () => {\n const nextRowWidth = rowEl.getBoundingClientRect().width;\n const nextRightWidth = rightEl.getBoundingClientRect().width;\n const nextAddWidth = addEl.getBoundingClientRect().width;\n const nextModelWidth = modelEl.getBoundingClientRect().width;\n\n if (nextRowWidth > 0) setActionsRowWidth(nextRowWidth);\n if (nextRightWidth > 0) setRightSectionWidth(nextRightWidth);\n if (nextAddWidth > 0) setAddFileWidth(nextAddWidth);\n if (nextModelWidth > 0) setModelWidth(nextModelWidth);\n\n if (codeEl) {\n const nextCodeWidth = codeEl.getBoundingClientRect().width;\n if (nextCodeWidth > 0) setCodeWidth(nextCodeWidth);\n }\n };\n\n const observer = new ResizeObserver(() => {\n syncWidths();\n });\n\n observer.observe(rowEl);\n observer.observe(rightEl);\n observer.observe(addEl);\n observer.observe(modelEl);\n if (codeEl) {\n observer.observe(codeEl);\n }\n\n syncWidths();\n\n return () => observer.disconnect();\n }, [showChangeAgentButton]);\n\n const handlePauseAgent = () => {\n if (!conversationId) return;\n pauseConversationMutation.mutate({ conversationId });\n };\n\n const handleResumeAgentClick = () => {\n if (!conversationId) return;\n resumeConversationMutation.mutate({ conversationId });\n };\n\n const isPausing =\n unifiedPauseMutation.isPending \|\| pauseConversationMutation.isPending;\n\n const OVERFLOW_BUTTON_WIDTH = 28;\n const INLINE_GAP = 12;\n const ROOT_GAP = 8;\n\n const fitOptionalItems = React.useCallback(\n (availableWidth: number) => {\n let remaining = availableWidth;\n const next = {\n showCodeInline: false,\n showModelInline: false,\n };\n\n if (showChangeAgentButton && remaining >= codeWidth) {\n next.showCodeInline = true;\n remaining -= codeWidth + INLINE_GAP;\n }\n\n if (remaining >= modelWidth) {\n next.showModelInline = true;\n }\n\n return next;\n },\n [showChangeAgentButton, codeWidth, modelWidth],\n );\n\n const leftBaseWidth =\n actionsRowWidth - rightSectionWidth - ROOT_GAP - addFileWidth - INLINE_GAP;\n\n const fitWithoutOverflow = fitOptionalItems(leftBaseWidth);\n const allOptionalFit =\n (!showChangeAgentButton \|\| fitWithoutOverflow.showCodeInline) &&\n fitWithoutOverflow.showModelInline;\n\n const fitWithOverflow = allOptionalFit\n ? fitWithoutOverflow\n : fitOptionalItems(leftBaseWidth - OVERFLOW_BUTTON_WIDTH - INLINE_GAP);\n\n const showCodeInline = !showChangeAgentButton\n ? false\n : fitWithOverflow.showCodeInline;\n const showModelInline = fitWithOverflow.showModelInline;\n const showAddFileInline = true;\n const showAgentStatusInline = actionsRowWidth >= 360;\n\n const hasOverflowItems =\n !showAddFileInline \|\|\n (showChangeAgentButton && !showCodeInline) \|\|\n !showModelInline;\n\n React.useEffect(() => {\n if (!hasOverflowItems) {\n setIsOverflowOpen(false);\n setActiveSubmenu(null);\n }\n }, [hasOverflowItems]);\n\n const overflowMenuRef = useClickOutsideElement<HTMLUListElement>(() => {\n setIsOverflowOpen(false);\n setActiveSubmenu(null);\n });\n\n const isAgentSwitcherDisabled =\n curAgentState === AgentState.RUNNING \|\|\n isCreatingConversation \|\|\n webSocketStatus !== \"OPEN\";\n\n const closeOverflowMenus = () => {\n setActiveSubmenu(null);\n setIsOverflowOpen(false);\n };\n\n React.useLayoutEffect(() => {\n if (!isOverflowOpen \|\| !overflowTriggerRef.current) {\n return;\n }\n\n const trigger = overflowTriggerRef.current;\n\n const updatePosition = () => {\n const rect = trigger.getBoundingClientRect();\n const GAP = 8;\n setOverflowPortalStyle({\n position: \"fixed\",\n top: rect.top - GAP,\n left: rect.left,\n transform: \"translateY(-100%)\",\n zIndex: 9999,\n });\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOverflowOpen]);\n\n const overflowMenu = (\n <ContextMenu\n ref={overflowMenuRef}\n testId=\"chat-input-overflow-menu\"\n position=\"top\"\n alignment=\"left\"\n className=\"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]\"\n >\n {showChangeAgentButton && !showCodeInline && (\n <div className=\"relative group/overflow-agent\">\n <ContextMenuListItem\n testId=\"overflow-agent-button\"\n onClick={() =>\n setActiveSubmenu((current) =>\n current === \"agent\" ? null : \"agent\",\n )\n }\n isDisabled={isAgentSwitcherDisabled}\n >\n <ToolsContextMenuIconText\n icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n text={\n conversationMode === \"code\"\n ? t(I18nKey.COMMON$CODE)\n : t(I18nKey.COMMON$PLAN)\n }\n rightIcon={<CarretRightFillIcon width={10} height={10} />}\n />\n </ContextMenuListItem>\n {!isAgentSwitcherDisabled && (\n <div\n className={cn(\n \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n \"group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto\",\n \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n activeSubmenu === \"agent\" &&\n \"opacity-100 visible pointer-events-auto\",\n )}\n >\n <ContextMenu\n testId=\"overflow-agent-submenu\"\n className=\"overflow-visible min-w-[195px]\"\n >\n <ContextMenuListItem\n testId=\"overflow-agent-code\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setConversationMode(\"code\");\n closeOverflowMenus();\n }}\n >\n <ToolsContextMenuIconText\n icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n text={t(I18nKey.COMMON$CODE)}\n />\n </ContextMenuListItem>\n <ContextMenuListItem\n testId=\"overflow-agent-plan\"\n onClick={(event) => {\n handlePlanClick(event);\n closeOverflowMenus();\n }}\n >\n <ToolsContextMenuIconText\n icon={\n <LessonPlanIcon\n width={16}\n height={16}\n color=\"currentColor\"\n />\n }\n text={t(I18nKey.COMMON$PLAN)}\n />\n </ContextMenuListItem>\n </ContextMenu>\n </div>\n )}\n </div>\n )}\n {!showModelInline && (\n <div className=\"relative group/overflow-model\">\n <ContextMenuListItem\n testId=\"overflow-model-button\"\n onClick={() =>\n setActiveSubmenu((current) =>\n current === \"model\" ? null : \"model\",\n )\n }\n >\n <ToolsContextMenuIconText\n icon={<Cpu width={16} height={16} strokeWidth={2} aria-hidden />}\n text={t(I18nKey.SETTINGS$AGENT_MODEL)}\n rightIcon={<CarretRightFillIcon width={10} height={10} />}\n />\n </ContextMenuListItem>\n <div\n className={cn(\n \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n \"group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto\",\n \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n activeSubmenu === \"model\" &&\n \"opacity-100 visible pointer-events-auto\",\n )}\n >\n {/* overflow-y-auto (not overflow-visible) so a long ACP model list\n scrolls within the menu instead of overflowing the viewport.\n Safe because this menu has no floating children (tooltips /\n nested popovers) that would be clipped — only a flat model list\n + Settings link. Revisit if floating children are added here. */}\n <ContextMenu\n testId=\"overflow-model-submenu\"\n className=\"min-w-[220px] max-w-[320px] max-h-[60vh] overflow-y-auto gap-0\"\n >\n <ChatInputModelMenuContent\n model={modelState}\n onClose={closeOverflowMenus}\n dividerInset=\"menu\"\n settingsLinkClassName={cn(\n \"group\",\n formControlTransitionClassName,\n )}\n settingsIconClassName={cn(\n \"text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]\",\n formControlTransitionClassName,\n )}\n />\n </ContextMenu>\n </div>\n </div>\n )}\n </ContextMenu>\n );\n\n return (\n <div\n ref={actionsRowRef}\n className=\"w-full min-w-0 flex items-center justify-between gap-2\"\n >\n <div className=\"flex min-w-0 items-center gap-1\">\n <div className=\"flex min-w-0 items-center gap-3\">\n <div ref={addFileRef} className={cn(!showAddFileInline && \"hidden\")}>\n <ChatAddFileButton\n disabled={disabled}\n handleFileIconClick={onAddFileClick}\n />\n </div>\n {showChangeAgentButton && (\n <div ref={codeRef} className={cn(!showCodeInline && \"hidden\")}>\n <ChangeAgentButton />\n </div>\n )}\n <div ref={modelRef} className={cn(!showModelInline && \"hidden\")}>\n {isCloud \|\| modelState.isAcpContext ? (\n <ChatInputModel />\n ) : (\n <SwitchProfileButton />\n )}\n </div>\n\n {hasOverflowItems && (\n <div className=\"relative shrink-0\">\n <button\n ref={overflowTriggerRef}\n type=\"button\"\n className={cn(chatInputIconButtonClassName, \"size-6\")}\n aria-label={t(I18nKey.CHAT_INTERFACE$MORE_INPUT_ACTIONS)}\n aria-expanded={isOverflowOpen}\n aria-haspopup=\"menu\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setIsOverflowOpen((open) => !open);\n }}\n >\n <ThreeDotsVerticalIcon\n width={16}\n height={16}\n color=\"currentColor\"\n />\n </button>\n\n {isOverflowOpen &&\n typeof document !== \"undefined\" &&\n overflowPortalStyle &&\n ReactDOM.createPortal(\n <div style={overflowPortalStyle}>{overflowMenu}</div>,\n document.body,\n )}\n </div>\n )}\n </div>\n </div>\n <div\n ref={rightSectionRef}\n className=\"ml-auto flex shrink-0 items-center gap-2\"\n >\n {showAgentStatusInline && conversationId && (\n <AgentStatus\n handleStop={handlePauseAgent}\n handleResumeAgent={handleResumeAgentClick}\n disabled={disabled}\n isPausing={isPausing}\n />\n )}\n {showButton && (\n <ChatSendButton\n buttonClassName={buttonClassName}\n handleSubmit={handleSubmit}\n disabled={disabled \|\| !canSubmit}\n />\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"chat-input-actions.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-actions.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { Cpu } from \"lucide-react\";\nimport { AgentStatus } from \"#/components/features/controls/agent-status\";\nimport { ChangeAgentButton } from \"../change-agent-button\";\nimport { ChatInputModel, ChatInputModelMenuContent } from \"./chat-input-model\";\nimport {\n ChatInputProfilePicker,\n ChatInputProfileMenuContent,\n} from \"./chat-input-profile-picker\";\nimport {\n ChatInputLlmProfilePicker,\n ChatInputLlmProfileMenuContent,\n} from \"./chat-input-llm-profile-picker\";\nimport { resolvePickerKind } from \"./resolve-picker-kind\";\nimport { ChatAddFileButton } from \"../chat-add-file-button\";\nimport { ChatSendButton } from \"../chat-send-button\";\nimport CarretRightFillIcon from \"#/icons/carret-right-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport ThreeDotsVerticalIcon from \"#/icons/three-dots-vertical.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { usePauseConversation } from \"#/hooks/mutation/use-pause-conversation\";\nimport { useResumeConversation } from \"#/hooks/mutation/use-resume-conversation\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useAgentProfiles } from \"#/hooks/query/use-agent-profiles\";\nimport { useChatInputModelState } from \"#/hooks/use-chat-input-model-state\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ToolsContextMenuIconText } from \"../../controls/tools-context-menu-icon-text\";\nimport { ContextMenuListItem } from \"../../context-menu/context-menu-list-item\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n chatInputIconButtonClassName,\n formControlTransitionClassName,\n} from \"#/utils/form-control-classes\";\n\ninterface ChatInputActionsProps {\n disabled: boolean;\n canSubmit?: boolean;\n onAddFileClick?: () => void;\n showButton?: boolean;\n buttonClassName?: string;\n handleSubmit?: () => void;\n}\n\nexport function ChatInputActions({\n disabled,\n canSubmit = true,\n onAddFileClick = () => {},\n showButton = true,\n buttonClassName = \"\",\n handleSubmit = () => {},\n}: ChatInputActionsProps) {\n const { t } = useTranslation(\"openhands\");\n const unifiedPauseMutation = useUnifiedPauseConversation();\n const pauseConversationMutation = usePauseConversation();\n const resumeConversationMutation = useResumeConversation();\n const { conversationId } = useOptionalConversationId();\n const { backend } = useActiveBackend();\n const isCloud = backend.kind === \"cloud\";\n const modelState = useChatInputModelState();\n // The home page defaults to the AgentProfile picker (#3727) on both local and\n // cloud (cloud gained the /api/agent-profiles surface in OpenHands #15060). A\n // backend without that surface returns none — fall back so the composer still\n // shows a model affordance instead of nothing (#1571). Only fetched on home.\n const homeAgentProfiles = useAgentProfiles({\n enabled: !conversationId,\n });\n const agentProfilesUnavailableOnHome =\n homeAgentProfiles.isFetched &&\n (homeAgentProfiles.data?.profiles?.length ?? 0) === 0;\n // Code/Plan mode switching is a cloud OpenHands feature — it doesn't apply\n // to ACP conversations (which have no \"plan\" mode), so hide it when ACP.\n const showChangeAgentButton = isCloud && !modelState.isAcpContext;\n const webSocketStatus = useUnifiedWebSocketStatus();\n const { curAgentState } = useAgentState();\n const { conversationMode, setConversationMode } = useConversationStore();\n const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n const actionsRowRef = React.useRef<HTMLDivElement>(null);\n const rightSectionRef = React.useRef<HTMLDivElement>(null);\n const addFileRef = React.useRef<HTMLDivElement>(null);\n const codeRef = React.useRef<HTMLDivElement>(null);\n const modelRef = React.useRef<HTMLDivElement>(null);\n const overflowTriggerRef = React.useRef<HTMLButtonElement>(null);\n const [actionsRowWidth, setActionsRowWidth] = React.useState<number>(\n Number.POSITIVE_INFINITY,\n );\n const [rightSectionWidth, setRightSectionWidth] = React.useState(0);\n const [addFileWidth, setAddFileWidth] = React.useState(32);\n const [codeWidth, setCodeWidth] = React.useState(96);\n const [modelWidth, setModelWidth] = React.useState(120);\n const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);\n const [activeSubmenu, setActiveSubmenu] = React.useState<\n \"agent\" \| \"model\" \| null\n >(null);\n const [overflowPortalStyle, setOverflowPortalStyle] =\n React.useState<React.CSSProperties>();\n\n React.useEffect(() => {\n const rowEl = actionsRowRef.current;\n const rightEl = rightSectionRef.current;\n const addEl = addFileRef.current;\n const codeEl = codeRef.current;\n const modelEl = modelRef.current;\n\n if (\n !rowEl \|\|\n !rightEl \|\|\n !addEl \|\|\n !modelEl \|\|\n (showChangeAgentButton && !codeEl) \|\|\n typeof ResizeObserver === \"undefined\"\n ) {\n return;\n }\n\n const syncWidths = () => {\n const nextRowWidth = rowEl.getBoundingClientRect().width;\n const nextRightWidth = rightEl.getBoundingClientRect().width;\n const nextAddWidth = addEl.getBoundingClientRect().width;\n const nextModelWidth = modelEl.getBoundingClientRect().width;\n\n if (nextRowWidth > 0) setActionsRowWidth(nextRowWidth);\n if (nextRightWidth > 0) setRightSectionWidth(nextRightWidth);\n if (nextAddWidth > 0) setAddFileWidth(nextAddWidth);\n if (nextModelWidth > 0) setModelWidth(nextModelWidth);\n\n if (codeEl) {\n const nextCodeWidth = codeEl.getBoundingClientRect().width;\n if (nextCodeWidth > 0) setCodeWidth(nextCodeWidth);\n }\n };\n\n const observer = new ResizeObserver(() => {\n syncWidths();\n });\n\n observer.observe(rowEl);\n observer.observe(rightEl);\n observer.observe(addEl);\n observer.observe(modelEl);\n if (codeEl) {\n observer.observe(codeEl);\n }\n\n syncWidths();\n\n return () => observer.disconnect();\n }, [showChangeAgentButton]);\n\n const handlePauseAgent = () => {\n if (!conversationId) return;\n pauseConversationMutation.mutate({ conversationId });\n };\n\n const handleResumeAgentClick = () => {\n if (!conversationId) return;\n resumeConversationMutation.mutate({ conversationId });\n };\n\n const isPausing =\n unifiedPauseMutation.isPending \|\| pauseConversationMutation.isPending;\n\n const OVERFLOW_BUTTON_WIDTH = 28;\n const INLINE_GAP = 12;\n const ROOT_GAP = 8;\n\n const fitOptionalItems = React.useCallback(\n (availableWidth: number) => {\n let remaining = availableWidth;\n const next = {\n showCodeInline: false,\n showModelInline: false,\n };\n\n if (showChangeAgentButton && remaining >= codeWidth) {\n next.showCodeInline = true;\n remaining -= codeWidth + INLINE_GAP;\n }\n\n if (remaining >= modelWidth) {\n next.showModelInline = true;\n }\n\n return next;\n },\n [showChangeAgentButton, codeWidth, modelWidth],\n );\n\n const leftBaseWidth =\n actionsRowWidth - rightSectionWidth - ROOT_GAP - addFileWidth - INLINE_GAP;\n\n const fitWithoutOverflow = fitOptionalItems(leftBaseWidth);\n const allOptionalFit =\n (!showChangeAgentButton \|\| fitWithoutOverflow.showCodeInline) &&\n fitWithoutOverflow.showModelInline;\n\n const fitWithOverflow = allOptionalFit\n ? fitWithoutOverflow\n : fitOptionalItems(leftBaseWidth - OVERFLOW_BUTTON_WIDTH - INLINE_GAP);\n\n const showCodeInline = !showChangeAgentButton\n ? false\n : fitWithOverflow.showCodeInline;\n const showModelInline = fitWithOverflow.showModelInline;\n const showAddFileInline = true;\n const showAgentStatusInline = actionsRowWidth >= 360;\n\n const hasOverflowItems =\n !showAddFileInline \|\|\n (showChangeAgentButton && !showCodeInline) \|\|\n !showModelInline;\n\n React.useEffect(() => {\n if (!hasOverflowItems) {\n setIsOverflowOpen(false);\n setActiveSubmenu(null);\n }\n }, [hasOverflowItems]);\n\n const overflowMenuRef = useClickOutsideElement<HTMLUListElement>(() => {\n setIsOverflowOpen(false);\n setActiveSubmenu(null);\n });\n\n const isAgentSwitcherDisabled =\n curAgentState === AgentState.RUNNING \|\|\n isCreatingConversation \|\|\n webSocketStatus !== \"OPEN\";\n\n const closeOverflowMenus = () => {\n setActiveSubmenu(null);\n setIsOverflowOpen(false);\n };\n\n // Which chat-input model/profile picker to show (pure matrix, unit-tested in\n // `resolve-picker-kind.test.ts`).\n const pickerKind = resolvePickerKind({\n hasConversation: !!conversationId,\n isCloud,\n isAcp: modelState.isAcpContext,\n profilesAvailable: !agentProfilesUnavailableOnHome,\n });\n\n // Shared styling for the settings link inside the overflow submenu content.\n const overflowSettingsLinkClassName = cn(\n \"group\",\n formControlTransitionClassName,\n );\n const overflowSettingsIconClassName = cn(\n \"text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]\",\n formControlTransitionClassName,\n );\n\n React.useLayoutEffect(() => {\n if (!isOverflowOpen \|\| !overflowTriggerRef.current) {\n return;\n }\n\n const trigger = overflowTriggerRef.current;\n\n const updatePosition = () => {\n const rect = trigger.getBoundingClientRect();\n const GAP = 8;\n setOverflowPortalStyle({\n position: \"fixed\",\n top: rect.top - GAP,\n left: rect.left,\n transform: \"translateY(-100%)\",\n zIndex: 9999,\n });\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOverflowOpen]);\n\n const overflowMenu = (\n <ContextMenu\n ref={overflowMenuRef}\n testId=\"chat-input-overflow-menu\"\n position=\"top\"\n alignment=\"left\"\n className=\"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]\"\n >\n {showChangeAgentButton && !showCodeInline && (\n <div className=\"relative group/overflow-agent\">\n <ContextMenuListItem\n testId=\"overflow-agent-button\"\n onClick={() =>\n setActiveSubmenu((current) =>\n current === \"agent\" ? null : \"agent\",\n )\n }\n isDisabled={isAgentSwitcherDisabled}\n >\n <ToolsContextMenuIconText\n icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n text={\n conversationMode === \"code\"\n ? t(I18nKey.COMMON$CODE)\n : t(I18nKey.COMMON$PLAN)\n }\n rightIcon={<CarretRightFillIcon width={10} height={10} />}\n />\n </ContextMenuListItem>\n {!isAgentSwitcherDisabled && (\n <div\n className={cn(\n \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n \"group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto\",\n \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n activeSubmenu === \"agent\" &&\n \"opacity-100 visible pointer-events-auto\",\n )}\n >\n <ContextMenu\n testId=\"overflow-agent-submenu\"\n className=\"overflow-visible min-w-[195px]\"\n >\n <ContextMenuListItem\n testId=\"overflow-agent-code\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setConversationMode(\"code\");\n closeOverflowMenus();\n }}\n >\n <ToolsContextMenuIconText\n icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n text={t(I18nKey.COMMON$CODE)}\n />\n </ContextMenuListItem>\n <ContextMenuListItem\n testId=\"overflow-agent-plan\"\n onClick={(event) => {\n handlePlanClick(event);\n closeOverflowMenus();\n }}\n >\n <ToolsContextMenuIconText\n icon={\n <LessonPlanIcon\n width={16}\n height={16}\n color=\"currentColor\"\n />\n }\n text={t(I18nKey.COMMON$PLAN)}\n />\n </ContextMenuListItem>\n </ContextMenu>\n </div>\n )}\n </div>\n )}\n {!showModelInline && (\n <div className=\"relative group/overflow-model\">\n <ContextMenuListItem\n testId=\"overflow-model-button\"\n onClick={() =>\n setActiveSubmenu((current) =>\n current === \"model\" ? null : \"model\",\n )\n }\n >\n <ToolsContextMenuIconText\n icon={<Cpu width={16} height={16} strokeWidth={2} aria-hidden />}\n text={t(I18nKey.SETTINGS$AGENT_MODEL)}\n rightIcon={<CarretRightFillIcon width={10} height={10} />}\n />\n </ContextMenuListItem>\n <div\n className={cn(\n \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n \"group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto\",\n \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n activeSubmenu === \"model\" &&\n \"opacity-100 visible pointer-events-auto\",\n )}\n >\n {/* overflow-y-auto (not overflow-visible) so a long ACP model list\n scrolls within the menu instead of overflowing the viewport.\n Safe because this menu has no floating children (tooltips /\n nested popovers) that would be clipped — only a flat model list\n + Settings link. Revisit if floating children are added here. /}\n <ContextMenu\n testId=\"overflow-model-submenu\"\n className=\"min-w-[220px] max-w-[320px] max-h-[60vh] overflow-y-auto gap-0\"\n >\n {pickerKind === \"model\" ? (\n <ChatInputModelMenuContent\n model={modelState}\n onClose={closeOverflowMenus}\n dividerInset=\"menu\"\n settingsLinkClassName={overflowSettingsLinkClassName}\n settingsIconClassName={overflowSettingsIconClassName}\n />\n ) : pickerKind === \"agent-profile\" ? (\n <ChatInputProfileMenuContent\n onClose={closeOverflowMenus}\n dividerInset=\"menu\"\n settingsLinkClassName={overflowSettingsLinkClassName}\n settingsIconClassName={overflowSettingsIconClassName}\n />\n ) : (\n <ChatInputLlmProfileMenuContent\n onClose={closeOverflowMenus}\n dividerInset=\"menu\"\n settingsLinkClassName={overflowSettingsLinkClassName}\n settingsIconClassName={overflowSettingsIconClassName}\n />\n )}\n </ContextMenu>\n </div>\n </div>\n )}\n </ContextMenu>\n );\n\n return (\n <div\n ref={actionsRowRef}\n className=\"w-full min-w-0 flex items-center justify-between gap-2\"\n >\n <div className=\"flex min-w-0 items-center gap-1\">\n <div className=\"flex min-w-0 items-center gap-3\">\n <div ref={addFileRef} className={cn(!showAddFileInline && \"hidden\")}>\n <ChatAddFileButton\n disabled={disabled}\n handleFileIconClick={onAddFileClick}\n />\n </div>\n {showChangeAgentButton && (\n <div ref={codeRef} className={cn(!showCodeInline && \"hidden\")}>\n <ChangeAgentButton />\n </div>\n )}\n <div ref={modelRef} className={cn(!showModelInline && \"hidden\")}>\n {/ Picker depends on backend + whether we're in a conversation;\n see the `pickerKind` cases above. */}\n {pickerKind === \"model\" ? (\n <ChatInputModel />\n ) : pickerKind === \"agent-profile\" ? (\n <ChatInputProfilePicker />\n ) : (\n <ChatInputLlmProfilePicker />\n )}\n </div>\n\n {hasOverflowItems && (\n <div className=\"relative shrink-0\">\n <button\n ref={overflowTriggerRef}\n type=\"button\"\n className={cn(chatInputIconButtonClassName, \"size-6\")}\n aria-label={t(I18nKey.CHAT_INTERFACE$MORE_INPUT_ACTIONS)}\n aria-expanded={isOverflowOpen}\n aria-haspopup=\"menu\"\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n setIsOverflowOpen((open) => !open);\n }}\n >\n <ThreeDotsVerticalIcon\n width={16}\n height={16}\n color=\"currentColor\"\n />\n </button>\n\n {isOverflowOpen &&\n typeof document !== \"undefined\" &&\n overflowPortalStyle &&\n ReactDOM.createPortal(\n <div style={overflowPortalStyle}>{overflowMenu}</div>,\n document.body,\n )}\n </div>\n )}\n </div>\n </div>\n <div\n ref={rightSectionRef}\n className=\"ml-auto flex shrink-0 items-center gap-2\"\n >\n {showAgentStatusInline && conversationId && (\n <AgentStatus\n handleStop={handlePauseAgent}\n handleResumeAgent={handleResumeAgentClick}\n disabled={disabled}\n isPausing={isPausing}\n />\n )}\n {showButton && (\n <ChatSendButton\n buttonClassName={buttonClassName}\n handleSubmit={handleSubmit}\n disabled={disabled \|\| !canSubmit}\n />\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

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

	@@ -0,0 +1,2 @@
1	+ 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(`../../../../ui/typography.cjs`),s=require(`../../../../ui/combobox-caret.cjs`),c=require(`../../../../ui/context-menu.cjs`),l=require(`../../context-menu/context-menu-list-item.cjs`),u=require(`../../../../hooks/use-click-outside-element.cjs`),d=require(`../../../../icons/settings-gear.cjs`),f=require(`../../../shared/navigation-link.cjs`),p=require(`../../../../ui/divider.cjs`),m=require(`../../../../hooks/use-chat-input-llm-profile-state.cjs`);let h=require(`react`);h=e.__toESM(h,1);let g=require(`react/jsx-runtime`);var _=18;function v(e){return e.length<=_?e:`${e.slice(0,_)}…`}function y({onClose:e,dividerInset:a,settingsLinkClassName:s,settingsIconClassName:c}){let{t:u}=t.useTranslation(`openhands`),{profiles:h,currentProfileName:_,selectProfile:v}=m.useChatInputLlmProfileState(),y=t=>{v(t),e()};return(0,g.jsxs)(g.Fragment,{children:[h.length>0&&(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(`li`,{role:`presentation`,className:`px-2 pt-1 pb-0.5`,children:(0,g.jsx)(o.Typography.Text,{className:`text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4`,children:u(n.I18nKey.SETTINGS$AVAILABLE_PROFILES)})}),h.map(t=>{let n=t.name===_;return(0,g.jsxs)(l.ContextMenuListItem,{testId:`chat-input-llm-profile-option-${t.name}`,onClick:r=>{if(r.preventDefault(),r.stopPropagation(),n){e();return}y(t.name)},className:r.cn(`flex flex-col items-stretch gap-0.5`,n&&`bg-[var(--oh-interactive-hover)]`),children:[(0,g.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,g.jsx)(`span`,{className:`flex-1 truncate text-sm leading-5`,title:t.model??t.name,children:t.name}),n&&(0,g.jsx)(i.default,{width:14,height:14,className:`shrink-0`,"aria-hidden":!0})]}),t.model&&(0,g.jsx)(`span`,{className:`block truncate text-xs leading-4 text-[var(--oh-muted)]`,children:t.model})]},t.name)})]}),h.length>0&&(0,g.jsx)(p.Divider,{inset:a}),(0,g.jsx)(`li`,{className:`text-sm`,children:(0,g.jsxs)(f.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`,s),children:[(0,g.jsx)(d.default,{width:16,height:16,className:r.cn(`shrink-0`,c),"aria-hidden":!0}),(0,g.jsx)(`span`,{children:u(n.I18nKey.SETTINGS$LLM_PROFILES)})]})})]})}function b(){let{t:e}=t.useTranslation(`openhands`),{profiles:i,currentProfileName:o,isLoading:l,isSwitching:d}=m.useChatInputLlmProfileState(),[f,p]=h.default.useState(!1),_=h.default.useRef(null),b=u.useClickOutsideElement(()=>p(!1),_);if(l\|\|i.length===0)return null;let x=o??e(n.I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);return(0,g.jsxs)(`div`,{className:`relative min-w-0`,children:[(0,g.jsxs)(`button`,{ref:_,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:d,"aria-busy":d,onClick:e=>{e.preventDefault(),e.stopPropagation(),p(e=>!e)},children:[(0,g.jsx)(`span`,{className:`truncate`,children:v(x)}),(0,g.jsx)(s.ComboboxCaretInline,{isOpen:f})]}),f&&(0,g.jsx)(c.ContextMenu,{ref:b,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,g.jsx)(y,{onClose:()=>p(!1)})})]})}exports.ChatInputLlmProfileMenuContent=y,exports.ChatInputLlmProfilePicker=b;
2	+ //# sourceMappingURL=chat-input-llm-profile-picker.cjs.map

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

@@ -0,0 +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\";\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 { profiles, currentProfileName, selectProfile } =\n useChatInputLlmProfileState();\n\n const handleSelect = (profileName: string) => {\n selectProfile(profileName);\n onClose();\n };\n\n return (\n <>\n {profiles.length > 0 && (\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 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 {profile.model && (\n <span className=\"block truncate text-xs leading-4 text-[var(--oh-muted)]\">\n {profile.model}\n </span>\n )}\n </ContextMenuListItem>\n );\n })}\n </>\n )}\n {profiles.length > 0 && <Divider inset={dividerInset} />}\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":"i2BAgBA,IAAM,EAA0B,GAEhC,SAAS,EAAc,EAAuB,CAC5C,OAAO,EAAM,QAAU,EACnB,EACA,GAAG,EAAM,MAAM,EAAG,EAAwB,CAAC,GAgBjD,SAAgB,EAA+B,CAC7C,UACA,eACA,wBACA,yBACsC,CACtC,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,WAAU,qBAAoB,iBACpC,EAAA,6BAA6B,CAEzB,EAAgB,GAAwB,CAC5C,EAAc,EAAY,CAC1B,GAAS,EAGX,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EAAS,OAAS,IACjB,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EAGE,EAAA,EAAA,KAAC,KAAD,CAAI,KAAK,eAAe,UAAU,6BAChC,EAAA,EAAA,KAAC,EAAA,WAAW,KAAZ,CAAiB,UAAU,+FACxB,EAAE,EAAA,QAAQ,4BAA4B,CACvB,CAAA,CACf,CAAA,CACJ,EAAS,IAAK,GAAY,CACzB,IAAM,EAAY,EAAQ,OAAS,EACnC,OACE,EAAA,EAAA,MAAC,EAAA,oBAAD,CAEE,OAAQ,iCAAiC,EAAQ,OACjD,QAAU,GAAU,CAGlB,GAFA,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACnB,EAAW,CACb,GAAS,CACT,OAEF,EAAa,EAAQ,KAAK,EAE5B,UAAW,EAAA,GACT,sCACA,GAAa,mCACd,UAfH,EAiBE,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,mCAAhB,EACE,EAAA,EAAA,KAAC,OAAD,CACE,UAAU,oCACV,MAAO,EAAQ,OAAS,EAAQ,cAE/B,EAAQ,KACJ,CAAA,CACN,IACC,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,GACP,OAAQ,GACR,UAAU,WACV,cAAA,GACA,CAAA,CAEC,GACN,EAAQ,QACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,mEACb,EAAQ,MACJ,CAAA,CAEW,EArCf,EAAQ,KAqCO,EAExB,CACD,CAAA,CAAA,CAEJ,EAAS,OAAS,IAAK,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAO,EAAgB,CAAA,EACxD,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,oBACZ,EAAA,EAAA,MAAC,EAAA,eAAD,CACE,GAAG,gBACH,QAAS,EACT,UAAW,EAAA,GACT,8IACA,EACD,UANH,EAQE,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,GACP,OAAQ,GACR,UAAW,EAAA,GAAG,WAAY,EAAsB,CAChD,cAAA,GACA,CAAA,EACF,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,EAAE,EAAA,QAAQ,sBAAsB,CAAQ,CAAA,CAChC,GACd,CAAA,CACJ,CAAA,CAAA,CAIP,SAAgB,GAA4B,CAC1C,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,WAAU,qBAAoB,YAAW,eAC/C,EAAA,6BAA6B,CACzB,CAAC,EAAe,GAAoB,EAAA,QAAM,SAAS,GAAM,CACzD,EAAa,EAAA,QAAM,OAA0B,KAAK,CAClD,EAAa,EAAA,2BACX,EAAiB,GAAM,CAC7B,EACD,CAID,GAAI,GAAa,EAAS,SAAW,EACnC,OAAO,KAGT,IAAM,EAAQ,GAAsB,EAAE,EAAA,QAAQ,6BAA6B,CAE3E,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,4BAAf,EACE,EAAA,EAAA,MAAC,SAAD,CACE,IAAK,EACL,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,6BAA8B,gBAAgB,CAC5D,MAAO,GAAsB,IAAA,GAC7B,cAAY,yBACZ,gBAAe,EACf,gBAAc,SAEd,SAAU,EACV,YAAW,EACX,QAAU,GAAU,CAClB,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,EAAkB,GAAS,CAAC,EAAK,WAdrC,EAiBE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,EAAc,EAAM,CAAQ,CAAA,EACxD,EAAA,EAAA,KAAC,EAAA,oBAAD,CAAqB,OAAQ,EAAiB,CAAA,CACvC,GAER,IACC,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,IAAK,EACL,OAAO,iCACP,SAAS,MACT,UAAU,OACV,QAAQ,OACR,UAAU,iFAEV,EAAA,EAAA,KAAC,EAAD,CACE,YAAe,EAAiB,GAAM,CACtC,CAAA,CACU,CAAA,CAEZ"}

package/dist/components/features/chat/components/chat-input-llm-profile-picker.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+interface ChatInputLlmProfileMenuContentProps {
+    onClose: () => void;
+    dividerInset?: "menu";
+    settingsLinkClassName?: string;
+    settingsIconClassName?: string;
+}
+/**
+ * The in-conversation OpenHands LLM-profile switcher list. Selecting a profile
+ * live-swaps the running conversation's LLM via `/switch_profile` (the ACP
+ * analog is {@link ChatInputModelMenuContent}). Shared by the inline pill and
+ * the chat-input overflow submenu.
+ */
+export declare function ChatInputLlmProfileMenuContent({ onClose, dividerInset, settingsLinkClassName, settingsIconClassName, }: ChatInputLlmProfileMenuContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInputLlmProfilePicker(): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,118 @@
+import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+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 { Typography as a } from "../../../../ui/typography.js";
+import { ComboboxCaretInline as o } from "../../../../ui/combobox-caret.js";
+import { ContextMenu as s } from "../../../../ui/context-menu.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 u from "../../../../icons/settings-gear.js";
+import { NavigationLink as d } from "../../../shared/navigation-link.js";
+import { Divider as f } from "../../../../ui/divider.js";
+import { useChatInputLlmProfileState as p } from "../../../../hooks/use-chat-input-llm-profile-state.js";
+import m from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/features/chat/components/chat-input-llm-profile-picker.tsx
+var v = 18;
+function y(e) {
+	return e.length <= v ? e : `${e.slice(0, v)}…`;
+}
+function b({ onClose: i, dividerInset: o, settingsLinkClassName: s, settingsIconClassName: l }) {
+	let { t: m } = e("openhands"), { profiles: v, currentProfileName: y, selectProfile: b } = p(), x = (e) => {
+		b(e), i();
+	};
+	return /* @__PURE__ */ _(h, { children: [
+		v.length > 0 && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("li", {
+			role: "presentation",
+			className: "px-2 pt-1 pb-0.5",
+			children: /* @__PURE__ */ g(a.Text, {
+				className: "text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4",
+				children: m(t.SETTINGS$AVAILABLE_PROFILES)
+			})
+		}), v.map((e) => {
+			let t = e.name === y;
+			return /* @__PURE__ */ _(c, {
+				testId: `chat-input-llm-profile-option-${e.name}`,
+				onClick: (n) => {
+					if (n.preventDefault(), n.stopPropagation(), t) {
+						i();
+						return;
+					}
+					x(e.name);
+				},
+				className: n("flex flex-col items-stretch gap-0.5", t && "bg-[var(--oh-interactive-hover)]"),
+				children: [/* @__PURE__ */ _("span", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ g("span", {
+						className: "flex-1 truncate text-sm leading-5",
+						title: e.model ?? e.name,
+						children: e.name
+					}), t && /* @__PURE__ */ g(r, {
+						width: 14,
+						height: 14,
+						className: "shrink-0",
+						"aria-hidden": !0
+					})]
+				}), e.model && /* @__PURE__ */ g("span", {
+					className: "block truncate text-xs leading-4 text-[var(--oh-muted)]",
+					children: e.model
+				})]
+			}, e.name);
+		})] }),
+		v.length > 0 && /* @__PURE__ */ g(f, { inset: o }),
+		/* @__PURE__ */ g("li", {
+			className: "text-sm",
+			children: /* @__PURE__ */ _(d, {
+				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", s),
+				children: [/* @__PURE__ */ g(u, {
+					width: 16,
+					height: 16,
+					className: n("shrink-0", l),
+					"aria-hidden": !0
+				}), /* @__PURE__ */ g("span", { children: m(t.SETTINGS$LLM_PROFILES) })]
+			})
+		})
+	] });
+}
+function x() {
+	let { t: r } = e("openhands"), { profiles: a, currentProfileName: c, isLoading: u, isSwitching: d } = p(), [f, h] = m.useState(!1), v = m.useRef(null), x = l(() => h(!1), v);
+	if (u || a.length === 0) return null;
+	let S = c ?? r(t.LLM$SELECT_MODEL_PLACEHOLDER);
+	return /* @__PURE__ */ _("div", {
+		className: "relative min-w-0",
+		children: [/* @__PURE__ */ _("button", {
+			ref: v,
+			type: "button",
+			className: n(i, "max-w-[200px]"),
+			title: c ?? void 0,
+			"data-testid": "chat-input-llm-profile",
+			"aria-expanded": f,
+			"aria-haspopup": "dialog",
+			disabled: d,
+			"aria-busy": d,
+			onClick: (e) => {
+				e.preventDefault(), e.stopPropagation(), h((e) => !e);
+			},
+			children: [/* @__PURE__ */ g("span", {
+				className: "truncate",
+				children: y(S)
+			}), /* @__PURE__ */ g(o, { isOpen: f })]
+		}), f && /* @__PURE__ */ g(s, {
+			ref: x,
+			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__ */ g(b, { onClose: () => h(!1) })
+		})]
+	});
+}
+//#endregion
+export { b as ChatInputLlmProfileMenuContent, x as ChatInputLlmProfilePicker };
+//# sourceMappingURL=chat-input-llm-profile-picker.js.map

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

@@ -0,0 +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\";\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 { profiles, currentProfileName, selectProfile } =\n useChatInputLlmProfileState();\n\n const handleSelect = (profileName: string) => {\n selectProfile(profileName);\n onClose();\n };\n\n return (\n <>\n {profiles.length > 0 && (\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 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 {profile.model && (\n <span className=\"block truncate text-xs leading-4 text-[var(--oh-muted)]\">\n {profile.model}\n </span>\n )}\n </ContextMenuListItem>\n );\n })}\n </>\n )}\n {profiles.length > 0 && <Divider inset={dividerInset} />}\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-model.cjs CHANGED Viewed

@@ -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(`../../../../ui/typography.cjs`),o=require(`../../../../utils/form-control-classes.cjs`),s=require(`../../../../ui/combobox-caret.cjs`),c=require(`../../../../ui/context-menu.cjs`),l=require(`../../context-menu/context-menu-list-item.cjs`),u=require(`../../../../hooks/use-click-outside-element.cjs`),d=require(`../../../../hooks/use-chat-input-model-state.cjs`),f=require(`../../../../hooks/mutation/use-switch-acp-model.cjs`),p=require(`../../../../icons/settings-gear.cjs`),m=require(`../../../shared/navigation-link.cjs`),h=require(`../../../../ui/divider.cjs`);let g=require(`react`);g=e.__toESM(g,1);let _=require(`react/jsx-runtime`);var v=10,y=22;function b(e,t=v){return e.length<=t?e:`${e.slice(0,t)}…`}function x({model:e,onClose:o,dividerInset:s,settingsLinkClassName:c,settingsIconClassName:u}){let{t:d}=t.useTranslation(`openhands`),g=f.useSwitchAcpModel(),v=e.showAcpPicker||!!e.displayModel,y=t=>{t!==e.currentModelId&&g.mutate({conversationId:e.switchConversationId,model:t}),o()};return(0,_.jsxs)(_.Fragment,{children:[e.showAcpPicker?(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`li`,{role:`presentation`,className:`px-2 pt-1 pb-0.5`,children:(0,_.jsx)(a.Typography.Text,{className:`text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4`,children:d(n.I18nKey.MODEL$AVAILABLE_MODELS)})}),e.availableAcpModels.map(t=>{let n=t.id===e.currentModelId;return(0,_.jsxs)(l.ContextMenuListItem,{testId:`chat-input-acp-model-option-${t.id}`,onClick:e=>{e.preventDefault(),e.stopPropagation(),y(t.id)},className:r.cn(`flex items-center gap-2`,n&&`bg-[var(--oh-interactive-hover)]`),children:[(0,_.jsx)(`span`,{className:`flex-1 truncate text-sm leading-5`,title:t.label,children:t.label}),n&&(0,_.jsx)(i.default,{width:14,height:14,className:`shrink-0`,"aria-hidden":!0})]},t.id)})]}):e.displayModel?(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsx)(`div`,{className:`p-2 leading-5 text-[var(--oh-foreground)] break-all`,children:e.displayModel})}):null,v&&(0,_.jsx)(h.Divider,{inset:s}),(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsxs)(m.NavigationLink,{to:e.destinationPath,onClick:o,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)(p.default,{width:16,height:16,className:r.cn(`shrink-0`,u),"aria-hidden":!0}),(0,_.jsx)(`span`,{children:e.destinationLabel})]})})]})}function S(){let e=d.useChatInputModelState(),[t,n]=g.default.useState(!1),r=g.default.useRef(null),i=u.useClickOutsideElement(()=>n(!1),r);if(!e.displayModel)return null;let a=b(e.displayModel,e.isAcpContext?y:v);return(0,_.jsxs)(`div`,{className:`relative min-w-0`,children:[(0,_.jsxs)(`button`,{ref:r,type:`button`,className:o.chatInputPillButtonClassName,title:e.displayModel,"data-testid":`chat-input-llm-model`,"aria-expanded":t,"aria-haspopup":`dialog`,onClick:e=>{e.preventDefault(),e.stopPropagation(),n(e=>!e)},children:[(0,_.jsx)(`span`,{children:a}),(0,_.jsx)(s.ComboboxCaretInline,{isOpen:t})]}),t&&(0,_.jsx)(c.ContextMenu,{ref:i,testId:`chat-input-llm-model-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)(x,{model:e,onClose:()=>n(!1)})})]})}exports.ChatInputModel=S,exports.ChatInputModelMenuContent=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(`../../../../ui/typography.cjs`),s=require(`../../../../ui/combobox-caret.cjs`),c=require(`../../../../ui/context-menu.cjs`),l=require(`../../context-menu/context-menu-list-item.cjs`),u=require(`../../../../hooks/use-click-outside-element.cjs`),d=require(`../../../../hooks/use-chat-input-model-state.cjs`),f=require(`../../../../hooks/mutation/use-switch-acp-model.cjs`),p=require(`../../../../icons/settings-gear.cjs`),m=require(`../../../shared/navigation-link.cjs`),h=require(`../../../../ui/divider.cjs`);let g=require(`react`);g=e.__toESM(g,1);let _=require(`react/jsx-runtime`);var v=10,y=22;function b(e,t=v){return e.length<=t?e:`${e.slice(0,t)}…`}function x({model:e,onClose:a,dividerInset:s,settingsLinkClassName:c,settingsIconClassName:u}){let{t:d}=t.useTranslation(`openhands`),g=f.useSwitchAcpModel(),v=e.showAcpPicker||!!e.displayModel,y=t=>{t!==e.currentModelId&&g.mutate({conversationId:e.switchConversationId,model:t}),a()};return(0,_.jsxs)(_.Fragment,{children:[e.showAcpPicker?(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`li`,{role:`presentation`,className:`px-2 pt-1 pb-0.5`,children:(0,_.jsx)(o.Typography.Text,{className:`text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4`,children:d(n.I18nKey.MODEL$AVAILABLE_MODELS)})}),e.availableAcpModels.map(t=>{let n=t.id===e.currentModelId;return(0,_.jsxs)(l.ContextMenuListItem,{testId:`chat-input-acp-model-option-${t.id}`,onClick:e=>{e.preventDefault(),e.stopPropagation(),y(t.id)},className:r.cn(`flex items-center gap-2`,n&&`bg-[var(--oh-interactive-hover)]`),children:[(0,_.jsx)(`span`,{className:`flex-1 truncate text-sm leading-5`,title:t.label,children:t.label}),n&&(0,_.jsx)(i.default,{width:14,height:14,className:`shrink-0`,"aria-hidden":!0})]},t.id)})]}):e.displayModel?(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsx)(`div`,{className:`p-2 leading-5 text-[var(--oh-foreground)] break-all`,children:e.displayModel})}):null,v&&(0,_.jsx)(h.Divider,{inset:s}),(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsxs)(m.NavigationLink,{to:e.destinationPath,onClick:a,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)(p.default,{width:16,height:16,className:r.cn(`shrink-0`,u),"aria-hidden":!0}),(0,_.jsx)(`span`,{children:e.destinationLabel})]})})]})}function S(){let e=d.useChatInputModelState(),[t,n]=g.default.useState(!1),r=g.default.useRef(null),i=u.useClickOutsideElement(()=>n(!1),r);if(!e.displayModel)return null;let o=b(e.displayModel,e.isAcpContext?y:v);return(0,_.jsxs)(`div`,{className:`relative min-w-0`,children:[(0,_.jsxs)(`button`,{ref:r,type:`button`,className:a.chatInputPillButtonClassName,title:e.displayModel,"data-testid":`chat-input-llm-model`,"aria-expanded":t,"aria-haspopup":`dialog`,onClick:e=>{e.preventDefault(),e.stopPropagation(),n(e=>!e)},children:[(0,_.jsx)(`span`,{children:o}),(0,_.jsx)(s.ComboboxCaretInline,{isOpen:t})]}),t&&(0,_.jsx)(c.ContextMenu,{ref:i,testId:`chat-input-llm-model-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)(x,{model:e,onClose:()=>n(!1)})})]})}exports.ChatInputModel=S,exports.ChatInputModelMenuContent=x;
 //# sourceMappingURL=chat-input-model.cjs.map

package/dist/components/features/chat/components/chat-input-model.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { useTranslation as e } from "../../../../node_modules/react-i18next/dist
 import { I18nKey as t } from "../../../../i18n/declaration.js";
 import { cn as n } from "../../../../utils/utils.js";
 import r from "../../../../icons/checkmark.js";
-import { Typography as i } from "../../../../ui/typography.js";
-import { chatInputPillButtonClassName as a } from "../../../../utils/form-control-classes.js";
+import { chatInputPillButtonClassName as i } from "../../../../utils/form-control-classes.js";
+import { Typography as a } from "../../../../ui/typography.js";
 import { ComboboxCaretInline as o } from "../../../../ui/combobox-caret.js";
 import { ContextMenu as s } from "../../../../ui/context-menu.js";
 import { ContextMenuListItem as c } from "../../context-menu/context-menu-list-item.js";
@@ -20,23 +20,23 @@ var y = 10, b = 22;
 function x(e, t = y) {
 	return e.length <= t ? e : `${e.slice(0, t)}…`;
 }
-function S({ model: a, onClose: o, dividerInset: s, settingsLinkClassName: l, settingsIconClassName: u }) {
-	let { t: h } = e("openhands"), y = d(), b = a.showAcpPicker || !!a.displayModel, x = (e) => {
-		e !== a.currentModelId && y.mutate({
-			conversationId: a.switchConversationId,
+function S({ model: i, onClose: o, dividerInset: s, settingsLinkClassName: l, settingsIconClassName: u }) {
+	let { t: h } = e("openhands"), y = d(), b = i.showAcpPicker || !!i.displayModel, x = (e) => {
+		e !== i.currentModelId && y.mutate({
+			conversationId: i.switchConversationId,
 			model: e
 		}), o();
 	};
 	return /* @__PURE__ */ v(g, { children: [
-		a.showAcpPicker ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("li", {
+		i.showAcpPicker ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("li", {
 			role: "presentation",
 			className: "px-2 pt-1 pb-0.5",
-			children: /* @__PURE__ */ _(i.Text, {
+			children: /* @__PURE__ */ _(a.Text, {
 				className: "text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4",
 				children: h(t.MODEL$AVAILABLE_MODELS)
 			})
-		}), a.availableAcpModels.map((e) => {
-			let t = e.id === a.currentModelId;
+		}), i.availableAcpModels.map((e) => {
+			let t = e.id === i.currentModelId;
 			return /* @__PURE__ */ v(c, {
 				testId: `chat-input-acp-model-option-${e.id}`,
 				onClick: (t) => {
@@ -54,18 +54,18 @@ function S({ model: a, onClose: o, dividerInset: s, settingsLinkClassName: l, se
 					"aria-hidden": !0
 				})]
 			}, e.id);
-		})] }) : a.displayModel ? /* @__PURE__ */ _("li", {
+		})] }) : i.displayModel ? /* @__PURE__ */ _("li", {
 			className: "text-sm",
 			children: /* @__PURE__ */ _("div", {
 				className: "p-2 leading-5 text-[var(--oh-foreground)] break-all",
-				children: a.displayModel
+				children: i.displayModel
 			})
 		}) : null,
 		b && /* @__PURE__ */ _(m, { inset: s }),
 		/* @__PURE__ */ _("li", {
 			className: "text-sm",
 			children: /* @__PURE__ */ v(p, {
-				to: a.destinationPath,
+				to: i.destinationPath,
 				onClick: o,
 				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__ */ _(f, {
@@ -73,13 +73,13 @@ function S({ model: a, onClose: o, dividerInset: s, settingsLinkClassName: l, se
 					height: 16,
 					className: n("shrink-0", u),
 					"aria-hidden": !0
-				}), /* @__PURE__ */ _("span", { children: a.destinationLabel })]
+				}), /* @__PURE__ */ _("span", { children: i.destinationLabel })]
 			})
 		})
 	] });
 }
 function C() {
-	let e = u(), [t, n] = h.useState(!1), r = h.useRef(null), i = l(() => n(!1), r);
+	let e = u(), [t, n] = h.useState(!1), r = h.useRef(null), a = l(() => n(!1), r);
 	if (!e.displayModel) return null;
 	let c = x(e.displayModel, e.isAcpContext ? b : y);
 	return /* @__PURE__ */ v("div", {
@@ -87,7 +87,7 @@ function C() {
 		children: [/* @__PURE__ */ v("button", {
 			ref: r,
 			type: "button",
-			className: a,
+			className: i,
 			title: e.displayModel,
 			"data-testid": "chat-input-llm-model",
 			"aria-expanded": t,
@@ -97,7 +97,7 @@ function C() {
 			},
 			children: [/* @__PURE__ */ _("span", { children: c }), /* @__PURE__ */ _(o, { isOpen: t })]
 		}), t && /* @__PURE__ */ _(s, {
-			ref: i,
+			ref: a,
 			testId: "chat-input-llm-model-popover",
 			position: "top",
 			alignment: "left",

package/dist/components/features/chat/components/chat-input-profile-picker.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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(`../../../../ui/typography.cjs`),s=require(`../../../../ui/combobox-caret.cjs`),c=require(`../../../../ui/context-menu.cjs`),l=require(`../../context-menu/context-menu-list-item.cjs`),u=require(`../../../../hooks/use-click-outside-element.cjs`),d=require(`../../../../icons/settings-gear.cjs`),f=require(`../../../shared/navigation-link.cjs`),p=require(`../../../../ui/divider.cjs`),m=require(`../../../../hooks/use-chat-input-profile-state.cjs`);let h=require(`react`);h=e.__toESM(h,1);let g=require(`react/jsx-runtime`);var _=18;function v(e){return e.length<=_?e:`${e.slice(0,_)}…`}function y({onClose:e,dividerInset:a,settingsLinkClassName:s,settingsIconClassName:c}){let{t:u}=t.useTranslation(`openhands`),{profiles:h,currentProfileId:_,selectProfile:v}=m.useChatInputProfileState(),y=t=>{v(t),e()};return(0,g.jsxs)(g.Fragment,{children:[h.length>0&&(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(`li`,{role:`presentation`,className:`px-2 pt-1 pb-0.5`,children:(0,g.jsx)(o.Typography.Text,{className:`text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4`,children:u(n.I18nKey.SETTINGS$AVAILABLE_PROFILES)})}),h.map(t=>{let n=t.id!=null&&t.id===_;return(0,g.jsxs)(l.ContextMenuListItem,{testId:`chat-input-agent-profile-option-${t.name}`,onClick:r=>{if(r.preventDefault(),r.stopPropagation(),n){e();return}y(t)},className:r.cn(`flex items-center gap-2`,n&&`bg-[var(--oh-interactive-hover)]`),children:[(0,g.jsx)(`span`,{className:`flex-1 truncate text-sm leading-5`,title:t.name,children:t.name}),n&&(0,g.jsx)(i.default,{width:14,height:14,className:`shrink-0`,"aria-hidden":!0})]},t.id??t.name)})]}),h.length>0&&(0,g.jsx)(p.Divider,{inset:a}),(0,g.jsx)(`li`,{className:`text-sm`,children:(0,g.jsxs)(f.NavigationLink,{to:`/settings/agents`,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`,s),children:[(0,g.jsx)(d.default,{width:16,height:16,className:r.cn(`shrink-0`,c),"aria-hidden":!0}),(0,g.jsx)(`span`,{children:u(n.I18nKey.CHAT$MANAGE_AGENT_PROFILES)})]})})]})}function b(){let{t:e}=t.useTranslation(`openhands`),{profiles:i,currentProfileName:o,isLoading:l,isSwitching:d}=m.useChatInputProfileState(),[f,p]=h.default.useState(!1),_=h.default.useRef(null),b=u.useClickOutsideElement(()=>p(!1),_);if(l\|\|i.length===0)return null;let x=o??e(n.I18nKey.CHAT$AGENT_PROFILE_PLACEHOLDER);return(0,g.jsxs)(`div`,{className:`relative min-w-0`,children:[(0,g.jsxs)(`button`,{ref:_,type:`button`,className:r.cn(a.chatInputPillButtonClassName,`max-w-[200px]`),title:o??void 0,"data-testid":`chat-input-agent-profile`,"aria-expanded":f,"aria-haspopup":`dialog`,disabled:d,"aria-busy":d,onClick:e=>{e.preventDefault(),e.stopPropagation(),p(e=>!e)},children:[(0,g.jsx)(`span`,{className:`truncate`,children:v(x)}),(0,g.jsx)(s.ComboboxCaretInline,{isOpen:f})]}),f&&(0,g.jsx)(c.ContextMenu,{ref:b,testId:`chat-input-agent-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,g.jsx)(y,{onClose:()=>p(!1)})})]})}exports.ChatInputProfileMenuContent=y,exports.ChatInputProfilePicker=b;
2	+ //# sourceMappingURL=chat-input-profile-picker.cjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"chat-input-profile-picker.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-profile-picker.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useChatInputProfileState } from \"#/hooks/use-chat-input-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\";\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 ChatInputProfileMenuContentProps {\n onClose: () => void;\n dividerInset?: \"menu\";\n settingsLinkClassName?: string;\n settingsIconClassName?: string;\n}\n\nexport function ChatInputProfileMenuContent({\n onClose,\n dividerInset,\n settingsLinkClassName,\n settingsIconClassName,\n}: ChatInputProfileMenuContentProps) {\n const { t } = useTranslation(\"openhands\");\n const { profiles, currentProfileId, selectProfile } =\n useChatInputProfileState();\n\n const handleSelect = (profile: (typeof profiles)[number]) => {\n selectProfile(profile);\n onClose();\n };\n\n return (\n <>\n {profiles.length > 0 && (\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 =\n profile.id != null && profile.id === currentProfileId;\n return (\n <ContextMenuListItem\n key={profile.id ?? profile.name}\n testId={`chat-input-agent-profile-option-${profile.name}`}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n if (isCurrent) {\n onClose();\n return;\n }\n handleSelect(profile);\n }}\n className={cn(\n \"flex items-center gap-2\",\n isCurrent && \"bg-[var(--oh-interactive-hover)]\",\n )}\n >\n <span\n className=\"flex-1 truncate text-sm leading-5\"\n title={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 </ContextMenuListItem>\n );\n })}\n </>\n )}\n {profiles.length > 0 && <Divider inset={dividerInset} />}\n <li className=\"text-sm\">\n <NavigationLink\n to=\"/settings/agents\"\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.CHAT$MANAGE_AGENT_PROFILES)}</span>\n </NavigationLink>\n </li>\n </>\n );\n}\n\nexport function ChatInputProfilePicker() {\n const { t } = useTranslation(\"openhands\");\n const { profiles, currentProfileName, isLoading, isSwitching } =\n useChatInputProfileState();\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 // Nothing to launch from yet (empty store before the backend seeds, or an\n // agent-server without the /api/agent-profiles surface): stay out of the way.\n if (isLoading || profiles.length === 0) {\n return null;\n }\n\n const label = currentProfileName ?? t(I18nKey.CHAT$AGENT_PROFILE_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-agent-profile\"\n aria-expanded={isPopoverOpen}\n aria-haspopup=\"dialog\"\n // Disabled while a profile switch (new-conversation create / activate) is\n // in flight, so re-opening the menu can't fire a second create. The menu\n // closes on select, so this is the only double-submit path.\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-agent-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 <ChatInputProfileMenuContent\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-profile-picker.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+interface ChatInputProfileMenuContentProps {
+    onClose: () => void;
+    dividerInset?: "menu";
+    settingsLinkClassName?: string;
+    settingsIconClassName?: string;
+}
+export declare function ChatInputProfileMenuContent({ onClose, dividerInset, settingsLinkClassName, settingsIconClassName, }: ChatInputProfileMenuContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInputProfilePicker(): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,112 @@
+import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+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 { Typography as a } from "../../../../ui/typography.js";
+import { ComboboxCaretInline as o } from "../../../../ui/combobox-caret.js";
+import { ContextMenu as s } from "../../../../ui/context-menu.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 u from "../../../../icons/settings-gear.js";
+import { NavigationLink as d } from "../../../shared/navigation-link.js";
+import { Divider as f } from "../../../../ui/divider.js";
+import { useChatInputProfileState as p } from "../../../../hooks/use-chat-input-profile-state.js";
+import m from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/features/chat/components/chat-input-profile-picker.tsx
+var v = 18;
+function y(e) {
+	return e.length <= v ? e : `${e.slice(0, v)}…`;
+}
+function b({ onClose: i, dividerInset: o, settingsLinkClassName: s, settingsIconClassName: l }) {
+	let { t: m } = e("openhands"), { profiles: v, currentProfileId: y, selectProfile: b } = p(), x = (e) => {
+		b(e), i();
+	};
+	return /* @__PURE__ */ _(h, { children: [
+		v.length > 0 && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("li", {
+			role: "presentation",
+			className: "px-2 pt-1 pb-0.5",
+			children: /* @__PURE__ */ g(a.Text, {
+				className: "text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4",
+				children: m(t.SETTINGS$AVAILABLE_PROFILES)
+			})
+		}), v.map((e) => {
+			let t = e.id != null && e.id === y;
+			return /* @__PURE__ */ _(c, {
+				testId: `chat-input-agent-profile-option-${e.name}`,
+				onClick: (n) => {
+					if (n.preventDefault(), n.stopPropagation(), t) {
+						i();
+						return;
+					}
+					x(e);
+				},
+				className: n("flex items-center gap-2", t && "bg-[var(--oh-interactive-hover)]"),
+				children: [/* @__PURE__ */ g("span", {
+					className: "flex-1 truncate text-sm leading-5",
+					title: e.name,
+					children: e.name
+				}), t && /* @__PURE__ */ g(r, {
+					width: 14,
+					height: 14,
+					className: "shrink-0",
+					"aria-hidden": !0
+				})]
+			}, e.id ?? e.name);
+		})] }),
+		v.length > 0 && /* @__PURE__ */ g(f, { inset: o }),
+		/* @__PURE__ */ g("li", {
+			className: "text-sm",
+			children: /* @__PURE__ */ _(d, {
+				to: "/settings/agents",
+				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", s),
+				children: [/* @__PURE__ */ g(u, {
+					width: 16,
+					height: 16,
+					className: n("shrink-0", l),
+					"aria-hidden": !0
+				}), /* @__PURE__ */ g("span", { children: m(t.CHAT$MANAGE_AGENT_PROFILES) })]
+			})
+		})
+	] });
+}
+function x() {
+	let { t: r } = e("openhands"), { profiles: a, currentProfileName: c, isLoading: u, isSwitching: d } = p(), [f, h] = m.useState(!1), v = m.useRef(null), x = l(() => h(!1), v);
+	if (u || a.length === 0) return null;
+	let S = c ?? r(t.CHAT$AGENT_PROFILE_PLACEHOLDER);
+	return /* @__PURE__ */ _("div", {
+		className: "relative min-w-0",
+		children: [/* @__PURE__ */ _("button", {
+			ref: v,
+			type: "button",
+			className: n(i, "max-w-[200px]"),
+			title: c ?? void 0,
+			"data-testid": "chat-input-agent-profile",
+			"aria-expanded": f,
+			"aria-haspopup": "dialog",
+			disabled: d,
+			"aria-busy": d,
+			onClick: (e) => {
+				e.preventDefault(), e.stopPropagation(), h((e) => !e);
+			},
+			children: [/* @__PURE__ */ g("span", {
+				className: "truncate",
+				children: y(S)
+			}), /* @__PURE__ */ g(o, { isOpen: f })]
+		}), f && /* @__PURE__ */ g(s, {
+			ref: x,
+			testId: "chat-input-agent-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__ */ g(b, { onClose: () => h(!1) })
+		})]
+	});
+}
+//#endregion
+export { b as ChatInputProfileMenuContent, x as ChatInputProfilePicker };
+//# sourceMappingURL=chat-input-profile-picker.js.map