[FR-46] fix: The ScrollBottomHandlerButton is displayed even when t…

…he chat message is empty.
lablup · Jan 6, 2025 · 68f2bc5 · 68f2bc5
1 parent e2c145d
commit 68f2bc5
Showing 1 changed file with 39 additions and 37 deletions.
diff --git a/react/src/components/lablupTalkativotUI/VirtualChatMessageList.tsx b/react/src/components/lablupTalkativotUI/VirtualChatMessageList.tsx
@@ -81,44 +81,46 @@ 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',
-        }}
-      >
-        <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}
+            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;
+                }
+              }
+            }}
+            lastMessageContent={_.get(_.last(messages), 'content')}
+          />
+        </div>
+      )}
     </Flex>
   );
 };