From f0c01481a36f6ea15bfe74062aa392c6258a8ddc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 18 Jan 2026 23:11:23 +0000
Subject: [PATCH] feat: add context menu support for zap messages in chat

- Wrap zap messages in ChatMessageContextMenu component
- Add reply button that appears on hover (consistent with regular messages)
- Add subtle hover transition to gradient border
- Enable all context menu actions for zaps:
  * Reply to zap
  * React with emoji
  * Copy zap comment text
  * Open zap receipt event in detail view
  * Copy event ID (nevent)
  * View raw JSON

This brings zap messages to feature parity with regular chat messages
while maintaining their distinctive gradient border styling.
---
 src/components/ChatViewer.tsx | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index f76f83c..45050a7 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -309,10 +309,10 @@ const MessageItem = memo(function MessageItem({
       replyEvent &&
       (CHAT_KINDS as readonly number[]).includes(replyEvent.kind);
 
-    return (
-      <div className="pl-2 my-1">
+    const zapMessageContent = (
+      <div className="group pl-2 my-1">
         <div
-          className="p-[1px] rounded"
+          className="p-[1px] rounded group-hover:opacity-90 transition-opacity"
           style={{
             background:
               "linear-gradient(to right, rgb(250 204 21), rgb(251 146 60), rgb(168 85 247), rgb(34 211 238))",
@@ -341,6 +341,15 @@ const MessageItem = memo(function MessageItem({
               </span>
               {/* Reactions display - inline after timestamp */}
               <MessageReactions messageId={message.id} relays={relays} />
+              {canReply && onReply && (
+                <button
+                  onClick={() => onReply(message.id)}
+                  className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground ml-auto"
+                  title="Reply to this zap"
+                >
+                  <Reply className="size-3" />
+                </button>
+              )}
             </div>
             {shouldShowReplyPreview && (
               <ReplyPreview
@@ -361,6 +370,22 @@ const MessageItem = memo(function MessageItem({
         </div>
       </div>
     );
+
+    // Wrap in context menu if event exists
+    if (message.event) {
+      return (
+        <ChatMessageContextMenu
+          event={message.event}
+          onReply={canReply && onReply ? () => onReply(message.id) : undefined}
+          conversation={conversation}
+          adapter={adapter}
+        >
+          {zapMessageContent}
+        </ChatMessageContextMenu>
+      );
+    }
+
+    return zapMessageContent;
   }
 
   // Regular user messages - wrap in context menu if event exists