feat: add telegram-style resource stream

src/components/messageStream/bubbles/FileDocBubble.tsx

@@ -0,0 +1,64 @@
+import { Download } from "lucide-react";
+import type { Attachment, Post } from "../../../types/post";
+import { fileIcon } from "../utils/fileIcon";
+import { formatBytes } from "../utils/formatBytes";
+
+function AttachmentRow({ att }: { att: Attachment }) {
+  const isImageAsDoc = att.mime.startsWith("image/");
+  const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
+
+  return (
+    <a
+      href={att.url}
+      download={att.filename}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex items-center gap-2 rounded-xl px-1 py-0.5 transition hover:bg-white/5"
+    >
+      <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full md:h-12 md:w-12">
+        {isImageAsDoc && att.thumbnailUrl ? (
+          <>
+            <img
+              src={att.thumbnailUrl}
+              alt=""
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 flex items-center justify-center bg-black/35">
+              <Download className="h-4 w-4 text-white" />
+            </div>
+          </>
+        ) : (
+          <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>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[14px] font-medium text-ark-gold2 group-hover:text-ark-gold">
+          {att.filename}
+        </div>
+        <div className="text-[11px] text-neutral-400">
+          {formatBytes(att.sizeBytes)}
+        </div>
+      </div>
+    </a>
+  );
+}
+
+export function FileDocBubble({ post }: { post: Post }) {
+  return (
+    <div className="flex flex-col gap-1">
+      {post.attachments.map((att) => (
+        <AttachmentRow key={att.id} att={att} />
+      ))}
+      {post.text ? (
+        <div className="mt-1 whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+          {post.text}
+        </div>
+      ) : null}
+    </div>
+  );
+}