50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1eac,"use client"; import Image from "next/image"; import { type ReactNode, useEffect, useRef, useState } from "react"; import { Globe02Icon, HugeiconsIcon } from "@/components/icons"; import { Skeleton } from "@/components/ui/skeleton"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; interface UrlMetadata { title: string | null; description: string | null; favicon: string | null; website_name: string | null; website_image: string | null; url: string; } interface LinkPreviewProps { href: string; children: ReactNode | string | null; className?: string; /** * Endpoint that returns URL metadata as JSON. Receives the target URL as * a `url` query param and must return `{ title, description, image, logo, * publisher }` (microlink.io shape) or a compatible payload. Defaults to * the public microlink.io API. */ endpoint?: string; } // Module-level cache so repeat links (common in chat) don't refetch. const metadataCache = new Map(); const inFlight = new Map>(); const isEmail = (str: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str); const isValidHttpUrl = (str: string): boolean => { try { const url = new URL(str); return /^(http|https):$/.test(url.protocol); } catch { return false; } }; async function fetchUrlMetadata( href: string, endpoint: string, ): Promise { const cached = metadataCache.get(href); if (cached) return cached; const existing = inFlight.get(href); if (existing) return existing; const promise = (async () => { const apiUrl = `${endpoint}${endpoint.includes("?") ? "&" : "?"}url=${encodeURIComponent(href)}`; const response = await fetch(apiUrl); if (!response.ok) { throw new Error(`Failed to fetch metadata (${response.status})`); } const json = await response.json(); const data = json?.data ?? json; const urlObj = new URL(href); const metadata: UrlMetadata = { title: data?.title ?? null, description: data?.description ?? null, website_image: typeof data?.image === "string" ? data.image : (data?.image?.url ?? data?.website_image ?? null), favicon: typeof data?.logo === "string" ? data.logo : (data?.logo?.url ?? data?.favicon ?? `${urlObj.origin}/favicon.ico`), website_name: data?.publisher ?? data?.website_name ?? urlObj.hostname, url: href, }; metadataCache.set(href, metadata); return metadata; })(); inFlight.set(href, promise); try { return await promise; } finally { inFlight.delete(href); } } export function LinkPreview({ href, children, className = "cursor-pointer rounded-sm bg-primary/20 px-1 text-sm font-medium text-primary transition-all hover:text-white hover:underline", endpoint = "https://api.microlink.io", }: LinkPreviewProps) { const elementRef = useRef(null); const [isInView, setIsInView] = useState(false); const [validFavicon, setValidFavicon] = useState(true); const [validImage, setValidImage] = useState(true); const [metadata, setMetadata] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const isValidUrl = href && isValidHttpUrl(href) && !isEmail(href) && !href.startsWith("mailto:"); // Fetch metadata when in view useEffect(() => { if (!isInView || !isValidUrl || metadata) return; let isMounted = true; setIsLoading(true); setError(null); fetchUrlMetadata(href, endpoint) .then((data) => { if (!isMounted) return; setMetadata(data); setIsLoading(false); }) .catch((err) => { if (!isMounted) return; setError(err as Error); setIsLoading(false); }); return () => { isMounted = false; }; }, [isInView, isValidUrl, href, metadata, endpoint]); // Set up intersection observer to detect when element is in view useEffect(() => { const element = elementRef.current; if (!element || !href) return; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsInView(true); observer.unobserve(element); } }, { rootMargin: "100px", // Start fetching 100px before element comes into view threshold: 0.1, }, ); observer.observe(element); return () => { observer.unobserve(element); }; }, [href]); if (!href) return null; return ( {children} {isLoading ? (

) : error || !isValidUrl ? (

{!isValidUrl ? "Invalid URL" : "Failed to load preview"}

) : metadata ? (

{/* Website Image */} {metadata.website_image && validImage && (

setValidImage(false)} />

)} {/* Website Name & Favicon */} {(metadata.website_name || (metadata.favicon && validFavicon)) && (

{metadata.favicon && validFavicon ? (

setValidFavicon(false)} /> ) : ( )} {metadata.website_name && (

{metadata.website_name}

)}

)} {/* Title */} {metadata.title && (

{metadata.title}

)} {/* Description */} {metadata.description && (

{metadata.description}

)} {/* URL Link */}

{href.replace("https://", "").replace("http://", "")}

) : (

No preview available

)} ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@gaia","registryDependencies":["icons","tooltip","skeleton"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york/ui/link-preview.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]