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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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    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          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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"}
+{"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"}