fix: scroll down button

Chainlit · Feb 8, 2025 · 6682a74 · 6682a74
1 parent 0fa483f
commit 6682a74
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 20 deletions.
diff --git a/frontend/src/components/MarkdownAlert.tsx b/frontend/src/components/MarkdownAlert.tsx
@@ -174,8 +174,6 @@ const AlertComponent = ({
   const style = variantStyles[variant];
   const Icon = style.Icon;
 
-  // console.log('AlertComponent rendering:', variant, children);
-
   return (
     <div className={cn('rounded-lg p-4 mb-4', style.container)}>
       <div className="flex">

diff --git a/frontend/src/components/chat/Footer.tsx b/frontend/src/components/chat/Footer.tsx
@@ -6,7 +6,6 @@ import { FileSpec, useChatMessages } from '@chainlit/react-client';
 import WaterMark from '@/components/WaterMark';
 
 import MessageComposer from './MessageComposer';
-import ScrollDownButton from './ScrollDownButton';
 
 interface Props {
   fileSpec: FileSpec;
@@ -22,11 +21,6 @@ export default function ChatFooter({ showIfEmptyThread, ...props }: Props) {
 
   return (
     <div className={cn('relative flex flex-col items-center gap-2 w-full')}>
-      {!props.autoScrollRef.current ? (
-        <ScrollDownButton
-          onClick={() => (props.autoScrollRef.current = true)}
-        />
-      ) : null}
       <MessageComposer {...props} />
       <WaterMark />
     </div>

diff --git a/frontend/src/components/chat/ScrollContainer.tsx b/frontend/src/components/chat/ScrollContainer.tsx
@@ -1,8 +1,11 @@
 import { cn } from '@/lib/utils';
-import { MutableRefObject, useEffect, useRef } from 'react';
+import { ArrowDown } from 'lucide-react';
+import { MutableRefObject, useEffect, useRef, useState } from 'react';
 
 import { useChatMessages } from '@chainlit/react-client';
 
+import { Button } from '@/components/ui/button';
+
 interface Props {
   autoScrollRef?: MutableRefObject<boolean>;
   children: React.ReactNode;
@@ -16,6 +19,22 @@ export default function ScrollContainer({
 }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const { messages } = useChatMessages();
+  const [showScrollButton, setShowScrollButton] = useState(false);
+
+  const scrollToBottom = () => {
+    if (!ref.current) return;
+
+    ref.current.scrollTo({
+      top: ref.current.scrollHeight,
+      behavior: 'instant'
+    });
+
+    if (autoScrollRef) {
+      autoScrollRef.current = true;
+    }
+
+    setShowScrollButton(false);
+  };
 
   useEffect(() => {
     if (!ref.current || !autoScrollRef?.current) {
@@ -25,23 +44,39 @@ export default function ScrollContainer({
   }, [messages]);
 
   const handleScroll = () => {
-    if (!ref.current || !autoScrollRef) return;
+    if (!ref.current) return;
 
     const { scrollTop, scrollHeight, clientHeight } = ref.current;
     const atBottom = scrollTop + clientHeight >= scrollHeight - 10;
-    autoScrollRef.current = atBottom;
+
+    if (autoScrollRef) {
+      autoScrollRef.current = atBottom;
+    }
+
+    setShowScrollButton(!atBottom);
   };
 
   return (
-    <div
-      ref={ref}
-      className={cn(
-        'relative flex flex-col flex-grow overflow-y-auto',
-        className
-      )}
-      onScroll={handleScroll}
-    >
-      {children}
+    <div className="relative flex flex-col flex-grow overflow-y-auto">
+      <div
+        ref={ref}
+        className={cn('flex flex-col flex-grow overflow-y-auto', className)}
+        onScroll={handleScroll}
+      >
+        {children}
+      </div>
+      {showScrollButton ? (
+        <div className="absolute bottom-4 left-0 right-0 flex justify-center">
+          <Button
+            size="icon"
+            variant="outline"
+            className="rounded-full"
+            onClick={scrollToBottom}
+          >
+            <ArrowDown className="size-4" />
+          </Button>
+        </div>
+      ) : null}
     </div>
   );
 }