feat: add telegram-style resource stream

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -0,0 +1,35 @@
+import type { Post } from "../../../types/post";
+import { useLightbox } from "../overlays/ImageLightbox";
+import { autolink } from "../utils/autolink";
+
+export function ImageWithTextBubble({ post }: { post: Post }) {
+  const { openLightbox } = useLightbox();
+  const att = post.attachments[0];
+  if (!att) return null;
+  const ratio =
+    att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <button
+        type="button"
+        onClick={() => openLightbox([att], 0)}
+        className="relative block w-full overflow-hidden rounded-xl max-h-[240px] min-[440px]:max-h-[270px] md:max-h-[320px] lg:max-h-[360px]"
+        aria-label={att.filename}
+      >
+        <img
+          src={att.url}
+          alt={att.filename}
+          loading="lazy"
+          className="h-full w-full object-cover"
+          style={{ aspectRatio: ratio }}
+        />
+      </button>
+      {post.text ? (
+        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+          {autolink(post.text)}
+        </div>
+      ) : null}
+    </div>
+  );
+}