@tuturuuu/ui 0.3.2 → 0.4.1

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,
@@ -16,6 +17,7 @@ import {
   filterChatConversationsByScope,
   getChatConversationTypesForScope,
   getChatSelectionStorageKey,
+  getChatSourceGroupStorageKey,
   normalizeChatConversationScope,
   resolveChatConversationSelection,
 } from './utils';
@@ -26,6 +28,7 @@ interface ChatSidebarPanelProps {
   createOpen?: boolean;
   currentUserId: string;
   defaultConversationScope?: ChatConversationScope;
+  enableRootIntegrations?: boolean;
   isCollapsed: boolean;
   onCreateOpenChange?: (open: boolean) => void;
   onSearchChange?: (value: string) => void;
@@ -40,6 +43,7 @@ export function ChatSidebarPanel({
   createOpen: controlledCreateOpen,
   currentUserId,
   defaultConversationScope = 'personal',
+  enableRootIntegrations,
   isCollapsed,
   onCreateOpenChange,
   onSearchChange,
@@ -48,6 +52,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 +106,15 @@ export function ChatSidebarPanel({
     wsId,
     conversationScope
   );
+  const sourceGroupStorageKey = getChatSourceGroupStorageKey(
+    wsId,
+    conversationScope
+  );
+  const requestedConversationPending = Boolean(
+    requestedConversationId &&
+      !scopedConversationIdList.includes(requestedConversationId) &&
+      conversationsQuery.isFetching
+  );
   const selectedConversationId = resolveChatConversationSelection({
     conversationIds: scopedConversationIdList,
     requestedConversationId,
@@ -116,37 +130,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?.();
   }
 
@@ -176,6 +194,7 @@ export function ChatSidebarPanel({
         selectedConversationId={selectedConversationId}
         showControls={false}
         showTitle={false}
+        sourceGroupStorageKey={sourceGroupStorageKey}
         scope={conversationScope}
       />
       <CreateConversationDialog
@@ -183,7 +202,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-sections.ts

@@ -0,0 +1,199 @@
+import type { ChatConversation } from '@tuturuuu/internal-api';
+import type { ChatConversationScope } from './utils';
+
+export type ChatConversationSectionLabels = {
+  ai: string;
+  channel: string;
+  direct: string;
+  group: string;
+};
+
+export type ChatConversationSourceLabels = {
+  external: string;
+  zaloPersonal: string;
+};
+
+export interface ChatConversationSourceGroup {
+  conversations: ChatConversation[];
+  id: string;
+  label: string;
+}
+
+export interface ChatConversationSection {
+  conversations: ChatConversation[];
+  label: string | null;
+  sectionType: ChatConversation['type'];
+  sourceGroups: ChatConversationSourceGroup[];
+}
+
+const DEFAULT_SOURCE_LABELS = {
+  external: 'External source',
+  zaloPersonal: 'Zalo Personal',
+} as const satisfies ChatConversationSourceLabels;
+
+export function getChatConversationSections({
+  conversations,
+  labels,
+  scope,
+  sourceLabels = DEFAULT_SOURCE_LABELS,
+}: {
+  conversations: ChatConversation[];
+  labels: ChatConversationSectionLabels;
+  scope?: ChatConversationScope;
+  sourceLabels?: ChatConversationSourceLabels;
+}): ChatConversationSection[] {
+  if (scope === 'workspaces') {
+    return [
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'channel'
+        ),
+        label: labels.channel,
+        sectionType: 'channel',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'ai'
+        ),
+        label: labels.ai,
+        sectionType: 'ai',
+        sourceLabels,
+      }),
+    ];
+  }
+
+  if (scope === 'personal') {
+    return [
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'direct'
+        ),
+        label: labels.direct,
+        sectionType: 'direct',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'group'
+        ),
+        label: labels.group,
+        sectionType: 'group',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'channel'
+        ),
+        label: labels.channel,
+        sectionType: 'channel',
+        sourceLabels,
+      }),
+      createChatConversationSection({
+        conversations: conversations.filter(
+          (conversation) => conversation.type === 'ai'
+        ),
+        label: labels.ai,
+        sectionType: 'ai',
+        sourceLabels,
+      }),
+    ];
+  }
+
+  return [
+    createChatConversationSection({
+      conversations,
+      label: null,
+      sectionType: 'direct',
+      sourceLabels,
+    }),
+  ];
+}
+
+export function getChatConversationSourceGroups({
+  conversations,
+  labels = DEFAULT_SOURCE_LABELS,
+}: {
+  conversations: ChatConversation[];
+  labels?: ChatConversationSourceLabels;
+}) {
+  const groups = new Map<string, ChatConversationSourceGroup>();
+
+  for (const conversation of conversations) {
+    const sourceGroup = getChatConversationSourceGroup(conversation, labels);
+
+    if (!sourceGroup) continue;
+
+    const group = groups.get(sourceGroup.id);
+
+    if (group) {
+      group.conversations.push(conversation);
+    } else {
+      groups.set(sourceGroup.id, {
+        ...sourceGroup,
+        conversations: [conversation],
+      });
+    }
+  }
+
+  return [...groups.values()];
+}
+
+function createChatConversationSection({
+  conversations,
+  label,
+  sectionType,
+  sourceLabels,
+}: {
+  conversations: ChatConversation[];
+  label: string | null;
+  sectionType: ChatConversation['type'];
+  sourceLabels: ChatConversationSourceLabels;
+}): ChatConversationSection {
+  const sourceGroups = getChatConversationSourceGroups({
+    conversations,
+    labels: sourceLabels,
+  });
+  const sourceConversationIds = new Set(
+    sourceGroups.flatMap((group) =>
+      group.conversations.map((conversation) => conversation.id)
+    )
+  );
+
+  return {
+    conversations: conversations.filter(
+      (conversation) => !sourceConversationIds.has(conversation.id)
+    ),
+    label,
+    sectionType,
+    sourceGroups,
+  };
+}
+
+function getChatConversationSourceGroup(
+  conversation: ChatConversation,
+  labels: ChatConversationSourceLabels
+): Omit<ChatConversationSourceGroup, 'conversations'> | null {
+  const metadata = conversation.metadata ?? {};
+
+  if (metadata.source !== 'ai-agent-external-thread') return null;
+
+  const adapter = readString(metadata.adapter);
+
+  if (adapter !== 'zalo') return null;
+
+  const agentId = readString(metadata.agentId) ?? 'unknown-agent';
+  const channelId =
+    readString(metadata.channelId) ??
+    readString(metadata.externalChannelId) ??
+    'unknown-channel';
+
+  return {
+    id: `external:${adapter}:${agentId}:${channelId}`,
+    label: labels.zaloPersonal,
+  };
+}
+
+function readString(value: unknown) {
+  return typeof value === 'string' && value.trim() ? value.trim() : null;
+}

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { useVirtualizer } from '@tanstack/react-virtual';
 import {
   Bot,
   Funnel,
@@ -13,7 +12,7 @@ import {
 import type { ChatConversation, ChatMessage } from '@tuturuuu/internal-api';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
-import { type ReactNode, type UIEvent, useMemo, useRef, useState } from 'react';
+import { type ReactNode, useState } from 'react';
 import { Button } from '../button';
 import {
   DropdownMenu,
@@ -24,12 +23,18 @@ import {
   DropdownMenuTrigger,
 } from '../dropdown-menu';
 import { Input } from '../input';
-import { ConversationRow, SearchResultList } from './chat-sidebar-items';
+import { ConversationGroups } from './chat-sidebar-conversation-groups';
+import { SearchResultList } from './chat-sidebar-items';
 import type {
   ChatConversationArchiveFilter,
   ChatConversationScope,
 } from './utils';
 
+export {
+  getChatConversationSections,
+  getChatConversationSourceGroups,
+} from './chat-sidebar-sections';
+
 interface ChatSidebarProps {
   actions?: ReactNode;
   archiveFilter?: ChatConversationArchiveFilter;
@@ -51,6 +56,7 @@ interface ChatSidebarProps {
   scope?: ChatConversationScope;
   showControls?: boolean;
   showTitle?: boolean;
+  sourceGroupStorageKey?: string | null;
   searchValue: string;
   selectedConversationId?: string | null;
 }
@@ -76,6 +82,7 @@ export function ChatSidebar({
   scope,
   showControls = true,
   showTitle = true,
+  sourceGroupStorageKey,
   searchValue,
   selectedConversationId,
 }: ChatSidebarProps) {
@@ -154,6 +161,7 @@ export function ChatSidebar({
             archiveFilter={archiveFilter}
             scope={scope}
             selectedConversationId={selectedConversationId}
+            sourceGroupStorageKey={sourceGroupStorageKey}
           />
         ) : (
           <div className="p-6 text-center">
@@ -171,254 +179,6 @@ export function ChatSidebar({
   );
 }
 
-type ConversationListItem =
-  | { key: string; label: string; type: 'archive-label' }
-  | {
-      key: string;
-      label: string;
-      sectionType: ChatConversation['type'];
-      type: 'group-label';
-    }
-  | { conversation: ChatConversation; key: string; type: 'conversation' }
-  | { key: string; type: 'loader' };
-
-type ChatConversationSectionLabels = {
-  ai: string;
-  channel: string;
-  direct: string;
-  group: string;
-};
-
-export function getChatConversationSections({
-  conversations,
-  labels,
-  scope,
-}: {
-  conversations: ChatConversation[];
-  labels: ChatConversationSectionLabels;
-  scope?: ChatConversationScope;
-}) {
-  if (scope === 'workspaces') {
-    return [
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'channel'
-        ),
-        label: labels.channel,
-        sectionType: 'channel' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'ai'
-        ),
-        label: labels.ai,
-        sectionType: 'ai' as const,
-      },
-    ];
-  }
-
-  if (scope === 'personal') {
-    return [
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'direct'
-        ),
-        label: labels.direct,
-        sectionType: 'direct' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'group'
-        ),
-        label: labels.group,
-        sectionType: 'group' as const,
-      },
-      {
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'ai'
-        ),
-        label: labels.ai,
-        sectionType: 'ai' as const,
-      },
-    ];
-  }
-
-  return [
-    {
-      conversations,
-      label: null,
-      sectionType: 'direct' as const,
-    },
-  ];
-}
-
-function ConversationGroups({
-  archiveFilter,
-  conversations,
-  currentUserId,
-  hasMoreConversations,
-  isFetchingMoreConversations,
-  onArchiveConversation,
-  onLoadMoreConversations,
-  onPinConversation,
-  onSelectConversation,
-  scope,
-  selectedConversationId,
-}: {
-  archiveFilter: ChatConversationArchiveFilter;
-  conversations: ChatConversation[];
-  currentUserId: string;
-  hasMoreConversations?: boolean;
-  isFetchingMoreConversations?: boolean;
-  onArchiveConversation?: (conversationId: string) => void;
-  onLoadMoreConversations?: () => Promise<unknown> | undefined;
-  onPinConversation?: (conversationId: string, pinned: boolean) => void;
-  onSelectConversation: (conversationId: string) => void;
-  scope?: ChatConversationScope;
-  selectedConversationId?: string | null;
-}) {
-  const t = useTranslations('chat');
-  const parentRef = useRef<HTMLDivElement | null>(null);
-  const groups = useMemo(
-    () =>
-      getChatConversationSections({
-        conversations,
-        labels: {
-          ai: t('ai_agents'),
-          channel: t('channels'),
-          direct: t('direct_messages'),
-          group: t('groups'),
-        },
-        scope,
-      }),
-    [conversations, scope, t]
-  );
-  const items = useMemo<ConversationListItem[]>(() => {
-    const next: ConversationListItem[] = [];
-    if (archiveFilter !== 'active') {
-      next.push({
-        key: 'archive-label',
-        label:
-          archiveFilter === 'archived'
-            ? t('showing_archived_chats')
-            : t('showing_all_chats'),
-        type: 'archive-label',
-      });
-    }
-
-    for (const [index, group] of groups.entries()) {
-      if (group.conversations.length === 0) continue;
-      if (group.label) {
-        next.push({
-          key: `group-${group.label}-${index}`,
-          label: group.label,
-          sectionType: group.sectionType,
-          type: 'group-label',
-        });
-      }
-
-      for (const conversation of group.conversations) {
-        next.push({
-          conversation,
-          key: conversation.id,
-          type: 'conversation',
-        });
-      }
-    }
-
-    if (hasMoreConversations) next.push({ key: 'loader', type: 'loader' });
-    return next;
-  }, [archiveFilter, groups, hasMoreConversations, t]);
-
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    estimateSize: (index) => {
-      const item = items[index];
-      if (item?.type === 'conversation') return 36;
-      if (item?.type === 'loader') return 44;
-      return 30;
-    },
-    getItemKey: (index) => items[index]?.key ?? index,
-    getScrollElement: () => parentRef.current,
-    overscan: 8,
-  });
-  const virtualItems = virtualizer.getVirtualItems();
-
-  function maybeLoadMore(event: UIEvent<HTMLDivElement>) {
-    if (!(hasMoreConversations && onLoadMoreConversations)) return;
-    if (isFetchingMoreConversations) return;
-
-    const target = event.currentTarget;
-    const distanceToEnd =
-      target.scrollHeight - target.scrollTop - target.clientHeight;
-    if (distanceToEnd < 180) {
-      void onLoadMoreConversations();
-    }
-  }
-
-  return (
-    <div
-      className="h-full overflow-y-auto overflow-x-hidden overscroll-contain p-2"
-      onScroll={maybeLoadMore}
-      ref={parentRef}
-    >
-      <div
-        className="relative"
-        style={{ height: `${virtualizer.getTotalSize()}px` }}
-      >
-        {virtualItems.map((virtualItem) => {
-          const item = items[virtualItem.index];
-          if (!item) return null;
-
-          return (
-            <div
-              className="absolute inset-x-0 top-0"
-              data-index={virtualItem.index}
-              key={virtualItem.key}
-              ref={virtualizer.measureElement}
-              style={{ transform: `translateY(${virtualItem.start}px)` }}
-            >
-              {item.type === 'archive-label' ? (
-                <p className="px-2 py-1 text-muted-foreground text-xs">
-                  {item.label}
-                </p>
-              ) : item.type === 'group-label' ? (
-                <h3 className="flex items-center gap-1.5 px-2 py-1.5 font-medium text-muted-foreground text-xs uppercase">
-                  <ConversationSectionIcon type={item.sectionType} />
-                  {item.label}
-                </h3>
-              ) : item.type === 'loader' ? (
-                <div className="flex items-center justify-center py-2 text-muted-foreground text-xs">
-                  <LoaderCircle className="mr-2 size-3.5 animate-spin" />
-                  {t('loading_conversations')}
-                </div>
-              ) : (
-                <ConversationRow
-                  conversation={item.conversation}
-                  currentUserId={currentUserId}
-                  isSelected={item.conversation.id === selectedConversationId}
-                  onArchiveConversation={onArchiveConversation}
-                  onPinConversation={onPinConversation}
-                  onSelectConversation={onSelectConversation}
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function ConversationSectionIcon({ type }: { type: ChatConversation['type'] }) {
-  const className = 'size-3.5 shrink-0';
-
-  if (type === 'channel') return <Hash className={className} />;
-  if (type === 'ai') return <Bot className={className} />;
-  if (type === 'group') return <Users className={className} />;
-  return <MessageCircle className={className} />;
-}
-
 export function ChatConversationFilterMenu({
   archiveFilter,
   className,

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(
         [