@tuturuuu/ui 0.23.0 → 0.25.0

package/src/components/ui/chat/chat-sidebar-groups.test.ts

@@ -115,4 +115,37 @@ describe('chat sidebar conversation sections', () => {
       ],
     });
   });
+
+  it('groups connected-site conversations without exposing connector identity', () => {
+    const sections = getChatConversationSections({
+      conversations: [
+        conversation('channel', 'site-thread-1', { externalChat: true }),
+        conversation('channel', 'site-thread-2', { externalChat: true }),
+      ],
+      labels: {
+        ai: 'AI agents',
+        channel: 'Channels',
+        direct: 'Direct messages',
+        group: 'Groups',
+      },
+      scope: 'external',
+      sourceLabels: {
+        external: 'Connected sites',
+        zaloPersonal: 'Zalo Personal',
+      },
+    });
+
+    expect(sections).toMatchObject([
+      {
+        conversations: [],
+        sourceGroups: [
+          {
+            conversations: [{ id: 'site-thread-1' }, { id: 'site-thread-2' }],
+            id: 'external:connected-sites',
+            label: 'Connected sites',
+          },
+        ],
+      },
+    ]);
+  });
 });

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

@@ -3,14 +3,20 @@
 import { Archive, Pin, PinOff } from '@tuturuuu/icons';
 import type { ChatConversation, ChatMessage } from '@tuturuuu/internal-api';
 import { cn } from '@tuturuuu/utils/format';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { Button } from '../button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
