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()
     })

src/composables/useNostrChat.ts

@@ -39,6 +39,9 @@ export function useNostrChat() {
   const currentUser = ref<{ pubkey: string; prvkey: string } | null>(null)
   const pool = ref<SimplePool | null>(null)
   const processedMessageIds = ref(new Set<string>())
+  
+  // Callback for when messages change
+  const onMessageAdded = ref<((peerPubkey: string) => void) | null>(null)
 
   // Computed
   const isLoggedIn = computed(() => !!currentUser.value)
@@ -328,11 +331,23 @@ export function useNostrChat() {
         messages.value.set(conversationKey, [])
       }
       
+      if (!messages.value.has(conversationKey)) {
+        messages.value.set(conversationKey, [])
+      }
+      
       messages.value.get(conversationKey)!.push(message)
       
       // Sort messages by timestamp
       messages.value.get(conversationKey)!.sort((a, b) => a.created_at - b.created_at)
       
+      // Force reactivity by triggering a change
+      messages.value = new Map(messages.value)
+      
+      // Trigger callback if set
+      if (onMessageAdded.value) {
+        onMessageAdded.value(conversationKey)
+      }
+      
       console.log('Messages for conversation:', messages.value.get(conversationKey)?.map(m => ({
         id: m.id,
         sent: m.sent,
@@ -410,6 +425,14 @@ export function useNostrChat() {
       
       // Sort messages by timestamp
       messages.value.get(peerPubkey)!.sort((a, b) => a.created_at - b.created_at)
+      
+      // Force reactivity by triggering a change
+      messages.value = new Map(messages.value)
+      
+      // Trigger callback if set
+      if (onMessageAdded.value) {
+        onMessageAdded.value(peerPubkey)
+      }
 
     } catch (error) {
       console.error('Failed to send message:', error)
@@ -440,6 +463,7 @@ export function useNostrChat() {
     sendMessage,
     getMessages,
     clearMessages,
-    loadCurrentUser
+    loadCurrentUser,
+    onMessageAdded
   }
 }