npm - @openhands/agent-canvas - Versions diffs - 1.0.0-beta.6 → 1.0.0-beta.8 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (802) hide show

package/dist/components/features/conversation-panel/conversation-panel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-panel.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/conversation-panel.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Folder, Plus } from \"lucide-react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { usePaginatedConversations } from \"#/hooks/query/use-paginated-conversations\";\nimport { useStartTasks } from \"#/hooks/query/use-start-tasks\";\nimport { useDeleteConversation } from \"#/hooks/mutation/use-delete-conversation\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { ConfirmDeleteModal } from \"./confirm-delete-modal\";\nimport { ConfirmStopModal } from \"./confirm-stop-modal\";\nimport { LoadingSpinner } from \"#/components/shared/loading-spinner\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ExitConversationModal } from \"./exit-conversation-modal\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { Provider } from \"#/types/settings\";\nimport { useUpdateConversation } from \"#/hooks/mutation/use-update-conversation\";\nimport {\n displayErrorToast,\n displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { isExecutionActive } from \"#/utils/status\";\nimport { useCreateConversation } from \"#/hooks/mutation/use-create-conversation\";\nimport { useIsCreatingConversation } from \"#/hooks/use-is-creating-conversation\";\nimport { ConversationCard } from \"./conversation-card/conversation-card\";\nimport { StartTaskCard } from \"./start-task-card/start-task-card\";\nimport { ConversationCardSkeleton } from \"./conversation-card/conversation-card-skeleton\";\nimport { CompactConversationRow } from \"./compact-conversation-row\";\nimport { useConversationPanelPreferencesStore } from \"#/stores/conversation-panel-preferences-store\";\nimport { cn } from \"#/utils/utils\";\nimport { ConversationPanelFilterMenu } from \"./conversation-panel-filter-menu\";\nimport { ConversationPanelNewThreadPicker } from \"./conversation-panel-new-thread-picker\";\nimport {\n groupConversations,\n getGroupConversationPreview,\n sortConversationsByField,\n type ConversationGroupLaunch,\n} from \"./conversation-panel-list-helpers\";\n\ninterface ConversationPanelProps {\n onClose?: () => void;\n /*\n Render a minimal icon-only variant of each conversation row (used by the\n * collapsed sidebar). Each row is a single status dot with a hover preview\n * containing the full card content.\n /\n compact?: boolean;\n}\n\nconst noop = () => {};\n\nconst ONE_HOUR_MS = 60 60 * 1000;\n\nconst partitionByCutoff = <T extends { updated_at: string }>(\n items: readonly T[],\n): { recent: T[]; older: T[] } => {\n // The cutoff is intentionally relative to \"now\" each time the list is\n // recomputed, so conversations naturally age into the older bucket as the\n // conversations query refreshes.\n const cutoff = Date.now() - ONE_HOUR_MS;\n const recent: T[] = [];\n const older: T[] = [];\n for (const item of items) {\n const updatedAt = item.updated_at ? Date.parse(item.updated_at) : NaN;\n // Missing or unparseable timestamps stay in the \"recent\" bucket so we\n // do not accidentally hide them behind the older-conversations toggle.\n if (Number.isFinite(updatedAt) && updatedAt < cutoff) {\n older.push(item);\n } else {\n recent.push(item);\n }\n }\n return { recent, older };\n};\n\nexport function ConversationPanel({\n onClose,\n compact = false,\n}: ConversationPanelProps) {\n const { t } = useTranslation(\"openhands\");\n const { conversationId: currentConversationId, navigate } = useNavigation();\n const { backend: activeBackend } = useActiveBackend();\n // Click-outside is only relevant in the legacy drawer mode where an\n // onClose handler is provided. When the panel is rendered inline (e.g.\n // as the always-visible conversation list pane), clicking outside should\n // not dismiss the list, so we pass a no-op callback in that case.\n const ref = useClickOutsideElement<HTMLDivElement>(onClose ?? noop);\n\n const [confirmDeleteModalVisible, setConfirmDeleteModalVisible] =\n React.useState(false);\n const [confirmStopModalVisible, setConfirmStopModalVisible] =\n React.useState(false);\n const [\n confirmExitConversationModalVisible,\n setConfirmExitConversationModalVisible,\n ] = React.useState(false);\n const [confirmDeleteAllVisible, setConfirmDeleteAllVisible] =\n React.useState(false);\n const showOlderConversations = useConversationPanelPreferencesStore(\n (state) => state.showOlderConversations,\n );\n const toggleShowOlderConversations = useConversationPanelPreferencesStore(\n (state) => state.toggleShowOlderConversations,\n );\n const showRepoBranchMetadata = useConversationPanelPreferencesStore(\n (state) => state.showRepoBranchMetadata,\n );\n const toggleShowRepoBranchMetadata = useConversationPanelPreferencesStore(\n (state) => state.toggleShowRepoBranchMetadata,\n );\n const showLlmProfiles = useConversationPanelPreferencesStore(\n (state) => state.showLlmProfiles,\n );\n const toggleShowLlmProfiles = useConversationPanelPreferencesStore(\n (state) => state.toggleShowLlmProfiles,\n );\n const organizeMode = useConversationPanelPreferencesStore(\n (state) => state.organizeMode,\n );\n const setOrganizeMode = useConversationPanelPreferencesStore(\n (state) => state.setOrganizeMode,\n );\n const conversationSort = useConversationPanelPreferencesStore(\n (state) => state.conversationSort,\n );\n const setConversationSort = useConversationPanelPreferencesStore(\n (state) => state.setConversationSort,\n );\n const threadScope = useConversationPanelPreferencesStore(\n (state) => state.threadScope,\n );\n const setThreadScope = useConversationPanelPreferencesStore(\n (state) => state.setThreadScope,\n );\n const [filterMenuOpen, setFilterMenuOpen] = React.useState(false);\n const [isListScrolled, setIsListScrolled] = React.useState(false);\n const filterMenuRef = useClickOutsideElement<HTMLDivElement>(() => {\n setFilterMenuOpen(false);\n });\n const [collapsedGroupIds, setCollapsedGroupIds] = React.useState<\n ReadonlySet<string>\n >(() => new Set());\n const [expandedGroupPreviewIds, setExpandedGroupPreviewIds] = React.useState<\n ReadonlySet<string>\n >(() => new Set());\n\n const toggleGroupCollapsed = React.useCallback((groupId: string) => {\n setCollapsedGroupIds((prev) => {\n const next = new Set(prev);\n if (next.has(groupId)) {\n next.delete(groupId);\n } else {\n next.add(groupId);\n }\n return next;\n });\n }, []);\n\n const toggleGroupPreviewExpanded = React.useCallback((groupId: string) => {\n setExpandedGroupPreviewIds((prev) => {\n const next = new Set(prev);\n if (next.has(groupId)) {\n next.delete(groupId);\n } else {\n next.add(groupId);\n }\n return next;\n });\n }, []);\n\n React.useEffect(() => {\n if (organizeMode !== \"grouped\") {\n setCollapsedGroupIds(new Set());\n setExpandedGroupPreviewIds(new Set());\n }\n }, [organizeMode]);\n\n const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n const [selectedConversationId, setSelectedConversationId] = React.useState<\n string \| null\n >(null);\n const [selectedConversationTitle, setSelectedConversationTitle] =\n React.useState<string \| null>(null);\n const [openContextMenuId, setOpenContextMenuId] = React.useState<\n string \| null\n >(null);\n\n const {\n data,\n isLoading,\n isFetched,\n hasNextPage,\n isFetchingNextPage,\n fetchNextPage,\n } = usePaginatedConversations();\n\n // Fetch in-progress start tasks\n const { data: startTasks } = useStartTasks();\n\n const conversations = React.useMemo(\n () => data?.pages.flatMap((page) => page.items) ?? [],\n [data],\n );\n\n const scopedConversations = React.useMemo(() => {\n if (threadScope === \"relevant\") {\n return conversations.filter((c) => isExecutionActive(c.execution_status));\n }\n return conversations;\n }, [conversations, threadScope]);\n\n const { recent: recentScoped, older: olderScoped } = React.useMemo(\n () => partitionByCutoff(scopedConversations),\n [scopedConversations],\n );\n\n // Sort the full visible set as one list. The recent/older partition is\n // still computed (it gates the \"Show older\" toggle and \"Load more\"\n // visibility), but the rendering must not use it as a visual boundary —\n // when sorting by `created`, a stale-but-recently-touched conversation\n // would otherwise land in `recent` and render above an actually-newer-\n // by-`created_at` conversation sitting in `older`.\n const sortedVisibleConversations = React.useMemo(() => {\n const visible = showOlderConversations\n ? [...recentScoped, ...olderScoped]\n : recentScoped;\n return sortConversationsByField(visible, conversationSort);\n }, [recentScoped, olderScoped, showOlderConversations, conversationSort]);\n\n const groupLabels = React.useMemo(\n () => ({\n emptyWorkspace: t(I18nKey.CONVERSATION_PANEL$NO_WORKSPACE),\n emptyRepository: t(I18nKey.CONVERSATION_PANEL$NO_REPOSITORY),\n }),\n [t],\n );\n\n const conversationGroups = React.useMemo(() => {\n if (compact \|\| organizeMode !== \"grouped\") {\n return null;\n }\n // Use the unsorted partitions: groupConversations sorts each bucket\n // internally by `sortField`, so pre-sorting the merged input is wasted\n // work in grouped mode (the per-group sort overrides any global order).\n const merged = [\n ...recentScoped,\n ...(showOlderConversations ? olderScoped : []),\n ];\n return groupConversations(\n merged,\n activeBackend.kind,\n conversationSort,\n groupLabels,\n );\n }, [\n activeBackend.kind,\n compact,\n conversationSort,\n groupLabels,\n olderScoped,\n organizeMode,\n recentScoped,\n showOlderConversations,\n ]);\n\n const compactVisibleConversations = React.useMemo(\n () =>\n sortConversationsByField(\n recentScoped.filter((conversation) =>\n isExecutionActive(conversation.execution_status),\n ),\n conversationSort,\n ),\n [conversationSort, recentScoped],\n );\n\n const visibleFlatCount = sortedVisibleConversations.length;\n\n const visibleGroupedCount = React.useMemo(() => {\n if (!conversationGroups) {\n return 0;\n }\n return conversationGroups.reduce((n, g) => n + g.conversations.length, 0);\n }, [conversationGroups]);\n\n const listIsEffectivelyEmpty =\n organizeMode === \"grouped\" && !compact\n ? visibleGroupedCount === 0\n : visibleFlatCount === 0;\n\n const { mutate: deleteConversation, mutateAsync: deleteConversationAsync } =\n useDeleteConversation();\n const { mutate: pauseConversation } = useUnifiedPauseConversation();\n const { mutate: updateConversation } = useUpdateConversation();\n\n // The next page of conversations is loaded only via the explicit \"Load\n // more\" link rendered at the end of the list — there is no scroll-driven\n // pagination, which previously caused the panel to feel like it had stray\n // scrollable space at the bottom.\n const olderHidden = olderScoped.length > 0 && !showOlderConversations;\n // Compact mode also hides \"Load more\" — paginating into archived\n // conversations contradicts the \"active only\" intent of the icon rail.\n // Do not show when the visible list is empty (e.g. filters hide every\n // loaded conversation) — that state already shows \"No conversations found\".\n const showLoadMore =\n !!hasNextPage && !olderHidden && !compact && !listIsEffectivelyEmpty;\n\n const { mutate: createConversation } = useCreateConversation();\n const isCreatingConversationFlow = useIsCreatingConversation();\n\n const launchFromGroup = React.useCallback(\n (launch: ConversationGroupLaunch) => {\n if (isCreatingConversationFlow) return;\n createConversation(\n {\n workingDir: launch.workingDir,\n repository: launch.repository,\n },\n {\n onSuccess: (data) => {\n navigate(`/conversations/${data.conversation_id}`);\n },\n },\n );\n },\n [createConversation, isCreatingConversationFlow, navigate],\n );\n\n const handleDeleteProject = React.useCallback(\n (conversationId: string, title: string) => {\n setConfirmDeleteModalVisible(true);\n setSelectedConversationId(conversationId);\n setSelectedConversationTitle(title);\n },\n [],\n );\n\n const handleStopConversation = React.useCallback((conversationId: string) => {\n setConfirmStopModalVisible(true);\n setSelectedConversationId(conversationId);\n }, []);\n\n const handleConversationTitleChange = React.useCallback(\n (conversationId: string, newTitle: string) => {\n updateConversation(\n { conversationId, newTitle },\n {\n onSuccess: () => {\n displaySuccessToast(t(I18nKey.CONVERSATION$TITLE_UPDATED));\n },\n },\n );\n },\n [t, updateConversation],\n );\n\n const handleConfirmDelete = () => {\n if (selectedConversationId) {\n deleteConversation(\n { conversationId: selectedConversationId },\n {\n onSuccess: () => {\n if (selectedConversationId === currentConversationId) {\n navigate(\"/conversations\");\n }\n },\n },\n );\n }\n };\n\n const handleConfirmStop = () => {\n if (selectedConversationId) {\n pauseConversation({\n conversationId: selectedConversationId,\n });\n }\n };\n\n const handleConfirmDeleteAll = async () => {\n const idsToDelete = conversations.map((c) => c.id);\n const results = await Promise.allSettled(\n idsToDelete.map((conversationId) =>\n deleteConversationAsync({ conversationId }),\n ),\n );\n\n const deletedIds = results.flatMap((result, index) =>\n result.status === \"fulfilled\" ? [idsToDelete[index]] : [],\n );\n const failedCount = results.length - deletedIds.length;\n\n if (\n currentConversationId !== null &&\n deletedIds.includes(currentConversationId)\n ) {\n navigate(\"/conversations\");\n }\n\n if (failedCount > 0) {\n displayErrorToast(\n `${failedCount} conversation${failedCount === 1 ? \"\" : \"s\"} could not be deleted.`,\n );\n }\n };\n\n const renderConversationCard = React.useCallback(\n (conversation: (typeof conversations)[number]) => {\n if (compact) {\n return (\n <CompactConversationRow\n key={conversation.id}\n conversationId={conversation.id}\n title={conversation.title ?? \"\"}\n selectedRepository={{\n selected_repository: conversation.selected_repository,\n selected_branch: conversation.selected_branch,\n git_provider: conversation.git_provider as Provider,\n }}\n executionStatus={conversation.execution_status}\n sandboxStatus={conversation.sandbox_status}\n lastUpdatedAt={conversation.updated_at}\n createdAt={conversation.created_at}\n workspaceWorkingDir={\n conversation.selected_workspace ??\n conversation.workspace?.working_dir\n }\n isActive={conversation.id === currentConversationId}\n onClose={onClose}\n showRepositoryMetadata={showRepoBranchMetadata}\n llmModel={conversation.llm_model}\n showLlmProfiles={showLlmProfiles}\n agentKind={conversation.agent_kind}\n acpServer={conversation.acp_server}\n />\n );\n }\n return (\n <NavigationLink\n key={conversation.id}\n to={`/conversations/${conversation.id}`}\n onClick={onClose}\n className=\"block\"\n >\n <ConversationCard\n onDelete={() =>\n handleDeleteProject(conversation.id, conversation.title ?? \"\")\n }\n onStop={() => handleStopConversation(conversation.id)}\n onChangeTitle={(title) =>\n handleConversationTitleChange(conversation.id, title)\n }\n title={conversation.title ?? \"\"}\n selectedRepository={{\n selected_repository: conversation.selected_repository,\n selected_branch: conversation.selected_branch,\n git_provider: conversation.git_provider as Provider,\n }}\n lastUpdatedAt={conversation.updated_at}\n createdAt={conversation.created_at}\n executionStatus={conversation.execution_status}\n sandboxStatus={conversation.sandbox_status}\n conversationId={conversation.id}\n contextMenuOpen={openContextMenuId === conversation.id}\n onContextMenuToggle={(isOpen) =>\n setOpenContextMenuId(isOpen ? conversation.id : null)\n }\n isActive={conversation.id === currentConversationId}\n workspaceWorkingDir={\n conversation.selected_workspace ??\n conversation.workspace?.working_dir\n }\n showRepositoryMetadata={showRepoBranchMetadata}\n llmModel={conversation.llm_model}\n showLlmProfiles={showLlmProfiles}\n agentKind={conversation.agent_kind}\n acpServer={conversation.acp_server}\n />\n </NavigationLink>\n );\n },\n [\n compact,\n currentConversationId,\n handleConversationTitleChange,\n handleDeleteProject,\n handleStopConversation,\n onClose,\n openContextMenuId,\n showRepoBranchMetadata,\n showLlmProfiles,\n ],\n );\n\n // Standard layout: panel fills its slot in the sidebar; the inner scroll\n // child fills the panel and scrolls when its content overflows. Modals are\n // siblings of the scroll element and are `position: fixed`, so they don't\n // participate in the panel's scroll geometry.\n // Gate on `isLoading` / `!isFetched` (true only until the first fetch settles),\n // not `isFetching` — the latter flips back to true on every 10s background\n // refetch, causing the skeleton/empty-state to flicker when the list is empty.\n const showInitialSkeleton = isLoading \|\| !isFetched;\n const showEmptyState =\n isFetched &&\n !isLoading &&\n !compact &&\n listIsEffectivelyEmpty &&\n !startTasks?.length;\n\n const showConversationHeader = !compact;\n\n return (\n <div\n ref={ref}\n data-testid=\"conversation-panel\"\n className=\"flex h-full min-h-0 w-full flex-col\"\n >\n {showConversationHeader && (\n <div\n className={cn(\n // Pull flush to the sidebar edges: `-ml-2.5` matches aside `pl-2.5`;\n // width extends by that inset on the right now that aside is `pr-0`.\n \"-ml-2.5 w-[calc(100%+0.625rem)] max-w-none box-border border-b\",\n isListScrolled ? \"border-[var(--oh-border)]\" : \"border-transparent\",\n )}\n >\n <div\n data-testid=\"older-conversations-summary\"\n className=\"flex min-w-0 flex-nowrap items-center gap-x-2 py-2 pl-4 pr-2.5 text-[var(--oh-muted)]\"\n >\n <span className=\"min-w-0 truncate text-sm font-medium text-[var(--oh-muted)]\">\n {t(I18nKey.SIDEBAR$CONVERSATIONS)}\n </span>\n <div className=\"ml-auto flex shrink-0 items-center gap-0.5\">\n <ConversationPanelNewThreadPicker\n backendKind={activeBackend.kind}\n />\n <ConversationPanelFilterMenu\n filterMenuOpen={filterMenuOpen}\n setFilterMenuOpen={setFilterMenuOpen}\n menuRef={filterMenuRef}\n backendKind={activeBackend.kind}\n organizeMode={organizeMode}\n setOrganizeMode={setOrganizeMode}\n conversationSort={conversationSort}\n setConversationSort={setConversationSort}\n threadScope={threadScope}\n setThreadScope={setThreadScope}\n showOlderConversations={showOlderConversations}\n toggleShowOlderConversations={toggleShowOlderConversations}\n showRepoBranchMetadata={showRepoBranchMetadata}\n toggleShowRepoBranchMetadata={toggleShowRepoBranchMetadata}\n showLlmProfiles={showLlmProfiles}\n toggleShowLlmProfiles={toggleShowLlmProfiles}\n totalConversationsCount={conversations.length}\n onRequestDeleteAll={() => setConfirmDeleteAllVisible(true)}\n />\n </div>\n </div>\n </div>\n )}\n\n <div\n ref={scrollContainerRef}\n data-testid=\"conversation-panel-list-scroll\"\n onScroll={(event) => {\n setIsListScrolled(event.currentTarget.scrollTop > 0);\n }}\n className={cn(\n \"flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-contain custom-scrollbar-always\",\n !compact && \"conversation-panel-list-scroll\",\n )}\n >\n {showInitialSkeleton && <ConversationCardSkeleton compact={compact} />}\n\n {!compact && showEmptyState && (\n <div\n data-testid=\"conversation-panel-empty-state\"\n className=\"flex min-h-0 flex-1 flex-col items-center justify-center px-4 py-8\"\n >\n <p className=\"text-xs text-[var(--oh-muted)]\">\n {t(I18nKey.CONVERSATION$NO_CONVERSATIONS)}\n </p>\n </div>\n )}\n\n {/* Render in-progress start tasks first (skipped in compact mode —\n their rich card layout doesn't fit in the icon rail). /}\n {!compact &&\n startTasks?.map((task) => (\n <NavigationLink\n key={task.id}\n to={`/conversations/task-${task.id}`}\n onClick={onClose}\n className=\"block\"\n >\n <StartTaskCard task={task} />\n </NavigationLink>\n ))}\n\n {!showInitialSkeleton && compact\n ? compactVisibleConversations.map(renderConversationCard)\n : null}\n\n {!showInitialSkeleton &&\n !compact &&\n organizeMode === \"grouped\" &&\n conversationGroups &&\n conversationGroups.length > 0 ? (\n <nav\n aria-label={t(I18nKey.SIDEBAR$CONVERSATIONS)}\n className=\"space-y-1 md:space-y-0.5 pb-1\"\n >\n {conversationGroups.map((group) => {\n const headingId = `thread-folder-${group.id.replace(/[^a-zA-Z0-9_-]/g, \"-\")}`;\n const groupTestIdSuffix = group.id.replace(\n /[^a-zA-Z0-9_-]/g,\n \"-\",\n );\n const expanded = !collapsedGroupIds.has(group.id);\n const previewExpanded = expandedGroupPreviewIds.has(group.id);\n const { visibleConversations, isPreviewTruncated, isShowingAll } =\n getGroupConversationPreview(group.conversations, {\n expanded: previewExpanded,\n activeConversationId: currentConversationId,\n });\n return (\n <section key={group.id} aria-labelledby={headingId}>\n <div\n className={cn(\n \"flex h-8 w-full min-w-0 items-center gap-0.5 rounded-md pl-2 pr-1 text-sm font-normal\",\n \"text-[var(--oh-muted)] transition-colors\",\n \"hover:bg-[var(--oh-surface-raised)] hover:text-white\",\n )}\n >\n <button\n type=\"button\"\n id={headingId}\n aria-expanded={expanded}\n onClick={() => toggleGroupCollapsed(group.id)}\n className=\"flex min-h-8 min-w-0 flex-1 items-center gap-2 rounded-md py-1 text-left text-inherit outline-none transition-colors focus-visible:ring-1 focus-visible:ring-[var(--oh-border)]\"\n >\n <Folder className=\"h-4 w-4 shrink-0\" aria-hidden />\n <span className=\"truncate\">{group.label}</span>\n </button>\n <button\n type=\"button\"\n className={cn(\n \"inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md\",\n \"text-inherit transition-colors\",\n \"hover:bg-white/10 hover:text-white\",\n \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--oh-border)]\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n )}\n disabled={isCreatingConversationFlow}\n aria-label={t(\n I18nKey.CONVERSATION_PANEL$ADD_CONVERSATION_TO_GROUP,\n { label: group.label },\n )}\n data-testid={`add-conversation-to-group-${group.id.replace(/[^a-zA-Z0-9_-]/g, \"-\")}`}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n launchFromGroup(group.launch);\n }}\n >\n <Plus\n className=\"h-3.5 w-3.5 shrink-0\"\n aria-hidden\n strokeWidth={2}\n />\n </button>\n </div>\n {expanded ? (\n <div className=\"mt-0.5 space-y-0.5\">\n {visibleConversations.map(renderConversationCard)}\n {isPreviewTruncated ? (\n <div className=\"pl-2\">\n <button\n type=\"button\"\n data-testid={`thread-folder-view-more-${groupTestIdSuffix}`}\n onClick={() => toggleGroupPreviewExpanded(group.id)}\n className=\"ml-[26px] cursor-pointer text-xs text-[var(--oh-text-dim)] hover:text-white\"\n >\n {isShowingAll\n ? t(I18nKey.CONVERSATION_PANEL$LESS)\n : t(I18nKey.CONVERSATION_PANEL$MORE)}\n </button>\n </div>\n ) : null}\n </div>\n ) : null}\n </section>\n );\n })}\n </nav>\n ) : null}\n\n {!showInitialSkeleton &&\n !compact &&\n organizeMode === \"chronological\" ? (\n <div className=\"space-y-0.5\">\n {sortedVisibleConversations.map(renderConversationCard)}\n </div>\n ) : null}\n\n {/ Explicit \"Load more\" trigger. Only shown when more pages exist\n and the older list is currently visible (or there are no older\n conversations to begin with) — otherwise the next page would be\n populated mostly with conversations the user has chosen to hide. */}\n {showLoadMore && (\n <div className=\"flex justify-center py-4\">\n {isFetchingNextPage ? (\n <LoadingSpinner size=\"small\" />\n ) : (\n <button\n type=\"button\"\n data-testid=\"load-more-conversations\"\n onClick={() => fetchNextPage()}\n className=\"text-xs text-[var(--oh-muted)] hover:text-white\"\n >\n {t(I18nKey.CONVERSATION$LOAD_MORE)}\n </button>\n )}\n </div>\n )}\n </div>\n\n {confirmDeleteModalVisible && (\n <ConfirmDeleteModal\n onConfirm={() => {\n handleConfirmDelete();\n setConfirmDeleteModalVisible(false);\n setSelectedConversationTitle(null);\n }}\n onCancel={() => {\n setConfirmDeleteModalVisible(false);\n setSelectedConversationTitle(null);\n }}\n conversationTitle={selectedConversationTitle ?? undefined}\n />\n )}\n\n {confirmDeleteAllVisible && (\n <ConfirmDeleteModal\n title={t(I18nKey.CONVERSATION$CONFIRM_DELETE_ALL_TITLE)}\n description={t(I18nKey.CONVERSATION$CONFIRM_DELETE_ALL_DESC, {\n count: conversations.length,\n })}\n onConfirm={async () => {\n await handleConfirmDeleteAll();\n setConfirmDeleteAllVisible(false);\n }}\n onCancel={() => setConfirmDeleteAllVisible(false)}\n />\n )}\n\n {confirmStopModalVisible && (\n <ConfirmStopModal\n onConfirm={() => {\n handleConfirmStop();\n setConfirmStopModalVisible(false);\n }}\n onCancel={() => setConfirmStopModalVisible(false)}\n />\n )}\n\n {confirmExitConversationModalVisible && (\n <ExitConversationModal\n onConfirm={() => {\n onClose?.();\n }}\n onClose={() => setConfirmExitConversationModalVisible(false)}\n onCancel={() => setConfirmExitConversationModalVisible(false)}\n />\n )}\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"conversation-panel.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/conversation-panel.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Folder, Plus } from \"lucide-react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { usePaginatedConversations } from \"#/hooks/query/use-paginated-conversations\";\nimport { useStartTasks } from \"#/hooks/query/use-start-tasks\";\nimport { useDeleteConversation } from \"#/hooks/mutation/use-delete-conversation\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { ConfirmDeleteModal } from \"./confirm-delete-modal\";\nimport { ConfirmStopModal } from \"./confirm-stop-modal\";\nimport { LoadingSpinner } from \"#/components/shared/loading-spinner\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ExitConversationModal } from \"./exit-conversation-modal\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { Provider } from \"#/types/settings\";\nimport { useUpdateConversation } from \"#/hooks/mutation/use-update-conversation\";\nimport {\n displayErrorToast,\n displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { isExecutionActive } from \"#/utils/status\";\nimport { useCreateConversation } from \"#/hooks/mutation/use-create-conversation\";\nimport { useIsCreatingConversation } from \"#/hooks/use-is-creating-conversation\";\nimport { ConversationCard } from \"./conversation-card/conversation-card\";\nimport { StartTaskCard } from \"./start-task-card/start-task-card\";\nimport { ConversationCardSkeleton } from \"./conversation-card/conversation-card-skeleton\";\nimport { CompactConversationRow } from \"./compact-conversation-row\";\nimport { useConversationPanelPreferencesStore } from \"#/stores/conversation-panel-preferences-store\";\nimport { cn } from \"#/utils/utils\";\nimport { ConversationPanelFilterMenu } from \"./conversation-panel-filter-menu\";\nimport { ConversationPanelNewThreadPicker } from \"./conversation-panel-new-thread-picker\";\nimport {\n groupConversations,\n getGroupConversationPreview,\n sortConversationsByField,\n type ConversationGroupLaunch,\n} from \"./conversation-panel-list-helpers\";\n\ninterface ConversationPanelProps {\n onClose?: () => void;\n /*\n Render a minimal icon-only variant of each conversation row (used by the\n * collapsed sidebar). Each row is a single status dot with a hover preview\n * containing the full card content.\n /\n compact?: boolean;\n}\n\nconst noop = () => {};\n\nconst ONE_HOUR_MS = 60 60 * 1000;\n\nconst partitionByCutoff = <T extends { updated_at: string }>(\n items: readonly T[],\n): { recent: T[]; older: T[] } => {\n // The cutoff is intentionally relative to \"now\" each time the list is\n // recomputed, so conversations naturally age into the older bucket as the\n // conversations query refreshes.\n const cutoff = Date.now() - ONE_HOUR_MS;\n const recent: T[] = [];\n const older: T[] = [];\n for (const item of items) {\n const updatedAt = item.updated_at ? Date.parse(item.updated_at) : NaN;\n // Missing or unparseable timestamps stay in the \"recent\" bucket so we\n // do not accidentally hide them behind the older-conversations toggle.\n if (Number.isFinite(updatedAt) && updatedAt < cutoff) {\n older.push(item);\n } else {\n recent.push(item);\n }\n }\n return { recent, older };\n};\n\nexport function ConversationPanel({\n onClose,\n compact = false,\n}: ConversationPanelProps) {\n const { t } = useTranslation(\"openhands\");\n const { conversationId: currentConversationId, navigate } = useNavigation();\n const { backend: activeBackend } = useActiveBackend();\n // Click-outside is only relevant in the legacy drawer mode where an\n // onClose handler is provided. When the panel is rendered inline (e.g.\n // as the always-visible conversation list pane), clicking outside should\n // not dismiss the list, so we pass a no-op callback in that case.\n const ref = useClickOutsideElement<HTMLDivElement>(onClose ?? noop);\n\n const [confirmDeleteModalVisible, setConfirmDeleteModalVisible] =\n React.useState(false);\n const [confirmStopModalVisible, setConfirmStopModalVisible] =\n React.useState(false);\n const [\n confirmExitConversationModalVisible,\n setConfirmExitConversationModalVisible,\n ] = React.useState(false);\n const [confirmDeleteAllVisible, setConfirmDeleteAllVisible] =\n React.useState(false);\n const showOlderConversations = useConversationPanelPreferencesStore(\n (state) => state.showOlderConversations,\n );\n const toggleShowOlderConversations = useConversationPanelPreferencesStore(\n (state) => state.toggleShowOlderConversations,\n );\n const showRepoBranchMetadata = useConversationPanelPreferencesStore(\n (state) => state.showRepoBranchMetadata,\n );\n const toggleShowRepoBranchMetadata = useConversationPanelPreferencesStore(\n (state) => state.toggleShowRepoBranchMetadata,\n );\n const showLlmProfiles = useConversationPanelPreferencesStore(\n (state) => state.showLlmProfiles,\n );\n const toggleShowLlmProfiles = useConversationPanelPreferencesStore(\n (state) => state.toggleShowLlmProfiles,\n );\n const organizeMode = useConversationPanelPreferencesStore(\n (state) => state.organizeMode,\n );\n const setOrganizeMode = useConversationPanelPreferencesStore(\n (state) => state.setOrganizeMode,\n );\n const conversationSort = useConversationPanelPreferencesStore(\n (state) => state.conversationSort,\n );\n const setConversationSort = useConversationPanelPreferencesStore(\n (state) => state.setConversationSort,\n );\n const threadScope = useConversationPanelPreferencesStore(\n (state) => state.threadScope,\n );\n const setThreadScope = useConversationPanelPreferencesStore(\n (state) => state.setThreadScope,\n );\n const [filterMenuOpen, setFilterMenuOpen] = React.useState(false);\n const [isListScrolled, setIsListScrolled] = React.useState(false);\n const filterMenuRef = useClickOutsideElement<HTMLDivElement>(() => {\n setFilterMenuOpen(false);\n });\n const [collapsedGroupIds, setCollapsedGroupIds] = React.useState<\n ReadonlySet<string>\n >(() => new Set());\n const [expandedGroupPreviewIds, setExpandedGroupPreviewIds] = React.useState<\n ReadonlySet<string>\n >(() => new Set());\n\n const toggleGroupCollapsed = React.useCallback((groupId: string) => {\n setCollapsedGroupIds((prev) => {\n const next = new Set(prev);\n if (next.has(groupId)) {\n next.delete(groupId);\n } else {\n next.add(groupId);\n }\n return next;\n });\n }, []);\n\n const toggleGroupPreviewExpanded = React.useCallback((groupId: string) => {\n setExpandedGroupPreviewIds((prev) => {\n const next = new Set(prev);\n if (next.has(groupId)) {\n next.delete(groupId);\n } else {\n next.add(groupId);\n }\n return next;\n });\n }, []);\n\n React.useEffect(() => {\n if (organizeMode !== \"grouped\") {\n setCollapsedGroupIds(new Set());\n setExpandedGroupPreviewIds(new Set());\n }\n }, [organizeMode]);\n\n const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n const [selectedConversationId, setSelectedConversationId] = React.useState<\n string \| null\n >(null);\n const [selectedConversationTitle, setSelectedConversationTitle] =\n React.useState<string \| null>(null);\n const [openContextMenuId, setOpenContextMenuId] = React.useState<\n string \| null\n >(null);\n\n const {\n data,\n isLoading,\n isFetched,\n hasNextPage,\n isFetchingNextPage,\n fetchNextPage,\n } = usePaginatedConversations();\n\n // Fetch in-progress start tasks\n const { data: startTasks } = useStartTasks();\n\n const conversations = React.useMemo(\n () => data?.pages.flatMap((page) => page.items) ?? [],\n [data],\n );\n\n const scopedConversations = React.useMemo(() => {\n if (threadScope === \"relevant\") {\n return conversations.filter((c) => isExecutionActive(c.execution_status));\n }\n return conversations;\n }, [conversations, threadScope]);\n\n const { recent: recentScoped, older: olderScoped } = React.useMemo(\n () => partitionByCutoff(scopedConversations),\n [scopedConversations],\n );\n\n // Sort the full visible set as one list. The recent/older partition is\n // still computed (it gates the \"Show older\" toggle and \"Load more\"\n // visibility), but the rendering must not use it as a visual boundary —\n // when sorting by `created`, a stale-but-recently-touched conversation\n // would otherwise land in `recent` and render above an actually-newer-\n // by-`created_at` conversation sitting in `older`.\n const sortedVisibleConversations = React.useMemo(() => {\n const visible = showOlderConversations\n ? [...recentScoped, ...olderScoped]\n : recentScoped;\n return sortConversationsByField(visible, conversationSort);\n }, [recentScoped, olderScoped, showOlderConversations, conversationSort]);\n\n const groupLabels = React.useMemo(\n () => ({\n emptyWorkspace: t(I18nKey.CONVERSATION_PANEL$NO_WORKSPACE),\n emptyRepository: t(I18nKey.CONVERSATION_PANEL$NO_REPOSITORY),\n }),\n [t],\n );\n\n const conversationGroups = React.useMemo(() => {\n if (compact \|\| organizeMode !== \"grouped\") {\n return null;\n }\n // Use the unsorted partitions: groupConversations sorts each bucket\n // internally by `sortField`, so pre-sorting the merged input is wasted\n // work in grouped mode (the per-group sort overrides any global order).\n const merged = [\n ...recentScoped,\n ...(showOlderConversations ? olderScoped : []),\n ];\n return groupConversations(\n merged,\n activeBackend.kind,\n conversationSort,\n groupLabels,\n );\n }, [\n activeBackend.kind,\n compact,\n conversationSort,\n groupLabels,\n olderScoped,\n organizeMode,\n recentScoped,\n showOlderConversations,\n ]);\n\n const compactVisibleConversations = React.useMemo(\n () =>\n sortConversationsByField(\n recentScoped.filter((conversation) =>\n isExecutionActive(conversation.execution_status),\n ),\n conversationSort,\n ),\n [conversationSort, recentScoped],\n );\n\n const visibleFlatCount = sortedVisibleConversations.length;\n\n const visibleGroupedCount = React.useMemo(() => {\n if (!conversationGroups) {\n return 0;\n }\n return conversationGroups.reduce((n, g) => n + g.conversations.length, 0);\n }, [conversationGroups]);\n\n const listIsEffectivelyEmpty =\n organizeMode === \"grouped\" && !compact\n ? visibleGroupedCount === 0\n : visibleFlatCount === 0;\n\n const { mutate: deleteConversation, mutateAsync: deleteConversationAsync } =\n useDeleteConversation();\n const { mutate: pauseConversation } = useUnifiedPauseConversation();\n const { mutate: updateConversation } = useUpdateConversation();\n\n // The next page of conversations is loaded only via the explicit \"Load\n // more\" link rendered at the end of the list — there is no scroll-driven\n // pagination, which previously caused the panel to feel like it had stray\n // scrollable space at the bottom.\n const olderHidden = olderScoped.length > 0 && !showOlderConversations;\n // Compact mode also hides \"Load more\" — paginating into archived\n // conversations contradicts the \"active only\" intent of the icon rail.\n // Do not show when the visible list is empty (e.g. filters hide every\n // loaded conversation) — that state already shows \"No conversations found\".\n const showLoadMore =\n !!hasNextPage && !olderHidden && !compact && !listIsEffectivelyEmpty;\n\n const { mutate: createConversation } = useCreateConversation();\n const isCreatingConversationFlow = useIsCreatingConversation();\n\n const launchFromGroup = React.useCallback(\n (launch: ConversationGroupLaunch) => {\n if (isCreatingConversationFlow) return;\n createConversation(\n {\n workingDir: launch.workingDir,\n repository: launch.repository,\n },\n {\n onSuccess: (data) => {\n navigate(`/conversations/${data.conversation_id}`);\n },\n },\n );\n },\n [createConversation, isCreatingConversationFlow, navigate],\n );\n\n const handleDeleteProject = React.useCallback(\n (conversationId: string, title: string) => {\n setConfirmDeleteModalVisible(true);\n setSelectedConversationId(conversationId);\n setSelectedConversationTitle(title);\n },\n [],\n );\n\n const handleStopConversation = React.useCallback((conversationId: string) => {\n setConfirmStopModalVisible(true);\n setSelectedConversationId(conversationId);\n }, []);\n\n const handleConversationTitleChange = React.useCallback(\n (conversationId: string, newTitle: string) => {\n updateConversation(\n { conversationId, newTitle },\n {\n onSuccess: () => {\n displaySuccessToast(t(I18nKey.CONVERSATION$TITLE_UPDATED));\n },\n },\n );\n },\n [t, updateConversation],\n );\n\n const handleConfirmDelete = () => {\n if (selectedConversationId) {\n deleteConversation(\n { conversationId: selectedConversationId },\n {\n onSuccess: () => {\n if (selectedConversationId === currentConversationId) {\n navigate(\"/conversations\");\n }\n },\n },\n );\n }\n };\n\n const handleConfirmStop = () => {\n if (selectedConversationId) {\n pauseConversation({\n conversationId: selectedConversationId,\n });\n }\n };\n\n const handleConfirmDeleteAll = async () => {\n const idsToDelete = conversations.map((c) => c.id);\n const results = await Promise.allSettled(\n idsToDelete.map((conversationId) =>\n deleteConversationAsync({ conversationId }),\n ),\n );\n\n const deletedIds = results.flatMap((result, index) =>\n result.status === \"fulfilled\" ? [idsToDelete[index]] : [],\n );\n const failedCount = results.length - deletedIds.length;\n\n if (\n currentConversationId !== null &&\n deletedIds.includes(currentConversationId)\n ) {\n navigate(\"/conversations\");\n }\n\n if (failedCount > 0) {\n displayErrorToast(\n `${failedCount} conversation${failedCount === 1 ? \"\" : \"s\"} could not be deleted.`,\n );\n }\n };\n\n const renderConversationCard = React.useCallback(\n (conversation: (typeof conversations)[number]) => {\n if (compact) {\n return (\n <CompactConversationRow\n key={conversation.id}\n conversationId={conversation.id}\n title={conversation.title ?? \"\"}\n selectedRepository={{\n selected_repository: conversation.selected_repository,\n selected_branch: conversation.selected_branch,\n git_provider: conversation.git_provider as Provider,\n }}\n executionStatus={conversation.execution_status}\n sandboxStatus={conversation.sandbox_status}\n lastUpdatedAt={conversation.updated_at}\n createdAt={conversation.created_at}\n workspaceWorkingDir={\n conversation.selected_workspace ??\n conversation.workspace?.working_dir\n }\n isActive={conversation.id === currentConversationId}\n onClose={onClose}\n showRepositoryMetadata={showRepoBranchMetadata}\n llmModel={conversation.llm_model}\n showLlmProfiles={showLlmProfiles}\n agentKind={conversation.agent_kind}\n acpServer={conversation.acp_server}\n />\n );\n }\n return (\n <NavigationLink\n key={conversation.id}\n to={`/conversations/${conversation.id}`}\n onClick={onClose}\n className=\"block\"\n >\n <ConversationCard\n onDelete={() =>\n handleDeleteProject(conversation.id, conversation.title ?? \"\")\n }\n onStop={() => handleStopConversation(conversation.id)}\n onChangeTitle={(title) =>\n handleConversationTitleChange(conversation.id, title)\n }\n title={conversation.title ?? \"\"}\n selectedRepository={{\n selected_repository: conversation.selected_repository,\n selected_branch: conversation.selected_branch,\n git_provider: conversation.git_provider as Provider,\n }}\n lastUpdatedAt={conversation.updated_at}\n createdAt={conversation.created_at}\n executionStatus={conversation.execution_status}\n sandboxStatus={conversation.sandbox_status}\n conversationId={conversation.id}\n contextMenuOpen={openContextMenuId === conversation.id}\n onContextMenuToggle={(isOpen) =>\n setOpenContextMenuId(isOpen ? conversation.id : null)\n }\n isActive={conversation.id === currentConversationId}\n workspaceWorkingDir={\n conversation.selected_workspace ??\n conversation.workspace?.working_dir\n }\n showRepositoryMetadata={showRepoBranchMetadata}\n llmModel={conversation.llm_model}\n showLlmProfiles={showLlmProfiles}\n agentKind={conversation.agent_kind}\n acpServer={conversation.acp_server}\n />\n </NavigationLink>\n );\n },\n [\n compact,\n currentConversationId,\n handleConversationTitleChange,\n handleDeleteProject,\n handleStopConversation,\n onClose,\n openContextMenuId,\n showRepoBranchMetadata,\n showLlmProfiles,\n ],\n );\n\n // Standard layout: panel fills its slot in the sidebar; the inner scroll\n // child fills the panel and scrolls when its content overflows. Modals are\n // siblings of the scroll element and are `position: fixed`, so they don't\n // participate in the panel's scroll geometry.\n // Gate on `isLoading` / `!isFetched` (true only until the first fetch settles),\n // not `isFetching` — the latter flips back to true on every 10s background\n // refetch, causing the skeleton/empty-state to flicker when the list is empty.\n const showInitialSkeleton = isLoading \|\| !isFetched;\n const showEmptyState =\n isFetched &&\n !isLoading &&\n !compact &&\n listIsEffectivelyEmpty &&\n !startTasks?.length;\n\n const showConversationHeader = !compact;\n\n return (\n <div\n ref={ref}\n data-testid=\"conversation-panel\"\n className=\"flex h-full min-h-0 w-full flex-col\"\n >\n {showConversationHeader && (\n <div\n className={cn(\n // Pull flush to the sidebar edges: `-ml-2.5` matches aside `pl-2.5`;\n // width extends by that inset on the right now that aside is `pr-0`.\n \"-ml-2.5 w-[calc(100%+0.625rem)] max-w-none box-border border-b\",\n isListScrolled ? \"border-[var(--oh-border)]\" : \"border-transparent\",\n )}\n >\n <div\n data-testid=\"older-conversations-summary\"\n className=\"flex min-w-0 flex-nowrap items-center gap-x-2 py-2 pl-4 pr-2.5 text-[var(--oh-muted)]\"\n >\n <span className=\"min-w-0 truncate text-sm font-medium text-[var(--oh-muted)]\">\n {t(I18nKey.SIDEBAR$CONVERSATIONS)}\n </span>\n <div className=\"ml-auto flex shrink-0 items-center gap-0.5\">\n <ConversationPanelNewThreadPicker\n backendKind={activeBackend.kind}\n />\n <ConversationPanelFilterMenu\n filterMenuOpen={filterMenuOpen}\n setFilterMenuOpen={setFilterMenuOpen}\n menuRef={filterMenuRef}\n backendKind={activeBackend.kind}\n organizeMode={organizeMode}\n setOrganizeMode={setOrganizeMode}\n conversationSort={conversationSort}\n setConversationSort={setConversationSort}\n threadScope={threadScope}\n setThreadScope={setThreadScope}\n showOlderConversations={showOlderConversations}\n toggleShowOlderConversations={toggleShowOlderConversations}\n showRepoBranchMetadata={showRepoBranchMetadata}\n toggleShowRepoBranchMetadata={toggleShowRepoBranchMetadata}\n showLlmProfiles={showLlmProfiles}\n toggleShowLlmProfiles={toggleShowLlmProfiles}\n totalConversationsCount={conversations.length}\n onRequestDeleteAll={() => setConfirmDeleteAllVisible(true)}\n />\n </div>\n </div>\n </div>\n )}\n\n <div\n ref={scrollContainerRef}\n data-testid=\"conversation-panel-list-scroll\"\n onScroll={(event) => {\n setIsListScrolled(event.currentTarget.scrollTop > 0);\n }}\n className={cn(\n \"flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-contain custom-scrollbar-always\",\n !compact && \"conversation-panel-list-scroll\",\n )}\n >\n {showInitialSkeleton && <ConversationCardSkeleton compact={compact} />}\n\n {!compact && showEmptyState && (\n <div\n data-testid=\"conversation-panel-empty-state\"\n className=\"flex min-h-0 flex-1 flex-col items-center justify-center px-4 py-8\"\n >\n <p className=\"text-xs text-[var(--oh-muted)]\">\n {t(I18nKey.CONVERSATION$NO_CONVERSATIONS)}\n </p>\n </div>\n )}\n\n {/* Render in-progress start tasks first (skipped in compact mode —\n their rich card layout doesn't fit in the icon rail). /}\n {!compact &&\n startTasks?.map((task) => (\n <NavigationLink\n key={task.id}\n to={`/conversations/task-${task.id}`}\n onClick={onClose}\n className=\"block\"\n >\n <StartTaskCard task={task} />\n </NavigationLink>\n ))}\n\n {!showInitialSkeleton && compact\n ? compactVisibleConversations.map(renderConversationCard)\n : null}\n\n {!showInitialSkeleton &&\n !compact &&\n organizeMode === \"grouped\" &&\n conversationGroups &&\n conversationGroups.length > 0 ? (\n <nav\n aria-label={t(I18nKey.SIDEBAR$CONVERSATIONS)}\n className=\"space-y-1 md:space-y-0.5 pb-1\"\n >\n {conversationGroups.map((group) => {\n const headingId = `thread-folder-${group.id.replace(/[^a-zA-Z0-9_-]/g, \"-\")}`;\n const groupTestIdSuffix = group.id.replace(\n /[^a-zA-Z0-9_-]/g,\n \"-\",\n );\n const expanded = !collapsedGroupIds.has(group.id);\n const previewExpanded = expandedGroupPreviewIds.has(group.id);\n const { visibleConversations, isPreviewTruncated, isShowingAll } =\n getGroupConversationPreview(group.conversations, {\n expanded: previewExpanded,\n activeConversationId: currentConversationId,\n });\n return (\n <section key={group.id} aria-labelledby={headingId}>\n <div\n className={cn(\n \"flex h-8 w-full min-w-0 items-center gap-0.5 rounded-md pl-2 pr-1 text-sm font-normal\",\n \"text-[var(--oh-muted)] transition-colors\",\n \"hover:bg-[var(--oh-surface-raised)] hover:text-white\",\n )}\n >\n <button\n type=\"button\"\n id={headingId}\n aria-expanded={expanded}\n onClick={() => toggleGroupCollapsed(group.id)}\n className=\"flex min-h-8 min-w-0 flex-1 items-center gap-2 rounded-md py-1 text-left text-inherit outline-none transition-colors focus-visible:ring-1 focus-visible:ring-[var(--oh-border)]\"\n >\n <Folder className=\"h-4 w-4 shrink-0\" aria-hidden />\n <span className=\"truncate\">{group.label}</span>\n </button>\n <button\n type=\"button\"\n className={cn(\n \"inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md\",\n \"text-inherit transition-colors\",\n \"hover:bg-white/10 hover:text-white\",\n \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--oh-border)]\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n )}\n disabled={isCreatingConversationFlow}\n aria-label={t(\n I18nKey.CONVERSATION_PANEL$ADD_CONVERSATION_TO_GROUP,\n { label: group.label },\n )}\n data-testid={`add-conversation-to-group-${group.id.replace(/[^a-zA-Z0-9_-]/g, \"-\")}`}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n launchFromGroup(group.launch);\n }}\n >\n <Plus\n className=\"h-3.5 w-3.5 shrink-0\"\n aria-hidden\n strokeWidth={2}\n />\n </button>\n </div>\n {expanded ? (\n <div className=\"mt-0.5 space-y-0.5\">\n {visibleConversations.map(renderConversationCard)}\n {isPreviewTruncated ? (\n <div className=\"pl-2\">\n <button\n type=\"button\"\n data-testid={`thread-folder-view-more-${groupTestIdSuffix}`}\n onClick={() => toggleGroupPreviewExpanded(group.id)}\n className=\"ml-[26px] cursor-pointer text-xs text-[var(--oh-text-dim)] hover:text-white\"\n >\n {isShowingAll\n ? t(I18nKey.CONVERSATION_PANEL$LESS)\n : t(I18nKey.CONVERSATION_PANEL$MORE)}\n </button>\n </div>\n ) : null}\n </div>\n ) : null}\n </section>\n );\n })}\n </nav>\n ) : null}\n\n {!showInitialSkeleton &&\n !compact &&\n organizeMode === \"chronological\" ? (\n <div className=\"space-y-0.5\">\n {sortedVisibleConversations.map(renderConversationCard)}\n </div>\n ) : null}\n\n {/ Explicit \"Load more\" trigger. Only shown when more pages exist\n and the older list is currently visible (or there are no older\n conversations to begin with) — otherwise the next page would be\n populated mostly with conversations the user has chosen to hide. */}\n {showLoadMore && (\n <div className=\"flex justify-center py-4\">\n {isFetchingNextPage ? (\n <LoadingSpinner size=\"small\" />\n ) : (\n <button\n type=\"button\"\n data-testid=\"load-more-conversations\"\n onClick={() => fetchNextPage()}\n className=\"text-xs text-[var(--oh-muted)] hover:text-white\"\n >\n {t(I18nKey.CONVERSATION$LOAD_MORE)}\n </button>\n )}\n </div>\n )}\n </div>\n\n {confirmDeleteModalVisible && (\n <ConfirmDeleteModal\n onConfirm={() => {\n handleConfirmDelete();\n setConfirmDeleteModalVisible(false);\n setSelectedConversationTitle(null);\n }}\n onCancel={() => {\n setConfirmDeleteModalVisible(false);\n setSelectedConversationTitle(null);\n }}\n conversationTitle={selectedConversationTitle ?? undefined}\n />\n )}\n\n {confirmDeleteAllVisible && (\n <ConfirmDeleteModal\n title={t(I18nKey.CONVERSATION$CONFIRM_DELETE_ALL_TITLE)}\n description={t(I18nKey.CONVERSATION$CONFIRM_DELETE_ALL_DESC, {\n count: conversations.length,\n })}\n onConfirm={async () => {\n await handleConfirmDeleteAll();\n setConfirmDeleteAllVisible(false);\n }}\n onCancel={() => setConfirmDeleteAllVisible(false)}\n />\n )}\n\n {confirmStopModalVisible && (\n <ConfirmStopModal\n onConfirm={() => {\n handleConfirmStop();\n setConfirmStopModalVisible(false);\n }}\n onCancel={() => setConfirmStopModalVisible(false)}\n />\n )}\n\n {confirmExitConversationModalVisible && (\n <ExitConversationModal\n onConfirm={() => {\n onClose?.();\n }}\n onClose={() => setConfirmExitConversationModalVisible(false)}\n onCancel={() => setConfirmExitConversationModalVisible(false)}\n />\n )}\n </div>\n );\n}\n"],"mappings":"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"}