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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"backend-form-modal.js","names":[],"sources":["../../../../src/components/features/backends/backend-form-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useTranslation } from \"react-i18next\";\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport OpenHandsLogoWhite from \"#/assets/branding/openhands-logo-white.svg?react\";\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 { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { SettingsInput } from \"#/components/features/settings/settings-input\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport ChevronDownSmallIcon from \"#/icons/chevron-down-small.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend, BackendKind } from \"#/api/backend-registry/types\";\nimport { cn } from \"#/utils/utils\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\nexport type BackendFormMode = \"add\" \| \"edit\";\n\ninterface BackendFormModalProps {\n mode: BackendFormMode;\n /** Required when `mode === \"edit\"`. /\n backend?: Backend;\n onClose: () => void;\n}\n\nfunction inferKindFromHost(host: string): BackendKind {\n const trimmed = host.trim().toLowerCase();\n if (trimmed.includes(\"all-hands.dev\") \|\| trimmed.includes(\"openhands.dev\")) {\n return \"cloud\";\n }\n return \"local\";\n}\n\n/\n Returns true for hostnames that represent a local / private-network address.\n * Used by normalizeHost to choose http:// instead of https://.\n /\nfunction isLocalAddress(hostname: string): boolean {\n // Strip IPv6 bracket notation: [::1] → ::1\n const h = hostname.toLowerCase().replace(/^\\[\|\\]$/g, \"\");\n // IPv6 loopback, any-address, and named loopback\n if (h === \"localhost\" \|\| h === \"::1\" \|\| h === \"::\" \|\| h === \"0.0.0.0\")\n return true;\n // 127.x.x.x loopback range + IPv4-mapped loopback (::ffff:127.x.x.x)\n if (/^127\\./.test(h) \|\| /^::ffff:127\\./i.test(h)) return true;\n // RFC 1918 private ranges\n if (/^10\\./.test(h)) return true;\n if (/^192\\.168\\./.test(h)) return true;\n if (/^172\\.(1[6-9]\|2\\d\|3[01])\\./.test(h)) return true;\n // IPv6 link-local (fe80::/10) and unique local (fc00::/7)\n if (/^fe[89ab][0-9a-f]:/i.test(h)) return true;\n if (/^f[cd][0-9a-f]{2}:/i.test(h)) return true;\n // mDNS / Bonjour (.local)\n if (h.endsWith(\".local\")) return true;\n // Single-label hostnames (no dots, no colons) are local network names.\n // Colons are excluded so bare IPv6 addresses don't accidentally match.\n if (!h.includes(\".\") && !h.includes(\":\")) return true;\n return false;\n}\n\nfunction normalizeHost(host: string): string {\n const trimmed = host.trim().replace(/\\/+$/, \"\");\n if (!trimmed) return \"\";\n // Already has an explicit scheme — respect it.\n if (/^https?:\\/\\//i.test(trimmed)) return trimmed;\n // Extract the pure hostname for scheme selection, handling three cases:\n // [::1]:8080 → bracket IPv6 notation → extract ::1\n // ::1 → bare IPv6 (multiple colons, no bracket) → whole string\n // host:port → regular host:port → part before the colon\n const bracketMatch = trimmed.match(/^\\[([^\\]]+)\\]/);\n const hostname = bracketMatch\n ? bracketMatch[1]\n : (trimmed.match(/:/g) ?? []).length > 1\n ? trimmed\n : trimmed.split(\":\")[0];\n const scheme = isLocalAddress(hostname) ? \"http\" : \"https\";\n return `${scheme}://${trimmed}`;\n}\n\n/\n Returns true when `host` represents a reachable backend URL.\n \n Rules (applied in order):\n * 1. Must be non-empty after trimming.\n * 2. Must contain no whitespace — spaces can never appear in a host/port.\n * 3. After normalisation (bare hosts get `https://` prepended), must parse\n * as a valid http or https URL with a non-empty hostname.\n /\nfunction isValidHostUrl(host: string): boolean {\n const trimmed = host.trim();\n if (!trimmed) return false;\n // Spaces anywhere in the input are an immediate rejection.\n if (/\\s/.test(trimmed)) return false;\n const normalized = normalizeHost(trimmed);\n if (!normalized) return false;\n try {\n const url = new URL(normalized);\n return (\n (url.protocol === \"http:\" \|\| url.protocol === \"https:\") &&\n url.hostname.length > 0\n );\n } catch {\n return false;\n }\n}\n\nconst DEFAULT_OPENHANDS_CLOUD_HOST = \"https://app.all-hands.dev\";\n\n/\n Live status row for the edit form: shows a connection dot, a\n * \"Local\"/\"Cloud\" label, and the agent server's reported version when\n * available. Replaces the legacy local/cloud radio fieldset (kind is\n * now inferred from the host).\n /\nfunction BackendStatusBadge({\n backend,\n testIdRoot,\n}: {\n backend: Backend;\n testIdRoot: string;\n}) {\n const { t } = useTranslation(\"openhands\");\n const healthByBackendId = useBackendsHealth([backend]);\n const health = healthByBackendId[backend.id];\n const isConnected = health?.isConnected ?? null;\n const disabled = health?.disabled === true;\n const consecutiveFailures = health?.consecutiveFailures ?? 0;\n const lastError = health?.lastError ?? null;\n\n const { data: version } = useQuery({\n queryKey: [\"backend-version\", backend.host, backend.apiKey],\n queryFn: async () => {\n const info = await new ServerClient(\n getAgentServerClientOptions({\n host: backend.host,\n sessionApiKey: backend.apiKey \|\| null,\n timeout: 5000,\n }),\n ).getServerInfo();\n return info.version ?? null;\n },\n retry: false,\n staleTime: 60_000,\n enabled: backend.kind === \"local\" && !disabled,\n });\n\n let statusLabel: string;\n if (isConnected === true) {\n statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CONNECTED);\n } else if (isConnected === false) {\n statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_DISCONNECTED);\n } else {\n statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING);\n }\n\n const kindLabel =\n backend.kind === \"cloud\"\n ? t(I18nKey.BACKEND$KIND_CLOUD)\n : t(I18nKey.BACKEND$KIND_LOCAL);\n\n return (\n <div className=\"flex flex-col gap-2\">\n <div\n data-testid={`${testIdRoot}-status`}\n className=\"flex items-center gap-3 text-sm\"\n >\n <BackendStatusDot isConnected={isConnected} />\n <span className=\"text-white\" data-testid={`${testIdRoot}-status-label`}>\n {statusLabel}\n </span>\n <span className=\"text-tertiary-alt\">·</span>\n <span className=\"text-[var(--oh-text-tertiary)]\">{kindLabel}</span>\n {version ? (\n <span\n className=\"text-xs text-[var(--oh-muted)]\"\n data-testid={`${testIdRoot}-version`}\n >\n {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n </span>\n ) : null}\n </div>\n\n {disabled ? (\n <div\n data-testid={`${testIdRoot}-status-error`}\n className=\"flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm\"\n >\n <span className=\"font-semibold text-red-300\">\n {t(I18nKey.BACKEND$HEALTH_FAILED_TITLE)}\n </span>\n <span className=\"text-xs text-[var(--oh-text-tertiary)]\">\n {t(I18nKey.BACKEND$HEALTH_FAILED_DETAIL, {\n count: consecutiveFailures,\n })}\n </span>\n {lastError ? (\n <span\n data-testid={`${testIdRoot}-status-error-message`}\n className=\"text-xs text-red-300 whitespace-pre-wrap break-words\"\n >\n {lastError}\n </span>\n ) : null}\n </div>\n ) : null}\n </div>\n );\n}\n\nexport interface BackendFormProps {\n mode: BackendFormMode;\n /* Required when `mode === \"edit\"`. /\n backend?: Backend;\n /\n Called after the form is submitted and the backend has been\n * persisted. Use this to dismiss a containing modal, advance an\n * onboarding step, etc.\n /\n onSubmitted: () => void;\n /\n Optional render slot rendered in place of the default\n * Save / Cancel button row, so callers (e.g. the onboarding flow)\n * can re-skin the action area while still owning submission via the\n * standard `<form onSubmit>` flow. Receives the form's submit-ready\n * state.\n /\n renderActions?: (state: {\n canSubmit: boolean;\n testIdRoot: string;\n }) => React.ReactNode;\n /* Used to disambiguate test ids across the same screen. /\n testIdRoot?: string;\n}\n\n/\n Reusable form body for adding / editing a backend. Renders the\n * common name / host / API-key inputs plus the kind selector\n * (radio buttons in `add` mode, status badge in `edit` mode).\n \n Rendered as a `<form>`, so consumers should put any extra controls\n * either inside `renderActions` or as siblings inside a wrapping\n * element — but submission flows through the standard form submit so\n * Enter-to-submit still works.\n /\nexport function BackendForm({\n mode,\n backend,\n onSubmitted,\n renderActions,\n testIdRoot: explicitTestIdRoot,\n}: BackendFormProps) {\n const { t } = useTranslation(\"openhands\");\n const { addBackend, updateBackend } = useActiveBackendContext();\n\n const [name, setName] = React.useState(backend?.name ?? \"\");\n const [host, setHost] = React.useState(backend?.host ?? \"\");\n const [apiKey, setApiKey] = React.useState(backend?.apiKey ?? \"\");\n\n // Inline validation: only show errors after the user has left a field.\n const [nameTouched, setNameTouched] = React.useState(false);\n const [hostTouched, setHostTouched] = React.useState(false);\n\n // Kind is inferred from the host on every change.\n const kind: BackendKind = inferKindFromHost(host);\n\n const testIdRoot =\n explicitTestIdRoot ?? (mode === \"edit\" ? \"edit-backend\" : \"add-backend\");\n\n const canSubmit =\n name.trim().length > 0 &&\n isValidHostUrl(host) &&\n (kind === \"local\" \|\| apiKey.trim().length > 0);\n\n // Error messages — only surfaced after the user has blurred the field.\n const nameError =\n nameTouched && !name.trim() ? t(I18nKey.BACKEND$NAME_REQUIRED) : undefined;\n const hostError = hostTouched\n ? !host.trim()\n ? t(I18nKey.BACKEND$HOST_REQUIRED)\n : !isValidHostUrl(host)\n ? t(I18nKey.BACKEND$HOST_INVALID)\n : undefined\n : undefined;\n\n const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n if (!canSubmit) {\n // Mark all validated fields as touched so inline errors become visible\n // (e.g. user pressed Enter before filling required fields).\n setNameTouched(true);\n setHostTouched(true);\n return;\n }\n\n const payload = {\n name: name.trim(),\n host: normalizeHost(host),\n apiKey: apiKey.trim(),\n kind,\n };\n\n if (mode === \"edit\" && backend) {\n updateBackend(backend.id, payload);\n } else {\n addBackend(payload);\n }\n\n onSubmitted();\n };\n\n return (\n <form\n data-testid={`${testIdRoot}-form`}\n onSubmit={handleSubmit}\n className=\"flex flex-col gap-4\"\n >\n <SettingsInput\n testId={`${testIdRoot}-name`}\n name={`${testIdRoot}-name`}\n type=\"text\"\n label={t(I18nKey.BACKEND$NAME_LABEL)}\n value={name}\n onChange={setName}\n onBlur={() => setNameTouched(true)}\n placeholder=\"Production\"\n className=\"w-full\"\n showRequiredTag\n error={nameError}\n />\n\n <SettingsInput\n testId={`${testIdRoot}-host`}\n name={`${testIdRoot}-host`}\n type=\"text\"\n label={t(I18nKey.BACKEND$HOST_LABEL)}\n value={host}\n onChange={setHost}\n onBlur={() => setHostTouched(true)}\n placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n className=\"w-full\"\n showRequiredTag\n error={hostError}\n />\n\n <SettingsInput\n testId={`${testIdRoot}-api-key`}\n name={`${testIdRoot}-api-key`}\n type=\"password\"\n label={t(I18nKey.BACKEND$KEY_LABEL)}\n value={apiKey}\n onChange={setApiKey}\n placeholder=\"\"\n className=\"w-full\"\n />\n\n {mode === \"edit\" && backend && (\n <BackendStatusBadge backend={backend} testIdRoot={testIdRoot} />\n )}\n\n {renderActions ? (\n renderActions({ canSubmit, testIdRoot })\n ) : (\n <div className=\"flex justify-end gap-2 mt-2 w-full\">\n <BrandButton\n type=\"button\"\n variant=\"secondary\"\n onClick={onSubmitted}\n testId={`${testIdRoot}-cancel`}\n >\n {t(I18nKey.BUTTON$CANCEL)}\n </BrandButton>\n <BrandButton\n type=\"submit\"\n variant=\"primary\"\n isDisabled={!canSubmit}\n testId={`${testIdRoot}-submit`}\n >\n {t(I18nKey.BACKEND$SAVE)}\n </BrandButton>\n </div>\n )}\n </form>\n );\n}\n\n// ── Add-mode two-column layout ──────────────────────────────────────\n\n/\n Left column of the \"Add a Backend\" modal: manual connection via\n * Host + API Key. Designed for self-hosted agent servers and\n * self-hosted OpenHands Cloud with API key auth.\n /\nfunction ManualConnectionColumn({ onClose }: { onClose: () => void }) {\n const { t } = useTranslation(\"openhands\");\n const { addBackend } = useActiveBackendContext();\n\n const [name, setName] = React.useState(\"\");\n const [host, setHost] = React.useState(\"\");\n const [apiKey, setApiKey] = React.useState(\"\");\n\n const kind: BackendKind = inferKindFromHost(host);\n const canSubmit =\n name.trim().length > 0 &&\n isValidHostUrl(host) &&\n (kind === \"local\" \|\| apiKey.trim().length > 0);\n\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (!canSubmit) return;\n addBackend({\n name: name.trim(),\n host: normalizeHost(host),\n apiKey: apiKey.trim(),\n kind,\n });\n onClose();\n };\n\n return (\n <form\n data-testid=\"add-backend-form\"\n onSubmit={handleSubmit}\n className=\"flex flex-col gap-4 flex-1 min-w-0\"\n >\n <div className=\"flex flex-col gap-1\">\n <SettingsInput\n testId=\"add-backend-name\"\n name=\"add-backend-name\"\n type=\"text\"\n label={t(I18nKey.BACKEND$NAME_LABEL)}\n value={name}\n onChange={setName}\n placeholder=\"e.g. My Server\"\n className=\"w-full\"\n />\n <p className=\"text-xs text-[var(--oh-muted)]\">\n {t(I18nKey.BACKEND$NAME_HELPER)}\n </p>\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <SettingsInput\n testId=\"add-backend-host\"\n name=\"add-backend-host\"\n type=\"text\"\n label={t(I18nKey.BACKEND$HOST_LABEL)}\n value={host}\n onChange={setHost}\n placeholder=\"http://localhost:8000\"\n className=\"w-full\"\n />\n <p\n className=\"text-xs text-[var(--oh-muted)]\"\n data-testid=\"add-backend-host-helper\"\n >\n {t(I18nKey.BACKEND$HOST_HELPER)}\n </p>\n </div>\n\n <SettingsInput\n testId=\"add-backend-api-key\"\n name=\"add-backend-api-key\"\n type=\"password\"\n label={t(I18nKey.BACKEND$KEY_LABEL)}\n value={apiKey}\n onChange={setApiKey}\n placeholder=\"sk-••••••••••\"\n className=\"w-full\"\n />\n\n <BrandButton\n type=\"submit\"\n variant=\"secondary\"\n isDisabled={!canSubmit}\n testId=\"add-backend-submit\"\n className=\"w-full text-center\"\n >\n {t(I18nKey.BACKEND$CONNECT)}\n </BrandButton>\n </form>\n );\n}\n\n/\n Right column of the \"Add a Backend\" modal: one-click OAuth login\n * with OpenHands Cloud. Includes an \"Advanced\" disclosure for\n * users who self-host OpenHands Cloud and need to override the host.\n /\nfunction CloudLoginColumn({ onClose }: { onClose: () => void }) {\n const { t } = useTranslation(\"openhands\");\n const { addBackend } = useActiveBackendContext();\n\n const [advancedOpen, setAdvancedOpen] = React.useState(false);\n const [customHost, setCustomHost] = React.useState(\"\");\n\n const effectiveHost = customHost.trim() \|\| DEFAULT_OPENHANDS_CLOUD_HOST;\n\n const handleLoginSuccess = (apiKey: string) => {\n addBackend({\n name: \"OpenHands Cloud\",\n host: normalizeHost(effectiveHost),\n apiKey,\n kind: \"cloud\",\n });\n onClose();\n };\n\n return (\n <div className=\"flex flex-1 min-w-0 flex-col items-center gap-3\">\n <div className=\"flex flex-col items-center gap-1\">\n <OpenHandsLogoWhite width={56} height={56} aria-hidden />\n\n <h4\n className=\"text-lg font-medium text-white\"\n data-testid=\"add-backend-cloud-title\"\n >\n {t(I18nKey.BACKEND$CLOUD_TITLE)}\n </h4>\n </div>\n\n <p className=\"text-center text-sm leading-relaxed text-[var(--oh-muted)]\">\n {t(I18nKey.BACKEND$CLOUD_DESCRIPTION)}\n </p>\n\n <DeviceFlowAuth\n host={effectiveHost}\n onSuccess={handleLoginSuccess}\n testIdRoot=\"add-backend\"\n />\n\n <div className=\"w-full\">\n <button\n type=\"button\"\n onClick={() => setAdvancedOpen((open) => !open)}\n aria-expanded={advancedOpen}\n data-testid=\"add-backend-advanced-toggle\"\n className=\"flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2\"\n >\n <span>{t(I18nKey.BACKEND$ADVANCED)}</span>\n <ChevronDownSmallIcon\n className={cn(\n \"h-4 w-4 shrink-0 text-muted transition-transform\",\n advancedOpen && \"rotate-180\",\n )}\n aria-hidden\n />\n </button>\n <div\n className={cn(\n \"pt-2\",\n !advancedOpen && \"pointer-events-none invisible\",\n )}\n aria-hidden={!advancedOpen}\n >\n <SettingsInput\n testId=\"add-backend-cloud-host\"\n name=\"add-backend-cloud-host\"\n type=\"text\"\n label={t(I18nKey.BACKEND$HOST_LABEL)}\n value={customHost}\n onChange={setCustomHost}\n placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n className=\"w-full\"\n />\n <p className=\"mt-1 text-xs text-[var(--oh-muted)]\">\n {t(I18nKey.BACKEND$LOGIN_CLOUD_HINT)}\n </p>\n </div>\n </div>\n </div>\n );\n}\n\n// ── Modal wrappers ──────────────────────────────────────────────────\n\n/\n Modal wrapper. In add mode it renders a two-column layout\n * (manual connection \| OR \| Cloud login). In edit mode it wraps\n * the standard `BackendForm`.\n /\nexport function BackendFormModal({\n mode,\n backend,\n onClose,\n}: BackendFormModalProps) {\n const { t } = useTranslation(\"openhands\");\n\n if (mode === \"add\") {\n return (\n <ModalBackdrop\n onClose={onClose}\n closeOnEscape={false}\n aria-label={t(I18nKey.BACKEND$ADD_TITLE)}\n >\n <div\n data-testid=\"add-backend-modal\"\n className={cn(\n \"relative rounded-xl border border-[var(--oh-border)] bg-base-secondary\",\n modalWidthClassName(\"xl\"),\n MODAL_MAX_WIDTH_VIEWPORT,\n )}\n >\n <ModalCloseButton onClose={onClose} testId=\"add-backend-close\" />\n {/ Header /}\n <div className=\"px-6 pt-6 pb-2 pr-12\">\n <h2 className=\"text-lg font-semibold\">\n {t(I18nKey.BACKEND$ADD_TITLE)}\n </h2>\n </div>\n\n {/ Two-column body /}\n <div className=\"flex gap-6 px-6 pb-6 pt-2\">\n {/ Left: manual connection /}\n <div className=\"flex-1 min-w-0\">\n <ManualConnectionColumn onClose={onClose} />\n </div>\n\n {/ Vertical OR divider /}\n <div className=\"flex shrink-0 flex-col items-center\">\n <div className=\"flex-1 w-px bg-[var(--oh-border)]\" />\n <span className=\"py-3 text-xs uppercase text-[var(--oh-muted)]\">\n {t(I18nKey.BACKEND$LOGIN_OR)}\n </span>\n <div className=\"flex-1 w-px bg-[var(--oh-border)]\" />\n </div>\n\n {/ Right: cloud login */}\n <div className=\"flex-1 min-w-0\">\n <CloudLoginColumn onClose={onClose} />\n </div>\n </div>\n </div>\n </ModalBackdrop>\n );\n }\n\n // Edit mode — single-column form (unchanged)\n const testIdRoot = \"edit-backend\";\n return (\n <ModalBackdrop\n onClose={onClose}\n closeOnEscape={false}\n aria-label={t(I18nKey.BACKEND$EDIT_TITLE)}\n >\n <div\n data-testid={`${testIdRoot}-modal`}\n className={cn(\n \"relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]\",\n modalWidthClassName(\"md\"),\n )}\n >\n <ModalCloseButton onClose={onClose} testId={`${testIdRoot}-close`} />\n <h2 className=\"pr-6 text-lg font-semibold\">\n {t(I18nKey.BACKEND$EDIT_TITLE)}\n </h2>\n <BackendForm\n mode=\"edit\"\n backend={backend}\n onSubmitted={onClose}\n testIdRoot={testIdRoot}\n />\n </div>\n </ModalBackdrop>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"backend-form-modal.js","names":[],"sources":["../../../../src/components/features/backends/backend-form-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useTranslation } from \"react-i18next\";\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport OpenHandsLogoWhite from \"#/assets/branding/openhands-logo-white.svg?react\";\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 { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { SettingsInput } from \"#/components/features/settings/settings-input\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport ChevronDownSmallIcon from \"#/icons/chevron-down-small.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend, BackendKind } from \"#/api/backend-registry/types\";\nimport { cn } from \"#/utils/utils\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\nexport type BackendFormMode = \"add\" \| \"edit\";\n\ninterface BackendFormModalProps {\n mode: BackendFormMode;\n /** Required when `mode === \"edit\"`. /\n backend?: Backend;\n onClose: () => void;\n}\n\nfunction inferKindFromHost(host: string): BackendKind {\n const trimmed = host.trim().toLowerCase();\n if (trimmed.includes(\"all-hands.dev\") \|\| trimmed.includes(\"openhands.dev\")) {\n return \"cloud\";\n }\n return \"local\";\n}\n\n/\n Returns true for hostnames that represent a local / private-network address.\n * Used by normalizeHost to choose http:// instead of https://.\n /\nfunction isLocalAddress(hostname: string): boolean {\n // Strip IPv6 bracket notation: [::1] → ::1\n const h = hostname.toLowerCase().replace(/^\\[\|\\]$/g, \"\");\n // IPv6 loopback, any-address, and named loopback\n if (h === \"localhost\" \|\| h === \"::1\" \|\| h === \"::\" \|\| h === \"0.0.0.0\")\n return true;\n // 127.x.x.x loopback range + IPv4-mapped loopback (::ffff:127.x.x.x)\n if (/^127\\./.test(h) \|\| /^::ffff:127\\./i.test(h)) return true;\n // RFC 1918 private ranges\n if (/^10\\./.test(h)) return true;\n if (/^192\\.168\\./.test(h)) return true;\n if (/^172\\.(1[6-9]\|2\\d\|3[01])\\./.test(h)) return true;\n // IPv6 link-local (fe80::/10) and unique local (fc00::/7)\n if (/^fe[89ab][0-9a-f]:/i.test(h)) return true;\n if (/^f[cd][0-9a-f]{2}:/i.test(h)) return true;\n // mDNS / Bonjour (.local)\n if (h.endsWith(\".local\")) return true;\n // Single-label hostnames (no dots, no colons) are local network names.\n // Colons are excluded so bare IPv6 addresses don't accidentally match.\n if (!h.includes(\".\") && !h.includes(\":\")) return true;\n return false;\n}\n\nfunction normalizeHost(host: string): string {\n const trimmed = host.trim().replace(/\\/+$/, \"\");\n if (!trimmed) return \"\";\n // Already has an explicit scheme — respect it.\n if (/^https?:\\/\\//i.test(trimmed)) return trimmed;\n // Extract the pure hostname for scheme selection, handling three cases:\n // [::1]:8080 → bracket IPv6 notation → extract ::1\n // ::1 → bare IPv6 (multiple colons, no bracket) → whole string\n // host:port → regular host:port → part before the colon\n const bracketMatch = trimmed.match(/^\\[([^\\]]+)\\]/);\n const hostname = bracketMatch\n ? bracketMatch[1]\n : (trimmed.match(/:/g) ?? []).length > 1\n ? trimmed\n : trimmed.split(\":\")[0];\n const scheme = isLocalAddress(hostname) ? \"http\" : \"https\";\n return `${scheme}://${trimmed}`;\n}\n\n/\n Returns true when `host` represents a reachable backend URL.\n \n Rules (applied in order):\n * 1. Must be non-empty after trimming.\n * 2. Must contain no whitespace — spaces can never appear in a host/port.\n * 3. After normalisation (bare hosts get `https://` prepended), must parse\n * as a valid http or https URL with a non-empty hostname.\n /\nfunction isValidHostUrl(host: string): boolean {\n const trimmed = host.trim();\n if (!trimmed) return false;\n // Spaces anywhere in the input are an immediate rejection.\n if (/\\s/.test(trimmed)) return false;\n const normalized = normalizeHost(trimmed);\n if (!normalized) return false;\n try {\n const url = new URL(normalized);\n return (\n (url.protocol === \"http:\" \|\| url.protocol === \"https:\") &&\n url.hostname.length > 0\n );\n } catch {\n return false;\n }\n}\n\nconst DEFAULT_OPENHANDS_CLOUD_HOST = \"https://app.all-hands.dev\";\n\n/\n Live status row for the edit form: shows a connection dot, a\n * \"Local\"/\"Cloud\" label, and the agent server's reported version when\n * available. Replaces the legacy local/cloud radio fieldset (kind is\n * now inferred from the host).\n /\nfunction BackendStatusBadge({\n backend,\n testIdRoot,\n}: {\n backend: Backend;\n testIdRoot: string;\n}) {\n const { t } = useTranslation(\"openhands\");\n const healthByBackendId = useBackendsHealth([backend]);\n const health = healthByBackendId[backend.id];\n const isConnected = health?.isConnected ?? null;\n const disabled = health?.disabled === true;\n const consecutiveFailures = health?.consecutiveFailures ?? 0;\n const lastError = health?.lastError ?? null;\n\n const { data: version } = useQuery({\n queryKey: [\"backend-version\", backend.host, backend.apiKey],\n queryFn: async () => {\n const info = await new ServerClient(\n getAgentServerClientOptions({\n host: backend.host,\n sessionApiKey: backend.apiKey \|\| null,\n timeout: 5000,\n }),\n ).getServerInfo();\n return info.version ?? null;\n },\n retry: false,\n staleTime: 60_000,\n enabled: backend.kind === \"local\" && !disabled,\n });\n\n let statusLabel: string;\n if (isConnected === true) {\n statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CONNECTED);\n } else if (isConnected === false) {\n statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_DISCONNECTED);\n } else {\n statusLabel = t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING);\n }\n\n const kindLabel =\n backend.kind === \"cloud\"\n ? t(I18nKey.BACKEND$KIND_CLOUD)\n : t(I18nKey.BACKEND$KIND_LOCAL);\n\n return (\n <div className=\"flex flex-col gap-2\">\n <div\n data-testid={`${testIdRoot}-status`}\n className=\"flex items-center gap-3 text-sm\"\n >\n <BackendStatusDot isConnected={isConnected} />\n <span className=\"text-white\" data-testid={`${testIdRoot}-status-label`}>\n {statusLabel}\n </span>\n <span className=\"text-tertiary-alt\">·</span>\n <span className=\"text-[var(--oh-text-tertiary)]\">{kindLabel}</span>\n {version ? (\n <span\n className=\"text-xs text-[var(--oh-muted)]\"\n data-testid={`${testIdRoot}-version`}\n >\n {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n </span>\n ) : null}\n </div>\n\n {disabled ? (\n <div\n data-testid={`${testIdRoot}-status-error`}\n className=\"flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm\"\n >\n <span className=\"font-semibold text-red-300\">\n {t(I18nKey.BACKEND$HEALTH_FAILED_TITLE)}\n </span>\n <span className=\"text-xs text-[var(--oh-text-tertiary)]\">\n {t(I18nKey.BACKEND$HEALTH_FAILED_DETAIL, {\n count: consecutiveFailures,\n })}\n </span>\n {lastError ? (\n <span\n data-testid={`${testIdRoot}-status-error-message`}\n className=\"text-xs text-red-300 whitespace-pre-wrap break-words\"\n >\n {lastError}\n </span>\n ) : null}\n </div>\n ) : null}\n </div>\n );\n}\n\nexport interface BackendFormProps {\n mode: BackendFormMode;\n /* Required when `mode === \"edit\"`. /\n backend?: Backend;\n /\n Called after the form is submitted and the backend has been\n * persisted. Use this to dismiss a containing modal, advance an\n * onboarding step, etc.\n /\n onSubmitted: () => void;\n /\n Optional render slot rendered in place of the default\n * Save / Cancel button row, so callers (e.g. the onboarding flow)\n * can re-skin the action area while still owning submission via the\n * standard `<form onSubmit>` flow. Receives the form's submit-ready\n * state.\n /\n renderActions?: (state: {\n canSubmit: boolean;\n testIdRoot: string;\n }) => React.ReactNode;\n /* Used to disambiguate test ids across the same screen. /\n testIdRoot?: string;\n}\n\n/\n Reusable form body for adding / editing a backend. Renders the\n * common name / host / API-key inputs plus the kind selector\n * (radio buttons in `add` mode, status badge in `edit` mode).\n \n Rendered as a `<form>`, so consumers should put any extra controls\n * either inside `renderActions` or as siblings inside a wrapping\n * element — but submission flows through the standard form submit so\n * Enter-to-submit still works.\n /\nexport function BackendForm({\n mode,\n backend,\n onSubmitted,\n renderActions,\n testIdRoot: explicitTestIdRoot,\n}: BackendFormProps) {\n const { t } = useTranslation(\"openhands\");\n const { addBackend, updateBackend } = useActiveBackendContext();\n\n const [name, setName] = React.useState(backend?.name ?? \"\");\n const [host, setHost] = React.useState(backend?.host ?? \"\");\n const [apiKey, setApiKey] = React.useState(backend?.apiKey ?? \"\");\n\n // Inline validation: only show errors after the user has left a field.\n const [nameTouched, setNameTouched] = React.useState(false);\n const [hostTouched, setHostTouched] = React.useState(false);\n\n // Kind is inferred from the host on every change.\n const kind: BackendKind = inferKindFromHost(host);\n\n const testIdRoot =\n explicitTestIdRoot ?? (mode === \"edit\" ? \"edit-backend\" : \"add-backend\");\n\n const canSubmit =\n name.trim().length > 0 &&\n isValidHostUrl(host) &&\n (kind === \"local\" \|\| apiKey.trim().length > 0);\n\n // Error messages — only surfaced after the user has blurred the field.\n const nameError =\n nameTouched && !name.trim() ? t(I18nKey.BACKEND$NAME_REQUIRED) : undefined;\n const hostError = hostTouched\n ? !host.trim()\n ? t(I18nKey.BACKEND$HOST_REQUIRED)\n : !isValidHostUrl(host)\n ? t(I18nKey.BACKEND$HOST_INVALID)\n : undefined\n : undefined;\n\n const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n if (!canSubmit) {\n // Mark all validated fields as touched so inline errors become visible\n // (e.g. user pressed Enter before filling required fields).\n setNameTouched(true);\n setHostTouched(true);\n return;\n }\n\n const payload = {\n name: name.trim(),\n host: normalizeHost(host),\n apiKey: apiKey.trim(),\n kind,\n };\n\n if (mode === \"edit\" && backend) {\n updateBackend(backend.id, payload);\n } else {\n addBackend(payload);\n }\n\n onSubmitted();\n };\n\n return (\n <form\n data-testid={`${testIdRoot}-form`}\n onSubmit={handleSubmit}\n className=\"flex flex-col gap-4\"\n >\n <SettingsInput\n testId={`${testIdRoot}-name`}\n name={`${testIdRoot}-name`}\n type=\"text\"\n label={t(I18nKey.BACKEND$NAME_LABEL)}\n value={name}\n onChange={setName}\n onBlur={() => setNameTouched(true)}\n placeholder=\"Production\"\n className=\"w-full\"\n showRequiredTag\n error={nameError}\n />\n\n <SettingsInput\n testId={`${testIdRoot}-host`}\n name={`${testIdRoot}-host`}\n type=\"text\"\n label={t(I18nKey.BACKEND$HOST_LABEL)}\n value={host}\n onChange={setHost}\n onBlur={() => setHostTouched(true)}\n placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n className=\"w-full\"\n showRequiredTag\n error={hostError}\n />\n\n <SettingsInput\n testId={`${testIdRoot}-api-key`}\n name={`${testIdRoot}-api-key`}\n type=\"password\"\n label={t(I18nKey.BACKEND$KEY_LABEL)}\n value={apiKey}\n onChange={setApiKey}\n placeholder=\"\"\n className=\"w-full\"\n />\n\n {mode === \"edit\" && backend && (\n <BackendStatusBadge backend={backend} testIdRoot={testIdRoot} />\n )}\n\n {renderActions ? (\n renderActions({ canSubmit, testIdRoot })\n ) : (\n <div className=\"flex justify-end gap-2 mt-2 w-full\">\n <BrandButton\n type=\"button\"\n variant=\"secondary\"\n onClick={onSubmitted}\n testId={`${testIdRoot}-cancel`}\n >\n {t(I18nKey.BUTTON$CANCEL)}\n </BrandButton>\n <BrandButton\n type=\"submit\"\n variant=\"primary\"\n isDisabled={!canSubmit}\n testId={`${testIdRoot}-submit`}\n >\n {t(I18nKey.BACKEND$SAVE)}\n </BrandButton>\n </div>\n )}\n </form>\n );\n}\n\n// ── Add-mode two-column layout ──────────────────────────────────────\n\n/\n @spec BM-002 — Adding a backend auto-switches the active selection to it\n * (BM-001), so a backend-scoped detail page the user is viewing now belongs\n * to the previous backend. Redirect to that section's list so they never see\n * stale data, mirroring the switch-backend redirect in BackendSelector.\n /\nfunction useRedirectAfterAddBackend() {\n const { currentPath, navigate } = useNavigation();\n return React.useCallback(() => {\n if (/^\\/automations\\/[^/]+/.test(currentPath)) navigate(\"/automations\");\n else if (/^\\/conversations\\/[^/]+/.test(currentPath))\n navigate(\"/conversations\");\n }, [currentPath, navigate]);\n}\n\n/\n Left column of the \"Add a Backend\" modal: manual connection via\n * Host + API Key. Designed for self-hosted agent servers and\n * self-hosted OpenHands Cloud with API key auth.\n /\nfunction ManualConnectionColumn({ onClose }: { onClose: () => void }) {\n const { t } = useTranslation(\"openhands\");\n const { addBackend } = useActiveBackendContext();\n const redirectAfterAdd = useRedirectAfterAddBackend();\n\n const [name, setName] = React.useState(\"\");\n const [host, setHost] = React.useState(\"\");\n const [apiKey, setApiKey] = React.useState(\"\");\n\n const kind: BackendKind = inferKindFromHost(host);\n const canSubmit =\n name.trim().length > 0 &&\n isValidHostUrl(host) &&\n (kind === \"local\" \|\| apiKey.trim().length > 0);\n\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (!canSubmit) return;\n addBackend({\n name: name.trim(),\n host: normalizeHost(host),\n apiKey: apiKey.trim(),\n kind,\n });\n redirectAfterAdd();\n onClose();\n };\n\n return (\n <form\n data-testid=\"add-backend-form\"\n onSubmit={handleSubmit}\n className=\"flex flex-col gap-4 flex-1 min-w-0\"\n >\n <div className=\"flex flex-col gap-1\">\n <SettingsInput\n testId=\"add-backend-name\"\n name=\"add-backend-name\"\n type=\"text\"\n label={t(I18nKey.BACKEND$NAME_LABEL)}\n value={name}\n onChange={setName}\n placeholder=\"e.g. My Server\"\n className=\"w-full\"\n />\n <p className=\"text-xs text-[var(--oh-muted)]\">\n {t(I18nKey.BACKEND$NAME_HELPER)}\n </p>\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <SettingsInput\n testId=\"add-backend-host\"\n name=\"add-backend-host\"\n type=\"text\"\n label={t(I18nKey.BACKEND$HOST_LABEL)}\n value={host}\n onChange={setHost}\n placeholder=\"http://localhost:8000\"\n className=\"w-full\"\n />\n <p\n className=\"text-xs text-[var(--oh-muted)]\"\n data-testid=\"add-backend-host-helper\"\n >\n {t(I18nKey.BACKEND$HOST_HELPER)}\n </p>\n </div>\n\n <SettingsInput\n testId=\"add-backend-api-key\"\n name=\"add-backend-api-key\"\n type=\"password\"\n label={t(I18nKey.BACKEND$KEY_LABEL)}\n value={apiKey}\n onChange={setApiKey}\n placeholder=\"sk-••••••••••\"\n className=\"w-full\"\n />\n\n <BrandButton\n type=\"submit\"\n variant=\"secondary\"\n isDisabled={!canSubmit}\n testId=\"add-backend-submit\"\n className=\"w-full text-center\"\n >\n {t(I18nKey.BACKEND$CONNECT)}\n </BrandButton>\n </form>\n );\n}\n\n/\n Right column of the \"Add a Backend\" modal: one-click OAuth login\n * with OpenHands Cloud. Includes an \"Advanced\" disclosure for\n * users who self-host OpenHands Cloud and need to override the host.\n /\nfunction CloudLoginColumn({ onClose }: { onClose: () => void }) {\n const { t } = useTranslation(\"openhands\");\n const { addBackend } = useActiveBackendContext();\n const redirectAfterAdd = useRedirectAfterAddBackend();\n\n const [advancedOpen, setAdvancedOpen] = React.useState(false);\n const [customHost, setCustomHost] = React.useState(\"\");\n\n const effectiveHost = customHost.trim() \|\| DEFAULT_OPENHANDS_CLOUD_HOST;\n\n const handleLoginSuccess = (apiKey: string) => {\n addBackend({\n name: \"OpenHands Cloud\",\n host: normalizeHost(effectiveHost),\n apiKey,\n kind: \"cloud\",\n });\n redirectAfterAdd();\n onClose();\n };\n\n return (\n <div className=\"flex flex-1 min-w-0 flex-col items-center gap-3\">\n <div className=\"flex flex-col items-center gap-1\">\n <OpenHandsLogoWhite width={56} height={56} aria-hidden />\n\n <h4\n className=\"text-lg font-medium text-white\"\n data-testid=\"add-backend-cloud-title\"\n >\n {t(I18nKey.BACKEND$CLOUD_TITLE)}\n </h4>\n </div>\n\n <p className=\"text-center text-sm leading-relaxed text-[var(--oh-muted)]\">\n {t(I18nKey.BACKEND$CLOUD_DESCRIPTION)}\n </p>\n\n <DeviceFlowAuth\n host={effectiveHost}\n onSuccess={handleLoginSuccess}\n testIdRoot=\"add-backend\"\n />\n\n <div className=\"w-full\">\n <button\n type=\"button\"\n onClick={() => setAdvancedOpen((open) => !open)}\n aria-expanded={advancedOpen}\n data-testid=\"add-backend-advanced-toggle\"\n className=\"flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2\"\n >\n <span>{t(I18nKey.BACKEND$ADVANCED)}</span>\n <ChevronDownSmallIcon\n className={cn(\n \"h-4 w-4 shrink-0 text-muted transition-transform\",\n advancedOpen && \"rotate-180\",\n )}\n aria-hidden\n />\n </button>\n <div\n className={cn(\n \"pt-2\",\n !advancedOpen && \"pointer-events-none invisible\",\n )}\n aria-hidden={!advancedOpen}\n >\n <SettingsInput\n testId=\"add-backend-cloud-host\"\n name=\"add-backend-cloud-host\"\n type=\"text\"\n label={t(I18nKey.BACKEND$HOST_LABEL)}\n value={customHost}\n onChange={setCustomHost}\n placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n className=\"w-full\"\n />\n <p className=\"mt-1 text-xs text-[var(--oh-muted)]\">\n {t(I18nKey.BACKEND$LOGIN_CLOUD_HINT)}\n </p>\n </div>\n </div>\n </div>\n );\n}\n\n// ── Modal wrappers ──────────────────────────────────────────────────\n\n/\n Modal wrapper. In add mode it renders a two-column layout\n * (manual connection \| OR \| Cloud login). In edit mode it wraps\n * the standard `BackendForm`.\n /\nexport function BackendFormModal({\n mode,\n backend,\n onClose,\n}: BackendFormModalProps) {\n const { t } = useTranslation(\"openhands\");\n\n if (mode === \"add\") {\n return (\n <ModalBackdrop\n onClose={onClose}\n closeOnEscape={false}\n aria-label={t(I18nKey.BACKEND$ADD_TITLE)}\n >\n <div\n data-testid=\"add-backend-modal\"\n className={cn(\n \"relative rounded-xl border border-[var(--oh-border)] bg-base-secondary\",\n modalWidthClassName(\"xl\"),\n MODAL_MAX_WIDTH_VIEWPORT,\n )}\n >\n <ModalCloseButton onClose={onClose} testId=\"add-backend-close\" />\n {/ Header /}\n <div className=\"px-6 pt-6 pb-2 pr-12\">\n <h2 className=\"text-lg font-semibold\">\n {t(I18nKey.BACKEND$ADD_TITLE)}\n </h2>\n </div>\n\n {/ Two-column body /}\n <div className=\"flex gap-6 px-6 pb-6 pt-2\">\n {/ Left: manual connection /}\n <div className=\"flex-1 min-w-0\">\n <ManualConnectionColumn onClose={onClose} />\n </div>\n\n {/ Vertical OR divider /}\n <div className=\"flex shrink-0 flex-col items-center\">\n <div className=\"flex-1 w-px bg-[var(--oh-border)]\" />\n <span className=\"py-3 text-xs uppercase text-[var(--oh-muted)]\">\n {t(I18nKey.BACKEND$LOGIN_OR)}\n </span>\n <div className=\"flex-1 w-px bg-[var(--oh-border)]\" />\n </div>\n\n {/ Right: cloud login */}\n <div className=\"flex-1 min-w-0\">\n <CloudLoginColumn onClose={onClose} />\n </div>\n </div>\n </div>\n </ModalBackdrop>\n );\n }\n\n // Edit mode — single-column form (unchanged)\n const testIdRoot = \"edit-backend\";\n return (\n <ModalBackdrop\n onClose={onClose}\n closeOnEscape={false}\n aria-label={t(I18nKey.BACKEND$EDIT_TITLE)}\n >\n <div\n data-testid={`${testIdRoot}-modal`}\n className={cn(\n \"relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]\",\n modalWidthClassName(\"md\"),\n )}\n >\n <ModalCloseButton onClose={onClose} testId={`${testIdRoot}-close`} />\n <h2 className=\"pr-6 text-lg font-semibold\">\n {t(I18nKey.BACKEND$EDIT_TITLE)}\n </h2>\n <BackendForm\n mode=\"edit\"\n backend={backend}\n onSubmitted={onClose}\n testIdRoot={testIdRoot}\n />\n </div>\n </ModalBackdrop>\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(`../../../stores/conversation-store.cjs`),o=require(`../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs`),s=require(`../../../hooks/query/use-active-conversation.cjs`),c=require(`../../../hooks/use-agent-state.cjs`),l=require(`../../../hooks/use-unified-websocket-status.cjs`),u=require(`../../../hooks/query/use-sub-conversation-task-polling.cjs`),d=require(`../../../ui/typography.cjs`),f=require(`../../../ui/combobox-caret.cjs`),p=require(`../../../icons/lesson-plan.cjs`),m=require(`../../../icons/code-pill.cjs`),h=require(`./change-agent-context-menu.cjs`),g=require(`../../../hooks/use-handle-plan-click.cjs`);let _=require(`react`);_=e.__toESM(_,1);let v=require(`react/jsx-runtime`);function y(){let[e,y]=(0,_.useState)(!1),{conversationMode:b,setConversationMode:x,subConversationTaskId:S}=a.useConversationStore(),C=l.useUnifiedWebSocketStatus()===`OPEN`,{curAgentState:w}=c.useAgentState(),{t:T}=t.useTranslation(`openhands`),E=w===r.AgentState.RUNNING,{data:D}=s.useActiveConversation(),O=o.useQueryClient(),k=(0,_.useRef)(null),{taskStatus:A,subConversationId:j}=u.useSubConversationTaskPolling(S,D?.id||null);(0,_.useEffect)(()=>{A===`READY`&&j&&D?.id&&S&&k.current!==S&&(k.current=S,O.invalidateQueries({queryKey:[`user`,`conversation`,D.id]}))},[A,j,D?.id,S,O]);let{handlePlanClick:M,isCreatingConversation:N}=g.useHandlePlanClick();(0,_.useEffect)(()=>{(E||!C)&&e&&y(!1)},[E,e,C]);let P=E||N||!C;(0,_.useEffect)(()=>{if(P)return;let e=e=>{if(e.shiftKey&&e.key===`Tab`){e.preventDefault(),e.stopPropagation();let t=b===`code`?`plan`:`code`;t===`plan`?M(e):x(t)}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[P,b,x,M]);let F=t=>{t.preventDefault(),t.stopPropagation(),y(!e)},I=e=>{e.preventDefault(),e.stopPropagation(),x(`code`)},L=b===`code`,R=(0,_.useMemo)(()=>T(L?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),[L,T]),z=(0,_.useMemo)(()=>L?(0,v.jsx)(m.CodePillIcon,{className:`h-[11px] w-[11px] shrink-0`}):(0,v.jsx)(p.default,{width:18,height:18,color:`currentColor`}),[L]);return(0,v.jsxs)(`div`,{className:`relative`,children:[(0,v.jsxs)(`button`,{type:`button`,onClick:F,disabled:P,className:i.cn(`flex items-center rounded-[100px] transition-[border-color,color,opacity]`,L?`border border-transparent text-[var(--oh-muted)]`:`border border-[#597FF4] bg-[#4A67BD]`,!P&&L&&`cursor-pointer hover:text-white hover:bg-white/10`,!P&&!L&&`cursor-pointer text-white hover:bg-white/10`,P&&i.cn(`opacity-50 cursor-not-allowed`,L&&`border-transparent`)),children:[(0,v.jsxs)(`div`,{className:`flex items-center gap-1 pl-1.5`,children:[z,(0,v.jsx)(d.Typography.Text,{className:`text-2.75 not-italic font-normal leading-5`,children:R})]}),(0,v.jsx)(f.ComboboxCaretInline,{isOpen:e})]}),e&&(0,v.jsx)(h.ChangeAgentContextMenu,{onClose:()=>y(!1),onCodeClick:I,onPlanClick:M})]})}exports.ChangeAgentButton=y;
+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(`../../../hooks/use-unified-websocket-status.cjs`),f=require(`../../../hooks/query/use-sub-conversation-task-polling.cjs`),p=require(`../../../ui/typography.cjs`),m=require(`../../../ui/combobox-caret.cjs`),h=require(`../../../icons/lesson-plan.cjs`),g=require(`../../../icons/code-pill.cjs`),_=require(`./change-agent-context-menu.cjs`),v=require(`../../../hooks/use-handle-plan-click.cjs`);let y=require(`react`);y=e.__toESM(y,1);let b=require(`react/jsx-runtime`);function x(){let[e,x]=(0,y.useState)(!1),{conversationMode:S,setConversationMode:C,subConversationTaskId:w}=o.useConversationStore(),{conversationId:T}=a.useOptionalConversationId(),E=!T,D=d.useUnifiedWebSocketStatus()===`OPEN`,{curAgentState:O}=l.useAgentState(),{t:k}=t.useTranslation(`openhands`),A=O===r.AgentState.RUNNING,{data:j}=c.useActiveConversation(),M=s.useQueryClient(),N=(0,y.useRef)(null),{taskStatus:P,subConversationId:F}=f.useSubConversationTaskPolling(w,j?.id||null);(0,y.useEffect)(()=>{P===`READY`&&F&&j?.id&&w&&N.current!==w&&(N.current=w,M.invalidateQueries({queryKey:[`user`,`conversation`,j.id]}))},[P,F,j?.id,w,M]);let{handlePlanClick:I,isCreatingConversation:L}=v.useHandlePlanClick();(0,y.useEffect)(()=>{(A||!D)&&e&&x(!1)},[A,e,D]);let R=E||A||L||!D;(0,y.useEffect)(()=>{if(R)return;let e=e=>{if(e.shiftKey&&e.key===`Tab`){e.preventDefault(),e.stopPropagation();let t=S===`code`?`plan`:`code`;t===`plan`?I(e):C(t)}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[R,S,C,I]);let z=t=>{t.preventDefault(),t.stopPropagation(),x(!e)},B=e=>{e.preventDefault(),e.stopPropagation(),C(`code`)},V=S===`code`,H=(0,y.useMemo)(()=>k(V?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),[V,k]),U=(0,y.useMemo)(()=>V?(0,b.jsx)(g.CodePillIcon,{className:`h-[11px] w-[11px] shrink-0`}):(0,b.jsx)(h.default,{width:18,height:18,color:`currentColor`}),[V]),W=(0,b.jsxs)(`div`,{className:`relative`,children:[(0,b.jsxs)(`button`,{type:`button`,onClick:z,disabled:R,className:i.cn(`flex items-center rounded-[100px] transition-[border-color,color,opacity]`,V?`border border-transparent text-[var(--oh-muted)]`:`border border-[#597FF4] bg-[#4A67BD]`,!R&&V&&`cursor-pointer hover:text-white hover:bg-white/10`,!R&&!V&&`cursor-pointer text-white hover:bg-white/10`,R&&i.cn(`opacity-50 cursor-not-allowed`,V&&`border-transparent`)),children:[(0,b.jsxs)(`div`,{className:`flex items-center gap-1 pl-1.5`,children:[U,(0,b.jsx)(p.Typography.Text,{className:`text-2.75 not-italic font-normal leading-5`,children:H})]}),(0,b.jsx)(m.ComboboxCaretInline,{isOpen:e})]}),e&&(0,b.jsx)(_.ChangeAgentContextMenu,{onClose:()=>x(!1),onCodeClick:B,onPlanClick:I})]});return E?(0,b.jsx)(u.StyledTooltip,{content:k(n.I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),placement:`top`,children:W}):W}exports.ChangeAgentButton=x;
 //# sourceMappingURL=change-agent-button.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"change-agent-button.cjs","names":[],"sources":["../../../../src/components/features/chat/change-agent-button.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useState, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ChangeAgentContextMenu } from \"./change-agent-context-menu\";\nimport { cn } from \"#/utils/utils\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\n\nexport function ChangeAgentButton() {\n const [contextMenuOpen, setContextMenuOpen] = useState<boolean>(false);\n\n const { conversationMode, setConversationMode, subConversationTaskId } =\n useConversationStore();\n\n const webSocketStatus = useUnifiedWebSocketStatus();\n\n const isWebSocketConnected = webSocketStatus === \"OPEN\";\n\n const { curAgentState } = useAgentState();\n\n const { t } = useTranslation(\"openhands\");\n\n const isAgentRunning = curAgentState === AgentState.RUNNING;\n\n const { data: conversation } = useActiveConversation();\n\n const queryClient = useQueryClient();\n\n // Track the last invalidated task ID to prevent duplicate invalidations\n const lastInvalidatedTaskIdRef = useRef<string \| null>(null);\n\n // Poll sub-conversation task status\n const { taskStatus, subConversationId } = useSubConversationTaskPolling(\n subConversationTaskId,\n conversation?.id \|\| null,\n );\n\n // Invalidate parent conversation cache when task is ready (only once per task)\n useEffect(() => {\n if (\n taskStatus === \"READY\" &&\n subConversationId &&\n conversation?.id &&\n subConversationTaskId &&\n lastInvalidatedTaskIdRef.current !== subConversationTaskId\n ) {\n // Mark this task as invalidated to prevent duplicate calls\n lastInvalidatedTaskIdRef.current = subConversationTaskId;\n // Invalidate the parent conversation to refetch with updated sub_conversation_ids\n queryClient.invalidateQueries({\n queryKey: [\"user\", \"conversation\", conversation.id],\n });\n }\n }, [\n taskStatus,\n subConversationId,\n conversation?.id,\n subConversationTaskId,\n queryClient,\n ]);\n\n // Get handlePlanClick and isCreatingConversation from custom hook\n const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n // Close context menu when agent starts running\n useEffect(() => {\n if ((isAgentRunning \|\| !isWebSocketConnected) && contextMenuOpen) {\n setContextMenuOpen(false);\n }\n }, [isAgentRunning, contextMenuOpen, isWebSocketConnected]);\n\n const isButtonDisabled =\n isAgentRunning \|\| isCreatingConversation \|\| !isWebSocketConnected;\n\n // Handle Shift + Tab keyboard shortcut to cycle through modes\n useEffect(() => {\n if (isButtonDisabled) {\n return undefined;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n // Check for Shift + Tab combination\n if (event.shiftKey && event.key === \"Tab\") {\n // Prevent default tab navigation behavior\n event.preventDefault();\n event.stopPropagation();\n\n // Cycle between modes: code -> plan -> code\n const nextMode = conversationMode === \"code\" ? \"plan\" : \"code\";\n if (nextMode === \"plan\") {\n handlePlanClick(event);\n } else {\n setConversationMode(nextMode);\n }\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [\n isButtonDisabled,\n conversationMode,\n setConversationMode,\n handlePlanClick,\n ]);\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setContextMenuOpen(!contextMenuOpen);\n };\n\n const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setConversationMode(\"code\");\n };\n\n const isExecutionAgent = conversationMode === \"code\";\n\n const buttonLabel = useMemo(() => {\n if (isExecutionAgent) {\n return t(I18nKey.COMMON$CODE);\n }\n return t(I18nKey.COMMON$PLAN);\n }, [isExecutionAgent, t]);\n\n const buttonIcon = useMemo(() => {\n if (isExecutionAgent) {\n return <CodePillIcon className=\"h-[11px] w-[11px] shrink-0\" />;\n }\n return <LessonPlanIcon width={18} height={18} color=\"currentColor\" />;\n }, [isExecutionAgent]);\n\n ~~return~~ (\n <div className=\"relative\">\n <button\n type=\"button\"\n onClick={handleButtonClick}\n disabled={isButtonDisabled}\n className={cn(\n \"flex items-center rounded-[100px] transition-[border-color,color,opacity]\",\n isExecutionAgent\n ? \"border border-transparent text-[var(--oh-muted)]\"\n : \"border border-[#597FF4] bg-[#4A67BD]\",\n !isButtonDisabled &&\n isExecutionAgent &&\n \"cursor-pointer hover:text-white hover:bg-white/10\",\n !isButtonDisabled &&\n !isExecutionAgent &&\n \"cursor-pointer text-white hover:bg-white/10\",\n isButtonDisabled &&\n cn(\n \"opacity-50 cursor-not-allowed\",\n isExecutionAgent && \"border-transparent\",\n ),\n )}\n >\n <div className=\"flex items-center gap-1 pl-1.5\">\n {buttonIcon}\n <Typography.Text className=\"text-2.75 not-italic font-normal leading-5\">\n {buttonLabel}\n </Typography.Text>\n </div>\n <ComboboxCaretInline isOpen={contextMenuOpen} />\n </button>\n {contextMenuOpen && (\n <ChangeAgentContextMenu\n onClose={() => setContextMenuOpen(false)}\n onCodeClick={handleCodeClick}\n onPlanClick={handlePlanClick}\n />\n )}\n </div>\n );\n}\n"],"mappings":"~~i+BAkBA~~,SAAgB,GAAoB,CAClC,GAAM,CAAC,EAAiB,IAAA,EAAA,EAAA,UAAwC,GAAM,CAEhE,CAAE,mBAAkB,sBAAqB,yBAC7C,EAAA,sBAAsB,~~CAIlB~~,EAFkB,EAAA,2BAEK,GAAoB,OAE3C,CAAE,iBAAkB,EAAA,eAAe,CAEnC,CAAE,KAAM,EAAA,eAAe,YAAY,CAEnC,EAAiB,IAAkB,EAAA,WAAW,QAE9C,CAAE,KAAM,GAAiB,EAAA,uBAAuB,CAEhD,EAAc,EAAA,gBAAgB,CAG9B,GAAA,EAAA,EAAA,QAAiD,KAAK,CAGtD,CAAE,aAAY,qBAAsB,EAAA,8BACxC,EACA,GAAc,IAAM,KACrB,EAGD,EAAA,EAAA,eAAgB,CAEZ,IAAe,SACf,GACA,GAAc,IACd,GACA,EAAyB,UAAY,IAGrC,EAAyB,QAAU,EAEnC,EAAY,kBAAkB,CAC5B,SAAU,CAAC,OAAQ,eAAgB,EAAa,GAAG,CACpD,CAAC,GAEH,CACD,EACA,EACA,GAAc,GACd,EACA,EACD,CAAC,CAGF,GAAM,CAAE,kBAAiB,0BAA2B,EAAA,oBAAoB,EAGxE,EAAA,EAAA,eAAgB,EACT,GAAkB,CAAC,IAAyB,GAC/C,EAAmB,GAAM,EAE1B,CAAC,EAAgB,EAAiB,EAAqB,CAAC,CAE3D,IAAM,EACJ,~~GAAkB~~,~~GAA0B~~,CAAC,~~GAG/C~~,EAAA,EAAA,eAAgB,CACd,GAAI,EACF,OAGF,IAAM,EAAiB,GAAyB,CAE9C,GAAI,EAAM,UAAY,EAAM,MAAQ,MAAO,CAEzC,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CAGvB,IAAM,EAAW,IAAqB,OAAS,OAAS,OACpD,IAAa,OACf,EAAgB,EAAM,CAEtB,EAAoB,EAAS,GAOnC,OAFA,SAAS,iBAAiB,UAAW,EAAc,KAEtC,CACX,SAAS,oBAAoB,UAAW,EAAc,GAEvD,CACD,EACA,EACA,EACA,EACD,CAAC,CAEF,IAAM,EAAqB,GAA+C,CACxE,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,EAAmB,CAAC,EAAgB,EAGhC,EAAmB,GAA+C,CACtE,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,EAAoB,OAAO,EAGvB,EAAmB,IAAqB,OAExC,GAAA,EAAA,EAAA,aAEK,EADL,EACO,EAAA,QAAQ,YAEV,EAAA,QAAQ,YAFc,CAG9B,CAAC,EAAkB,EAAE,CAAC,CAEnB,GAAA,EAAA,EAAA,aACA,GACK,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,UAAU,6BAA+B,CAAA,EAEzD,EAAA,EAAA,KAAC,EAAA,QAAD,CAAgB,MAAO,GAAI,OAAQ,GAAI,MAAM,eAAiB,CAAA,CACpE,CAAC,EAAiB,CAAC,~~CAEtB~~,~~OACE~~,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,oBAAf,EACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,SAAU,EACV,UAAW,EAAA,GACT,4EACA,EACI,mDACA,uCACJ,CAAC,GACC,GACA,oDACF,CAAC,GACC,CAAC,GACD,8CACF,GACE,EAAA,GACE,gCACA,GAAoB,qBACrB,CACJ,UApBH,EAsBE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0CAAf,CACG,GACD,EAAA,EAAA,KAAC,EAAA,WAAW,KAAZ,CAAiB,UAAU,sDACxB,EACe,CAAA,CACd,IACN,EAAA,EAAA,KAAC,EAAA,oBAAD,CAAqB,OAAQ,EAAmB,CAAA,CACzC,GACR,IACC,EAAA,EAAA,KAAC,EAAA,uBAAD,CACE,YAAe,EAAmB,GAAM,CACxC,YAAa,EACb,YAAa,EACb,CAAA,CAEA"}
1	+ {"version":3,"file":"change-agent-button.cjs","names":[],"sources":["../../../../src/components/features/chat/change-agent-button.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useState, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ChangeAgentContextMenu } from \"./change-agent-context-menu\";\nimport { cn } from \"#/utils/utils\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\n\nexport function ChangeAgentButton() {\n const [contextMenuOpen, setContextMenuOpen] = useState<boolean>(false);\n\n const { conversationMode, setConversationMode, subConversationTaskId } =\n useConversationStore();\n\n const { conversationId } = useOptionalConversationId();\n\n const isHomePage = !conversationId;\n\n const webSocketStatus = useUnifiedWebSocketStatus();\n\n const isWebSocketConnected = webSocketStatus === \"OPEN\";\n\n const { curAgentState } = useAgentState();\n\n const { t } = useTranslation(\"openhands\");\n\n const isAgentRunning = curAgentState === AgentState.RUNNING;\n\n const { data: conversation } = useActiveConversation();\n\n const queryClient = useQueryClient();\n\n // Track the last invalidated task ID to prevent duplicate invalidations\n const lastInvalidatedTaskIdRef = useRef<string \| null>(null);\n\n // Poll sub-conversation task status\n const { taskStatus, subConversationId } = useSubConversationTaskPolling(\n subConversationTaskId,\n conversation?.id \|\| null,\n );\n\n // Invalidate parent conversation cache when task is ready (only once per task)\n useEffect(() => {\n if (\n taskStatus === \"READY\" &&\n subConversationId &&\n conversation?.id &&\n subConversationTaskId &&\n lastInvalidatedTaskIdRef.current !== subConversationTaskId\n ) {\n // Mark this task as invalidated to prevent duplicate calls\n lastInvalidatedTaskIdRef.current = subConversationTaskId;\n // Invalidate the parent conversation to refetch with updated sub_conversation_ids\n queryClient.invalidateQueries({\n queryKey: [\"user\", \"conversation\", conversation.id],\n });\n }\n }, [\n taskStatus,\n subConversationId,\n conversation?.id,\n subConversationTaskId,\n queryClient,\n ]);\n\n // Get handlePlanClick and isCreatingConversation from custom hook\n const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n // Close context menu when agent starts running\n useEffect(() => {\n if ((isAgentRunning \|\| !isWebSocketConnected) && contextMenuOpen) {\n setContextMenuOpen(false);\n }\n }, [isAgentRunning, contextMenuOpen, isWebSocketConnected]);\n\n const isButtonDisabled =\n isHomePage \|\|\n isAgentRunning \|\|\n isCreatingConversation \|\|\n !isWebSocketConnected;\n\n // Handle Shift + Tab keyboard shortcut to cycle through modes\n useEffect(() => {\n if (isButtonDisabled) {\n return undefined;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n // Check for Shift + Tab combination\n if (event.shiftKey && event.key === \"Tab\") {\n // Prevent default tab navigation behavior\n event.preventDefault();\n event.stopPropagation();\n\n // Cycle between modes: code -> plan -> code\n const nextMode = conversationMode === \"code\" ? \"plan\" : \"code\";\n if (nextMode === \"plan\") {\n handlePlanClick(event);\n } else {\n setConversationMode(nextMode);\n }\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [\n isButtonDisabled,\n conversationMode,\n setConversationMode,\n handlePlanClick,\n ]);\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setContextMenuOpen(!contextMenuOpen);\n };\n\n const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setConversationMode(\"code\");\n };\n\n const isExecutionAgent = conversationMode === \"code\";\n\n const buttonLabel = useMemo(() => {\n if (isExecutionAgent) {\n return t(I18nKey.COMMON$CODE);\n }\n return t(I18nKey.COMMON$PLAN);\n }, [isExecutionAgent, t]);\n\n const buttonIcon = useMemo(() => {\n if (isExecutionAgent) {\n return <CodePillIcon className=\"h-[11px] w-[11px] shrink-0\" />;\n }\n return <LessonPlanIcon width={18} height={18} color=\"currentColor\" />;\n }, [isExecutionAgent]);\n\n const button = (\n <div className=\"relative\">\n <button\n type=\"button\"\n onClick={handleButtonClick}\n disabled={isButtonDisabled}\n className={cn(\n \"flex items-center rounded-[100px] transition-[border-color,color,opacity]\",\n isExecutionAgent\n ? \"border border-transparent text-[var(--oh-muted)]\"\n : \"border border-[#597FF4] bg-[#4A67BD]\",\n !isButtonDisabled &&\n isExecutionAgent &&\n \"cursor-pointer hover:text-white hover:bg-white/10\",\n !isButtonDisabled &&\n !isExecutionAgent &&\n \"cursor-pointer text-white hover:bg-white/10\",\n isButtonDisabled &&\n cn(\n \"opacity-50 cursor-not-allowed\",\n isExecutionAgent && \"border-transparent\",\n ),\n )}\n >\n <div className=\"flex items-center gap-1 pl-1.5\">\n {buttonIcon}\n <Typography.Text className=\"text-2.75 not-italic font-normal leading-5\">\n {buttonLabel}\n </Typography.Text>\n </div>\n <ComboboxCaretInline isOpen={contextMenuOpen} />\n </button>\n {contextMenuOpen && (\n <ChangeAgentContextMenu\n onClose={() => setContextMenuOpen(false)}\n onCodeClick={handleCodeClick}\n onPlanClick={handlePlanClick}\n />\n )}\n </div>\n );\n\n if (isHomePage) {\n return (\n <StyledTooltip\n content={t(I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION)}\n placement=\"top\"\n >\n {button}\n </StyledTooltip>\n );\n }\n\n return button;\n}\n"],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"change-agent-button.js","names":[],"sources":["../../../../src/components/features/chat/change-agent-button.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useState, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ChangeAgentContextMenu } from \"./change-agent-context-menu\";\nimport { cn } from \"#/utils/utils\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\n\nexport function ChangeAgentButton() {\n const [contextMenuOpen, setContextMenuOpen] = useState<boolean>(false);\n\n const { conversationMode, setConversationMode, subConversationTaskId } =\n useConversationStore();\n\n const webSocketStatus = useUnifiedWebSocketStatus();\n\n const isWebSocketConnected = webSocketStatus === \"OPEN\";\n\n const { curAgentState } = useAgentState();\n\n const { t } = useTranslation(\"openhands\");\n\n const isAgentRunning = curAgentState === AgentState.RUNNING;\n\n const { data: conversation } = useActiveConversation();\n\n const queryClient = useQueryClient();\n\n // Track the last invalidated task ID to prevent duplicate invalidations\n const lastInvalidatedTaskIdRef = useRef<string \| null>(null);\n\n // Poll sub-conversation task status\n const { taskStatus, subConversationId } = useSubConversationTaskPolling(\n subConversationTaskId,\n conversation?.id \|\| null,\n );\n\n // Invalidate parent conversation cache when task is ready (only once per task)\n useEffect(() => {\n if (\n taskStatus === \"READY\" &&\n subConversationId &&\n conversation?.id &&\n subConversationTaskId &&\n lastInvalidatedTaskIdRef.current !== subConversationTaskId\n ) {\n // Mark this task as invalidated to prevent duplicate calls\n lastInvalidatedTaskIdRef.current = subConversationTaskId;\n // Invalidate the parent conversation to refetch with updated sub_conversation_ids\n queryClient.invalidateQueries({\n queryKey: [\"user\", \"conversation\", conversation.id],\n });\n }\n }, [\n taskStatus,\n subConversationId,\n conversation?.id,\n subConversationTaskId,\n queryClient,\n ]);\n\n // Get handlePlanClick and isCreatingConversation from custom hook\n const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n // Close context menu when agent starts running\n useEffect(() => {\n if ((isAgentRunning \|\| !isWebSocketConnected) && contextMenuOpen) {\n setContextMenuOpen(false);\n }\n }, [isAgentRunning, contextMenuOpen, isWebSocketConnected]);\n\n const isButtonDisabled =\n isAgentRunning \|\| isCreatingConversation \|\| !isWebSocketConnected;\n\n // Handle Shift + Tab keyboard shortcut to cycle through modes\n useEffect(() => {\n if (isButtonDisabled) {\n return undefined;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n // Check for Shift + Tab combination\n if (event.shiftKey && event.key === \"Tab\") {\n // Prevent default tab navigation behavior\n event.preventDefault();\n event.stopPropagation();\n\n // Cycle between modes: code -> plan -> code\n const nextMode = conversationMode === \"code\" ? \"plan\" : \"code\";\n if (nextMode === \"plan\") {\n handlePlanClick(event);\n } else {\n setConversationMode(nextMode);\n }\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [\n isButtonDisabled,\n conversationMode,\n setConversationMode,\n handlePlanClick,\n ]);\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setContextMenuOpen(!contextMenuOpen);\n };\n\n const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setConversationMode(\"code\");\n };\n\n const isExecutionAgent = conversationMode === \"code\";\n\n const buttonLabel = useMemo(() => {\n if (isExecutionAgent) {\n return t(I18nKey.COMMON$CODE);\n }\n return t(I18nKey.COMMON$PLAN);\n }, [isExecutionAgent, t]);\n\n const buttonIcon = useMemo(() => {\n if (isExecutionAgent) {\n return <CodePillIcon className=\"h-[11px] w-[11px] shrink-0\" />;\n }\n return <LessonPlanIcon width={18} height={18} color=\"currentColor\" />;\n }, [isExecutionAgent]);\n\n ~~return~~ (\n <div className=\"relative\">\n <button\n type=\"button\"\n onClick={handleButtonClick}\n disabled={isButtonDisabled}\n className={cn(\n \"flex items-center rounded-[100px] transition-[border-color,color,opacity]\",\n isExecutionAgent\n ? \"border border-transparent text-[var(--oh-muted)]\"\n : \"border border-[#597FF4] bg-[#4A67BD]\",\n !isButtonDisabled &&\n isExecutionAgent &&\n \"cursor-pointer hover:text-white hover:bg-white/10\",\n !isButtonDisabled &&\n !isExecutionAgent &&\n \"cursor-pointer text-white hover:bg-white/10\",\n isButtonDisabled &&\n cn(\n \"opacity-50 cursor-not-allowed\",\n isExecutionAgent && \"border-transparent\",\n ),\n )}\n >\n <div className=\"flex items-center gap-1 pl-1.5\">\n {buttonIcon}\n <Typography.Text className=\"text-2.75 not-italic font-normal leading-5\">\n {buttonLabel}\n </Typography.Text>\n </div>\n <ComboboxCaretInline isOpen={contextMenuOpen} />\n </button>\n {contextMenuOpen && (\n <ChangeAgentContextMenu\n onClose={() => setContextMenuOpen(false)}\n onCodeClick={handleCodeClick}\n onPlanClick={handlePlanClick}\n />\n )}\n </div>\n );\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;AAkBA~~,SAAgB,IAAoB;CAClC,IAAM,CAAC,GAAiB,KAAsB,EAAkB,GAAM,EAEhE,EAAE,qBAAkB,wBAAqB,6BAC7C,GAAsB,~~EAIlB~~,IAFkB,GAEK,KAAoB,QAE3C,EAAE,qBAAkB,GAAe,EAEnC,EAAE,SAAM,EAAe,YAAY,EAEnC,IAAiB,MAAkB,EAAW,SAE9C,EAAE,MAAM,MAAiB,GAAuB,EAEhD,IAAc,GAAgB,EAG9B,IAA2B,EAAsB,KAAK,EAGtD,EAAE,eAAY,yBAAsB,EACxC,GACA,GAAc,MAAM,KACrB;AAGD,SAAgB;AACd,EACE,MAAe,WACf,KACA,GAAc,MACd,KACA,EAAyB,YAAY,MAGrC,EAAyB,UAAU,GAEnC,EAAY,kBAAkB,EAC5B,UAAU;GAAC;GAAQ;GAAgB,EAAa;GAAG,EACpD,CAAC;IAEH;EACD;EACA;EACA,GAAc;EACd;EACA;EACD,CAAC;CAGF,IAAM,EAAE,oBAAiB,8BAA2B,GAAoB;AAGxE,SAAgB;AACd,GAAK,KAAkB,CAAC,MAAyB,KAC/C,EAAmB,GAAM;IAE1B;EAAC;EAAgB;EAAiB;EAAqB,CAAC;CAE3D,IAAM,IACJ,~~KAAkB~~,~~KAA0B~~,CAAC;~~AAG/C~~,SAAgB;AACd,MAAI,EACF;EAGF,IAAM,KAAiB,MAAyB;AAE9C,OAAI,EAAM,YAAY,EAAM,QAAQ,OAAO;AAGzC,IADA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB;IAGvB,IAAM,IAAW,MAAqB,SAAS,SAAS;AACxD,IAAI,MAAa,SACf,EAAgB,EAAM,GAEtB,EAAoB,EAAS;;;AAOnC,SAFA,SAAS,iBAAiB,WAAW,EAAc,QAEtC;AACX,YAAS,oBAAoB,WAAW,EAAc;;IAEvD;EACD;EACA;EACA;EACA;EACD,CAAC;CAEF,IAAM,KAAqB,MAA+C;AAGxE,EAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAmB,CAAC,EAAgB;IAGhC,KAAmB,MAA+C;AAGtE,EAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAoB,OAAO;IAGvB,IAAmB,MAAqB,QAExC,IAAc,QAET,EADL,IACO,EAAQ,cAEV,EAAQ,YAFc,EAG9B,CAAC,GAAkB,EAAE,CAAC,EAEnB,IAAa,QACb,IACK,kBAAC,GAAD,EAAc,WAAU,8BAA+B,CAAA,GAEzD,kBAAC,GAAD;EAAgB,OAAO;EAAI,QAAQ;EAAI,OAAM;EAAiB,CAAA,EACpE,CAAC,EAAiB,CAAC~~;AAEtB~~,~~QACE~~,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,UAAU;GACV,WAAW,EACT,6EACA,IACI,qDACA,wCACJ,CAAC,KACC,KACA,qDACF,CAAC,KACC,CAAC,KACD,+CACF,KACE,EACE,iCACA,KAAoB,qBACrB,CACJ;aApBH,CAsBE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,GACD,kBAAC,EAAW,MAAZ;KAAiB,WAAU;eACxB;KACe,CAAA,CACd;OACN,kBAAC,GAAD,EAAqB,QAAQ,GAAmB,CAAA,CACzC;MACR,KACC,kBAAC,GAAD;GACE,eAAe,EAAmB,GAAM;GACxC,aAAa;GACb,aAAa;GACb,CAAA,CAEA"}
1	+ {"version":3,"file":"change-agent-button.js","names":[],"sources":["../../../../src/components/features/chat/change-agent-button.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useState, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ChangeAgentContextMenu } from \"./change-agent-context-menu\";\nimport { cn } from \"#/utils/utils\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\n\nexport function ChangeAgentButton() {\n const [contextMenuOpen, setContextMenuOpen] = useState<boolean>(false);\n\n const { conversationMode, setConversationMode, subConversationTaskId } =\n useConversationStore();\n\n const { conversationId } = useOptionalConversationId();\n\n const isHomePage = !conversationId;\n\n const webSocketStatus = useUnifiedWebSocketStatus();\n\n const isWebSocketConnected = webSocketStatus === \"OPEN\";\n\n const { curAgentState } = useAgentState();\n\n const { t } = useTranslation(\"openhands\");\n\n const isAgentRunning = curAgentState === AgentState.RUNNING;\n\n const { data: conversation } = useActiveConversation();\n\n const queryClient = useQueryClient();\n\n // Track the last invalidated task ID to prevent duplicate invalidations\n const lastInvalidatedTaskIdRef = useRef<string \| null>(null);\n\n // Poll sub-conversation task status\n const { taskStatus, subConversationId } = useSubConversationTaskPolling(\n subConversationTaskId,\n conversation?.id \|\| null,\n );\n\n // Invalidate parent conversation cache when task is ready (only once per task)\n useEffect(() => {\n if (\n taskStatus === \"READY\" &&\n subConversationId &&\n conversation?.id &&\n subConversationTaskId &&\n lastInvalidatedTaskIdRef.current !== subConversationTaskId\n ) {\n // Mark this task as invalidated to prevent duplicate calls\n lastInvalidatedTaskIdRef.current = subConversationTaskId;\n // Invalidate the parent conversation to refetch with updated sub_conversation_ids\n queryClient.invalidateQueries({\n queryKey: [\"user\", \"conversation\", conversation.id],\n });\n }\n }, [\n taskStatus,\n subConversationId,\n conversation?.id,\n subConversationTaskId,\n queryClient,\n ]);\n\n // Get handlePlanClick and isCreatingConversation from custom hook\n const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n // Close context menu when agent starts running\n useEffect(() => {\n if ((isAgentRunning \|\| !isWebSocketConnected) && contextMenuOpen) {\n setContextMenuOpen(false);\n }\n }, [isAgentRunning, contextMenuOpen, isWebSocketConnected]);\n\n const isButtonDisabled =\n isHomePage \|\|\n isAgentRunning \|\|\n isCreatingConversation \|\|\n !isWebSocketConnected;\n\n // Handle Shift + Tab keyboard shortcut to cycle through modes\n useEffect(() => {\n if (isButtonDisabled) {\n return undefined;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n // Check for Shift + Tab combination\n if (event.shiftKey && event.key === \"Tab\") {\n // Prevent default tab navigation behavior\n event.preventDefault();\n event.stopPropagation();\n\n // Cycle between modes: code -> plan -> code\n const nextMode = conversationMode === \"code\" ? \"plan\" : \"code\";\n if (nextMode === \"plan\") {\n handlePlanClick(event);\n } else {\n setConversationMode(nextMode);\n }\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [\n isButtonDisabled,\n conversationMode,\n setConversationMode,\n handlePlanClick,\n ]);\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setContextMenuOpen(!contextMenuOpen);\n };\n\n const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n event.stopPropagation();\n setConversationMode(\"code\");\n };\n\n const isExecutionAgent = conversationMode === \"code\";\n\n const buttonLabel = useMemo(() => {\n if (isExecutionAgent) {\n return t(I18nKey.COMMON$CODE);\n }\n return t(I18nKey.COMMON$PLAN);\n }, [isExecutionAgent, t]);\n\n const buttonIcon = useMemo(() => {\n if (isExecutionAgent) {\n return <CodePillIcon className=\"h-[11px] w-[11px] shrink-0\" />;\n }\n return <LessonPlanIcon width={18} height={18} color=\"currentColor\" />;\n }, [isExecutionAgent]);\n\n const button = (\n <div className=\"relative\">\n <button\n type=\"button\"\n onClick={handleButtonClick}\n disabled={isButtonDisabled}\n className={cn(\n \"flex items-center rounded-[100px] transition-[border-color,color,opacity]\",\n isExecutionAgent\n ? \"border border-transparent text-[var(--oh-muted)]\"\n : \"border border-[#597FF4] bg-[#4A67BD]\",\n !isButtonDisabled &&\n isExecutionAgent &&\n \"cursor-pointer hover:text-white hover:bg-white/10\",\n !isButtonDisabled &&\n !isExecutionAgent &&\n \"cursor-pointer text-white hover:bg-white/10\",\n isButtonDisabled &&\n cn(\n \"opacity-50 cursor-not-allowed\",\n isExecutionAgent && \"border-transparent\",\n ),\n )}\n >\n <div className=\"flex items-center gap-1 pl-1.5\">\n {buttonIcon}\n <Typography.Text className=\"text-2.75 not-italic font-normal leading-5\">\n {buttonLabel}\n </Typography.Text>\n </div>\n <ComboboxCaretInline isOpen={contextMenuOpen} />\n </button>\n {contextMenuOpen && (\n <ChangeAgentContextMenu\n onClose={() => setContextMenuOpen(false)}\n onCodeClick={handleCodeClick}\n onPlanClick={handlePlanClick}\n />\n )}\n </div>\n );\n\n if (isHomePage) {\n return (\n <StyledTooltip\n content={t(I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION)}\n placement=\"top\"\n >\n {button}\n </StyledTooltip>\n );\n }\n\n return button;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,IAAoB;CAClC,IAAM,CAAC,GAAiB,KAAsB,EAAkB,GAAM,EAEhE,EAAE,qBAAkB,wBAAqB,6BAC7C,GAAsB,EAElB,EAAE,sBAAmB,GAA2B,EAEhD,IAAa,CAAC,GAId,IAFkB,GAEK,KAAoB,QAE3C,EAAE,qBAAkB,GAAe,EAEnC,EAAE,SAAM,EAAe,YAAY,EAEnC,IAAiB,MAAkB,EAAW,SAE9C,EAAE,MAAM,MAAiB,GAAuB,EAEhD,IAAc,GAAgB,EAG9B,IAA2B,EAAsB,KAAK,EAGtD,EAAE,eAAY,yBAAsB,EACxC,GACA,GAAc,MAAM,KACrB;AAGD,SAAgB;AACd,EACE,MAAe,WACf,KACA,GAAc,MACd,KACA,EAAyB,YAAY,MAGrC,EAAyB,UAAU,GAEnC,EAAY,kBAAkB,EAC5B,UAAU;GAAC;GAAQ;GAAgB,EAAa;GAAG,EACpD,CAAC;IAEH;EACD;EACA;EACA,GAAc;EACd;EACA;EACD,CAAC;CAGF,IAAM,EAAE,oBAAiB,8BAA2B,GAAoB;AAGxE,SAAgB;AACd,GAAK,KAAkB,CAAC,MAAyB,KAC/C,EAAmB,GAAM;IAE1B;EAAC;EAAgB;EAAiB;EAAqB,CAAC;CAE3D,IAAM,IACJ,KACA,KACA,KACA,CAAC;AAGH,SAAgB;AACd,MAAI,EACF;EAGF,IAAM,KAAiB,MAAyB;AAE9C,OAAI,EAAM,YAAY,EAAM,QAAQ,OAAO;AAGzC,IADA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB;IAGvB,IAAM,IAAW,MAAqB,SAAS,SAAS;AACxD,IAAI,MAAa,SACf,EAAgB,EAAM,GAEtB,EAAoB,EAAS;;;AAOnC,SAFA,SAAS,iBAAiB,WAAW,EAAc,QAEtC;AACX,YAAS,oBAAoB,WAAW,EAAc;;IAEvD;EACD;EACA;EACA;EACA;EACD,CAAC;CAEF,IAAM,KAAqB,MAA+C;AAGxE,EAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAmB,CAAC,EAAgB;IAGhC,KAAmB,MAA+C;AAGtE,EAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAoB,OAAO;IAGvB,IAAmB,MAAqB,QAExC,IAAc,QAET,EADL,IACO,EAAQ,cAEV,EAAQ,YAFc,EAG9B,CAAC,GAAkB,EAAE,CAAC,EAEnB,IAAa,QACb,IACK,kBAAC,GAAD,EAAc,WAAU,8BAA+B,CAAA,GAEzD,kBAAC,GAAD;EAAgB,OAAO;EAAI,QAAQ;EAAI,OAAM;EAAiB,CAAA,EACpE,CAAC,EAAiB,CAAC,EAEhB,IACJ,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,UAAU;GACV,WAAW,EACT,6EACA,IACI,qDACA,wCACJ,CAAC,KACC,KACA,qDACF,CAAC,KACC,CAAC,KACD,+CACF,KACE,EACE,iCACA,KAAoB,qBACrB,CACJ;aApBH,CAsBE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,GACD,kBAAC,EAAW,MAAZ;KAAiB,WAAU;eACxB;KACe,CAAA,CACd;OACN,kBAAC,GAAD,EAAqB,QAAQ,GAAmB,CAAA,CACzC;MACR,KACC,kBAAC,GAAD;GACE,eAAe,EAAmB,GAAM;GACxC,aAAa;GACb,aAAa;GACb,CAAA,CAEA;;AAcR,QAXI,IAEA,kBAAC,GAAD;EACE,SAAS,EAAE,EAAQ,uCAAuC;EAC1D,WAAU;YAET;EACa,CAAA,GAIb"}

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`),c=require(`../../../node_modules/posthog-js/react/dist/esm/index.cjs`);require(`../../../constants/server-connection-error.cjs`);const l=require(`../../../stores/error-message-store.cjs`),u=require(`../../../stores/optimistic-user-message-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(`../../../services/chat-service.cjs`),ie=require(`./btw-messages.cjs`),ae=require(`./model-messages.cjs`),oe=require(`../../shared/loading-spinner.cjs`),se=require(`./interactive-chat-box.cjs`),ce=require(`../../../hooks/use-filtered-events.cjs`),le=require(`../../../hooks/use-scroll-to-bottom.cjs`),ue=require(`../../../hooks/use-load-older-events.cjs`),de=require(`./typing-indicator.cjs`),fe=require(`./chat-suggestions.cjs`),pe=require(`../../../context/scroll-context.cjs`),me=require(`../../../stores/initial-query-store.cjs`),he=require(`../../../hooks/use-handle-build-plan-click.cjs`),ge=require(`../../shared/buttons/scroll-to-bottom-button.cjs`),_e=require(`./chat-messages-skeleton.cjs`),ve=require(`./error-message-banner.cjs`),ye=require(`../../conversation-events/chat/messages.cjs`),be=require(`./pending-user-messages.cjs`),xe=require(`../../../hooks/mutation/use-unified-upload-files.cjs`),Se=require(`./confirmation-mode-enabled.cjs`),Ce=require(`./chat-status-indicator.cjs`),we=require(`../../../hooks/mutation/use-new-conversation-command.cjs`);let _=require(`react`);_=e.__toESM(_,1);let v=require(`react/jsx-runtime`);function Te(e,t){return e?`github`:t?`replay`:`direct`}function y(){let e=c.usePostHog(),{setMessageToSend:y}=o.useConversationStore(),{errorMessage:b,removeErrorMessage:Ee,setErrorMessage:x}=l.useErrorMessageStore(),{isTask:S,taskStatus:C,taskDetail:De}=ne.useTaskPolling(),w=S,T=f.useConversationWebSocket(),{send:Oe}=p.useSendMessage(),{renderableEvents:E,allConversationEvents:ke,totalEvents:D,hasSubstantiveAgentActions:Ae,userEventsExist:je}=ce.useFilteredEvents(),Me=u.useOptimisticUserMessageStore(e=>e.enqueuePendingMessage),Ne=u.useOptimisticUserMessageStore(e=>e.markPendingMessageError),O=u.useOptimisticUserMessageStore(e=>e.pendingMessages),{t:k}=t.useTranslation(`openhands`),A=_.default.useRef(null),{scrollDomToBottom:j,onChatBodyScroll:M,hitBottom:N,autoScroll:P,setAutoScroll:Pe,setHitBottom:Fe}=le.useScrollToBottom(A),{mutate:Ie,isPending:F}=we.useNewConversationCommand(),{curAgentState:I}=h.useAgentState(),{handleBuildPlanClick:L}=he.useHandleBuildPlanClick(),{data:Le}=m.useActiveConversation(),R=Le?.sandbox_status??null,z=R===`MISSING`||R===`ERROR`,B=I===r.AgentState.RUNNING||I===r.AgentState.LOADING;_.default.useEffect(()=>{if(B)return;let e=e=>{(e.metaKey||e.ctrlKey)&&e.key===`Enter`&&(e.preventDefault(),e.stopPropagation(),L(e),j())};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[B,L,j]);let{selectedRepository:Re,replayJson:V}=me.useInitialQueryStore(),{conversationId:H}=a.useOptionalConversationId(),{mutateAsync:ze}=xe.useUnifiedUploadFiles(),{isLoading:U,hasMore:W,loadOlder:G}=ue.useLoadOlderEvents(H),K=_.default.useRef(null),q=_.default.useCallback(e=>{if(w||U||!W)return;let t=e.scrollTop<=80,r=e.scrollHeight<=e.clientHeight+80;!t&&!r||(K.current={scrollHeight:e.scrollHeight,scrollTop:e.scrollTop},G().catch(e=>{K.current=null,x(e instanceof Error&&e.message?e.message:k(n.I18nKey.ERROR$GENERIC))}))},[W,U,w,G,x,k]),Be=_.default.useCallback(e=>{e.deltaY<0&&e.currentTarget.scrollTop<=0&&q(e.currentTarget)},[q]),J=_.default.useMemo(()=>H?O.some(e=>g.matchesPendingConversationId(H,e.conversationId)):!1,[O,H]),Y=ke.length>0||J||!T?.isLoadingHistory,X=!!H,Z=!Y&&!S,Ve=d.useModelStore(e=>H?(e.entriesByConversation[H]?.length??0)>0:!1),He=async(t,r,i)=>{if(t.trim()===`/new`){if(!H){s.displayErrorToast(k(n.I18nKey.CONVERSATION$CLEAR_NO_ID));return}if(D===0){s.displayErrorToast(k(n.I18nKey.CONVERSATION$CLEAR_EMPTY));return}if(F)return;Ie();return}let a=[...r],o=[...i];D===0?e.capture(`initial_query_submitted`,{entry_point:Te(Re!==null,V!==null),query_character_length:t.length,replay_json_size:V?.length}):e.capture(`user_message_sent`,{session_message_count:D,current_message_length: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 ze({conversationId:H,files:o}):{skipped_files:[],uploaded_files:[]};f.forEach(e=>s.displayErrorToast(e.reason));let m=`${k(`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`),c=require(`../../../node_modules/posthog-js/react/dist/esm/index.cjs`);require(`../../../constants/server-connection-error.cjs`);const l=require(`../../../stores/error-message-store.cjs`),u=require(`../../../stores/optimistic-user-message-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(`../../../services/chat-service.cjs`),ie=require(`./btw-messages.cjs`),ae=require(`./model-messages.cjs`),oe=require(`../../shared/loading-spinner.cjs`),se=require(`../../../hooks/use-scroll-to-bottom.cjs`),ce=require(`../../../context/scroll-context.cjs`),le=require(`./interactive-chat-box.cjs`),ue=require(`../../../hooks/use-filtered-events.cjs`),de=require(`../../../hooks/use-load-older-events.cjs`),fe=require(`./typing-indicator.cjs`),pe=require(`./chat-suggestions.cjs`),me=require(`../../../stores/initial-query-store.cjs`),he=require(`../../../hooks/use-handle-build-plan-click.cjs`),ge=require(`../../shared/buttons/scroll-to-bottom-button.cjs`),_e=require(`./chat-messages-skeleton.cjs`),ve=require(`./error-message-banner.cjs`),ye=require(`../../conversation-events/chat/messages.cjs`),be=require(`./pending-user-messages.cjs`),xe=require(`../../../hooks/mutation/use-unified-upload-files.cjs`),Se=require(`./confirmation-mode-enabled.cjs`),Ce=require(`./chat-status-indicator.cjs`),we=require(`../../../hooks/mutation/use-new-conversation-command.cjs`);let _=require(`react`);_=e.__toESM(_,1);let v=require(`react/jsx-runtime`);function Te(e,t){return e?`github`:t?`replay`:`direct`}function y(){let e=c.usePostHog(),{setMessageToSend:y}=o.useConversationStore(),{errorMessage:b,removeErrorMessage:Ee,setErrorMessage:x}=l.useErrorMessageStore(),{isTask:S,taskStatus:C,taskDetail:De}=ne.useTaskPolling(),w=S,T=f.useConversationWebSocket(),{send:Oe}=p.useSendMessage(),{renderableEvents:E,allConversationEvents:ke,totalEvents:D,hasSubstantiveAgentActions:Ae,userEventsExist:je}=ue.useFilteredEvents(),Me=u.useOptimisticUserMessageStore(e=>e.enqueuePendingMessage),Ne=u.useOptimisticUserMessageStore(e=>e.markPendingMessageError),O=u.useOptimisticUserMessageStore(e=>e.pendingMessages),{t:k}=t.useTranslation(`openhands`),A=_.default.useRef(null),{scrollDomToBottom:j,onChatBodyScroll:M,hitBottom:N,autoScroll:P,setAutoScroll:Pe,setHitBottom:Fe}=se.useScrollToBottom(A),{mutate:Ie,isPending:F}=we.useNewConversationCommand(),{curAgentState:I}=h.useAgentState(),{handleBuildPlanClick:L}=he.useHandleBuildPlanClick(),{data:Le}=m.useActiveConversation(),R=Le?.sandbox_status??null,z=R===`MISSING`||R===`ERROR`,B=I===r.AgentState.RUNNING||I===r.AgentState.LOADING;_.default.useEffect(()=>{if(B)return;let e=e=>{(e.metaKey||e.ctrlKey)&&e.key===`Enter`&&(e.preventDefault(),e.stopPropagation(),L(e),j())};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[B,L,j]);let{selectedRepository:Re,replayJson:V}=me.useInitialQueryStore(),{conversationId:H}=a.useOptionalConversationId(),{mutateAsync:ze}=xe.useUnifiedUploadFiles(),{isLoading:U,hasMore:W,loadOlder:G}=de.useLoadOlderEvents(H),K=_.default.useRef(null),q=_.default.useCallback(e=>{if(w||U||!W)return;let t=e.scrollTop<=80,r=e.scrollHeight<=e.clientHeight+80;!t&&!r||(K.current={scrollHeight:e.scrollHeight,scrollTop:e.scrollTop},G().catch(e=>{K.current=null,x(e instanceof Error&&e.message?e.message:k(n.I18nKey.ERROR$GENERIC))}))},[W,U,w,G,x,k]),Be=_.default.useCallback(e=>{e.deltaY<0&&e.currentTarget.scrollTop<=0&&q(e.currentTarget)},[q]),J=_.default.useMemo(()=>H?O.some(e=>g.matchesPendingConversationId(H,e.conversationId)):!1,[O,H]),Y=ke.length>0||J||!T?.isLoadingHistory,X=!!H,Z=!Y&&!S,Ve=d.useModelStore(e=>H?(e.entriesByConversation[H]?.length??0)>0:!1),He=async(t,r,i)=>{if(t.trim()===`/new`){if(!H){s.displayErrorToast(k(n.I18nKey.CONVERSATION$CLEAR_NO_ID));return}if(D===0){s.displayErrorToast(k(n.I18nKey.CONVERSATION$CLEAR_EMPTY));return}if(F)return;Ie();return}let a=[...r],o=[...i];D===0?e.capture(`initial_query_submitted`,{entry_point:Te(Re!==null,V!==null),query_character_length:t.length,replay_json_size:V?.length}):e.capture(`user_message_sent`,{session_message_count:D,current_message_length: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 ze({conversationId:H,files:o}):{skipped_files:[],uploaded_files:[]};f.forEach(e=>s.displayErrorToast(e.reason));let m=`${k(`CHAT_INTERFACE$AUGMENTED_PROMPT_FILES_TITLE`)}: ${p.join(`
-`)}`,h=p.length>0?`${t}\n\n${m}`:t,g=Me({conversationId:H,text:t,content:h,imageUrls:u,fileUrls:p,timestamp:d});y(``);try{await Oe(re.createChatMessage(h,u,p,d))}catch(e){Ne(g,e instanceof Error?e.message:`Failed to send message`)}};_.default.useEffect(()=>{if(K.current&&A.current){let{scrollHeight:e,scrollTop:t}=K.current,n=A.current,r=n.scrollHeight-e;r>0&&(n.scrollTop=t+r),K.current=null;return}P&&j()},[E.length,J,j]);let Ue=_.default.useRef(q);_.default.useEffect(()=>{Ue.current=q}),_.default.useEffect(()=>{let e=A.current;e&&Ue.current(e)},[E.length,W]);let We={scrollRef:A,autoScroll:P,setAutoScroll:Pe,scrollDomToBottom:j,hitBottom:N,setHitBottom:Fe,onChatBodyScroll:M},Q=I===r.AgentState.LOADING||I===r.AgentState.INIT,Ge=I===r.AgentState.STOPPED,$=I===r.AgentState.PAUSED,Ke=i.getStatusColor({isPausing:$,isTask:S,taskStatus:C,isStartingStatus:Q,isStopStatus:Ge,curAgentState:I}),qe=i.getStatusText({isPausing:$,isTask:S,taskStatus:C,taskDetail:De,isStartingStatus:Q,isStopStatus:Ge,curAgentState:I,errorMessage:b,t:k});return(0,v.jsx)(pe.ScrollProvider,{value:We,children:(0,v.jsxs)(`div`,{className:`relative flex h-full flex-col justify-between px-4`,"data-testid":`chat-interface`,children:[!Ae&&!J&&!je&&!Ve&&!Z&&!w&&D===0&&!z&&(0,v.jsx)(fe.ChatSuggestions,{onSuggestionsClick:e=>y(e)}),(0,v.jsxs)(`div`,{ref:A,onScroll:e=>{M(e.currentTarget),q(e.currentTarget)},onWheel:Be,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&&X&&(0,v.jsx)(_e.ChatMessagesSkeleton,{}),Z&&!X&&(0,v.jsx)(`div`,{className:`flex justify-center`,"data-testid":`loading-spinner`,children:(0,v.jsx)(oe.LoadingSpinner,{size:`small`})}),U&&(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)(oe.LoadingSpinner,{size:`small`}),(0,v.jsx)(`span`,{children:k(n.I18nKey.CHAT_INTERFACE$FETCHING_OLDER_MESSAGES)})]}),(0,v.jsx)(ae.ModelMessages,{conversationId:H,anchorEventId:null}),Y&&E.length>0&&(0,v.jsx)(ye.Messages,{messages:E,allEvents:ke}),(0,v.jsx)(be.PendingUserMessages,{})]}),(0,v.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-[6px]`,children:[(0,v.jsx)(ie.BtwMessages,{conversationId:H}),b&&(0,v.jsx)(ve.ErrorMessageBanner,{message:b,onDismiss:Ee,onRetry:b===`Unable to connect to server`?()=>T?.reconnect():void 0}),z?(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:k(R===`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:k(R===`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)(Se.default,{}),Q&&(0,v.jsx)(Ce.default,{statusColor:Ke,status:qe})]}),N?I===r.AgentState.RUNNING&&(0,v.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,v.jsx)(de.TypingIndicator,{})}):(0,v.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,v.jsx)(ge.ScrollToBottomButton,{onClick:j})})]})}),(0,v.jsx)(se.InteractiveChatBox,{onSubmit:He,disabled:F})]})]})]})})}exports.ChatInterface=y;
+`)}`,h=p.length>0?`${t}\n\n${m}`:t,g=Me({conversationId:H,text:t,content:h,imageUrls:u,fileUrls:p,timestamp:d});j(),y(``);try{await Oe(re.createChatMessage(h,u,p,d))}catch(e){Ne(g,e instanceof Error?e.message:`Failed to send message`)}};_.default.useEffect(()=>{if(K.current&&A.current){let{scrollHeight:e,scrollTop:t}=K.current,n=A.current,r=n.scrollHeight-e;r>0&&(n.scrollTop=t+r),K.current=null;return}P&&j()},[E.length,J,j]);let Ue=_.default.useRef(q);_.default.useEffect(()=>{Ue.current=q}),_.default.useEffect(()=>{let e=A.current;e&&Ue.current(e)},[E.length,W]);let We={scrollRef:A,autoScroll:P,setAutoScroll:Pe,scrollDomToBottom:j,hitBottom:N,setHitBottom:Fe,onChatBodyScroll:M},Q=I===r.AgentState.LOADING||I===r.AgentState.INIT,Ge=I===r.AgentState.STOPPED,$=I===r.AgentState.PAUSED,Ke=i.getStatusColor({isPausing:$,isTask:S,taskStatus:C,isStartingStatus:Q,isStopStatus:Ge,curAgentState:I}),qe=i.getStatusText({isPausing:$,isTask:S,taskStatus:C,taskDetail:De,isStartingStatus:Q,isStopStatus:Ge,curAgentState:I,errorMessage:b,t:k});return(0,v.jsx)(ce.ScrollProvider,{value:We,children:(0,v.jsxs)(`div`,{className:`relative flex h-full flex-col justify-between px-4`,"data-testid":`chat-interface`,children:[!Ae&&!J&&!je&&!Ve&&!Z&&!w&&D===0&&!z&&(0,v.jsx)(pe.ChatSuggestions,{onSuggestionsClick:e=>y(e)}),(0,v.jsxs)(`div`,{ref:A,"data-testid":`chat-scroll-container`,onScroll:e=>{M(e.currentTarget),q(e.currentTarget)},onWheel:Be,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&&X&&(0,v.jsx)(_e.ChatMessagesSkeleton,{}),Z&&!X&&(0,v.jsx)(`div`,{className:`flex justify-center`,"data-testid":`loading-spinner`,children:(0,v.jsx)(oe.LoadingSpinner,{size:`small`})}),U&&(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)(oe.LoadingSpinner,{size:`small`}),(0,v.jsx)(`span`,{children:k(n.I18nKey.CHAT_INTERFACE$FETCHING_OLDER_MESSAGES)})]}),(0,v.jsx)(ae.ModelMessages,{conversationId:H,anchorEventId:null}),Y&&E.length>0&&(0,v.jsx)(ye.Messages,{messages:E,allEvents:ke}),(0,v.jsx)(be.PendingUserMessages,{})]}),(0,v.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-[6px]`,children:[(0,v.jsx)(ie.BtwMessages,{conversationId:H}),b&&(0,v.jsx)(ve.ErrorMessageBanner,{message:b,onDismiss:Ee,onRetry:b===`Unable to connect to server`?()=>T?.reconnect():void 0}),z?(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:k(R===`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:k(R===`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)(Se.default,{}),Q&&(0,v.jsx)(Ce.default,{statusColor:Ke,status:qe})]}),N?I===r.AgentState.RUNNING&&(0,v.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,v.jsx)(fe.TypingIndicator,{})}):(0,v.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,v.jsx)(ge.ScrollToBottomButton,{onClick:j})})]})}),(0,v.jsx)(le.InteractiveChatBox,{onSubmit:He,disabled:F})]})]})]})})}exports.ChatInterface=y;
 //# sourceMappingURL=chat-interface.cjs.map