@tuturuuu/ui 0.23.0 → 0.25.0

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

@@ -10,12 +10,13 @@ import type {
 import { cn } from '@tuturuuu/utils/format';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, 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 { 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';
@@ -45,6 +46,7 @@ import {
   CHAT_CONVERSATION_TYPE_FILTERS,
   type ChatConversationArchiveFilter,
   type ChatConversationScope,
+  canPersistChatReadState,
   filterChatConversations,
   getChatConversationTypesForScope,
   getChatSelectionStorageKey,
@@ -52,14 +54,18 @@ import {
   getConversationTitle,
   isReadOnlyChatConversation,
   normalizeChatConversationScope,
+  type PendingChatSendRequest,
   resolveChatConversationSelection,
+  resolvePendingChatSendRequest,
 } from './utils';
 
 interface ChatWorkspaceProps {
   className?: string;
   defaultConversationScope?: ChatConversationScope;
+  enforcedConversationScope?: ChatConversationScope;
   currentUserId: string;
   enableRootIntegrations?: boolean;
+  readOnly?: boolean;
   showSidebar?: boolean;
   variant?: 'standalone' | 'web';
   wsId: string;
@@ -68,8 +74,10 @@ interface ChatWorkspaceProps {
 export function ChatWorkspace({
   className,
   defaultConversationScope,
+  enforcedConversationScope,
   currentUserId,
   enableRootIntegrations,
+  readOnly = false,
   showSidebar = true,
   variant = 'web',
   wsId,
@@ -90,20 +98,23 @@ export function ChatWorkspace({
   const [selectedTypes, setSelectedTypes] = useState<
     ChatConversation['type'][]
   >([...CHAT_CONVERSATION_TYPE_FILTERS]);
+  const pendingSendRequest = useRef<PendingChatSendRequest | null>(null);
+  const requestedScope = searchParams.get('scope');
+  const conversationScope =
+    enforcedConversationScope ??
+    (requestedScope || defaultConversationScope
+      ? normalizeChatConversationScope(
+          requestedScope ?? defaultConversationScope
+        )
+      : null);
   const conversationsQuery = useInfiniteChatConversations({
     archived: archiveFilter,
+    scope: conversationScope === 'external' ? 'external' : undefined,
     wsId,
   });
   const allConversations = flattenChatConversationPages(
     conversationsQuery.data
   );
-  const requestedScope = searchParams.get('scope');
-  const conversationScope =
-    requestedScope || defaultConversationScope
-      ? normalizeChatConversationScope(
-          requestedScope ?? defaultConversationScope
-        )
-      : null;
   const conversations = conversationScope
     ? filterChatConversations({
         archiveFilter,
@@ -159,18 +170,22 @@ export function ChatWorkspace({
   const activeNativeConversationId = isPostgresUuid(activeConversationId)
     ? activeConversationId
     : null;
-  const selectedReadOnly = isReadOnlyChatConversation(selectedConversation);
+  const conversationReadOnly = isReadOnlyChatConversation(selectedConversation);
+  const selectedReadOnly = readOnly || conversationReadOnly;
   const selectedAiConversation = selectedConversation?.type === 'ai';
   const selectedAgentReadOnly =
     (selectedConversation?.metadata.source === 'ai-agent' ||
       selectedConversation?.metadata.source === 'ai-agent-external-thread') &&
-    selectedReadOnly;
+    conversationReadOnly;
   const selectedVirtualReadOnly =
-    selectedConversation?.metadata.source === 'ai-agent' && selectedReadOnly;
+    selectedConversation?.metadata.source === 'ai-agent' &&
+    conversationReadOnly;
   const selectedMembership =
     selectedConversation?.members.some(
       (member) => member.userId === currentUserId
     ) ?? false;
+  const selectedExternalConversation =
+    selectedConversation?.metadata.externalChat === true;
   const messagesQuery = useInfiniteChatMessages({
     conversationId: selectedVirtualReadOnly ? null : activeConversationId,
     wsId,
@@ -233,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);
@@ -281,8 +300,14 @@ export function ChatWorkspace({
   ]);
 
   useEffect(() => {
-    if (selectedReadOnly) return;
-    if (!selectedMembership) return;
+    if (
+      !canPersistChatReadState({
+        externalChat: selectedExternalConversation,
+        hasMembership: selectedMembership,
+        readOnly: conversationReadOnly,
+      })
+    )
+      return;
     if (!activeNativeConversationId || !latestPersistedMessageId) return;
     markConversationRead(latestPersistedMessageId);
   }, [
@@ -290,7 +315,8 @@ export function ChatWorkspace({
     latestPersistedMessageId,
     markConversationRead,
     selectedMembership,
-    selectedReadOnly,
+    selectedExternalConversation,
+    conversationReadOnly,
   ]);
 
   const selectedTitle = selectedConversation
@@ -307,11 +333,21 @@ export function ChatWorkspace({
     attachments: ChatAttachmentDraft[];
     content: string;
   }) {
+    pendingSendRequest.current = resolvePendingChatSendRequest(
+      pendingSendRequest.current,
+      payload,
+      () => crypto.randomUUID()
+    );
+    const requestId = pendingSendRequest.current.requestId;
     try {
       const result = await sendMessage.mutateAsync({
         attachments: payload.attachments,
+        clientRequestId: requestId,
         content: payload.content,
       });
+      if (pendingSendRequest.current?.requestId === requestId) {
+        pendingSendRequest.current = null;
+      }
 
       if (result.assistantError) {
         toast.error(t('assistant_response_failed'));
@@ -459,14 +495,16 @@ export function ChatWorkspace({
       {showSidebar ? (
         <ChatSidebar
           actions={
-            <Button
-              aria-label={t('new_conversation')}
-              onClick={() => setCreateOpen(true)}
-              size="icon"
-              type="button"
-            >
-              <Plus className="size-4" />
-            </Button>
+            conversationScope === 'external' ? null : (
+              <Button
+                aria-label={t('new_conversation')}
+                onClick={() => setCreateOpen(true)}
+                size="icon"
+                type="button"
+              >
+                <Plus className="size-4" />
+              </Button>
+            )
           }
           archiveFilter={archiveFilter}
           conversations={conversations}
@@ -492,6 +530,7 @@ export function ChatWorkspace({
           onPinConversation={handlePinConversation}
           onSearchChange={setSearchValue}
           onSelectConversation={selectConversation}
+          onlineConversationIds={realtime.onlineConversationIds}
           searchResults={searchResults}
           searchValue={searchValue}
           selectedConversationId={activeConversationId}
@@ -511,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,
@@ -537,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()}
@@ -549,6 +606,11 @@ export function ChatWorkspace({
                       toggleReaction.mutate({ emoji, messageId })
               }
               readOnly={selectedReadOnly}
+              typingLabel={
+                selectedExternalConversation
+                  ? t('external_visitor_typing')
+                  : undefined
+              }
               wsId={wsId}
             />
             {selectedReadOnly ? (
@@ -556,10 +618,13 @@ export function ChatWorkspace({
                 <span className="text-muted-foreground">
                   {t('read_only_conversation')}
                 </span>
-                <Badge variant="secondary">{t('agent_channel')}</Badge>
+                {selectedAgentReadOnly ? (
+                  <Badge variant="secondary">{t('agent_channel')}</Badge>
+                ) : null}
               </div>
             ) : (
               <MessageComposer
+                allowAttachments
                 disabled={!activeConversationId}
                 isSending={sendMessage.isPending}
                 isUploading={uploadAttachment.isPending}
@@ -569,11 +634,23 @@ export function ChatWorkspace({
             )}
           </>
         ) : (
-          <EmptyConversationState onCreate={() => setCreateOpen(true)} />
+          <EmptyConversationState
+            onCreate={
+              conversationScope === 'external'
+                ? undefined
+                : () => setCreateOpen(true)
+            }
+          />
         )}
       </div>
 
-      {selectedAgentReadOnly ? (
+      {selectedExternalConversation ? (
+        <ChatExternalContextSidebar
+          conversationId={activeConversationId}
+          open={detailsOpen}
+          wsId={wsId}
+        />
+      ) : selectedAgentReadOnly ? (
         <ChatAgentDetailsSidebar
           conversation={selectedConversation}
           open={detailsOpen}

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

@@ -39,10 +39,12 @@ export function useChatConversations(
 export function useInfiniteChatConversations({
   archived = 'active',
   limit = 40,
+  scope,
   wsId,
 }: {
   archived?: 'active' | 'all' | 'archived';
   limit?: number;
+  scope?: 'external';
   wsId: string;
 }) {
   return useInfiniteQuery<
@@ -59,8 +61,14 @@ export function useInfiniteChatConversations({
         archived,
         limit,
         offset: pageParam,
+        scope,
       }),
-    queryKey: chatQueryKeys.conversationsInfinite(wsId, archived, limit),
+    queryKey: chatQueryKeys.conversationsInfinite(
+      wsId,
+      archived,
+      limit,
+      scope ?? 'all'
+    ),
     staleTime: 15_000,
   });
 }

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

@@ -111,6 +111,7 @@ export function useSendChatMessage({
   return useMutation({
     mutationFn: (payload: {
       attachments?: ChatAttachmentDraft[];
+      clientRequestId?: string;
       content: string;
       kind?: 'assistant' | 'system' | 'user';
       replyToMessageId?: string | null;

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-bubble.tsx

@@ -28,7 +28,11 @@ import { AiMessageParts } from './ai-message-parts';
 import { getAiMessagePartsFromMetadata } from './ai-message-render-utils';
 import { MessageAttachmentButton } from './message-attachment-button';
 import { MessageLinkPreviews, MessageText } from './message-links';
-import { formatChatTime, getChatInitials } from './utils';
+import {
+  formatChatTime,
+  getChatInitials,
+  getChatMessageSenderLabel,
+} from './utils';
 
 const REACTION_OPTIONS = [
   '\u{1F44D}',
@@ -56,9 +60,11 @@ export function MessageBubble({
 }) {
   const t = useTranslations('chat');
   const isOwnMessage = message.senderId === currentUserId;
-  const senderName =
-    message.sender?.displayName ??
-    (message.kind === 'assistant' ? t('assistant_name') : t('unknown_sender'));
+  const senderName = getChatMessageSenderLabel(message, {
+    assistant: t('assistant_name'),
+    external: t('external_sender'),
+    unknown: t('unknown_sender'),
+  });
 
   return (
     <ContextMenu>
@@ -252,6 +258,7 @@ function MessageContent({
 }) {
   const t = useTranslations('chat');
   const aiParts = getAiMessagePartsFromMetadata(message.metadata);
+  const externalAttachment = readExternalAttachment(message.metadata);
 
   return (
     <div
@@ -299,12 +306,50 @@ function MessageContent({
               ))}
             </div>
           )}
+          {externalAttachment ? (
+            <a
+              className="mt-2 block break-all text-dynamic-blue underline"
+              href={externalAttachment.url}
+              rel="noreferrer"
+              target="_blank"
+            >
+              {externalAttachment.label}
+            </a>
+          ) : null}
         </>
       )}
     </div>
   );
 }
 
+function readExternalAttachment(metadata: Record<string, unknown>) {
+  const attachment = metadata.attachment;
+  if (
+    !attachment ||
+    typeof attachment !== 'object' ||
+    Array.isArray(attachment)
+  ) {
+    return null;
+  }
+  const values = attachment as Record<string, unknown>;
+  const rawUrl = values.url ?? values.link ?? values.href;
+  if (typeof rawUrl !== 'string') return null;
+  try {
+    const url = new URL(rawUrl);
+    if (url.protocol !== 'https:' && url.protocol !== 'http:') return null;
+    const rawLabel = values.filename ?? values.name ?? values.label;
+    return {
+      label:
+        typeof rawLabel === 'string' && rawLabel.trim()
+          ? rawLabel.trim()
+          : url.hostname,
+      url: url.toString(),
+    };
+  } catch {
+    return null;
+  }
+}
+
 function ReactionBar({
   message,
   onToggleReaction,

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

@@ -13,6 +13,7 @@ import { formatFileSize } from './utils';
 const MAX_COMPOSER_ATTACHMENTS = 20;
 
 interface MessageComposerProps {
+  allowAttachments?: boolean;
   disabled?: boolean;
   isSending?: boolean;
   isUploading?: boolean;
@@ -24,6 +25,7 @@ interface MessageComposerProps {
 }
 
 export function MessageComposer({
+  allowAttachments = true,
   disabled,
   isSending,
   isUploading,
@@ -61,7 +63,7 @@ export function MessageComposer({
   }
 
   async function handleFileCandidates(files: File[]) {
-    if (disabled || files.length === 0) return;
+    if (!allowAttachments || disabled || files.length === 0) return;
 
     const remainingSlots = Math.max(
       MAX_COMPOSER_ATTACHMENTS - attachments.length,
@@ -98,7 +100,7 @@ export function MessageComposer({
   }
 
   function handlePaste(event: ClipboardEvent<HTMLTextAreaElement>) {
-    if (disabled) return;
+    if (!allowAttachments || disabled) return;
 
     const clipboardData = event.clipboardData;
     const candidates: File[] = [];
@@ -157,27 +159,31 @@ export function MessageComposer({
       )}
 
       <div className="flex items-end gap-2">
-        <input
-          className="hidden"
-          multiple
-          onChange={(event) => handleFiles(event.target.files)}
-          ref={inputRef}
-          type="file"
-        />
-        <Button
-          aria-label={t('attach_files')}
-          disabled={busy}
-          onClick={() => inputRef.current?.click()}
-          size="icon"
-          type="button"
-          variant="outline"
-        >
-          {uploadingCount > 0 ? (
-            <LoaderCircle className="size-4 animate-spin" />
-          ) : (
-            <Paperclip className="size-4" />
-          )}
-        </Button>
+        {allowAttachments ? (
+          <>
+            <input
+              className="hidden"
+              multiple
+              onChange={(event) => handleFiles(event.target.files)}
+              ref={inputRef}
+              type="file"
+            />
+            <Button
+              aria-label={t('attach_files')}
+              disabled={busy}
+              onClick={() => inputRef.current?.click()}
+              size="icon"
+              type="button"
+              variant="outline"
+            >
+              {uploadingCount > 0 ? (
+                <LoaderCircle className="size-4 animate-spin" />
+              ) : (
+                <Paperclip className="size-4" />
+              )}
+            </Button>
+          </>
+        ) : null}
         <Textarea
           className={cn(
             'max-h-40 min-h-10 resize-none text-sm',

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/message-markdown.tsx

@@ -10,7 +10,10 @@ import { Streamdown } from 'streamdown';
 const math = createMathPlugin({
   singleDollarTextMath: true,
 });
-const plugins = { code, math };
+const plugins = {
+  code,
+  math,
+};
 
 function isMarkdownTableSeparator(separator: string) {
   for (const char of separator) {