@tuturuuu/ui 0.0.4 → 0.2.0

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

@@ -0,0 +1,372 @@
+'use client';
+
+import {
+  Bot,
+  CheckCheck,
+  Copy,
+  FileJson,
+  FileText,
+  SmilePlus,
+  Trash2,
+} from '@tuturuuu/icons';
+import type { ChatAttachment, ChatMessage } from '@tuturuuu/internal-api';
+import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
+import { Button } from '../button';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from '../context-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { toast } from '../sonner';
+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';
+
+const REACTION_OPTIONS = [
+  '\u{1F44D}',
+  '\u{2764}\u{FE0F}',
+  '\u{1F602}',
+  '\u{1F389}',
+  '\u{1F64F}',
+  '\u{1F440}',
+] as const;
+
+export function MessageBubble({
+  currentUserId,
+  message,
+  onDeleteMessage,
+  onOpenAttachment,
+  onToggleReaction,
+  wsId,
+}: {
+  currentUserId: string;
+  message: ChatMessage;
+  onDeleteMessage?: (messageId: string) => void;
+  onOpenAttachment?: (attachment: ChatAttachment) => void;
+  onToggleReaction?: (messageId: string, emoji: string) => void;
+  wsId: string;
+}) {
+  const t = useTranslations('chat');
+  const isOwnMessage = message.senderId === currentUserId;
+  const senderName =
+    message.sender?.displayName ??
+    (message.kind === 'assistant' ? t('assistant_name') : t('unknown_sender'));
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div
+          className={cn(
+            'flex w-full gap-3',
+            isOwnMessage ? 'justify-end' : 'justify-start'
+          )}
+        >
+          {!isOwnMessage && (
+            <Avatar className="mt-1 size-8">
+              {message.kind === 'assistant' ? (
+                <AvatarFallback>
+                  <Bot className="size-4" />
+                </AvatarFallback>
+              ) : (
+                <>
+                  <AvatarImage
+                    alt={senderName}
+                    src={message.sender?.avatarUrl ?? undefined}
+                  />
+                  <AvatarFallback>{getChatInitials(senderName)}</AvatarFallback>
+                </>
+              )}
+            </Avatar>
+          )}
+
+          <div
+            className={cn(
+              'group flex min-w-0 max-w-[min(42rem,calc(100%-2.75rem))] flex-none flex-col gap-1',
+              isOwnMessage && 'items-end'
+            )}
+          >
+            <MessageMetadata
+              isOwnMessage={isOwnMessage}
+              message={message}
+              senderName={senderName}
+            />
+            <MessageContent
+              isOwnMessage={isOwnMessage}
+              message={message}
+              onOpenAttachment={onOpenAttachment}
+              wsId={wsId}
+            />
+            <ReactionBar
+              message={message}
+              onToggleReaction={onToggleReaction}
+            />
+          </div>
+        </div>
+      </ContextMenuTrigger>
+      <MessageContextMenu
+        message={message}
+        onDeleteMessage={onDeleteMessage}
+        senderName={senderName}
+      />
+    </ContextMenu>
+  );
+}
+
+function MessageContextMenu({
+  message,
+  onDeleteMessage,
+  senderName,
+}: {
+  message: ChatMessage;
+  onDeleteMessage?: (messageId: string) => void;
+  senderName: string;
+}) {
+  const t = useTranslations('chat');
+  const canDelete = Boolean(onDeleteMessage && !message.deletedAt);
+
+  async function copyMessage(format: 'json' | 'markdown' | 'text') {
+    try {
+      await navigator.clipboard.writeText(
+        serializeMessage({ format, message, senderName })
+      );
+      toast.success(t('message_copied'));
+    } catch {
+      toast.error(t('message_copy_failed'));
+    }
+  }
+
+  return (
+    <ContextMenuContent className="w-48">
+      <ContextMenuItem onSelect={() => copyMessage('text')}>
+        <Copy className="size-4" />
+        {t('copy_as_text')}
+      </ContextMenuItem>
+      <ContextMenuItem onSelect={() => copyMessage('markdown')}>
+        <FileText className="size-4" />
+        {t('copy_as_markdown')}
+      </ContextMenuItem>
+      <ContextMenuItem onSelect={() => copyMessage('json')}>
+        <FileJson className="size-4" />
+        {t('copy_as_json')}
+      </ContextMenuItem>
+      {canDelete ? (
+        <>
+          <ContextMenuSeparator />
+          <ContextMenuItem
+            onSelect={() => onDeleteMessage?.(message.id)}
+            variant="destructive"
+          >
+            <Trash2 className="size-4" />
+            {t('delete_message')}
+          </ContextMenuItem>
+        </>
+      ) : null}
+    </ContextMenuContent>
+  );
+}
+
+function serializeMessage({
+  format,
+  message,
+  senderName,
+}: {
+  format: 'json' | 'markdown' | 'text';
+  message: ChatMessage;
+  senderName: string;
+}) {
+  const attachmentLines = message.attachments.map(
+    (attachment) =>
+      `${attachment.filename}${attachment.fullPath ? ` (${attachment.fullPath})` : ''}`
+  );
+
+  if (format === 'json') {
+    return JSON.stringify(
+      {
+        attachments: message.attachments,
+        content: message.content,
+        createdAt: message.createdAt,
+        id: message.id,
+        kind: message.kind,
+        metadata: message.metadata,
+        sender: message.sender,
+      },
+      null,
+      2
+    );
+  }
+
+  if (format === 'markdown') {
+    return [
+      `**${senderName}** - ${new Date(message.createdAt).toISOString()}`,
+      message.content,
+      attachmentLines.length > 0
+        ? attachmentLines.map((line) => `- ${line}`).join('\n')
+        : '',
+    ]
+      .filter(Boolean)
+      .join('\n\n');
+  }
+
+  return [message.content, ...attachmentLines].filter(Boolean).join('\n');
+}
+
+function MessageMetadata({
+  isOwnMessage,
+  message,
+  senderName,
+}: {
+  isOwnMessage: boolean;
+  message: ChatMessage;
+  senderName: string;
+}) {
+  const t = useTranslations('chat');
+
+  return (
+    <div className="flex items-center gap-2 text-muted-foreground text-xs">
+      {!isOwnMessage && <span className="font-medium">{senderName}</span>}
+      <span>{formatChatTime(message.createdAt)}</span>
+      {message.editedAt && <span>{t('edited')}</span>}
+      {isOwnMessage && <CheckCheck className="size-3.5" />}
+    </div>
+  );
+}
+
+function MessageContent({
+  isOwnMessage,
+  message,
+  onOpenAttachment,
+  wsId,
+}: {
+  isOwnMessage: boolean;
+  message: ChatMessage;
+  onOpenAttachment?: (attachment: ChatAttachment) => void;
+  wsId: string;
+}) {
+  const t = useTranslations('chat');
+  const aiParts = getAiMessagePartsFromMetadata(message.metadata);
+
+  return (
+    <div
+      className={cn(
+        'w-fit max-w-full overflow-hidden rounded-md border px-3 py-2 text-sm leading-6 shadow-xs',
+        isOwnMessage
+          ? 'border-dynamic-blue/20 bg-dynamic-blue/10'
+          : 'bg-muted/40'
+      )}
+    >
+      {message.deletedAt ? (
+        <span className="text-muted-foreground italic">
+          {t('message_deleted')}
+        </span>
+      ) : (
+        <>
+          {(message.content || aiParts?.length) && (
+            <>
+              {message.kind === 'assistant' ? (
+                <AiMessageParts
+                  isStreaming={message.metadata?.streaming === true}
+                  parts={aiParts}
+                  textFallback={message.content}
+                />
+              ) : (
+                <MessageText content={message.content} />
+              )}
+              <MessageLinkPreviews
+                content={message.content}
+                conversationId={message.conversationId}
+                isOwnMessage={isOwnMessage}
+                wsId={wsId}
+              />
+            </>
+          )}
+          {message.attachments.length > 0 && (
+            <div className="mt-2 grid gap-2">
+              {message.attachments.map((attachment) => (
+                <MessageAttachmentButton
+                  attachment={attachment}
+                  key={attachment.id}
+                  onOpenAttachment={onOpenAttachment}
+                  wsId={wsId}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function ReactionBar({
+  message,
+  onToggleReaction,
+}: {
+  message: ChatMessage;
+  onToggleReaction?: (messageId: string, emoji: string) => void;
+}) {
+  const t = useTranslations('chat');
+  const [open, setOpen] = useState(false);
+
+  if (message.deletedAt || !onToggleReaction) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-1">
+      {message.reactions.map((reaction) => (
+        <Button
+          className="h-7 gap-1 rounded-full px-2 text-xs"
+          key={reaction.emoji}
+          onClick={() => onToggleReaction?.(message.id, reaction.emoji)}
+          type="button"
+          variant="outline"
+        >
+          <span>{reaction.emoji}</span>
+          <span>{reaction.count}</span>
+        </Button>
+      ))}
+      <Popover onOpenChange={setOpen} open={open}>
+        <PopoverTrigger asChild>
+          <Button
+            aria-label={t('react_to_message')}
+            className={cn(
+              'pointer-events-none size-7 rounded-full opacity-0 transition-opacity group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100',
+              open && 'pointer-events-auto opacity-100'
+            )}
+            size="icon"
+            type="button"
+            variant="ghost"
+          >
+            <SmilePlus className="size-3.5" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-auto p-1">
+          <div className="grid grid-cols-6 gap-1">
+            {REACTION_OPTIONS.map((emoji) => (
+              <Button
+                aria-label={t('add_reaction', { reaction: emoji })}
+                className="size-9 rounded-md text-lg"
+                key={emoji}
+                onClick={() => {
+                  onToggleReaction(message.id, emoji);
+                  setOpen(false);
+                }}
+                size="icon"
+                type="button"
+                variant="ghost"
+              >
+                {emoji}
+              </Button>
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

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

@@ -0,0 +1,213 @@
+'use client';
+
+import { LoaderCircle, Paperclip, Send, Upload, X } 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 { Button } from '../button';
+import { toast } from '../sonner';
+import { Textarea } from '../textarea';
+import { formatFileSize } from './utils';
+
+const MAX_COMPOSER_ATTACHMENTS = 20;
+
+interface MessageComposerProps {
+  disabled?: boolean;
+  isSending?: boolean;
+  isUploading?: boolean;
+  onSend: (payload: {
+    attachments: ChatAttachmentDraft[];
+    content: string;
+  }) => Promise<void> | void;
+  onUploadFile: (file: File) => Promise<ChatAttachmentDraft>;
+}
+
+export function MessageComposer({
+  disabled,
+  isSending,
+  isUploading,
+  onSend,
+  onUploadFile,
+}: MessageComposerProps) {
+  const t = useTranslations('chat');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [content, setContent] = useState('');
+  const [attachments, setAttachments] = useState<ChatAttachmentDraft[]>([]);
+  const [uploadingCount, setUploadingCount] = useState(0);
+
+  const busy = disabled || isSending || isUploading || uploadingCount > 0;
+  const canSend = content.trim().length > 0 || attachments.length > 0;
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!canSend || busy) return;
+
+    const draftContent = content.trim();
+    const draftAttachments = attachments;
+
+    setContent('');
+    setAttachments([]);
+
+    try {
+      await onSend({
+        attachments: draftAttachments,
+        content: draftContent,
+      });
+    } catch {
+      setContent(draftContent);
+      setAttachments(draftAttachments);
+    }
+  }
+
+  async function handleFileCandidates(files: File[]) {
+    if (disabled || files.length === 0) return;
+
+    const remainingSlots = Math.max(
+      MAX_COMPOSER_ATTACHMENTS - attachments.length,
+      0
+    );
+    const nextFiles = files.slice(0, remainingSlots);
+    if (nextFiles.length === 0) return;
+
+    setUploadingCount((count) => count + nextFiles.length);
+    const uploaded: ChatAttachmentDraft[] = [];
+
+    for (const file of nextFiles) {
+      try {
+        uploaded.push(await onUploadFile(file));
+      } catch {
+        toast.error(t('upload_failed'));
+      } finally {
+        setUploadingCount((count) => Math.max(0, count - 1));
+      }
+    }
+
+    if (uploaded.length > 0) {
+      setAttachments((current) => [...current, ...uploaded]);
+    }
+
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  }
+
+  async function handleFiles(files: FileList | null) {
+    if (!files?.length) return;
+    await handleFileCandidates(Array.from(files));
+  }
+
+  function handlePaste(event: ClipboardEvent<HTMLTextAreaElement>) {
+    if (disabled) return;
+
+    const clipboardData = event.clipboardData;
+    const candidates: File[] = [];
+
+    for (const item of Array.from(clipboardData.items)) {
+      if (item.kind !== 'file') continue;
+
+      const file = item.getAsFile();
+      if (file) candidates.push(file);
+    }
+
+    if (candidates.length === 0) return;
+
+    void handleFileCandidates(candidates);
+
+    if (!clipboardData.getData('text/plain')) {
+      event.preventDefault();
+    }
+  }
+
+  return (
+    <form className="border-t bg-background/95 p-3" onSubmit={handleSubmit}>
+      {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"
+              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>
+          ))}
+        </div>
+      )}
+
+      <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>
+        <Textarea
+          className={cn(
+            'max-h-40 min-h-10 resize-none text-sm',
+            disabled && 'opacity-60'
+          )}
+          disabled={disabled}
+          onChange={(event) => setContent(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+              event.preventDefault();
+              event.currentTarget.form?.requestSubmit();
+            }
+          }}
+          onPaste={handlePaste}
+          placeholder={t('message_placeholder')}
+          value={content}
+        />
+        <Button
+          aria-label={t('send_message')}
+          disabled={!canSend || busy}
+          size="icon"
+          type="submit"
+        >
+          {isSending ? (
+            <LoaderCircle className="size-4 animate-spin" />
+          ) : (
+            <Send className="size-4" />
+          )}
+        </Button>
+      </div>
+    </form>
+  );
+}