padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Update chat component for improved scrolling behavior

Browse source 
- 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.
This commit is contained in:
padreug 2025-08-06 00:33:47 +02:00
parent ce81b9d2bf
commit 7bef56f630
1 changed files with 6 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/nostr/ChatComponent.vue
View file

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