npm - @openhands/agent-canvas - Versions diffs - 1.16.0 → 1.18.0 - Mend

@openhands/agent-canvas 1.16.0 → 1.18.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 (1093) hide show

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 { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\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\";\nimport {\n dropdownFooterActionClassName,\n dropdownMenuListClassName,\n dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-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 buildNoBackendPrefix() {\n return <BackendStatusDot isConnected=\"unavailable\" />;\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 noBackendSelected = isNoBackend(active.backend);\n const noBackendLabel = t(I18nKey.BACKEND$NO_BACKEND_AVAILABLE);\n const activeValue = makeOptionValue(active.backend.id, active.orgId);\n const activeOption = noBackendSelected\n ? undefined\n : 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 Cloud's current org first, then fall back to the\n // personal workspace (or, lacking a /me result, the first org). The\n // selection is recorded locally only; the cloud request scope follows\n // from the 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 (noBackendSelected \|\| active.backend.kind !== \"cloud\" \|\| active.orgId)\n return;\n const { backend } = active;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return;\n\n const currentOrg = entry.currentOrgId\n ? entry.orgs.find((o) => o.id === entry.currentOrgId)\n : undefined;\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 = currentOrg ?? personal ?? entry.orgs[0];\n if (target) {\n setActive(backend.id, target.id);\n }\n }, [active, cloudOrgs, currentUserIds, setActive, noBackendSelected]);\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 isLockedToCloud = getLockedCloudHost() !== null;\n\n const preventDropdownMenuClose = React.useCallback(\n (event: React.SyntheticEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n },\n [],\n );\n\n const handleAddBackendClick = React.useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n preventDropdownMenuClose(event);\n openAddBackendModal();\n },\n [openAddBackendModal, preventDropdownMenuClose],\n );\n\n const handleAddBackendTouchEnd = React.useCallback(\n (event: React.TouchEvent<HTMLButtonElement>) => {\n preventDropdownMenuClose(event);\n openAddBackendModal();\n },\n [openAddBackendModal, preventDropdownMenuClose],\n );\n\n const handleManageBackendsClick = React.useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n preventDropdownMenuClose(event);\n openManageBackendsModal();\n },\n [openManageBackendsModal, preventDropdownMenuClose],\n );\n\n const handleManageBackendsTouchEnd = React.useCallback(\n (event: React.TouchEvent<HTMLButtonElement>) => {\n preventDropdownMenuClose(event);\n openManageBackendsModal();\n },\n [openManageBackendsModal, preventDropdownMenuClose],\n );\n\n const addBackendFooter = (\n <div className={dropdownMenuListClassName}>\n {isLockedToCloud ? null : (\n <button\n type=\"button\"\n data-testid=\"add-backend-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onTouchStart={preventDropdownMenuClose}\n onTouchEnd={handleAddBackendTouchEnd}\n onClick={handleAddBackendClick}\n className={cn(\n dropdownFooterActionClassName,\n \"cursor-pointer rounded-md\",\n )}\n >\n <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n <Plus width={16} height={16} />\n </span>\n {t(I18nKey.BACKEND$ADD)}\n </button>\n )}\n <button\n type=\"button\"\n data-testid=\"manage-backends-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onTouchStart={preventDropdownMenuClose}\n onTouchEnd={handleManageBackendsTouchEnd}\n onClick={handleManageBackendsClick}\n className={cn(\n dropdownFooterActionClassName,\n \"cursor-pointer rounded-md\",\n )}\n >\n <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n <Settings width={16} height={16} />\n </span>\n {t(\n isLockedToCloud\n ? I18nKey.BACKEND$RECONNECT_CLOUD\n : I18nKey.BACKEND$MANAGE,\n )}\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: noBackendSelected ? noBackendLabel : active.backend.name,\n prefix: noBackendSelected\n ? buildNoBackendPrefix()\n : 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={\n noBackendSelected ? noBackendLabel : active.backend.name\n }\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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"}
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 { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\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\";\nimport {\n dropdownFooterActionClassName,\n dropdownMenuListClassName,\n dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-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 buildNoBackendPrefix() {\n return <BackendStatusDot isConnected=\"unavailable\" />;\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 noBackendSelected = isNoBackend(active.backend);\n const noBackendLabel = t(I18nKey.BACKEND$NO_BACKEND_AVAILABLE);\n const activeValue = makeOptionValue(active.backend.id, active.orgId);\n const activeOption = noBackendSelected\n ? undefined\n : options.find((o) => o.value === activeValue);\n const isSettingsActive = Boolean(settingsMatch \|\| settingsSubrouteMatch);\n const settingsLabel = t(I18nKey.SIDEBAR$SETTINGS);\n // `org` is consumed by the cloud settings loader so the page opens on the\n // org that is active here instead of the cloud's last-used org.\n const cloudSettingsOrgQuery = active.orgId\n ? `?org=${encodeURIComponent(active.orgId)}`\n : \"\";\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 Cloud's current org first, then fall back to the\n // personal workspace (or, lacking a /me result, the first org). The\n // selection is recorded locally only; the cloud request scope follows\n // from the 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 (noBackendSelected \|\| active.backend.kind !== \"cloud\" \|\| active.orgId)\n return;\n const { backend } = active;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return;\n\n const currentOrg = entry.currentOrgId\n ? entry.orgs.find((o) => o.id === entry.currentOrgId)\n : undefined;\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 = currentOrg ?? personal ?? entry.orgs[0];\n if (target) {\n setActive(backend.id, target.id);\n }\n }, [active, cloudOrgs, currentUserIds, setActive, noBackendSelected]);\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 isLockedToCloud = getLockedCloudHost() !== null;\n // A cookie-auth (OHE-hosted) Canvas has nothing to add, manage, or\n // reconnect — its single locked backend is owned by the main-app session.\n const hideBackendFooter =\n isLockedToCloud && active.backend.authMode === \"cookie\";\n\n const preventDropdownMenuClose = React.useCallback(\n (event: React.SyntheticEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n },\n [],\n );\n\n const handleAddBackendClick = React.useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n preventDropdownMenuClose(event);\n openAddBackendModal();\n },\n [openAddBackendModal, preventDropdownMenuClose],\n );\n\n const handleAddBackendTouchEnd = React.useCallback(\n (event: React.TouchEvent<HTMLButtonElement>) => {\n preventDropdownMenuClose(event);\n openAddBackendModal();\n },\n [openAddBackendModal, preventDropdownMenuClose],\n );\n\n const handleManageBackendsClick = React.useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n preventDropdownMenuClose(event);\n openManageBackendsModal();\n },\n [openManageBackendsModal, preventDropdownMenuClose],\n );\n\n const handleManageBackendsTouchEnd = React.useCallback(\n (event: React.TouchEvent<HTMLButtonElement>) => {\n preventDropdownMenuClose(event);\n openManageBackendsModal();\n },\n [openManageBackendsModal, preventDropdownMenuClose],\n );\n\n const addBackendFooter = hideBackendFooter ? undefined : (\n <div className={dropdownMenuListClassName}>\n {isLockedToCloud ? null : (\n <button\n type=\"button\"\n data-testid=\"add-backend-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onTouchStart={preventDropdownMenuClose}\n onTouchEnd={handleAddBackendTouchEnd}\n onClick={handleAddBackendClick}\n className={cn(\n dropdownFooterActionClassName,\n \"cursor-pointer rounded-md\",\n )}\n >\n <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n <Plus width={16} height={16} />\n </span>\n {t(I18nKey.BACKEND$ADD)}\n </button>\n )}\n <button\n type=\"button\"\n data-testid=\"manage-backends-menu-item\"\n onMouseDown={preventDropdownMenuClose}\n onTouchStart={preventDropdownMenuClose}\n onTouchEnd={handleManageBackendsTouchEnd}\n onClick={handleManageBackendsClick}\n className={cn(\n dropdownFooterActionClassName,\n \"cursor-pointer rounded-md\",\n )}\n >\n <span className={dropdownMenuRowIconWrapperClassName} aria-hidden>\n <Settings width={16} height={16} />\n </span>\n {t(\n isLockedToCloud\n ? I18nKey.BACKEND$RECONNECT_CLOUD\n : I18nKey.BACKEND$MANAGE,\n )}\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: noBackendSelected ? noBackendLabel : active.backend.name,\n prefix: noBackendSelected\n ? buildNoBackendPrefix()\n : 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={\n noBackendSelected ? noBackendLabel : active.backend.name\n }\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 {active.backend.kind === \"cloud\" ? (\n <a\n href={`${active.backend.host.replace(/\\/+$/, \"\")}/settings${cloudSettingsOrgQuery}`}\n target={isLockedToCloud ? undefined : \"_blank\"}\n rel={isLockedToCloud ? undefined : \"noopener noreferrer\"}\n data-testid=\"backend-selector-settings-link\"\n aria-label={settingsLabel}\n className={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 <Settings width={16} height={16} />\n </a>\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 )}\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/manage-backends-modal.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("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../api/agent-server-config.cjs"),o=require("../../../contexts/active-backend-context.cjs"),s=require("../../shared/modals/modal-backdrop.cjs"),c=require("../../shared/modals/modal-body.cjs"),l=require("../../../utils/modal-classes.cjs"),u=require("../../shared/modals/modal-close-button.cjs"),d=require("../settings/brand-button.cjs"),f=require("../../shared/modals/confirmation-modal.cjs"),p=require("../../../hooks/query/use-cloud-organizations.cjs"),m=require("../../../hooks/query/use-cloud-current-user-id.cjs"),h=require("../../../hooks/query/use-backends-health.cjs"),g=require("./device-flow-auth.cjs"),_=require("./backend-form-modal.cjs"),v=require("./backend-row.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");function x(e,t,n,r){if(e.kind!==`cloud`)return;let i=t[e.id];if(!i||i.orgs.length===0)return;let a=n[e.id]?.userId??null;return i.orgs.map(e=>a&&a===e.id?r:e.name).join(`, `)}function S({onClose:e,recoveryMode:S=!1}){let{t:C}=t.useTranslation(`openhands`),{backends:w,active:T,removeBackend:E,setActive:D,updateBackend:O}=o.useActiveBackendContext(),k=h.useBackendsHealth(w,{probeDisabledOnce:!0}),A=p.useAllCloudOrganizations(),j=m.useCloudCurrentUserId(),M=C(n.I18nKey.BACKEND$PERSONAL_WORKSPACE),N=a.getLockedCloudHost(),P=N!==null,F=P&&T.backend.kind===`cloud`?T.backend:null,I=N??F?.host??``,L=C(P?n.I18nKey.BACKEND$RECONNECT_CLOUD_TITLE:n.I18nKey.BACKEND$MANAGE_TITLE),[R,z]=y.default.useState(null),[B,V]=y.default.useState(null),[H,U]=y.default.useState(!1),W=()=>{R&&(E(R.id),z(null))},G=y.default.useCallback(t=>{(T.backend.id!==t.id||T.orgId!==null)&&D(t.id),e()},[T.backend.id,T.orgId,e,D]),K=y.default.useCallback((e,t)=>{O(e.id,{apiKey:t})},[O]),q=y.default.useCallback(e=>{F&&O(F.id,{apiKey:e})},[F,O]);return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s.ModalBackdrop,{onClose:S?void 0:e,closeOnEscape:!S,closeOnBackdropClick:!S,"aria-label":L,children:(0,b.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:i.cn(`relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl`,c.modalWidthClassName(`lg`),c.MODAL_MAX_WIDTH_VIEWPORT,`max-h-[70vh]`),children:[S?null:(0,b.jsx)(u.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,b.jsx)(`div`,{className:i.cn(`p-5`,!S&&`pr-12`),children:(0,b.jsx)(`h2`,{className:l.modalTitleLgClassName,children:L})}),(0,b.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col px-5`,children:(0,b.jsx)(`div`,{className:`flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,"data-testid":`manage-backends-list`,children:w.length===0?(0,b.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:C(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,b.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:w.map(e=>(0,b.jsx)(v.BackendRow,{backend:e,health:k[e.id],orgLabel:x(e,A,j,M),onSelect:()=>G(e),onEdit:()=>V(e),onRemove:()=>z({id:e.id,name:e.name}),onLogin:t=>K(e,t)},e.id))})})}),(0,b.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[P?F?(0,b.jsx)(g.DeviceFlowAuth,{host:I,onSuccess:q,testIdRoot:`manage-backends-reconnect-cloud`,idleButtonLabel:C(n.I18nKey.BACKEND$RECONNECT_CLOUD),className:`w-full sm:w-auto`,buttonClassName:`w-full sm:w-auto`,statusDisplay:`modal`}):null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:S?`primary`:`secondary`,onClick:()=>U(!0),testId:`manage-backends-add`,startContent:(0,b.jsx)(r.Plus,{width:14,height:14}),children:C(n.I18nKey.BACKEND$ADD)}),S?null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:C(n.I18nKey.HOME$DONE)})]})]})}),H?(0,b.jsx)(_.BackendFormModal,{mode:`add`,source:`manage_backends_modal`,onClose:()=>U(!1)}):null,B?(0,b.jsx)(_.BackendFormModal,{mode:`edit`,backend:B,onClose:()=>V(null)}):null,R?(0,b.jsx)(f.ConfirmationModal,{text:C(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:R.name}),onConfirm:W,onCancel:()=>z(null)}):null]})}exports.ManageBackendsModal=S;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../api/agent-server-config.cjs"),o=require("../../../contexts/active-backend-context.cjs"),s=require("../../shared/modals/modal-backdrop.cjs"),c=require("../../shared/modals/modal-body.cjs"),l=require("../../../utils/modal-classes.cjs"),u=require("../../shared/modals/modal-close-button.cjs"),d=require("../settings/brand-button.cjs"),f=require("../../../hooks/query/use-cloud-organizations.cjs"),p=require("../../../hooks/query/use-cloud-current-user-id.cjs"),m=require("../../shared/modals/confirmation-modal.cjs"),h=require("../../../hooks/query/use-backends-health.cjs"),g=require("./device-flow-auth.cjs"),_=require("./backend-form-modal.cjs"),v=require("./backend-row.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");function x(e,t,n,r){if(e.kind!==`cloud`)return;let i=t[e.id];if(!i||i.orgs.length===0)return;let a=n[e.id]?.userId??null;return i.orgs.map(e=>a&&a===e.id?r:e.name).join(`, `)}function S({onClose:e,recoveryMode:S=!1}){let{t:C}=t.useTranslation(`openhands`),{backends:w,active:T,removeBackend:E,setActive:D,updateBackend:O}=o.useActiveBackendContext(),k=h.useBackendsHealth(w,{probeDisabledOnce:!0}),A=f.useAllCloudOrganizations(),j=p.useCloudCurrentUserId(),M=C(n.I18nKey.BACKEND$PERSONAL_WORKSPACE),N=a.getLockedCloudHost(),P=N!==null,F=T.backend.authMode===`cookie`,I=P&&!F&&T.backend.kind===`cloud`?T.backend:null,L=N??I?.host??``,R=C(P&&!F?n.I18nKey.BACKEND$RECONNECT_CLOUD_TITLE:n.I18nKey.BACKEND$MANAGE_TITLE),[z,B]=y.default.useState(null),[V,H]=y.default.useState(null),[U,W]=y.default.useState(!1),G=()=>{z&&(E(z.id),B(null))},K=y.default.useCallback(t=>{(T.backend.id!==t.id||T.orgId!==null)&&D(t.id),e()},[T.backend.id,T.orgId,e,D]),q=y.default.useCallback((e,t)=>{O(e.id,{apiKey:t})},[O]),J=y.default.useCallback(e=>{I&&O(I.id,{apiKey:e})},[I,O]);return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s.ModalBackdrop,{onClose:S?void 0:e,closeOnEscape:!S,closeOnBackdropClick:!S,"aria-label":R,children:(0,b.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:i.cn(`relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl`,c.modalWidthClassName(`lg`),c.MODAL_MAX_WIDTH_VIEWPORT,`max-h-[70vh]`),children:[S?null:(0,b.jsx)(u.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,b.jsx)(`div`,{className:i.cn(`p-5`,!S&&`pr-12`),children:(0,b.jsx)(`h2`,{className:l.modalTitleLgClassName,children:R})}),(0,b.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col px-5`,children:(0,b.jsx)(`div`,{className:`flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,"data-testid":`manage-backends-list`,children:w.length===0?(0,b.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:C(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,b.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:w.map(e=>(0,b.jsx)(v.BackendRow,{backend:e,health:k[e.id],orgLabel:x(e,A,j,M),onSelect:()=>K(e),onEdit:()=>H(e),onRemove:()=>B({id:e.id,name:e.name}),onLogin:e.authMode===`cookie`?void 0:t=>q(e,t)},e.id))})})}),(0,b.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[P?I?(0,b.jsx)(g.DeviceFlowAuth,{host:L,onSuccess:J,testIdRoot:`manage-backends-reconnect-cloud`,idleButtonLabel:C(n.I18nKey.BACKEND$RECONNECT_CLOUD),className:`w-full sm:w-auto`,buttonClassName:`w-full sm:w-auto`,statusDisplay:`modal`}):null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:S?`primary`:`secondary`,onClick:()=>W(!0),testId:`manage-backends-add`,startContent:(0,b.jsx)(r.Plus,{width:14,height:14}),children:C(n.I18nKey.BACKEND$ADD)}),S?null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:C(n.I18nKey.HOME$DONE)})]})]})}),U?(0,b.jsx)(_.BackendFormModal,{mode:`add`,source:`manage_backends_modal`,onClose:()=>W(!1)}):null,V?(0,b.jsx)(_.BackendFormModal,{mode:`edit`,backend:V,onClose:()=>H(null)}):null,z?(0,b.jsx)(m.ConfirmationModal,{text:C(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:z.name}),onConfirm:G,onCancel:()=>B(null)}):null]})}exports.ManageBackendsModal=S;
 //# sourceMappingURL=manage-backends-modal.cjs.map

