@tuturuuu/ui 0.25.2 → 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/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,

package/src/components/ui/custom/structure.test.tsx

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { Structure } from './structure';
 
@@ -30,4 +30,58 @@ describe('Structure', () => {
       'md:p-4'
     );
   });
+
+  it('keeps the account and notification controls in the collapsed footer', () => {
+    const { container } = render(
+      <Structure
+        actions={<span>Expanded account actions</span>}
+        isCollapsed
+        notificationPopover={<button type="button">Notifications</button>}
+        setIsCollapsed={vi.fn()}
+        userPopover={<button type="button">Account</button>}
+      >
+        <span>Page content</span>
+      </Structure>
+    );
+
+    const sidebar = container.querySelector('aside');
+    expect(sidebar).not.toBeNull();
+    const sidebarQueries = within(sidebar as HTMLElement);
+
+    expect(
+      sidebarQueries.getByRole('button', { name: 'Account' })
+    ).toBeVisible();
+    expect(
+      sidebarQueries.getByRole('button', { name: 'Notifications' })
+    ).toBeVisible();
+    expect(
+      sidebarQueries.queryByText('Expanded account actions')
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders the combined account actions only once when expanded', () => {
+    const { container } = render(
+      <Structure
+        actions={<span>Expanded account actions</span>}
+        isCollapsed={false}
+        notificationPopover={<button type="button">Notifications</button>}
+        setIsCollapsed={vi.fn()}
+        userPopover={<button type="button">Account</button>}
+      >
+        <span>Page content</span>
+      </Structure>
+    );
+
+    const sidebar = container.querySelector('aside');
+    expect(sidebar).not.toBeNull();
+    const sidebarQueries = within(sidebar as HTMLElement);
+
+    expect(sidebarQueries.getByText('Expanded account actions')).toBeVisible();
+    expect(
+      sidebarQueries.queryByRole('button', { name: 'Notifications' })
+    ).not.toBeInTheDocument();
+    expect(
+      sidebarQueries.queryByRole('button', { name: 'Account' })
+    ).not.toBeInTheDocument();
+  });
 });

package/src/components/ui/custom/structure.tsx

