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

@openhands/agent-canvas 1.0.0-beta.7 → 1.0.0-beta.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 (385) 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 { 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 {\n modalTitleLgClassName,\n modalTitleLgMediumClassName,\n} from \"#/utils/modal-classes\";\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\nfunction getConnectionTestFailedTitle(\n t: ReturnType<typeof useTranslation>[\"t\"],\n host: string,\n): string {\n return t(I18nKey.BACKEND$CONNECTION_TEST_FAILED, {\n host,\n interpolation: { escapeValue: false },\n });\n}\n\nfunction getConnectionErrorDetail(error: unknown): string \| null {\n if (error instanceof Error) return error.message;\n if (typeof error === \"string\") return error;\n return null;\n}\n\nfunction getConnectionTestFailedMessage(title: string, error: unknown): string {\n const detail = getConnectionErrorDetail(error);\n return detail ? `${title}\\n${detail}` : title;\n}\n\nasync function testBackendConnection(\n backend: Pick<Backend, \"host\" \| \"apiKey\" \| \"kind\">,\n): Promise<void> {\n // Cloud backends authenticate via OAuth; preflight GET is not applicable.\n if (backend.kind !== \"local\") return;\n\n await new ServerClient(\n getAgentServerClientOptions({\n host: backend.host,\n sessionApiKey: backend.apiKey \|\| null,\n timeout: 5000,\n }),\n ).getServerInfo();\n}\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 BackendFormSubmitPayload {\n name: string;\n host: string;\n apiKey: string;\n kind: BackendKind;\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 isSubmitting: boolean;\n testIdRoot: string;\n }) => React.ReactNode;\n /* Used to disambiguate test ids across the same screen. /\n testIdRoot?: string;\n /* When true, the host field is pre-filled and disabled. /\n hostReadOnly?: boolean;\n /\n When true, a non-empty API key is required for submission regardless\n * of the inferred backend kind. The standard add form allows empty\n * keys for local backends; the auth-gate screen needs to enforce one.\n /\n requireApiKey?: boolean;\n /\n Replace the default synchronous add/update-and-close submit with a\n * custom async handler. The form builds the payload, validates\n * client-side, then hands it to this callback. If the callback throws,\n * the form remains open so the caller can surface errors.\n /\n onSubmitOverride?: (payload: BackendFormSubmitPayload) => Promise<void>;\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 hostReadOnly,\n requireApiKey,\n onSubmitOverride,\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 const [connectionError, setConnectionError] = React.useState<string \| null>(\n null,\n );\n const [isSubmitting, setIsSubmitting] = React.useState(false);\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 needsApiKey = requireApiKey \|\| kind !== \"local\";\n const canSubmit =\n name.trim().length > 0 &&\n isValidHostUrl(host) &&\n (!needsApiKey \|\| 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 = async (event: React.FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n if (isSubmitting) return;\n\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: BackendFormSubmitPayload = {\n name: name.trim(),\n host: normalizeHost(host),\n apiKey: apiKey.trim(),\n kind,\n };\n\n setConnectionError(null);\n setIsSubmitting(true);\n\n try {\n if (onSubmitOverride) {\n await onSubmitOverride(payload);\n return;\n }\n\n await testBackendConnection(payload);\n\n if (mode === \"edit\" && backend) {\n updateBackend(backend.id, payload);\n } else {\n addBackend(payload);\n }\n\n onSubmitted();\n } catch (error) {\n setConnectionError(\n getConnectionTestFailedMessage(\n getConnectionTestFailedTitle(t, payload.host),\n error,\n ),\n );\n } finally {\n setIsSubmitting(false);\n }\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={(value) => {\n setName(value);\n setConnectionError(null);\n }}\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={\n hostReadOnly\n ? undefined\n : (value) => {\n setHost(value);\n setConnectionError(null);\n }\n }\n onBlur={() => setHostTouched(true)}\n placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n className=\"w-full\"\n showRequiredTag\n error={hostError}\n isDisabled={hostReadOnly}\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={(value) => {\n setApiKey(value);\n setConnectionError(null);\n }}\n placeholder=\"\"\n className=\"w-full\"\n />\n\n {connectionError ? (\n <div\n role=\"alert\"\n data-testid={`${testIdRoot}-error`}\n className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n >\n {connectionError}\n </div>\n ) : null}\n\n {mode === \"edit\" && backend && (\n <BackendStatusBadge backend={backend} testIdRoot={testIdRoot} />\n )}\n\n {renderActions ? (\n renderActions({\n canSubmit: canSubmit && !isSubmitting,\n isSubmitting,\n testIdRoot,\n })\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 \|\| isSubmitting}\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 const [connectionError, setConnectionError] = React.useState<string \| null>(\n null,\n );\n const [isSubmitting, setIsSubmitting] = React.useState(false);\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 = async (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (!canSubmit \|\| isSubmitting) return;\n\n const payload = {\n name: name.trim(),\n host: normalizeHost(host),\n apiKey: apiKey.trim(),\n kind,\n };\n\n setConnectionError(null);\n setIsSubmitting(true);\n\n try {\n await testBackendConnection(payload);\n addBackend(payload);\n redirectAfterAdd();\n onClose();\n } catch (error) {\n setConnectionError(\n getConnectionTestFailedMessage(\n getConnectionTestFailedTitle(t, payload.host),\n error,\n ),\n );\n } finally {\n setIsSubmitting(false);\n }\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={(value) => {\n setName(value);\n setConnectionError(null);\n }}\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={(value) => {\n setHost(value);\n setConnectionError(null);\n }}\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={(value) => {\n setApiKey(value);\n setConnectionError(null);\n }}\n placeholder=\"sk-••••••••••\"\n className=\"w-full\"\n />\n\n {connectionError ? (\n <div\n role=\"alert\"\n data-testid=\"add-backend-error\"\n className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n >\n {connectionError}\n </div>\n ) : null}\n\n <BrandButton\n type=\"submit\"\n variant=\"secondary\"\n isDisabled={!canSubmit \|\| isSubmitting}\n testId=\"add-backend-submit\"\n className=\"w-full text-center\"\n >\n {isSubmitting\n ? t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING)\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={modalTitleLgMediumClassName}\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={modalTitleLgClassName}>\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={cn(\"pr-6\", modalTitleLgClassName)}>\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 {\n modalTitleLgClassName,\n modalTitleLgMediumClassName,\n} from \"#/utils/modal-classes\";\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\nfunction getConnectionTestFailedTitle(\n t: ReturnType<typeof useTranslation>[\"t\"],\n host: string,\n): string {\n return t(I18nKey.BACKEND$CONNECTION_TEST_FAILED, {\n host,\n interpolation: { escapeValue: false },\n });\n}\n\nfunction getConnectionErrorDetail(error: unknown): string \| null {\n if (error instanceof Error) return error.message;\n if (typeof error === \"string\") return error;\n return null;\n}\n\nfunction getConnectionTestFailedMessage(title: string, error: unknown): string {\n const detail = getConnectionErrorDetail(error);\n return detail ? `${title}\\n${detail}` : title;\n}\n\nasync function testBackendConnection(\n backend: Pick<Backend, \"host\" \| \"apiKey\" \| \"kind\">,\n): Promise<void> {\n // Cloud backends authenticate via OAuth; preflight GET is not applicable.\n if (backend.kind !== \"local\") return;\n\n await new ServerClient(\n getAgentServerClientOptions({\n host: backend.host,\n sessionApiKey: backend.apiKey \|\| null,\n timeout: 5000,\n }),\n ).getServerInfo();\n}\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 BackendFormSubmitPayload {\n name: string;\n host: string;\n apiKey: string;\n kind: BackendKind;\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 isSubmitting: boolean;\n testIdRoot: string;\n }) => React.ReactNode;\n /* Used to disambiguate test ids across the same screen. /\n testIdRoot?: string;\n /* When true, the host field is pre-filled and disabled. /\n hostReadOnly?: boolean;\n /\n When true, a non-empty API key is required for submission regardless\n * of the inferred backend kind. The standard add form allows empty\n * keys for local backends; the auth-gate screen needs to enforce one.\n /\n requireApiKey?: boolean;\n /\n When true, hides the name/host/API-key inputs (and related inline\n * errors) while keeping the action row visible — used by onboarding\n * after a successful connection probe.\n /\n hideConfigurationFields?: boolean;\n /\n Replace the default synchronous add/update-and-close submit with a\n * custom async handler. The form builds the payload, validates\n * client-side, then hands it to this callback. If the callback throws,\n * the form remains open so the caller can surface errors.\n /\n onSubmitOverride?: (payload: BackendFormSubmitPayload) => Promise<void>;\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 hostReadOnly,\n requireApiKey,\n hideConfigurationFields = false,\n onSubmitOverride,\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 const [connectionError, setConnectionError] = React.useState<string \| null>(\n null,\n );\n const [isSubmitting, setIsSubmitting] = React.useState(false);\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 needsApiKey = requireApiKey \|\| kind !== \"local\";\n const canSubmit =\n name.trim().length > 0 &&\n isValidHostUrl(host) &&\n (!needsApiKey \|\| 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 = async (event: React.FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n if (isSubmitting) return;\n\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: BackendFormSubmitPayload = {\n name: name.trim(),\n host: normalizeHost(host),\n apiKey: apiKey.trim(),\n kind,\n };\n\n setConnectionError(null);\n setIsSubmitting(true);\n\n try {\n if (onSubmitOverride) {\n await onSubmitOverride(payload);\n return;\n }\n\n await testBackendConnection(payload);\n\n if (mode === \"edit\" && backend) {\n updateBackend(backend.id, payload);\n } else {\n addBackend(payload);\n }\n\n onSubmitted();\n } catch (error) {\n setConnectionError(\n getConnectionTestFailedMessage(\n getConnectionTestFailedTitle(t, payload.host),\n error,\n ),\n );\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n <form\n data-testid={`${testIdRoot}-form`}\n onSubmit={handleSubmit}\n className=\"flex flex-col gap-4\"\n >\n <div\n data-testid={`${testIdRoot}-configuration-fields`}\n className={cn(\n \"flex flex-col gap-4\",\n hideConfigurationFields && \"hidden\",\n )}\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={(value) => {\n setName(value);\n setConnectionError(null);\n }}\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={\n hostReadOnly\n ? undefined\n : (value) => {\n setHost(value);\n setConnectionError(null);\n }\n }\n onBlur={() => setHostTouched(true)}\n placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n className=\"w-full\"\n showRequiredTag\n error={hostError}\n isDisabled={hostReadOnly}\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={(value) => {\n setApiKey(value);\n setConnectionError(null);\n }}\n placeholder=\"\"\n className=\"w-full\"\n />\n\n {connectionError ? (\n <div\n role=\"alert\"\n data-testid={`${testIdRoot}-error`}\n className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n >\n {connectionError}\n </div>\n ) : null}\n\n {mode === \"edit\" && backend && (\n <BackendStatusBadge backend={backend} testIdRoot={testIdRoot} />\n )}\n </div>\n\n {renderActions ? (\n renderActions({\n canSubmit: canSubmit && !isSubmitting,\n isSubmitting,\n testIdRoot,\n })\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 \|\| isSubmitting}\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 const [connectionError, setConnectionError] = React.useState<string \| null>(\n null,\n );\n const [isSubmitting, setIsSubmitting] = React.useState(false);\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 = async (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (!canSubmit \|\| isSubmitting) return;\n\n const payload = {\n name: name.trim(),\n host: normalizeHost(host),\n apiKey: apiKey.trim(),\n kind,\n };\n\n setConnectionError(null);\n setIsSubmitting(true);\n\n try {\n await testBackendConnection(payload);\n addBackend(payload);\n redirectAfterAdd();\n onClose();\n } catch (error) {\n setConnectionError(\n getConnectionTestFailedMessage(\n getConnectionTestFailedTitle(t, payload.host),\n error,\n ),\n );\n } finally {\n setIsSubmitting(false);\n }\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={(value) => {\n setName(value);\n setConnectionError(null);\n }}\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={(value) => {\n setHost(value);\n setConnectionError(null);\n }}\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={(value) => {\n setApiKey(value);\n setConnectionError(null);\n }}\n placeholder=\"sk-••••••••••\"\n className=\"w-full\"\n />\n\n {connectionError ? (\n <div\n role=\"alert\"\n data-testid=\"add-backend-error\"\n className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n >\n {connectionError}\n </div>\n ) : null}\n\n <BrandButton\n type=\"submit\"\n variant=\"secondary\"\n isDisabled={!canSubmit \|\| isSubmitting}\n testId=\"add-backend-submit\"\n className=\"w-full text-center\"\n >\n {isSubmitting\n ? t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING)\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={modalTitleLgMediumClassName}\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={modalTitleLgClassName}>\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={cn(\"pr-6\", modalTitleLgClassName)}>\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/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(`../../../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(`
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../types/agent-state.cjs`),i=require(`../../../utils/utils.cjs`),a=require(`../../../hooks/use-conversation-id.cjs`),o=require(`../../../stores/conversation-store.cjs`),s=require(`../../../utils/custom-toast-handlers.cjs`);require(`../../../constants/server-connection-error.cjs`);const c=require(`../../../stores/error-message-store.cjs`),l=require(`../../../stores/optimistic-user-message-store.cjs`),u=require(`../../../stores/model-store.cjs`),d=require(`../../../contexts/conversation-websocket-context.cjs`),f=require(`../../../hooks/use-send-message.cjs`),p=require(`../../../hooks/query/use-active-conversation.cjs`),m=require(`../../../hooks/use-agent-state.cjs`),ee=require(`../../../utils/convert-image-to-base-64.cjs`),te=require(`../../../utils/file-validation.cjs`),h=require(`../../../utils/pending-task-message-link.cjs`),g=require(`../../../hooks/query/use-task-polling.cjs`),ne=require(`../../../hooks/use-tracking.cjs`),re=require(`../../../services/chat-service.cjs`),ie=require(`./btw-messages.cjs`),ae=require(`./model-messages.cjs`),_=require(`../../shared/loading-spinner.cjs`),oe=require(`../../../hooks/use-scroll-to-bottom.cjs`),se=require(`../../../context/scroll-context.cjs`),ce=require(`./interactive-chat-box.cjs`),le=require(`../../../hooks/use-filtered-events.cjs`),ue=require(`../../../hooks/use-load-older-events.cjs`),de=require(`./typing-indicator.cjs`),fe=require(`./chat-suggestions.cjs`),pe=require(`../../../stores/initial-query-store.cjs`),me=require(`../../../hooks/use-handle-build-plan-click.cjs`),he=require(`../../shared/buttons/scroll-to-bottom-button.cjs`),ge=require(`./chat-messages-skeleton.cjs`),_e=require(`./error-message-banner.cjs`),ve=require(`../../conversation-events/chat/messages.cjs`),ye=require(`./pending-user-messages.cjs`),be=require(`../../../hooks/mutation/use-unified-upload-files.cjs`),xe=require(`./confirmation-mode-enabled.cjs`),Se=require(`./chat-status-indicator.cjs`),Ce=require(`../../../hooks/mutation/use-new-conversation-command.cjs`);let v=require(`react`);v=e.__toESM(v,1);let y=require(`react/jsx-runtime`);function we(e,t){return e?`github`:t?`replay`:`direct`}function b(){let{trackInitialQuerySubmitted:e,trackUserMessageSent:b}=ne.useTracking(),{setMessageToSend:x}=o.useConversationStore(),{errorMessage:S,removeErrorMessage:Te,setErrorMessage:C}=c.useErrorMessageStore(),{isTask:w,taskStatus:T,taskDetail:Ee}=g.useTaskPolling(),E=w,D=d.useConversationWebSocket(),{send:De}=f.useSendMessage(),{renderableEvents:O,allConversationEvents:k,totalEvents:A,hasSubstantiveAgentActions:Oe,userEventsExist:ke}=le.useFilteredEvents(),Ae=l.useOptimisticUserMessageStore(e=>e.enqueuePendingMessage),je=l.useOptimisticUserMessageStore(e=>e.markPendingMessageError),j=l.useOptimisticUserMessageStore(e=>e.pendingMessages),{t:M}=t.useTranslation(`openhands`),N=v.default.useRef(null),{scrollDomToBottom:P,onChatBodyScroll:F,hitBottom:I,autoScroll:L,setAutoScroll:Me,setHitBottom:Ne}=oe.useScrollToBottom(N),{mutate:Pe,isPending:R}=Ce.useNewConversationCommand(),{curAgentState:z}=m.useAgentState(),{handleBuildPlanClick:B}=me.useHandleBuildPlanClick(),{data:Fe}=p.useActiveConversation(),V=Fe?.sandbox_status??null,H=V===`MISSING`||V===`ERROR`,U=z===r.AgentState.RUNNING||z===r.AgentState.LOADING;v.default.useEffect(()=>{if(U)return;let e=e=>{(e.metaKey||e.ctrlKey)&&e.key===`Enter`&&(e.preventDefault(),e.stopPropagation(),B(e),P())};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[U,B,P]);let{selectedRepository:Ie,replayJson:W}=pe.useInitialQueryStore(),{conversationId:G}=a.useOptionalConversationId(),{mutateAsync:Le}=be.useUnifiedUploadFiles(),{isLoading:K,hasMore:q,loadOlder:Re}=ue.useLoadOlderEvents(G),J=v.default.useRef(null),Y=v.default.useCallback(e=>{if(E||K||!q)return;let t=e.scrollTop<=80,r=e.scrollHeight<=e.clientHeight+80;!t&&!r||(J.current={scrollHeight:e.scrollHeight,scrollTop:e.scrollTop},Re().catch(e=>{J.current=null,C(e instanceof Error&&e.message?e.message:M(n.I18nKey.ERROR$GENERIC))}))},[q,K,E,Re,C,M]),ze=v.default.useCallback(e=>{e.deltaY<0&&e.currentTarget.scrollTop<=0&&Y(e.currentTarget)},[Y]),X=v.default.useMemo(()=>G?j.some(e=>h.matchesPendingConversationId(G,e.conversationId)):!1,[j,G]),Be=k.length>0||X||!D?.isLoadingHistory,Ve=!!G,Z=!Be&&!w,He=u.useModelStore(e=>G?(e.entriesByConversation[G]?.length??0)>0:!1),Ue=async(t,r,i)=>{if(t.trim()===`/new`){if(!G){s.displayErrorToast(M(n.I18nKey.CONVERSATION$CLEAR_NO_ID));return}if(A===0){s.displayErrorToast(M(n.I18nKey.CONVERSATION$CLEAR_EMPTY));return}if(R)return;Pe();return}let a=[...r],o=[...i];A===0?e({entryPoint:we(Ie!==null,W!==null),queryCharacterLength:t.length,replayJsonSize:W?.length}):b({sessionMessageCount:A,currentMessageLength:t.length});let c=te.validateFiles([...a,...o]);if(!c.isValid){s.displayErrorToast(`Error: ${c.errorMessage}`);return}let l=a.map(e=>ee.convertImageToBase64(e)),u=await Promise.all(l),d=new Date().toISOString(),{skipped_files:f,uploaded_files:p}=o.length>0?await Le({conversationId:G,files:o}):{skipped_files:[],uploaded_files:[]};f.forEach(e=>s.displayErrorToast(e.reason));let m=`${M(`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});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;
+`)}`,h=p.length>0?`${t}\n\n${m}`:t,g=Ae({conversationId:G,text:t,content:h,imageUrls:u,fileUrls:p,timestamp:d});P(),x(``);try{await De(re.createChatMessage(h,u,p,d))}catch(e){je(g,e instanceof Error?e.message:`Failed to send message`)}};v.default.useEffect(()=>{if(J.current&&N.current){let{scrollHeight:e,scrollTop:t}=J.current,n=N.current,r=n.scrollHeight-e;r>0&&(n.scrollTop=t+r),J.current=null;return}L&&P()},[O.length,X,P]);let We=v.default.useRef(Y);v.default.useEffect(()=>{We.current=Y}),v.default.useEffect(()=>{let e=N.current;e&&We.current(e)},[O.length,q]);let Ge={scrollRef:N,autoScroll:L,setAutoScroll:Me,scrollDomToBottom:P,hitBottom:I,setHitBottom:Ne,onChatBodyScroll:F},Q=z===r.AgentState.LOADING||z===r.AgentState.INIT,Ke=z===r.AgentState.STOPPED,$=z===r.AgentState.PAUSED,qe=i.getStatusColor({isPausing:$,isTask:w,taskStatus:T,isStartingStatus:Q,isStopStatus:Ke,curAgentState:z}),Je=i.getStatusText({isPausing:$,isTask:w,taskStatus:T,taskDetail:Ee,isStartingStatus:Q,isStopStatus:Ke,curAgentState:z,errorMessage:S,t:M});return(0,y.jsx)(se.ScrollProvider,{value:Ge,children:(0,y.jsxs)(`div`,{className:`relative flex h-full flex-col justify-between px-4`,"data-testid":`chat-interface`,children:[!Oe&&!X&&!ke&&!He&&!Z&&!E&&A===0&&!H&&(0,y.jsx)(fe.ChatSuggestions,{onSuggestionsClick:e=>x(e)}),(0,y.jsxs)(`div`,{ref:N,"data-testid":`chat-scroll-container`,onScroll:e=>{F(e.currentTarget),Y(e.currentTarget)},onWheel:ze,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&&Ve&&(0,y.jsx)(ge.ChatMessagesSkeleton,{}),Z&&!Ve&&(0,y.jsx)(`div`,{className:`flex justify-center`,"data-testid":`loading-spinner`,children:(0,y.jsx)(_.LoadingSpinner,{size:`small`})}),K&&(0,y.jsxs)(`div`,{className:`flex items-center justify-center gap-2 py-3 text-sm text-neutral-400`,"data-testid":`loading-older-events`,children:[(0,y.jsx)(_.LoadingSpinner,{size:`small`}),(0,y.jsx)(`span`,{children:M(n.I18nKey.CHAT_INTERFACE$FETCHING_OLDER_MESSAGES)})]}),(0,y.jsx)(ae.ModelMessages,{conversationId:G,anchorEventId:null}),Be&&O.length>0&&(0,y.jsx)(ve.Messages,{messages:O,allEvents:k}),(0,y.jsx)(ye.PendingUserMessages,{})]}),(0,y.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-[6px]`,children:[(0,y.jsx)(ie.BtwMessages,{conversationId:G}),S&&(0,y.jsx)(_e.ErrorMessageBanner,{message:S,onDismiss:Te,onRetry:S===`Unable to connect to server`?()=>D?.reconnect():void 0}),H?(0,y.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,y.jsx)(`p`,{className:`text-xs font-semibold text-[var(--oh-foreground)]`,children:M(V===`ERROR`?n.I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_TITLE:n.I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_TITLE)}),(0,y.jsx)(`p`,{className:`text-xs text-[var(--oh-muted)] mt-0.5`,children:M(V===`ERROR`?n.I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_DESCRIPTION:n.I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_DESCRIPTION)})]}):(0,y.jsxs)(`div`,{className:`relative`,children:[(0,y.jsx)(`div`,{className:`pointer-events-none absolute inset-x-0 bottom-full mb-1 z-20`,children:(0,y.jsxs)(`div`,{className:`flex justify-between relative`,children:[(0,y.jsxs)(`div`,{className:`flex items-end gap-1 pointer-events-auto`,children:[(0,y.jsx)(xe.default,{}),Q&&(0,y.jsx)(Se.default,{statusColor:qe,status:Je})]}),I?z===r.AgentState.RUNNING&&(0,y.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,y.jsx)(de.TypingIndicator,{})}):(0,y.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,y.jsx)(he.ScrollToBottomButton,{onClick:P})})]})}),(0,y.jsx)(ce.InteractiveChatBox,{onSubmit:Ue,disabled:R})]})]})]})})}exports.ChatInterface=b;
 //# sourceMappingURL=chat-interface.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"chat-interface.cjs","names":[],"sources":["../../../../src/components/features/chat/chat-interface.tsx"],"sourcesContent":["import React from \"react\";\nimport { usePostHog } from \"posthog-js/react\";\nimport { useTranslation } from \"react-i18next\";\nimport { convertImageToBase64 } from \"#/utils/convert-image-to-base-64\";\nimport { createChatMessage } from \"#/services/chat-service\";\nimport { BtwMessages } from \"./btw-messages\";\nimport { ModelMessages } from \"./model-messages\";\nimport { useModelStore } from \"#/stores/model-store\";\nimport { InteractiveChatBox } from \"./interactive-chat-box\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useFilteredEvents } from \"#/hooks/use-filtered-events\";\nimport { useScrollToBottom } from \"#/hooks/use-scroll-to-bottom\";\nimport { useLoadOlderEvents } from \"#/hooks/use-load-older-events\";\nimport { TypingIndicator } from \"./typing-indicator\";\nimport { ChatSuggestions } from \"./chat-suggestions\";\nimport { ScrollProvider } from \"#/context/scroll-context\";\nimport { useInitialQueryStore } from \"#/stores/initial-query-store\";\nimport { useSendMessage } from \"#/hooks/use-send-message\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\n\nimport { ScrollToBottomButton } from \"#/components/shared/buttons/scroll-to-bottom-button\";\nimport { LoadingSpinner } from \"#/components/shared/loading-spinner\";\nimport { ChatMessagesSkeleton } from \"./chat-messages-skeleton\";\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { useErrorMessageStore } from \"#/stores/error-message-store\";\nimport { useOptimisticUserMessageStore } from \"#/stores/optimistic-user-message-store\";\nimport { SERVER_CONNECTION_ERROR_MESSAGE } from \"#/constants/server-connection-error\";\nimport { ErrorMessageBanner } from \"./error-message-banner\";\nimport { Messages } from \"#/components/conversation-events/chat/messages\";\nimport { PendingUserMessages } from \"./pending-user-messages\";\nimport { useUnifiedUploadFiles } from \"#/hooks/mutation/use-unified-upload-files\";\nimport { validateFiles } from \"#/utils/file-validation\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport ConfirmationModeEnabled from \"./confirmation-mode-enabled\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\nimport { matchesPendingConversationId } from \"#/utils/pending-task-message-link\";\nimport { useConversationWebSocket } from \"#/contexts/conversation-websocket-context\";\nimport ChatStatusIndicator from \"./chat-status-indicator\";\nimport { getStatusColor, getStatusText } from \"#/utils/utils\";\nimport { useNewConversationCommand } from \"#/hooks/mutation/use-new-conversation-command\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nfunction getEntryPoint(\n hasRepository: boolean \| null,\n hasReplayJson: boolean \| null,\n): string {\n if (hasRepository) return \"github\";\n if (hasReplayJson) return \"replay\";\n return \"direct\";\n}\n\nexport function ChatInterface() {\n const posthog = usePostHog();\n const { setMessageToSend } = useConversationStore();\n const { errorMessage, removeErrorMessage, setErrorMessage } =\n useErrorMessageStore();\n const { isTask, taskStatus, taskDetail } = useTaskPolling();\n // Hide empty-state chrome for the entire `/conversations/task-{uuid}` route,\n // including the brief READY window before redirect completes.\n const isProvisioningTask = isTask;\n const conversationWebSocket = useConversationWebSocket();\n const { send } = useSendMessage();\n const {\n renderableEvents,\n allConversationEvents,\n totalEvents,\n hasSubstantiveAgentActions,\n userEventsExist,\n } = useFilteredEvents();\n const enqueuePendingMessage = useOptimisticUserMessageStore(\n (state) => state.enqueuePendingMessage,\n );\n const markPendingMessageError = useOptimisticUserMessageStore(\n (state) => state.markPendingMessageError,\n );\n const pendingMessages = useOptimisticUserMessageStore(\n (state) => state.pendingMessages,\n );\n const { t } = useTranslation(\"openhands\");\n const scrollRef = React.useRef<HTMLDivElement>(null);\n const {\n scrollDomToBottom,\n onChatBodyScroll,\n hitBottom,\n autoScroll,\n setAutoScroll,\n setHitBottom,\n } = useScrollToBottom(scrollRef);\n const {\n mutate: newConversationCommand,\n isPending: isNewConversationPending,\n } = useNewConversationCommand();\n\n const { curAgentState } = useAgentState();\n const { handleBuildPlanClick } = useHandleBuildPlanClick();\n\n // Cloud conversations whose sandbox is MISSING or ERROR are read-only:\n // the sandbox is gone and cannot be resumed, so we hide the chat input\n // and show an explanatory banner. For local backends sandbox_status is\n // always null, so this is effectively a no-op for non-cloud use.\n const { data: activeConversation } = useActiveConversation();\n const sandboxStatus = activeConversation?.sandbox_status ?? null;\n const isArchivedConversation =\n sandboxStatus === \"MISSING\" \|\| sandboxStatus === \"ERROR\";\n\n // Disable Build button while agent is running (streaming)\n const isAgentRunning =\n curAgentState === AgentState.RUNNING \|\|\n curAgentState === AgentState.LOADING;\n\n // Global keyboard shortcut for Build button (Cmd+Enter / Ctrl+Enter)\n // This is placed here instead of PlanPreview to avoid duplicate listeners\n // when multiple PlanPreview components exist in the chat\n React.useEffect(() => {\n if (isAgentRunning) {\n return undefined;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n // Check for Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux)\n if ((event.metaKey \|\| event.ctrlKey) && event.key === \"Enter\") {\n event.preventDefault();\n event.stopPropagation();\n handleBuildPlanClick(event);\n scrollDomToBottom();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [isAgentRunning, handleBuildPlanClick, scrollDomToBottom]);\n\n const { selectedRepository, replayJson } = useInitialQueryStore();\n const { conversationId } = useOptionalConversationId();\n const { mutateAsync: uploadFiles } = useUnifiedUploadFiles();\n\n // Lazy \"scroll up to load older events\" backfill. Initial REST fetch only\n // returns the most recent page; this hook paginates older events into the\n // store on demand so the chat doesn't load (potentially) thousands of\n // events on first render.\n const {\n isLoading: isLoadingOlderEvents,\n hasMore: hasMoreOlderEvents,\n loadOlder,\n } = useLoadOlderEvents(conversationId);\n\n // Trigger `loadOlder` and preserve the visual scroll position once the\n // older page is merged in (otherwise prepending events would jump the\n // chat far down). We fire from three places to cover the cases the\n // browser's scroll event misses:\n //\n // - `onScroll`: normal \"user scrolled near the top\" path.\n // - `onWheel`: user is already pinned at scrollTop=0 and tries to\n // wheel further up — no scroll event fires past 0.\n // - effect: content is shorter than the viewport (no scrollbar\n // at all), so the user has nothing to scroll. Re-runs\n // as more pages arrive until there's overflow or the\n // server runs out of older events.\n const SCROLL_TOP_THRESHOLD_PX = 80;\n const preserveScrollPosition = React.useRef<{\n scrollHeight: number;\n scrollTop: number;\n } \| null>(null);\n const maybeLoadOlder = React.useCallback(\n (target: HTMLElement) => {\n if (isProvisioningTask \|\| isLoadingOlderEvents \|\| !hasMoreOlderEvents) {\n return;\n }\n\n const atTop = target.scrollTop <= SCROLL_TOP_THRESHOLD_PX;\n const noOverflow =\n target.scrollHeight <= target.clientHeight + SCROLL_TOP_THRESHOLD_PX;\n if (!atTop && !noOverflow) return;\n\n preserveScrollPosition.current = {\n scrollHeight: target.scrollHeight,\n scrollTop: target.scrollTop,\n };\n loadOlder().catch((error) => {\n preserveScrollPosition.current = null;\n const message =\n error instanceof Error && error.message\n ? error.message\n : t(I18nKey.ERROR$GENERIC);\n setErrorMessage(message);\n });\n },\n [\n hasMoreOlderEvents,\n isLoadingOlderEvents,\n isProvisioningTask,\n loadOlder,\n setErrorMessage,\n t,\n ],\n );\n\n const handleWheelForPagination = React.useCallback(\n (e: React.WheelEvent<HTMLDivElement>) => {\n // Browsers don't dispatch a scroll event when scrollTop is already\n // 0 and the user wheels upward, so onScroll alone misses this case.\n if (e.deltaY < 0 && e.currentTarget.scrollTop <= 0) {\n maybeLoadOlder(e.currentTarget);\n }\n },\n [maybeLoadOlder],\n );\n\n const hasPendingUserMessages = React.useMemo(\n () =>\n conversationId\n ? pendingMessages.some((message) =>\n matchesPendingConversationId(\n conversationId,\n message.conversationId,\n ),\n )\n : false,\n [pendingMessages, conversationId],\n );\n\n // Show V1 messages immediately if events exist in store (e.g., remount),\n // if the user already has a locally-tracked pending bubble (home-page cloud\n // submit while history/WS catch up), or once loading completes. This\n // replaces the old transition-observation pattern (useState + useEffect\n // watching loading→loaded) which always showed skeleton on remount because\n // local state initialized to false.\n const showConversationMessages =\n allConversationEvents.length > 0 \|\|\n hasPendingUserMessages \|\|\n !conversationWebSocket?.isLoadingHistory;\n\n const isReturningToConversation = !!conversationId;\n // Only show loading skeleton when genuinely loading AND no events in store yet.\n // If events exist (e.g., remount after data was already fetched), skip skeleton.\n const isHistoryLoading = !showConversationMessages;\n const isChatLoading = isHistoryLoading && !isTask;\n\n // The empty-state ChatSuggestions overlay is absolutely positioned with\n // `pointer-events-auto`, so it would block clicks on any /model entry\n // rendered behind it. Once the user has run /model, the conversation is\n // no longer logically empty — hide suggestions so the profile list is\n // interactive.\n const hasModelEntries = useModelStore((s) =>\n conversationId\n ? (s.entriesByConversation[conversationId]?.length ?? 0) > 0\n : false,\n );\n\n const handleSendMessage = async (\n content: string,\n originalImages: File[],\n originalFiles: File[],\n ) => {\n // Handle /new command for V1 conversations\n if (content.trim() === \"/new\") {\n if (!conversationId) {\n displayErrorToast(t(I18nKey.CONVERSATION$CLEAR_NO_ID));\n return;\n }\n if (totalEvents === 0) {\n displayErrorToast(t(I18nKey.CONVERSATION$CLEAR_EMPTY));\n return;\n }\n if (isNewConversationPending) {\n return;\n }\n newConversationCommand();\n return;\n }\n\n // Create mutable copies of the arrays\n const images = [...originalImages];\n const files = [...originalFiles];\n if (totalEvents === 0) {\n posthog.capture(\"initial_query_submitted\", {\n entry_point: getEntryPoint(\n selectedRepository !== null,\n replayJson !== null,\n ),\n query_character_length: content.length,\n replay_json_size: replayJson?.length,\n });\n } else {\n posthog.capture(\"user_message_sent\", {\n session_message_count: totalEvents,\n current_message_length: content.length,\n });\n }\n\n // Validate file sizes before any processing\n const allFiles = [...images, ...files];\n const validation = validateFiles(allFiles);\n\n if (!validation.isValid) {\n displayErrorToast(`Error: ${validation.errorMessage}`);\n return; // Stop processing if validation fails\n }\n\n const promises = images.map((image) => convertImageToBase64(image));\n const imageUrls = await Promise.all(promises);\n\n const timestamp = new Date().toISOString();\n\n const { skipped_files: skippedFiles, uploaded_files: uploadedFiles } =\n files.length > 0\n ? await uploadFiles({ conversationId: conversationId!, files })\n : { skipped_files: [], uploaded_files: [] };\n\n skippedFiles.forEach((f) => displayErrorToast(f.reason));\n\n const filePrompt = `${t(\"CHAT_INTERFACE$AUGMENTED_PROMPT_FILES_TITLE\")}: ${uploadedFiles.join(\"\\n\\n\")}`;\n const prompt =\n uploadedFiles.length > 0 ? `${content}\\n\\n${filePrompt}` : content;\n\n // Enqueue the message into the local pending queue with status \"sending\"\n // so the user immediately sees it in the chat with a faded treatment. The\n // entry is removed when the WebSocket echoes back the corresponding\n // `UserMessageEvent`. If the API call to send the message fails, the entry\n // is flipped to \"error\" with a retry link.\n const pendingId = enqueuePendingMessage({\n conversationId: conversationId!,\n // `text` is what the user sees in the bubble; `content` is what we\n // actually hand to the server (the prompt may include an appended\n // \"Files uploaded: …\" block) and is what the echo will be matched\n // against. They're different when there are file attachments.\n text: content,\n content: prompt,\n imageUrls,\n fileUrls: uploadedFiles,\n timestamp,\n });\n // Submitting a new prompt should always pull the chat back to the\n // latest message even if the user had scrolled up. This also re-arms\n // autoScroll so the streamed agent reply auto-follows.\n scrollDomToBottom();\n setMessageToSend(\"\");\n\n try {\n await send(\n createChatMessage(prompt, imageUrls, uploadedFiles, timestamp),\n );\n } catch (sendError) {\n const sendErrorMessage =\n sendError instanceof Error\n ? sendError.message\n : \"Failed to send message\";\n markPendingMessageError(pendingId, sendErrorMessage);\n }\n };\n\n // Auto-scroll to bottom when new messages arrive — but only if the user is\n // already pinned to the bottom. Scrolling up to load older events also\n // grows `renderableEvents`, and we don't want to yank the user back to the\n // bottom in that case.\n React.useEffect(() => {\n // If a \"load older\" was just triggered, restore the scroll position so\n // the conversation appears to extend upward instead of jumping.\n if (preserveScrollPosition.current && scrollRef.current) {\n const { scrollHeight: prevHeight, scrollTop: prevTop } =\n preserveScrollPosition.current;\n const dom = scrollRef.current;\n const delta = dom.scrollHeight - prevHeight;\n if (delta > 0) {\n dom.scrollTop = prevTop + delta;\n }\n preserveScrollPosition.current = null;\n return;\n }\n\n if (autoScroll) {\n scrollDomToBottom();\n }\n // Note: We intentionally exclude autoScroll from deps because we only want\n // to scroll when message content changes, not when autoScroll state changes.\n }, [renderableEvents.length, hasPendingUserMessages, scrollDomToBottom]);\n\n // Auto-load older events when the chat content doesn't overflow the\n // scroll area (no scrollbar to drag, no wheel events past 0). We\n // re-run only when the rendered list grows or `hasMore` flips, NOT\n // when `maybeLoadOlder` re-creates: the underlying hook's `loadOlder`\n // ref changes whenever its internal `isLoading` toggles, so depending\n // on `maybeLoadOlder` would re-fire the effect on every failed page\n // and tight-loop until the server recovered. Driving off\n // `renderableEvents.length` instead means a successful page (events\n // grow) chains the next request, while a failed page (events\n // unchanged) waits for the user to retry.\n const maybeLoadOlderRef = React.useRef(maybeLoadOlder);\n React.useEffect(() => {\n maybeLoadOlderRef.current = maybeLoadOlder;\n });\n React.useEffect(() => {\n const target = scrollRef.current;\n if (!target) return;\n maybeLoadOlderRef.current(target);\n }, [renderableEvents.length, hasMoreOlderEvents]);\n\n // Create a ScrollProvider with the scroll hook values\n const scrollProviderValue = {\n scrollRef,\n autoScroll,\n setAutoScroll,\n scrollDomToBottom,\n hitBottom,\n setHitBottom,\n onChatBodyScroll,\n };\n\n // Get server status indicator props\n const isStartingStatus =\n curAgentState === AgentState.LOADING \|\| curAgentState === AgentState.INIT;\n const isStopStatus = curAgentState === AgentState.STOPPED;\n const isPausing = curAgentState === AgentState.PAUSED;\n const serverStatusColor = getStatusColor({\n isPausing,\n isTask,\n taskStatus,\n isStartingStatus,\n isStopStatus,\n curAgentState,\n });\n const serverStatusText = getStatusText({\n isPausing,\n isTask,\n taskStatus,\n taskDetail,\n isStartingStatus,\n isStopStatus,\n curAgentState,\n errorMessage,\n t,\n });\n\n return (\n <ScrollProvider value={scrollProviderValue}>\n <div\n className=\"relative flex h-full flex-col justify-between px-4\"\n data-testid=\"chat-interface\"\n >\n {!hasSubstantiveAgentActions &&\n !hasPendingUserMessages &&\n !userEventsExist &&\n !hasModelEntries &&\n !isChatLoading &&\n !isProvisioningTask &&\n totalEvents === 0 &&\n !isArchivedConversation && (\n <ChatSuggestions\n onSuggestionsClick={(message) => setMessageToSend(message)}\n />\n )}\n {/* Note: We only hide chat suggestions when there's a user message /}\n\n <div\n ref={scrollRef}\n data-testid=\"chat-scroll-container\"\n onScroll={(e) => {\n onChatBodyScroll(e.currentTarget);\n maybeLoadOlder(e.currentTarget);\n }}\n onWheel={handleWheelForPagination}\n 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\"\n >\n {isChatLoading && isReturningToConversation && (\n <ChatMessagesSkeleton />\n )}\n\n {isChatLoading && !isReturningToConversation && (\n <div className=\"flex justify-center\" data-testid=\"loading-spinner\">\n <LoadingSpinner size=\"small\" />\n </div>\n )}\n\n {isLoadingOlderEvents && (\n <div\n className=\"flex items-center justify-center gap-2 py-3 text-sm text-neutral-400\"\n data-testid=\"loading-older-events\"\n >\n <LoadingSpinner size=\"small\" />\n <span>{t(I18nKey.CHAT_INTERFACE$FETCHING_OLDER_MESSAGES)}</span>\n </div>\n )}\n\n {/\n * Render whenever there's anything to display. Previously this\n * was gated on `conversationUserEventsExist`, but with the lazy\n * \"50 most recent\" REST fetch the initial window may not include\n * any `source: \"user\"` events (long agent runs between user\n * turns). That left the chat blank, leaving the user nothing to\n * scroll — which is why \"scroll up to load older\" appeared\n * broken. The empty-state ChatSuggestions block above still\n * keeps its own gate (`!userEventsExist && !hasSubstantiveAgentActions`)\n * so brand-new conversations show suggestions, not an empty chat.\n /}\n {/ /model entries created before any event is rendered are\n anchored to `null` and live above the message list. /}\n <ModelMessages conversationId={conversationId} anchorEventId={null} />\n\n {showConversationMessages && renderableEvents.length > 0 && (\n <Messages\n messages={renderableEvents}\n allEvents={allConversationEvents}\n />\n )}\n\n {/\n Render the local pending-message queue independently so messages\n the user just submitted show up immediately (with a faded \"sending\"\n treatment) even before any real conversation event has come back\n from the server. Entries drain (FIFO) when the matching\n UserMessageEvent echoes back over the WebSocket, so this never\n double-renders alongside the real event list.\n */}\n <PendingUserMessages />\n </div>\n\n <div className=\"flex shrink-0 flex-col gap-[6px]\">\n <BtwMessages conversationId={conversationId} />\n {errorMessage && (\n <ErrorMessageBanner\n message={errorMessage}\n onDismiss={removeErrorMessage}\n onRetry={\n errorMessage === SERVER_CONNECTION_ERROR_MESSAGE\n ? () => conversationWebSocket?.reconnect()\n : undefined\n }\n />\n )}\n\n {isArchivedConversation ? (\n // Archived / sandbox-error: show a read-only notice in place of\n // the chat input. The conversation history above is still visible.\n <div\n data-testid=\"archived-conversation-banner\"\n className=\"mx-1 px-4 py-3 rounded-lg bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)]\"\n >\n <p className=\"text-xs font-semibold text-[var(--oh-foreground)]\">\n {sandboxStatus === \"ERROR\"\n ? t(I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_TITLE)\n : t(I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_TITLE)}\n </p>\n <p className=\"text-xs text-[var(--oh-muted)] mt-0.5\">\n {sandboxStatus === \"ERROR\"\n ? t(I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_DESCRIPTION)\n : t(I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_DESCRIPTION)}\n </p>\n </div>\n ) : (\n <div className=\"relative\">\n <div className=\"pointer-events-none absolute inset-x-0 bottom-full mb-1 z-20\">\n <div className=\"flex justify-between relative\">\n <div className=\"flex items-end gap-1 pointer-events-auto\">\n <ConfirmationModeEnabled />\n {isStartingStatus && (\n <ChatStatusIndicator\n statusColor={serverStatusColor}\n status={serverStatusText}\n />\n )}\n </div>\n\n {!hitBottom ? (\n <div className=\"absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto\">\n <ScrollToBottomButton onClick={scrollDomToBottom} />\n </div>\n ) : (\n curAgentState === AgentState.RUNNING && (\n <div className=\"absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto\">\n <TypingIndicator />\n </div>\n )\n )}\n </div>\n </div>\n\n <InteractiveChatBox\n onSubmit={handleSendMessage}\n disabled={isNewConversationPending}\n />\n </div>\n )}\n </div>\n </div>\n </ScrollProvider>\n );\n}\n"],"mappings":"0wEA6CA,SAAS,GACP,EACA,EACQ,CAGR,OAFI,EAAsB,SACtB,EAAsB,SACnB,SAGT,SAAgB,GAAgB,CAC9B,IAAM,EAAU,EAAA,YAAY,CACtB,CAAE,oBAAqB,EAAA,sBAAsB,CAC7C,CAAE,eAAc,sBAAoB,mBACxC,EAAA,sBAAsB,CAClB,CAAE,SAAQ,aAAY,eAAe,GAAA,gBAAgB,CAGrD,EAAqB,EACrB,EAAwB,EAAA,0BAA0B,CAClD,CAAE,SAAS,EAAA,gBAAgB,CAC3B,CACJ,mBACA,yBACA,cACA,8BACA,oBACE,GAAA,mBAAmB,CACjB,GAAwB,EAAA,8BAC3B,GAAU,EAAM,sBAClB,CACK,GAA0B,EAAA,8BAC7B,GAAU,EAAM,wBAClB,CACK,EAAkB,EAAA,8BACrB,GAAU,EAAM,gBAClB,CACK,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,EAAY,EAAA,QAAM,OAAuB,KAAK,CAC9C,CACJ,oBACA,mBACA,YACA,aACA,iBACA,iBACE,GAAA,kBAAkB,EAAU,CAC1B,CACJ,OAAQ,GACR,UAAW,GACT,GAAA,2BAA2B,CAEzB,CAAE,iBAAkB,EAAA,eAAe,CACnC,CAAE,wBAAyB,GAAA,yBAAyB,CAMpD,CAAE,KAAM,IAAuB,EAAA,uBAAuB,CACtD,EAAgB,IAAoB,gBAAkB,KACtD,EACJ,IAAkB,WAAa,IAAkB,QAG7C,EACJ,IAAkB,EAAA,WAAW,SAC7B,IAAkB,EAAA,WAAW,QAK/B,EAAA,QAAM,cAAgB,CACpB,GAAI,EACF,OAGF,IAAM,EAAiB,GAAyB,EAEzC,EAAM,SAAW,EAAM,UAAY,EAAM,MAAQ,UACpD,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,EAAqB,EAAM,CAC3B,GAAmB,GAMvB,OAFA,SAAS,iBAAiB,UAAW,EAAc,KAEtC,CACX,SAAS,oBAAoB,UAAW,EAAc,GAEvD,CAAC,EAAgB,EAAsB,EAAkB,CAAC,CAE7D,GAAM,CAAE,sBAAoB,cAAe,GAAA,sBAAsB,CAC3D,CAAE,kBAAmB,EAAA,2BAA2B,CAChD,CAAE,YAAa,IAAgB,GAAA,uBAAuB,CAMtD,CACJ,UAAW,EACX,QAAS,EACT,aACE,GAAA,mBAAmB,EAAe,CAehC,EAAyB,EAAA,QAAM,OAG3B,KAAK,CACT,EAAiB,EAAA,QAAM,YAC1B,GAAwB,CACvB,GAAI,GAAsB,GAAwB,CAAC,EACjD,OAGF,IAAM,EAAQ,EAAO,WAAa,GAC5B,EACJ,EAAO,cAAgB,EAAO,aAAe,GAC3C,CAAC,GAAS,CAAC,IAEf,EAAuB,QAAU,CAC/B,aAAc,EAAO,aACrB,UAAW,EAAO,UACnB,CACD,GAAW,CAAC,MAAO,GAAU,CAC3B,EAAuB,QAAU,KAKjC,EAHE,aAAiB,OAAS,EAAM,QAC5B,EAAM,QACN,EAAE,EAAA,QAAQ,cAAc,CACN,EACxB,GAEJ,CACE,EACA,EACA,EACA,EACA,EACA,EACD,CACF,CAEK,GAA2B,EAAA,QAAM,YACpC,GAAwC,CAGnC,EAAE,OAAS,GAAK,EAAE,cAAc,WAAa,GAC/C,EAAe,EAAE,cAAc,EAGnC,CAAC,EAAe,CACjB,CAEK,EAAyB,EAAA,QAAM,YAEjC,EACI,EAAgB,KAAM,GACpB,EAAA,6BACE,EACA,EAAQ,eACT,CACF,CACD,GACN,CAAC,EAAiB,EAAe,CAClC,CAQK,EACJ,GAAsB,OAAS,GAC/B,GACA,CAAC,GAAuB,iBAEpB,EAA4B,CAAC,CAAC,EAI9B,EAAgB,CADI,GACgB,CAAC,EAOrC,GAAkB,EAAA,cAAe,GACrC,GACK,EAAE,sBAAsB,IAAiB,QAAU,GAAK,EACzD,GACL,CAEK,GAAoB,MACxB,EACA,EACA,IACG,CAEH,GAAI,EAAQ,MAAM,GAAK,OAAQ,CAC7B,GAAI,CAAC,EAAgB,CACnB,EAAA,kBAAkB,EAAE,EAAA,QAAQ,yBAAyB,CAAC,CACtD,OAEF,GAAI,IAAgB,EAAG,CACrB,EAAA,kBAAkB,EAAE,EAAA,QAAQ,yBAAyB,CAAC,CACtD,OAEF,GAAI,EACF,OAEF,IAAwB,CACxB,OAIF,IAAM,EAAS,CAAC,GAAG,EAAe,CAC5B,EAAQ,CAAC,GAAG,EAAc,CAC5B,IAAgB,EAClB,EAAQ,QAAQ,0BAA2B,CACzC,YAAa,GACX,KAAuB,KACvB,IAAe,KAChB,CACD,uBAAwB,EAAQ,OAChC,iBAAkB,GAAY,OAC/B,CAAC,CAEF,EAAQ,QAAQ,oBAAqB,CACnC,sBAAuB,EACvB,uBAAwB,EAAQ,OACjC,CAAC,CAKJ,IAAM,EAAa,GAAA,cAAc,CADf,GAAG,EAAQ,GAAG,EACC,CAAS,CAE1C,GAAI,CAAC,EAAW,QAAS,CACvB,EAAA,kBAAkB,UAAU,EAAW,eAAe,CACtD,OAGF,IAAM,EAAW,EAAO,IAAK,GAAU,GAAA,qBAAqB,EAAM,CAAC,CAC7D,EAAY,MAAM,QAAQ,IAAI,EAAS,CAEvC,EAAY,IAAI,MAAM,CAAC,aAAa,CAEpC,CAAE,cAAe,EAAc,eAAgB,GACnD,EAAM,OAAS,EACX,MAAM,GAAY,CAAkB,iBAAiB,QAAO,CAAC,CAC7D,CAAE,cAAe,EAAE,CAAE,eAAgB,EAAE,CAAE,CAE/C,EAAa,QAAS,GAAM,EAAA,kBAAkB,EAAE,OAAO,CAAC,CAExD,IAAM,EAAa,GAAG,EAAE,8CAA8C,CAAC,IAAI,EAAc,KAAK;;EAAO,GAC/F,EACJ,EAAc,OAAS,EAAI,GAAG,EAAQ,MAAM,IAAe,EAOvD,EAAY,GAAsB,CACtB,iBAKhB,KAAM,EACN,QAAS,EACT,YACA,SAAU,EACV,YACD,CAAC,CAIF,GAAmB,CACnB,EAAiB,GAAG,CAEpB,GAAI,CACF,MAAM,GACJ,GAAA,kBAAkB,EAAQ,EAAW,EAAe,EAAU,CAC/D,OACM,EAAW,CAKlB,GAAwB,EAHtB,aAAqB,MACjB,EAAU,QACV,yBAC8C,GAQxD,EAAA,QAAM,cAAgB,CAGpB,GAAI,EAAuB,SAAW,EAAU,QAAS,CACvD,GAAM,CAAE,aAAc,EAAY,UAAW,GAC3C,EAAuB,QACnB,EAAM,EAAU,QAChB,EAAQ,EAAI,aAAe,EAC7B,EAAQ,IACV,EAAI,UAAY,EAAU,GAE5B,EAAuB,QAAU,KACjC,OAGE,GACF,GAAmB,EAIpB,CAAC,EAAiB,OAAQ,EAAwB,EAAkB,CAAC,CAYxE,IAAM,GAAoB,EAAA,QAAM,OAAO,EAAe,CACtD,EAAA,QAAM,cAAgB,CACpB,GAAkB,QAAU,GAC5B,CACF,EAAA,QAAM,cAAgB,CACpB,IAAM,EAAS,EAAU,QACpB,GACL,GAAkB,QAAQ,EAAO,EAChC,CAAC,EAAiB,OAAQ,EAAmB,CAAC,CAGjD,IAAM,GAAsB,CAC1B,YACA,aACA,iBACA,oBACA,YACA,gBACA,mBACD,CAGK,EACJ,IAAkB,EAAA,WAAW,SAAW,IAAkB,EAAA,WAAW,KACjE,GAAe,IAAkB,EAAA,WAAW,QAC5C,EAAY,IAAkB,EAAA,WAAW,OACzC,GAAoB,EAAA,eAAe,CACvC,YACA,SACA,aACA,mBACA,gBACA,gBACD,CAAC,CACI,GAAmB,EAAA,cAAc,CACrC,YACA,SACA,aACA,cACA,mBACA,gBACA,gBACA,eACA,IACD,CAAC,CAEF,OACE,EAAA,EAAA,KAAC,GAAA,eAAD,CAAgB,MAAO,aACrB,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,qDACV,cAAY,0BAFd,CAIG,CAAC,IACA,CAAC,GACD,CAAC,IACD,CAAC,IACD,CAAC,GACD,CAAC,GACD,IAAgB,GAChB,CAAC,IACC,EAAA,EAAA,KAAC,GAAA,gBAAD,CACE,mBAAqB,GAAY,EAAiB,EAAQ,CAC1D,CAAA,EAIN,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,cAAY,wBACZ,SAAW,GAAM,CACf,EAAiB,EAAE,cAAc,CACjC,EAAe,EAAE,cAAc,EAEjC,QAAS,GACT,UAAU,6HARZ,CAUG,GAAiB,IAChB,EAAA,EAAA,KAAC,GAAA,qBAAD,EAAwB,CAAA,CAGzB,GAAiB,CAAC,IACjB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBAAsB,cAAY,4BAC/C,EAAA,EAAA,KAAC,GAAA,eAAD,CAAgB,KAAK,QAAU,CAAA,CAC3B,CAAA,CAGP,IACC,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,uEACV,cAAY,gCAFd,EAIE,EAAA,EAAA,KAAC,GAAA,eAAD,CAAgB,KAAK,QAAU,CAAA,EAC/B,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,EAAE,EAAA,QAAQ,uCAAuC,CAAQ,CAAA,CAC5D,IAgBR,EAAA,EAAA,KAAC,GAAA,cAAD,CAA+B,iBAAgB,cAAe,KAAQ,CAAA,CAErE,GAA4B,EAAiB,OAAS,IACrD,EAAA,EAAA,KAAC,GAAA,SAAD,CACE,SAAU,EACV,UAAW,GACX,CAAA,EAWJ,EAAA,EAAA,KAAC,GAAA,oBAAD,EAAuB,CAAA,CACnB,IAEN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,4CAAf,EACE,EAAA,EAAA,KAAC,GAAA,YAAD,CAA6B,iBAAkB,CAAA,CAC9C,IACC,EAAA,EAAA,KAAC,GAAA,mBAAD,CACE,QAAS,EACT,UAAW,GACX,QACE,IAAA,kCACU,GAAuB,WAAW,CACxC,IAAA,GAEN,CAAA,CAGH,GAGC,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,+BACZ,UAAU,oGAFZ,EAIE,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,6DAEP,EADH,IAAkB,QACb,EAAA,QAAQ,mCACR,EAAA,QAAQ,sCAAsC,CAClD,CAAA,EACJ,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,iDAEP,EADH,IAAkB,QACb,EAAA,QAAQ,yCACR,EAAA,QAAQ,4CAA4C,CACxD,CAAA,CACA,IAEN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,oBAAf,EACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,yEACb,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,yCAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,oDAAf,EACE,EAAA,EAAA,KAAC,GAAA,QAAD,EAA2B,CAAA,CAC1B,IACC,EAAA,EAAA,KAAC,GAAA,QAAD,CACE,YAAa,GACb,OAAQ,GACR,CAAA,CAEA,GAEJ,EAKA,IAAkB,EAAA,WAAW,UAC3B,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sFACb,EAAA,EAAA,KAAC,GAAA,gBAAD,EAAmB,CAAA,CACf,CAAA,EAPR,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sFACb,EAAA,EAAA,KAAC,GAAA,qBAAD,CAAsB,QAAS,EAAqB,CAAA,CAChD,CAAA,CAQJ,GACF,CAAA,EAEN,EAAA,EAAA,KAAC,GAAA,mBAAD,CACE,SAAU,GACV,SAAU,EACV,CAAA,CACE,GAEJ,GACF,GACS,CAAA"}