package/dist/components/features/backends/manage-backends-modal.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"manage-backends-modal.cjs","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n MODAL_MAX_WIDTH_VIEWPORT,\n modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\ninterface ManageBackendsModalProps {\n onClose: () => void;\n /*\n Recovery mode is used by the root unavailable-backend gate. There is no\n * app shell behind the modal, so dismiss controls would be misleading.\n /\n recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n id: string;\n name: string;\n}\n\n/\n Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n backend: Backend,\n cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n personalWorkspaceLabel: string,\n): string \| undefined {\n if (backend.kind !== \"cloud\") return undefined;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return undefined;\n const userId = currentUserIds[backend.id]?.userId ?? null;\n return entry.orgs\n .map((org) =>\n !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n )\n .join(\", \");\n}\n\nexport function ManageBackendsModal({\n onClose,\n recoveryMode = false,\n}: ManageBackendsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, removeBackend, setActive, updateBackend } =\n useActiveBackendContext();\n const healthByBackendId = useBackendsHealth(backends, {\n probeDisabledOnce: true,\n });\n const cloudOrgs = useAllCloudOrganizations();\n const currentUserIds = useCloudCurrentUserId();\n const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n const lockedCloudHost = getLockedCloudHost();\n const isLockedToCloud = lockedCloudHost !== null;\n const lockedCloudBackend =\n isLockedToCloud && active.backend.kind === \"cloud\" ? active.backend : null;\n const lockedCloudReconnectHost =\n lockedCloudHost ?? lockedCloudBackend?.host ?? \"\";\n const modalTitle = isLockedToCloud\n ? t(I18nKey.BACKEND$RECONNECT_CLOUD_TITLE)\n : t(I18nKey.BACKEND$MANAGE_TITLE);\n const [pendingRemoval, setPendingRemoval] =\n React.useState<PendingRemoval \| null>(null);\n const [editingBackend, setEditingBackend] = React.useState<Backend \| null>(\n null,\n );\n const [showAddForm, setShowAddForm] = React.useState(false);\n\n const handleConfirmRemoval = () => {\n if (!pendingRemoval) return;\n removeBackend(pendingRemoval.id);\n setPendingRemoval(null);\n };\n\n const handleSelectBackend = React.useCallback(\n (backend: Backend) => {\n if (active.backend.id !== backend.id \|\| active.orgId !== null) {\n setActive(backend.id);\n }\n onClose();\n },\n [active.backend.id, active.orgId, onClose, setActive],\n );\n\n const handleCloudLogin = React.useCallback(\n (backend: Backend, apiKey: string) => {\n updateBackend(backend.id, { apiKey });\n },\n [updateBackend],\n );\n\n const handleLockedCloudReconnect = React.useCallback(\n (apiKey: string) => {\n if (!lockedCloudBackend) return;\n updateBackend(lockedCloudBackend.id, { apiKey });\n },\n [lockedCloudBackend, updateBackend],\n );\n\n return (\n <>\n <ModalBackdrop\n onClose={recoveryMode ? undefined : onClose}\n closeOnEscape={!recoveryMode}\n closeOnBackdropClick={!recoveryMode}\n aria-label={modalTitle}\n >\n <div\n data-testid=\"manage-backends-modal\"\n className={cn(\n \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n modalWidthClassName(\"lg\"),\n MODAL_MAX_WIDTH_VIEWPORT,\n \"max-h-[70vh]\",\n )}\n >\n {recoveryMode ? null : (\n <ModalCloseButton\n onClose={onClose}\n testId=\"close-manage-backends-modal\"\n />\n )}\n <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n <h2 className={modalTitleLgClassName}>{modalTitle}</h2>\n </div>\n\n <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n <div\n className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n data-testid=\"manage-backends-list\"\n >\n {backends.length === 0 ? (\n <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n </p>\n ) : (\n <ul className=\"divide-y divide-[var(--oh-border)]\">\n {backends.map((backend) => (\n <BackendRow\n key={backend.id}\n backend={backend}\n health={healthByBackendId[backend.id]}\n orgLabel={resolveBackendOrgLabel(\n backend,\n cloudOrgs,\n currentUserIds,\n personalWorkspaceLabel,\n )}\n onSelect={() => handleSelectBackend(backend)}\n onEdit={() => setEditingBackend(backend)}\n onRemove={() =>\n setPendingRemoval({\n id: backend.id,\n name: backend.name,\n })\n }\n onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n />\n ))}\n </ul>\n )}\n </div>\n </div>\n\n <div className=\"flex justify-end gap-2 p-5\">\n {isLockedToCloud ? (\n lockedCloudBackend ? (\n <DeviceFlowAuth\n host={lockedCloudReconnectHost}\n onSuccess={handleLockedCloudReconnect}\n testIdRoot=\"manage-backends-reconnect-cloud\"\n idleButtonLabel={t(I18nKey.BACKEND$RECONNECT_CLOUD)}\n className=\"w-full sm:w-auto\"\n buttonClassName=\"w-full sm:w-auto\"\n statusDisplay=\"modal\"\n />\n ) : null\n ) : (\n <BrandButton\n type=\"button\"\n variant={recoveryMode ? \"primary\" : \"secondary\"}\n onClick={() => setShowAddForm(true)}\n testId=\"manage-backends-add\"\n startContent={<Plus width={14} height={14} />}\n >\n {t(I18nKey.BACKEND$ADD)}\n </BrandButton>\n )}\n {recoveryMode ? null : (\n <BrandButton\n type=\"button\"\n variant=\"primary\"\n onClick={onClose}\n testId=\"manage-backends-done\"\n >\n {t(I18nKey.HOME$DONE)}\n </BrandButton>\n )}\n </div>\n </div>\n </ModalBackdrop>\n\n {showAddForm ? (\n <BackendFormModal\n mode=\"add\"\n source=\"manage_backends_modal\"\n onClose={() => setShowAddForm(false)}\n />\n ) : null}\n\n {editingBackend ? (\n <BackendFormModal\n mode=\"edit\"\n backend={editingBackend}\n onClose={() => setEditingBackend(null)}\n />\n ) : null}\n\n {pendingRemoval ? (\n <ConfirmationModal\n text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n name: pendingRemoval.name,\n })}\n onConfirm={handleConfirmRemoval}\n onCancel={() => setPendingRemoval(null)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"manage-backends-modal.cjs","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n MODAL_MAX_WIDTH_VIEWPORT,\n modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\ninterface ManageBackendsModalProps {\n onClose: () => void;\n /*\n Recovery mode is used by the root unavailable-backend gate. There is no\n * app shell behind the modal, so dismiss controls would be misleading.\n /\n recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n id: string;\n name: string;\n}\n\n/\n Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n backend: Backend,\n cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n personalWorkspaceLabel: string,\n): string \| undefined {\n if (backend.kind !== \"cloud\") return undefined;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return undefined;\n const userId = currentUserIds[backend.id]?.userId ?? null;\n return entry.orgs\n .map((org) =>\n !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n )\n .join(\", \");\n}\n\nexport function ManageBackendsModal({\n onClose,\n recoveryMode = false,\n}: ManageBackendsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, removeBackend, setActive, updateBackend } =\n useActiveBackendContext();\n const healthByBackendId = useBackendsHealth(backends, {\n probeDisabledOnce: true,\n });\n const cloudOrgs = useAllCloudOrganizations();\n const currentUserIds = useCloudCurrentUserId();\n const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n const lockedCloudHost = getLockedCloudHost();\n const isLockedToCloud = lockedCloudHost !== null;\n // Cookie-auth (OHE-hosted) backends have no API key to refresh — re-auth is\n // the main-app login, so the device-flow reconnect controls don't apply.\n const isCookieAuthBackend = active.backend.authMode === \"cookie\";\n const lockedCloudBackend =\n isLockedToCloud && !isCookieAuthBackend && active.backend.kind === \"cloud\"\n ? active.backend\n : null;\n const lockedCloudReconnectHost =\n lockedCloudHost ?? lockedCloudBackend?.host ?? \"\";\n const modalTitle =\n isLockedToCloud && !isCookieAuthBackend\n ? t(I18nKey.BACKEND$RECONNECT_CLOUD_TITLE)\n : t(I18nKey.BACKEND$MANAGE_TITLE);\n const [pendingRemoval, setPendingRemoval] =\n React.useState<PendingRemoval \| null>(null);\n const [editingBackend, setEditingBackend] = React.useState<Backend \| null>(\n null,\n );\n const [showAddForm, setShowAddForm] = React.useState(false);\n\n const handleConfirmRemoval = () => {\n if (!pendingRemoval) return;\n removeBackend(pendingRemoval.id);\n setPendingRemoval(null);\n };\n\n const handleSelectBackend = React.useCallback(\n (backend: Backend) => {\n if (active.backend.id !== backend.id \|\| active.orgId !== null) {\n setActive(backend.id);\n }\n onClose();\n },\n [active.backend.id, active.orgId, onClose, setActive],\n );\n\n const handleCloudLogin = React.useCallback(\n (backend: Backend, apiKey: string) => {\n updateBackend(backend.id, { apiKey });\n },\n [updateBackend],\n );\n\n const handleLockedCloudReconnect = React.useCallback(\n (apiKey: string) => {\n if (!lockedCloudBackend) return;\n updateBackend(lockedCloudBackend.id, { apiKey });\n },\n [lockedCloudBackend, updateBackend],\n );\n\n return (\n <>\n <ModalBackdrop\n onClose={recoveryMode ? undefined : onClose}\n closeOnEscape={!recoveryMode}\n closeOnBackdropClick={!recoveryMode}\n aria-label={modalTitle}\n >\n <div\n data-testid=\"manage-backends-modal\"\n className={cn(\n \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n modalWidthClassName(\"lg\"),\n MODAL_MAX_WIDTH_VIEWPORT,\n \"max-h-[70vh]\",\n )}\n >\n {recoveryMode ? null : (\n <ModalCloseButton\n onClose={onClose}\n testId=\"close-manage-backends-modal\"\n />\n )}\n <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n <h2 className={modalTitleLgClassName}>{modalTitle}</h2>\n </div>\n\n <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n <div\n className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n data-testid=\"manage-backends-list\"\n >\n {backends.length === 0 ? (\n <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n </p>\n ) : (\n <ul className=\"divide-y divide-[var(--oh-border)]\">\n {backends.map((backend) => (\n <BackendRow\n key={backend.id}\n backend={backend}\n health={healthByBackendId[backend.id]}\n orgLabel={resolveBackendOrgLabel(\n backend,\n cloudOrgs,\n currentUserIds,\n personalWorkspaceLabel,\n )}\n onSelect={() => handleSelectBackend(backend)}\n onEdit={() => setEditingBackend(backend)}\n onRemove={() =>\n setPendingRemoval({\n id: backend.id,\n name: backend.name,\n })\n }\n onLogin={\n backend.authMode === \"cookie\"\n ? undefined\n : (apiKey) => handleCloudLogin(backend, apiKey)\n }\n />\n ))}\n </ul>\n )}\n </div>\n </div>\n\n <div className=\"flex justify-end gap-2 p-5\">\n {isLockedToCloud ? (\n lockedCloudBackend ? (\n <DeviceFlowAuth\n host={lockedCloudReconnectHost}\n onSuccess={handleLockedCloudReconnect}\n testIdRoot=\"manage-backends-reconnect-cloud\"\n idleButtonLabel={t(I18nKey.BACKEND$RECONNECT_CLOUD)}\n className=\"w-full sm:w-auto\"\n buttonClassName=\"w-full sm:w-auto\"\n statusDisplay=\"modal\"\n />\n ) : null\n ) : (\n <BrandButton\n type=\"button\"\n variant={recoveryMode ? \"primary\" : \"secondary\"}\n onClick={() => setShowAddForm(true)}\n testId=\"manage-backends-add\"\n startContent={<Plus width={14} height={14} />}\n >\n {t(I18nKey.BACKEND$ADD)}\n </BrandButton>\n )}\n {recoveryMode ? null : (\n <BrandButton\n type=\"button\"\n variant=\"primary\"\n onClick={onClose}\n testId=\"manage-backends-done\"\n >\n {t(I18nKey.HOME$DONE)}\n </BrandButton>\n )}\n </div>\n </div>\n </ModalBackdrop>\n\n {showAddForm ? (\n <BackendFormModal\n mode=\"add\"\n source=\"manage_backends_modal\"\n onClose={() => setShowAddForm(false)}\n />\n ) : null}\n\n {editingBackend ? (\n <BackendFormModal\n mode=\"edit\"\n backend={editingBackend}\n onClose={() => setEditingBackend(null)}\n />\n ) : null}\n\n {pendingRemoval ? (\n <ConfirmationModal\n text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n name: pendingRemoval.name,\n })}\n onConfirm={handleConfirmRemoval}\n onCancel={() => setPendingRemoval(null)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/backends/manage-backends-modal.js CHANGED Viewed

@@ -9,9 +9,9 @@ import { MODAL_MAX_WIDTH_VIEWPORT as s, modalWidthClassName as c } from "../../s
 import { modalTitleLgClassName as l } from "../../../utils/modal-classes.js";
 import { ModalCloseButton as u } from "../../shared/modals/modal-close-button.js";
 import { BrandButton as d } from "../settings/brand-button.js";
-import { ConfirmationModal as f } from "../../shared/modals/confirmation-modal.js";
-import { useAllCloudOrganizations as p } from "../../../hooks/query/use-cloud-organizations.js";
-import { useCloudCurrentUserId as m } from "../../../hooks/query/use-cloud-current-user-id.js";
+import { useAllCloudOrganizations as f } from "../../../hooks/query/use-cloud-organizations.js";
+import { useCloudCurrentUserId as p } from "../../../hooks/query/use-cloud-current-user-id.js";
+import { ConfirmationModal as m } from "../../shared/modals/confirmation-modal.js";
 import { useBackendsHealth as h } from "../../../hooks/query/use-backends-health.js";
 import { DeviceFlowAuth as g } from "./device-flow-auth.js";
 import { BackendFormModal as _ } from "./backend-form-modal.js";
@@ -27,26 +27,26 @@ function C(e, t, n, r) {
 	return i.orgs.map((e) => a && a === e.id ? r : e.name).join(", ");
 }
 function w({ onClose: w, recoveryMode: T = !1 }) {
-	let { t: E } = e("openhands"), { backends: D, active: O, removeBackend: k, setActive: A, updateBackend: j } = a(), M = h(D, { probeDisabledOnce: !0 }), N = p(), P = m(), F = E(t.BACKEND$PERSONAL_WORKSPACE), I = i(), L = I !== null, R = L && O.backend.kind === "cloud" ? O.backend : null, z = I ?? R?.host ?? "", B = E(L ? t.BACKEND$RECONNECT_CLOUD_TITLE : t.BACKEND$MANAGE_TITLE), [V, H] = y.useState(null), [U, W] = y.useState(null), [G, K] = y.useState(!1), q = () => {
-		V && (k(V.id), H(null));
-	}, J = y.useCallback((e) => {
+	let { t: E } = e("openhands"), { backends: D, active: O, removeBackend: k, setActive: A, updateBackend: j } = a(), M = h(D, { probeDisabledOnce: !0 }), N = f(), P = p(), F = E(t.BACKEND$PERSONAL_WORKSPACE), I = i(), L = I !== null, R = O.backend.authMode === "cookie", z = L && !R && O.backend.kind === "cloud" ? O.backend : null, B = I ?? z?.host ?? "", V = E(L && !R ? t.BACKEND$RECONNECT_CLOUD_TITLE : t.BACKEND$MANAGE_TITLE), [H, U] = y.useState(null), [W, G] = y.useState(null), [K, q] = y.useState(!1), J = () => {
+		H && (k(H.id), U(null));
+	}, Y = y.useCallback((e) => {
 		(O.backend.id !== e.id || O.orgId !== null) && A(e.id), w();
 	}, [
 		O.backend.id,
 		O.orgId,
 		w,
 		A
-	]), Y = y.useCallback((e, t) => {
+	]), X = y.useCallback((e, t) => {
 		j(e.id, { apiKey: t });
-	}, [j]), X = y.useCallback((e) => {
-		R && j(R.id, { apiKey: e });
-	}, [R, j]);
+	}, [j]), Z = y.useCallback((e) => {
+		z && j(z.id, { apiKey: e });
+	}, [z, j]);
 	return /* @__PURE__ */ S(b, { children: [
 		/* @__PURE__ */ x(o, {
 			onClose: T ? void 0 : w,
 			closeOnEscape: !T,
 			closeOnBackdropClick: !T,
-			"aria-label": B,
+			"aria-label": V,
 			children: /* @__PURE__ */ S("div", {
 				"data-testid": "manage-backends-modal",
 				className: r("relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl", c("lg"), s, "max-h-[70vh]"),
@@ -59,7 +59,7 @@ function w({ onClose: w, recoveryMode: T = !1 }) {
 						className: r("p-5", !T && "pr-12"),
 						children: /* @__PURE__ */ x("h2", {
 							className: l,
-							children: B
+							children: V
 						})
 					}),
 					/* @__PURE__ */ x("div", {
@@ -76,22 +76,22 @@ function w({ onClose: w, recoveryMode: T = !1 }) {
 									backend: e,
 									health: M[e.id],
 									orgLabel: C(e, N, P, F),
-									onSelect: () => J(e),
-									onEdit: () => W(e),
-									onRemove: () => H({
+									onSelect: () => Y(e),
+									onEdit: () => G(e),
+									onRemove: () => U({
 										id: e.id,
 										name: e.name
 									}),
-									onLogin: (t) => Y(e, t)
+									onLogin: e.authMode === "cookie" ? void 0 : (t) => X(e, t)
 								}, e.id))
 							})
 						})
 					}),
 					/* @__PURE__ */ S("div", {
 						className: "flex justify-end gap-2 p-5",
-						children: [L ? R ? /* @__PURE__ */ x(g, {
-							host: z,
-							onSuccess: X,
+						children: [L ? z ? /* @__PURE__ */ x(g, {
+							host: B,
+							onSuccess: Z,
 							testIdRoot: "manage-backends-reconnect-cloud",
 							idleButtonLabel: E(t.BACKEND$RECONNECT_CLOUD),
 							className: "w-full sm:w-auto",
@@ -100,7 +100,7 @@ function w({ onClose: w, recoveryMode: T = !1 }) {
 						}) : null : /* @__PURE__ */ x(d, {
 							type: "button",
 							variant: T ? "primary" : "secondary",
-							onClick: () => K(!0),
+							onClick: () => q(!0),
 							testId: "manage-backends-add",
 							startContent: /* @__PURE__ */ x(n, {
 								width: 14,
@@ -118,20 +118,20 @@ function w({ onClose: w, recoveryMode: T = !1 }) {
 				]
 			})
 		}),
-		G ? /* @__PURE__ */ x(_, {
+		K ? /* @__PURE__ */ x(_, {
 			mode: "add",
 			source: "manage_backends_modal",
-			onClose: () => K(!1)
+			onClose: () => q(!1)
 		}) : null,
-		U ? /* @__PURE__ */ x(_, {
+		W ? /* @__PURE__ */ x(_, {
 			mode: "edit",
-			backend: U,
-			onClose: () => W(null)
+			backend: W,
+			onClose: () => G(null)
 		}) : null,
-		V ? /* @__PURE__ */ x(f, {
-			text: E(t.BACKEND$REMOVE_CONFIRMATION, { name: V.name }),
-			onConfirm: q,
-			onCancel: () => H(null)
+		H ? /* @__PURE__ */ x(m, {
+			text: E(t.BACKEND$REMOVE_CONFIRMATION, { name: H.name }),
+			onConfirm: J,
+			onCancel: () => U(null)
 		}) : null
 	] });
 }

package/dist/components/features/backends/manage-backends-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"manage-backends-modal.js","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n MODAL_MAX_WIDTH_VIEWPORT,\n modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\ninterface ManageBackendsModalProps {\n onClose: () => void;\n /*\n Recovery mode is used by the root unavailable-backend gate. There is no\n * app shell behind the modal, so dismiss controls would be misleading.\n /\n recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n id: string;\n name: string;\n}\n\n/\n Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n backend: Backend,\n cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n personalWorkspaceLabel: string,\n): string \| undefined {\n if (backend.kind !== \"cloud\") return undefined;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return undefined;\n const userId = currentUserIds[backend.id]?.userId ?? null;\n return entry.orgs\n .map((org) =>\n !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n )\n .join(\", \");\n}\n\nexport function ManageBackendsModal({\n onClose,\n recoveryMode = false,\n}: ManageBackendsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, removeBackend, setActive, updateBackend } =\n useActiveBackendContext();\n const healthByBackendId = useBackendsHealth(backends, {\n probeDisabledOnce: true,\n });\n const cloudOrgs = useAllCloudOrganizations();\n const currentUserIds = useCloudCurrentUserId();\n const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n const lockedCloudHost = getLockedCloudHost();\n const isLockedToCloud = lockedCloudHost !== null;\n const lockedCloudBackend =\n isLockedToCloud && active.backend.kind === \"cloud\" ? active.backend : null;\n const lockedCloudReconnectHost =\n lockedCloudHost ?? lockedCloudBackend?.host ?? \"\";\n const modalTitle = isLockedToCloud\n ? t(I18nKey.BACKEND$RECONNECT_CLOUD_TITLE)\n : t(I18nKey.BACKEND$MANAGE_TITLE);\n const [pendingRemoval, setPendingRemoval] =\n React.useState<PendingRemoval \| null>(null);\n const [editingBackend, setEditingBackend] = React.useState<Backend \| null>(\n null,\n );\n const [showAddForm, setShowAddForm] = React.useState(false);\n\n const handleConfirmRemoval = () => {\n if (!pendingRemoval) return;\n removeBackend(pendingRemoval.id);\n setPendingRemoval(null);\n };\n\n const handleSelectBackend = React.useCallback(\n (backend: Backend) => {\n if (active.backend.id !== backend.id \|\| active.orgId !== null) {\n setActive(backend.id);\n }\n onClose();\n },\n [active.backend.id, active.orgId, onClose, setActive],\n );\n\n const handleCloudLogin = React.useCallback(\n (backend: Backend, apiKey: string) => {\n updateBackend(backend.id, { apiKey });\n },\n [updateBackend],\n );\n\n const handleLockedCloudReconnect = React.useCallback(\n (apiKey: string) => {\n if (!lockedCloudBackend) return;\n updateBackend(lockedCloudBackend.id, { apiKey });\n },\n [lockedCloudBackend, updateBackend],\n );\n\n return (\n <>\n <ModalBackdrop\n onClose={recoveryMode ? undefined : onClose}\n closeOnEscape={!recoveryMode}\n closeOnBackdropClick={!recoveryMode}\n aria-label={modalTitle}\n >\n <div\n data-testid=\"manage-backends-modal\"\n className={cn(\n \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n modalWidthClassName(\"lg\"),\n MODAL_MAX_WIDTH_VIEWPORT,\n \"max-h-[70vh]\",\n )}\n >\n {recoveryMode ? null : (\n <ModalCloseButton\n onClose={onClose}\n testId=\"close-manage-backends-modal\"\n />\n )}\n <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n <h2 className={modalTitleLgClassName}>{modalTitle}</h2>\n </div>\n\n <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n <div\n className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n data-testid=\"manage-backends-list\"\n >\n {backends.length === 0 ? (\n <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n </p>\n ) : (\n <ul className=\"divide-y divide-[var(--oh-border)]\">\n {backends.map((backend) => (\n <BackendRow\n key={backend.id}\n backend={backend}\n health={healthByBackendId[backend.id]}\n orgLabel={resolveBackendOrgLabel(\n backend,\n cloudOrgs,\n currentUserIds,\n personalWorkspaceLabel,\n )}\n onSelect={() => handleSelectBackend(backend)}\n onEdit={() => setEditingBackend(backend)}\n onRemove={() =>\n setPendingRemoval({\n id: backend.id,\n name: backend.name,\n })\n }\n onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n />\n ))}\n </ul>\n )}\n </div>\n </div>\n\n <div className=\"flex justify-end gap-2 p-5\">\n {isLockedToCloud ? (\n lockedCloudBackend ? (\n <DeviceFlowAuth\n host={lockedCloudReconnectHost}\n onSuccess={handleLockedCloudReconnect}\n testIdRoot=\"manage-backends-reconnect-cloud\"\n idleButtonLabel={t(I18nKey.BACKEND$RECONNECT_CLOUD)}\n className=\"w-full sm:w-auto\"\n buttonClassName=\"w-full sm:w-auto\"\n statusDisplay=\"modal\"\n />\n ) : null\n ) : (\n <BrandButton\n type=\"button\"\n variant={recoveryMode ? \"primary\" : \"secondary\"}\n onClick={() => setShowAddForm(true)}\n testId=\"manage-backends-add\"\n startContent={<Plus width={14} height={14} />}\n >\n {t(I18nKey.BACKEND$ADD)}\n </BrandButton>\n )}\n {recoveryMode ? null : (\n <BrandButton\n type=\"button\"\n variant=\"primary\"\n onClick={onClose}\n testId=\"manage-backends-done\"\n >\n {t(I18nKey.HOME$DONE)}\n </BrandButton>\n )}\n </div>\n </div>\n </ModalBackdrop>\n\n {showAddForm ? (\n <BackendFormModal\n mode=\"add\"\n source=\"manage_backends_modal\"\n onClose={() => setShowAddForm(false)}\n />\n ) : null}\n\n {editingBackend ? (\n <BackendFormModal\n mode=\"edit\"\n backend={editingBackend}\n onClose={() => setEditingBackend(null)}\n />\n ) : null}\n\n {pendingRemoval ? (\n <ConfirmationModal\n text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n name: pendingRemoval.name,\n })}\n onConfirm={handleConfirmRemoval}\n onCancel={() => setPendingRemoval(null)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"manage-backends-modal.js","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n MODAL_MAX_WIDTH_VIEWPORT,\n modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\ninterface ManageBackendsModalProps {\n onClose: () => void;\n /*\n Recovery mode is used by the root unavailable-backend gate. There is no\n * app shell behind the modal, so dismiss controls would be misleading.\n /\n recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n id: string;\n name: string;\n}\n\n/\n Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n backend: Backend,\n cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n personalWorkspaceLabel: string,\n): string \| undefined {\n if (backend.kind !== \"cloud\") return undefined;\n const entry = cloudOrgs[backend.id];\n if (!entry \|\| entry.orgs.length === 0) return undefined;\n const userId = currentUserIds[backend.id]?.userId ?? null;\n return entry.orgs\n .map((org) =>\n !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n )\n .join(\", \");\n}\n\nexport function ManageBackendsModal({\n onClose,\n recoveryMode = false,\n}: ManageBackendsModalProps) {\n const { t } = useTranslation(\"openhands\");\n const { backends, active, removeBackend, setActive, updateBackend } =\n useActiveBackendContext();\n const healthByBackendId = useBackendsHealth(backends, {\n probeDisabledOnce: true,\n });\n const cloudOrgs = useAllCloudOrganizations();\n const currentUserIds = useCloudCurrentUserId();\n const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n const lockedCloudHost = getLockedCloudHost();\n const isLockedToCloud = lockedCloudHost !== null;\n // Cookie-auth (OHE-hosted) backends have no API key to refresh — re-auth is\n // the main-app login, so the device-flow reconnect controls don't apply.\n const isCookieAuthBackend = active.backend.authMode === \"cookie\";\n const lockedCloudBackend =\n isLockedToCloud && !isCookieAuthBackend && active.backend.kind === \"cloud\"\n ? active.backend\n : null;\n const lockedCloudReconnectHost =\n lockedCloudHost ?? lockedCloudBackend?.host ?? \"\";\n const modalTitle =\n isLockedToCloud && !isCookieAuthBackend\n ? t(I18nKey.BACKEND$RECONNECT_CLOUD_TITLE)\n : t(I18nKey.BACKEND$MANAGE_TITLE);\n const [pendingRemoval, setPendingRemoval] =\n React.useState<PendingRemoval \| null>(null);\n const [editingBackend, setEditingBackend] = React.useState<Backend \| null>(\n null,\n );\n const [showAddForm, setShowAddForm] = React.useState(false);\n\n const handleConfirmRemoval = () => {\n if (!pendingRemoval) return;\n removeBackend(pendingRemoval.id);\n setPendingRemoval(null);\n };\n\n const handleSelectBackend = React.useCallback(\n (backend: Backend) => {\n if (active.backend.id !== backend.id \|\| active.orgId !== null) {\n setActive(backend.id);\n }\n onClose();\n },\n [active.backend.id, active.orgId, onClose, setActive],\n );\n\n const handleCloudLogin = React.useCallback(\n (backend: Backend, apiKey: string) => {\n updateBackend(backend.id, { apiKey });\n },\n [updateBackend],\n );\n\n const handleLockedCloudReconnect = React.useCallback(\n (apiKey: string) => {\n if (!lockedCloudBackend) return;\n updateBackend(lockedCloudBackend.id, { apiKey });\n },\n [lockedCloudBackend, updateBackend],\n );\n\n return (\n <>\n <ModalBackdrop\n onClose={recoveryMode ? undefined : onClose}\n closeOnEscape={!recoveryMode}\n closeOnBackdropClick={!recoveryMode}\n aria-label={modalTitle}\n >\n <div\n data-testid=\"manage-backends-modal\"\n className={cn(\n \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n modalWidthClassName(\"lg\"),\n MODAL_MAX_WIDTH_VIEWPORT,\n \"max-h-[70vh]\",\n )}\n >\n {recoveryMode ? null : (\n <ModalCloseButton\n onClose={onClose}\n testId=\"close-manage-backends-modal\"\n />\n )}\n <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n <h2 className={modalTitleLgClassName}>{modalTitle}</h2>\n </div>\n\n <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n <div\n className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n data-testid=\"manage-backends-list\"\n >\n {backends.length === 0 ? (\n <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n </p>\n ) : (\n <ul className=\"divide-y divide-[var(--oh-border)]\">\n {backends.map((backend) => (\n <BackendRow\n key={backend.id}\n backend={backend}\n health={healthByBackendId[backend.id]}\n orgLabel={resolveBackendOrgLabel(\n backend,\n cloudOrgs,\n currentUserIds,\n personalWorkspaceLabel,\n )}\n onSelect={() => handleSelectBackend(backend)}\n onEdit={() => setEditingBackend(backend)}\n onRemove={() =>\n setPendingRemoval({\n id: backend.id,\n name: backend.name,\n })\n }\n onLogin={\n backend.authMode === \"cookie\"\n ? undefined\n : (apiKey) => handleCloudLogin(backend, apiKey)\n }\n />\n ))}\n </ul>\n )}\n </div>\n </div>\n\n <div className=\"flex justify-end gap-2 p-5\">\n {isLockedToCloud ? (\n lockedCloudBackend ? (\n <DeviceFlowAuth\n host={lockedCloudReconnectHost}\n onSuccess={handleLockedCloudReconnect}\n testIdRoot=\"manage-backends-reconnect-cloud\"\n idleButtonLabel={t(I18nKey.BACKEND$RECONNECT_CLOUD)}\n className=\"w-full sm:w-auto\"\n buttonClassName=\"w-full sm:w-auto\"\n statusDisplay=\"modal\"\n />\n ) : null\n ) : (\n <BrandButton\n type=\"button\"\n variant={recoveryMode ? \"primary\" : \"secondary\"}\n onClick={() => setShowAddForm(true)}\n testId=\"manage-backends-add\"\n startContent={<Plus width={14} height={14} />}\n >\n {t(I18nKey.BACKEND$ADD)}\n </BrandButton>\n )}\n {recoveryMode ? null : (\n <BrandButton\n type=\"button\"\n variant=\"primary\"\n onClick={onClose}\n testId=\"manage-backends-done\"\n >\n {t(I18nKey.HOME$DONE)}\n </BrandButton>\n )}\n </div>\n </div>\n </ModalBackdrop>\n\n {showAddForm ? (\n <BackendFormModal\n mode=\"add\"\n source=\"manage_backends_modal\"\n onClose={() => setShowAddForm(false)}\n />\n ) : null}\n\n {editingBackend ? (\n <BackendFormModal\n mode=\"edit\"\n backend={editingBackend}\n onClose={() => setEditingBackend(null)}\n />\n ) : null}\n\n {pendingRemoval ? (\n <ConfirmationModal\n text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n name: pendingRemoval.name,\n })}\n onConfirm={handleConfirmRemoval}\n onCancel={() => setPendingRemoval(null)}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/change-agent-button.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("../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs"),c=require("../../../hooks/query/use-active-conversation.cjs"),l=require("../../../hooks/use-agent-state.cjs"),u=require("../../../utils/form-control-classes.cjs"),d=require("../../shared/buttons/styled-tooltip.cjs"),f=require("../../../hooks/use-unified-websocket-status.cjs"),p=require("../../../hooks/query/use-sub-conversation-task-polling.cjs"),m=require("../../../ui/typography.cjs"),h=require("../../../ui/combobox-caret.cjs"),g=require("../../../icons/lesson-plan.cjs"),_=require("../../../icons/code-pill.cjs"),v=require("./change-agent-context-menu.cjs"),y=require("../../../hooks/use-handle-plan-click.cjs");let b=require("react");b=e.__toESM(b,1);let x=require("react/jsx-runtime");function S(){let[e,S]=(0,b.useState)(!1),{conversationMode:C,setConversationMode:w,subConversationTaskId:T}=o.useConversationStore(),{conversationId:E}=a.useOptionalConversationId(),D=!E,O=f.useUnifiedWebSocketStatus()===`OPEN`,{curAgentState:k}=l.useAgentState(),{t:A}=t.useTranslation(`openhands`),j=k===r.AgentState.RUNNING,{data:M}=c.useActiveConversation(),N=s.useQueryClient(),P=(0,b.useRef)(null),{taskStatus:F,subConversationId:I}=p.useSubConversationTaskPolling(T,M?.id||null);(0,b.useEffect)(()=>{F===`READY`&&I&&M?.id&&T&&P.current!==T&&(P.current=T,N.invalidateQueries({queryKey:[`user`,`conversation`,M.id]}))},[F,I,M?.id,T,N]);let{handlePlanClick:L,isCreatingConversation:R}=y.useHandlePlanClick();(0,b.useEffect)(()=>{(j||!O)&&e&&S(!1)},[j,e,O]);let z=D||j||R||!O;(0,b.useEffect)(()=>{if(z)return;let e=e=>{if(e.shiftKey&&e.key===`Tab`){e.preventDefault(),e.stopPropagation();let t=C===`code`?`plan`:`code`;t===`plan`?L(e):w(t)}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[z,C,w,L]);let B=t=>{t.preventDefault(),t.stopPropagation(),S(!e)},V=e=>{e.preventDefault(),e.stopPropagation(),w(`code`)},H=C===`code`,U=(0,b.useMemo)(()=>A(H?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),[H,A]),W=(0,b.useMemo)(()=>H?(0,x.jsx)(_.CodePillIcon,{className:`h-[11px] w-[11px] shrink-0`}):(0,x.jsx)(g.default,{width:18,height:18,color:`currentColor`}),[H]),G=(0,x.jsxs)(`div`,{className:`relative`,children:[(0,x.jsxs)(`button`,{type:`button`,onClick:B,disabled:z,className:i.cn(`flex items-center rounded-[100px]`,u.formControlTransitionClassName,H?`border border-transparent text-[var(--oh-muted)]`:`border border-[#597FF4] bg-[#4A67BD]`,!z&&H&&i.cn(`cursor-pointer`,`hover:text-white hover:bg-white/10`),!z&&!H&&`cursor-pointer text-white hover:bg-[#597FF4]`,z&&i.cn(`opacity-50 cursor-not-allowed`,H&&`border-transparent`)),children:[(0,x.jsxs)(`div`,{className:`flex items-center gap-1 pl-1.5`,children:[W,(0,x.jsx)(m.Typography.Text,{className:`text-2.75 not-italic font-normal leading-5`,children:U})]}),(0,x.jsx)(h.ComboboxCaretInline,{isOpen:e})]}),e&&(0,x.jsx)(v.ChangeAgentContextMenu,{activeMode:C,onClose:()=>S(!1),onCodeClick:V,onPlanClick:L})]});return D?(0,x.jsx)(d.StyledTooltip,{content:A(n.I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),placement:`top`,children:G}):G}exports.ChangeAgentButton=S;
+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("../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs"),c=require("../../../hooks/query/use-active-conversation.cjs"),l=require("../../../hooks/use-agent-state.cjs"),u=require("../../shared/buttons/styled-tooltip.cjs"),d=require("../../../utils/form-control-classes.cjs"),f=require("../../../hooks/use-unified-websocket-status.cjs"),p=require("../../../hooks/query/use-sub-conversation-task-polling.cjs"),m=require("../../../ui/typography.cjs"),h=require("../../../ui/combobox-caret.cjs"),g=require("../../../icons/lesson-plan.cjs"),_=require("../../../icons/code-pill.cjs"),v=require("./change-agent-context-menu.cjs"),y=require("../../../hooks/use-handle-plan-click.cjs");let b=require("react");b=e.__toESM(b,1);let x=require("react/jsx-runtime");function S(){let[e,S]=(0,b.useState)(!1),{conversationMode:C,setConversationMode:w,subConversationTaskId:T}=o.useConversationStore(),{conversationId:E}=a.useOptionalConversationId(),D=!E,O=f.useUnifiedWebSocketStatus()===`OPEN`,{curAgentState:k}=l.useAgentState(),{t:A}=t.useTranslation(`openhands`),j=k===r.AgentState.RUNNING,{data:M}=c.useActiveConversation(),N=s.useQueryClient(),P=(0,b.useRef)(null),{taskStatus:F,subConversationId:I}=p.useSubConversationTaskPolling(T,M?.id||null);(0,b.useEffect)(()=>{F===`READY`&&I&&M?.id&&T&&P.current!==T&&(P.current=T,N.invalidateQueries({queryKey:[`user`,`conversation`,M.id]}))},[F,I,M?.id,T,N]);let{handlePlanClick:L,isCreatingConversation:R}=y.useHandlePlanClick();(0,b.useEffect)(()=>{(j||!O)&&e&&S(!1)},[j,e,O]);let z=D||j||R||!O;(0,b.useEffect)(()=>{if(z)return;let e=e=>{if(e.shiftKey&&e.key===`Tab`){e.preventDefault(),e.stopPropagation();let t=C===`code`?`plan`:`code`;t===`plan`?L(e):w(t)}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[z,C,w,L]);let B=t=>{t.preventDefault(),t.stopPropagation(),S(!e)},V=e=>{e.preventDefault(),e.stopPropagation(),w(`code`)},H=C===`code`,U=(0,b.useMemo)(()=>A(H?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),[H,A]),W=(0,b.useMemo)(()=>H?(0,x.jsx)(_.CodePillIcon,{className:`h-[11px] w-[11px] shrink-0`}):(0,x.jsx)(g.default,{width:18,height:18,color:`currentColor`}),[H]),G=(0,x.jsxs)(`div`,{className:`relative`,children:[(0,x.jsxs)(`button`,{type:`button`,onClick:B,disabled:z,className:i.cn(`flex items-center rounded-[100px]`,d.formControlTransitionClassName,H?`border border-transparent text-[var(--oh-muted)]`:`border border-[#597FF4] bg-[#4A67BD]`,!z&&H&&i.cn(`cursor-pointer`,`hover:text-white hover:bg-white/10`),!z&&!H&&`cursor-pointer text-white hover:bg-[#597FF4]`,z&&i.cn(`opacity-50 cursor-not-allowed`,H&&`border-transparent`)),children:[(0,x.jsxs)(`div`,{className:`flex items-center gap-1 pl-1.5`,children:[W,(0,x.jsx)(m.Typography.Text,{className:`text-2.75 not-italic font-normal leading-5`,children:U})]}),(0,x.jsx)(h.ComboboxCaretInline,{isOpen:e})]}),e&&(0,x.jsx)(v.ChangeAgentContextMenu,{activeMode:C,onClose:()=>S(!1),onCodeClick:V,onPlanClick:L})]});return D?(0,x.jsx)(u.StyledTooltip,{content:A(n.I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),placement:`top`,children:G}):G}exports.ChangeAgentButton=S;
 //# sourceMappingURL=change-agent-button.cjs.map

package/dist/components/features/chat/change-agent-button.js CHANGED Viewed

@@ -7,8 +7,8 @@ import { useConversationStore as a } from "../../../stores/conversation-store.js
 import { useQueryClient as o } from "../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js";
 import { useActiveConversation as s } from "../../../hooks/query/use-active-conversation.js";
 import { useAgentState as c } from "../../../hooks/use-agent-state.js";
-import { formControlTransitionClassName as l } from "../../../utils/form-control-classes.js";
-import { StyledTooltip as u } from "../../shared/buttons/styled-tooltip.js";
+import { StyledTooltip as l } from "../../shared/buttons/styled-tooltip.js";
+import { formControlTransitionClassName as u } from "../../../utils/form-control-classes.js";
 import { useUnifiedWebSocketStatus as d } from "../../../hooks/use-unified-websocket-status.js";
 import { useSubConversationTaskPolling as f } from "../../../hooks/query/use-sub-conversation-task-polling.js";
 import { Typography as p } from "../../../ui/typography.js";
@@ -76,7 +76,7 @@ function T() {
 			type: "button",
 			onClick: W,
 			disabled: U,
-			className: r("flex items-center rounded-[100px]", l, K ? "border border-transparent text-[var(--oh-muted)]" : "border border-[#597FF4] bg-[#4A67BD]", !U && K && r("cursor-pointer", "hover:text-white hover:bg-white/10"), !U && !K && "cursor-pointer text-white hover:bg-[#597FF4]", U && r("opacity-50 cursor-not-allowed", K && "border-transparent")),
+			className: r("flex items-center rounded-[100px]", u, K ? "border border-transparent text-[var(--oh-muted)]" : "border border-[#597FF4] bg-[#4A67BD]", !U && K && r("cursor-pointer", "hover:text-white hover:bg-white/10"), !U && !K && "cursor-pointer text-white hover:bg-[#597FF4]", U && r("opacity-50 cursor-not-allowed", K && "border-transparent")),
 			children: [/* @__PURE__ */ w("div", {
 				className: "flex items-center gap-1 pl-1.5",
 				children: [J, /* @__PURE__ */ C(p.Text, {
@@ -91,7 +91,7 @@ function T() {
 			onPlanClick: V
 		})]
 	});
-	return j ? /* @__PURE__ */ C(u, {
+	return j ? /* @__PURE__ */ C(l, {
 		content: P(t.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),
 		placement: "top",
 		children: Y

package/dist/components/features/chat/chat-interface.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-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("../../../utils/custom-toast-handlers.cjs");require("../../../constants/server-connection-error.cjs");const c=require("../../../stores/error-message-store.cjs"),l=require("../../../stores/optimistic-user-message-store.cjs"),u=require("../../../stores/goal-store.cjs"),d=require("../../../stores/model-store.cjs"),f=require("../../../contexts/conversation-websocket-context.cjs"),p=require("../../../hooks/use-send-message.cjs"),m=require("../../../hooks/query/use-active-conversation.cjs"),h=require("../../../hooks/use-agent-state.cjs"),ee=require("../../../utils/convert-image-to-base-64.cjs"),te=require("../../../utils/file-validation.cjs"),g=require("../../../utils/pending-task-message-link.cjs"),ne=require("../../../hooks/query/use-task-polling.cjs"),re=require("../../../hooks/use-tracking.cjs"),ie=require("../../../utils/acp-error-codes.cjs"),ae=require("../../../services/chat-service.cjs"),oe=require("./btw-messages.cjs"),se=require("./goal-status-banner.cjs"),ce=require("./model-messages.cjs"),le=require("./components/resolve-picker-kind.cjs"),ue=require("../../../hooks/use-is-archived-conversation.cjs"),de=require("../../shared/loading-spinner.cjs"),fe=require("../../../hooks/use-scroll-to-bottom.cjs"),pe=require("../../../context/scroll-context.cjs"),me=require("./interactive-chat-box.cjs"),he=require("../../../hooks/use-filtered-events.cjs"),ge=require("../../../hooks/use-load-older-events.cjs"),_e=require("../../../hooks/use-auto-refresh-files-on-edit.cjs"),ve=require("./chat-markdown-path-code.cjs"),ye=require("./typing-indicator.cjs"),be=require("./chat-suggestions.cjs"),xe=require("../../../stores/initial-query-store.cjs"),Se=require("../../../hooks/use-handle-build-plan-click.cjs"),Ce=require("../../shared/buttons/scroll-to-bottom-button.cjs"),we=require("./chat-messages-skeleton.cjs"),Te=require("./error-message-banner.cjs"),Ee=require("./skill-install-restart-banner.cjs"),De=require("../../../hooks/use-llm-configured.cjs"),Oe=require("../home/llm-not-configured-banner.cjs"),ke=require("../../conversation-events/chat/messages.cjs"),Ae=require("./pending-user-messages.cjs"),je=require("../../../hooks/mutation/use-unified-upload-files.cjs"),Me=require("./confirmation-mode-enabled.cjs"),Ne=require("./chat-status-indicator.cjs"),Pe=require("../../../hooks/mutation/use-new-conversation-command.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime"),Fe=require("react-router");function Ie(e,t){return e?`github`:t?`replay`:`direct`}function y(){_e.useAutoRefreshFilesOnEdit();let{trackInitialQuerySubmitted:e,trackUserMessageSent:y}=re.useTracking(),{setMessageToSend:b,conversationMode:x,planContent:S}=o.useConversationStore(),{errorMessage:C,errorCode:w,errorClassification:Le,removeErrorMessage:Re,setErrorMessage:T}=c.useErrorMessageStore(),ze=(0,Fe.useNavigate)(),{isTask:E,taskStatus:D,taskDetail:Be}=ne.useTaskPolling(),O=E,k=f.useConversationWebSocket(),{send:Ve}=p.useSendMessage(),{renderableEvents:A,allConversationEvents:j,totalEvents:M,hasSubstantiveAgentActions:N,userEventsExist:P}=he.useFilteredEvents(),He=l.useOptimisticUserMessageStore(e=>e.enqueuePendingMessage),Ue=l.useOptimisticUserMessageStore(e=>e.markPendingMessageError),F=l.useOptimisticUserMessageStore(e=>e.pendingMessages),{t:I}=t.useTranslation(`openhands`),L=_.default.useRef(null),{scrollDomToBottom:R,onChatBodyScroll:z,hitBottom:B,autoScroll:V,setAutoScroll:We,setHitBottom:Ge}=fe.useScrollToBottom(L),{mutate:Ke,isPending:qe}=Pe.useNewConversationCommand(),{curAgentState:H}=h.useAgentState(),{handleBuildPlanClick:Je}=Se.useHandleBuildPlanClick(),{data:Ye}=m.useActiveConversation(),Xe=Ye?.sandbox_status??null,U=ue.useIsArchivedConversation(),{isConfigured:Ze,isLoading:Qe}=De.useLlmConfigured(),W=!Qe&&!Ze,$e=H===r.AgentState.RUNNING||H===r.AgentState.LOADING;_.default.useEffect(()=>{if($e||x!==`plan`||!S)return;let e=e=>{(e.metaKey||e.ctrlKey)&&e.key===`Enter`&&(e.preventDefault(),e.stopPropagation(),Je(e),R())};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[$e,x,S,Je,R]);let{selectedRepository:et,replayJson:tt}=xe.useInitialQueryStore(),{conversationId:G}=a.useOptionalConversationId(),nt=u.useGoalStore(e=>{let t=G?e.statusByConversation[G]:void 0;return t?.active?`${t.iteration}:${t.status}`:null}),{mutateAsync:rt}=je.useUnifiedUploadFiles(),{isLoading:K,hasMore:q,loadOlder:it}=ge.useLoadOlderEvents(G),J=_.default.useRef(null),Y=_.default.useCallback(e=>{if(O||K||!q)return;let t=e.scrollTop<=80,r=e.scrollHeight<=e.clientHeight+80;!t&&!r||(J.current={scrollHeight:e.scrollHeight,scrollTop:e.scrollTop},it().catch(e=>{J.current=null,T(e instanceof Error&&e.message?e.message:I(n.I18nKey.ERROR$GENERIC))}))},[q,K,O,it,T,I]),at=_.default.useCallback(e=>{e.deltaY<0&&e.currentTarget.scrollTop<=0&&Y(e.currentTarget)},[Y]),X=_.default.useMemo(()=>G?F.some(e=>g.matchesPendingConversationId(G,e.conversationId)):!1,[F,G]),ot=d.useModelStore(e=>G?(e.entriesByConversation[G]?.length??0)>0:!1),st=le.hasConversationStarted({isLoadingHistory:k?.isLoadingHistory===!0,hasUserEvents:P,hasPendingUserMessages:X,hasSubstantiveAgentActions:N,hasModelEntries:ot}),ct=j.length>0||X||!k?.isLoadingHistory,lt=!!G,Z=!ct&&!E,ut=async(t,r,i)=>{if(t.trim()===`/new`){if(!G){s.displayErrorToast(I(n.I18nKey.CONVERSATION$CLEAR_NO_ID));return}if(M===0){s.displayErrorToast(I(n.I18nKey.CONVERSATION$CLEAR_EMPTY));return}if(qe)return;Ke();return}let a=[...r],o=[...i];M===0?e({entryPoint:Ie(et!==null,tt!==null),queryCharacterLength:t.length,replayJsonSize:tt?.length}):y({sessionMessageCount:M,currentMessageLength:t.length});let c=te.validateFiles([...a,...o]);if(!c.isValid){s.displayErrorToast(`Error: ${c.errorMessage}`);return}let l=a.map(e=>ee.convertImageToBase64(e)),u=await Promise.all(l),d=new Date().toISOString(),{skipped_files:f,uploaded_files:p}=o.length>0?await rt({conversationId:G,files:o}):{skipped_files:[],uploaded_files:[]};f.forEach(e=>s.displayErrorToast(e.reason));let m=`${I(n.I18nKey.CHAT_INTERFACE$AUGMENTED_PROMPT_FILES_TITLE)}: ${p.join(`
+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("../../../utils/custom-toast-handlers.cjs");require("../../../constants/server-connection-error.cjs");const c=require("../../../stores/error-message-store.cjs"),l=require("../../../stores/optimistic-user-message-store.cjs"),u=require("../../../stores/goal-store.cjs"),d=require("../../../stores/model-store.cjs"),f=require("../../../contexts/conversation-websocket-context.cjs"),p=require("../../../hooks/use-send-message.cjs"),m=require("../../../hooks/query/use-active-conversation.cjs"),h=require("../../../hooks/use-agent-state.cjs"),ee=require("../../../utils/convert-image-to-base-64.cjs"),te=require("../../../utils/file-validation.cjs"),ne=require("../../../utils/pending-task-message-link.cjs"),re=require("../../../hooks/query/use-task-polling.cjs"),ie=require("../../../hooks/use-tracking.cjs"),ae=require("../../../utils/acp-error-codes.cjs"),oe=require("../../../services/chat-service.cjs"),se=require("./btw-messages.cjs"),ce=require("./goal-status-banner.cjs"),le=require("./model-messages.cjs"),ue=require("./components/resolve-picker-kind.cjs"),de=require("../../../hooks/use-is-archived-conversation.cjs"),g=require("../../shared/loading-spinner.cjs"),fe=require("../../../hooks/use-scroll-to-bottom.cjs"),pe=require("../../../context/scroll-context.cjs"),me=require("./interactive-chat-box.cjs"),he=require("../../../hooks/use-filtered-events.cjs"),ge=require("../../../hooks/use-load-older-events.cjs"),_e=require("../../../hooks/use-auto-refresh-files-on-edit.cjs"),ve=require("./chat-markdown-path-code.cjs"),ye=require("./typing-indicator.cjs"),be=require("./chat-suggestions.cjs"),xe=require("../../../stores/initial-query-store.cjs"),Se=require("../../../hooks/use-handle-build-plan-click.cjs"),Ce=require("../../shared/buttons/scroll-to-bottom-button.cjs"),we=require("./chat-messages-skeleton.cjs"),Te=require("./error-message-banner.cjs"),Ee=require("./skill-install-restart-banner.cjs"),De=require("../../../hooks/use-llm-configured.cjs"),Oe=require("../home/llm-not-configured-banner.cjs"),ke=require("../../conversation-events/chat/messages.cjs"),Ae=require("./pending-user-messages.cjs"),je=require("../../../hooks/mutation/use-unified-upload-files.cjs"),Me=require("./confirmation-mode-enabled.cjs"),Ne=require("./chat-status-indicator.cjs"),Pe=require("../../../hooks/mutation/use-new-conversation-command.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime"),Fe=require("react-router");function Ie(e,t){return e?`github`:t?`replay`:`direct`}function y(){_e.useAutoRefreshFilesOnEdit();let{trackInitialQuerySubmitted:e,trackUserMessageSent:y}=ie.useTracking(),{setMessageToSend:b,conversationMode:x,planContent:S}=o.useConversationStore(),{errorMessage:C,errorCode:w,errorClassification:Le,removeErrorMessage:Re,setErrorMessage:T}=c.useErrorMessageStore(),ze=(0,Fe.useNavigate)(),{isTask:E,taskStatus:D,taskDetail:Be}=re.useTaskPolling(),O=E,k=f.useConversationWebSocket(),{send:Ve}=p.useSendMessage(),{renderableEvents:A,allConversationEvents:j,totalEvents:M,hasSubstantiveAgentActions:N,userEventsExist:P}=he.useFilteredEvents(),He=l.useOptimisticUserMessageStore(e=>e.enqueuePendingMessage),Ue=l.useOptimisticUserMessageStore(e=>e.markPendingMessageError),F=l.useOptimisticUserMessageStore(e=>e.pendingMessages),{t:I}=t.useTranslation(`openhands`),L=_.default.useRef(null),{scrollDomToBottom:R,onChatBodyScroll:z,hitBottom:B,autoScroll:V,setAutoScroll:We,setHitBottom:Ge}=fe.useScrollToBottom(L),{mutate:Ke,isPending:qe}=Pe.useNewConversationCommand(),{curAgentState:H}=h.useAgentState(),{isPlanningAgentRunning:Je}=h.usePlanningAgentState(),{handleBuildPlanClick:Ye}=Se.useHandleBuildPlanClick(),{data:Xe}=m.useActiveConversation(),Ze=Xe?.sandbox_status??null,U=de.useIsArchivedConversation(),{isConfigured:Qe,isLoading:$e}=De.useLlmConfigured(),W=!$e&&!Qe,et=H===r.AgentState.RUNNING||H===r.AgentState.LOADING;_.default.useEffect(()=>{if(et||x!==`plan`||!S)return;let e=e=>{(e.metaKey||e.ctrlKey)&&e.key===`Enter`&&(e.preventDefault(),e.stopPropagation(),Ye(e),R())};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[et,x,S,Ye,R]);let{selectedRepository:tt,replayJson:nt}=xe.useInitialQueryStore(),{conversationId:G}=a.useOptionalConversationId(),rt=u.useGoalStore(e=>{let t=G?e.statusByConversation[G]:void 0;return t?.active?`${t.iteration}:${t.status}`:null}),{mutateAsync:it}=je.useUnifiedUploadFiles(),{isLoading:K,hasMore:q,loadOlder:at}=ge.useLoadOlderEvents(G),J=_.default.useRef(null),Y=_.default.useCallback(e=>{if(O||K||!q)return;let t=e.scrollTop<=80,r=e.scrollHeight<=e.clientHeight+80;!t&&!r||(J.current={scrollHeight:e.scrollHeight,scrollTop:e.scrollTop},at().catch(e=>{J.current=null,T(e instanceof Error&&e.message?e.message:I(n.I18nKey.ERROR$GENERIC))}))},[q,K,O,at,T,I]),ot=_.default.useCallback(e=>{e.deltaY<0&&e.currentTarget.scrollTop<=0&&Y(e.currentTarget)},[Y]),X=_.default.useMemo(()=>G?F.some(e=>ne.matchesPendingConversationId(G,e.conversationId)):!1,[F,G]),st=d.useModelStore(e=>G?(e.entriesByConversation[G]?.length??0)>0:!1),ct=ue.hasConversationStarted({isLoadingHistory:k?.isLoadingHistory===!0,hasUserEvents:P,hasPendingUserMessages:X,hasSubstantiveAgentActions:N,hasModelEntries:st}),lt=j.length>0||X||!k?.isLoadingHistory,ut=!!G,Z=!lt&&!E,dt=async(t,r,i)=>{if(t.trim()===`/new`){if(!G){s.displayErrorToast(I(n.I18nKey.CONVERSATION$CLEAR_NO_ID));return}if(M===0){s.displayErrorToast(I(n.I18nKey.CONVERSATION$CLEAR_EMPTY));return}if(qe)return;Ke();return}let a=[...r],o=[...i];M===0?e({entryPoint:Ie(tt!==null,nt!==null),queryCharacterLength:t.length,replayJsonSize:nt?.length}):y({sessionMessageCount:M,currentMessageLength:t.length});let c=te.validateFiles([...a,...o]);if(!c.isValid){s.displayErrorToast(`Error: ${c.errorMessage}`);return}let l=a.map(e=>ee.convertImageToBase64(e)),u=await Promise.all(l),d=new Date().toISOString(),{skipped_files:f,uploaded_files:p}=o.length>0?await it({conversationId:G,files:o}):{skipped_files:[],uploaded_files:[]};f.forEach(e=>s.displayErrorToast(e.reason));let m=`${I(n.I18nKey.CHAT_INTERFACE$AUGMENTED_PROMPT_FILES_TITLE)}: ${p.join(`
-`)}`,h=p.length>0?`${t}\n\n${m}`:t,g=He({conversationId:G,text:t,content:h,imageUrls:u,fileUrls:p,timestamp:d});R(),b(``);try{await Ve(ae.createChatMessage(h,u,p,d))}catch(e){Ue(g,e instanceof Error?e.message:I(n.I18nKey.CHAT_INTERFACE$FAILED_TO_SEND_MESSAGE))}};_.default.useEffect(()=>{if(J.current&&L.current){let{scrollHeight:e,scrollTop:t}=J.current,n=L.current,r=n.scrollHeight-e;r>0&&(n.scrollTop=t+r),J.current=null;return}V&&R()},[A.length,X,nt,R]);let dt=_.default.useRef(Y);_.default.useEffect(()=>{dt.current=Y}),_.default.useEffect(()=>{let e=L.current;e&&dt.current(e)},[A.length,q]);let ft={scrollRef:L,autoScroll:V,setAutoScroll:We,scrollDomToBottom:R,hitBottom:B,setHitBottom:Ge,onChatBodyScroll:z},Q=H===r.AgentState.LOADING||H===r.AgentState.INIT,pt=H===r.AgentState.STOPPED,$=H===r.AgentState.PAUSED,mt=i.getStatusColor({isPausing:$,isTask:E,taskStatus:D,isStartingStatus:Q,isStopStatus:pt,curAgentState:H}),ht=i.getStatusText({isPausing:$,isTask:E,taskStatus:D,taskDetail:Be,isStartingStatus:Q,isStopStatus:pt,curAgentState:H,errorMessage:C,t:I});return(0,v.jsx)(ve.WorkspaceFilesForChatProvider,{children:(0,v.jsx)(pe.ScrollProvider,{value:ft,children:(0,v.jsxs)(`div`,{className:`relative flex h-full flex-col justify-between px-4`,"data-testid":`chat-interface`,children:[!N&&!X&&!P&&!ot&&!Z&&!O&&M===0&&!U&&!W&&(0,v.jsx)(be.ChatSuggestions,{onSuggestionsClick:e=>b(e)}),(0,v.jsxs)(`div`,{ref:L,"data-testid":`chat-scroll-container`,onScroll:e=>{z(e.currentTarget),Y(e.currentTarget)},onWheel:at,className:`custom-scrollbar-always flex min-h-0 grow flex-col gap-2 overflow-x-hidden overflow-y-auto px-0 pt-4 pb-8 md:px-4`,children:[Z&&lt&&(0,v.jsx)(we.ChatMessagesSkeleton,{}),Z&&!lt&&(0,v.jsx)(`div`,{className:`flex justify-center`,"data-testid":`loading-spinner`,children:(0,v.jsx)(de.LoadingSpinner,{size:`small`})}),K&&(0,v.jsxs)(`div`,{className:`flex items-center justify-center gap-2 py-3 text-sm text-neutral-400`,"data-testid":`loading-older-events`,children:[(0,v.jsx)(de.LoadingSpinner,{size:`small`}),(0,v.jsx)(`span`,{children:I(n.I18nKey.CHAT_INTERFACE$FETCHING_OLDER_MESSAGES)})]}),(0,v.jsx)(ce.ModelMessages,{conversationId:G,anchorEventId:null}),ct&&A.length>0&&(0,v.jsx)(ke.Messages,{messages:A,allEvents:j}),(0,v.jsx)(Ae.PendingUserMessages,{}),(0,v.jsx)(se.GoalStatusBanner,{conversationId:G})]}),(0,v.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-[6px] pb-4`,children:[(0,v.jsx)(Ee.SkillInstallRestartBanner,{conversationId:G}),(0,v.jsx)(oe.BtwMessages,{conversationId:G}),C&&(0,v.jsx)(Te.ErrorMessageBanner,{message:C,code:w,classification:Le,onDismiss:Re,onRetry:C===`Unable to connect to server`?()=>k?.reconnect():void 0,onReauth:ie.isAcpAuthErrorCode(w)?()=>ze(`/settings/agents`):void 0}),W&&!U&&(0,v.jsx)(Oe.LlmNotConfiguredBanner,{}),U?(0,v.jsxs)(`div`,{"data-testid":`archived-conversation-banner`,className:`mx-1 px-4 py-3 rounded-lg bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)]`,children:[(0,v.jsx)(`p`,{className:`text-xs font-semibold text-[var(--oh-foreground)]`,children:I(Xe===`ERROR`?n.I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_TITLE:n.I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_TITLE)}),(0,v.jsx)(`p`,{className:`text-xs text-[var(--oh-muted)] mt-0.5`,children:I(Xe===`ERROR`?n.I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_DESCRIPTION:n.I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_DESCRIPTION)})]}):(0,v.jsxs)(`div`,{className:`relative`,children:[(0,v.jsx)(`div`,{className:`pointer-events-none absolute inset-x-0 bottom-full mb-1 z-20`,children:(0,v.jsxs)(`div`,{className:`flex justify-between relative`,children:[(0,v.jsxs)(`div`,{className:`flex items-end gap-1 pointer-events-auto`,children:[(0,v.jsx)(Me.default,{}),Q&&(0,v.jsx)(Ne.default,{statusColor:mt,status:ht})]}),B?H===r.AgentState.RUNNING&&(0,v.jsx)(`div`,{className:`pointer-events-none absolute inset-x-9 bottom-0 flex justify-center`,children:(0,v.jsx)(ye.TypingIndicator,{events:j})}):(0,v.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,v.jsx)(Ce.ScrollToBottomButton,{onClick:R})})]})}),(0,v.jsx)(me.InteractiveChatBox,{onSubmit:ut,disabled:qe||W,hasStartedConversation:st})]})]})]})})})}exports.ChatInterface=y;
+`)}`,h=p.length>0?`${t}\n\n${m}`:t,ne=He({conversationId:G,text:t,content:h,imageUrls:u,fileUrls:p,timestamp:d});R(),b(``);try{await Ve(oe.createChatMessage(h,u,p,d))}catch(e){Ue(ne,e instanceof Error?e.message:I(n.I18nKey.CHAT_INTERFACE$FAILED_TO_SEND_MESSAGE))}};_.default.useEffect(()=>{if(J.current&&L.current){let{scrollHeight:e,scrollTop:t}=J.current,n=L.current,r=n.scrollHeight-e;r>0&&(n.scrollTop=t+r),J.current=null;return}V&&R()},[A.length,X,rt,R]);let ft=_.default.useRef(Y);_.default.useEffect(()=>{ft.current=Y}),_.default.useEffect(()=>{let e=L.current;e&&ft.current(e)},[A.length,q]);let pt={scrollRef:L,autoScroll:V,setAutoScroll:We,scrollDomToBottom:R,hitBottom:B,setHitBottom:Ge,onChatBodyScroll:z},Q=H===r.AgentState.LOADING||H===r.AgentState.INIT,mt=H===r.AgentState.STOPPED,$=H===r.AgentState.PAUSED,ht=i.getStatusColor({isPausing:$,isTask:E,taskStatus:D,isStartingStatus:Q,isStopStatus:mt,curAgentState:H}),gt=i.getStatusText({isPausing:$,isTask:E,taskStatus:D,taskDetail:Be,isStartingStatus:Q,isStopStatus:mt,curAgentState:H,errorMessage:C,t:I});return(0,v.jsx)(ve.WorkspaceFilesForChatProvider,{children:(0,v.jsx)(pe.ScrollProvider,{value:pt,children:(0,v.jsxs)(`div`,{className:`relative flex h-full flex-col justify-between px-4`,"data-testid":`chat-interface`,children:[!N&&!X&&!P&&!st&&!Z&&!O&&M===0&&!U&&!W&&(0,v.jsx)(be.ChatSuggestions,{onSuggestionsClick:e=>b(e)}),(0,v.jsxs)(`div`,{ref:L,"data-testid":`chat-scroll-container`,onScroll:e=>{z(e.currentTarget),Y(e.currentTarget)},onWheel:ot,className:`custom-scrollbar-always flex min-h-0 grow flex-col gap-2 overflow-x-hidden overflow-y-auto px-0 pt-4 pb-8 md:px-4`,children:[Z&&ut&&(0,v.jsx)(we.ChatMessagesSkeleton,{}),Z&&!ut&&(0,v.jsx)(`div`,{className:`flex justify-center`,"data-testid":`loading-spinner`,children:(0,v.jsx)(g.LoadingSpinner,{size:`small`})}),K&&(0,v.jsxs)(`div`,{className:`flex items-center justify-center gap-2 py-3 text-sm text-neutral-400`,"data-testid":`loading-older-events`,children:[(0,v.jsx)(g.LoadingSpinner,{size:`small`}),(0,v.jsx)(`span`,{children:I(n.I18nKey.CHAT_INTERFACE$FETCHING_OLDER_MESSAGES)})]}),(0,v.jsx)(le.ModelMessages,{conversationId:G,anchorEventId:null}),lt&&A.length>0&&(0,v.jsx)(ke.Messages,{messages:A,allEvents:j}),(0,v.jsx)(Ae.PendingUserMessages,{}),(0,v.jsx)(ce.GoalStatusBanner,{conversationId:G})]}),(0,v.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-[6px] pb-4`,children:[(0,v.jsx)(Ee.SkillInstallRestartBanner,{conversationId:G}),(0,v.jsx)(se.BtwMessages,{conversationId:G}),C&&(0,v.jsx)(Te.ErrorMessageBanner,{message:C,code:w,classification:Le,onDismiss:Re,onRetry:C===`Unable to connect to server`?()=>k?.reconnect():void 0,onReauth:ae.isAcpAuthErrorCode(w)?()=>ze(`/settings/agents`):void 0}),W&&!U&&(0,v.jsx)(Oe.LlmNotConfiguredBanner,{}),U?(0,v.jsxs)(`div`,{"data-testid":`archived-conversation-banner`,className:`mx-1 px-4 py-3 rounded-lg bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)]`,children:[(0,v.jsx)(`p`,{className:`text-xs font-semibold text-[var(--oh-foreground)]`,children:I(Ze===`ERROR`?n.I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_TITLE:n.I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_TITLE)}),(0,v.jsx)(`p`,{className:`text-xs text-[var(--oh-muted)] mt-0.5`,children:I(Ze===`ERROR`?n.I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_DESCRIPTION:n.I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_DESCRIPTION)})]}):(0,v.jsxs)(`div`,{className:`relative`,children:[(0,v.jsx)(`div`,{className:`pointer-events-none absolute inset-x-0 bottom-full mb-1 z-20`,children:(0,v.jsxs)(`div`,{className:`flex justify-between relative`,children:[(0,v.jsxs)(`div`,{className:`flex items-end gap-1 pointer-events-auto`,children:[(0,v.jsx)(Me.default,{}),Q&&(0,v.jsx)(Ne.default,{statusColor:ht,status:gt})]}),B?(H===r.AgentState.RUNNING||Je)&&(0,v.jsx)(`div`,{className:`pointer-events-none absolute inset-x-9 bottom-0 flex justify-center`,children:(0,v.jsx)(ye.TypingIndicator,{events:j})}):(0,v.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,v.jsx)(Ce.ScrollToBottomButton,{onClick:R})})]})}),(0,v.jsx)(me.InteractiveChatBox,{onSubmit:dt,disabled:qe||W,hasStartedConversation:ct})]})]})]})})})}exports.ChatInterface=y;
 //# sourceMappingURL=chat-interface.cjs.map