@@ -17,6 +17,7 @@ interface StructureProps {
   sidebarContent?: ReactNode;
   actions?: ReactNode;
   userPopover?: ReactNode;
+  notificationPopover?: ReactNode;
   sidebarUtility?: ReactNode;
   feedbackButton?: ReactNode;
   children: ReactNode;
@@ -40,6 +41,7 @@ export function Structure({
   sidebarContent,
   actions,
   userPopover,
+  notificationPopover,
   sidebarUtility,
   feedbackButton,
   children,
@@ -191,7 +193,14 @@ export function Structure({
                   isCollapsed ? 'justify-center' : ''
                 )}
               >
-                {isCollapsed ? userPopover : actions}
+                {isCollapsed ? (
+                  <div className="flex w-full flex-col items-center gap-1">
+                    {userPopover}
+                    {notificationPopover}
+                  </div>
+                ) : (
+                  actions
+                )}
               </div>
 
               {!hideSizeToggle && (

package/src/components/ui/custom/tables/custom-data-table.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { RowData } from '@tanstack/react-table';
 import {
   DataTable,
   type DataTableProps,
@@ -8,7 +9,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 
-function CustomDataTableInner<TData, TValue>({
+function CustomDataTableInner<TData extends RowData, TValue>({
   namespace,
   hideToolbar,
   hidePagination,
@@ -119,7 +120,7 @@ function CustomDataTableInner<TData, TValue>({
   );
 }
 
-export function CustomDataTable<TData, TValue>(
+export function CustomDataTable<TData extends RowData, TValue>(
   props: DataTableProps<TData, TValue>
 ) {
   return (

package/src/components/ui/custom/tables/data-table-column-header.tsx

@@ -1,4 +1,4 @@
-import type { Column } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp, ChevronDown, EyeOff } from '@tuturuuu/icons';
 import { cn } from '@tuturuuu/utils/format';
 import type React from 'react';
@@ -10,15 +10,16 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../../dropdown-menu';
+import type { Column } from './data-table';
 
-interface DataTableColumnHeaderProps<TData, TValue>
+interface DataTableColumnHeaderProps<TData extends RowData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {
   t: any;
   column: Column<TData, TValue>;
   title?: string;
 }
 
-export function DataTableColumnHeader<TData, TValue>({
+export function DataTableColumnHeader<TData extends RowData, TValue>({
   t,
   column,
   title,

package/src/components/ui/custom/tables/data-table-faceted-filter.tsx

@@ -1,4 +1,4 @@
-import type { Column } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { Check, PlusCircle } from '@tuturuuu/icons';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
@@ -15,8 +15,9 @@ import {
 } from '../../command';
 import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
 import { Separator } from '../../separator';
+import type { Column } from './data-table';
 
-interface DataTableFacetedFilterProps<TData, TValue> {
+interface DataTableFacetedFilterProps<TData extends RowData, TValue> {
   column?: Column<TData, TValue>;
   title?: string;
   options: {
@@ -26,7 +27,7 @@ interface DataTableFacetedFilterProps<TData, TValue> {
   }[];
 }
 
-export function DataTableFacetedFilter<TData, TValue>({
+export function DataTableFacetedFilter<TData extends RowData, TValue>({
   column,
   title,
   options,

package/src/components/ui/custom/tables/data-table-pagination.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Table } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import {
   ArrowLeftToLine,
   ArrowRightToLine,
@@ -17,8 +17,9 @@ import {
   SelectValue,
 } from '../../select';
 import { Separator } from '../../separator';
+import type { Table } from './data-table';
 
-interface DataTablePaginationProps<TData> {
+interface DataTablePaginationProps<TData extends RowData> {
   table?: Table<TData>;
   count?: number | null;
   className?: string;
@@ -31,7 +32,7 @@ interface DataTablePaginationProps<TData> {
   setParams?: (params: { page?: number; pageSize?: string }) => void;
 }
 
-export function DataTablePagination<TData>({
+export function DataTablePagination<TData extends RowData>({
   table,
   count,
   className,
@@ -46,9 +47,8 @@ export function DataTablePagination<TData>({
   // When setParams is provided, we're in server-side pagination mode
   const isServerSide = !!setParams;
 
-  const pageIndex =
-    pageIndexProp ?? table?.getState().pagination.pageIndex ?? 0;
-  const pageSize = pageSizeProp ?? table?.getState().pagination.pageSize ?? 10;
+  const pageIndex = pageIndexProp ?? table?.state.pagination.pageIndex ?? 0;
+  const pageSize = pageSizeProp ?? table?.state.pagination.pageSize ?? 10;
   const pageCount = pageCountProp ?? table?.getPageCount() ?? 0;
 
   // filter duplicate and sort sizes

package/src/components/ui/custom/tables/data-table-toolbar.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import type { Table } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { Download, RotateCcw, Upload } from '@tuturuuu/icons';
 import { Dialog, DialogContent, DialogTrigger } from '@tuturuuu/ui/dialog';
 import type { ReactNode } from 'react';
 import { Button } from '../../button';
 import SearchBar from '../search-bar';
+import type { Table } from './data-table';
 import { DataTableCreateButton } from './data-table-create-button';
 import { DataTableRefreshButton } from './data-table-refresh-button';
 import { DataTableViewOptions } from './data-table-view-options';
@@ -19,7 +20,7 @@ type DataTableTranslator = ((key: string) => string) & {
   has?: (key: string) => boolean;
 };
 
-interface DataTableToolbarProps<TData> {
+interface DataTableToolbarProps<TData extends RowData> {
   hasData: boolean;
   newObjectTitle?: string;
   editContent?: ReactNode;
@@ -42,7 +43,7 @@ interface DataTableToolbarProps<TData> {
   resetParams: () => void;
 }
 
-export function DataTableToolbar<TData>({
+export function DataTableToolbar<TData extends RowData>({
   hasData,
   newObjectTitle,
   editContent,
@@ -65,8 +66,7 @@ export function DataTableToolbar<TData>({
   const isFiltered =
     isFilteredProp !== undefined
       ? isFilteredProp
-      : table.getState().columnFilters.length > 0 ||
-        (defaultQuery?.length || 0) > 0;
+      : table.state.columnFilters.length > 0 || (defaultQuery?.length || 0) > 0;
 
   return (
     <div className="flex flex-col items-start justify-between gap-2 lg:flex-row">

package/src/components/ui/custom/tables/data-table-view-options.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
-import type { Table } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { Settings2, UserCog } from '@tuturuuu/icons';
 import { Fragment } from 'react';
 import { Button } from '../../button';
@@ -13,15 +13,16 @@ import {
   DropdownMenuSeparator,
 } from '../../dropdown-menu';
 import { ScrollArea } from '../../scroll-area';
+import type { Table } from './data-table';
 
-interface DataTableViewOptionsProps<TData> {
+interface DataTableViewOptionsProps<TData extends RowData> {
   table: Table<TData>;
   extraColumns?: any[];
   namespace: string | undefined;
   t?: any;
 }
 
-export function DataTableViewOptions<TData>({
+export function DataTableViewOptions<TData extends RowData>({
   t,
   namespace,
   table,