@tuturuuu/ui 0.0.4 → 0.1.0

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

@@ -0,0 +1,575 @@
+'use client';
+
+import { Plus } from '@tuturuuu/icons';
+import type {
+  ChatAttachment,
+  ChatAttachmentDraft,
+  ChatConversation,
+} from '@tuturuuu/internal-api';
+import { cn } from '@tuturuuu/utils/format';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { toast } from '../sonner';
+import { ChatAgentDetailsSidebar } from './chat-agent-details-sidebar';
+import { ChatAiDetailsSidebar } from './chat-ai-details-sidebar';
+import { ChatSharedContentSidebar } from './chat-shared-content-sidebar';
+import { ChatConversationFilterMenu, ChatSidebar } from './chat-sidebar';
+import { ChatHeader, EmptyConversationState } from './chat-workspace-header';
+import { CreateConversationDialog } from './create-conversation-dialog';
+import { FriendRequestsButton } from './friend-requests-button';
+import {
+  flattenChatConversationPages,
+  flattenChatMessagePages,
+  useChatMessageSearch,
+  useChatRealtime,
+  useDeleteChatConversation,
+  useDeleteChatMessage,
+  useGenerateChatConversationTitle,
+  useInfiniteChatConversations,
+  useInfiniteChatMessages,
+  useMarkChatConversationRead,
+  useOpenChatAttachment,
+  useSendChatMessage,
+  useToggleChatReaction,
+  useUpdateChatConversation,
+  useUploadChatAttachment,
+} from './hooks';
+import { MessageComposer } from './message-composer';
+import { MessageList } from './message-list';
+import {
+  CHAT_CONVERSATION_TYPE_FILTERS,
+  type ChatConversationArchiveFilter,
+  type ChatConversationScope,
+  filterChatConversations,
+  getChatConversationTypesForScope,
+  getChatSelectionStorageKey,
+  getConversationTitle,
+  isReadOnlyChatConversation,
+  normalizeChatConversationScope,
+  resolveChatConversationSelection,
+} from './utils';
+
+interface ChatWorkspaceProps {
+  className?: string;
+  defaultConversationScope?: ChatConversationScope;
+  currentUserId: string;
+  showSidebar?: boolean;
+  variant?: 'standalone' | 'web';
+  wsId: string;
+}
+
+export function ChatWorkspace({
+  className,
+  defaultConversationScope,
+  currentUserId,
+  showSidebar = true,
+  variant = 'web',
+  wsId,
+}: ChatWorkspaceProps) {
+  const t = useTranslations('chat');
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [searchValue, setSearchValue] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+  const [sharedContentOpen, setSharedContentOpen] = useState(false);
+  const [archiveFilter, setArchiveFilter] =
+    useState<ChatConversationArchiveFilter>('active');
+  const [storedConversationId, setStoredConversationId] = useState<
+    string | null
+  >(null);
+  const [storedSelectionLoaded, setStoredSelectionLoaded] = useState(false);
+  const [selectedTypes, setSelectedTypes] = useState<
+    ChatConversation['type'][]
+  >([...CHAT_CONVERSATION_TYPE_FILTERS]);
+  const conversationsQuery = useInfiniteChatConversations({
+    archived: archiveFilter,
+    wsId,
+  });
+  const allConversations = flattenChatConversationPages(
+    conversationsQuery.data
+  );
+  const requestedScope = searchParams.get('scope');
+  const conversationScope =
+    requestedScope || defaultConversationScope
+      ? normalizeChatConversationScope(
+          requestedScope ?? defaultConversationScope
+        )
+      : null;
+  const conversations = conversationScope
+    ? filterChatConversations({
+        archiveFilter,
+        conversations: allConversations,
+        scope: conversationScope,
+        types: selectedTypes,
+      })
+    : allConversations;
+  const conversationIdList = useMemo(
+    () => conversations.map((conversation) => conversation.id),
+    [conversations]
+  );
+  const conversationIds = useMemo(
+    () => new Set(conversationIdList),
+    [conversationIdList]
+  );
+  const requestedConversationId = searchParams.get('conversationId');
+  const selectionStorageKey = conversationScope
+    ? getChatSelectionStorageKey(wsId, conversationScope)
+    : null;
+  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 activeConversationId = selectedConversation?.id ?? null;
+  const activeNativeConversationId = isPostgresUuid(activeConversationId)
+    ? activeConversationId
+    : null;
+  const selectedReadOnly = isReadOnlyChatConversation(selectedConversation);
+  const selectedAiConversation = selectedConversation?.type === 'ai';
+  const selectedAgentReadOnly =
+    (selectedConversation?.metadata.source === 'ai-agent' ||
+      selectedConversation?.metadata.source === 'ai-agent-external-thread') &&
+    selectedReadOnly;
+  const selectedVirtualReadOnly =
+    selectedConversation?.metadata.source === 'ai-agent' && selectedReadOnly;
+  const selectedMembership =
+    selectedConversation?.members.some(
+      (member) => member.userId === currentUserId
+    ) ?? false;
+  const messagesQuery = useInfiniteChatMessages({
+    conversationId: selectedVirtualReadOnly ? null : activeConversationId,
+    wsId,
+  });
+  const messages = selectedVirtualReadOnly
+    ? selectedConversation?.latestMessage
+      ? [selectedConversation.latestMessage]
+      : []
+    : flattenChatMessagePages(messagesQuery.data);
+  const sendMessage = useSendChatMessage({
+    conversationId: activeConversationId,
+    currentUserId,
+    streamAssistant: selectedAiConversation,
+    wsId,
+  });
+  const deleteConversation = useDeleteChatConversation(wsId);
+  const updateConversation = useUpdateChatConversation(wsId);
+  const generateConversationTitle = useGenerateChatConversationTitle(wsId);
+  const uploadAttachment = useUploadChatAttachment({
+    conversationId: activeConversationId,
+    wsId,
+  });
+  const openAttachment = useOpenChatAttachment({
+    conversationId: activeConversationId,
+    wsId,
+  });
+  const toggleReaction = useToggleChatReaction({
+    conversationId: activeConversationId,
+    wsId,
+  });
+  const deleteMessage = useDeleteChatMessage({
+    conversationId: activeConversationId,
+    wsId,
+  });
+  const { mutate: markConversationRead } = useMarkChatConversationRead({
+    conversationId: activeConversationId,
+    wsId,
+  });
+  const searchQuery = useChatMessageSearch({
+    query: searchValue,
+    wsId,
+  });
+  const searchResults = (searchQuery.data ?? []).filter(
+    (message) =>
+      !conversationScope ||
+      conversations.some(
+        (conversation) => conversation.id === message.conversationId
+      )
+  );
+  const latestMessageId = messages.at(-1)?.id ?? null;
+  const latestPersistedMessageId = isPostgresUuid(latestMessageId)
+    ? latestMessageId
+    : null;
+  const detailsOpen = Boolean(sharedContentOpen && activeConversationId);
+
+  useChatRealtime(wsId);
+
+  useEffect(() => {
+    setStoredSelectionLoaded(false);
+    if (!selectionStorageKey) {
+      setStoredConversationId(null);
+      setStoredSelectionLoaded(true);
+      return;
+    }
+
+    setStoredConversationId(localStorage.getItem(selectionStorageKey));
+    setStoredSelectionLoaded(true);
+  }, [selectionStorageKey]);
+
+  useEffect(() => {
+    if (!activeConversationId) return;
+    if (!storedSelectionLoaded && !requestedConversationId) return;
+
+    if (selectionStorageKey) {
+      localStorage.setItem(selectionStorageKey, activeConversationId);
+    }
+
+    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
+    );
+  }, [
+    activeConversationId,
+    pathname,
+    requestedConversationId,
+    searchParams,
+    selectionStorageKey,
+    storedSelectionLoaded,
+  ]);
+
+  useEffect(() => {
+    if (selectedReadOnly) return;
+    if (!selectedMembership) return;
+    if (!activeNativeConversationId || !latestPersistedMessageId) return;
+    markConversationRead(latestPersistedMessageId);
+  }, [
+    activeNativeConversationId,
+    latestPersistedMessageId,
+    markConversationRead,
+    selectedMembership,
+    selectedReadOnly,
+  ]);
+
+  const selectedTitle = selectedConversation
+    ? getConversationTitle(selectedConversation, currentUserId, {
+        ai: t('assistant_name'),
+        channel: t('untitled_channel'),
+        chat: t('untitled_chat'),
+        direct: t('direct_message'),
+        group: t('group_chat'),
+      })
+    : t('title');
+
+  async function handleSend(payload: {
+    attachments: ChatAttachmentDraft[];
+    content: string;
+  }) {
+    try {
+      const result = await sendMessage.mutateAsync({
+        attachments: payload.attachments,
+        content: payload.content,
+      });
+
+      if (result.assistantError) {
+        toast.error(t('assistant_response_failed'));
+      }
+    } catch (error) {
+      toast.error(t('message_send_failed'));
+      throw error;
+    }
+  }
+
+  async function handleOpenAttachment(attachment: ChatAttachment) {
+    try {
+      await openAttachment.mutateAsync(attachment.id);
+    } catch {
+      toast.error(t('attachment_open_failed'));
+    }
+  }
+
+  async function handleDeleteMessage(messageId: string) {
+    try {
+      await deleteMessage.mutateAsync(messageId);
+      toast.success(t('message_deleted_success'));
+    } catch {
+      toast.error(t('message_delete_failed'));
+    }
+  }
+
+  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 handleCreated(conversation: ChatConversation) {
+    selectConversation(conversation.id);
+  }
+
+  function toggleType(type: ChatConversation['type']) {
+    setSelectedTypes((current) => {
+      if (current.includes(type)) {
+        const next = current.filter((item) => item !== type);
+        return next.length > 0 ? next : current;
+      }
+
+      return [...current, type];
+    });
+  }
+
+  async function handleDeleteConversation() {
+    if (!selectedConversation) return;
+    await archiveConversation(selectedConversation.id, true);
+  }
+
+  async function handleArchiveConversation(conversationId: string) {
+    await archiveConversation(
+      conversationId,
+      conversationId === activeConversationId
+    );
+  }
+
+  async function archiveConversation(
+    conversationId: string,
+    clearSelection: boolean
+  ) {
+    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
+        );
+      }
+      toast.success(t('conversation_archived'));
+    } catch {
+      toast.error(t('conversation_archive_failed'));
+    }
+  }
+
+  async function handlePinConversation(
+    conversationId: string,
+    pinned: boolean
+  ) {
+    try {
+      await updateConversation.mutateAsync({
+        conversationId,
+        payload: { pinned },
+      });
+      toast.success(
+        pinned ? t('conversation_pinned') : t('conversation_unpinned')
+      );
+    } catch {
+      toast.error(t('conversation_update_failed'));
+    }
+  }
+
+  async function handleUpdateConversation(payload: {
+    description?: string | null;
+    title?: string | null;
+  }) {
+    if (!selectedConversation) return;
+
+    try {
+      await updateConversation.mutateAsync({
+        conversationId: selectedConversation.id,
+        payload,
+      });
+      toast.success(t('conversation_updated'));
+    } catch {
+      toast.error(t('conversation_update_failed'));
+    }
+  }
+
+  async function handleGenerateConversationTitle() {
+    if (!selectedConversation) return;
+
+    try {
+      await generateConversationTitle.mutateAsync(selectedConversation.id);
+      toast.success(t('conversation_updated'));
+    } catch (error) {
+      toast.error(t('conversation_title_generate_failed'));
+      throw error;
+    }
+  }
+
+  return (
+    <section
+      className={cn(
+        'flex h-full min-h-[calc(100vh-9rem)] overflow-hidden rounded-md border bg-background text-foreground',
+        variant === 'standalone' && 'min-h-dvh rounded-none border-0',
+        className
+      )}
+    >
+      {showSidebar ? (
+        <ChatSidebar
+          actions={
+            <Button
+              aria-label={t('new_conversation')}
+              onClick={() => setCreateOpen(true)}
+              size="icon"
+              type="button"
+            >
+              <Plus className="size-4" />
+            </Button>
+          }
+          archiveFilter={archiveFilter}
+          conversations={conversations}
+          currentUserId={currentUserId}
+          filters={
+            <ChatConversationFilterMenu
+              archiveFilter={archiveFilter}
+              onArchiveFilterChange={setArchiveFilter}
+              onTypeToggle={toggleType}
+              selectedTypes={selectedTypes}
+            />
+          }
+          headerActions={
+            conversationScope === 'personal' ? (
+              <FriendRequestsButton currentUserId={currentUserId} wsId={wsId} />
+            ) : null
+          }
+          hasMoreConversations={conversationsQuery.hasNextPage}
+          isLoading={conversationsQuery.isLoading}
+          isFetchingMoreConversations={conversationsQuery.isFetchingNextPage}
+          onArchiveConversation={handleArchiveConversation}
+          onLoadMoreConversations={() => conversationsQuery.fetchNextPage()}
+          onPinConversation={handlePinConversation}
+          onSearchChange={setSearchValue}
+          onSelectConversation={selectConversation}
+          searchResults={searchResults}
+          searchValue={searchValue}
+          selectedConversationId={activeConversationId}
+          scope={conversationScope ?? undefined}
+        />
+      ) : null}
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <ChatHeader
+          conversation={selectedConversation}
+          currentUserId={currentUserId}
+          isDeletingConversation={deleteConversation.isPending}
+          isFetching={messagesQuery.isFetching}
+          isGeneratingConversationTitle={generateConversationTitle.isPending}
+          isUpdatingConversation={updateConversation.isPending}
+          onDeleteConversation={handleDeleteConversation}
+          onGenerateConversationTitle={handleGenerateConversationTitle}
+          onToggleSharedContent={() =>
+            setSharedContentOpen((current) => !current)
+          }
+          onUpdateConversation={handleUpdateConversation}
+          sharedContentOpen={sharedContentOpen}
+          title={selectedTitle}
+        />
+
+        {selectedConversation ? (
+          <>
+            <MessageList
+              currentUserId={currentUserId}
+              hasMoreMessages={messagesQuery.hasNextPage}
+              isLoading={messagesQuery.isLoading}
+              isLoadingMoreMessages={messagesQuery.isFetchingNextPage}
+              isAgentTyping={selectedAiConversation && sendMessage.isPending}
+              messages={messages}
+              onDeleteMessage={handleDeleteMessage}
+              onLoadMoreMessages={() => messagesQuery.fetchNextPage()}
+              onOpenAttachment={handleOpenAttachment}
+              onToggleReaction={
+                selectedReadOnly || selectedAiConversation
+                  ? undefined
+                  : (messageId, emoji) =>
+                      toggleReaction.mutate({ emoji, messageId })
+              }
+              readOnly={selectedReadOnly}
+              wsId={wsId}
+            />
+            {selectedReadOnly ? (
+              <div className="flex items-center justify-between gap-3 border-t bg-muted/25 px-4 py-3 text-sm">
+                <span className="text-muted-foreground">
+                  {t('read_only_conversation')}
+                </span>
+                <Badge variant="secondary">{t('agent_channel')}</Badge>
+              </div>
+            ) : (
+              <MessageComposer
+                disabled={!activeConversationId}
+                isSending={sendMessage.isPending}
+                isUploading={uploadAttachment.isPending}
+                onSend={handleSend}
+                onUploadFile={(file) => uploadAttachment.mutateAsync(file)}
+              />
+            )}
+          </>
+        ) : (
+          <EmptyConversationState onCreate={() => setCreateOpen(true)} />
+        )}
+      </div>
+
+      {selectedAgentReadOnly ? (
+        <ChatAgentDetailsSidebar
+          conversation={selectedConversation}
+          open={detailsOpen}
+        />
+      ) : selectedAiConversation ? (
+        <ChatAiDetailsSidebar
+          conversationId={activeConversationId}
+          onOpenAttachment={handleOpenAttachment}
+          open={detailsOpen}
+          wsId={wsId}
+        />
+      ) : (
+        <ChatSharedContentSidebar
+          conversationId={activeConversationId}
+          onOpenAttachment={handleOpenAttachment}
+          open={detailsOpen}
+          wsId={wsId}
+        />
+      )}
+
+      <CreateConversationDialog
+        allowedTypes={
+          conversationScope
+            ? getChatConversationTypesForScope(conversationScope)
+            : undefined
+        }
+        conversationScope={conversationScope ?? undefined}
+        defaultType={
+          conversationScope
+            ? getChatConversationTypesForScope(conversationScope)[0]
+            : undefined
+        }
+        currentUserId={currentUserId}
+        onCreated={handleCreated}
+        onOpenChange={setCreateOpen}
+        open={createOpen}
+        wsId={wsId}
+      />
+    </section>
+  );
+}
+
+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;
+
+function isPostgresUuid(value: string | null): value is string {
+  return Boolean(value && POSTGRES_UUID_PATTERN.test(value));
+}

