npm - @openhands/agent-canvas - Versions diffs - 1.0.0-alpha.6 → 1.0.0-alpha.7 - Mend

@openhands/agent-canvas 1.0.0-alpha.6 → 1.0.0-alpha.7

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 (68) hide show

package/dist/components/features/backends/backend-selector.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"backend-selector.cjs","names":[],"sources":["../../../../src/components/features/backends/backend-selector.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useMatch, useNavigate } from \"react-router\";\nimport { Plus, Settings } from \"lucide-react\";\nimport { Dropdown } from \"#/ui/dropdown/dropdown\";\nimport { DropdownOption } from \"#/ui/dropdown/types\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n useBackendsHealth,\n type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string \| null): string {\n return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n backendId: string;\n orgId: string \| null;\n} {\n const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth \| undefined) {\n return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildOptions(\n registered: Backend[],\n personalWorkspaceLabel: string,\n cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n const options: DropdownOption[] = [];\n\n const locals = registered.filter((b) => b.kind === \"local\");\n const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n for (const b of locals) {\n options.push({\n value: makeOptionValue(b.id, null),\n label: b.name,\n prefix: buildStatusPrefix(healthByBackendId[b.id]),\n });\n }\n\n for (const b of clouds) {\n const entry = cloudOrgs[b.id];\n const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n if (!entry \|\| entry.orgs.length === 0) {\n options.push({\n value: makeOptionValue(b.id, null),\n label: b.name,\n prefix,\n });\n } else {\n // Personal-workspace rule (per the cloud contract): the org whose\n // id matches the calling user's id is the user's personal\n // workspace. We resolve `user_id` once per backend (via /me on any\n // one org) and apply it across all orgs of that backend.\n const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n for (const org of entry.orgs) {\n const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n options.push({\n value: makeOptionValue(b.id, org.id),\n label: `${b.name} – ${orgLabel}`,\n // All org rows for the same cloud backend share that backend's\n // single connectivity verdict — there is no per-org probe.\n prefix,\n });\n }\n }\n }\n\n return options;\n}\n\ninterface BackendSelectorProps {\n /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). /\n openUpward?: boolean;\n /* Hide the selector input trigger and only render the dropdown menu. /\n hideTrigger?: boolean;\n /* Whether the dropdown menu should start open on mount. /\n defaultOpen?: boolean;\n /* Callback fired after selecting a backend/org option. /\n onSelectOption?: () => void;\n /\n Override the internal Add Backend modal handling. When provided,\n * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n * own modal. Useful when the selector is mounted inside an ephemeral\n * container (e.g. the collapsed-sidebar popover) and the modal must\n * survive the parent unmounting.\n /\n onOpenAddBackend?: () => void;\n /* Same as onOpenAddBackend but for the Manage Backends modal. /\n onOpenManageBackends?: () => void;\n /\n Whether the surrounding sidebar rail is in its collapsed variant. Passed\n * down from `SidebarRailBody` so the mobile drawer (which always renders\n * the expanded rail) can override the persisted desktop value.\n /\n sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n openUpward = false,\n hideTrigger = false,\n defaultOpen = false,\n onSelectOption,\n onOpenAddBackend,\n onOpenManageBackends,\n sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, setActive } = useActiveBackendContext();\n const cloudOrgs = useAllCloudOrganizations();\n const currentUserIds = useCloudCurrentUserId();\n // Probe each registered backend every 10s.\n const healthByBackendId = useBackendsHealth(backends);\n const navigate = useNavigate();\n const settingsMatch = useMatch(\"/settings\");\n const settingsSubrouteMatch = useMatch(\"/settings/\");\n const conversationMatch = useMatch(\"/conversations/:conversationId\");\n const automationDetailMatch = useMatch(\"/automations/:automationId\");\n const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n React.useState(false);\n\n const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n const options = React.useMemo(\n () =>\n buildOptions(\n backends,\n personalWorkspaceLabel,\n cloudOrgs,\n currentUserIds,\n healthByBackendId,\n ),\n [\n backends,\n personalWorkspaceLabel,\n cloudOrgs,\n currentUserIds,\n healthByBackendId,\n ],\n );\n\n const activeValue = makeOptionValue(active.backend.id, active.orgId);\n const activeOption = options.find((o) => o.value === activeValue);\n const isSettingsActive = Boolean(settingsMatch \|\| settingsSubrouteMatch);\n const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n const isRightPanelShown = useConversationStore(\n (state) => state.isRightPanelShown,\n );\n // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n // canvas and reads awkwardly; prefer above the control. When the rail is\n // collapsed, keep left except on active conversation + open right drawer.\n const settingsTooltipPlacement =\n !sidebarCollapsed \|\| (conversationMatch && isRightPanelShown)\n ? \"top\"\n : \"left\";\n\n const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n // Self-heal a malformed `(cloudBackendId, null)` selection.\n //\n // Once a cloud backend's orgs resolve, the dropdown only renders\n // per-org rows for it — the `(backendId, null)` row disappears, so\n // selecting that shape would drift from what the dropdown can render\n // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n // the selection onto the personal-workspace org (or, lacking a /me\n // result, the first org). The selection is recorded locally only;\n // the cloud request scope follows from the API key's bound org and the\n // X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n // org choice is never mutated as a side effect.\n React.useEffect(() => {\n if (active.backend.kind !== \"cloud\" \|\| active.orgId) return;\n const { backend } = active;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return;\n\n const userId = currentUserIds[backend.id]?.userId ?? null;\n const personal = userId\n ? entry.orgs.find((o) => o.id === userId)\n : undefined;\n const target = personal ?? entry.orgs[0];\n if (target) {\n setActive(backend.id, target.id);\n }\n }, [active, cloudOrgs, currentUserIds, setActive]);\n\n const openAddBackendModal = React.useCallback(() => {\n if (onOpenAddBackend) {\n onOpenAddBackend();\n onSelectOption?.();\n return;\n }\n setAddBackendModalOpen(true);\n }, [onOpenAddBackend, onSelectOption]);\n\n const openManageBackendsModal = React.useCallback(() => {\n if (onOpenManageBackends) {\n onOpenManageBackends();\n onSelectOption?.();\n return;\n }\n setManageBackendsModalOpen(true);\n }, [onOpenManageBackends, onSelectOption]);\n\n const preventDropdownMenuClose = React.useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n },\n [],\n );\n\n const addBackendFooter = (\n <div className=\"flex flex-col\">\n <button\n type=\"button\"\n data-testid=\"add-backend-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onClick={openAddBackendModal}\n className=\"flex w-full items-center gap-2 px-2 py-2 rounded-md text-sm cursor-pointer text-white hover:bg-[var(--oh-interactive-hover)]\"\n >\n <Plus width={16} height={16} className=\"text-white shrink-0\" />\n {t(I18nKey.BACKEND$ADD)}\n </button>\n <button\n type=\"button\"\n data-testid=\"manage-backends-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onClick={openManageBackendsModal}\n className=\"flex w-full items-center gap-2 px-2 py-2 rounded-md text-sm cursor-pointer text-white hover:bg-[var(--oh-interactive-hover)]\"\n >\n <Settings width={16} height={16} className=\"text-white shrink-0\" />\n {t(I18nKey.BACKEND$MANAGE)}\n </button>\n </div>\n );\n\n const handleSelectBackend = React.useCallback(\n async (value: string) => {\n if (value === activeValue) return;\n\n const { backendId, orgId } = parseOptionValue(value);\n const target = backends.find((b) => b.id === backendId);\n if (!target) return;\n\n triggerEnvironmentSwitch(\n options.find((option) => option.value === value)?.label ?? target.name,\n );\n await new Promise<void>((resolve) => {\n setTimeout(resolve, ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS);\n });\n\n // @spec BM-002 — Switching backends keeps the user on the same page\n if (conversationMatch) navigate(\"/conversations\");\n else if (automationDetailMatch) navigate(\"/automations\");\n\n setActive(target.id, orgId);\n onSelectOption?.();\n },\n [\n activeValue,\n backends,\n conversationMatch,\n automationDetailMatch,\n navigate,\n options,\n setActive,\n t,\n onSelectOption,\n ],\n );\n\n return (\n <>\n <div className=\"flex items-center gap-2 w-full\">\n <div className=\"flex-1 min-w-0\">\n <Dropdown\n testId=\"backend-selector\"\n key={`${activeValue}-${activeOption?.label ?? \"\"}`}\n defaultValue={\n activeOption ?? {\n value: activeValue,\n label: active.backend.name,\n prefix: buildStatusPrefix(healthByBackendId[active.backend.id]),\n }\n }\n footer={addBackendFooter}\n openUpward={openUpward}\n hideTrigger={hideTrigger}\n defaultOpen={defaultOpen}\n openOnHover={!hideTrigger}\n onChange={(item) => {\n if (!item) return;\n void handleSelectBackend(item.value);\n }}\n placeholder={active.backend.name}\n loading={someCloudLoading}\n options={options}\n className=\"h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0\"\n />\n </div>\n {!hideTrigger ? (\n <StyledTooltip\n content={settingsLabel}\n placement={settingsTooltipPlacement}\n offset={10}\n >\n <button\n type=\"button\"\n data-testid=\"backend-selector-settings-link\"\n data-active={isSettingsActive}\n aria-label={settingsLabel}\n onClick={() => navigate(\"/settings\")}\n className={\n isSettingsActive\n ? cn(\n \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer\",\n formControlTransitionClassName,\n )\n : cn(\n \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer\",\n formControlTransitionClassName,\n )\n }\n >\n <Settings width={16} height={16} />\n </button>\n </StyledTooltip>\n ) : null}\n </div>\n {addBackendModalOpen ? (\n <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n ) : null}\n {manageBackendsModalOpen ? (\n <ManageBackendsModal\n onClose={() => setManageBackendsModalOpen(false)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"backend-selector.cjs","names":[],"sources":["../../../../src/components/features/backends/backend-selector.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useMatch, useNavigate } from \"react-router\";\nimport { Plus, Settings } from \"lucide-react\";\nimport { Dropdown } from \"#/ui/dropdown/dropdown\";\nimport { DropdownOption } from \"#/ui/dropdown/types\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n useBackendsHealth,\n type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string \| null): string {\n return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n backendId: string;\n orgId: string \| null;\n} {\n const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth \| undefined) {\n return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildOptions(\n registered: Backend[],\n personalWorkspaceLabel: string,\n cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n const options: DropdownOption[] = [];\n\n const locals = registered.filter((b) => b.kind === \"local\");\n const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n for (const b of locals) {\n options.push({\n value: makeOptionValue(b.id, null),\n label: b.name,\n prefix: buildStatusPrefix(healthByBackendId[b.id]),\n });\n }\n\n for (const b of clouds) {\n const entry = cloudOrgs[b.id];\n const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n if (!entry \|\| entry.orgs.length === 0) {\n options.push({\n value: makeOptionValue(b.id, null),\n label: b.name,\n prefix,\n });\n } else {\n // Personal-workspace rule (per the cloud contract): the org whose\n // id matches the calling user's id is the user's personal\n // workspace. We resolve `user_id` once per backend (via /me on any\n // one org) and apply it across all orgs of that backend.\n const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n for (const org of entry.orgs) {\n const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n options.push({\n value: makeOptionValue(b.id, org.id),\n label: `${b.name} – ${orgLabel}`,\n // All org rows for the same cloud backend share that backend's\n // single connectivity verdict — there is no per-org probe.\n prefix,\n });\n }\n }\n }\n\n return options;\n}\n\ninterface BackendSelectorProps {\n /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). /\n openUpward?: boolean;\n /* Hide the selector input trigger and only render the dropdown menu. /\n hideTrigger?: boolean;\n /* Whether the dropdown menu should start open on mount. /\n defaultOpen?: boolean;\n /* Callback fired after selecting a backend/org option. /\n onSelectOption?: () => void;\n /\n Override the internal Add Backend modal handling. When provided,\n * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n * own modal. Useful when the selector is mounted inside an ephemeral\n * container (e.g. the collapsed-sidebar popover) and the modal must\n * survive the parent unmounting.\n /\n onOpenAddBackend?: () => void;\n /* Same as onOpenAddBackend but for the Manage Backends modal. /\n onOpenManageBackends?: () => void;\n /\n Whether the surrounding sidebar rail is in its collapsed variant. Passed\n * down from `SidebarRailBody` so the mobile drawer (which always renders\n * the expanded rail) can override the persisted desktop value.\n /\n sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n openUpward = false,\n hideTrigger = false,\n defaultOpen = false,\n onSelectOption,\n onOpenAddBackend,\n onOpenManageBackends,\n sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, setActive } = useActiveBackendContext();\n const cloudOrgs = useAllCloudOrganizations();\n const currentUserIds = useCloudCurrentUserId();\n // Probe each registered backend every 10s.\n const healthByBackendId = useBackendsHealth(backends);\n const navigate = useNavigate();\n const settingsMatch = useMatch(\"/settings\");\n const settingsSubrouteMatch = useMatch(\"/settings/\");\n const conversationMatch = useMatch(\"/conversations/:conversationId\");\n const automationDetailMatch = useMatch(\"/automations/:automationId\");\n const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n React.useState(false);\n\n const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n const options = React.useMemo(\n () =>\n buildOptions(\n backends,\n personalWorkspaceLabel,\n cloudOrgs,\n currentUserIds,\n healthByBackendId,\n ),\n [\n backends,\n personalWorkspaceLabel,\n cloudOrgs,\n currentUserIds,\n healthByBackendId,\n ],\n );\n\n const activeValue = makeOptionValue(active.backend.id, active.orgId);\n const activeOption = options.find((o) => o.value === activeValue);\n const isSettingsActive = Boolean(settingsMatch \|\| settingsSubrouteMatch);\n const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n const isRightPanelShown = useConversationStore(\n (state) => state.isRightPanelShown,\n );\n // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n // canvas and reads awkwardly; prefer above the control. When the rail is\n // collapsed, keep left except on active conversation + open right drawer.\n const settingsTooltipPlacement =\n !sidebarCollapsed \|\| (conversationMatch && isRightPanelShown)\n ? \"top\"\n : \"left\";\n\n const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n // Self-heal a malformed `(cloudBackendId, null)` selection.\n //\n // Once a cloud backend's orgs resolve, the dropdown only renders\n // per-org rows for it — the `(backendId, null)` row disappears, so\n // selecting that shape would drift from what the dropdown can render\n // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n // the selection onto the personal-workspace org (or, lacking a /me\n // result, the first org). The selection is recorded locally only;\n // the cloud request scope follows from the API key's bound org and the\n // X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n // org choice is never mutated as a side effect.\n React.useEffect(() => {\n if (active.backend.kind !== \"cloud\" \|\| active.orgId) return;\n const { backend } = active;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return;\n\n const userId = currentUserIds[backend.id]?.userId ?? null;\n const personal = userId\n ? entry.orgs.find((o) => o.id === userId)\n : undefined;\n const target = personal ?? entry.orgs[0];\n if (target) {\n setActive(backend.id, target.id);\n }\n }, [active, cloudOrgs, currentUserIds, setActive]);\n\n const openAddBackendModal = React.useCallback(() => {\n if (onOpenAddBackend) {\n onOpenAddBackend();\n onSelectOption?.();\n return;\n }\n setAddBackendModalOpen(true);\n }, [onOpenAddBackend, onSelectOption]);\n\n const openManageBackendsModal = React.useCallback(() => {\n if (onOpenManageBackends) {\n onOpenManageBackends();\n onSelectOption?.();\n return;\n }\n setManageBackendsModalOpen(true);\n }, [onOpenManageBackends, onSelectOption]);\n\n const preventDropdownMenuClose = React.useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n },\n [],\n );\n\n const addBackendFooter = (\n <div className=\"flex flex-col\">\n <button\n type=\"button\"\n data-testid=\"add-backend-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onClick={openAddBackendModal}\n className=\"flex w-full items-center gap-2 px-2 py-2 rounded-md text-sm cursor-pointer text-white hover:bg-[var(--oh-interactive-hover)]\"\n >\n <Plus width={16} height={16} className=\"text-white shrink-0\" />\n {t(I18nKey.BACKEND$ADD)}\n </button>\n <button\n type=\"button\"\n data-testid=\"manage-backends-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onClick={openManageBackendsModal}\n className=\"flex w-full items-center gap-2 px-2 py-2 rounded-md text-sm cursor-pointer text-white hover:bg-[var(--oh-interactive-hover)]\"\n >\n <Settings width={16} height={16} className=\"text-white shrink-0\" />\n {t(I18nKey.BACKEND$MANAGE)}\n </button>\n </div>\n );\n\n const handleSelectBackend = React.useCallback(\n async (value: string) => {\n if (value === activeValue) return;\n\n const { backendId, orgId } = parseOptionValue(value);\n const target = backends.find((b) => b.id === backendId);\n if (!target) return;\n\n triggerEnvironmentSwitch(\n options.find((option) => option.value === value)?.label ?? target.name,\n );\n await new Promise<void>((resolve) => {\n setTimeout(resolve, ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS);\n });\n\n // @spec BM-002 — Switching backends keeps the user on the same page\n if (conversationMatch) navigate(\"/conversations\");\n else if (automationDetailMatch) navigate(\"/automations\");\n\n setActive(target.id, orgId);\n onSelectOption?.();\n },\n [\n activeValue,\n backends,\n conversationMatch,\n automationDetailMatch,\n navigate,\n options,\n setActive,\n t,\n onSelectOption,\n ],\n );\n\n return (\n <>\n <div className=\"flex items-center gap-2 w-full\">\n <div className=\"flex-1 min-w-0\">\n <Dropdown\n testId=\"backend-selector\"\n key={`${activeValue}-${activeOption?.label ?? \"\"}`}\n defaultValue={\n activeOption ?? {\n value: activeValue,\n label: active.backend.name,\n prefix: buildStatusPrefix(healthByBackendId[active.backend.id]),\n }\n }\n footer={addBackendFooter}\n openUpward={openUpward}\n hideTrigger={hideTrigger}\n defaultOpen={defaultOpen}\n openOnHover={!hideTrigger}\n onChange={(item) => {\n if (!item) return;\n void handleSelectBackend(item.value);\n }}\n placeholder={active.backend.name}\n loading={someCloudLoading}\n options={options}\n className=\"h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0\"\n />\n </div>\n {!hideTrigger ? (\n <StyledTooltip\n content={settingsLabel}\n placement={settingsTooltipPlacement}\n offset={10}\n >\n <NavigationLink\n to=\"/settings\"\n data-testid=\"backend-selector-settings-link\"\n data-active={isSettingsActive}\n aria-label={settingsLabel}\n className={\n isSettingsActive\n ? cn(\n \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer\",\n formControlTransitionClassName,\n )\n : cn(\n \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer\",\n formControlTransitionClassName,\n )\n }\n >\n <Settings width={16} height={16} />\n </NavigationLink>\n </StyledTooltip>\n ) : null}\n </div>\n {addBackendModalOpen ? (\n <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n ) : null}\n {manageBackendsModalOpen ? (\n <ManageBackendsModal\n onClose={() => setManageBackendsModalOpen(false)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/backends/backend-selector.js CHANGED Viewed

