feat(link-preview): frontend interface for Telegram-style URL preview
Adds the front-end side of the link-preview feature so the back-end team has a fixed contract to implement against. - docs/link-preview.md: full spec for the `/api/link-preview` proxy and the preferred inline-on-Post integration. Covers caching, SSRF guards, metadata-extraction precedence, provider quirks, and the front-end rendering rules. Scope is the first URL only. - types/post.ts: new `LinkPreview` type and optional `linkPreview` field on `Post`. - LinkPreviewCard: clickable card with a themeColor accent bar, siteName / title / description (line-clamped), and an optional 1.91:1 thumbnail. Whole card is an `<a target="_blank">` to the canonical URL. - MessageBubble: render the card between the bubble body and the timestamp, with padding that matches visual vs. text-only bubbles. - mockPosts: example `linkPreview` payloads on p-005 and p-010 so the visual works when running with VITE_USE_MOCK_POSTS=true, and so the back-end has concrete reference values.
This commit is contained in:
TerryM
65
src/components/messageStream/LinkPreviewCard.tsx
Normal file
65
src/components/messageStream/LinkPreviewCard.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import type { LinkPreview } from "../../types/post";
|
||||
|
||||
/**
|
||||
* Telegram-style rich preview card for a single URL embedded in a post.
|
||||
*
|
||||
* Renders an accent bar on the left, then site name → title → description,
|
||||
* with an optional thumbnail at the bottom. The whole card is one anchor
|
||||
* that opens `canonicalUrl` in a new tab.
|
||||
*/
|
||||
export function LinkPreviewCard({ preview }: { preview: LinkPreview }) {
|
||||
const accent = preview.themeColor || "#EEB726";
|
||||
const hasUsefulText =
|
||||
preview.title.length > 0 || preview.description.length > 0;
|
||||
if (!hasUsefulText && !preview.imageUrl) return null;
|
||||
|
||||
return (
|
||||
<a
|
||||
href={preview.canonicalUrl || preview.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group block overflow-hidden rounded-lg bg-white/[0.04] transition hover:bg-white/[0.07]"
|
||||
>
|
||||
<div className="flex">
|
||||
<div
|
||||
aria-hidden
|
||||
className="w-[3px] shrink-0 rounded-l-lg"
|
||||
style={{ backgroundColor: accent }}
|
||||
/>
|
||||
<div className="min-w-0 flex-1 px-3 py-2.5">
|
||||
{preview.siteName ? (
|
||||
<div
|
||||
className="truncate text-[12px] leading-4"
|
||||
style={{ color: accent }}
|
||||
>
|
||||
{preview.siteName}
|
||||
</div>
|
||||
) : null}
|
||||
{preview.title ? (
|
||||
<div className="mt-0.5 line-clamp-2 break-words text-[14px] font-semibold leading-5 text-neutral-100">
|
||||
{preview.title}
|
||||
</div>
|
||||
) : null}
|
||||
{preview.description ? (
|
||||
<div className="mt-1 line-clamp-3 break-words text-[13px] leading-[18px] text-neutral-300">
|
||||
{preview.description}
|
||||
</div>
|
||||
) : null}
|
||||
{preview.imageUrl ? (
|
||||
<div className="mt-2 overflow-hidden rounded-md bg-black/30">
|
||||
<img
|
||||
src={preview.imageUrl}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width={preview.imageWidth}
|
||||
height={preview.imageHeight}
|
||||
className="block aspect-[1.91/1] w-full object-cover transition duration-300 group-hover:scale-[1.02]"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { ImageBubble } from "./bubbles/ImageBubble";
|
||||
import { ImageWithTextBubble } from "./bubbles/ImageWithTextBubble";
|
||||
import { AlbumBubble } from "./bubbles/AlbumBubble";
|
||||
import { VideoBubble } from "./bubbles/VideoBubble";
|
||||
import { LinkPreviewCard } from "./LinkPreviewCard";
|
||||
import { formatDateTime } from "./utils/formatTime";
|
||||
|
||||
type BubbleComponent = ComponentType<{ post: Post }>;
|
||||
@@ -41,6 +42,11 @@ export function MessageBubble({ post }: { post: Post }) {
|
||||
}`}
|
||||
>
|
||||
<Bubble post={post} />
|
||||
{post.linkPreview ? (
|
||||
<div className={isVisual ? "px-4 pt-3" : "mt-3"}>
|
||||
<LinkPreviewCard preview={post.linkPreview} />
|
||||
</div>
|
||||
) : null}
|
||||
<time
|
||||
dateTime={post.publishedAt}
|
||||
className={`block text-right text-[12px] leading-[19px] text-[#A8A9AE] ${
|
||||
|
||||
@@ -156,6 +156,19 @@ export const MOCK_POSTS: Post[] = [
|
||||
isRecommended: false,
|
||||
publishedAt: "2026-01-19T16:20:00.000Z",
|
||||
updatedAt: "2026-01-19T16:20:00.000Z",
|
||||
// Mock: only the FIRST URL in the text is previewed.
|
||||
linkPreview: {
|
||||
url: "https://coinmarketcap.com/currencies/ark-defai/",
|
||||
canonicalUrl: "https://coinmarketcap.com/currencies/ark-defai/",
|
||||
siteName: "coinmarketcap.com",
|
||||
title: "ARK DeFAI Price, Chart & Market Cap",
|
||||
description:
|
||||
"Track ARK DeFAI live price, market cap, volume and historical chart on CoinMarketCap. Verified contract address, holders and on-chain analytics.",
|
||||
imageUrl: img(81, 1200, 630),
|
||||
imageWidth: 1200,
|
||||
imageHeight: 630,
|
||||
themeColor: "#2962FF",
|
||||
},
|
||||
},
|
||||
|
||||
// 6) 纯文本 + 单链接（简短公告）
|
||||
@@ -254,6 +267,15 @@ export const MOCK_POSTS: Post[] = [
|
||||
categorySlug: "meeting",
|
||||
language: "zh-CN",
|
||||
text: "📌 ARK DeFAI 方舟晨间时刻\n\n🧠 会议主题：市场概况交流 & 市场问题讨论。\n🕙 会议时间：3月1日（日）10:00\n🎬 直播腾讯会议链接：https://meeting.tencent.com/l/G718S4Sedm38",
|
||||
linkPreview: {
|
||||
url: "https://meeting.tencent.com/l/G718S4Sedm38",
|
||||
canonicalUrl: "https://meeting.tencent.com/l/G718S4Sedm38",
|
||||
siteName: "meeting.tencent.com",
|
||||
title: "腾讯会议 · ARK DeFAI 方舟晨间时刻",
|
||||
description:
|
||||
"点击直接加入直播会议。需要 App 或浏览器插件。会议号会在点击后自动补全。",
|
||||
themeColor: "#0080FF",
|
||||
},
|
||||
attachments: [
|
||||
{
|
||||
id: "a-010",
|
||||
|
||||
@@ -34,6 +34,24 @@ export type Attachment = {
|
||||
thumbnailUrl?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Preview metadata for the first URL found in a post's text. See
|
||||
* `docs/link-preview.md` for the back-end contract.
|
||||
*/
|
||||
export type LinkPreview = {
|
||||
url: string;
|
||||
canonicalUrl: string;
|
||||
siteName: string;
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl?: string;
|
||||
imageWidth?: number;
|
||||
imageHeight?: number;
|
||||
favicon?: string;
|
||||
/** Hex color used for the left accent bar (e.g. "#12FF80"). */
|
||||
themeColor?: string;
|
||||
};
|
||||
|
||||
export type Post = {
|
||||
id: string;
|
||||
postType?: PostType | string;
|
||||
@@ -49,6 +67,8 @@ export type Post = {
|
||||
updatedAt?: string;
|
||||
createdAt?: string;
|
||||
tags?: string[];
|
||||
/** Preview card for the first URL in `text`. At most one per post. */
|
||||
linkPreview?: LinkPreview;
|
||||
};
|
||||
|
||||
export type PostListResponse = {
|
||||
|
||||
Reference in New Issue
Block a user