@tuturuuu/ui 0.3.2 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # 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)
+
+
+### Features
+
+* **chat:** add personal channels and root integrations ([fb5e753](https://github.com/tutur3u/platform/commit/fb5e7534588c7015449313fc4a752b70732f227e))
+* **chat:** merge personal channels and root integrations ([22d50ce](https://github.com/tutur3u/platform/commit/22d50ce0d75e36e0beaa973ef59cbd296e22dc35))
+
 ## [0.3.2](https://github.com/tutur3u/platform/compare/ui-v0.3.1...ui-v0.3.2) (2026-06-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.3.2",
+  "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.1.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.3.0",
-    "@tuturuuu/supabase": "0.3.2",
+    "@tuturuuu/internal-api": "0.4.1",
+    "@tuturuuu/supabase": "0.3.3",
     "@tuturuuu/trigger": "0.2.0",
-    "@tuturuuu/utils": "0.4.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.5.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

@@ -4,7 +4,10 @@ import { getChatConversationSections } from './chat-sidebar';
 
 function conversation(
   type: ChatConversation['type'],
-  id = `${type}-conversation`
+  id = `${type}-conversation`,
+  metadata: ChatConversation['metadata'] = type === 'ai'
+    ? { source: 'personal-ai-chat' }
+    : {}
 ): ChatConversation {
   return {
     aiEnabled: type === 'ai',
@@ -16,7 +19,7 @@ function conversation(
     latestMessage: null,
     memberCount: 1,
     members: [],
-    metadata: type === 'ai' ? { source: 'personal-ai-chat' } : {},
+    metadata,
     title: null,
     type,
     unreadCount: 0,
@@ -31,8 +34,10 @@ describe('chat sidebar conversation sections', () => {
       conversations: [
         conversation('direct'),
         conversation('group'),
+        conversation('channel', 'channel-conversation', {
+          scope: 'personal',
+        }),
         conversation('ai'),
-        conversation('channel'),
       ],
       labels: {
         ai: 'AI agents',
@@ -54,6 +59,11 @@ describe('chat sidebar conversation sections', () => {
         label: 'Groups',
         sectionType: 'group',
       },
+      {
+        conversations: [{ id: 'channel-conversation' }],
+        label: 'Channels',
+        sectionType: 'channel',
+      },
       {
         conversations: [{ id: 'ai-conversation' }],
         label: 'AI agents',
@@ -61,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

@@ -1,11 +1,13 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { ChatConversation } from '@tuturuuu/internal-api';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ChatSidebarPanel } from './chat-sidebar-panel';
 
 const mocks = vi.hoisted(() => ({
   chatSidebarProps: null as Record<string, unknown> | null,
+  createDialogProps: null as Record<string, unknown> | null,
   fetchNextPage: vi.fn(),
+  routerReplace: vi.fn(),
   useChatMessageSearch: vi.fn(),
   useInfiniteChatConversations: vi.fn(),
 }));
@@ -16,6 +18,9 @@ vi.mock('next-intl', () => ({
 
 vi.mock('next/navigation', () => ({
   usePathname: () => '/personal',
+  useRouter: () => ({
+    replace: mocks.routerReplace,
+  }),
   useSearchParams: () => new URLSearchParams('scope=personal'),
 }));
 
@@ -36,7 +41,10 @@ vi.mock('./chat-sidebar', () => ({
 }));
 
 vi.mock('./create-conversation-dialog', () => ({
-  CreateConversationDialog: () => null,
+  CreateConversationDialog: (props: Record<string, unknown>) => {
+    mocks.createDialogProps = props;
+    return null;
+  },
 }));
 
 vi.mock('./hooks', () => ({
@@ -71,6 +79,8 @@ describe('ChatSidebarPanel', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mocks.chatSidebarProps = null;
+    mocks.createDialogProps = null;
+    window.localStorage.clear();
     mocks.useChatMessageSearch.mockReturnValue({ data: [] });
     mocks.useInfiniteChatConversations.mockReturnValue({
       data: {
@@ -101,10 +111,56 @@ describe('ChatSidebarPanel', () => {
       hasMoreConversations: true,
       isFetchingMoreConversations: false,
       isLoading: false,
+      sourceGroupStorageKey:
+        'tuturuuu.chat.collapsedSourceGroups.personal.personal',
     });
 
     fireEvent.click(screen.getByRole('button', { name: 'load more' }));
 
     expect(mocks.fetchNextPage).toHaveBeenCalledTimes(1);
   });
+
+  it('updates Next router state when auto-selecting the first conversation', async () => {
+    render(
+      <ChatSidebarPanel
+        currentUserId="user-1"
+        isCollapsed={false}
+        wsId="personal"
+      />
+    );
+
+    await waitFor(() => {
+      expect(mocks.routerReplace).toHaveBeenCalledWith(
+        '/personal?scope=personal&conversationId=conversation-1',
+        { scroll: false }
+      );
+    });
+  });
+
+  it('opens agent details when an integration returns a virtual conversation', async () => {
+    render(
+      <ChatSidebarPanel
+        currentUserId="user-1"
+        enableRootIntegrations
+        isCollapsed={false}
+        wsId="personal"
+      />
+    );
+
+    await waitFor(() => {
+      expect(mocks.createDialogProps).toBeTruthy();
+    });
+    mocks.routerReplace.mockClear();
+
+    (
+      mocks.createDialogProps?.onIntegrationCreated as
+        | ((conversationId: string) => void)
+        | undefined
+    )?.('ai-agent-chat-integrations-chat-zalo-personal');
+
+    expect(mocks.routerReplace).toHaveBeenCalledWith(
+      '/personal?scope=personal&conversationId=ai-agent-chat-integrations-chat-zalo-personal&details=agent',
+      { scroll: false }
+    );
+  });
 });