Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[FR-46] fix: The ScrollBottomHandlerButton is displayed even when t…
Browse files Browse the repository at this point in the history
…he chat message is empty.
agatha197 committed Jan 6, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent e2c145d commit 1ff12cc
Showing 1 changed file with 53 additions and 39 deletions.
92 changes: 53 additions & 39 deletions react/src/components/lablupTalkativotUI/VirtualChatMessageList.tsx
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@ const VirtualChatMessageList: React.FC<VirtualizedListProps> = ({
}) => {
const virtuosoRef = useRef<VirtuosoHandle>(null);
const [atBottom, setAtBottom] = useState(true);
const [userScrolled, setUserScrolled] = useState(false);
const { token } = theme.useToken();
// overscan should be 1.5 times the height of the window
const overscan = typeof window !== 'undefined' ? window.innerHeight * 1.5 : 0;
@@ -33,11 +34,16 @@ const VirtualChatMessageList: React.FC<VirtualizedListProps> = ({
style={{ height: '100%', flex: 1 }}
>
<Virtuoso
atBottomStateChange={setAtBottom}
atBottomStateChange={(isAtBottom) => {
setAtBottom(isAtBottom);
if (isAtBottom) {
setUserScrolled(false);
}
}}
atBottomThreshold={60}
computeItemKey={(_, item) => item.id}
data={messages}
followOutput={'auto'}
followOutput={userScrolled ? false : 'auto'}
initialTopMostItemIndex={messages?.length - 1}
itemContent={(index, m) => {
return (
@@ -80,45 +86,53 @@ const VirtualChatMessageList: React.FC<VirtualizedListProps> = ({
}}
overscan={overscan}
ref={virtuosoRef}
/>
<div
style={{
position: 'absolute',
right: '50%',
transform: 'translateX(+50%)',
bottom: token.marginSM,
opacity: atBottom ? 0 : 1,
transition: 'opacity 0.2s',
transitionDelay: atBottom ? '0s' : '0.2s',
onScroll={() => {
if (!atBottom) {
setUserScrolled(true);
}
}}
>
<ScrollBottomHandlerButton
atBottom={atBottom}
autoScroll={isStreaming}
onScrollToBottom={(type) => {
const virtuoso = virtuosoRef.current;
switch (type) {
case 'auto': {
virtuoso?.scrollToIndex({
align: 'end',
behavior: 'auto',
index: 'LAST',
});
break;
}
case 'click': {
virtuoso?.scrollToIndex({
align: 'end',
behavior: 'smooth',
index: 'LAST',
});
break;
}
}
/>
{!_.isEmpty(messages) && (
<div
style={{
position: 'absolute',
right: '50%',
transform: 'translateX(+50%)',
bottom: token.marginSM,
opacity: atBottom ? 0 : 1,
transition: 'opacity 0.2s',
transitionDelay: atBottom ? '0s' : '0.2s',
}}
lastMessageContent={_.get(_.last(messages), 'content')}
/>
</div>
>
<ScrollBottomHandlerButton
atBottom={atBottom}
autoScroll={isStreaming && !userScrolled}
onScrollToBottom={(type) => {
const virtuoso = virtuosoRef.current;
switch (type) {
case 'auto': {
virtuoso?.scrollToIndex({
align: 'end',
behavior: 'auto',
index: 'LAST',
});
break;
}
case 'click': {
virtuoso?.scrollToIndex({
align: 'end',
behavior: 'smooth',
index: 'LAST',
});
setUserScrolled(false);
break;
}
}
}}
lastMessageContent={_.get(_.last(messages), 'content')}
/>
</div>
)}
</Flex>
);
};

0 comments on commit 1ff12cc

Please sign in to comment.