From 6ea0a17f2c1ff9ee530742807f9b5865beb7cd1b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 29 Jan 2026 22:09:05 +0000
Subject: [PATCH] feat: use ChatMediaRenderer in chat messages

- Updated ChatMediaRenderer to use getHashFromURL from blossom-client-sdk
- Integrated ChatMediaRenderer into ChatViewer for message content

https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD
---
 src/components/ChatViewer.tsx             |  7 +++++-
 src/components/chat/ChatMediaRenderer.tsx | 26 +++++++++--------------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index efd7d23..30ff83e 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -40,6 +40,7 @@ import {
 } from "@/lib/chat/group-system-messages";
 import { UserName } from "./nostr/UserName";
 import { RichText } from "./nostr/RichText";
+import { ChatMediaRenderer } from "./chat/ChatMediaRenderer";
 import Timestamp from "./Timestamp";
 import { ReplyPreview } from "./chat/ReplyPreview";
 import { MembersDropdown } from "./chat/MembersDropdown";
@@ -458,7 +459,11 @@ const MessageItem = memo(function MessageItem({
         </div>
         <div className="break-words overflow-hidden">
           {message.event ? (
-            <RichText className="text-sm leading-tight" event={message.event}>
+            <RichText
+              className="text-sm leading-tight"
+              event={message.event}
+              renderMedia={ChatMediaRenderer}
+            >
               {message.replyTo && (
                 <ReplyPreview
                   replyTo={message.replyTo}
diff --git a/src/components/chat/ChatMediaRenderer.tsx b/src/components/chat/ChatMediaRenderer.tsx
index 43c9c1b..7a92fe1 100644
--- a/src/components/chat/ChatMediaRenderer.tsx
+++ b/src/components/chat/ChatMediaRenderer.tsx
@@ -6,6 +6,7 @@
  */
 
 import { Image, Video, Music, File, Flower2 } from "lucide-react";
+import { getHashFromURL } from "blossom-client-sdk/helpers/url";
 import { useGrimoire } from "@/core/state";
 import { formatFileSize } from "@/lib/imeta";
 import type { MediaRendererProps } from "@/components/nostr/RichText";
@@ -18,10 +19,10 @@ function getFilename(url: string): string {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
     const lastSegment = pathname.split("/").pop() || "";
-    // If it's a hash (64 hex chars), truncate it
-    if (/^[0-9a-f]{64}$/i.test(lastSegment.replace(/\.[^.]+$/, ""))) {
+    // If it's a blossom hash, truncate it
+    const hash = getHashFromURL(url);
+    if (hash) {
       const ext = lastSegment.includes(".") ? lastSegment.split(".").pop() : "";
-      const hash = lastSegment.replace(/\.[^.]+$/, "");
       return ext ? `${hash.slice(0, 8)}...${ext}` : `${hash.slice(0, 8)}...`;
     }
     // Decode URI component for readable filenames
@@ -32,25 +33,18 @@ function getFilename(url: string): string {
 }
 
 /**
- * Check if URL is a blossom URL (has sha256 hash in path)
- * Returns the sha256 and server URL if it is, null otherwise
+ * Parse blossom URL - returns sha256 and server URL if valid
  */
 function parseBlossomUrl(
   url: string,
 ): { sha256: string; serverUrl: string } | null {
+  const sha256 = getHashFromURL(url);
+  if (!sha256) return null;
+
   try {
     const urlObj = new URL(url);
-    const pathname = urlObj.pathname;
-    const segments = pathname.split("/").filter(Boolean);
-    const lastSegment = segments[segments.length - 1] || "";
-    // Remove extension if present
-    const possibleHash = lastSegment.replace(/\.[^.]+$/, "");
-
-    if (/^[0-9a-f]{64}$/i.test(possibleHash)) {
-      const serverUrl = `${urlObj.protocol}//${urlObj.host}`;
-      return { sha256: possibleHash.toLowerCase(), serverUrl };
-    }
-    return null;
+    const serverUrl = `${urlObj.protocol}//${urlObj.host}`;
+    return { sha256, serverUrl };
   } catch {
     return null;
   }