feat: Implement message addition callback and enhance scrolling behavior

- Introduce a callback for when new messages are added, allowing for automatic scrolling to the bottom of the chat when relevant peers are selected.
- Update the ChatComponent to reference the scrolling area correctly and improve the logic for scrolling to the latest messages.
- Enhance console logging for better debugging and tracking of message flow and scrolling actions.

src/components/nostr/ChatComponent.vue

@@ -89,7 +89,7 @@
       </div>
 
       <!-- Messages -->
-      <ScrollArea class="flex-1 p-4">
+      <ScrollArea class="flex-1 p-4" ref="messagesScrollArea">
         <div class="space-y-4">
           <div
             v-for="message in currentMessages"
@@ -329,7 +329,8 @@ const {
   sendMessage: sendNostrMessage,
   connect,
   disconnect,
-  subscribeToPeer
+  subscribeToPeer,
+  onMessageAdded
 } = useNostrChat()
 
 // Computed
@@ -427,13 +428,17 @@ const sendMessage = async () => {
 }
 
 const scrollToBottom = () => {
+  console.log('scrollToBottom called')
   nextTick(() => {
     if (scrollTarget.value) {
-      // Scroll to the hidden target element at the bottom
+      console.log('Found scrollTarget, scrolling to bottom')
+      // Use scrollIntoView on the target element
       scrollTarget.value.scrollIntoView({ 
         behavior: 'smooth',
         block: 'end'
       })
+    } else {
+      console.log('No scrollTarget found')
     }
   })
 }
@@ -466,6 +471,17 @@ onMounted(async () => {
   checkMobile()
   window.addEventListener('resize', checkMobile)
   
+  // Set up message callback
+  onMessageAdded.value = (peerPubkey: string) => {
+    console.log('Message added callback triggered for peer:', peerPubkey)
+    if (selectedPeer.value && selectedPeer.value.pubkey === peerPubkey) {
+      console.log('Triggering scroll for current peer')
+      nextTick(() => {
+        scrollToBottom()
+      })
+    }
+  }
+  
   await connect()
   await loadPeers()
 })
@@ -477,8 +493,15 @@ onUnmounted(() => {
 
 // Watch for new messages and scroll to bottom
 watch(currentMessages, (newMessages, oldMessages) => {
-  // Only scroll if messages were added (not just peer selection)
-  if (newMessages.length > 0 && oldMessages && newMessages.length > oldMessages.length) {
+  console.log('Messages changed:', { 
+    newLength: newMessages.length, 
+    oldLength: oldMessages?.length,
+    isNewMessage: !oldMessages || newMessages.length > oldMessages.length 
+  })
+  
+  // Scroll to bottom when new messages are added
+  if (newMessages.length > 0 && (!oldMessages || newMessages.length > oldMessages.length)) {
+    console.log('Triggering scroll to bottom')
     nextTick(() => {
       scrollToBottom()
     })