1	+ {"version":3,"file":"chat-interface.cjs","names":[],"sources":["../../../../src/components/features/chat/chat-interface.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTracking } from \"#/hooks/use-tracking\";\nimport { useTranslation } from \"react-i18next\";\nimport { convertImageToBase64 } from \"#/utils/convert-image-to-base-64\";\nimport { createChatMessage } from \"#/services/chat-service\";\nimport { BtwMessages } from \"./btw-messages\";\nimport { ModelMessages } from \"./model-messages\";\nimport { useModelStore } from \"#/stores/model-store\";\nimport { InteractiveChatBox } from \"./interactive-chat-box\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useFilteredEvents } from \"#/hooks/use-filtered-events\";\nimport { useScrollToBottom } from \"#/hooks/use-scroll-to-bottom\";\nimport { useLoadOlderEvents } from \"#/hooks/use-load-older-events\";\nimport { TypingIndicator } from \"./typing-indicator\";\nimport { ChatSuggestions } from \"./chat-suggestions\";\nimport { ScrollProvider } from \"#/context/scroll-context\";\nimport { useInitialQueryStore } from \"#/stores/initial-query-store\";\nimport { useSendMessage } from \"#/hooks/use-send-message\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\n\nimport { ScrollToBottomButton } from \"#/components/shared/buttons/scroll-to-bottom-button\";\nimport { LoadingSpinner } from \"#/components/shared/loading-spinner\";\nimport { ChatMessagesSkeleton } from \"./chat-messages-skeleton\";\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { useErrorMessageStore } from \"#/stores/error-message-store\";\nimport { useOptimisticUserMessageStore } from \"#/stores/optimistic-user-message-store\";\nimport { SERVER_CONNECTION_ERROR_MESSAGE } from \"#/constants/server-connection-error\";\nimport { ErrorMessageBanner } from \"./error-message-banner\";\nimport { Messages } from \"#/components/conversation-events/chat/messages\";\nimport { PendingUserMessages } from \"./pending-user-messages\";\nimport { useUnifiedUploadFiles } from \"#/hooks/mutation/use-unified-upload-files\";\nimport { validateFiles } from \"#/utils/file-validation\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport ConfirmationModeEnabled from \"./confirmation-mode-enabled\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\nimport { matchesPendingConversationId } from \"#/utils/pending-task-message-link\";\nimport { useConversationWebSocket } from \"#/contexts/conversation-websocket-context\";\nimport ChatStatusIndicator from \"./chat-status-indicator\";\nimport { getStatusColor, getStatusText } from \"#/utils/utils\";\nimport { useNewConversationCommand } from \"#/hooks/mutation/use-new-conversation-command\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nfunction getEntryPoint(\n hasRepository: boolean \| null,\n hasReplayJson: boolean \| null,\n): string {\n if (hasRepository) return \"github\";\n if (hasReplayJson) return \"replay\";\n return \"direct\";\n}\n\nexport function ChatInterface() {\n const { trackInitialQuerySubmitted, trackUserMessageSent } = useTracking();\n const { setMessageToSend } = useConversationStore();\n const { errorMessage, removeErrorMessage, setErrorMessage } =\n useErrorMessageStore();\n const { isTask, taskStatus, taskDetail } = useTaskPolling();\n // Hide empty-state chrome for the entire `/conversations/task-{uuid}` route,\n // including the brief READY window before redirect completes.\n const isProvisioningTask = isTask;\n const conversationWebSocket = useConversationWebSocket();\n const { send } = useSendMessage();\n const {\n renderableEvents,\n allConversationEvents,\n totalEvents,\n hasSubstantiveAgentActions,\n userEventsExist,\n } = useFilteredEvents();\n const enqueuePendingMessage = useOptimisticUserMessageStore(\n (state) => state.enqueuePendingMessage,\n );\n const markPendingMessageError = useOptimisticUserMessageStore(\n (state) => state.markPendingMessageError,\n );\n const pendingMessages = useOptimisticUserMessageStore(\n (state) => state.pendingMessages,\n );\n const { t } = useTranslation(\"openhands\");\n const scrollRef = React.useRef<HTMLDivElement>(null);\n const {\n scrollDomToBottom,\n onChatBodyScroll,\n hitBottom,\n autoScroll,\n setAutoScroll,\n setHitBottom,\n } = useScrollToBottom(scrollRef);\n const {\n mutate: newConversationCommand,\n isPending: isNewConversationPending,\n } = useNewConversationCommand();\n\n const { curAgentState } = useAgentState();\n const { handleBuildPlanClick } = useHandleBuildPlanClick();\n\n // Cloud conversations whose sandbox is MISSING or ERROR are read-only:\n // the sandbox is gone and cannot be resumed, so we hide the chat input\n // and show an explanatory banner. For local backends sandbox_status is\n // always null, so this is effectively a no-op for non-cloud use.\n const { data: activeConversation } = useActiveConversation();\n const sandboxStatus = activeConversation?.sandbox_status ?? null;\n const isArchivedConversation =\n sandboxStatus === \"MISSING\" \|\| sandboxStatus === \"ERROR\";\n\n // Disable Build button while agent is running (streaming)\n const isAgentRunning =\n curAgentState === AgentState.RUNNING \|\|\n curAgentState === AgentState.LOADING;\n\n // Global keyboard shortcut for Build button (Cmd+Enter / Ctrl+Enter)\n // This is placed here instead of PlanPreview to avoid duplicate listeners\n // when multiple PlanPreview components exist in the chat\n React.useEffect(() => {\n if (isAgentRunning) {\n return undefined;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n // Check for Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux)\n if ((event.metaKey \|\| event.ctrlKey) && event.key === \"Enter\") {\n event.preventDefault();\n event.stopPropagation();\n handleBuildPlanClick(event);\n scrollDomToBottom();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [isAgentRunning, handleBuildPlanClick, scrollDomToBottom]);\n\n const { selectedRepository, replayJson } = useInitialQueryStore();\n const { conversationId } = useOptionalConversationId();\n const { mutateAsync: uploadFiles } = useUnifiedUploadFiles();\n\n // Lazy \"scroll up to load older events\" backfill. Initial REST fetch only\n // returns the most recent page; this hook paginates older events into the\n // store on demand so the chat doesn't load (potentially) thousands of\n // events on first render.\n const {\n isLoading: isLoadingOlderEvents,\n hasMore: hasMoreOlderEvents,\n loadOlder,\n } = useLoadOlderEvents(conversationId);\n\n // Trigger `loadOlder` and preserve the visual scroll position once the\n // older page is merged in (otherwise prepending events would jump the\n // chat far down). We fire from three places to cover the cases the\n // browser's scroll event misses:\n //\n // - `onScroll`: normal \"user scrolled near the top\" path.\n // - `onWheel`: user is already pinned at scrollTop=0 and tries to\n // wheel further up — no scroll event fires past 0.\n // - effect: content is shorter than the viewport (no scrollbar\n // at all), so the user has nothing to scroll. Re-runs\n // as more pages arrive until there's overflow or the\n // server runs out of older events.\n const SCROLL_TOP_THRESHOLD_PX = 80;\n const preserveScrollPosition = React.useRef<{\n scrollHeight: number;\n scrollTop: number;\n } \| null>(null);\n const maybeLoadOlder = React.useCallback(\n (target: HTMLElement) => {\n if (isProvisioningTask \|\| isLoadingOlderEvents \|\| !hasMoreOlderEvents) {\n return;\n }\n\n const atTop = target.scrollTop <= SCROLL_TOP_THRESHOLD_PX;\n const noOverflow =\n target.scrollHeight <= target.clientHeight + SCROLL_TOP_THRESHOLD_PX;\n if (!atTop && !noOverflow) return;\n\n preserveScrollPosition.current = {\n scrollHeight: target.scrollHeight,\n scrollTop: target.scrollTop,\n };\n loadOlder().catch((error) => {\n preserveScrollPosition.current = null;\n const message =\n error instanceof Error && error.message\n ? error.message\n : t(I18nKey.ERROR$GENERIC);\n setErrorMessage(message);\n });\n },\n [\n hasMoreOlderEvents,\n isLoadingOlderEvents,\n isProvisioningTask,\n loadOlder,\n setErrorMessage,\n t,\n ],\n );\n\n const handleWheelForPagination = React.useCallback(\n (e: React.WheelEvent<HTMLDivElement>) => {\n // Browsers don't dispatch a scroll event when scrollTop is already\n // 0 and the user wheels upward, so onScroll alone misses this case.\n if (e.deltaY < 0 && e.currentTarget.scrollTop <= 0) {\n maybeLoadOlder(e.currentTarget);\n }\n },\n [maybeLoadOlder],\n );\n\n const hasPendingUserMessages = React.useMemo(\n () =>\n conversationId\n ? pendingMessages.some((message) =>\n matchesPendingConversationId(\n conversationId,\n message.conversationId,\n ),\n )\n : false,\n [pendingMessages, conversationId],\n );\n\n // Show V1 messages immediately if events exist in store (e.g., remount),\n // if the user already has a locally-tracked pending bubble (home-page cloud\n // submit while history/WS catch up), or once loading completes. This\n // replaces the old transition-observation pattern (useState + useEffect\n // watching loading→loaded) which always showed skeleton on remount because\n // local state initialized to false.\n const showConversationMessages =\n allConversationEvents.length > 0 \|\|\n hasPendingUserMessages \|\|\n !conversationWebSocket?.isLoadingHistory;\n\n const isReturningToConversation = !!conversationId;\n // Only show loading skeleton when genuinely loading AND no events in store yet.\n // If events exist (e.g., remount after data was already fetched), skip skeleton.\n const isHistoryLoading = !showConversationMessages;\n const isChatLoading = isHistoryLoading && !isTask;\n\n // The empty-state ChatSuggestions overlay is absolutely positioned with\n // `pointer-events-auto`, so it would block clicks on any /model entry\n // rendered behind it. Once the user has run /model, the conversation is\n // no longer logically empty — hide suggestions so the profile list is\n // interactive.\n const hasModelEntries = useModelStore((s) =>\n conversationId\n ? (s.entriesByConversation[conversationId]?.length ?? 0) > 0\n : false,\n );\n\n const handleSendMessage = async (\n content: string,\n originalImages: File[],\n originalFiles: File[],\n ) => {\n // Handle /new command for V1 conversations\n if (content.trim() === \"/new\") {\n if (!conversationId) {\n displayErrorToast(t(I18nKey.CONVERSATION$CLEAR_NO_ID));\n return;\n }\n if (totalEvents === 0) {\n displayErrorToast(t(I18nKey.CONVERSATION$CLEAR_EMPTY));\n return;\n }\n if (isNewConversationPending) {\n return;\n }\n newConversationCommand();\n return;\n }\n\n // Create mutable copies of the arrays\n const images = [...originalImages];\n const files = [...originalFiles];\n if (totalEvents === 0) {\n trackInitialQuerySubmitted({\n entryPoint: getEntryPoint(\n selectedRepository !== null,\n replayJson !== null,\n ),\n queryCharacterLength: content.length,\n replayJsonSize: replayJson?.length,\n });\n } else {\n trackUserMessageSent({\n sessionMessageCount: totalEvents,\n currentMessageLength: content.length,\n });\n }\n\n // Validate file sizes before any processing\n const allFiles = [...images, ...files];\n const validation = validateFiles(allFiles);\n\n if (!validation.isValid) {\n displayErrorToast(`Error: ${validation.errorMessage}`);\n return; // Stop processing if validation fails\n }\n\n const promises = images.map((image) => convertImageToBase64(image));\n const imageUrls = await Promise.all(promises);\n\n const timestamp = new Date().toISOString();\n\n const { skipped_files: skippedFiles, uploaded_files: uploadedFiles } =\n files.length > 0\n ? await uploadFiles({ conversationId: conversationId!, files })\n : { skipped_files: [], uploaded_files: [] };\n\n skippedFiles.forEach((f) => displayErrorToast(f.reason));\n\n const filePrompt = `${t(\"CHAT_INTERFACE$AUGMENTED_PROMPT_FILES_TITLE\")}: ${uploadedFiles.join(\"\\n\\n\")}`;\n const prompt =\n uploadedFiles.length > 0 ? `${content}\\n\\n${filePrompt}` : content;\n\n // Enqueue the message into the local pending queue with status \"sending\"\n // so the user immediately sees it in the chat with a faded treatment. The\n // entry is removed when the WebSocket echoes back the corresponding\n // `UserMessageEvent`. If the API call to send the message fails, the entry\n // is flipped to \"error\" with a retry link.\n const pendingId = enqueuePendingMessage({\n conversationId: conversationId!,\n // `text` is what the user sees in the bubble; `content` is what we\n // actually hand to the server (the prompt may include an appended\n // \"Files uploaded: …\" block) and is what the echo will be matched\n // against. They're different when there are file attachments.\n text: content,\n content: prompt,\n imageUrls,\n fileUrls: uploadedFiles,\n timestamp,\n });\n // Submitting a new prompt should always pull the chat back to the\n // latest message even if the user had scrolled up. This also re-arms\n // autoScroll so the streamed agent reply auto-follows.\n scrollDomToBottom();\n setMessageToSend(\"\");\n\n try {\n await send(\n createChatMessage(prompt, imageUrls, uploadedFiles, timestamp),\n );\n } catch (sendError) {\n const sendErrorMessage =\n sendError instanceof Error\n ? sendError.message\n : \"Failed to send message\";\n markPendingMessageError(pendingId, sendErrorMessage);\n }\n };\n\n // Auto-scroll to bottom when new messages arrive — but only if the user is\n // already pinned to the bottom. Scrolling up to load older events also\n // grows `renderableEvents`, and we don't want to yank the user back to the\n // bottom in that case.\n React.useEffect(() => {\n // If a \"load older\" was just triggered, restore the scroll position so\n // the conversation appears to extend upward instead of jumping.\n if (preserveScrollPosition.current && scrollRef.current) {\n const { scrollHeight: prevHeight, scrollTop: prevTop } =\n preserveScrollPosition.current;\n const dom = scrollRef.current;\n const delta = dom.scrollHeight - prevHeight;\n if (delta > 0) {\n dom.scrollTop = prevTop + delta;\n }\n preserveScrollPosition.current = null;\n return;\n }\n\n if (autoScroll) {\n scrollDomToBottom();\n }\n // Note: We intentionally exclude autoScroll from deps because we only want\n // to scroll when message content changes, not when autoScroll state changes.\n }, [renderableEvents.length, hasPendingUserMessages, scrollDomToBottom]);\n\n // Auto-load older events when the chat content doesn't overflow the\n // scroll area (no scrollbar to drag, no wheel events past 0). We\n // re-run only when the rendered list grows or `hasMore` flips, NOT\n // when `maybeLoadOlder` re-creates: the underlying hook's `loadOlder`\n // ref changes whenever its internal `isLoading` toggles, so depending\n // on `maybeLoadOlder` would re-fire the effect on every failed page\n // and tight-loop until the server recovered. Driving off\n // `renderableEvents.length` instead means a successful page (events\n // grow) chains the next request, while a failed page (events\n // unchanged) waits for the user to retry.\n const maybeLoadOlderRef = React.useRef(maybeLoadOlder);\n React.useEffect(() => {\n maybeLoadOlderRef.current = maybeLoadOlder;\n });\n React.useEffect(() => {\n const target = scrollRef.current;\n if (!target) return;\n maybeLoadOlderRef.current(target);\n }, [renderableEvents.length, hasMoreOlderEvents]);\n\n // Create a ScrollProvider with the scroll hook values\n const scrollProviderValue = {\n scrollRef,\n autoScroll,\n setAutoScroll,\n scrollDomToBottom,\n hitBottom,\n setHitBottom,\n onChatBodyScroll,\n };\n\n // Get server status indicator props\n const isStartingStatus =\n curAgentState === AgentState.LOADING \|\| curAgentState === AgentState.INIT;\n const isStopStatus = curAgentState === AgentState.STOPPED;\n const isPausing = curAgentState === AgentState.PAUSED;\n const serverStatusColor = getStatusColor({\n isPausing,\n isTask,\n taskStatus,\n isStartingStatus,\n isStopStatus,\n curAgentState,\n });\n const serverStatusText = getStatusText({\n isPausing,\n isTask,\n taskStatus,\n taskDetail,\n isStartingStatus,\n isStopStatus,\n curAgentState,\n errorMessage,\n t,\n });\n\n return (\n <ScrollProvider value={scrollProviderValue}>\n <div\n className=\"relative flex h-full flex-col justify-between px-4\"\n data-testid=\"chat-interface\"\n >\n {!hasSubstantiveAgentActions &&\n !hasPendingUserMessages &&\n !userEventsExist &&\n !hasModelEntries &&\n !isChatLoading &&\n !isProvisioningTask &&\n totalEvents === 0 &&\n !isArchivedConversation && (\n <ChatSuggestions\n onSuggestionsClick={(message) => setMessageToSend(message)}\n />\n )}\n {/* Note: We only hide chat suggestions when there's a user message /}\n\n <div\n ref={scrollRef}\n data-testid=\"chat-scroll-container\"\n onScroll={(e) => {\n onChatBodyScroll(e.currentTarget);\n maybeLoadOlder(e.currentTarget);\n }}\n onWheel={handleWheelForPagination}\n 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\"\n >\n {isChatLoading && isReturningToConversation && (\n <ChatMessagesSkeleton />\n )}\n\n {isChatLoading && !isReturningToConversation && (\n <div className=\"flex justify-center\" data-testid=\"loading-spinner\">\n <LoadingSpinner size=\"small\" />\n </div>\n )}\n\n {isLoadingOlderEvents && (\n <div\n className=\"flex items-center justify-center gap-2 py-3 text-sm text-neutral-400\"\n data-testid=\"loading-older-events\"\n >\n <LoadingSpinner size=\"small\" />\n <span>{t(I18nKey.CHAT_INTERFACE$FETCHING_OLDER_MESSAGES)}</span>\n </div>\n )}\n\n {/\n * Render whenever there's anything to display. Previously this\n * was gated on `conversationUserEventsExist`, but with the lazy\n * \"50 most recent\" REST fetch the initial window may not include\n * any `source: \"user\"` events (long agent runs between user\n * turns). That left the chat blank, leaving the user nothing to\n * scroll — which is why \"scroll up to load older\" appeared\n * broken. The empty-state ChatSuggestions block above still\n * keeps its own gate (`!userEventsExist && !hasSubstantiveAgentActions`)\n * so brand-new conversations show suggestions, not an empty chat.\n /}\n {/ /model entries created before any event is rendered are\n anchored to `null` and live above the message list. /}\n <ModelMessages conversationId={conversationId} anchorEventId={null} />\n\n {showConversationMessages && renderableEvents.length > 0 && (\n <Messages\n messages={renderableEvents}\n allEvents={allConversationEvents}\n />\n )}\n\n {/\n Render the local pending-message queue independently so messages\n the user just submitted show up immediately (with a faded \"sending\"\n treatment) even before any real conversation event has come back\n from the server. Entries drain (FIFO) when the matching\n UserMessageEvent echoes back over the WebSocket, so this never\n double-renders alongside the real event list.\n */}\n <PendingUserMessages />\n </div>\n\n <div className=\"flex shrink-0 flex-col gap-[6px]\">\n <BtwMessages conversationId={conversationId} />\n {errorMessage && (\n <ErrorMessageBanner\n message={errorMessage}\n onDismiss={removeErrorMessage}\n onRetry={\n errorMessage === SERVER_CONNECTION_ERROR_MESSAGE\n ? () => conversationWebSocket?.reconnect()\n : undefined\n }\n />\n )}\n\n {isArchivedConversation ? (\n // Archived / sandbox-error: show a read-only notice in place of\n // the chat input. The conversation history above is still visible.\n <div\n data-testid=\"archived-conversation-banner\"\n className=\"mx-1 px-4 py-3 rounded-lg bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)]\"\n >\n <p className=\"text-xs font-semibold text-[var(--oh-foreground)]\">\n {sandboxStatus === \"ERROR\"\n ? t(I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_TITLE)\n : t(I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_TITLE)}\n </p>\n <p className=\"text-xs text-[var(--oh-muted)] mt-0.5\">\n {sandboxStatus === \"ERROR\"\n ? t(I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_DESCRIPTION)\n : t(I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_DESCRIPTION)}\n </p>\n </div>\n ) : (\n <div className=\"relative\">\n <div className=\"pointer-events-none absolute inset-x-0 bottom-full mb-1 z-20\">\n <div className=\"flex justify-between relative\">\n <div className=\"flex items-end gap-1 pointer-events-auto\">\n <ConfirmationModeEnabled />\n {isStartingStatus && (\n <ChatStatusIndicator\n statusColor={serverStatusColor}\n status={serverStatusText}\n />\n )}\n </div>\n\n {!hitBottom ? (\n <div className=\"absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto\">\n <ScrollToBottomButton onClick={scrollDomToBottom} />\n </div>\n ) : (\n curAgentState === AgentState.RUNNING && (\n <div className=\"absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto\">\n <TypingIndicator />\n </div>\n )\n )}\n </div>\n </div>\n\n <InteractiveChatBox\n onSubmit={handleSendMessage}\n disabled={isNewConversationPending}\n />\n </div>\n )}\n </div>\n </div>\n </ScrollProvider>\n );\n}\n"],"mappings":"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"}