@tuturuuu/ui 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.25.0](https://github.com/tutur3u/platform/compare/ui-v0.24.0...ui-v0.25.0) (2026-08-06)
+
+
+### Features
+
+* **chat:** add external parity reconciliation ([#5086](https://github.com/tutur3u/platform/issues/5086)) ([5ef796f](https://github.com/tutur3u/platform/commit/5ef796f7812ec6a9f9a62193ba21633cd2503001))
+* **chat:** complete connected-site operational parity ([#5093](https://github.com/tutur3u/platform/issues/5093)) ([397e11b](https://github.com/tutur3u/platform/commit/397e11bd87d583fe1c65f83a2b8019c287650e19))
+* **chat:** complete connected-site parity ([fd4061d](https://github.com/tutur3u/platform/commit/fd4061d8b2f654e521c40ea9819a348ae81575c9))
+
+
+### Bug Fixes
+
+* **chat:** harden connected-site parity ([a0d3148](https://github.com/tutur3u/platform/commit/a0d31483a87ed0ebd59f2be5c3bdbb342bd67855))
+
 ## [0.24.0](https://github.com/tutur3u/platform/compare/ui-v0.23.0...ui-v0.24.0) (2026-08-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -86,11 +86,11 @@
     "@tiptap/pm": "3.29.2",
     "@tiptap/react": "3.29.2",
     "@tiptap/starter-kit": "3.29.2",
-    "@tuturuuu/ai": "0.7.0",
+    "@tuturuuu/ai": "0.8.0",
     "@tuturuuu/apis": "0.11.0",
     "@tuturuuu/hooks": "0.1.0",
     "@tuturuuu/icons": "0.1.0",
-    "@tuturuuu/internal-api": "0.27.0",
+    "@tuturuuu/internal-api": "0.28.0",
     "@tuturuuu/supabase": "0.5.0",
     "@tuturuuu/utils": "0.22.0",
     "@types/debug": "^4.1.13",
@@ -152,7 +152,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.26.0",
+    "@tuturuuu/types": "0.27.0",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.25",

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

@@ -0,0 +1,113 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { LoaderCircle, MapPin } from '@tuturuuu/icons';
+import {
+  type ExternalChatConversationContext,
+  getExternalChatConversationContext,
+} from '@tuturuuu/internal-api';
+import { useTranslations } from 'next-intl';
+import { ScrollArea } from '../scroll-area';
+import { formatChatTime } from './utils';
+
+export function ChatExternalContextSidebar({
+  conversationId,
+  open,
+  wsId,
+}: {
+  conversationId?: string | null;
+  open: boolean;
+  wsId: string;
+}) {
+  const t = useTranslations('chat');
+  const query = useQuery({
+    enabled: open && Boolean(conversationId),
+    queryFn: () =>
+      getExternalChatConversationContext(wsId, conversationId as string),
+    queryKey: ['chat', wsId, conversationId, 'external-context'],
+  });
+  if (!open) return null;
+  return (
+    <aside className="hidden w-80 min-w-0 shrink-0 overflow-hidden border-l bg-background md:flex md:flex-col">
+      <div className="border-b p-3">
+        <h2 className="font-semibold text-sm">{t('visitor_context')}</h2>
+      </div>
+      <ScrollArea className="min-h-0 flex-1">
+        {query.isLoading ? (
+          <div className="flex items-center justify-center p-6 text-muted-foreground text-sm">
+            <LoaderCircle className="mr-2 size-4 animate-spin" />
+            {t('loading_visitor_context')}
+          </div>
+        ) : query.data ? (
+          <ContextContent context={query.data} />
+        ) : (
+          <p className="p-4 text-muted-foreground text-sm">
+            {t('visitor_context_unavailable')}
+          </p>
+        )}
+      </ScrollArea>
+    </aside>
+  );
+}
+
+function ContextContent({
+  context,
+}: {
+  context: ExternalChatConversationContext;
+}) {
+  const t = useTranslations('chat');
+  return (
+    <div className="space-y-5 p-4">
+      <dl className="space-y-3">
+        <Detail label={t('visitor_name')} value={context.profile.displayName} />
+        <Detail label={t('visitor_phone')} value={context.profile.phone} />
+        <Detail label={t('visitor_email')} value={context.profile.email} />
+        <Detail label={t('network_hint')} value={context.networkHint} />
+        <Detail
+          label={t('first_activity')}
+          value={formatChatTime(context.firstActivityAt)}
+        />
+        <Detail
+          label={t('last_activity')}
+          value={formatChatTime(context.lastActivityAt)}
+        />
+      </dl>
+      <section>
+        <h3 className="font-semibold text-muted-foreground text-xs uppercase">
+          {t('visited_routes')}
+        </h3>
+        <div className="mt-2 space-y-2">
+          {context.routes.length ? (
+            context.routes.map((route) => (
+              <div
+                className="flex gap-2 border-l-2 pl-3 text-sm"
+                key={`${route.occurredAt}:${route.location}`}
+              >
+                <MapPin className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+                <div className="min-w-0">
+                  <p className="break-all">{route.location}</p>
+                  <p className="text-muted-foreground text-xs">
+                    {formatChatTime(route.occurredAt)}
+                  </p>
+                </div>
+              </div>
+            ))
+          ) : (
+            <p className="text-muted-foreground text-sm">
+              {t('no_visited_routes')}
+            </p>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function Detail({ label, value }: { label: string; value: string | null }) {
+  return (
+    <div>
+      <dt className="text-muted-foreground text-xs">{label}</dt>
+      <dd className="mt-0.5 break-words text-sm">{value || '-'}</dd>
+    </div>
+  );
+}

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

@@ -48,6 +48,7 @@ export function ConversationGroups({
   isFetchingMoreConversations,
   onArchiveConversation,
   onLoadMoreConversations,
+  onlineConversationIds,
   onPinConversation,
   onSelectConversation,
   scope,
@@ -61,6 +62,7 @@ export function ConversationGroups({
   isFetchingMoreConversations?: boolean;
   onArchiveConversation?: (conversationId: string) => void;
   onLoadMoreConversations?: () => Promise<unknown> | undefined;
+  onlineConversationIds?: ReadonlySet<string>;
   onPinConversation?: (conversationId: string, pinned: boolean) => void;
   onSelectConversation: (conversationId: string) => void;
   scope?: ChatConversationScope;
@@ -166,7 +168,8 @@ export function ConversationGroups({
     count: items.length,
     estimateSize: (index) => {
       const item = items[index];
-      if (item?.type === 'conversation') return 36;
+      if (item?.type === 'conversation')
+        return item.conversation.metadata.externalChat === true ? 66 : 36;
       if (item?.type === 'loader') return 44;
       if (item?.type === 'source-group-label') return 34;
       return 30;
@@ -252,6 +255,7 @@ export function ConversationGroups({
                   conversation={item.conversation}
                   currentUserId={currentUserId}
                   isSelected={item.conversation.id === selectedConversationId}
+                  isOnline={onlineConversationIds?.has(item.conversation.id)}
                   onArchiveConversation={onArchiveConversation}
                   onPinConversation={onPinConversation}
                   onSelectConversation={onSelectConversation}

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

@@ -3,10 +3,11 @@
 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 {
+  getChatConversationQueueDetails,
   getChatMessageSenderLabel,
   getConversationTitle,
   isChatConversationPinned,
@@ -15,6 +16,7 @@ import {
 export function ConversationRow({
   conversation,
   currentUserId,
+  isOnline,
   isSelected,
   onArchiveConversation,
   onPinConversation,
@@ -22,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'),
@@ -36,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
@@ -49,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
@@ -65,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,

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

@@ -5,6 +5,8 @@ import {
   filterChatConversationsByScope,
   formatChatRelativeTime,
   formatFileSize,
+  getChatConversationDeliveryState,
+  getChatConversationQueueDetails,
   getChatConversationTypesForScope,
   getChatInitials,
   getChatMessageSenderLabel,
@@ -359,6 +361,70 @@ describe('chat utils', () => {
     );
   });
 
+  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', () => {
     const conversationIds = ['first', 'stored', 'requested'];
 

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

@@ -16,6 +16,7 @@ import { Button } from '../button';
 import { toast } from '../sonner';
 import { ChatAgentDetailsSidebar } from './chat-agent-details-sidebar';
 import { ChatAiDetailsSidebar } from './chat-ai-details-sidebar';
+import { ChatExternalContextSidebar } from './chat-external-context-sidebar';
 import { ChatSharedContentSidebar } from './chat-shared-content-sidebar';
 import { ChatConversationFilterMenu, ChatSidebar } from './chat-sidebar';
 import { ChatHeader, EmptyConversationState } from './chat-workspace-header';
@@ -247,11 +248,15 @@ export function ChatWorkspace({
   const requestedDetails = searchParams.get('details');
   const agentDetailsOpen =
     requestedDetails === 'agent' && selectedAgentReadOnly;
+  const externalDetailsOpen =
+    requestedDetails === 'external' && selectedExternalConversation;
   const detailsOpen = Boolean(
-    (sharedContentOpen || agentDetailsOpen) && activeConversationId
+    (selectedExternalConversation
+      ? externalDetailsOpen
+      : sharedContentOpen || agentDetailsOpen) && activeConversationId
   );
 
-  useChatRealtime(wsId);
+  const realtime = useChatRealtime(wsId);
 
   useEffect(() => {
     setStoredSelectionLoaded(false);
@@ -525,6 +530,7 @@ export function ChatWorkspace({
           onPinConversation={handlePinConversation}
           onSearchChange={setSearchValue}
           onSelectConversation={selectConversation}
+          onlineConversationIds={realtime.onlineConversationIds}
           searchResults={searchResults}
           searchValue={searchValue}
           selectedConversationId={activeConversationId}
@@ -544,6 +550,17 @@ export function ChatWorkspace({
           onDeleteConversation={handleDeleteConversation}
           onGenerateConversationTitle={handleGenerateConversationTitle}
           onToggleSharedContent={() => {
+            if (selectedExternalConversation) {
+              replaceChatSelection({
+                conversationId: activeConversationId,
+                details: externalDetailsOpen ? null : 'external',
+                pathname,
+                router,
+                searchParams,
+                storageKey: selectionStorageKey,
+              });
+              return;
+            }
             if (requestedDetails) {
               replaceChatSelection({
                 conversationId: activeConversationId,
@@ -570,7 +587,14 @@ export function ChatWorkspace({
               hasMoreMessages={messagesQuery.hasNextPage}
               isLoading={messagesQuery.isLoading}
               isLoadingMoreMessages={messagesQuery.isFetchingNextPage}
-              isAgentTyping={selectedAiConversation && sendMessage.isPending}
+              isAgentTyping={
+                (selectedAiConversation && sendMessage.isPending) ||
+                Boolean(
+                  selectedExternalConversation &&
+                    activeConversationId &&
+                    realtime.typingConversationIds.has(activeConversationId)
+                )
+              }
               messages={messages}
               onDeleteMessage={handleDeleteMessage}
               onLoadMoreMessages={() => messagesQuery.fetchNextPage()}
@@ -582,6 +606,11 @@ export function ChatWorkspace({
                       toggleReaction.mutate({ emoji, messageId })
               }
               readOnly={selectedReadOnly}
+              typingLabel={
+                selectedExternalConversation
+                  ? t('external_visitor_typing')
+                  : undefined
+              }
               wsId={wsId}
             />
             {selectedReadOnly ? (
@@ -595,7 +624,7 @@ export function ChatWorkspace({
               </div>
             ) : (
               <MessageComposer
-                allowAttachments={conversationScope !== 'external'}
+                allowAttachments
                 disabled={!activeConversationId}
                 isSending={sendMessage.isPending}
                 isUploading={uploadAttachment.isPending}
@@ -615,7 +644,13 @@ export function ChatWorkspace({
         )}
       </div>
 
-      {selectedAgentReadOnly ? (
+      {selectedExternalConversation ? (
+        <ChatExternalContextSidebar
+          conversationId={activeConversationId}
+          open={detailsOpen}
+          wsId={wsId}
+        />
+      ) : selectedAgentReadOnly ? (
         <ChatAgentDetailsSidebar
           conversation={selectedConversation}
           open={detailsOpen}

package/src/components/ui/chat/hooks-realtime.ts

@@ -2,7 +2,13 @@
 
 import { type QueryClient, useQueryClient } from '@tanstack/react-query';
 import type { ChatConversation, ChatMessage } from '@tuturuuu/internal-api';
-import { useEffect } from 'react';
+import {
+  type Dispatch,
+  type SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { mergeCachedMessages, patchCachedMessages } from './hooks-messages';
 import { chatQueryKeys } from './query-keys';
 
@@ -27,6 +33,16 @@ type ChatRealtimeEvent =
   | {
       type: 'ping' | 'ready';
     }
+  | {
+      conversationId?: string | null;
+      isTyping: boolean;
+      type: 'typing.updated';
+    }
+  | {
+      conversationId?: string | null;
+      isOnline: boolean;
+      type: 'presence.updated';
+    }
   | {
       error?: string;
       type: 'error';
@@ -34,6 +50,15 @@ type ChatRealtimeEvent =
 
 export function useChatRealtime(wsId: string) {
   const queryClient = useQueryClient();
+  const typingTimeouts = useRef(
+    new Map<string, ReturnType<typeof setTimeout>>()
+  );
+  const [typingConversationIds, setTypingConversationIds] = useState(
+    () => new Set<string>()
+  );
+  const [onlineConversationIds, setOnlineConversationIds] = useState(
+    () => new Set<string>()
+  );
 
   useEffect(() => {
     if (!wsId || typeof window === 'undefined') return;
@@ -50,15 +75,79 @@ export function useChatRealtime(wsId: string) {
         return;
       }
 
+      if (parsed.type === 'typing.updated' && parsed.conversationId) {
+        updateTypingState({
+          conversationId: parsed.conversationId,
+          isTyping: parsed.isTyping,
+          setTypingConversationIds,
+          typingTimeouts: typingTimeouts.current,
+        });
+        return;
+      }
+
+      if (parsed.type === 'presence.updated' && parsed.conversationId) {
+        setOnlineConversationIds((current) =>
+          updateConversationSet(
+            current,
+            parsed.conversationId ?? '',
+            parsed.isOnline
+          )
+        );
+        return;
+      }
+
       applyChatRealtimeEvent(queryClient, wsId, parsed);
     };
 
-    source.onerror = () => {
+    const timers = typingTimeouts.current;
+    return () => {
       source.close();
+      for (const timeout of timers.values()) clearTimeout(timeout);
+      timers.clear();
     };
-
-    return () => source.close();
   }, [queryClient, wsId]);
+
+  return { onlineConversationIds, typingConversationIds };
+}
+
+function updateTypingState({
+  conversationId,
+  isTyping,
+  setTypingConversationIds,
+  typingTimeouts,
+}: {
+  conversationId: string;
+  isTyping: boolean;
+  setTypingConversationIds: Dispatch<SetStateAction<Set<string>>>;
+  typingTimeouts: Map<string, ReturnType<typeof setTimeout>>;
+}) {
+  const existing = typingTimeouts.get(conversationId);
+  if (existing) clearTimeout(existing);
+  typingTimeouts.delete(conversationId);
+  setTypingConversationIds((current) =>
+    updateConversationSet(current, conversationId, isTyping)
+  );
+  if (!isTyping) return;
+  typingTimeouts.set(
+    conversationId,
+    setTimeout(() => {
+      setTypingConversationIds((current) =>
+        updateConversationSet(current, conversationId, false)
+      );
+      typingTimeouts.delete(conversationId);
+    }, 4_000)
+  );
+}
+
+function updateConversationSet(
+  current: Set<string>,
+  conversationId: string,
+  active: boolean
+) {
+  const next = new Set(current);
+  if (active) next.add(conversationId);
+  else next.delete(conversationId);
+  return next;
 }
 
 function parseChatRealtimeEvent(data: string): ChatRealtimeEvent | null {

package/src/components/ui/chat/message-list.tsx

@@ -28,6 +28,7 @@ interface MessageListProps {
   onOpenAttachment?: (attachment: ChatAttachment) => void;
   onToggleReaction?: (messageId: string, emoji: string) => void;
   readOnly?: boolean;
+  typingLabel?: string;
   wsId: string;
 }
 
@@ -48,6 +49,7 @@ export function MessageList({
   onOpenAttachment,
   onToggleReaction,
   readOnly,
+  typingLabel,
   wsId,
 }: MessageListProps) {
   const t = useTranslations('chat');
@@ -210,7 +212,7 @@ export function MessageList({
                   </Button>
                 </div>
               ) : item.type === 'typing' ? (
-                <AgentTypingIndicator />
+                <AgentTypingIndicator label={typingLabel} />
               ) : (
                 <MessageRow
                   currentUserId={currentUserId}
@@ -270,7 +272,7 @@ function MessageRow({
   );
 }
 
-function AgentTypingIndicator() {
+function AgentTypingIndicator({ label }: { label?: string }) {
   const t = useTranslations('chat');
 
   return (
@@ -279,7 +281,7 @@ function AgentTypingIndicator() {
         <LoaderCircle className="size-4 animate-spin" />
       </div>
       <div className="rounded-md border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
-        <span className="sr-only">{t('agent_typing')}</span>
+        <span className="sr-only">{label ?? t('agent_typing')}</span>
         <span aria-hidden="true" className="flex items-center gap-1">
           <span className="size-1.5 animate-pulse rounded-full bg-current" />
           <span className="size-1.5 animate-pulse rounded-full bg-current delay-150" />

package/src/components/ui/chat/selection.ts

@@ -8,7 +8,7 @@ type RouterLike = {
   replace: (href: string, options?: { scroll?: boolean }) => void;
 };
 
-export type ChatDetailsTarget = 'agent' | null;
+export type ChatDetailsTarget = 'agent' | 'external' | null;
 
 export function buildChatSelectionHref({
   conversationId,

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

@@ -8,6 +8,13 @@ import type {
 export type ChatConversationScope = 'external' | 'personal' | 'workspaces';
 export type ChatConversationArchiveFilter = 'active' | 'all' | 'archived';
 
+export type ChatConversationDeliveryState =
+  | 'deleted'
+  | 'failed'
+  | 'seen'
+  | 'sending'
+  | 'sent';
+
 export const DEFAULT_CHAT_SCOPE: ChatConversationScope = 'personal';
 export const CHAT_CONVERSATION_TYPE_FILTERS = [
   'direct',
@@ -87,6 +94,40 @@ export function getChatConversationScope(
   return 'workspaces';
 }
 
+export function getChatConversationQueueDetails(
+  conversation: Pick<
+    ChatConversation,
+    'latestMessage' | 'metadata' | 'updatedAt'
+  >
+) {
+  const latestMessage = conversation.latestMessage;
+  const phone = readNonEmptyString(conversation.metadata.phone);
+
+  return {
+    deliveryState: latestMessage
+      ? getChatConversationDeliveryState(latestMessage)
+      : null,
+    phone,
+    preview: latestMessage?.deletedAt
+      ? null
+      : (readNonEmptyString(latestMessage?.content) ??
+        readNonEmptyString(latestMessage?.attachments[0]?.filename)),
+    timestamp: latestMessage?.createdAt ?? conversation.updatedAt,
+  };
+}
+
+export function getChatConversationDeliveryState(
+  message: Pick<ChatMessage, 'deletedAt' | 'metadata'>
+): ChatConversationDeliveryState {
+  if (message.deletedAt) return 'deleted';
+
+  const status = readNonEmptyString(message.metadata.status)?.toLowerCase();
+  if (status && /fail|error|reject/u.test(status)) return 'failed';
+  if (status && /seen|read/u.test(status)) return 'seen';
+  if (status && /pending|queue|sending/u.test(status)) return 'sending';
+  return 'sent';
+}
+
 export function isChatConversation(value: unknown): value is ChatConversation {
   const conversation = value as Partial<ChatConversation> | null | undefined;