You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a problem with my chat app, i would like to show directly the last message without to see the scroll going to the end, actually i tried a lot of things but nothing working good.
this is the code:
const [filteredMessages, setFilteredMessages] = useState<MessageProps[]>([]);
const parentRef = useRef<HTMLDivElement>(null)
// filter messages by conversation id and sort them by date
useEffect(() => {
const messages = messageStore
.filter((message) => message.conversation_id === conversationIdState)
.sort((a, b) => new Date(Number(a.created_at)).getTime() - new Date(Number(b.created_at)).getTime());
setFilteredMessages(messages);
}, [messageStore, conversationIdState]);
// The virtualizer
const rowVirtualizer = useVirtualizer({
count: filteredMessages.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 320,
overscan: 5,
})
useLayoutEffect(() => {
requestAnimationFrame(() => {
rowVirtualizer.scrollToIndex(filteredMessages.length - 1);
});
}, [filteredMessages.length, rowVirtualizer]);
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hello,
I have a problem with my chat app, i would like to show directly the last message without to see the scroll going to the end, actually i tried a lot of things but nothing working good.
this is the code:
In this configuration when i show messages, i see all the messages scrolling untill the end...?
Can you help me please?
Thank you
Beta Was this translation helpful? Give feedback.
All reactions