@@ -6,44 +6,45 @@ import { useActiveBackendContext as i } from "../../../contexts/active-backend-c
 import { Plus as a } from "../../../node_modules/lucide-react/dist/esm/icons/plus.js";
 import { Settings as o } from "../../../node_modules/lucide-react/dist/esm/icons/settings.js";
 import { formControlTransitionClassName as s } from "../../../utils/form-control-classes.js";
-import { StyledTooltip as c } from "../../shared/buttons/styled-tooltip.js";
-import { useAllCloudOrganizations as l } from "../../../hooks/query/use-cloud-organizations.js";
-import { useCloudCurrentUserId as u } from "../../../hooks/query/use-cloud-current-user-id.js";
-import { Dropdown as d } from "../../../ui/dropdown/dropdown.js";
-import { useBackendsHealth as f } from "../../../hooks/query/use-backends-health.js";
-import { triggerEnvironmentSwitch as ee } from "./environment-switch-store.js";
+import { StyledTooltip as ee } from "../../shared/buttons/styled-tooltip.js";
+import { NavigationLink as te } from "../../shared/navigation-link.js";
+import { useAllCloudOrganizations as c } from "../../../hooks/query/use-cloud-organizations.js";
+import { useCloudCurrentUserId as l } from "../../../hooks/query/use-cloud-current-user-id.js";
+import { Dropdown as u } from "../../../ui/dropdown/dropdown.js";
+import { useBackendsHealth as d } from "../../../hooks/query/use-backends-health.js";
+import { triggerEnvironmentSwitch as f } from "./environment-switch-store.js";
 import { BackendStatusDot as p } from "./backend-status-dot.js";
 import { AddBackendModal as m } from "./add-backend-modal.js";
