diff --git a/src/components/nostr/ChatComponent.vue b/src/components/nostr/ChatComponent.vue index e65ead1..2cf7f9a 100644 --- a/src/components/nostr/ChatComponent.vue +++ b/src/components/nostr/ChatComponent.vue @@ -89,7 +89,7 @@ - +
{ } 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() }) diff --git a/src/composables/useNostrChat.ts b/src/composables/useNostrChat.ts index 1edfa6d..6815da7 100644 --- a/src/composables/useNostrChat.ts +++ b/src/composables/useNostrChat.ts @@ -39,6 +39,9 @@ export function useNostrChat() { const currentUser = ref<{ pubkey: string; prvkey: string } | null>(null) const pool = ref(null) const processedMessageIds = ref(new Set()) + + // 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 } } \ No newline at end of file