Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: lablup/backend.ai-webui
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 68f2bc55f1626d402251cbc5eca6e6db1ebb7a5b
Choose a base ref
..
head repository: lablup/backend.ai-webui
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 1ff12cc14006fcc36430576db61ff18f299af77d
Choose a head ref
Showing with 15 additions and 3 deletions.
  1. +15 −3 react/src/components/lablupTalkativotUI/VirtualChatMessageList.tsx
18 changes: 15 additions & 3 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,6 +86,11 @@ const VirtualChatMessageList: React.FC<VirtualizedListProps> = ({
}}
overscan={overscan}
ref={virtuosoRef}
onScroll={() => {
if (!atBottom) {
setUserScrolled(true);
}
}}
/>
{!_.isEmpty(messages) && (
<div
@@ -95,7 +106,7 @@ const VirtualChatMessageList: React.FC<VirtualizedListProps> = ({
>
<ScrollBottomHandlerButton
atBottom={atBottom}
autoScroll={isStreaming}
autoScroll={isStreaming && !userScrolled}
onScrollToBottom={(type) => {
const virtuoso = virtuosoRef.current;
switch (type) {
@@ -113,6 +124,7 @@ const VirtualChatMessageList: React.FC<VirtualizedListProps> = ({
behavior: 'smooth',
index: 'LAST',
});
setUserScrolled(false);
break;
}
}