From ed6f2fd85646a40b790ea39103beea5699d464b7 Mon Sep 17 00:00:00 2001
From: Alejandro <alejandrogomez@bitrefill.com>
Date: Tue, 13 Jan 2026 16:26:28 +0100
Subject: [PATCH] Improve chat reply UX with auto-focus and rich text preview
 (#76)

- Focus the message input when clicking reply button for immediate typing
- Use RichText component in reply preview to render mentions and emojis

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/components/ChatViewer.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index ce04777..d7e9e7c 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -162,9 +162,12 @@ const ComposerReplyPreview = memo(function ComposerReplyPreview({
         pubkey={replyEvent.pubkey}
         className="font-medium flex-shrink-0"
       />
-      <span className="flex-1 min-w-0 truncate text-muted-foreground">
-        {replyEvent.content}
-      </span>
+      <div className="flex-1 min-w-0 line-clamp-1 overflow-hidden text-muted-foreground">
+        <RichText
+          event={replyEvent}
+          options={{ showMedia: false, showEventEmbeds: false }}
+        />
+      </div>
       <button
         onClick={onClear}
         className="ml-auto text-muted-foreground hover:text-foreground flex-shrink-0"
@@ -538,6 +541,8 @@ export function ChatViewer({
   // Handle reply button click
   const handleReply = useCallback((messageId: string) => {
     setReplyTo(messageId);
+    // Focus the editor so user can start typing immediately
+    editorRef.current?.focus();
   }, []);
 
   // Handle scroll to message (when clicking on reply preview)