@tuturuuu/ui 0.3.2 → 0.4.1

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,
@@ -47,6 +48,7 @@ import {
   filterChatConversations,
   getChatConversationTypesForScope,
   getChatSelectionStorageKey,
+  getChatSourceGroupStorageKey,
   getConversationTitle,
   isReadOnlyChatConversation,
   normalizeChatConversationScope,
@@ -57,6 +59,7 @@ interface ChatWorkspaceProps {
   className?: string;
   defaultConversationScope?: ChatConversationScope;
   currentUserId: string;
+  enableRootIntegrations?: boolean;
   showSidebar?: boolean;
   variant?: 'standalone' | 'web';
   wsId: string;
@@ -66,12 +69,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 +124,37 @@ export function ChatWorkspace({
   const selectionStorageKey = conversationScope
     ? getChatSelectionStorageKey(wsId, conversationScope)
     : null;
+  const sourceGroupStorageKey = conversationScope
+    ? getChatSourceGroupStorageKey(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 +230,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 +254,7 @@ export function ChatWorkspace({
   useEffect(() => {
     if (!activeConversationId) return;
     if (!storedSelectionLoaded && !requestedConversationId) return;
+    if (requestedConversationPending) return;
 
     if (selectionStorageKey) {
       localStorage.setItem(selectionStorageKey, activeConversationId);
@@ -234,21 +262,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 +339,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 +388,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 {
@@ -466,6 +495,7 @@ export function ChatWorkspace({
           searchResults={searchResults}
           searchValue={searchValue}
           selectedConversationId={activeConversationId}
+          sourceGroupStorageKey={sourceGroupStorageKey}
           scope={conversationScope ?? undefined}
         />
       ) : null}
@@ -480,11 +510,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 +607,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;
+}

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',
+      })
+    );
+  });
 });