-import { ManageBackendsModal as te } from "./manage-backends-modal.js";
-import h from "react";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
-import { useMatch as y, useNavigate as b } from "react-router";
+import { ManageBackendsModal as h } from "./manage-backends-modal.js";
+import g from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useMatch as b, useNavigate as x } from "react-router";
 //#region src/components/features/backends/backend-selector.tsx
-var x = "::";
-function S(e, t) {
-	return t ? `${e}${x}${t}` : e;
+var S = "::";
+function C(e, t) {
+	return t ? `${e}${S}${t}` : e;
 }
 function ne(e) {
-	let [t, n] = e.split(x);
+	let [t, n] = e.split(S);
 	return {
 		backendId: t,
 		orgId: n ?? null
 	};
 }
-function C(e) {
-	return /* @__PURE__ */ _(p, { isConnected: e?.isConnected ?? null });
+function w(e) {
+	return /* @__PURE__ */ v(p, { isConnected: e?.isConnected ?? null });
 }
-function w(e, t, n, r, i) {
+function T(e, t, n, r, i) {
 	let a = [], o = e.filter((e) => e.kind === "local"), s = e.filter((e) => e.kind === "cloud");
 	for (let e of o) a.push({
-		value: S(e.id, null),
+		value: C(e.id, null),
 		label: e.name,
-		prefix: C(i[e.id])
+		prefix: w(i[e.id])
 	});
 	for (let e of s) {
-		let o = n[e.id], s = C(i[e.id]);
+		let o = n[e.id], s = w(i[e.id]);
 		if (!o || o.orgs.length === 0) a.push({
-			value: S(e.id, null),
+			value: C(e.id, null),
 			label: e.name,
 			prefix: s
 		});
@@ -52,7 +53,7 @@ function w(e, t, n, r, i) {
 			for (let r of o.orgs) {
 				let i = n && n === r.id ? t : r.name;
 				a.push({
-					value: S(e.id, r.id),
+					value: C(e.id, r.id),
 					label: `${e.name} – ${i}`,
 					prefix: s
 				});
@@ -61,130 +62,129 @@ function w(e, t, n, r, i) {
 	}
 	return a;
 }
-function T({ openUpward: p = !1, hideTrigger: x = !1, defaultOpen: T = !1, onSelectOption: E, onOpenAddBackend: D, onOpenManageBackends: O, sidebarCollapsed: k = !1 } = {}) {
-	let { t: A } = e("openhands"), { backends: j, active: M, setActive: N } = i(), P = l(), F = u(), I = f(j), L = b(), R = y("/settings"), z = y("/settings/*"), B = y("/conversations/:conversationId"), V = y("/automations/:automationId"), [H, U] = h.useState(!1), [W, G] = h.useState(!1), K = A(t.BACKEND$PERSONAL_WORKSPACE), q = h.useMemo(() => w(j, K, P, F, I), [
-		j,
-		K,
-		P,
+function E({ openUpward: p = !1, hideTrigger: S = !1, defaultOpen: E = !1, onSelectOption: D, onOpenAddBackend: O, onOpenManageBackends: k, sidebarCollapsed: A = !1 } = {}) {
+	let { t: j } = e("openhands"), { backends: M, active: N, setActive: P } = i(), F = c(), I = l(), L = d(M), R = x(), z = b("/settings"), B = b("/settings/*"), V = b("/conversations/:conversationId"), H = b("/automations/:automationId"), [U, W] = g.useState(!1), [G, K] = g.useState(!1), q = j(t.BACKEND$PERSONAL_WORKSPACE), J = g.useMemo(() => T(M, q, F, I, L), [
+		M,
+		q,
 		F,
-		I
-	]), J = S(M.backend.id, M.orgId), Y = q.find((e) => e.value === J), X = !!(R || z), Z = A(t.SIDEBAR$SETTINGS), re = r((e) => e.isRightPanelShown), ie = !k || B && re ? "top" : "left", ae = Object.values(P).some((e) => e.isLoading);
-	h.useEffect(() => {
-		if (M.backend.kind !== "cloud" || M.orgId) return;
-		let { backend: e } = M, t = P[e.id];
+		I,
+		L
+	]), Y = C(N.backend.id, N.orgId), X = J.find((e) => e.value === Y), Z = !!(z || B), Q = j(t.SIDEBAR$SETTINGS), re = r((e) => e.isRightPanelShown), ie = !A || V && re ? "top" : "left", ae = Object.values(F).some((e) => e.isLoading);
+	g.useEffect(() => {
+		if (N.backend.kind !== "cloud" || N.orgId) return;
+		let { backend: e } = N, t = F[e.id];
 		if (!t || t.orgs.length === 0) return;
-		let n = F[e.id]?.userId ?? null, r = (n ? t.orgs.find((e) => e.id === n) : void 0) ?? t.orgs[0];
-		r && N(e.id, r.id);
+		let n = I[e.id]?.userId ?? null, r = (n ? t.orgs.find((e) => e.id === n) : void 0) ?? t.orgs[0];
+		r && P(e.id, r.id);
 	}, [
-		M,
-		P,
+		N,
 		F,
-		N
+		I,
+		P
 	]);
-	let Q = h.useCallback(() => {
-		if (D) {
-			D(), E?.();
+	let oe = g.useCallback(() => {
+		if (O) {
+			O(), D?.();
 			return;
 		}
-		U(!0);
-	}, [D, E]), oe = h.useCallback(() => {
-		if (O) {
-			O(), E?.();
+		W(!0);
+	}, [O, D]), se = g.useCallback(() => {
+		if (k) {
+			k(), D?.();
 			return;
 		}
-		G(!0);
-	}, [O, E]), $ = h.useCallback((e) => {
+		K(!0);
+	}, [k, D]), $ = g.useCallback((e) => {
 		e.preventDefault(), e.stopPropagation();
-	}, []), se = /* @__PURE__ */ v("div", {
+	}, []), ce = /* @__PURE__ */ y("div", {
 		className: "flex flex-col",
-		children: [/* @__PURE__ */ v("button", {
+		children: [/* @__PURE__ */ y("button", {
 			type: "button",
 			"data-testid": "add-backend-menu-item",
 			onMouseDown: $,
-			onClick: Q,
+			onClick: oe,
 			className: "flex w-full items-center gap-2 px-2 py-2 rounded-md text-sm cursor-pointer text-white hover:bg-[var(--oh-interactive-hover)]",
-			children: [/* @__PURE__ */ _(a, {
+			children: [/* @__PURE__ */ v(a, {
 				width: 16,
 				height: 16,
 				className: "text-white shrink-0"
-			}), A(t.BACKEND$ADD)]
-		}), /* @__PURE__ */ v("button", {
+			}), j(t.BACKEND$ADD)]
+		}), /* @__PURE__ */ y("button", {
 			type: "button",
 			"data-testid": "manage-backends-menu-item",
 			onMouseDown: $,
-			onClick: oe,
+			onClick: se,
 			className: "flex w-full items-center gap-2 px-2 py-2 rounded-md text-sm cursor-pointer text-white hover:bg-[var(--oh-interactive-hover)]",
-			children: [/* @__PURE__ */ _(o, {
+			children: [/* @__PURE__ */ v(o, {
 				width: 16,
 				height: 16,
 				className: "text-white shrink-0"
-			}), A(t.BACKEND$MANAGE)]
+			}), j(t.BACKEND$MANAGE)]
 		})]
-	}), ce = h.useCallback(async (e) => {
-		if (e === J) return;
-		let { backendId: t, orgId: n } = ne(e), r = j.find((e) => e.id === t);
-		r && (ee(q.find((t) => t.value === e)?.label ?? r.name), await new Promise((e) => {
+	}), le = g.useCallback(async (e) => {
+		if (e === Y) return;
+		let { backendId: t, orgId: n } = ne(e), r = M.find((e) => e.id === t);
+		r && (f(J.find((t) => t.value === e)?.label ?? r.name), await new Promise((e) => {
 			setTimeout(e, 400);
-		}), B ? L("/conversations") : V && L("/automations"), N(r.id, n), E?.());
+		}), V ? R("/conversations") : H && R("/automations"), P(r.id, n), D?.());
 	}, [
+		Y,
+		M,
+		V,
+		H,
+		R,
 		J,
+		P,
 		j,
-		B,
-		V,
-		L,
-		q,
-		N,
-		A,
-		E
+		D
 	]);
-	return /* @__PURE__ */ v(g, { children: [
-		/* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ y(_, { children: [
+		/* @__PURE__ */ y("div", {
 			className: "flex items-center gap-2 w-full",
-			children: [/* @__PURE__ */ _("div", {
+			children: [/* @__PURE__ */ v("div", {
 				className: "flex-1 min-w-0",
-				children: /* @__PURE__ */ _(d, {
+				children: /* @__PURE__ */ v(u, {
 					testId: "backend-selector",
-					defaultValue: Y ?? {
-						value: J,
-						label: M.backend.name,
-						prefix: C(I[M.backend.id])
+					defaultValue: X ?? {
+						value: Y,
+						label: N.backend.name,
+						prefix: w(L[N.backend.id])
 					},
-					footer: se,
+					footer: ce,
 					openUpward: p,
-					hideTrigger: x,
-					defaultOpen: T,
-					openOnHover: !x,
+					hideTrigger: S,
+					defaultOpen: E,
+					openOnHover: !S,
 					onChange: (e) => {
-						e && ce(e.value);
+						e && le(e.value);
 					},
-					placeholder: M.backend.name,
+					placeholder: N.backend.name,
 					loading: ae,
-					options: q,
+					options: J,
 					className: "h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0"
-				}, `${J}-${Y?.label ?? ""}`)
-			}), x ? null : /* @__PURE__ */ _(c, {
-				content: Z,
+				}, `${Y}-${X?.label ?? ""}`)
+			}), S ? null : /* @__PURE__ */ v(ee, {
+				content: Q,
 				placement: ie,
 				offset: 10,
-				children: /* @__PURE__ */ _("button", {
-					type: "button",
+				children: /* @__PURE__ */ v(te, {
+					to: "/settings",
 					"data-testid": "backend-selector-settings-link",
-					"data-active": X,
-					"aria-label": Z,
-					onClick: () => L("/settings"),
-					className: n(X ? "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer" : "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer", s),
-					children: /* @__PURE__ */ _(o, {
+					"data-active": Z,
+					"aria-label": Q,
+					className: n(Z ? "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer" : "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer", s),
+					children: /* @__PURE__ */ v(o, {
 						width: 16,
 						height: 16
 					})
 				})
 			})]
 		}),
-		H ? /* @__PURE__ */ _(m, { onClose: () => U(!1) }) : null,
-		W ? /* @__PURE__ */ _(te, { onClose: () => G(!1) }) : null
+		U ? /* @__PURE__ */ v(m, { onClose: () => W(!1) }) : null,
+		G ? /* @__PURE__ */ v(h, { onClose: () => K(!1) }) : null
 	] });
 }
 //#endregion
-export { T as BackendSelector };
+export { E as BackendSelector };
 //# sourceMappingURL=backend-selector.js.map

package/dist/components/features/backends/backend-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"backend-selector.js","names":[],"sources":["../../../../src/components/features/backends/backend-selector.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useMatch, useNavigate } from \"react-router\";\nimport { Plus, Settings } from \"lucide-react\";\nimport { Dropdown } from \"#/ui/dropdown/dropdown\";\nimport { DropdownOption } from \"#/ui/dropdown/types\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n useBackendsHealth,\n type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string \| null): string {\n return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n backendId: string;\n orgId: string \| null;\n} {\n const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth \| undefined) {\n return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildOptions(\n registered: Backend[],\n personalWorkspaceLabel: string,\n cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n const options: DropdownOption[] = [];\n\n const locals = registered.filter((b) => b.kind === \"local\");\n const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n for (const b of locals) {\n options.push({\n value: makeOptionValue(b.id, null),\n label: b.name,\n prefix: buildStatusPrefix(healthByBackendId[b.id]),\n });\n }\n\n for (const b of clouds) {\n const entry = cloudOrgs[b.id];\n const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n if (!entry \|\| entry.orgs.length === 0) {\n options.push({\n value: makeOptionValue(b.id, null),\n label: b.name,\n prefix,\n });\n } else {\n // Personal-workspace rule (per the cloud contract): the org whose\n // id matches the calling user's id is the user's personal\n // workspace. We resolve `user_id` once per backend (via /me on any\n // one org) and apply it across all orgs of that backend.\n const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n for (const org of entry.orgs) {\n const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n options.push({\n value: makeOptionValue(b.id, org.id),\n label: `${b.name} – ${orgLabel}`,\n // All org rows for the same cloud backend share that backend's\n // single connectivity verdict — there is no per-org probe.\n prefix,\n });\n }\n }\n }\n\n return options;\n}\n\ninterface BackendSelectorProps {\n /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). /\n openUpward?: boolean;\n /* Hide the selector input trigger and only render the dropdown menu. /\n hideTrigger?: boolean;\n /* Whether the dropdown menu should start open on mount. /\n defaultOpen?: boolean;\n /* Callback fired after selecting a backend/org option. /\n onSelectOption?: () => void;\n /\n Override the internal Add Backend modal handling. When provided,\n * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n * own modal. Useful when the selector is mounted inside an ephemeral\n * container (e.g. the collapsed-sidebar popover) and the modal must\n * survive the parent unmounting.\n /\n onOpenAddBackend?: () => void;\n /* Same as onOpenAddBackend but for the Manage Backends modal. /\n onOpenManageBackends?: () => void;\n /\n Whether the surrounding sidebar rail is in its collapsed variant. Passed\n * down from `SidebarRailBody` so the mobile drawer (which always renders\n * the expanded rail) can override the persisted desktop value.\n /\n sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n openUpward = false,\n hideTrigger = false,\n defaultOpen = false,\n onSelectOption,\n onOpenAddBackend,\n onOpenManageBackends,\n sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, setActive } = useActiveBackendContext();\n const cloudOrgs = useAllCloudOrganizations();\n const currentUserIds = useCloudCurrentUserId();\n // Probe each registered backend every 10s.\n const healthByBackendId = useBackendsHealth(backends);\n const navigate = useNavigate();\n const settingsMatch = useMatch(\"/settings\");\n const settingsSubrouteMatch = useMatch(\"/settings/\");\n const conversationMatch = useMatch(\"/conversations/:conversationId\");\n const automationDetailMatch = useMatch(\"/automations/:automationId\");\n const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n React.useState(false);\n\n const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n const options = React.useMemo(\n () =>\n buildOptions(\n backends,\n personalWorkspaceLabel,\n cloudOrgs,\n currentUserIds,\n healthByBackendId,\n ),\n [\n backends,\n personalWorkspaceLabel,\n cloudOrgs,\n currentUserIds,\n healthByBackendId,\n ],\n );\n\n const activeValue = makeOptionValue(active.backend.id, active.orgId);\n const activeOption = options.find((o) => o.value === activeValue);\n const isSettingsActive = Boolean(settingsMatch \|\| settingsSubrouteMatch);\n const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n const isRightPanelShown = useConversationStore(\n (state) => state.isRightPanelShown,\n );\n // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n // canvas and reads awkwardly; prefer above the control. When the rail is\n // collapsed, keep left except on active conversation + open right drawer.\n const settingsTooltipPlacement =\n !sidebarCollapsed \|\| (conversationMatch && isRightPanelShown)\n ? \"top\"\n : \"left\";\n\n const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n // Self-heal a malformed `(cloudBackendId, null)` selection.\n //\n // Once a cloud backend's orgs resolve, the dropdown only renders\n // per-org rows for it — the `(backendId, null)` row disappears, so\n // selecting that shape would drift from what the dropdown can render\n // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n // the selection onto the personal-workspace org (or, lacking a /me\n // result, the first org). The selection is recorded locally only;\n // the cloud request scope follows from the API key's bound org and the\n // X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n // org choice is never mutated as a side effect.\n React.useEffect(() => {\n if (active.backend.kind !== \"cloud\" \|\| active.orgId) return;\n const { backend } = active;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return;\n\n const userId = currentUserIds[backend.id]?.userId ?? null;\n const personal = userId\n ? entry.orgs.find((o) => o.id === userId)\n : undefined;\n const target = personal ?? entry.orgs[0];\n if (target) {\n setActive(backend.id, target.id);\n }\n }, [active, cloudOrgs, currentUserIds, setActive]);\n\n const openAddBackendModal = React.useCallback(() => {\n if (onOpenAddBackend) {\n onOpenAddBackend();\n onSelectOption?.();\n return;\n }\n setAddBackendModalOpen(true);\n }, [onOpenAddBackend, onSelectOption]);\n\n const openManageBackendsModal = React.useCallback(() => {\n if (onOpenManageBackends) {\n onOpenManageBackends();\n onSelectOption?.();\n return;\n }\n setManageBackendsModalOpen(true);\n }, [onOpenManageBackends, onSelectOption]);\n\n const preventDropdownMenuClose = React.useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n },\n [],\n );\n\n const addBackendFooter = (\n <div className=\"flex flex-col\">\n <button\n type=\"button\"\n data-testid=\"add-backend-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onClick={openAddBackendModal}\n className=\"flex w-full items-center gap-2 px-2 py-2 rounded-md text-sm cursor-pointer text-white hover:bg-[var(--oh-interactive-hover)]\"\n >\n <Plus width={16} height={16} className=\"text-white shrink-0\" />\n {t(I18nKey.BACKEND$ADD)}\n </button>\n <button\n type=\"button\"\n data-testid=\"manage-backends-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onClick={openManageBackendsModal}\n className=\"flex w-full items-center gap-2 px-2 py-2 rounded-md text-sm cursor-pointer text-white hover:bg-[var(--oh-interactive-hover)]\"\n >\n <Settings width={16} height={16} className=\"text-white shrink-0\" />\n {t(I18nKey.BACKEND$MANAGE)}\n </button>\n </div>\n );\n\n const handleSelectBackend = React.useCallback(\n async (value: string) => {\n if (value === activeValue) return;\n\n const { backendId, orgId } = parseOptionValue(value);\n const target = backends.find((b) => b.id === backendId);\n if (!target) return;\n\n triggerEnvironmentSwitch(\n options.find((option) => option.value === value)?.label ?? target.name,\n );\n await new Promise<void>((resolve) => {\n setTimeout(resolve, ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS);\n });\n\n // @spec BM-002 — Switching backends keeps the user on the same page\n if (conversationMatch) navigate(\"/conversations\");\n else if (automationDetailMatch) navigate(\"/automations\");\n\n setActive(target.id, orgId);\n onSelectOption?.();\n },\n [\n activeValue,\n backends,\n conversationMatch,\n automationDetailMatch,\n navigate,\n options,\n setActive,\n t,\n onSelectOption,\n ],\n );\n\n return (\n <>\n <div className=\"flex items-center gap-2 w-full\">\n <div className=\"flex-1 min-w-0\">\n <Dropdown\n testId=\"backend-selector\"\n key={`${activeValue}-${activeOption?.label ?? \"\"}`}\n defaultValue={\n activeOption ?? {\n value: activeValue,\n label: active.backend.name,\n prefix: buildStatusPrefix(healthByBackendId[active.backend.id]),\n }\n }\n footer={addBackendFooter}\n openUpward={openUpward}\n hideTrigger={hideTrigger}\n defaultOpen={defaultOpen}\n openOnHover={!hideTrigger}\n onChange={(item) => {\n if (!item) return;\n void handleSelectBackend(item.value);\n }}\n placeholder={active.backend.name}\n loading={someCloudLoading}\n options={options}\n className=\"h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0\"\n />\n </div>\n {!hideTrigger ? (\n <StyledTooltip\n content={settingsLabel}\n placement={settingsTooltipPlacement}\n offset={10}\n >\n <button\n type=\"button\"\n data-testid=\"backend-selector-settings-link\"\n data-active={isSettingsActive}\n aria-label={settingsLabel}\n onClick={() => navigate(\"/settings\")}\n className={\n isSettingsActive\n ? cn(\n \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer\",\n formControlTransitionClassName,\n )\n : cn(\n \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer\",\n formControlTransitionClassName,\n )\n }\n >\n <Settings width={16} height={16} />\n </button>\n </StyledTooltip>\n ) : null}\n </div>\n {addBackendModalOpen ? (\n <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n ) : null}\n {manageBackendsModalOpen ? (\n <ManageBackendsModal\n onClose={() => setManageBackendsModalOpen(false)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"backend-selector.js","names":[],"sources":["../../../../src/components/features/backends/backend-selector.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useMatch, useNavigate } from \"react-router\";\nimport { Plus, Settings } from \"lucide-react\";\nimport { Dropdown } from \"#/ui/dropdown/dropdown\";\nimport { DropdownOption } from \"#/ui/dropdown/types\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport {\n useBackendsHealth,\n type BackendHealth,\n} from \"#/hooks/query/use-backends-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend } from \"#/api/backend-registry/types\";\n// Import the trigger helpers from the lightweight store, not the overlay\n// component, so the eagerly-mounted sidebar/backend-selector graph does not\n// pull in the overlay's render code (the overlay is lazy-loaded from\n// `routes/root-layout.tsx`).\nimport {\n ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS,\n triggerEnvironmentSwitch,\n} from \"#/components/features/backends/environment-switch-store\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { AddBackendModal } from \"./add-backend-modal\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { ManageBackendsModal } from \"./manage-backends-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlTransitionClassName } from \"#/utils/form-control-classes\";\n\nconst VALUE_SEPARATOR = \"::\";\n\nfunction makeOptionValue(backendId: string, orgId: string \| null): string {\n return orgId ? `${backendId}${VALUE_SEPARATOR}${orgId}` : backendId;\n}\n\nfunction parseOptionValue(value: string): {\n backendId: string;\n orgId: string \| null;\n} {\n const [backendId, orgId] = value.split(VALUE_SEPARATOR);\n return { backendId, orgId: orgId ?? null };\n}\n\nfunction buildStatusPrefix(health: BackendHealth \| undefined) {\n return <BackendStatusDot isConnected={health?.isConnected ?? null} />;\n}\n\nfunction buildOptions(\n registered: Backend[],\n personalWorkspaceLabel: string,\n cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n healthByBackendId: Record<string, BackendHealth>,\n): DropdownOption[] {\n const options: DropdownOption[] = [];\n\n const locals = registered.filter((b) => b.kind === \"local\");\n const clouds = registered.filter((b) => b.kind === \"cloud\");\n\n for (const b of locals) {\n options.push({\n value: makeOptionValue(b.id, null),\n label: b.name,\n prefix: buildStatusPrefix(healthByBackendId[b.id]),\n });\n }\n\n for (const b of clouds) {\n const entry = cloudOrgs[b.id];\n const prefix = buildStatusPrefix(healthByBackendId[b.id]);\n if (!entry \|\| entry.orgs.length === 0) {\n options.push({\n value: makeOptionValue(b.id, null),\n label: b.name,\n prefix,\n });\n } else {\n // Personal-workspace rule (per the cloud contract): the org whose\n // id matches the calling user's id is the user's personal\n // workspace. We resolve `user_id` once per backend (via /me on any\n // one org) and apply it across all orgs of that backend.\n const userIdForBackend = currentUserIds[b.id]?.userId ?? null;\n\n for (const org of entry.orgs) {\n const isPersonal = !!userIdForBackend && userIdForBackend === org.id;\n const orgLabel = isPersonal ? personalWorkspaceLabel : org.name;\n options.push({\n value: makeOptionValue(b.id, org.id),\n label: `${b.name} – ${orgLabel}`,\n // All org rows for the same cloud backend share that backend's\n // single connectivity verdict — there is no per-org probe.\n prefix,\n });\n }\n }\n }\n\n return options;\n}\n\ninterface BackendSelectorProps {\n /** Render the menu above the trigger (e.g. when pinned to bottom of sidebar). /\n openUpward?: boolean;\n /* Hide the selector input trigger and only render the dropdown menu. /\n hideTrigger?: boolean;\n /* Whether the dropdown menu should start open on mount. /\n defaultOpen?: boolean;\n /* Callback fired after selecting a backend/org option. /\n onSelectOption?: () => void;\n /\n Override the internal Add Backend modal handling. When provided,\n * clicking \"Add Backend\" calls this instead of opening BackendSelector's\n * own modal. Useful when the selector is mounted inside an ephemeral\n * container (e.g. the collapsed-sidebar popover) and the modal must\n * survive the parent unmounting.\n /\n onOpenAddBackend?: () => void;\n /* Same as onOpenAddBackend but for the Manage Backends modal. /\n onOpenManageBackends?: () => void;\n /\n Whether the surrounding sidebar rail is in its collapsed variant. Passed\n * down from `SidebarRailBody` so the mobile drawer (which always renders\n * the expanded rail) can override the persisted desktop value.\n /\n sidebarCollapsed?: boolean;\n}\n\nexport function BackendSelector({\n openUpward = false,\n hideTrigger = false,\n defaultOpen = false,\n onSelectOption,\n onOpenAddBackend,\n onOpenManageBackends,\n sidebarCollapsed = false,\n}: BackendSelectorProps = {}) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, setActive } = useActiveBackendContext();\n const cloudOrgs = useAllCloudOrganizations();\n const currentUserIds = useCloudCurrentUserId();\n // Probe each registered backend every 10s.\n const healthByBackendId = useBackendsHealth(backends);\n const navigate = useNavigate();\n const settingsMatch = useMatch(\"/settings\");\n const settingsSubrouteMatch = useMatch(\"/settings/\");\n const conversationMatch = useMatch(\"/conversations/:conversationId\");\n const automationDetailMatch = useMatch(\"/automations/:automationId\");\n const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n React.useState(false);\n\n const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n\n const options = React.useMemo(\n () =>\n buildOptions(\n backends,\n personalWorkspaceLabel,\n cloudOrgs,\n currentUserIds,\n healthByBackendId,\n ),\n [\n backends,\n personalWorkspaceLabel,\n cloudOrgs,\n currentUserIds,\n healthByBackendId,\n ],\n );\n\n const activeValue = makeOptionValue(active.backend.id, active.orgId);\n const activeOption = options.find((o) => o.value === activeValue);\n const isSettingsActive = Boolean(settingsMatch \|\| settingsSubrouteMatch);\n const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n const isRightPanelShown = useConversationStore(\n (state) => state.isRightPanelShown,\n );\n // When the sidebar rail is expanded, `placement=\"left\"` hugs the main\n // canvas and reads awkwardly; prefer above the control. When the rail is\n // collapsed, keep left except on active conversation + open right drawer.\n const settingsTooltipPlacement =\n !sidebarCollapsed \|\| (conversationMatch && isRightPanelShown)\n ? \"top\"\n : \"left\";\n\n const someCloudLoading = Object.values(cloudOrgs).some((c) => c.isLoading);\n\n // Self-heal a malformed `(cloudBackendId, null)` selection.\n //\n // Once a cloud backend's orgs resolve, the dropdown only renders\n // per-org rows for it — the `(backendId, null)` row disappears, so\n // selecting that shape would drift from what the dropdown can render\n // (UI says \"Local\", APIs hit cloud). When we detect the drift, snap\n // the selection onto the personal-workspace org (or, lacking a /me\n // result, the first org). The selection is recorded locally only;\n // the cloud request scope follows from the API key's bound org and the\n // X-Org-Id header sent by `callCloudProxy`, so the cloud UI's\n // org choice is never mutated as a side effect.\n React.useEffect(() => {\n if (active.backend.kind !== \"cloud\" \|\| active.orgId) return;\n const { backend } = active;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return;\n\n const userId = currentUserIds[backend.id]?.userId ?? null;\n const personal = userId\n ? entry.orgs.find((o) => o.id === userId)\n : undefined;\n const target = personal ?? entry.orgs[0];\n if (target) {\n setActive(backend.id, target.id);\n }\n }, [active, cloudOrgs, currentUserIds, setActive]);\n\n const openAddBackendModal = React.useCallback(() => {\n if (onOpenAddBackend) {\n onOpenAddBackend();\n onSelectOption?.();\n return;\n }\n setAddBackendModalOpen(true);\n }, [onOpenAddBackend, onSelectOption]);\n\n const openManageBackendsModal = React.useCallback(() => {\n if (onOpenManageBackends) {\n onOpenManageBackends();\n onSelectOption?.();\n return;\n }\n setManageBackendsModalOpen(true);\n }, [onOpenManageBackends, onSelectOption]);\n\n const preventDropdownMenuClose = React.useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n },\n [],\n );\n\n const addBackendFooter = (\n <div className=\"flex flex-col\">\n <button\n type=\"button\"\n data-testid=\"add-backend-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onClick={openAddBackendModal}\n className=\"flex w-full items-center gap-2 px-2 py-2 rounded-md text-sm cursor-pointer text-white hover:bg-[var(--oh-interactive-hover)]\"\n >\n <Plus width={16} height={16} className=\"text-white shrink-0\" />\n {t(I18nKey.BACKEND$ADD)}\n </button>\n <button\n type=\"button\"\n data-testid=\"manage-backends-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onClick={openManageBackendsModal}\n className=\"flex w-full items-center gap-2 px-2 py-2 rounded-md text-sm cursor-pointer text-white hover:bg-[var(--oh-interactive-hover)]\"\n >\n <Settings width={16} height={16} className=\"text-white shrink-0\" />\n {t(I18nKey.BACKEND$MANAGE)}\n </button>\n </div>\n );\n\n const handleSelectBackend = React.useCallback(\n async (value: string) => {\n if (value === activeValue) return;\n\n const { backendId, orgId } = parseOptionValue(value);\n const target = backends.find((b) => b.id === backendId);\n if (!target) return;\n\n triggerEnvironmentSwitch(\n options.find((option) => option.value === value)?.label ?? target.name,\n );\n await new Promise<void>((resolve) => {\n setTimeout(resolve, ENVIRONMENT_SWITCH_SETACTIVE_DELAY_MS);\n });\n\n // @spec BM-002 — Switching backends keeps the user on the same page\n if (conversationMatch) navigate(\"/conversations\");\n else if (automationDetailMatch) navigate(\"/automations\");\n\n setActive(target.id, orgId);\n onSelectOption?.();\n },\n [\n activeValue,\n backends,\n conversationMatch,\n automationDetailMatch,\n navigate,\n options,\n setActive,\n t,\n onSelectOption,\n ],\n );\n\n return (\n <>\n <div className=\"flex items-center gap-2 w-full\">\n <div className=\"flex-1 min-w-0\">\n <Dropdown\n testId=\"backend-selector\"\n key={`${activeValue}-${activeOption?.label ?? \"\"}`}\n defaultValue={\n activeOption ?? {\n value: activeValue,\n label: active.backend.name,\n prefix: buildStatusPrefix(healthByBackendId[active.backend.id]),\n }\n }\n footer={addBackendFooter}\n openUpward={openUpward}\n hideTrigger={hideTrigger}\n defaultOpen={defaultOpen}\n openOnHover={!hideTrigger}\n onChange={(item) => {\n if (!item) return;\n void handleSelectBackend(item.value);\n }}\n placeholder={active.backend.name}\n loading={someCloudLoading}\n options={options}\n className=\"h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0\"\n />\n </div>\n {!hideTrigger ? (\n <StyledTooltip\n content={settingsLabel}\n placement={settingsTooltipPlacement}\n offset={10}\n >\n <NavigationLink\n to=\"/settings\"\n data-testid=\"backend-selector-settings-link\"\n data-active={isSettingsActive}\n aria-label={settingsLabel}\n className={\n isSettingsActive\n ? cn(\n \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer\",\n formControlTransitionClassName,\n )\n : cn(\n \"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer\",\n formControlTransitionClassName,\n )\n }\n >\n <Settings width={16} height={16} />\n </NavigationLink>\n </StyledTooltip>\n ) : null}\n </div>\n {addBackendModalOpen ? (\n <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n ) : null}\n {manageBackendsModalOpen ? (\n <ManageBackendsModal\n onClose={() => setManageBackendsModalOpen(false)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/chat-input-actions.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(`../../../../types/agent-state.cjs`),i=require(`../../../../utils/utils.cjs`),a=require(`../../../../hooks/use-conversation-id.cjs`),o=require(`../../../../stores/conversation-store.cjs`),s=require(`../../../../contexts/active-backend-context.cjs`),c=require(`../../../../node_modules/lucide-react/dist/esm/icons/cpu.cjs`),ee=require(`../../../../constants/acp-providers.cjs`),te=require(`../../../../hooks/query/use-active-conversation.cjs`),ne=require(`../../../../hooks/use-agent-state.cjs`);require(`../../../../utils/form-control-classes.cjs`);const re=require(`../../../../hooks/use-unified-websocket-status.cjs`),l=require(`../../controls/agent-status.cjs`),ie=require(`../../../../icons/lesson-plan.cjs`),u=require(`../../../../icons/code-pill.cjs`),d=require(`../../../../ui/context-menu.cjs`),f=require(`../../context-menu/context-menu-list-item.cjs`),ae=require(`../../../../hooks/use-click-outside-element.cjs`),oe=require(`../../../../hooks/use-handle-plan-click.cjs`),se=require(`../change-agent-button.cjs`),ce=require(`../../../../hooks/use-acp-model-context.cjs`),le=require(`../../../../icons/settings-gear.cjs`),p=require(`../../../shared/navigation-link.cjs`),ue=require(`../../../../ui/divider.cjs`),de=require(`./chat-input-model.cjs`),fe=require(`../switch-profile-button.cjs`),pe=require(`../../../../hooks/mutation/use-unified-stop-conversation.cjs`),m=require(`../../../../icons/carret-right-fill.cjs`),h=require(`../../controls/tools-context-menu-icon-text.cjs`),me=require(`../chat-add-file-button.cjs`),he=require(`../chat-send-button.cjs`),ge=require(`../../../../icons/three-dots-vertical.cjs`),_e=require(`../../../../hooks/mutation/use-pause-conversation.cjs`),g=require(`../../../../hooks/mutation/use-resume-conversation.cjs`);let _=require(`react`);_=e.__toESM(_,1);let v=require(`react/jsx-runtime`),y=require(`react-dom`);y=e.__toESM(y,1);function b({disabled:e,canSubmit:b=!0,onAddFileClick:ve=()=>{},showButton:ye=!0,buttonClassName:be=``,handleSubmit:xe=()=>{}}){let{t:x}=t.useTranslation(`openhands`),Se=pe.useUnifiedPauseConversation(),S=_e.usePauseConversation(),Ce=g.useResumeConversation(),{conversationId:C}=a.useOptionalConversationId(),{data:w}=te.useActiveConversation(),{backend:T}=s.useActiveBackend(),E=T.kind===`cloud`,{isAcpContext:D,destinationPath:O,destinationLabel:k}=ce.useAcpModelContext(),A=D?ee.labelForAcpModel(w?.acp_server,w?.llm_model)??w?.llm_model:w?.llm_model,we=re.useUnifiedWebSocketStatus(),{curAgentState:Te}=ne.useAgentState(),{conversationMode:Ee,setConversationMode:De}=o.useConversationStore(),{handlePlanClick:Oe,isCreatingConversation:ke}=oe.useHandlePlanClick(),j=_.default.useRef(null),M=_.default.useRef(null),N=_.default.useRef(null),P=_.default.useRef(null),F=_.default.useRef(null),I=_.default.useRef(null),[L,Ae]=_.default.useState(1/0),[je,Me]=_.default.useState(0),[Ne,Pe]=_.default.useState(32),[R,Fe]=_.default.useState(96),[z,Ie]=_.default.useState(120),[B,V]=_.default.useState(!1),[H,U]=_.default.useState(null),[W,Le]=_.default.useState();_.default.useEffect(()=>{let e=j.current,t=M.current,n=N.current,r=P.current,i=F.current;if(!e||!t||!n||!i||E&&!r||typeof ResizeObserver>`u`)return;let a=()=>{let a=e.getBoundingClientRect().width,o=t.getBoundingClientRect().width,s=n.getBoundingClientRect().width,c=i.getBoundingClientRect().width;if(a>0&&Ae(a),o>0&&Me(o),s>0&&Pe(s),c>0&&Ie(c),r){let e=r.getBoundingClientRect().width;e>0&&Fe(e)}},o=new ResizeObserver(()=>{a()});return o.observe(e),o.observe(t),o.observe(n),o.observe(i),r&&o.observe(r),a(),()=>o.disconnect()},[E]);let Re=()=>{C&&S.mutate({conversationId:C})},ze=()=>{C&&Ce.mutate({conversationId:C})},Be=Se.isPending||S.isPending,G=_.default.useCallback(e=>{let t=e,n={showCodeInline:!1,showModelInline:!1};return E&&t>=R&&(n.showCodeInline=!0,t-=R+12),t>=z&&(n.showModelInline=!0),n},[E,R,z]),K=L-je-8-Ne-12,q=G(K),J=(!E||q.showCodeInline)&&q.showModelInline?q:G(K-28-12),Y=E?J.showCodeInline:!1,X=J.showModelInline,Ve=L>=360,Z=E&&!Y||!X;_.default.useEffect(()=>{Z||(V(!1),U(null))},[Z]);let He=ae.useClickOutsideElement(()=>{V(!1),U(null)}),Q=Te===r.AgentState.RUNNING||ke||we!==`OPEN`,$=()=>{U(null),V(!1)};_.default.useLayoutEffect(()=>{if(!B||!I.current)return;let e=I.current,t=()=>{let t=e.getBoundingClientRect();Le({position:`fixed`,top:t.top-8,left:t.left,transform:`translateY(-100%)`,zIndex:9999})};return t(),window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0)}},[B]);let Ue=(0,v.jsxs)(d.ContextMenu,{ref:He,testId:`chat-input-overflow-menu`,position:`top`,alignment:`left`,className:`!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]`,children:[E&&!Y&&(0,v.jsxs)(`div`,{className:`relative group/overflow-agent`,children:[(0,v.jsx)(f.ContextMenuListItem,{testId:`overflow-agent-button`,onClick:()=>U(e=>e===`agent`?null:`agent`),isDisabled:Q,children:(0,v.jsx)(h.ToolsContextMenuIconText,{icon:(0,v.jsx)(u.CodePillIcon,{className:`h-[11px] w-[11px]`}),text:x(Ee===`code`?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),rightIcon:(0,v.jsx)(m.default,{width:10,height:10})})}),!Q&&(0,v.jsx)(`div`,{className:i.cn(`absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]`,`group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto`,`hover:opacity-100 hover:visible hover:pointer-events-auto`,H===`agent`&&`opacity-100 visible pointer-events-auto`),children:(0,v.jsxs)(d.ContextMenu,{testId:`overflow-agent-submenu`,className:`overflow-visible min-w-[195px] gap-0`,children:[(0,v.jsx)(f.ContextMenuListItem,{testId:`overflow-agent-code`,onClick:e=>{e.preventDefault(),e.stopPropagation(),De(`code`),$()},children:(0,v.jsx)(h.ToolsContextMenuIconText,{icon:(0,v.jsx)(u.CodePillIcon,{className:`h-[11px] w-[11px]`}),text:x(n.I18nKey.COMMON$CODE)})}),(0,v.jsx)(f.ContextMenuListItem,{testId:`overflow-agent-plan`,onClick:e=>{Oe(e),$()},children:(0,v.jsx)(h.ToolsContextMenuIconText,{icon:(0,v.jsx)(ie.default,{width:16,height:16,color:`currentColor`}),text:x(n.I18nKey.COMMON$PLAN)})})]})})]}),!X&&(0,v.jsxs)(`div`,{className:`relative group/overflow-model`,children:[(0,v.jsx)(f.ContextMenuListItem,{testId:`overflow-model-button`,onClick:()=>U(e=>e===`model`?null:`model`),children:(0,v.jsx)(h.ToolsContextMenuIconText,{icon:(0,v.jsx)(c.Cpu,{width:16,height:16,strokeWidth:2,"aria-hidden":!0}),text:`Model`,rightIcon:(0,v.jsx)(m.default,{width:10,height:10})})}),(0,v.jsx)(`div`,{className:i.cn(`absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]`,`group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto`,`hover:opacity-100 hover:visible hover:pointer-events-auto`,H===`model`&&`opacity-100 visible pointer-events-auto`),children:(0,v.jsxs)(d.ContextMenu,{testId:`overflow-model-submenu`,className:`overflow-visible min-w-[220px] max-w-[320px] gap-0`,children:[(0,v.jsx)(`li`,{className:`text-sm`,children:(0,v.jsx)(`div`,{className:`p-2 leading-5 text-[var(--oh-foreground)] break-all`,children:A})}),(0,v.jsx)(ue.Divider,{inset:`menu`}),(0,v.jsx)(`li`,{className:`text-sm`,children:(0,v.jsxs)(p.NavigationLink,{to:O,onClick:$,className:i.cn(`group flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`),children:[(0,v.jsx)(le.default,{width:16,height:16,className:i.cn(`shrink-0 text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`),"aria-hidden":!0}),(0,v.jsx)(`span`,{children:k})]})})]})})]})]});return(0,v.jsxs)(`div`,{ref:j,className:`w-full min-w-0 flex items-center justify-between gap-2`,children:[(0,v.jsx)(`div`,{className:`flex min-w-0 items-center gap-1`,children:(0,v.jsxs)(`div`,{className:`flex min-w-0 items-center gap-3`,children:[(0,v.jsx)(`div`,{ref:N,className:i.cn(!1),children:(0,v.jsx)(me.ChatAddFileButton,{disabled:e,handleFileIconClick:ve})}),E&&(0,v.jsx)(`div`,{ref:P,className:i.cn(!Y&&`hidden`),children:(0,v.jsx)(se.ChangeAgentButton,{})}),(0,v.jsx)(`div`,{ref:F,className:i.cn(!X&&`hidden`),children:E||D?(0,v.jsx)(de.ChatInputModel,{}):(0,v.jsx)(fe.SwitchProfileButton,{})}),Z&&(0,v.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,v.jsx)(`button`,{ref:I,type:`button`,className:i.cn(`flex size-6 items-center justify-center rounded-full text-[var(--oh-muted)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`,`hover:bg-white/10 hover:text-white cursor-pointer`),"aria-label":`More input actions`,"aria-expanded":B,"aria-haspopup":`menu`,onClick:e=>{e.preventDefault(),e.stopPropagation(),V(e=>!e)},children:(0,v.jsx)(ge.default,{width:16,height:16,color:`currentColor`})}),B&&typeof document<`u`&&W&&y.default.createPortal((0,v.jsx)(`div`,{style:W,children:Ue}),document.body)]})]})}),(0,v.jsxs)(`div`,{ref:M,className:`ml-auto flex shrink-0 items-center gap-2`,children:[Ve&&C&&(0,v.jsx)(l.default,{handleStop:Re,handleResumeAgent:ze,disabled:e,isPausing:Be}),ye&&(0,v.jsx)(he.ChatSendButton,{buttonClassName:be,handleSubmit:xe,disabled:e||!b})]})]})}exports.ChatInputActions=b;
+const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../../i18n/declaration.cjs`),r=require(`../../../../types/agent-state.cjs`),i=require(`../../../../utils/utils.cjs`),a=require(`../../../../hooks/use-conversation-id.cjs`),o=require(`../../../../stores/conversation-store.cjs`),s=require(`../../../../contexts/active-backend-context.cjs`),c=require(`../../../../node_modules/lucide-react/dist/esm/icons/cpu.cjs`),ee=require(`../../../../constants/acp-providers.cjs`),te=require(`../../../../hooks/query/use-active-conversation.cjs`),ne=require(`../../../../hooks/use-agent-state.cjs`);require(`../../../../utils/form-control-classes.cjs`);const re=require(`../../../../hooks/use-unified-websocket-status.cjs`),ie=require(`../../controls/agent-status.cjs`),ae=require(`../../../../icons/lesson-plan.cjs`),l=require(`../../../../icons/code-pill.cjs`),u=require(`../../../../ui/context-menu.cjs`),d=require(`../../context-menu/context-menu-list-item.cjs`),oe=require(`../../../../hooks/use-click-outside-element.cjs`),se=require(`../../../../hooks/use-handle-plan-click.cjs`),ce=require(`../change-agent-button.cjs`),le=require(`../../../../hooks/use-acp-model-context.cjs`),ue=require(`../../../../icons/settings-gear.cjs`),de=require(`../../../shared/navigation-link.cjs`),fe=require(`../../../../ui/divider.cjs`),pe=require(`./chat-input-model.cjs`),f=require(`../switch-profile-button.cjs`),p=require(`../../../../hooks/mutation/use-unified-stop-conversation.cjs`),m=require(`../../../../icons/carret-right-fill.cjs`),h=require(`../../controls/tools-context-menu-icon-text.cjs`),me=require(`../chat-add-file-button.cjs`),he=require(`../chat-send-button.cjs`),ge=require(`../../../../icons/three-dots-vertical.cjs`),_e=require(`../../../../hooks/mutation/use-pause-conversation.cjs`),ve=require(`../../../../hooks/mutation/use-resume-conversation.cjs`);let g=require(`react`);g=e.__toESM(g,1);let _=require(`react/jsx-runtime`),v=require(`react-dom`);v=e.__toESM(v,1);function y({disabled:e,canSubmit:y=!0,onAddFileClick:ye=()=>{},showButton:be=!0,buttonClassName:xe=``,handleSubmit:Se=()=>{}}){let{t:b}=t.useTranslation(`openhands`),Ce=p.useUnifiedPauseConversation(),x=_e.usePauseConversation(),we=ve.useResumeConversation(),{conversationId:S}=a.useOptionalConversationId(),{data:C}=te.useActiveConversation(),{backend:Te}=s.useActiveBackend(),w=Te.kind===`cloud`,{isAcpContext:T,destinationPath:E,destinationLabel:D}=le.useAcpModelContext(),O=T?ee.labelForAcpModel(C?.acp_server,C?.llm_model)??C?.llm_model:C?.llm_model,k=w&&!!S,Ee=re.useUnifiedWebSocketStatus(),{curAgentState:A}=ne.useAgentState(),{conversationMode:De,setConversationMode:Oe}=o.useConversationStore(),{handlePlanClick:ke,isCreatingConversation:Ae}=se.useHandlePlanClick(),j=g.default.useRef(null),M=g.default.useRef(null),N=g.default.useRef(null),P=g.default.useRef(null),F=g.default.useRef(null),I=g.default.useRef(null),[L,je]=g.default.useState(1/0),[Me,Ne]=g.default.useState(0),[Pe,Fe]=g.default.useState(32),[R,Ie]=g.default.useState(96),[z,Le]=g.default.useState(120),[B,V]=g.default.useState(!1),[H,U]=g.default.useState(null),[W,Re]=g.default.useState();g.default.useEffect(()=>{let e=j.current,t=M.current,n=N.current,r=P.current,i=F.current;if(!e||!t||!n||!i||k&&!r||typeof ResizeObserver>`u`)return;let a=()=>{let a=e.getBoundingClientRect().width,o=t.getBoundingClientRect().width,s=n.getBoundingClientRect().width,c=i.getBoundingClientRect().width;if(a>0&&je(a),o>0&&Ne(o),s>0&&Fe(s),c>0&&Le(c),r){let e=r.getBoundingClientRect().width;e>0&&Ie(e)}},o=new ResizeObserver(()=>{a()});return o.observe(e),o.observe(t),o.observe(n),o.observe(i),r&&o.observe(r),a(),()=>o.disconnect()},[k]);let ze=()=>{S&&x.mutate({conversationId:S})},Be=()=>{S&&we.mutate({conversationId:S})},Ve=Ce.isPending||x.isPending,G=g.default.useCallback(e=>{let t=e,n={showCodeInline:!1,showModelInline:!1};return k&&t>=R&&(n.showCodeInline=!0,t-=R+12),t>=z&&(n.showModelInline=!0),n},[k,R,z]),K=L-Me-8-Pe-12,q=G(K),J=(!k||q.showCodeInline)&&q.showModelInline?q:G(K-28-12),Y=k?J.showCodeInline:!1,X=J.showModelInline,He=L>=360,Z=k&&!Y||!X;g.default.useEffect(()=>{Z||(V(!1),U(null))},[Z]);let Ue=oe.useClickOutsideElement(()=>{V(!1),U(null)}),Q=A===r.AgentState.RUNNING||Ae||Ee!==`OPEN`,$=()=>{U(null),V(!1)};g.default.useLayoutEffect(()=>{if(!B||!I.current)return;let e=I.current,t=()=>{let t=e.getBoundingClientRect();Re({position:`fixed`,top:t.top-8,left:t.left,transform:`translateY(-100%)`,zIndex:9999})};return t(),window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0)}},[B]);let We=(0,_.jsxs)(u.ContextMenu,{ref:Ue,testId:`chat-input-overflow-menu`,position:`top`,alignment:`left`,className:`!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]`,children:[k&&!Y&&(0,_.jsxs)(`div`,{className:`relative group/overflow-agent`,children:[(0,_.jsx)(d.ContextMenuListItem,{testId:`overflow-agent-button`,onClick:()=>U(e=>e===`agent`?null:`agent`),isDisabled:Q,children:(0,_.jsx)(h.ToolsContextMenuIconText,{icon:(0,_.jsx)(l.CodePillIcon,{className:`h-[11px] w-[11px]`}),text:b(De===`code`?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),rightIcon:(0,_.jsx)(m.default,{width:10,height:10})})}),!Q&&(0,_.jsx)(`div`,{className:i.cn(`absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]`,`group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto`,`hover:opacity-100 hover:visible hover:pointer-events-auto`,H===`agent`&&`opacity-100 visible pointer-events-auto`),children:(0,_.jsxs)(u.ContextMenu,{testId:`overflow-agent-submenu`,className:`overflow-visible min-w-[195px] gap-0`,children:[(0,_.jsx)(d.ContextMenuListItem,{testId:`overflow-agent-code`,onClick:e=>{e.preventDefault(),e.stopPropagation(),Oe(`code`),$()},children:(0,_.jsx)(h.ToolsContextMenuIconText,{icon:(0,_.jsx)(l.CodePillIcon,{className:`h-[11px] w-[11px]`}),text:b(n.I18nKey.COMMON$CODE)})}),(0,_.jsx)(d.ContextMenuListItem,{testId:`overflow-agent-plan`,onClick:e=>{ke(e),$()},children:(0,_.jsx)(h.ToolsContextMenuIconText,{icon:(0,_.jsx)(ae.default,{width:16,height:16,color:`currentColor`}),text:b(n.I18nKey.COMMON$PLAN)})})]})})]}),!X&&(0,_.jsxs)(`div`,{className:`relative group/overflow-model`,children:[(0,_.jsx)(d.ContextMenuListItem,{testId:`overflow-model-button`,onClick:()=>U(e=>e===`model`?null:`model`),children:(0,_.jsx)(h.ToolsContextMenuIconText,{icon:(0,_.jsx)(c.Cpu,{width:16,height:16,strokeWidth:2,"aria-hidden":!0}),text:`Model`,rightIcon:(0,_.jsx)(m.default,{width:10,height:10})})}),(0,_.jsx)(`div`,{className:i.cn(`absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]`,`group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto`,`hover:opacity-100 hover:visible hover:pointer-events-auto`,H===`model`&&`opacity-100 visible pointer-events-auto`),children:(0,_.jsxs)(u.ContextMenu,{testId:`overflow-model-submenu`,className:`overflow-visible min-w-[220px] max-w-[320px] gap-0`,children:[(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsx)(`div`,{className:`p-2 leading-5 text-[var(--oh-foreground)] break-all`,children:O})}),(0,_.jsx)(fe.Divider,{inset:`menu`}),(0,_.jsx)(`li`,{className:`text-sm`,children:(0,_.jsxs)(de.NavigationLink,{to:E,onClick:$,className:i.cn(`group flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`),children:[(0,_.jsx)(ue.default,{width:16,height:16,className:i.cn(`shrink-0 text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`),"aria-hidden":!0}),(0,_.jsx)(`span`,{children:D})]})})]})})]})]});return(0,_.jsxs)(`div`,{ref:j,className:`w-full min-w-0 flex items-center justify-between gap-2`,children:[(0,_.jsx)(`div`,{className:`flex min-w-0 items-center gap-1`,children:(0,_.jsxs)(`div`,{className:`flex min-w-0 items-center gap-3`,children:[(0,_.jsx)(`div`,{ref:N,className:i.cn(!1),children:(0,_.jsx)(me.ChatAddFileButton,{disabled:e,handleFileIconClick:ye})}),k&&(0,_.jsx)(`div`,{ref:P,className:i.cn(!Y&&`hidden`),children:(0,_.jsx)(ce.ChangeAgentButton,{})}),(0,_.jsx)(`div`,{ref:F,className:i.cn(!X&&`hidden`),children:w||T?(0,_.jsx)(pe.ChatInputModel,{}):(0,_.jsx)(f.SwitchProfileButton,{})}),Z&&(0,_.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,_.jsx)(`button`,{ref:I,type:`button`,className:i.cn(`flex size-6 items-center justify-center rounded-full text-[var(--oh-muted)]`,`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`,`hover:bg-white/10 hover:text-white cursor-pointer`),"aria-label":`More input actions`,"aria-expanded":B,"aria-haspopup":`menu`,onClick:e=>{e.preventDefault(),e.stopPropagation(),V(e=>!e)},children:(0,_.jsx)(ge.default,{width:16,height:16,color:`currentColor`})}),B&&typeof document<`u`&&W&&v.default.createPortal((0,_.jsx)(`div`,{style:W,children:We}),document.body)]})]})}),(0,_.jsxs)(`div`,{ref:M,className:`ml-auto flex shrink-0 items-center gap-2`,children:[He&&S&&(0,_.jsx)(ie.default,{handleStop:ze,handleResumeAgent:Be,disabled:e,isPausing:Ve}),be&&(0,_.jsx)(he.ChatSendButton,{buttonClassName:xe,handleSubmit:Se,disabled:e||!y})]})]})}exports.ChatInputActions=y;
 //# sourceMappingURL=chat-input-actions.cjs.map