app(ui/ux): add scroll-to-top and scroll-to-botton buttons (#13)

app/frontend/src/components/ChatPanel.tsx

@@ -29,6 +29,7 @@ import { addMessageUtilities, scrollToBottom } from "../utils";
 import { MessageDocs } from "./MessageDocs";
 import { RetrievalPanelCommandPalette } from "./RetrievePanelCommandPalette";
 import { FCDeleteChatButton } from "./FCDeleteChatButton";
+import { FCScrollButtons } from "./FCScrollButtons";
 
 interface ChatPanelProps {
   model: ModelType;
@@ -107,6 +108,7 @@ export const ChatPanel = ({
       onClick={() => setMessages(() => [])}
     />,
     <FCDeleteChatButton onClick={deleteTab} />,
+    <FCScrollButtons containerRef={chatPortRef} />,
   ];
 
   // Persistent right functional components

app/frontend/src/components/FCScrollButtons.tsx

@@ -0,0 +1,77 @@
+/**
+ * @file FCScrollButtons.tsx
+ *
+ * The functional component for the scroll to top and scroll to bottom buttons,
+ * used at the bottom of the chat input.
+ */
+
+import { IconButton, Tooltip } from "@radix-ui/themes";
+import { RefObject, useEffect, useRef, useState } from "react";
+import { GoMoveToBottom, GoMoveToTop } from "react-icons/go";
+import { scrollToBottom, scrollToTop } from "../utils";
+
+interface FCScrollButtonsProps {
+  containerRef: RefObject<HTMLElement>;
+}
+
+export const FCScrollButtons = ({ containerRef }: FCScrollButtonsProps) => {
+  const [canScrollUp, setCanScrollUp] = useState<boolean>(false);
+  const [canScrollDown, setCanScrollDown] = useState<boolean>(false);
+  const debounceTimer = useRef<number | null>(null);
+
+  // Handler for the container scroll event; it is debounced for better
+  // performance
+  const handleScroll = () => {
+    if (debounceTimer.current !== null) {
+      clearTimeout(debounceTimer.current);
+    }
+    debounceTimer.current = setTimeout(() => {
+      if (containerRef.current !== null) {
+        const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+        setCanScrollUp(scrollTop > 0);
+        setCanScrollDown(scrollTop + clientHeight < scrollHeight);
+      }
+    }, 300);
+  };
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container !== null) {
+      container.addEventListener("scroll", handleScroll, { passive: true });
+    }
+
+    return () => {
+      if (container !== null) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+      if (debounceTimer.current !== null) {
+        clearTimeout(debounceTimer.current);
+      }
+    };
+  }, [containerRef]);
+
+  return (
+    <>
+      <Tooltip content="Scroll to top" side="top">
+        <IconButton
+          disabled={!canScrollUp}
+          variant="ghost"
+          size="1"
+          onClick={() => scrollToTop(containerRef)}
+        >
+          <GoMoveToTop size="20" />
+        </IconButton>
+      </Tooltip>
+      <Tooltip content="Scroll to bottom" side="top">
+        <IconButton
+          disabled={!canScrollDown}
+          variant="ghost"
+          size="1"
+          onClick={() => scrollToBottom(containerRef)}
+        >
+          <GoMoveToBottom size="20" />
+        </IconButton>
+      </Tooltip>
+    </>
+  );
+};

app/frontend/src/components/RetrievePanel.tsx

@@ -20,6 +20,7 @@ import { ChatErrorMessage } from "./ChatErrorMessage";
 import { addMessageUtilities, scrollToBottom } from "../utils";
 import { MessageRetrieved } from "./MessageRetrieved";
 import { FCTopKSelector } from "./FCTopKSelector";
+import { FCScrollButtons } from "./FCScrollButtons";
 
 interface RetrievalPanelProps {
   messages: ChatDisplay[];
@@ -70,6 +71,7 @@ export const RetrievePanel = ({
       disabled={messages.length === 0 || loading}
       onClick={() => setMessages(() => [])}
     />,
+    <FCScrollButtons containerRef={chatPortRef} />,
   ];
 
   // Persistent right functional components

app/frontend/src/utils.ts

@@ -41,3 +41,15 @@ export const scrollToBottom = (ref: RefObject<HTMLElement>) => {
     });
   }
 };
+
+/**
+ * Scroll to the top of a React ref object.
+ */
+export const scrollToTop = (ref: RefObject<HTMLElement>) => {
+  if (ref.current !== null) {
+    ref.current.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }
+};