@tuturuuu/ui 0.3.2 → 0.4.0

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

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

@@ -5,8 +5,9 @@ import type {
   ChatConversation,
   ChatConversationType,
   ChatUserProfile,
+  CreateChatIntegrationResponse,
 } from '@tuturuuu/internal-api';
-import { InternalApiError } from '@tuturuuu/internal-api';
+import { ROOT_WORKSPACE_ID } from '@tuturuuu/utils/constants';
 import { useTranslations } from 'next-intl';
 import { type FormEvent, useEffect, useMemo, useState } from 'react';
 import { Button } from '../button';
@@ -20,8 +21,15 @@ import {
 } from '../dialog';
 import { Input } from '../input';
 import { toast } from '../sonner';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../tabs';
 import { Textarea } from '../textarea';
 import { ConversationTypeSelector } from './conversation-type-selector';
+import {
+  getConversationMetadata,
+  getCreateConversationErrorDescription,
+  StepTitle,
+} from './create-conversation-dialog-utils';
+import { CreateIntegrationPanel } from './create-integration-panel';
 import { DirectoryUserPicker } from './directory-user-picker';
 import {
   useChatDirectory,
@@ -34,6 +42,7 @@ import {
 } from './utils';
 
 type CreateConversationStep = 'details' | 'members' | 'type';
+type CreateConversationMode = 'conversation' | 'integrations';
 
 const UUID_PATTERN =
   /^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/iu;
@@ -43,7 +52,9 @@ interface CreateConversationDialogProps {
   conversationScope?: ChatConversationScope;
   currentUserId: string;
   defaultType?: ChatConversationType;
+  enableRootIntegrations?: boolean;
   onCreated: (conversation: ChatConversation) => void;
+  onIntegrationCreated?: (conversationId: string) => void;
   onOpenChange: (open: boolean) => void;
   open: boolean;
   wsId: string;
@@ -54,7 +65,9 @@ export function CreateConversationDialog({
   conversationScope,
   currentUserId,
   defaultType,
+  enableRootIntegrations,
   onCreated,
+  onIntegrationCreated,
   onOpenChange,
   open,
   wsId,
@@ -82,6 +95,7 @@ export function CreateConversationDialog({
   const [directoryQuery, setDirectoryQuery] = useState('');
   const [selectedUsers, setSelectedUsers] = useState<ChatUserProfile[]>([]);
   const [step, setStep] = useState<CreateConversationStep>('type');
+  const [mode, setMode] = useState<CreateConversationMode>('conversation');
   const { data: directoryUsers = [], isFetching } = useChatDirectory({
     enabled: open && (type === 'direct' || type === 'group'),
     query: directoryQuery,
@@ -120,6 +134,8 @@ export function CreateConversationDialog({
   const requiresTitle = type === 'group' || type === 'channel';
   const needsMembers = type === 'direct' || type === 'group';
   const needsDetails = type !== 'direct';
+  const showRootIntegrations =
+    Boolean(enableRootIntegrations) && wsId === ROOT_WORKSPACE_ID;
   const missingParticipants =
     (type === 'direct' && validSelectedUsers.length !== 1) ||
     (type === 'group' && validSelectedUsers.length < 1);
@@ -135,6 +151,7 @@ export function CreateConversationDialog({
     setDirectoryQuery('');
     setSelectedUsers([]);
     setStep('type');
+    setMode('conversation');
   }
 
   async function handleCreateFriendRequest(email: string) {
@@ -155,10 +172,7 @@ export function CreateConversationDialog({
       const { conversation } = await createConversation.mutateAsync({
         aiEnabled: type === 'ai',
         description: description.trim() || null,
-        metadata:
-          conversationScope === 'personal' && type === 'ai'
-            ? { source: 'personal-ai-chat' }
-            : undefined,
+        metadata: getConversationMetadata(conversationScope, type),
         participantUserIds: validSelectedUsers.map((user) => user.id),
         title: title.trim() || null,
         type,
@@ -173,6 +187,12 @@ export function CreateConversationDialog({
     }
   }
 
+  function handleIntegrationCreated(result: CreateChatIntegrationResponse) {
+    reset();
+    onIntegrationCreated?.(result.conversationId);
+    onOpenChange(false);
+  }
+
   function getNextStep() {
     if (step === 'type') return needsMembers ? 'members' : 'details';
     if (step === 'members' && needsDetails) return 'details';
@@ -195,6 +215,127 @@ export function CreateConversationDialog({
         (type === 'group' && validSelectedUsers.length < 1)
       ));
   const showSubmit = !nextStep;
+  const conversationForm = (
+    <form className="flex min-h-0 flex-col gap-4" onSubmit={handleSubmit}>
+      {step === 'type' ? (
+        <div className="grid gap-3">
+          <StepTitle
+            description={t('step_type_description')}
+            title={t('step_type')}
+          />
+          <ConversationTypeSelector
+            allowedTypes={effectiveAllowedTypes}
+            onTypeChange={(nextType) => {
+              setType(nextType);
+              if (nextType === 'direct') {
+                setSelectedUsers((current) => current.slice(0, 1));
+              }
+            }}
+            type={type}
+          />
+        </div>
+      ) : null}
+
+      {step === 'members' ? (
+        <div className="grid gap-3">
+          <StepTitle
+            description={
+              type === 'direct'
+                ? t('step_members_direct_description')
+                : t('step_members_group_description')
+            }
+            title={t('step_members')}
+          />
+          <DirectoryUserPicker
+            canCreateFriendRequest={conversationScope !== 'workspaces'}
+            directoryQuery={directoryQuery}
+            filteredUsers={filteredUsers}
+            isFetching={isFetching}
+            isCreatingFriendRequest={createFriendRequest.isPending}
+            onDirectoryQueryChange={setDirectoryQuery}
+            onCreateFriendRequest={handleCreateFriendRequest}
+            onRemoveUser={(userId) =>
+              setSelectedUsers((current) =>
+                current.filter((item) => item.id !== userId)
+              )
+            }
+            onSelectUser={(user) =>
+              setSelectedUsers((current) =>
+                type === 'direct' ? [user] : [...current, user]
+              )
+            }
+            selectedUsers={selectedUsers}
+          />
+        </div>
+      ) : null}
+
+      {step === 'details' ? (
+        <div className="grid gap-3">
+          <StepTitle
+            description={t('step_details_description')}
+            title={t('step_details')}
+          />
+          <Input
+            onChange={(event) => setTitle(event.target.value)}
+            placeholder={
+              type === 'channel'
+                ? t('channel_name_placeholder')
+                : type === 'ai'
+                  ? t('agent_name_placeholder')
+                  : t('group_name_placeholder')
+            }
+            value={title}
+          />
+          {(type === 'group' || type === 'channel' || type === 'ai') && (
+            <Textarea
+              className="min-h-24"
+              onChange={(event) => setDescription(event.target.value)}
+              placeholder={t('conversation_description_placeholder')}
+              value={description}
+            />
+          )}
+        </div>
+      ) : null}
+
+      <DialogFooter>
+        <Button
+          onClick={() => {
+            reset();
+            onOpenChange(false);
+          }}
+          type="button"
+          variant="outline"
+        >
+          {t('cancel')}
+        </Button>
+        {previousStep ? (
+          <Button
+            onClick={() => setStep(previousStep)}
+            type="button"
+            variant="outline"
+          >
+            {t('back')}
+          </Button>
+        ) : null}
+        {showSubmit ? (
+          <Button disabled={shouldDisableSubmit} type="submit">
+            {createConversation.isPending && (
+              <LoaderCircle className="size-4 animate-spin" />
+            )}
+            {t('create')}
+          </Button>
+        ) : (
+          <Button
+            disabled={!canContinue}
+            onClick={() => nextStep && setStep(nextStep)}
+            type="button"
+          >
+            {t('next')}
+          </Button>
+        )}
+      </DialogFooter>
+    </form>
+  );
 
   return (
     <Dialog
@@ -205,173 +346,38 @@ export function CreateConversationDialog({
       }}
     >
       <DialogContent className="max-h-[min(42rem,calc(100vh-2rem))] overflow-hidden sm:max-w-2xl">
-        <form className="flex min-h-0 flex-col gap-4" onSubmit={handleSubmit}>
-          <DialogHeader>
-            <DialogTitle>{t('new_conversation')}</DialogTitle>
-            <DialogDescription>
-              {t('new_conversation_description')}
-            </DialogDescription>
-          </DialogHeader>
-
-          {step === 'type' ? (
-            <div className="grid gap-3">
-              <StepTitle
-                description={t('step_type_description')}
-                title={t('step_type')}
-              />
-              <ConversationTypeSelector
-                allowedTypes={effectiveAllowedTypes}
-                onTypeChange={(nextType) => {
-                  setType(nextType);
-                  if (nextType === 'direct') {
-                    setSelectedUsers((current) => current.slice(0, 1));
-                  }
-                }}
-                type={type}
-              />
-            </div>
-          ) : null}
-
-          {step === 'members' ? (
-            <div className="grid gap-3">
-              <StepTitle
-                description={
-                  type === 'direct'
-                    ? t('step_members_direct_description')
-                    : t('step_members_group_description')
-                }
-                title={t('step_members')}
-              />
-              <DirectoryUserPicker
-                canCreateFriendRequest={conversationScope !== 'workspaces'}
-                directoryQuery={directoryQuery}
-                filteredUsers={filteredUsers}
-                isFetching={isFetching}
-                isCreatingFriendRequest={createFriendRequest.isPending}
-                onDirectoryQueryChange={setDirectoryQuery}
-                onCreateFriendRequest={handleCreateFriendRequest}
-                onRemoveUser={(userId) =>
-                  setSelectedUsers((current) =>
-                    current.filter((item) => item.id !== userId)
-                  )
-                }
-                onSelectUser={(user) =>
-                  setSelectedUsers((current) =>
-                    type === 'direct' ? [user] : [...current, user]
-                  )
-                }
-                selectedUsers={selectedUsers}
-              />
-            </div>
-          ) : null}
-
-          {step === 'details' ? (
-            <div className="grid gap-3">
-              <StepTitle
-                description={t('step_details_description')}
-                title={t('step_details')}
-              />
-              <Input
-                onChange={(event) => setTitle(event.target.value)}
-                placeholder={
-                  type === 'channel'
-                    ? t('channel_name_placeholder')
-                    : type === 'ai'
-                      ? t('agent_name_placeholder')
-                      : t('group_name_placeholder')
-                }
-                value={title}
-              />
-              {(type === 'group' || type === 'channel' || type === 'ai') && (
-                <Textarea
-                  className="min-h-24"
-                  onChange={(event) => setDescription(event.target.value)}
-                  placeholder={t('conversation_description_placeholder')}
-                  value={description}
-                />
-              )}
-            </div>
-          ) : null}
+        <DialogHeader>
+          <DialogTitle>{t('new_conversation')}</DialogTitle>
+          <DialogDescription>
+            {t('new_conversation_description')}
+          </DialogDescription>
+        </DialogHeader>
 
-          <DialogFooter>
-            <Button
-              onClick={() => {
-                reset();
-                onOpenChange(false);
-              }}
-              type="button"
-              variant="outline"
-            >
-              {t('cancel')}
-            </Button>
-            {previousStep ? (
-              <Button
-                onClick={() => setStep(previousStep)}
-                type="button"
-                variant="outline"
-              >
-                {t('back')}
-              </Button>
-            ) : null}
-            {showSubmit ? (
-              <Button disabled={shouldDisableSubmit} type="submit">
-                {createConversation.isPending && (
-                  <LoaderCircle className="size-4 animate-spin" />
-                )}
-                {t('create')}
-              </Button>
-            ) : (
-              <Button
-                disabled={!canContinue}
-                onClick={() => nextStep && setStep(nextStep)}
-                type="button"
-              >
-                {t('next')}
-              </Button>
-            )}
-          </DialogFooter>
-        </form>
+        {showRootIntegrations ? (
+          <Tabs
+            className="min-h-0"
+            onValueChange={(value) => setMode(value as CreateConversationMode)}
+            value={mode}
+          >
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="conversation">
+                {t('tab_conversations')}
+              </TabsTrigger>
+              <TabsTrigger value="integrations">
+                {t('tab_integrations')}
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent className="mt-4" value="conversation">
+              {conversationForm}
+            </TabsContent>
+            <TabsContent className="mt-4" value="integrations">
+              <CreateIntegrationPanel onCreated={handleIntegrationCreated} />
+            </TabsContent>
+          </Tabs>
+        ) : (
+          conversationForm
+        )}
       </DialogContent>
     </Dialog>
   );
 }
-
-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>
-  );
-}
-
-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-integration-panel.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { LoaderCircle, MessageCircle, QrCode, Radio } from '@tuturuuu/icons';
+import type {
+  ChatIntegrationKind,
+  CreateChatIntegrationResponse,
+} from '@tuturuuu/internal-api';
+import { useTranslations } from 'next-intl';
+import { toast } from '../sonner';
+import { useCreateChatIntegration } from './hooks';
+
+type IntegrationCard = {
+  descriptionKey:
+    | 'integration_discord_description'
+    | 'integration_zalo_official_description'
+    | 'integration_zalo_personal_description';
+  icon: typeof MessageCircle;
+  kind: ChatIntegrationKind;
+  titleKey:
+    | 'integration_discord'
+    | 'integration_zalo_official'
+    | 'integration_zalo_personal';
+};
+
+const INTEGRATION_CARDS = [
+  {
+    descriptionKey: 'integration_discord_description',
+    icon: MessageCircle,
+    kind: 'discord',
+    titleKey: 'integration_discord',
+  },
+  {
+    descriptionKey: 'integration_zalo_official_description',
+    icon: Radio,
+    kind: 'zalo-official',
+    titleKey: 'integration_zalo_official',
+  },
+  {
+    descriptionKey: 'integration_zalo_personal_description',
+    icon: QrCode,
+    kind: 'zalo-personal',
+    titleKey: 'integration_zalo_personal',
+  },
+] as const satisfies IntegrationCard[];
+
+interface CreateIntegrationPanelProps {
+  onCreated: (result: CreateChatIntegrationResponse) => void;
+}
+
+export function CreateIntegrationPanel({
+  onCreated,
+}: CreateIntegrationPanelProps) {
+  const t = useTranslations('chat');
+  const createIntegration = useCreateChatIntegration();
+  const pendingKind = createIntegration.variables?.kind ?? null;
+
+  function create(kind: ChatIntegrationKind) {
+    createIntegration.mutate(
+      { kind },
+      {
+        onError: () => {
+          toast.error(t('integration_create_failed'));
+        },
+        onSuccess: (result) => {
+          toast.success(t('integration_create_success'));
+          onCreated(result);
+        },
+      }
+    );
+  }
+
+  return (
+    <div className="grid gap-3">
+      {INTEGRATION_CARDS.map((item) => {
+        const Icon = item.icon;
+        const isPending =
+          createIntegration.isPending && pendingKind === item.kind;
+
+        return (
+          <button
+            className="group flex min-h-24 w-full items-start gap-3 rounded-md border bg-background p-4 text-left transition-colors hover:border-foreground/35 hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60"
+            disabled={createIntegration.isPending}
+            key={item.kind}
+            onClick={() => create(item.kind)}
+            type="button"
+          >
+            <span className="flex size-9 shrink-0 items-center justify-center rounded-md border bg-muted text-muted-foreground group-hover:text-foreground">
+              {isPending ? (
+                <LoaderCircle className="size-4 animate-spin" />
+              ) : (
+                <Icon className="size-4" />
+              )}
+            </span>
+            <span className="min-w-0 flex-1">
+              <span className="block font-medium text-sm">
+                {t(item.titleKey)}
+              </span>
+              <span className="mt-1 block text-muted-foreground text-xs leading-5">
+                {t(item.descriptionKey)}
+              </span>
+            </span>
+            <span className="shrink-0 self-center rounded-md border px-2.5 py-1 font-medium text-xs">
+              {t('integration_setup')}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}