@tuturuuu/ui 0.3.2 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [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.0",
   "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/ai": "0.2.0",
     "@tuturuuu/apis": "0.1.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.0",
+    "@tuturuuu/supabase": "0.3.3",
     "@tuturuuu/trigger": "0.2.0",
-    "@tuturuuu/utils": "0.4.0",
+    "@tuturuuu/utils": "0.5.0",
     "@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.0",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.24",

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',

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: {
@@ -107,4 +117,48 @@ describe('ChatSidebarPanel', () => {
 
     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 }
+    );
+  });
 });

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

@@ -1,5 +1,5 @@
 import type { ChatConversation } from '@tuturuuu/internal-api';
-import { usePathname, useSearchParams } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { ChatSidebar } from './chat-sidebar';
 import { CreateConversationDialog } from './create-conversation-dialog';
@@ -8,6 +8,7 @@ import {
   useChatMessageSearch,
   useInfiniteChatConversations,
 } from './hooks';
+import { type ChatDetailsTarget, replaceChatSelection } from './selection';
 import {
   CHAT_CONVERSATION_TYPE_FILTERS,
   type ChatConversationArchiveFilter,
@@ -26,6 +27,7 @@ interface ChatSidebarPanelProps {
   createOpen?: boolean;
   currentUserId: string;
   defaultConversationScope?: ChatConversationScope;
+  enableRootIntegrations?: boolean;
   isCollapsed: boolean;
   onCreateOpenChange?: (open: boolean) => void;
   onSearchChange?: (value: string) => void;
@@ -40,6 +42,7 @@ export function ChatSidebarPanel({
   createOpen: controlledCreateOpen,
   currentUserId,
   defaultConversationScope = 'personal',
+  enableRootIntegrations,
   isCollapsed,
   onCreateOpenChange,
   onSearchChange,
@@ -48,6 +51,7 @@ export function ChatSidebarPanel({
   wsId,
 }: ChatSidebarPanelProps) {
   const pathname = usePathname();
+  const router = useRouter();
   const searchParams = useSearchParams();
   const [internalSearchValue, setInternalSearchValue] = useState('');
   const [internalCreateOpen, setInternalCreateOpen] = useState(false);
@@ -101,6 +105,11 @@ export function ChatSidebarPanel({
     wsId,
     conversationScope
   );
+  const requestedConversationPending = Boolean(
+    requestedConversationId &&
+      !scopedConversationIdList.includes(requestedConversationId) &&
+      conversationsQuery.isFetching
+  );
   const selectedConversationId = resolveChatConversationSelection({
     conversationIds: scopedConversationIdList,
     requestedConversationId,
@@ -116,37 +125,41 @@ export function ChatSidebarPanel({
   useEffect(() => {
     if (!selectedConversationId) return;
     if (!storedSelectionLoaded && !requestedConversationId) return;
+    if (requestedConversationPending) return;
 
     localStorage.setItem(selectionStorageKey, selectedConversationId);
     if (requestedConversationId === selectedConversationId) return;
 
-    const nextParams = new URLSearchParams(searchParams.toString());
-    nextParams.set('conversationId', selectedConversationId);
-    const nextQuery = nextParams.toString();
-    window.history.replaceState(
-      null,
-      '',
-      nextQuery ? `${pathname}?${nextQuery}` : pathname
-    );
+    replaceChatSelection({
+      conversationId: selectedConversationId,
+      pathname,
+      router,
+      searchParams,
+      storageKey: selectionStorageKey,
+    });
   }, [
     pathname,
     requestedConversationId,
+    router,
     searchParams,
     selectedConversationId,
     selectionStorageKey,
     storedSelectionLoaded,
+    requestedConversationPending,
   ]);
 
-  function selectConversation(conversationId: string) {
-    const nextParams = new URLSearchParams(searchParams.toString());
-    nextParams.set('conversationId', conversationId);
-    const nextQuery = nextParams.toString();
-    window.history.replaceState(
-      null,
-      '',
-      nextQuery ? `${pathname}?${nextQuery}` : pathname
-    );
-    localStorage.setItem(selectionStorageKey, conversationId);
+  function selectConversation(
+    conversationId: string,
+    details: ChatDetailsTarget = null
+  ) {
+    replaceChatSelection({
+      conversationId,
+      details,
+      pathname,
+      router,
+      searchParams,
+      storageKey: selectionStorageKey,
+    });
     closeOnMobile?.();
   }
 
@@ -183,7 +196,11 @@ export function ChatSidebarPanel({
         conversationScope={conversationScope}
         defaultType={getChatConversationTypesForScope(conversationScope)[0]}
         currentUserId={currentUserId}
+        enableRootIntegrations={enableRootIntegrations}
         onCreated={handleCreated}
+        onIntegrationCreated={(conversationId) =>
+          selectConversation(conversationId, 'agent')
+        }
         onOpenChange={setCreateOpen}
         open={createOpen}
         wsId={wsId}

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

@@ -233,6 +233,13 @@ export function getChatConversationSections({
         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'

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

@@ -181,6 +181,11 @@ describe('chat utils', () => {
     const direct = conversation({ id: 'direct-1', type: 'direct' });
     const group = conversation({ id: 'group-1', type: 'group' });
     const channel = conversation({ id: 'channel-1', type: 'channel' });
+    const personalChannel = conversation({
+      id: 'personal-channel-1',
+      metadata: { scope: 'personal' },
+      type: 'channel',
+    });
     const ai = conversation({ id: 'ai-1', type: 'ai' });
 
     expect(normalizeChatConversationScope('workspaces')).toBe('workspaces');
@@ -188,6 +193,7 @@ describe('chat utils', () => {
     expect(getChatConversationTypesForScope('personal')).toEqual([
       'direct',
       'group',
+      'channel',
       'ai',
     ]);
     expect(getChatConversationTypesForScope('workspaces')).toEqual([
@@ -206,6 +212,7 @@ describe('chat utils', () => {
         [
           direct,
           group,
+          personalChannel,
           channel,
           conversation({
             id: 'ai-chat-1',
@@ -220,7 +227,13 @@ describe('chat utils', () => {
         ],
         'personal'
       ).map((item) => item.id)
-    ).toEqual(['direct-1', 'group-1', 'ai-chat-1', 'personal-ai-1']);
+    ).toEqual([
+      'direct-1',
+      'group-1',
+      'personal-channel-1',
+      'ai-chat-1',
+      'personal-ai-1',
+    ]);
     expect(
       filterChatConversationsByScope(
         [

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

@@ -8,7 +8,7 @@ import type {
   ChatMessage,
 } from '@tuturuuu/internal-api';
 import { cn } from '@tuturuuu/utils/format';
-import { usePathname, useSearchParams } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
 import { Badge } from '../badge';
@@ -40,6 +40,7 @@ import {
 } from './hooks';
 import { MessageComposer } from './message-composer';
 import { MessageList } from './message-list';
+import { type ChatDetailsTarget, replaceChatSelection } from './selection';
 import {
   CHAT_CONVERSATION_TYPE_FILTERS,
   type ChatConversationArchiveFilter,
@@ -57,6 +58,7 @@ interface ChatWorkspaceProps {
   className?: string;
   defaultConversationScope?: ChatConversationScope;
   currentUserId: string;
+  enableRootIntegrations?: boolean;
   showSidebar?: boolean;
   variant?: 'standalone' | 'web';
   wsId: string;
@@ -66,12 +68,14 @@ export function ChatWorkspace({
   className,
   defaultConversationScope,
   currentUserId,
+  enableRootIntegrations,
   showSidebar = true,
   variant = 'web',
   wsId,
 }: ChatWorkspaceProps) {
   const t = useTranslations('chat');
   const pathname = usePathname();
+  const router = useRouter();
   const searchParams = useSearchParams();
   const [searchValue, setSearchValue] = useState('');
   const [createOpen, setCreateOpen] = useState(false);
@@ -119,20 +123,34 @@ export function ChatWorkspace({
   const selectionStorageKey = conversationScope
     ? getChatSelectionStorageKey(wsId, conversationScope)
     : null;
+  const requestedConversationPending = Boolean(
+    requestedConversationId &&
+      !conversationIds.has(requestedConversationId) &&
+      conversationsQuery.isFetching
+  );
   const selectedConversationId = resolveChatConversationSelection({
     conversationIds: conversationIdList,
     requestedConversationId,
     storedConversationId,
   });
-  const selectedConversation = useMemo(
-    () =>
-      (selectedConversationId && conversationIds.has(selectedConversationId)
-        ? conversations.find((item) => item.id === selectedConversationId)
-        : null) ??
-      conversations[0] ??
-      null,
-    [conversationIds, conversations, selectedConversationId]
-  );
+  const selectedConversation = useMemo(() => {
+    if (requestedConversationPending) return null;
+
+    if (selectedConversationId && conversationIds.has(selectedConversationId)) {
+      return (
+        conversations.find((item) => item.id === selectedConversationId) ??
+        conversations[0] ??
+        null
+      );
+    }
+
+    return conversations[0] ?? null;
+  }, [
+    conversationIds,
+    conversations,
+    requestedConversationPending,
+    selectedConversationId,
+  ]);
   const activeConversationId = selectedConversation?.id ?? null;
   const activeNativeConversationId = isPostgresUuid(activeConversationId)
     ? activeConversationId
@@ -208,7 +226,12 @@ export function ChatWorkspace({
   const latestPersistedMessageId = isPostgresUuid(latestMessageId)
     ? latestMessageId
     : null;
-  const detailsOpen = Boolean(sharedContentOpen && activeConversationId);
+  const requestedDetails = searchParams.get('details');
+  const agentDetailsOpen =
+    requestedDetails === 'agent' && selectedAgentReadOnly;
+  const detailsOpen = Boolean(
+    (sharedContentOpen || agentDetailsOpen) && activeConversationId
+  );
 
   useChatRealtime(wsId);
 
@@ -227,6 +250,7 @@ export function ChatWorkspace({
   useEffect(() => {
     if (!activeConversationId) return;
     if (!storedSelectionLoaded && !requestedConversationId) return;
+    if (requestedConversationPending) return;
 
     if (selectionStorageKey) {
       localStorage.setItem(selectionStorageKey, activeConversationId);
@@ -234,21 +258,22 @@ export function ChatWorkspace({
 
     if (requestedConversationId === activeConversationId) return;
 
-    const nextParams = new URLSearchParams(searchParams.toString());
-    nextParams.set('conversationId', activeConversationId);
-    const nextQuery = nextParams.toString();
-    window.history.replaceState(
-      null,
-      '',
-      nextQuery ? `${pathname}?${nextQuery}` : pathname
-    );
+    replaceChatSelection({
+      conversationId: activeConversationId,
+      pathname,
+      router,
+      searchParams,
+      storageKey: selectionStorageKey,
+    });
   }, [
     activeConversationId,
     pathname,
     requestedConversationId,
+    router,
     searchParams,
     selectionStorageKey,
     storedSelectionLoaded,
+    requestedConversationPending,
   ]);
 
   useEffect(() => {
@@ -310,18 +335,19 @@ export function ChatWorkspace({
     }
   }
 
-  function selectConversation(conversationId: string) {
-    const nextParams = new URLSearchParams(searchParams.toString());
-    nextParams.set('conversationId', conversationId);
-    const nextQuery = nextParams.toString();
-    window.history.replaceState(
-      null,
-      '',
-      nextQuery ? `${pathname}?${nextQuery}` : pathname
-    );
-    if (selectionStorageKey) {
-      localStorage.setItem(selectionStorageKey, conversationId);
-    }
+  function selectConversation(
+    conversationId: string,
+    details: ChatDetailsTarget = null
+  ) {
+    replaceChatSelection({
+      conversationId,
+      details,
+      pathname,
+      router,
+      searchParams,
+      storageKey: selectionStorageKey,
+    });
+    setSharedContentOpen(details === 'agent');
   }
 
   function handleCreated(conversation: ChatConversation) {
@@ -358,14 +384,13 @@ export function ChatWorkspace({
     try {
       await deleteConversation.mutateAsync(conversationId);
       if (clearSelection) {
-        const nextParams = new URLSearchParams(searchParams.toString());
-        nextParams.delete('conversationId');
-        const nextQuery = nextParams.toString();
-        window.history.replaceState(
-          null,
-          '',
-          nextQuery ? `${pathname}?${nextQuery}` : pathname
-        );
+        replaceChatSelection({
+          conversationId: null,
+          pathname,
+          router,
+          searchParams,
+          storageKey: selectionStorageKey,
+        });
       }
       toast.success(t('conversation_archived'));
     } catch {
@@ -480,11 +505,23 @@ export function ChatWorkspace({
           isUpdatingConversation={updateConversation.isPending}
           onDeleteConversation={handleDeleteConversation}
           onGenerateConversationTitle={handleGenerateConversationTitle}
-          onToggleSharedContent={() =>
-            setSharedContentOpen((current) => !current)
-          }
+          onToggleSharedContent={() => {
+            if (requestedDetails) {
+              replaceChatSelection({
+                conversationId: activeConversationId,
+                pathname,
+                router,
+                searchParams,
+                storageKey: selectionStorageKey,
+              });
+              setSharedContentOpen(false);
+              return;
+            }
+
+            setSharedContentOpen((current) => !current);
+          }}
           onUpdateConversation={handleUpdateConversation}
-          sharedContentOpen={sharedContentOpen}
+          sharedContentOpen={detailsOpen}
           title={selectedTitle}
         />
 
@@ -565,7 +602,11 @@ export function ChatWorkspace({
             : undefined
         }
         currentUserId={currentUserId}
+        enableRootIntegrations={enableRootIntegrations}
         onCreated={handleCreated}
+        onIntegrationCreated={(conversationId) =>
+          selectConversation(conversationId, 'agent')
+        }
         onOpenChange={setCreateOpen}
         open={createOpen}
         wsId={wsId}

package/src/components/ui/chat/create-conversation-dialog-utils.tsx

@@ -0,0 +1,56 @@
+import {
+  type ChatConversationType,
+  InternalApiError,
+} from '@tuturuuu/internal-api';
+import type { useTranslations } from 'next-intl';
+import type { ChatConversationScope } from './utils';
+
+export function getConversationMetadata(
+  conversationScope: ChatConversationScope | undefined,
+  type: ChatConversationType
+) {
+  if (conversationScope !== 'personal') return undefined;
+  if (type === 'ai') return { source: 'personal-ai-chat' };
+  if (type === 'channel') return { scope: 'personal' };
+  return undefined;
+}
+
+export function StepTitle({
+  description,
+  title,
+}: {
+  description: string;
+  title: string;
+}) {
+  return (
+    <div>
+      <h3 className="font-medium text-sm">{title}</h3>
+      <p className="mt-1 text-muted-foreground text-xs">{description}</p>
+    </div>
+  );
+}
+
+export function getCreateConversationErrorDescription(
+  error: unknown,
+  t: ReturnType<typeof useTranslations>
+) {
+  if (!(error instanceof InternalApiError)) return undefined;
+
+  if (error.message.includes('chat_target_not_invitable')) {
+    return t('conversation_create_target_not_invitable');
+  }
+
+  if (error.message.includes('chat_direct_requires_one_target')) {
+    return t('conversation_create_direct_requires_one_target');
+  }
+
+  if (error.message.includes('chat_group_requires_members')) {
+    return t('conversation_create_group_requires_members');
+  }
+
+  if (error.message.includes('chat_permission_required')) {
+    return t('conversation_create_permission_required');
+  }
+
+  return error.message;
+}