@tuturuuu/ui 0.25.0 → 0.25.3

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

@@ -1,16 +1,27 @@
 'use client';
 
-import { LoaderCircle, Paperclip, Send, Upload, X } from '@tuturuuu/icons';
+import { LoaderCircle, Paperclip, Send } from '@tuturuuu/icons';
 import type { ChatAttachmentDraft } from '@tuturuuu/internal-api';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
-import { type ClipboardEvent, type FormEvent, useRef, useState } from 'react';
+import {
+  type ClipboardEvent,
+  type DragEvent,
+  type FormEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { Button } from '../button';
 import { toast } from '../sonner';
 import { Textarea } from '../textarea';
+import { ComposerAttachmentChip } from './composer-attachment-chip';
 import { formatFileSize } from './utils';
 
 const MAX_COMPOSER_ATTACHMENTS = 20;
+// Mirrors MAX_AI_ATTACHMENT_BYTES on the server. Rejecting here means the user
+// finds out before the upload instead of after it.
+const MAX_ATTACHMENT_BYTES = 100 * 1024 * 1024;
 
 interface MessageComposerProps {
   allowAttachments?: boolean;
@@ -37,6 +48,32 @@ export function MessageComposer({
   const [content, setContent] = useState('');
   const [attachments, setAttachments] = useState<ChatAttachmentDraft[]>([]);
   const [uploadingCount, setUploadingCount] = useState(0);
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+  // Thumbnails come from the local File, so they render immediately and cost
+  // no round trip. Object URLs leak unless revoked, hence the cleanup below.
+  const [previewUrls, setPreviewUrls] = useState<Record<string, string>>({});
+  const previewUrlsRef = useRef(previewUrls);
+  previewUrlsRef.current = previewUrls;
+
+  useEffect(
+    () => () => {
+      for (const url of Object.values(previewUrlsRef.current)) {
+        URL.revokeObjectURL(url);
+      }
+    },
+    []
+  );
+
+  function releasePreview(path: string) {
+    setPreviewUrls((current) => {
+      const url = current[path];
+      if (!url) return current;
+      URL.revokeObjectURL(url);
+      const next = { ...current };
+      delete next[path];
+      return next;
+    });
+  }
 
   const busy = disabled || isSending || isUploading || uploadingCount > 0;
   const canSend = content.trim().length > 0 || attachments.length > 0;
@@ -50,6 +87,7 @@ export function MessageComposer({
 
     setContent('');
     setAttachments([]);
+    for (const draft of draftAttachments) releasePreview(draft.path);
 
     try {
       await onSend({
@@ -65,19 +103,47 @@ export function MessageComposer({
   async function handleFileCandidates(files: File[]) {
     if (!allowAttachments || disabled || files.length === 0) return;
 
+    const withinSizeLimit = files.filter(
+      (file) => file.size <= MAX_ATTACHMENT_BYTES
+    );
+    if (withinSizeLimit.length < files.length) {
+      toast.error(
+        t('attachment_too_large', {
+          size: formatFileSize(MAX_ATTACHMENT_BYTES),
+        })
+      );
+    }
+    if (withinSizeLimit.length === 0) return;
+
     const remainingSlots = Math.max(
       MAX_COMPOSER_ATTACHMENTS - attachments.length,
       0
     );
-    const nextFiles = files.slice(0, remainingSlots);
-    if (nextFiles.length === 0) return;
+    if (remainingSlots === 0) {
+      toast.error(
+        t('attachment_limit_reached', { count: MAX_COMPOSER_ATTACHMENTS })
+      );
+      return;
+    }
+
+    const nextFiles = withinSizeLimit.slice(0, remainingSlots);
+    if (nextFiles.length < withinSizeLimit.length) {
+      toast.error(
+        t('attachment_limit_reached', { count: MAX_COMPOSER_ATTACHMENTS })
+      );
+    }
 
     setUploadingCount((count) => count + nextFiles.length);
     const uploaded: ChatAttachmentDraft[] = [];
 
     for (const file of nextFiles) {
       try {
-        uploaded.push(await onUploadFile(file));
+        const draft = await onUploadFile(file);
+        uploaded.push(draft);
+        if (file.type.startsWith('image/') || file.type.startsWith('video/')) {
+          const url = URL.createObjectURL(file);
+          setPreviewUrls((current) => ({ ...current, [draft.path]: url }));
+        }
       } catch {
         toast.error(t('upload_failed'));
       } finally {
@@ -94,6 +160,17 @@ export function MessageComposer({
     }
   }
 
+  function handleDrop(event: DragEvent<HTMLFormElement>) {
+    setIsDraggingOver(false);
+    if (!allowAttachments || disabled) return;
+
+    const dropped = Array.from(event.dataTransfer?.files ?? []);
+    if (dropped.length === 0) return;
+
+    event.preventDefault();
+    void handleFileCandidates(dropped);
+  }
+
   async function handleFiles(files: FileList | null) {
     if (!files?.length) return;
     await handleFileCandidates(Array.from(files));
@@ -122,38 +199,49 @@ export function MessageComposer({
   }
 
   return (
-    <form className="border-t bg-background/95 p-3" onSubmit={handleSubmit}>
+    <form
+      className={cn(
+        'relative border-t bg-background/95 p-3 transition-colors',
+        isDraggingOver && 'bg-primary/5 ring-2 ring-primary ring-inset'
+      )}
+      onDragLeave={(event) => {
+        // Only clear when the pointer actually leaves the composer, not when it
+        // crosses into a child element.
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          setIsDraggingOver(false);
+        }
+      }}
+      onDragOver={(event) => {
+        if (!allowAttachments || disabled) return;
+        if (!Array.from(event.dataTransfer?.types ?? []).includes('Files')) {
+          return;
+        }
+        event.preventDefault();
+        setIsDraggingOver(true);
+      }}
+      onDrop={handleDrop}
+      onSubmit={handleSubmit}
+    >
+      {isDraggingOver && (
+        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-background/80 font-medium text-primary text-sm">
+          {t('drop_files_here')}
+        </div>
+      )}
       {attachments.length > 0 && (
         <div className="mb-2 flex flex-wrap gap-2">
           {attachments.map((attachment) => (
-            <div
-              className="flex min-w-0 max-w-full items-center gap-2 overflow-hidden rounded-md border bg-muted/40 px-2 py-1 text-sm"
+            <ComposerAttachmentChip
+              attachment={attachment}
               key={attachment.path}
-            >
-              <Upload className="size-4 shrink-0 text-muted-foreground" />
-              <span className="min-w-0 truncate" title={attachment.filename}>
-                {attachment.filename}
-              </span>
-              {attachment.sizeBytes ? (
-                <span className="shrink-0 text-muted-foreground text-xs">
-                  {formatFileSize(attachment.sizeBytes)}
-                </span>
-              ) : null}
-              <Button
-                aria-label={t('remove_attachment')}
-                className="size-6"
-                onClick={() =>
-                  setAttachments((current) =>
-                    current.filter((item) => item.path !== attachment.path)
-                  )
-                }
-                size="icon"
-                type="button"
-                variant="ghost"
-              >
-                <X className="size-3.5" />
-              </Button>
-            </div>
+              onRemove={() => {
+                releasePreview(attachment.path);
+                setAttachments((current) =>
+                  current.filter((item) => item.path !== attachment.path)
+                );
+              }}
+              previewUrl={previewUrls[attachment.path]}
+              removeLabel={t('remove_attachment')}
+            />
           ))}
         </div>
       )}

package/src/components/ui/chat/message-links.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { MessageText } from './message-links';
+
+describe('MessageText', () => {
+  it('renders HTML-like message content as inert text', () => {
+    const { container } = render(
+      <MessageText content="<img src=x onerror=alert(1)>" />
+    );
+
+    expect(container.querySelector('img')).toBeNull();
+    expect(container.textContent).toBe('<img src=x onerror=alert(1)>');
+  });
+});

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

@@ -4,6 +4,10 @@ import type {
   ChatMessage,
   ChatUserProfile,
 } from '@tuturuuu/internal-api';
+import {
+  decodeExternalChatContent,
+  getChatMessageDisplayContent,
+} from './external-message-content';
 
 export type ChatConversationScope = 'external' | 'personal' | 'workspaces';
 export type ChatConversationArchiveFilter = 'active' | 'all' | 'archived';
@@ -102,6 +106,12 @@ export function getChatConversationQueueDetails(
 ) {
   const latestMessage = conversation.latestMessage;
   const phone = readNonEmptyString(conversation.metadata.phone);
+  const previewContent = latestMessage
+    ? decodeExternalChatContent(
+        latestMessage.content,
+        conversation.metadata.externalChat === true
+      )
+    : null;
 
   return {
     deliveryState: latestMessage
@@ -110,7 +120,7 @@ export function getChatConversationQueueDetails(
     phone,
     preview: latestMessage?.deletedAt
       ? null
-      : (readNonEmptyString(latestMessage?.content) ??
+      : (readNonEmptyString(previewContent) ??
         readNonEmptyString(latestMessage?.attachments[0]?.filename)),
     timestamp: latestMessage?.createdAt ?? conversation.updatedAt,
   };
@@ -210,7 +220,7 @@ export function getChatMessageSenderLabel(
     const displayName =
       readNonEmptyString(externalSender.displayName) ??
       readNonEmptyString(externalSender.name);
-    if (displayName) return displayName;
+    if (displayName) return decodeExternalChatContent(displayName, true);
   }
 
   return message.metadata?.externalChat === true
@@ -234,9 +244,29 @@ export function getConversationTitle(
     channel?: string;
     chat?: string;
     direct?: string;
+    external?: string;
     group?: string;
   }
 ) {
+  if (conversation.metadata.externalChat === true) {
+    const profileTitle =
+      readNonEmptyString(conversation.metadata.displayName) ??
+      readNonEmptyString(conversation.metadata.name);
+    if (profileTitle) return decodeExternalChatContent(profileTitle, true);
+
+    const persistedTitle = readNonEmptyString(conversation.title);
+    if (persistedTitle && !isGenericExternalTitle(persistedTitle)) {
+      return decodeExternalChatContent(persistedTitle, true);
+    }
+
+    const reference = conversation.id
+      .replaceAll('-', '')
+      .slice(-6)
+      .toUpperCase();
+    const label = fallback?.external ?? fallback?.channel ?? 'External visitor';
+    return reference ? `${label} #${reference}` : label;
+  }
+
   if (conversation.title) return conversation.title;
 
   if (conversation.type === 'direct') {
@@ -257,6 +287,11 @@ export function getConversationTitle(
   return fallback?.chat ?? 'Untitled chat';
 }
 
+function isGenericExternalTitle(title: string) {
+  const normalized = title.trim().toLowerCase();
+  return normalized === 'external visitor' || normalized === 'website visitor';
+}
+
 export function getCurrentChatConversationMember(
   conversation: ChatConversation,
   currentUserId: string
@@ -412,7 +447,8 @@ export function getLastMessagePreview(
   if (message.deletedAt) return labels.messageDeleted ?? '';
   if (message.kind === 'system')
     return labels.systemEvent ?? labels.message ?? '';
-  if (message.content.trim()) return message.content.trim();
+  const displayContent = getChatMessageDisplayContent(message).trim();
+  if (displayContent) return displayContent;
   if (message.attachments.length > 0) {
     return message.attachments[0]?.filename ?? labels.attachment ?? '';
   }

package/src/components/ui/custom/__tests__/workspace-select-helpers.test.ts

@@ -115,14 +115,10 @@ describe('mergeWorkspaceSelectWorkspaces', () => {
   });
 
   it('keeps workspace fallback images outside Radix AvatarImage context', () => {
-    const workspaceSelectSource = readFileSync(
-      join(process.cwd(), 'src/components/ui/custom/workspace-select.tsx'),
+    const workspaceIconSource = readFileSync(
+      join(process.cwd(), 'src/components/ui/custom/workspace-select-icon.tsx'),
       'utf8'
     );
-    const workspaceIconSource = workspaceSelectSource.slice(
-      workspaceSelectSource.indexOf('function WorkspaceIcon'),
-      workspaceSelectSource.indexOf('export function WorkspaceSelect')
-    );
 
     expect(workspaceIconSource).toContain('<AvatarFallback');
     expect(workspaceIconSource).toContain('<Image');

package/src/components/ui/custom/__tests__/workspace-select-invitations.test.tsx

@@ -0,0 +1,141 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { WorkspaceInvitationRecord } from '@tuturuuu/internal-api/workspaces';
+import { NextIntlClientProvider } from 'next-intl';
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Command, CommandInput, CommandList } from '../../command';
+import {
+  useWorkspaceInvitations,
+  WorkspaceInvitationItems,
+} from '../workspace-select-invitations';
+
+const mocks = vi.hoisted(() => ({
+  acceptWorkspaceInvite: vi.fn(),
+  declineWorkspaceInvite: vi.fn(),
+  listWorkspaceInvitations: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/internal-api/workspaces', () => ({
+  acceptWorkspaceInvite: mocks.acceptWorkspaceInvite,
+  declineWorkspaceInvite: mocks.declineWorkspaceInvite,
+  listWorkspaceInvitations: mocks.listWorkspaceInvitations,
+}));
+
+const invitation: WorkspaceInvitationRecord = {
+  createdAt: null,
+  matchedEmail: 'invitee@example.com',
+  source: 'email',
+  type: 'MEMBER',
+  workspace: {
+    avatar_url: null,
+    handle: 'acme',
+    id: 'workspace-1',
+    logo_url: null,
+    name: 'Acme',
+    personal: false,
+  },
+};
+
+const messages = {
+  common: {
+    guest_access: 'Guest',
+    members: 'Member',
+    retry: 'Retry',
+  },
+  'workspace-invitation': {
+    accept: 'Accept',
+    'accept-error': 'Could not accept',
+    'accept-success': 'Accepted',
+    'decline-error': 'Could not decline',
+    'decline-success': 'Declined',
+    'direct-invite': 'Direct invitation',
+    'email-invite': 'Email invitation',
+    'list-eyebrow': 'Pending invitations',
+    reject: 'Decline',
+  },
+};
+
+function Harness({
+  onAccepted = vi.fn(),
+  onDeclined = vi.fn(),
+}: {
+  onAccepted?: (value: WorkspaceInvitationRecord) => void;
+  onDeclined?: () => void;
+}) {
+  const controller = useWorkspaceInvitations({
+    cacheScope: 'user-1',
+    enabled: true,
+    onAccepted,
+    onDeclined,
+  });
+
+  return (
+    <Command>
+      <CommandInput aria-label="Search" />
+      <CommandList>
+        <WorkspaceInvitationItems
+          controller={controller}
+          fallbackLogoUrl="/logo.svg"
+        />
+      </CommandList>
+    </Command>
+  );
+}
+
+function renderHarness(props: Parameters<typeof Harness>[0] = {}) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <Harness {...props} />
+      </NextIntlClientProvider>
+    </QueryClientProvider>
+  );
+}
+
+describe('workspace invitation picker items', () => {
+  beforeAll(() => {
+    globalThis.ResizeObserver = class ResizeObserver {
+      disconnect() {}
+      observe() {}
+      unobserve() {}
+    };
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.listWorkspaceInvitations.mockResolvedValue({
+      invitations: [invitation],
+    });
+    mocks.acceptWorkspaceInvite.mockResolvedValue(undefined);
+    mocks.declineWorkspaceInvite.mockResolvedValue(undefined);
+  });
+
+  it('accepts the highlighted invitation and reports the accepted workspace', async () => {
+    const onAccepted = vi.fn();
+    renderHarness({ onAccepted });
+
+    const option = await screen.findByRole('option', { name: /Acme/ });
+    fireEvent.click(option);
+
+    await waitFor(() =>
+      expect(mocks.acceptWorkspaceInvite).toHaveBeenCalledWith('workspace-1')
+    );
+    await waitFor(() => expect(onAccepted).toHaveBeenCalledWith(invitation));
+  });
+
+  it('declines in place without activating the accept option', async () => {
+    const onDeclined = vi.fn();
+    renderHarness({ onDeclined });
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Decline' }));
+
+    await waitFor(() =>
+      expect(mocks.declineWorkspaceInvite).toHaveBeenCalledWith('workspace-1')
+    );
+    expect(mocks.acceptWorkspaceInvite).not.toHaveBeenCalled();
+    await waitFor(() => expect(onDeclined).toHaveBeenCalledOnce());
+  });
+});

package/src/components/ui/custom/education/courses/course-row-actions.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { useMutation } from '@tanstack/react-query';
-import type { Row } from '@tanstack/react-table';
 import { Ellipsis } from '@tuturuuu/icons';
 import { deleteWorkspaceCourse } from '@tuturuuu/internal-api';
 import type { WorkspaceCourse } from '@tuturuuu/types';
 import { Button } from '@tuturuuu/ui/button';
 import { CourseForm } from '@tuturuuu/ui/custom/education/courses/course-form';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
+import type { Row } from '@tuturuuu/ui/custom/tables/data-table';
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/ui/custom/education/modules/course-module-row-actions.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { useMutation } from '@tanstack/react-query';
-import type { Row } from '@tanstack/react-table';
 import { Ellipsis } from '@tuturuuu/icons';
 import { deleteWorkspaceCourseModule } from '@tuturuuu/internal-api';
 import type { WorkspaceCourseModule } from '@tuturuuu/types';
 import { Button } from '@tuturuuu/ui/button';
 import { CourseModuleForm } from '@tuturuuu/ui/custom/education/modules/course-module-form';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
+import type { Row } from '@tuturuuu/ui/custom/tables/data-table';
 import {
   DropdownMenu,
   DropdownMenuContent,