-import { getConversationTitle, isChatConversationPinned } from './utils';
+import {
+  getChatConversationQueueDetails,
+  getChatMessageSenderLabel,
+  getConversationTitle,
+  isChatConversationPinned,
+} from './utils';
 
 export function ConversationRow({
   conversation,
   currentUserId,
+  isOnline,
   isSelected,
   onArchiveConversation,
   onPinConversation,
@@ -18,12 +24,14 @@ export function ConversationRow({
 }: {
   conversation: ChatConversation;
   currentUserId: string;
+  isOnline?: boolean;
   isSelected: boolean;
   onArchiveConversation?: (conversationId: string) => void;
   onPinConversation?: (conversationId: string, pinned: boolean) => void;
   onSelectConversation: (conversationId: string) => void;
 }) {
   const t = useTranslations('chat');
+  const locale = useLocale();
   const title = getConversationTitle(conversation, currentUserId, {
     ai: t('assistant_name'),
     channel: t('untitled_channel'),
@@ -32,6 +40,8 @@ export function ConversationRow({
     group: t('group_chat'),
   });
   const pinned = isChatConversationPinned(conversation, currentUserId);
+  const isExternal = conversation.metadata.externalChat === true;
+  const queueDetails = getChatConversationQueueDetails(conversation);
 
   return (
     <div
@@ -45,9 +55,39 @@ export function ConversationRow({
         onClick={() => onSelectConversation(conversation.id)}
         type="button"
       >
-        <span className="block min-w-0 truncate font-medium text-sm leading-5">
-          {title}
+        <span className="flex min-w-0 items-center justify-between gap-2 text-sm leading-5">
+          <span className="flex min-w-0 items-center gap-2 font-medium">
+            {isOnline ? (
+              <span
+                aria-label={t('online')}
+                className="size-2 shrink-0 rounded-full bg-primary"
+                role="status"
+              />
+            ) : null}
+            <span className="min-w-0 truncate">{title}</span>
+          </span>
+          {isExternal ? (
+            <span className="shrink-0 text-[11px] text-muted-foreground">
+              {formatQueueTimestamp(queueDetails.timestamp, locale)}
+            </span>
+          ) : null}
         </span>
+        {isExternal ? (
+          <>
+            <span className="mt-0.5 block truncate text-muted-foreground text-xs leading-4">
+              {queueDetails.preview ?? t('no_messages_yet')}
+            </span>
+            <span className="mt-0.5 flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground leading-4">
+              <DeliveryStateDot
+                label={t(`delivery_${queueDetails.deliveryState ?? 'sent'}`)}
+                state={queueDetails.deliveryState ?? 'sent'}
+              />
+              <span className="truncate">
+                {queueDetails.phone ?? t('external_sender')}
+              </span>
+            </span>
+          </>
+        ) : null}
       </button>
       <ConversationUnreadState unreadCount={conversation.unreadCount} />
       <ConversationQuickActions
@@ -61,6 +101,46 @@ export function ConversationRow({
   );
 }
 
+function DeliveryStateDot({
+  label,
+  state,
+}: {
+  label: string;
+  state: 'deleted' | 'failed' | 'seen' | 'sending' | 'sent';
+}) {
+  return (
+    <span
+      aria-label={label}
+      className={cn(
+        'size-1.5 shrink-0 rounded-full',
+        state === 'failed' && 'bg-destructive',
+        state === 'seen' && 'bg-primary',
+        state === 'sending' && 'bg-muted-foreground',
+        state === 'sent' && 'bg-foreground/60',
+        state === 'deleted' && 'border border-muted-foreground'
+      )}
+      role="status"
+      title={label}
+    />
+  );
+}
+
+function formatQueueTimestamp(value: string, locale: string) {
+  const date = new Date(value);
+  if (!Number.isFinite(date.getTime())) return '';
+  const today = new Date();
+  const sameDay =
+    date.getFullYear() === today.getFullYear() &&
+    date.getMonth() === today.getMonth() &&
+    date.getDate() === today.getDate();
+  return new Intl.DateTimeFormat(
+    locale,
+    sameDay
+      ? { hour: '2-digit', minute: '2-digit' }
+      : { day: 'numeric', month: 'short' }
+  ).format(date);
+}
+
 export function SearchResultList({
   messages,
   onSelectConversation,
@@ -88,7 +168,11 @@ export function SearchResultList({
           type="button"
         >
           <span className="block truncate font-medium text-sm">
-            {message.sender?.displayName ?? t('unknown_sender')}
+            {getChatMessageSenderLabel(message, {
+              assistant: t('assistant_name'),
+              external: t('external_sender'),
+              unknown: t('unknown_sender'),
+            })}
           </span>
           <span className="mt-1 line-clamp-2 text-muted-foreground text-xs">
             {message.content}

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

@@ -8,6 +8,7 @@ const mocks = vi.hoisted(() => ({
   createDialogProps: null as Record<string, unknown> | null,
   fetchNextPage: vi.fn(),
   routerReplace: vi.fn(),
+  searchParams: 'scope=personal',
   useChatMessageSearch: vi.fn(),
   useInfiniteChatConversations: vi.fn(),
 }));
@@ -21,7 +22,7 @@ vi.mock('next/navigation', () => ({
   useRouter: () => ({
     replace: mocks.routerReplace,
   }),
-  useSearchParams: () => new URLSearchParams('scope=personal'),
+  useSearchParams: () => new URLSearchParams(mocks.searchParams),
 }));
 
 vi.mock('./chat-sidebar', () => ({
@@ -80,6 +81,7 @@ describe('ChatSidebarPanel', () => {
     vi.clearAllMocks();
     mocks.chatSidebarProps = null;
     mocks.createDialogProps = null;
+    mocks.searchParams = 'scope=personal';
     window.localStorage.clear();
     mocks.useChatMessageSearch.mockReturnValue({ data: [] });
     mocks.useInfiniteChatConversations.mockReturnValue({
@@ -104,6 +106,7 @@ describe('ChatSidebarPanel', () => {
 
     expect(mocks.useInfiniteChatConversations).toHaveBeenCalledWith({
       archived: 'active',
+      scope: undefined,
       wsId: 'personal',
     });
     expect(mocks.chatSidebarProps).toMatchObject({
@@ -120,6 +123,31 @@ describe('ChatSidebarPanel', () => {
     expect(mocks.fetchNextPage).toHaveBeenCalledTimes(1);
   });
 
+  it('requests server-scoped pages for the external inbox', () => {
+    mocks.searchParams = 'scope=external';
+    mocks.useInfiniteChatConversations.mockReturnValue({
+      data: { pages: [{ conversations: [], nextOffset: null }] },
+      fetchNextPage: mocks.fetchNextPage,
+      hasNextPage: false,
+      isFetchingNextPage: false,
+      isLoading: false,
+    });
+
+    render(
+      <ChatSidebarPanel
+        currentUserId="user-1"
+        isCollapsed={false}
+        wsId="personal"
+      />
+    );
+
+    expect(mocks.useInfiniteChatConversations).toHaveBeenCalledWith({
+      archived: 'active',
+      scope: 'external',
+      wsId: 'personal',
+    });
+  });
+
   it('updates Next router state when auto-selecting the first conversation', async () => {
     render(
       <ChatSidebarPanel

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

@@ -71,17 +71,18 @@ export function ChatSidebarPanel({
   const setCreateOpen = onCreateOpenChange ?? setInternalCreateOpen;
   const archiveFilter = controlledArchiveFilter ?? internalArchiveFilter;
   const selectedTypes = controlledSelectedTypes ?? internalSelectedTypes;
+  const conversationScope = normalizeChatConversationScope(
+    searchParams.get('scope') ?? defaultConversationScope
+  );
   const conversationsQuery = useInfiniteChatConversations({
     archived: archiveFilter,
+    scope: conversationScope === 'external' ? 'external' : undefined,
     wsId,
   });
   const searchQuery = useChatMessageSearch({
     query: searchValue,
     wsId,
   });
-  const conversationScope = normalizeChatConversationScope(
-    searchParams.get('scope') ?? defaultConversationScope
-  );
   const conversations = flattenChatConversationPages(conversationsQuery.data);
   const scopeConversations = filterChatConversationsByScope(
     conversations,

package/src/components/ui/chat/chat-sidebar-sections.ts

@@ -42,8 +42,8 @@ export function getChatConversationSections({
   scope?: ChatConversationScope;
   sourceLabels?: ChatConversationSourceLabels;
 }): ChatConversationSection[] {
-  if (scope === 'workspaces') {
-    return [
+  if (scope === 'external' || scope === 'workspaces') {
+    const sections = [
       createChatConversationSection({
         conversations: conversations.filter(
           (conversation) => conversation.type === 'channel'
@@ -52,15 +52,22 @@ export function getChatConversationSections({
         sectionType: 'channel',
         sourceLabels,
       }),
-      createChatConversationSection({
-        conversations: conversations.filter(
-          (conversation) => conversation.type === 'ai'
-        ),
-        label: labels.ai,
-        sectionType: 'ai',
-        sourceLabels,
-      }),
     ];
+
+    if (scope === 'workspaces') {
+      sections.push(
+        createChatConversationSection({
+          conversations: conversations.filter(
+            (conversation) => conversation.type === 'ai'
+          ),
+          label: labels.ai,
+          sectionType: 'ai',
+          sourceLabels,
+        })
+      );
+    }
+
+    return sections;
   }
 
   if (scope === 'personal') {
@@ -176,6 +183,13 @@ function getChatConversationSourceGroup(
 ): Omit<ChatConversationSourceGroup, 'conversations'> | null {
   const metadata = conversation.metadata ?? {};
 
+  if (metadata.externalChat === true) {
+    return {
+      id: 'external:connected-sites',
+      label: labels.external,
+    };
+  }
+
   if (metadata.source !== 'ai-agent-external-thread') return null;
 
   const adapter = readString(metadata.adapter);

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

@@ -49,6 +49,7 @@ interface ChatSidebarProps {
   isFetchingMoreConversations?: boolean;
   onArchiveConversation?: (conversationId: string) => void;
   onLoadMoreConversations?: () => Promise<unknown> | undefined;
+  onlineConversationIds?: ReadonlySet<string>;
   onPinConversation?: (conversationId: string, pinned: boolean) => void;
   onSearchChange: (value: string) => void;
   onSelectConversation: (conversationId: string) => void;
@@ -75,6 +76,7 @@ export function ChatSidebar({
   isFetchingMoreConversations,
   onArchiveConversation,
   onLoadMoreConversations,
+  onlineConversationIds,
   onPinConversation,
   onSearchChange,
   onSelectConversation,
@@ -156,6 +158,7 @@ export function ChatSidebar({
             isFetchingMoreConversations={isFetchingMoreConversations}
             onArchiveConversation={onArchiveConversation}
             onLoadMoreConversations={onLoadMoreConversations}
+            onlineConversationIds={onlineConversationIds}
             onPinConversation={onPinConversation}
             onSelectConversation={onSelectConversation}
             archiveFilter={archiveFilter}

package/src/components/ui/chat/chat-utils.test.ts

@@ -1,17 +1,22 @@
 import type { ChatConversation, ChatMessage } from '@tuturuuu/internal-api';
 import { describe, expect, it, vi } from 'vitest';
 import {
+  canPersistChatReadState,
   filterChatConversationsByScope,
   formatChatRelativeTime,
   formatFileSize,
+  getChatConversationDeliveryState,
+  getChatConversationQueueDetails,
   getChatConversationTypesForScope,
   getChatInitials,
+  getChatMessageSenderLabel,
   getChatSelectionStorageKey,
   getConversationTitle,
   getLastMessagePreview,
   isReadOnlyChatConversation,
   normalizeChatConversationScope,
   resolveChatConversationSelection,
+  resolvePendingChatSendRequest,
 } from './utils';
 
 const baseMessage: ChatMessage = {
@@ -53,6 +58,40 @@ function conversation(overrides: Partial<ChatConversation>): ChatConversation {
 }
 
 describe('chat utils', () => {
+  it('reuses a request id for the same failed send payload', () => {
+    const payload = { attachments: [], content: 'Retry me' };
+    const createRequestId = vi.fn(() => 'request-1');
+    const first = resolvePendingChatSendRequest(null, payload, createRequestId);
+    const retry = resolvePendingChatSendRequest(
+      first,
+      payload,
+      createRequestId
+    );
+
+    expect(retry).toBe(first);
+    expect(createRequestId).toHaveBeenCalledOnce();
+  });
+
+  it('creates a new request id when the send payload changes', () => {
+    const createRequestId = vi
+      .fn<() => string>()
+      .mockReturnValueOnce('request-1')
+      .mockReturnValueOnce('request-2');
+    const first = resolvePendingChatSendRequest(
+      null,
+      { attachments: [], content: 'First' },
+      createRequestId
+    );
+    const changed = resolvePendingChatSendRequest(
+      first,
+      { attachments: [], content: 'Second' },
+      createRequestId
+    );
+
+    expect(changed.requestId).toBe('request-2');
+    expect(createRequestId).toHaveBeenCalledTimes(2);
+  });
+
   it('derives compact initials for users and labels', () => {
     expect(getChatInitials('Ada Lovelace')).toBe('AL');
     expect(
@@ -177,6 +216,30 @@ describe('chat utils', () => {
     ).toBe(true);
   });
 
+  it('allows external inbox viewers to persist read state on first open', () => {
+    expect(
+      canPersistChatReadState({
+        externalChat: true,
+        hasMembership: false,
+        readOnly: false,
+      })
+    ).toBe(true);
+    expect(
+      canPersistChatReadState({
+        externalChat: false,
+        hasMembership: false,
+        readOnly: false,
+      })
+    ).toBe(false);
+    expect(
+      canPersistChatReadState({
+        externalChat: true,
+        hasMembership: false,
+        readOnly: true,
+      })
+    ).toBe(false);
+  });
+
   it('splits personal and workspace conversation scopes', () => {
     const direct = conversation({ id: 'direct-1', type: 'direct' });
     const group = conversation({ id: 'group-1', type: 'group' });
@@ -187,9 +250,18 @@ describe('chat utils', () => {
       type: 'channel',
     });
     const ai = conversation({ id: 'ai-1', type: 'ai' });
+    const external = conversation({
+      id: 'external-1',
+      metadata: { externalChat: true },
+      type: 'channel',
+    });
 
+    expect(normalizeChatConversationScope('external')).toBe('external');
     expect(normalizeChatConversationScope('workspaces')).toBe('workspaces');
     expect(normalizeChatConversationScope('unknown')).toBe('personal');
+    expect(normalizeChatConversationScope('unknown', 'external')).toBe(
+      'external'
+    );
     expect(getChatConversationTypesForScope('personal')).toEqual([
       'direct',
       'group',
@@ -200,6 +272,7 @@ describe('chat utils', () => {
       'channel',
       'ai',
     ]);
+    expect(getChatConversationTypesForScope('external')).toEqual(['channel']);
     expect(
       filterChatConversationsByScope(
         [direct, group, channel, ai],
@@ -250,6 +323,106 @@ describe('chat utils', () => {
         'workspaces'
       ).map((item) => item.id)
     ).toEqual(['channel-1', 'ai-1', 'agent-thread-1']);
+    expect(
+      filterChatConversationsByScope(
+        [direct, channel, external],
+        'external'
+      ).map((item) => item.id)
+    ).toEqual(['external-1']);
+  });
+
+  it('uses dynamic external sender metadata when no native sender exists', () => {
+    const fallback = {
+      assistant: 'Assistant',
+      external: 'Website visitor',
+      unknown: 'Unknown sender',
+    };
+
+    expect(
+      getChatMessageSenderLabel(
+        {
+          ...baseMessage,
+          metadata: {
+            externalChat: true,
+            externalSender: { displayName: 'Visitor 42' },
+          },
+        },
+        fallback
+      )
+    ).toBe('Visitor 42');
+    expect(
+      getChatMessageSenderLabel(
+        { ...baseMessage, metadata: { externalChat: true } },
+        fallback
+      )
+    ).toBe('Website visitor');
+    expect(getChatMessageSenderLabel(baseMessage, fallback)).toBe(
+      'Unknown sender'
+    );
+  });
+
+  it('builds a dense connected-site queue summary from dynamic metadata', () => {
+    const details = getChatConversationQueueDetails(
+      conversation({
+        latestMessage: {
+          ...baseMessage,
+          content: 'Need help with this page',
+          createdAt: '2026-08-05T07:15:00.000Z',
+          metadata: { status: 'seen' },
+        },
+        metadata: { externalChat: true, phone: '0900000000' },
+      })
+    );
+
+    expect(details).toEqual({
+      deliveryState: 'seen',
+      phone: '0900000000',
+      preview: 'Need help with this page',
+      timestamp: '2026-08-05T07:15:00.000Z',
+    });
+  });
+
+  it('normalizes connected-site delivery and deletion states', () => {
+    expect(
+      getChatConversationDeliveryState({
+        deletedAt: '2026-08-05T07:16:00.000Z',
+        metadata: { status: 'seen' },
+      })
+    ).toBe('deleted');
+    expect(
+      getChatConversationDeliveryState({
+        deletedAt: null,
+        metadata: { status: 'delivery_failed' },
+      })
+    ).toBe('failed');
+    expect(
+      getChatConversationDeliveryState({
+        deletedAt: null,
+        metadata: { status: 'queued' },
+      })
+    ).toBe('sending');
+    expect(
+      getChatConversationDeliveryState({
+        deletedAt: null,
+        metadata: { status: '2' },
+      })
+    ).toBe('sent');
+  });
+
+  it('does not expose deleted message content in queue previews', () => {
+    const details = getChatConversationQueueDetails(
+      conversation({
+        latestMessage: {
+          ...baseMessage,
+          attachments: [{ filename: 'private.png' } as never],
+          content: 'deleted private content',
+          deletedAt: '2026-08-05T07:16:00.000Z',
+        },
+      })
+    );
+
+    expect(details.deliveryState).toBe('deleted');
+    expect(details.preview).toBeNull();
   });
 
   it('resolves workspace chat selection from requested, stored, then first conversation', () => {

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

@@ -408,7 +408,11 @@ function getArchiveDescription({
   return t('archive_chat_warning');
 }
 
-export function EmptyConversationState({ onCreate }: { onCreate: () => void }) {
+export function EmptyConversationState({
+  onCreate,
+}: {
+  onCreate?: () => void;
+}) {
   const t = useTranslations('chat');
 
   return (
@@ -419,10 +423,12 @@ export function EmptyConversationState({ onCreate }: { onCreate: () => void }) {
         <p className="mt-1 text-muted-foreground text-sm">
           {t('empty_conversations_description')}
         </p>
-        <Button className="mt-4" onClick={onCreate} type="button">
-          <CheckCircle2 className="size-4" />
-          {t('new_conversation')}
-        </Button>
+        {onCreate ? (
+          <Button className="mt-4" onClick={onCreate} type="button">
+            <CheckCircle2 className="size-4" />
+            {t('new_conversation')}
+          </Button>
+        ) : null}
       </div>
     </div>
   );