File Attachment Bubble

1"use client";
2 
3import * as React from "react";
4import { Button } from "@base-ui/react/button";
5import { Progress } from "@base-ui/react/progress";
6import { cn } from "@/lib/utils";
7import "@/components/ui/whatsapp/styles/whatsapp.css";
8import { type MessageStatus, MessageStatusIcon } from "./message-status";
9 
10type DownloadStatus = "idle" | "downloading" | "done";
11 
12interface FileAttachmentBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
13  variant?: "incoming" | "outgoing";
14  fileName: string;
15  fileSize?: string;
16  fileType?: string;
17  caption?: string;
18  timestamp?: string;
19  status?: MessageStatus;
20  downloadStatus?: DownloadStatus;
21  downloadProgress?: number;
22  showTail?: boolean;
23  /** Direct download URL — renders button as <a download> for native browser download */
24  downloadUrl?: string;
25  onDownload?: () => void;
26}
27 
28// File type → WDS color token
29const FILE_TYPE_COLORS: Record<string, string> = {
30  pdf:  "#ea0038",   // WDS red — PDF always red
31  doc:  "var(--wa-attachment-document)",
32  docx: "var(--wa-attachment-document)",
33  xls:  "var(--wa-attachment-poll)",
34  xlsx: "var(--wa-attachment-poll)",
35  ppt:  "var(--wa-attachment-camera)",
36  pptx: "var(--wa-attachment-camera)",
37  mp3:  "var(--wa-attachment-audio)",
38  wav:  "var(--wa-attachment-audio)",
39  m4a:  "var(--wa-attachment-audio)",
40  mp4:  "var(--wa-attachment-photo)",
41  mov:  "var(--wa-attachment-photo)",
42  jpg:  "var(--wa-gray-400)",
43  jpeg: "var(--wa-gray-400)",
44  png:  "var(--wa-attachment-contact)",
45  gif:  "var(--wa-attachment-sticker)",
46  zip:  "var(--wa-gray-600)",
47  rar:  "var(--wa-gray-600)",
48  hwp:  "var(--wa-gray-500)",
49};
50 
51function getFileColor(fileType?: string): string {
52  return FILE_TYPE_COLORS[fileType?.toLowerCase() ?? ""] ?? "var(--wa-gray-500)";
53}
54 
55function FileTypeIcon({ fileType }: { fileType?: string }) {
56  const color = getFileColor(fileType);
57  const label = (fileType ?? "FILE").toUpperCase().slice(0, 4);
58  return (
59    <div
60      className="flex h-[46px] w-[46px] shrink-0 flex-col items-center justify-center rounded-lg"
61      style={{ backgroundColor: color }}
62    >
63      <svg viewBox="0 0 24 24" width="18" height="18" fill="white" className="opacity-90">
64        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z" />
65      </svg>
66      <span className="mt-[1px] text-[8px] font-bold leading-none text-white opacity-90">
67        {label}
68      </span>
69    </div>
70  );
71}
72 
73function DownloadButton({
74  onClick,
75// … truncated