Arkie-Library-Frontend/src/components/messageStream/bubbles/FileDocBubble.tsx

import { LoaderCircle } from "lucide-react";
import { DownloadCloudIcon } from "../../icons/DownloadCloudIcon";
import { useState } from "react";
import { useI18n } from "../../../i18n";
import type { Attachment, Post } from "../../../types/post";
import { downloadAttachment } from "../utils/downloadFile";
import { fileIcon } from "../utils/fileIcon";
import {
  filenameWithExtension,
  middleEllipsisFilename,
} from "../utils/filenameDisplay";
import { formatBytes } from "../utils/formatBytes";
import { postDisplayText } from "../utils/postText";

function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
  const { t } = useI18n();
  const isImageAsDoc = att.mime.startsWith("image/");
  const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
  const displayFilename = filenameWithExtension(att.filename, att.mime);
  const [isDownloading, setIsDownloading] = useState(false);

  const handleDownload = () => {
    if (isDownloading) return;
    setIsDownloading(true);
    void downloadAttachment(postId, att.id, displayFilename)
      .finally(() => setIsDownloading(false))
      .catch(() => {});
  };

  return (
    <div className="group flex items-center gap-2 rounded-xl px-1 py-0.5 transition hover:bg-white/5">
      <button
        type="button"
        onClick={handleDownload}
        disabled={isDownloading}
        className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full disabled:cursor-wait md:h-12 md:w-12"
        aria-label={
          isDownloading ? t("downloading") : `Download ${att.filename}`
        }
        aria-busy={isDownloading}
      >
        {isImageAsDoc && att.thumbnailUrl ? (
          <img
            src={att.thumbnailUrl}
            alt=""
            className="absolute inset-0 h-full w-full object-cover"
          />
        ) : (
          <div
            className="flex h-full w-full items-center justify-center"
            style={{ backgroundColor: color }}
          >
            <Icon className="h-5 w-5 text-white" strokeWidth={2.2} />
          </div>
        )}
        <div className="absolute inset-0 flex items-center justify-center bg-black/35 text-white opacity-100 transition group-hover:bg-black/45 group-focus-visible:bg-black/45">
          {isDownloading ? (
            <LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2.3} />
          ) : (
            <DownloadCloudIcon className="h-4 w-4" />
          )}
        </div>
      </button>
      <div className="min-w-0 flex-1">
        <div
          className="truncate text-[14px] font-medium text-ark-gold2 group-hover:text-ark-gold"
          title={displayFilename}
        >
          {middleEllipsisFilename(displayFilename)}
        </div>
        <div className="text-[11px] text-neutral-400">
          {isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
        </div>
      </div>
    </div>
  );
}

export function FileDocBubble({ post }: { post: Post }) {
  const { lang } = useI18n();
  const text = postDisplayText(post, lang);
  return (
    <div className="flex flex-col gap-1">
      {post.attachments.map((att) => (
        <AttachmentRow key={att.id} postId={post.id} att={att} />
      ))}
      {text ? (
        <div className="message-stream-copyable-text mt-1 select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
          {text}
        </div>
      ) : null}
    </div>
  );
}