package/src/components/ui/chat/conversation-type-selector.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Bot, Hash, MessageCircle, Users } from '@tuturuuu/icons';
+import type { ChatConversationType } from '@tuturuuu/internal-api';
+import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+
+const conversationTypes: ChatConversationType[] = [
+  'direct',
+  'group',
+  'channel',
+  'ai',
+];
+
+export function ConversationTypeSelector({
+  allowedTypes = conversationTypes,
+  onTypeChange,
+  type,
+}: {
+  allowedTypes?: ChatConversationType[];
+  onTypeChange: (type: ChatConversationType) => void;
+  type: ChatConversationType;
+}) {
+  const t = useTranslations('chat');
+
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      {allowedTypes.map((item) => (
+        <button
+          className={cn(
+            'flex h-24 flex-col items-center justify-center gap-2 rounded-md border bg-background text-sm transition-colors hover:bg-accent',
+            item === type && 'border-primary bg-accent'
+          )}
+          key={item}
+          onClick={() => onTypeChange(item)}
+          type="button"
+        >
+          {getTypeIcon(item)}
+          <span>{t(`type_${item}`)}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function getTypeIcon(type: ChatConversationType) {
+  if (type === 'direct') return <MessageCircle className="size-5" />;
+  if (type === 'group') return <Users className="size-5" />;
+  if (type === 'channel') return <Hash className="size-5" />;
+  return <Bot className="size-5" />;
+}

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

@@ -0,0 +1,89 @@
+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 { CreateConversationDialog } from './create-conversation-dialog';
+
+const mocks = vi.hoisted(() => ({
+  createConversation: vi.fn(),
+  createFriendRequest: vi.fn(),
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('./hooks', () => ({
+  useChatDirectory: () => ({
+    data: [],
+    isFetching: false,
+  }),
+  useCreateChatConversation: () => ({
+    isPending: false,
+    mutateAsync: mocks.createConversation,
+  }),
+  useCreateChatFriendRequest: () => ({
+    isPending: false,
+    mutateAsync: mocks.createFriendRequest,
+  }),
+}));
+
+const createdConversation: ChatConversation = {
+  aiEnabled: true,
+  archivedAt: null,
+  createdAt: '2026-06-02T00:00:00.000Z',
+  createdBy: 'user-1',
+  description: null,
+  id: 'conversation-1',
+  latestMessage: null,
+  memberCount: 1,
+  members: [],
+  metadata: {
+    source: 'personal-ai-chat',
+  },
+  title: null,
+  type: 'ai',
+  unreadCount: 0,
+  updatedAt: '2026-06-02T00:00:00.000Z',
+  wsId: 'personal-workspace-1',
+};
+
+describe('CreateConversationDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.createConversation.mockResolvedValue({
+      conversation: createdConversation,
+    });
+  });
+
+  it('creates personal AI chats with personal AI metadata', async () => {
+    const onCreated = vi.fn();
+
+    render(
+      <CreateConversationDialog
+        conversationScope="personal"
+        currentUserId="user-1"
+        onCreated={onCreated}
+        onOpenChange={vi.fn()}
+        open
+        wsId="personal-workspace-1"
+      />
+    );
+
+    fireEvent.click(screen.getByText('type_ai'));
+    fireEvent.click(screen.getByText('next'));
+    fireEvent.click(screen.getByText('create'));
+
+    await waitFor(() => {
+      expect(mocks.createConversation).toHaveBeenCalledWith(
+        expect.objectContaining({
+          aiEnabled: true,
+          metadata: {
+            source: 'personal-ai-chat',
+          },
+          type: 'ai',
+        })
+      );
+    });
+    expect(onCreated).toHaveBeenCalledWith(createdConversation);
+  });
+});