feat: support sending and preview links

js/src/features/particles/text-particle-view.tsx

@@ -1,6 +1,11 @@
 import { useEffect, useRef } from "react";
 import type { Particle } from "@/api/types";
 import { cn } from "@/lib/utils";
+import { useFirstLinkMetadata } from "@/hooks/use-link-metadata";
+import {
+  LinkPreviewCard,
+  LinkPreviewCardSkeleton,
+} from "@/components/link-preview-card";
 
 type TextParticle = Extract<Particle, { type: "text" }>;
 
@@ -11,22 +16,27 @@ interface TextParticleViewProps {
   onProgress?: (ratio: number) => void;
 }
 
-const WORDS_PER_MINUTE = 200;
+// Characters per minute (~1000 cpm ≈ 200 wpm at ~5 chars/word)
+const CHARS_PER_MINUTE = 1000;
 const MIN_DURATION_S = 3;
 const MAX_DURATION_S = 15;
 const TICK_MS = 100;
+const LINK_EXTRA_DURATION_S = 3;
 
-function computeReadDuration(text: string): number {
-  const wordCount = text.trim().split(/\s+/).length;
-  const seconds = (wordCount / WORDS_PER_MINUTE) * 60;
+// Below this threshold: immersive centered display
+// Above: contained left-aligned card
+const IMMERSIVE_CHAR_LIMIT = 120;
+
+function computeReadDuration(text: string, hasLink: boolean): number {
+  const base = (text.length / CHARS_PER_MINUTE) * 60;
+  const seconds = hasLink ? base + LINK_EXTRA_DURATION_S : base;
   return Math.min(Math.max(seconds, MIN_DURATION_S), MAX_DURATION_S);
 }
 
-function getTextStyle(length: number) {
-  if (length < 50) return { size: "text-5xl", weight: "font-semibold" };
-  if (length < 150) return { size: "text-3xl", weight: "font-semibold" };
-  if (length < 300) return { size: "text-2xl", weight: "font-normal" };
-  return { size: "text-lg", weight: "font-normal" };
+function getImmersiveTextStyle(length: number) {
+  if (length < 30) return { size: "text-5xl", weight: "font-semibold" };
+  if (length < 70) return { size: "text-3xl", weight: "font-semibold" };
+  return { size: "text-2xl", weight: "font-normal" };
 }
 
 export function TextParticleView({
@@ -35,8 +45,11 @@ export function TextParticleView({
   onEnded,
   onProgress,
 }: TextParticleViewProps) {
-  const style = getTextStyle(particle.properties.content.length);
-  const durationS = computeReadDuration(particle.properties.content);
+  const content = particle.properties.content;
+  const { data: metadata, isLoading, url: firstUrl } = useFirstLinkMetadata(content);
+  const hasLink = !!firstUrl;
+  const immersive = content.length < IMMERSIVE_CHAR_LIMIT;
+  const durationS = computeReadDuration(content, hasLink);
   const elapsedRef = useRef(0);
 
   // Reset elapsed when particle changes
@@ -61,17 +74,51 @@ export function TextParticleView({
     return () => clearInterval(interval);
   }, [paused, durationS, onEnded, onProgress, particle.id]);
 
+  const linkPreview = (
+    <>
+      {isLoading && <LinkPreviewCardSkeleton />}
+      {metadata && <LinkPreviewCard metadata={metadata} />}
+    </>
+  );
+
+  // Content is just a bare URL with no surrounding text
+  const linkOnly = hasLink && content.trim() === firstUrl;
+
+  if (linkOnly) {
+    return (
+      <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
+        {linkPreview}
+      </div>
+    );
+  }
+
+  if (immersive && !hasLink) {
+    const style = getImmersiveTextStyle(content.length);
+    return (
+      <div className="flex h-full w-full flex-col items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
+        <p
+          className={cn(
+            "max-w-2xl break-words text-center leading-relaxed text-white",
+            style.size,
+            style.weight,
+          )}
+        >
+          {content}
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
-      <p
-        className={cn(
-          "max-w-2xl text-center leading-relaxed text-white",
-          style.size,
-          style.weight,
-        )}
-      >
-        {particle.properties.content}
-      </p>
+      <div className="flex max-h-full w-full max-w-3xl items-center gap-6 px-2">
+        <div className="flex-1 overflow-y-auto rounded-2xl bg-white/10 p-5 backdrop-blur-md">
+          <p className="break-words text-base leading-relaxed text-white">
+            {content}
+          </p>
+        </div>
+        {hasLink && <div className="shrink-0">{linkPreview}</div>}
+      </div>
     </div>
   );
 }