From 7bef56f630245417f84493bb1c21e3469e091b96 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 6 Aug 2025 00:33:47 +0200
Subject: [PATCH] refactor: Update chat component for improved scrolling
 behavior

- Change the reference for the scrolling target to a hidden element at the bottom of the chat, enhancing the user experience during message loading.
- Adjust scrolling logic to automatically scroll to the bottom when a peer is selected, ensuring users see the latest messages immediately.
---
 src/components/nostr/ChatComponent.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/nostr/ChatComponent.vue b/src/components/nostr/ChatComponent.vue
index 2374a9d..e65ead1 100644
--- a/src/components/nostr/ChatComponent.vue
+++ b/src/components/nostr/ChatComponent.vue
@@ -114,7 +114,8 @@
             </div>
           </div>
         </div>
-        <div ref="messagesEndRef" />
+        <!-- Hidden element at bottom for scrolling -->
+        <div ref="scrollTarget" class="h-1" />
       </ScrollArea>
 
       <!-- Message Input -->
@@ -403,8 +404,10 @@ const selectPeer = async (peer: Peer) => {
   // Subscribe to messages from this peer
   await subscribeToPeer(peer.pubkey)
   
-  // Don't scroll when selecting a peer - let user see existing messages
-  // Only scroll when new messages arrive
+  // Scroll to bottom to show latest messages when selecting a peer
+  nextTick(() => {
+    scrollToBottom()
+  })
 }
 
 const sendMessage = async () => {