URL のプレビュー機能を実装しました

[inugamine]

resolve #72

概要
メッセージ本文中のURLに対してプレビューカード (OGPカード) を表示する機能を実装しました。YouTube / Spotify / Apple Music / SoundCloud などの URL は専用の埋め込みプレイヤーで表示します。

変更内容
新規ファイル

• app/src/contexts/UrlSummary.tsx

  • サーバーの /summary エンドポイントからOGP情報 (タイトル、説明文、サムネイル等) を取得するサービスContext
  • useClient() で server.domain を取得し、レスポンスをインメモリキャッシュ

• app/src/components/AutoSummary.tsx

  • メッセージ本文 (raw text) からURLを抽出し、プレビューを描画するコンポーネント
  • Markdown のコードブロック・画像構文・social タグ等を除外してから URL 抽出
  • YouTube / Spotify / Apple Music / SoundCloud など → 専用 iframe 埋め込み
  • その他 → UrlSummaryCard で OGP カード表示
  • limit prop でプレビュー数を制御 (デフォルト1)

• app/src/components/UrlSummaryCard.tsx

  • サムネイル + タイトル + 説明文 + ホスト名を表示するカードUI
  • ローディング中はスケルトン表示、取得失敗時は非表示

変更ファイル

• app/src/main.tsx — UrlSummaryProvider をプロバイダーツリーに追加
• app/src/components/message/MarkdownMessage.tsx — AutoSummary で CfmRenderer をラップ
• app/src/components/message/MediaMessage.tsx — 同上
• app/src/components/message/ReplyMessage.tsx — 同上

[inugamine]

web版の変更まとめ：
新規 (3ファイル):

• web/src/contexts/UrlSummary.tsx
• web/src/components/AutoSummary.tsx
• web/src/components/UrlSummaryCard.tsx

変更 (4ファイル):

• web/src/main.tsx — UrlSummaryProvider 追加
• web/src/components/message/MarkdownMessage.tsx — AutoSummary ラップ
• web/src/components/message/MediaMessage.tsx — 同上
• web/src/components/message/ReplyMessage.tsx — 同上