file-attachment

1import { useState } from "react";
2import {
3  IconX as X,
4  IconFileText as FileText,
5  IconFileCode as FileCode,
6  IconFileTypeJs as FileJson,
7  IconPhoto as ImageIcon,
8} from "@tabler/icons-react";
9import { cn } from "../utils/cn";
10import { ImageLightbox } from "../image-lightbox";
11 
12export type FileAttachmentProps = {
13  id: string;
14  filename: string;
15  size?: number;
16  isImage?: boolean;
17  url?: string;
18  onRemove?: () => void;
19  className?: string;
20  display?: "chip" | "image-only";
21  /**
22   * When true (default) clicking the image thumbnail opens a fullscreen
23   * preview. Set to false to render a non-interactive thumbnail.
24   */
25  enableImagePreview?: boolean;
26};
27 
28function formatFileSize(bytes: number): string {
29  if (bytes < 1024) return `${bytes} B`;
30  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
31  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
32}
33 
34type FileIconName = "image" | "code" | "data" | "text";
35 
36function getFileIconName(filename: string, isImage?: boolean): FileIconName {
37  if (isImage) return "image";
38 
39  const ext = filename.split(".").pop()?.toLowerCase();
40 
41  if (
42    [
43      "js",
44      "ts",
45      "jsx",
46      "tsx",
47      "py",
48      "rb",
49      "go",
50      "rs",
51      "java",
52      "kt",
53      "swift",
54      "c",
55      "cpp",
56      "h",
57      "hpp",
58      "cs",
59      "php",
60    ].includes(ext || "")
61  ) {
62    return "code";
63  }
64 
65  if (["json", "yaml", "yml", "xml"].includes(ext || "")) {
66    return "data";
67  }
68 
69  return "text";
70}
71 
72function renderFileIcon(iconName: FileIconName) {
73  switch (iconName) {
74    case "image":
75      return <ImageIcon className="size-4 text-muted-foreground" />;
76    case "code":
77      return <FileCode className="size-4 text-muted-foreground" />;
78    case "data":
79      return <FileJson className="size-4 text-muted-foreground" />;
80    default:
81      return <FileText className="size-4 text-muted-foreground" />;
82  }
83}
84 
85export function FileAttachment({
86  id,
87  filename,
88  size,
89  isImage,
90  url,
91  onRemove,
92  className,
93  display = "chip",
94  enableImagePreview = true,
95}: FileAttachmentProps) {
96  const [isHovered, setIsHovered] = useState(false);
97  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
98  const iconName = getFileIconName(filename, isImage);
99  const isImageOnly = display === "image-only" && isImage && !!url;
100  const canPreview = Boolean(enableImagePreview && isImage && url);
101 
102  const openLightbox = (event: React.MouseEvent) => {
103    event.stopPropagation();
104// … truncated