@tuturuuu/ui 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.4.1](https://github.com/tutur3u/platform/compare/ui-v0.4.0...ui-v0.4.1) (2026-06-11)
+
+
+### Bug Fixes
+
+* **chat:** throttle Zalo phone sync and group mirrored chats ([51f3ab5](https://github.com/tutur3u/platform/commit/51f3ab5cec4a7a0c7403100045a6d7500975caf3))
+
 ## [0.4.0](https://github.com/tutur3u/platform/compare/ui-v0.3.2...ui-v0.4.0) (2026-06-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -82,14 +82,14 @@
     "@tiptap/pm": "3.26.0",
     "@tiptap/react": "3.26.0",
     "@tiptap/starter-kit": "3.26.0",
-    "@tuturuuu/ai": "0.2.0",
-    "@tuturuuu/apis": "0.1.0",
+    "@tuturuuu/ai": "0.2.1",
+    "@tuturuuu/apis": "0.2.0",
     "@tuturuuu/hooks": "0.0.1",
     "@tuturuuu/icons": "0.0.5",
-    "@tuturuuu/internal-api": "0.4.0",
+    "@tuturuuu/internal-api": "0.4.1",
     "@tuturuuu/supabase": "0.3.3",
     "@tuturuuu/trigger": "0.2.0",
-    "@tuturuuu/utils": "0.5.0",
+    "@tuturuuu/utils": "0.5.1",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -148,7 +148,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.6.0",
+    "@tuturuuu/types": "0.6.1",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.24",

package/src/components/ui/chat/chat-agent-details-operations-panel.test.tsx

@@ -284,6 +284,68 @@ describe('AgentOperationsPanel', () => {
     });
   });
 
+  it('keeps personal Zalo actions busy while a phone sync job is running', async () => {
+    mocks.getAiAgentZaloPersonalStatus.mockResolvedValue({
+      phoneSyncJob: {
+        completedAt: null,
+        error: null,
+        startedAt: '2026-06-02T00:00:00.000Z',
+        status: 'running',
+        sync: null,
+      },
+      status: {
+        channelId: 'channel-1',
+        connected: true,
+        enabled: true,
+        lastError: 'zalo_personal_phone_sync_waiting_for_phone',
+        lastEventAt: '2026-06-02T00:00:00.000Z',
+        mode: 'personal',
+        ownId: 'own-1',
+        running: true,
+        startedAt: '2026-06-02T00:00:00.000Z',
+      },
+    });
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <AgentOperationsPanel
+          agentId="agent-1"
+          channel={{
+            ...channel,
+            adapter: 'zalo',
+            displayName: 'Personal Zalo',
+            webhookUrl: null,
+            zaloAccountMode: 'personal',
+            zaloPersonalOwnId: 'own-1',
+          }}
+          isPending={false}
+          onCopySecret={vi.fn()}
+          onDeploy={vi.fn()}
+          onPause={vi.fn()}
+          onRefresh={vi.fn()}
+          onRotateSecret={vi.fn()}
+          onTest={vi.fn()}
+          secretPreview={null}
+          testResult={null}
+        />
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('agent_zalo_personal_sync_phone').closest('button')
+      ).toBeDisabled();
+    });
+    expect(
+      screen.getByText('agent_zalo_personal_sync_phone_waiting')
+    ).toBeInTheDocument();
+  });
+
   it('warns when personal Zalo phone transfer is approved but returns no payload', async () => {
     mocks.getAiAgentZaloPersonalStatus.mockResolvedValue({
       status: {

package/src/components/ui/chat/chat-agent-details-zalo-personal-panel.tsx

@@ -102,7 +102,7 @@ export function AgentZaloPersonalPanel({
     queryFn: () => getAiAgentZaloPersonalStatus(agentId, channel.id),
     queryKey: [STATUS_QUERY_KEY, agentId, channel.id],
     refetchInterval: (query) =>
-      query.state.data?.phoneSyncJob?.status === 'running' ? 3000 : 10_000,
+      isActivePhoneSyncJob(query.state.data?.phoneSyncJob) ? 3000 : 10_000,
   });
   const qrQuery = useQuery({
     enabled: Boolean(sessionId),
@@ -214,7 +214,7 @@ export function AgentZaloPersonalPanel({
 
   const listenerStatus = statusQuery.data?.status;
   const phoneSyncJob = statusQuery.data?.phoneSyncJob ?? null;
-  const phoneSyncRunning = phoneSyncJob?.status === 'running';
+  const phoneSyncRunning = isActivePhoneSyncJob(phoneSyncJob);
   const qrBusy = startMutation.isPending || abortMutation.isPending;
   const actionBusy = isPending || actionMutation.isPending || phoneSyncRunning;
   const listenerError =
@@ -485,6 +485,12 @@ function getQrErrorMessage(
   return session.error;
 }
 
+function isActivePhoneSyncJob(
+  job: AiAgentZaloPersonalPhoneSyncJobSnapshot | null | undefined
+) {
+  return job?.status === 'running';
+}
+
 function ActionButton({
   action,
   busy,

package/src/components/ui/chat/chat-sidebar-conversation-groups.tsx

@@ -0,0 +1,332 @@
+'use client';
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+import {
+  Bot,
+  ChevronDown,
+  ChevronRight,
+  Hash,
+  LoaderCircle,
+  MessageCircle,
+  Users,
+} from '@tuturuuu/icons';
+import type { ChatConversation } from '@tuturuuu/internal-api';
+import { useTranslations } from 'next-intl';
+import { type UIEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { ConversationRow } from './chat-sidebar-items';
+import {
+  type ChatConversationSourceGroup,
+  getChatConversationSections,
+} from './chat-sidebar-sections';
+import type {
+  ChatConversationArchiveFilter,
+  ChatConversationScope,
+} from './utils';
+
+type ConversationListItem =
+  | { key: string; label: string; type: 'archive-label' }
+  | {
+      key: string;
+      label: string;
+      sectionType: ChatConversation['type'];
+      type: 'group-label';
+    }
+  | {
+      collapsed: boolean;
+      group: ChatConversationSourceGroup;
+      key: string;
+      type: 'source-group-label';
+    }
+  | { conversation: ChatConversation; key: string; type: 'conversation' }
+  | { key: string; type: 'loader' };
+
+export function ConversationGroups({
+  archiveFilter,
+  conversations,
+  currentUserId,
+  hasMoreConversations,
+  isFetchingMoreConversations,
+  onArchiveConversation,
+  onLoadMoreConversations,
+  onPinConversation,
+  onSelectConversation,
+  scope,
+  selectedConversationId,
+  sourceGroupStorageKey,
+}: {
+  archiveFilter: ChatConversationArchiveFilter;
+  conversations: ChatConversation[];
+  currentUserId: string;
+  hasMoreConversations?: boolean;
+  isFetchingMoreConversations?: boolean;
+  onArchiveConversation?: (conversationId: string) => void;
+  onLoadMoreConversations?: () => Promise<unknown> | undefined;
+  onPinConversation?: (conversationId: string, pinned: boolean) => void;
+  onSelectConversation: (conversationId: string) => void;
+  scope?: ChatConversationScope;
+  selectedConversationId?: string | null;
+  sourceGroupStorageKey?: string | null;
+}) {
+  const t = useTranslations('chat');
+  const parentRef = useRef<HTMLDivElement | null>(null);
+  const [collapsedSourceGroupIds, setCollapsedSourceGroupIds] = useState<
+    Set<string>
+  >(new Set());
+  const groups = useMemo(
+    () =>
+      getChatConversationSections({
+        conversations,
+        labels: {
+          ai: t('ai_agents'),
+          channel: t('channels'),
+          direct: t('direct_messages'),
+          group: t('groups'),
+        },
+        sourceLabels: {
+          external: t('source_external'),
+          zaloPersonal: t('source_zalo_personal'),
+        },
+        scope,
+      }),
+    [conversations, scope, t]
+  );
+
+  useEffect(() => {
+    setCollapsedSourceGroupIds(
+      readCollapsedSourceGroupIds(sourceGroupStorageKey)
+    );
+  }, [sourceGroupStorageKey]);
+
+  const items = useMemo<ConversationListItem[]>(() => {
+    const next: ConversationListItem[] = [];
+    if (archiveFilter !== 'active') {
+      next.push({
+        key: 'archive-label',
+        label:
+          archiveFilter === 'archived'
+            ? t('showing_archived_chats')
+            : t('showing_all_chats'),
+        type: 'archive-label',
+      });
+    }
+
+    for (const [index, group] of groups.entries()) {
+      const visibleCount =
+        group.conversations.length +
+        group.sourceGroups.reduce(
+          (count, sourceGroup) => count + sourceGroup.conversations.length,
+          0
+        );
+
+      if (visibleCount === 0) continue;
+      if (group.label) {
+        next.push({
+          key: `group-${group.label}-${index}`,
+          label: group.label,
+          sectionType: group.sectionType,
+          type: 'group-label',
+        });
+      }
+
+      for (const conversation of group.conversations) {
+        next.push({
+          conversation,
+          key: conversation.id,
+          type: 'conversation',
+        });
+      }
+
+      for (const sourceGroup of group.sourceGroups) {
+        const collapsed = collapsedSourceGroupIds.has(sourceGroup.id);
+
+        next.push({
+          collapsed,
+          group: sourceGroup,
+          key: `source-group-${sourceGroup.id}`,
+          type: 'source-group-label',
+        });
+
+        if (!collapsed) {
+          for (const conversation of sourceGroup.conversations) {
+            next.push({
+              conversation,
+              key: conversation.id,
+              type: 'conversation',
+            });
+          }
+        }
+      }
+    }
+
+    if (hasMoreConversations) next.push({ key: 'loader', type: 'loader' });
+    return next;
+  }, [archiveFilter, collapsedSourceGroupIds, groups, hasMoreConversations, t]);
+
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    estimateSize: (index) => {
+      const item = items[index];
+      if (item?.type === 'conversation') return 36;
+      if (item?.type === 'loader') return 44;
+      if (item?.type === 'source-group-label') return 34;
+      return 30;
+    },
+    getItemKey: (index) => items[index]?.key ?? index,
+    getScrollElement: () => parentRef.current,
+    overscan: 8,
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+
+  function maybeLoadMore(event: UIEvent<HTMLDivElement>) {
+    if (!(hasMoreConversations && onLoadMoreConversations)) return;
+    if (isFetchingMoreConversations) return;
+
+    const target = event.currentTarget;
+    const distanceToEnd =
+      target.scrollHeight - target.scrollTop - target.clientHeight;
+    if (distanceToEnd < 180) {
+      void onLoadMoreConversations();
+    }
+  }
+
+  function toggleSourceGroup(groupId: string) {
+    setCollapsedSourceGroupIds((current) => {
+      const next = new Set(current);
+
+      if (next.has(groupId)) {
+        next.delete(groupId);
+      } else {
+        next.add(groupId);
+      }
+
+      writeCollapsedSourceGroupIds(sourceGroupStorageKey, next);
+
+      return next;
+    });
+  }
+
+  return (
+    <div
+      className="h-full overflow-y-auto overflow-x-hidden overscroll-contain p-2"
+      onScroll={maybeLoadMore}
+      ref={parentRef}
+    >
+      <div
+        className="relative"
+        style={{ height: `${virtualizer.getTotalSize()}px` }}
+      >
+        {virtualItems.map((virtualItem) => {
+          const item = items[virtualItem.index];
+          if (!item) return null;
+
+          return (
+            <div
+              className="absolute inset-x-0 top-0"
+              data-index={virtualItem.index}
+              key={virtualItem.key}
+              ref={virtualizer.measureElement}
+              style={{ transform: `translateY(${virtualItem.start}px)` }}
+            >
+              {item.type === 'archive-label' ? (
+                <p className="px-2 py-1 text-muted-foreground text-xs">
+                  {item.label}
+                </p>
+              ) : item.type === 'group-label' ? (
+                <h3 className="flex items-center gap-1.5 px-2 py-1.5 font-medium text-muted-foreground text-xs uppercase">
+                  <ConversationSectionIcon type={item.sectionType} />
+                  {item.label}
+                </h3>
+              ) : item.type === 'source-group-label' ? (
+                <SourceGroupRow
+                  collapsed={item.collapsed}
+                  group={item.group}
+                  onToggle={toggleSourceGroup}
+                />
+              ) : item.type === 'loader' ? (
+                <div className="flex items-center justify-center py-2 text-muted-foreground text-xs">
+                  <LoaderCircle className="mr-2 size-3.5 animate-spin" />
+                  {t('loading_conversations')}
+                </div>
+              ) : (
+                <ConversationRow
+                  conversation={item.conversation}
+                  currentUserId={currentUserId}
+                  isSelected={item.conversation.id === selectedConversationId}
+                  onArchiveConversation={onArchiveConversation}
+                  onPinConversation={onPinConversation}
+                  onSelectConversation={onSelectConversation}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function SourceGroupRow({
+  collapsed,
+  group,
+  onToggle,
+}: {
+  collapsed: boolean;
+  group: ChatConversationSourceGroup;
+  onToggle: (groupId: string) => void;
+}) {
+  const Icon = collapsed ? ChevronRight : ChevronDown;
+
+  return (
+    <button
+      aria-expanded={!collapsed}
+      className="flex h-8 w-full items-center gap-1.5 rounded-md px-2 text-left font-medium text-muted-foreground text-xs transition-colors hover:bg-accent hover:text-foreground"
+      onClick={() => onToggle(group.id)}
+      type="button"
+    >
+      <Icon className="size-3.5 shrink-0" />
+      <span className="min-w-0 flex-1 truncate">{group.label}</span>
+      <span className="shrink-0 rounded-sm border px-1.5 py-0.5 text-[0.6875rem] leading-none">
+        {group.conversations.length}
+      </span>
+    </button>
+  );
+}
+
+function readCollapsedSourceGroupIds(sourceGroupStorageKey?: string | null) {
+  if (!sourceGroupStorageKey) return new Set<string>();
+
+  try {
+    const parsed = JSON.parse(
+      window.localStorage.getItem(sourceGroupStorageKey) ?? '[]'
+    );
+
+    if (!Array.isArray(parsed)) return new Set<string>();
+
+    return new Set(
+      parsed.filter((value): value is string => typeof value === 'string')
+    );
+  } catch {
+    return new Set<string>();
+  }
+}
+
+function writeCollapsedSourceGroupIds(
+  sourceGroupStorageKey: string | null | undefined,
+  groupIds: Set<string>
+) {
+  if (!sourceGroupStorageKey) return;
+
+  window.localStorage.setItem(
+    sourceGroupStorageKey,
+    JSON.stringify([...groupIds])
+  );
+}
+
+function ConversationSectionIcon({ type }: { type: ChatConversation['type'] }) {
+  const className = 'size-3.5 shrink-0';
+
+  if (type === 'channel') return <Hash className={className} />;
+  if (type === 'ai') return <Bot className={className} />;
+  if (type === 'group') return <Users className={className} />;
+  return <MessageCircle className={className} />;
+}

package/src/components/ui/chat/chat-sidebar-groups.test.ts

@@ -71,4 +71,48 @@ describe('chat sidebar conversation sections', () => {
       },
     ]);
   });
+
+  it('groups Zalo mirrored external conversations under the AI source group', () => {
+    const sections = getChatConversationSections({
+      conversations: [
+        conversation('ai', 'assistant-conversation'),
+        conversation('ai', 'zalo-thread-1', {
+          adapter: 'zalo',
+          agentId: 'agent-1',
+          channelId: 'chat-zalo-personal',
+          source: 'ai-agent-external-thread',
+        }),
+        conversation('ai', 'zalo-thread-2', {
+          adapter: 'zalo',
+          agentId: 'agent-1',
+          channelId: 'chat-zalo-personal',
+          source: 'ai-agent-external-thread',
+        }),
+      ],
+      labels: {
+        ai: 'AI agents',
+        channel: 'Channels',
+        direct: 'Direct messages',
+        group: 'Groups',
+      },
+      scope: 'workspaces',
+      sourceLabels: {
+        external: 'External source',
+        zaloPersonal: 'Zalo Personal',
+      },
+    });
+
+    expect(sections[1]).toMatchObject({
+      conversations: [{ id: 'assistant-conversation' }],
+      label: 'AI agents',
+      sectionType: 'ai',
+      sourceGroups: [
+        {
+          conversations: [{ id: 'zalo-thread-1' }, { id: 'zalo-thread-2' }],
+          id: 'external:zalo:agent-1:chat-zalo-personal',
+          label: 'Zalo Personal',
+        },
+      ],
+    });
+  });
 });

package/src/components/ui/chat/chat-sidebar-panel.test.tsx

@@ -111,6 +111,8 @@ describe('ChatSidebarPanel', () => {
       hasMoreConversations: true,
       isFetchingMoreConversations: false,
       isLoading: false,
+      sourceGroupStorageKey:
+        'tuturuuu.chat.collapsedSourceGroups.personal.personal',
     });
 
     fireEvent.click(screen.getByRole('button', { name: 'load more' }));

package/src/components/ui/chat/chat-sidebar-panel.tsx

@@ -17,6 +17,7 @@ import {
   filterChatConversationsByScope,
   getChatConversationTypesForScope,
   getChatSelectionStorageKey,
+  getChatSourceGroupStorageKey,
   normalizeChatConversationScope,
   resolveChatConversationSelection,
 } from './utils';
@@ -105,6 +106,10 @@ export function ChatSidebarPanel({
     wsId,
     conversationScope
   );
+  const sourceGroupStorageKey = getChatSourceGroupStorageKey(
+    wsId,
+    conversationScope
+  );
   const requestedConversationPending = Boolean(
     requestedConversationId &&
       !scopedConversationIdList.includes(requestedConversationId) &&
@@ -189,6 +194,7 @@ export function ChatSidebarPanel({
         selectedConversationId={selectedConversationId}
         showControls={false}
         showTitle={false}
+        sourceGroupStorageKey={sourceGroupStorageKey}
         scope={conversationScope}
       />
       <CreateConversationDialog

package/src/components/ui/chat/chat-sidebar-sections.ts

@@ -0,0 +1,199 @@
+import type { ChatConversation } from '@tuturuuu/internal-api';
+import type { ChatConversationScope } from './utils';
+
+export type ChatConversationSectionLabels = {
+  ai: string;
+  channel: string;
+  direct: string;
+  group: string;
+};
+
+export type ChatConversationSourceLabels = {
+  external: string;
+  zaloPersonal: string;
+};
+
+export interface ChatConversationSourceGroup {
+  conversations: ChatConversation[];
+  id: string;
+  label: string;
+}
+
+export interface ChatConversationSection {
+  conversations: ChatConversation[];
+  label: string | null;
+  sectionType: ChatConversation['type'];
+  sourceGroups: ChatConversationSourceGroup[];
+}
+
+const DEFAULT_SOURCE_LABELS = {
+  external: 'External source',
+  zaloPersonal: 'Zalo Personal',
+} as const satisfies ChatConversationSourceLabels;
+
+export function getChatConversationSections({
+  conversations,
+  labels,
+  scope,
+  sourceLabels = DEFAULT_SOURCE_LABELS,
+}: {
+  conversations: ChatConversation[];
+  labels: ChatConversationSectionLabels;
+  scope?: ChatConversationScope;
+  sourceLabels?: ChatConversationSourceLabels;
+}): ChatConversationSection[] {
+  if (scope === 'workspaces') {
+    return [
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'channel'
+        ),
+        label: labels.channel,
+        sectionType: 'channel',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'ai'
+        ),
+        label: labels.ai,
+        sectionType: 'ai',
+        sourceLabels,
+      }),
+    ];
+  }
+
+  if (scope === 'personal') {
+    return [
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'direct'
+        ),
+        label: labels.direct,
+        sectionType: 'direct',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'group'
+        ),
+        label: labels.group,
+        sectionType: 'group',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'channel'
+        ),
+        label: labels.channel,
+        sectionType: 'channel',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'ai'
+        ),
+        label: labels.ai,
+        sectionType: 'ai',
+        sourceLabels,
+      }),
+    ];
+  }
+
+  return [
+    createChatConversationSection({
+      conversations,
+      label: null,
+      sectionType: 'direct',
+      sourceLabels,
+    }),
+  ];
+}
+
+export function getChatConversationSourceGroups({
+  conversations,
+  labels = DEFAULT_SOURCE_LABELS,
+}: {
+  conversations: ChatConversation[];
+  labels?: ChatConversationSourceLabels;
+}) {
+  const groups = new Map<string, ChatConversationSourceGroup>();
+
+  for (const conversation of conversations) {
+    const sourceGroup = getChatConversationSourceGroup(conversation, labels);
+
+    if (!sourceGroup) continue;
+
+    const group = groups.get(sourceGroup.id);
+
+    if (group) {
+      group.conversations.push(conversation);
+    } else {
+      groups.set(sourceGroup.id, {
+        ...sourceGroup,
+        conversations: [conversation],
+      });
+    }
+  }
+
+  return [...groups.values()];
+}
+
+function createChatConversationSection({
+  conversations,
+  label,
+  sectionType,
+  sourceLabels,
+}: {
+  conversations: ChatConversation[];
+  label: string | null;
+  sectionType: ChatConversation['type'];
+  sourceLabels: ChatConversationSourceLabels;
+}): ChatConversationSection {
+  const sourceGroups = getChatConversationSourceGroups({
+    conversations,
+    labels: sourceLabels,
+  });
+  const sourceConversationIds = new Set(
+    sourceGroups.flatMap((group) =>
+      group.conversations.map((conversation) => conversation.id)
+    )
+  );
+
+  return {
+    conversations: conversations.filter(
+      (conversation) => !sourceConversationIds.has(conversation.id)
+    ),
+    label,
+    sectionType,
+    sourceGroups,
+  };
+}
+
+function getChatConversationSourceGroup(
+  conversation: ChatConversation,
+  labels: ChatConversationSourceLabels
+): Omit<ChatConversationSourceGroup, 'conversations'> | null {
+  const metadata = conversation.metadata ?? {};
+
+  if (metadata.source !== 'ai-agent-external-thread') return null;
+
+  const adapter = readString(metadata.adapter);
+
+  if (adapter !== 'zalo') return null;
+
+  const agentId = readString(metadata.agentId) ?? 'unknown-agent';
+  const channelId =
+    readString(metadata.channelId) ??
+    readString(metadata.externalChannelId) ??
+    'unknown-channel';
+
+  return {
+    id: `external:${adapter}:${agentId}:${channelId}`,
+    label: labels.zaloPersonal,
+  };
+}
+
+function readString(value: unknown) {
+  return typeof value === 'string' && value.trim() ? value.trim() : null;
+}

package/src/components/ui/chat/chat-sidebar.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useVirtualizer } from '@tanstack/react-virtual';
 import {
   Bot,
   Funnel,
@@ -13,7 +12,7 @@ import {
 import type { ChatConversation, ChatMessage } from '@tuturuuu/internal-api';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
-import { type ReactNode, type UIEvent, useMemo, useRef, useState } from 'react';
+import { type ReactNode, useState } from 'react';
 import { Button } from '../button';
 import {
   DropdownMenu,
@@ -24,12 +23,18 @@ import {
   DropdownMenuTrigger,
 } from '../dropdown-menu';
 import { Input } from '../input';
-import { ConversationRow, SearchResultList } from './chat-sidebar-items';
+import { ConversationGroups } from './chat-sidebar-conversation-groups';
+import { SearchResultList } from './chat-sidebar-items';
 import type {
   ChatConversationArchiveFilter,
   ChatConversationScope,
 } from './utils';
 
+export {
+  getChatConversationSections,
+  getChatConversationSourceGroups,
+} from './chat-sidebar-sections';
+
 interface ChatSidebarProps {
   actions?: ReactNode;
   archiveFilter?: ChatConversationArchiveFilter;
@@ -51,6 +56,7 @@ interface ChatSidebarProps {
   scope?: ChatConversationScope;
   showControls?: boolean;
   showTitle?: boolean;
+  sourceGroupStorageKey?: string | null;
   searchValue: string;
   selectedConversationId?: string | null;
 }
@@ -76,6 +82,7 @@ export function ChatSidebar({
   scope,
   showControls = true,
   showTitle = true,
+  sourceGroupStorageKey,
   searchValue,
   selectedConversationId,
 }: ChatSidebarProps) {
@@ -154,6 +161,7 @@ export function ChatSidebar({
             archiveFilter={archiveFilter}
             scope={scope}
             selectedConversationId={selectedConversationId}
+            sourceGroupStorageKey={sourceGroupStorageKey}
           />
         ) : (
           <div className="p-6 text-center">
@@ -171,261 +179,6 @@ export function ChatSidebar({
   );
 }
 
-type ConversationListItem =
-  | { key: string; label: string; type: 'archive-label' }
-  | {
-      key: string;
-      label: string;
-      sectionType: ChatConversation['type'];
-      type: 'group-label';
-    }
-  | { conversation: ChatConversation; key: string; type: 'conversation' }
-  | { key: string; type: 'loader' };
-
-type ChatConversationSectionLabels = {
-  ai: string;
-  channel: string;
-  direct: string;
-  group: string;
-};
-
-export function getChatConversationSections({
-  conversations,
-  labels,
-  scope,
-}: {
-  conversations: ChatConversation[];
-  labels: ChatConversationSectionLabels;
-  scope?: ChatConversationScope;
-}) {
-  if (scope === 'workspaces') {
-    return [
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'channel'
-        ),
-        label: labels.channel,
-        sectionType: 'channel' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'ai'
-        ),
-        label: labels.ai,
-        sectionType: 'ai' as const,
-      },
-    ];
-  }
-
-  if (scope === 'personal') {
-    return [
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'direct'
-        ),
-        label: labels.direct,
-        sectionType: 'direct' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'group'
-        ),
-        label: labels.group,
-        sectionType: 'group' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'channel'
-        ),
-        label: labels.channel,
-        sectionType: 'channel' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'ai'
-        ),
-        label: labels.ai,
-        sectionType: 'ai' as const,
-      },
-    ];
-  }
-
-  return [
-    {
-      conversations,
-      label: null,
-      sectionType: 'direct' as const,
-    },
-  ];
-}
-
-function ConversationGroups({
-  archiveFilter,
-  conversations,
-  currentUserId,
-  hasMoreConversations,
-  isFetchingMoreConversations,
-  onArchiveConversation,
-  onLoadMoreConversations,
-  onPinConversation,
-  onSelectConversation,
-  scope,
-  selectedConversationId,
-}: {
-  archiveFilter: ChatConversationArchiveFilter;
-  conversations: ChatConversation[];
-  currentUserId: string;
-  hasMoreConversations?: boolean;
-  isFetchingMoreConversations?: boolean;
-  onArchiveConversation?: (conversationId: string) => void;
-  onLoadMoreConversations?: () => Promise<unknown> | undefined;
-  onPinConversation?: (conversationId: string, pinned: boolean) => void;
-  onSelectConversation: (conversationId: string) => void;
-  scope?: ChatConversationScope;
-  selectedConversationId?: string | null;
-}) {
-  const t = useTranslations('chat');
-  const parentRef = useRef<HTMLDivElement | null>(null);
-  const groups = useMemo(
-    () =>
-      getChatConversationSections({
-        conversations,
-        labels: {
-          ai: t('ai_agents'),
-          channel: t('channels'),
-          direct: t('direct_messages'),
-          group: t('groups'),
-        },
-        scope,
-      }),
-    [conversations, scope, t]
-  );
-  const items = useMemo<ConversationListItem[]>(() => {
-    const next: ConversationListItem[] = [];
-    if (archiveFilter !== 'active') {
-      next.push({
-        key: 'archive-label',
-        label:
-          archiveFilter === 'archived'
-            ? t('showing_archived_chats')
-            : t('showing_all_chats'),
-        type: 'archive-label',
-      });
-    }
-
-    for (const [index, group] of groups.entries()) {
-      if (group.conversations.length === 0) continue;
-      if (group.label) {
-        next.push({
-          key: `group-${group.label}-${index}`,
-          label: group.label,
-          sectionType: group.sectionType,
-          type: 'group-label',
-        });
-      }
-
-      for (const conversation of group.conversations) {
-        next.push({
-          conversation,
-          key: conversation.id,
-          type: 'conversation',
-        });
-      }
-    }
-
-    if (hasMoreConversations) next.push({ key: 'loader', type: 'loader' });
-    return next;
-  }, [archiveFilter, groups, hasMoreConversations, t]);
-
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    estimateSize: (index) => {
-      const item = items[index];
-      if (item?.type === 'conversation') return 36;
-      if (item?.type === 'loader') return 44;
-      return 30;
-    },
-    getItemKey: (index) => items[index]?.key ?? index,
-    getScrollElement: () => parentRef.current,
-    overscan: 8,
-  });
-  const virtualItems = virtualizer.getVirtualItems();
-
-  function maybeLoadMore(event: UIEvent<HTMLDivElement>) {
-    if (!(hasMoreConversations && onLoadMoreConversations)) return;
-    if (isFetchingMoreConversations) return;
-
-    const target = event.currentTarget;
-    const distanceToEnd =
-      target.scrollHeight - target.scrollTop - target.clientHeight;
-    if (distanceToEnd < 180) {
-      void onLoadMoreConversations();
-    }
-  }
-
-  return (
-    <div
-      className="h-full overflow-y-auto overflow-x-hidden overscroll-contain p-2"
-      onScroll={maybeLoadMore}
-      ref={parentRef}
-    >
-      <div
-        className="relative"
-        style={{ height: `${virtualizer.getTotalSize()}px` }}
-      >
-        {virtualItems.map((virtualItem) => {
-          const item = items[virtualItem.index];
-          if (!item) return null;
-
-          return (
-            <div
-              className="absolute inset-x-0 top-0"
-              data-index={virtualItem.index}
-              key={virtualItem.key}
-              ref={virtualizer.measureElement}
-              style={{ transform: `translateY(${virtualItem.start}px)` }}
-            >
-              {item.type === 'archive-label' ? (
-                <p className="px-2 py-1 text-muted-foreground text-xs">
-                  {item.label}
-                </p>
-              ) : item.type === 'group-label' ? (
-                <h3 className="flex items-center gap-1.5 px-2 py-1.5 font-medium text-muted-foreground text-xs uppercase">
-                  <ConversationSectionIcon type={item.sectionType} />
-                  {item.label}
-                </h3>
-              ) : item.type === 'loader' ? (
-                <div className="flex items-center justify-center py-2 text-muted-foreground text-xs">
-                  <LoaderCircle className="mr-2 size-3.5 animate-spin" />
-                  {t('loading_conversations')}
-                </div>
-              ) : (
-                <ConversationRow
-                  conversation={item.conversation}
-                  currentUserId={currentUserId}
-                  isSelected={item.conversation.id === selectedConversationId}
-                  onArchiveConversation={onArchiveConversation}
-                  onPinConversation={onPinConversation}
-                  onSelectConversation={onSelectConversation}
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function ConversationSectionIcon({ type }: { type: ChatConversation['type'] }) {
-  const className = 'size-3.5 shrink-0';
-
-  if (type === 'channel') return <Hash className={className} />;
-  if (type === 'ai') return <Bot className={className} />;
-  if (type === 'group') return <Users className={className} />;
-  return <MessageCircle className={className} />;
-}
-
 export function ChatConversationFilterMenu({
   archiveFilter,
   className,

package/src/components/ui/chat/chat-workspace.tsx

@@ -48,6 +48,7 @@ import {
   filterChatConversations,
   getChatConversationTypesForScope,
   getChatSelectionStorageKey,
+  getChatSourceGroupStorageKey,
   getConversationTitle,
   isReadOnlyChatConversation,
   normalizeChatConversationScope,
@@ -123,6 +124,9 @@ export function ChatWorkspace({
   const selectionStorageKey = conversationScope
     ? getChatSelectionStorageKey(wsId, conversationScope)
     : null;
+  const sourceGroupStorageKey = conversationScope
+    ? getChatSourceGroupStorageKey(wsId, conversationScope)
+    : null;
   const requestedConversationPending = Boolean(
     requestedConversationId &&
       !conversationIds.has(requestedConversationId) &&
@@ -491,6 +495,7 @@ export function ChatWorkspace({
           searchResults={searchResults}
           searchValue={searchValue}
           selectedConversationId={activeConversationId}
+          sourceGroupStorageKey={sourceGroupStorageKey}
           scope={conversationScope ?? undefined}
         />
       ) : null}

package/src/components/ui/chat/utils.ts

@@ -244,6 +244,13 @@ export function getChatSelectionStorageKey(
   return `tuturuuu.chat.selectedConversation.${wsId}.${scope}`;
 }
 
+export function getChatSourceGroupStorageKey(
+  wsId: string,
+  scope: ChatConversationScope
+) {
+  return `tuturuuu.chat.collapsedSourceGroups.${wsId}.${scope}`;
+}
+
 export function resolveChatConversationSelection({
   conversationIds,
   requestedConversationId,