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.
This commit is contained in:
parent
ce81b9d2bf
commit
7bef56f630
1 changed files with 6 additions and 3 deletions
|
|
@ -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 () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue