Improve row expansion logic for better experience

This commit is contained in:
Saoud Rizwan
2024-09-22 23:17:40 -04:00
parent 89cead483c
commit 6e69ea90df

View File

@@ -382,7 +382,9 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
const toggleRowExpansion = useCallback( const toggleRowExpansion = useCallback(
(ts: number) => { (ts: number) => {
const isCollapsing = expandedRows[ts] ?? false const isCollapsing = expandedRows[ts] ?? false
const isLastMessage = visibleMessages.at(-1)?.ts === ts const isLast = visibleMessages.at(-1)?.ts === ts
const isSecondToLast = visibleMessages.at(-2)?.ts === ts
const isLastCollapsed = !expandedRows[visibleMessages.at(-1)?.ts ?? 0]
setExpandedRows((prev) => ({ setExpandedRows((prev) => ({
...prev, ...prev,
[ts]: !prev[ts], [ts]: !prev[ts],
@@ -396,8 +398,11 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
}) })
}, 0) }, 0)
return () => clearTimeout(timer) return () => clearTimeout(timer)
} else if (isLastMessage) { } else if (isLast || isSecondToLast) {
if (isCollapsing) { if (isCollapsing) {
if (isSecondToLast && !isLastCollapsed) {
return
}
const timer = setTimeout(() => { const timer = setTimeout(() => {
virtuosoRef.current?.scrollToIndex({ virtuosoRef.current?.scrollToIndex({
index: visibleMessages.length - 1, index: visibleMessages.length - 1,
@@ -408,7 +413,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
} else { } else {
const timer = setTimeout(() => { const timer = setTimeout(() => {
virtuosoRef.current?.scrollToIndex({ virtuosoRef.current?.scrollToIndex({
index: visibleMessages.length - 1, index: visibleMessages.length - (isLast ? 1 : 2),
align: "start", align: "start",
}) })
}, 0) }, 0)