@tuturuuu/ui 0.3.1 → 0.4.0

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

@@ -5,9 +5,10 @@ import type {
   ChatAttachment,
   ChatAttachmentDraft,
   ChatConversation,
+  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';
@@ -39,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,
@@ -56,6 +58,7 @@ interface ChatWorkspaceProps {
   className?: string;
   defaultConversationScope?: ChatConversationScope;
   currentUserId: string;
+  enableRootIntegrations?: boolean;
   showSidebar?: boolean;
   variant?: 'standalone' | 'web';
   wsId: string;
@@ -65,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);
@@ -118,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
@@ -152,11 +171,17 @@ export function ChatWorkspace({
     conversationId: selectedVirtualReadOnly ? null : activeConversationId,
     wsId,
   });
+  const fetchedMessages = selectedVirtualReadOnly
+    ? []
+    : flattenChatMessagePages(messagesQuery.data);
   const messages = selectedVirtualReadOnly
     ? selectedConversation?.latestMessage
       ? [selectedConversation.latestMessage]
       : []
-    : flattenChatMessagePages(messagesQuery.data);
+    : mergeConversationLatestMessage(
+        fetchedMessages,
+        selectedConversation?.latestMessage
+      );
   const sendMessage = useSendChatMessage({
     conversationId: activeConversationId,
     currentUserId,
@@ -201,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);
 
@@ -220,6 +250,7 @@ export function ChatWorkspace({
   useEffect(() => {
     if (!activeConversationId) return;
     if (!storedSelectionLoaded && !requestedConversationId) return;
+    if (requestedConversationPending) return;
 
     if (selectionStorageKey) {
       localStorage.setItem(selectionStorageKey, activeConversationId);
@@ -227,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(() => {
@@ -303,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) {
@@ -351,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 {
@@ -473,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}
         />
 
@@ -558,7 +602,11 @@ export function ChatWorkspace({
             : undefined
         }
         currentUserId={currentUserId}
+        enableRootIntegrations={enableRootIntegrations}
         onCreated={handleCreated}
+        onIntegrationCreated={(conversationId) =>
+          selectConversation(conversationId, 'agent')
+        }
         onOpenChange={setCreateOpen}
         open={createOpen}
         wsId={wsId}
@@ -567,6 +615,29 @@ export function ChatWorkspace({
   );
 }
 
+function mergeConversationLatestMessage(
+  messages: ChatMessage[],
+  latestMessage?: ChatMessage | null
+) {
+  if (
+    !latestMessage ||
+    messages.some((message) => message.id === latestMessage.id)
+  ) {
+    return messages;
+  }
+
+  return [...messages, latestMessage].sort(
+    (left, right) =>
+      readChatMessageTimestamp(left.createdAt) -
+      readChatMessageTimestamp(right.createdAt)
+  );
+}
+
+function readChatMessageTimestamp(value: string) {
+  const timestamp = Date.parse(value);
+  return Number.isFinite(timestamp) ? timestamp : 0;
+}
+
 const POSTGRES_UUID_PATTERN =
   /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/iu;
 

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;
+}

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

@@ -1,11 +1,14 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { ChatConversation } from '@tuturuuu/internal-api';
+import { ROOT_WORKSPACE_ID } from '@tuturuuu/utils/constants';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { CreateConversationDialog } from './create-conversation-dialog';
+import { CreateIntegrationPanel } from './create-integration-panel';
 
 const mocks = vi.hoisted(() => ({
   createConversation: vi.fn(),
   createFriendRequest: vi.fn(),
+  createIntegration: vi.fn(),
 }));
 
 vi.mock('next-intl', () => ({
@@ -25,6 +28,18 @@ vi.mock('./hooks', () => ({
     isPending: false,
     mutateAsync: mocks.createFriendRequest,
   }),
+  useCreateChatIntegration: () => ({
+    isPending: false,
+    mutate: mocks.createIntegration,
+    variables: null,
+  }),
+}));
+
+vi.mock('../sonner', () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
 }));
 
 const createdConversation: ChatConversation = {
@@ -53,6 +68,13 @@ describe('CreateConversationDialog', () => {
     mocks.createConversation.mockResolvedValue({
       conversation: createdConversation,
     });
+    mocks.createIntegration.mockImplementation((_payload, options) => {
+      options?.onSuccess?.({
+        agent: { id: 'chat-integrations' },
+        channel: { id: 'chat-zalo-personal' },
+        conversationId: 'ai-agent-chat-integrations-chat-zalo-personal',
+      });
+    });
   });
 
   it('creates personal AI chats with personal AI metadata', async () => {
@@ -86,4 +108,87 @@ describe('CreateConversationDialog', () => {
     });
     expect(onCreated).toHaveBeenCalledWith(createdConversation);
   });
+
+  it('creates personal channels with personal scope metadata', async () => {
+    render(
+      <CreateConversationDialog
+        conversationScope="personal"
+        currentUserId="user-1"
+        onCreated={vi.fn()}
+        onOpenChange={vi.fn()}
+        open
+        wsId="personal-workspace-1"
+      />
+    );
+
+    fireEvent.click(screen.getByText('type_channel'));
+    fireEvent.click(screen.getByText('next'));
+    fireEvent.change(screen.getByPlaceholderText('channel_name_placeholder'), {
+      target: { value: 'Ideas' },
+    });
+    fireEvent.click(screen.getByText('create'));
+
+    await waitFor(() => {
+      expect(mocks.createConversation).toHaveBeenCalledWith(
+        expect.objectContaining({
+          aiEnabled: false,
+          metadata: {
+            scope: 'personal',
+          },
+          title: 'Ideas',
+          type: 'channel',
+        })
+      );
+    });
+  });
+
+  it('hides the integrations tab outside the internal root workspace', () => {
+    render(
+      <CreateConversationDialog
+        currentUserId="user-1"
+        enableRootIntegrations
+        onCreated={vi.fn()}
+        onOpenChange={vi.fn()}
+        open
+        wsId="workspace-1"
+      />
+    );
+
+    expect(screen.queryByText('tab_integrations')).toBeNull();
+  });
+
+  it('shows the integrations tab in the internal root workspace', () => {
+    render(
+      <CreateConversationDialog
+        currentUserId="user-1"
+        enableRootIntegrations
+        onCreated={vi.fn()}
+        onOpenChange={vi.fn()}
+        open
+        wsId={ROOT_WORKSPACE_ID}
+      />
+    );
+
+    expect(screen.getByRole('tab', { name: 'tab_integrations' })).toBeTruthy();
+  });
+
+  it('selects the returned virtual agent conversation after integration setup', () => {
+    const onCreated = vi.fn();
+
+    render(
+      <CreateIntegrationPanel onCreated={(result) => onCreated(result)} />
+    );
+
+    fireEvent.click(screen.getByText('integration_zalo_personal'));
+
+    expect(mocks.createIntegration).toHaveBeenCalledWith(
+      { kind: 'zalo-personal' },
+      expect.any(Object)
+    );
+    expect(onCreated).toHaveBeenCalledWith(
+      expect.objectContaining({
+        conversationId: 'ai-agent-chat-integrations-chat-zalo-personal',
+      })
+    );
+  });
 });