feat: add brains list overflow indicator (#1842)

Issue: https://github.com/StanGirard/quivr/issues/1835

Demo:



https://github.com/StanGirard/quivr/assets/63923024/efd0795e-dd4a-45d6-bc53-56f630e94cb6

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/MentionsList.tsx

@@ -1,11 +1,13 @@
 import { SuggestionKeyDownProps } from "@tiptap/suggestion";
 import { forwardRef } from "react";
+import { FaAngleDoubleDown } from "react-icons/fa";
 
 import { AddBrainModal } from "@/lib/components/AddBrainModal";
 
 import { AddNewPromptButton } from "./components/AddNewPromptButton";
 import { MentionItem } from "./components/MentionItem/MentionItem";
 import { useMentionList } from "./hooks/useMentionList";
+import { useSuggestionsOverflowHandler } from "./hooks/useSuggestionsOverflowHandler";
 import { MentionListProps } from "./types";
 
 export type MentionListRef = {
@@ -19,19 +21,36 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
       ref,
     });
 
+    const { suggestionsRef, shouldShowScrollToBottomIcon, scrollToBottom } =
+      useSuggestionsOverflowHandler();
+
     return (
-      <div className="items flex flex-col p-2 px-4 bg-gray-50 rounded-md shadow-md z-40">
-        {props.suggestionData.items.map((item, index) => (
-          <MentionItem
-            key={item.id}
-            item={item}
-            isSelected={index === selectedIndex}
-            onClick={() => selectItem(index)}
-            type={props.suggestionData.type}
-          />
-        ))}
-        {isBrain && <AddBrainModal />}
-        {isPrompt && <AddNewPromptButton />}
+      <div className="items flex flex-1 flex-col p-2 px-4 bg-gray-50 rounded-md shadow-md z-40 max-h-[200px]">
+        <div
+          className="flex flex-1 flex-col overflow-y-auto"
+          ref={suggestionsRef}
+        >
+          {props.suggestionData.items.map((item, index) => (
+            <MentionItem
+              key={item.id}
+              item={item}
+              isSelected={index === selectedIndex}
+              onClick={() => selectItem(index)}
+              type={props.suggestionData.type}
+            />
+          ))}
+        </div>
+        <div className="relative">
+          {shouldShowScrollToBottomIcon && (
+            <FaAngleDoubleDown
+              size={20}
+              className="animate-bounce cursor-pointer absolute right-1 top-0 hover:text-primary"
+              onClick={scrollToBottom}
+            />
+          )}
+          {isBrain && <AddBrainModal />}
+          {isPrompt && <AddNewPromptButton />}
+        </div>
       </div>
     );
   }

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/hooks/useSuggestionsOverflowHandler.ts

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from "react";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useSuggestionsOverflowHandler = () => {
+  const [shouldShowScrollToBottomIcon, setShouldShowScrollToBottomIcon] =
+    useState(false);
+
+  const suggestionsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const scrollContainer = suggestionsRef.current;
+    const handleScroll = () => {
+      if (scrollContainer === null) {
+        return;
+      }
+      const SCROLL_POSITION_NOISE = 10;
+      const asReachedBottom =
+        scrollContainer.scrollHeight -
+          scrollContainer.scrollTop -
+          SCROLL_POSITION_NOISE <=
+        scrollContainer.clientHeight;
+
+      setShouldShowScrollToBottomIcon(!asReachedBottom);
+    };
+    scrollContainer?.addEventListener("scroll", handleScroll);
+
+    return () => {
+      scrollContainer?.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const scrollToBottom = () => {
+    if (suggestionsRef.current) {
+      suggestionsRef.current.scrollTo({
+        top: suggestionsRef.current.scrollHeight,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  return {
+    shouldShowScrollToBottomIcon,
+    scrollToBottom,
+    suggestionsRef,
+  };
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/hooks/useMentionConfig.ts

@@ -17,8 +17,6 @@ type UseMentionConfigProps = {
   suggestionData: SuggestionData;
 };
 
-const MAX_ITEMS_DISPLAYED = 15;
-
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useMentionConfig = ({
   char,
@@ -35,11 +33,9 @@ export const useMentionConfig = ({
       allowSpaces: true,
       pluginKey: new PluginKey(mentionKey),
       items: ({ query }) =>
-        items
-          .filter((item) =>
-            item.label.toLowerCase().startsWith(query.toLowerCase())
-          )
-          .slice(0, MAX_ITEMS_DISPLAYED),
+        items.filter((item) =>
+          item.label.toLowerCase().startsWith(query.toLowerCase())
+        ),
       render: () => {
         let reactRenderer:
           | ReactRenderer<