From 4e12cd5ed126054d2343aa141edae84d2e7835da Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Jan 2026 11:35:58 +0000
Subject: [PATCH] fix: use RichText for zap comments and remove arrow in chat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use RichText with zap request event for zap comments (renders emoji tags)
- Remove the arrow (→) between zapper and recipient in zap messages
---
 src/components/ChatViewer.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index 18daf06..6b88f5b 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -3,6 +3,7 @@ import { use$ } from "applesauce-react/hooks";
 import { from } from "rxjs";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
 import { Reply, Zap } from "lucide-react";
+import { getZapRequest } from "applesauce-common/helpers/zap";
 import accountManager from "@/services/accounts";
 import eventStore from "@/services/event-store";
 import type {
@@ -175,6 +176,8 @@ const MessageItem = memo(function MessageItem({
   if (message.type === "zap") {
     const zapAmount = message.metadata?.zapAmount || 0;
     const zapRecipient = message.metadata?.zapRecipient;
+    // Get the zap request event for RichText (contains emoji tags)
+    const zapRequest = message.event ? getZapRequest(message.event) : null;
 
     return (
       <div className="px-3 py-1">
@@ -196,17 +199,24 @@ const MessageItem = memo(function MessageItem({
                 {zapAmount.toLocaleString("en", { notation: "compact" })}
               </span>
               {zapRecipient && (
-                <>
-                  <span className="text-muted-foreground text-xs">→</span>
-                  <UserName pubkey={zapRecipient} className="text-sm" />
-                </>
+                <UserName pubkey={zapRecipient} className="text-sm" />
               )}
               <span className="text-xs text-muted-foreground ml-auto">
                 <Timestamp timestamp={message.timestamp} />
               </span>
             </div>
             {message.content && (
-              <div className="mt-1 text-sm break-words">{message.content}</div>
+              <div className="mt-1 text-sm break-words">
+                {zapRequest ? (
+                  <RichText
+                    event={zapRequest}
+                    className="text-sm leading-tight"
+                    options={{ showMedia: false, showEventEmbeds: false }}
+                  />
+                ) : (
+                  message.content
+                )}
+              </div>
             )}
           </div>
         </div>