@tuturuuu/ui 0.22.0 → 0.24.0

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-utils.test.ts

@@ -1,17 +1,20 @@
 import type { ChatConversation, ChatMessage } from '@tuturuuu/internal-api';
 import { describe, expect, it, vi } from 'vitest';
 import {
+  canPersistChatReadState,
   filterChatConversationsByScope,
   formatChatRelativeTime,
   formatFileSize,
   getChatConversationTypesForScope,
   getChatInitials,
+  getChatMessageSenderLabel,
   getChatSelectionStorageKey,
   getConversationTitle,
   getLastMessagePreview,
   isReadOnlyChatConversation,
   normalizeChatConversationScope,
   resolveChatConversationSelection,
+  resolvePendingChatSendRequest,
 } from './utils';
 
 const baseMessage: ChatMessage = {
@@ -53,6 +56,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 +214,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 +248,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 +270,7 @@ describe('chat utils', () => {
       'channel',
       'ai',
     ]);
+    expect(getChatConversationTypesForScope('external')).toEqual(['channel']);
     expect(
       filterChatConversationsByScope(
         [direct, group, channel, ai],
@@ -250,6 +321,42 @@ 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('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>
   );

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

@@ -10,7 +10,7 @@ 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';
@@ -45,6 +45,7 @@ import {
   CHAT_CONVERSATION_TYPE_FILTERS,
   type ChatConversationArchiveFilter,
   type ChatConversationScope,
+  canPersistChatReadState,
   filterChatConversations,
   getChatConversationTypesForScope,
   getChatSelectionStorageKey,
@@ -52,14 +53,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 +73,10 @@ interface ChatWorkspaceProps {
 export function ChatWorkspace({
   className,
   defaultConversationScope,
+  enforcedConversationScope,
   currentUserId,
   enableRootIntegrations,
+  readOnly = false,
   showSidebar = true,
   variant = 'web',
   wsId,
@@ -90,20 +97,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 +169,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,
@@ -281,8 +295,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 +310,8 @@ export function ChatWorkspace({
     latestPersistedMessageId,
     markConversationRead,
     selectedMembership,
-    selectedReadOnly,
+    selectedExternalConversation,
+    conversationReadOnly,
   ]);
 
   const selectedTitle = selectedConversation
@@ -307,11 +328,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 +490,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}
@@ -556,10 +589,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={conversationScope !== 'external'}
                 disabled={!activeConversationId}
                 isSending={sendMessage.isPending}
                 isUploading={uploadAttachment.isPending}
@@ -569,7 +605,13 @@ export function ChatWorkspace({
             )}
           </>
         ) : (
-          <EmptyConversationState onCreate={() => setCreateOpen(true)} />
+          <EmptyConversationState
+            onCreate={
+              conversationScope === 'external'
+                ? undefined
+                : () => setCreateOpen(true)
+            }
+          />
         )}
       </div>
 

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/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-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) {