Scrollable user model (#2177)

web/src/app/chat/modal/SetDefaultModelModal.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useEffect, useRef } from "react";
 import { ModalWrapper } from "./ModalWrapper";
 import { Badge, Text } from "@tremor/react";
 import { getDisplayNameForModel, LlmOverride } from "@/lib/hooks";
@@ -21,6 +21,26 @@ export function SetDefaultModelModal({
   defaultModel: string | null;
 }) {
   const { popup, setPopup } = usePopup();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const messageRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const message = messageRef.current;
+
+    if (container && message) {
+      const checkScrollable = () => {
+        if (container.scrollHeight > container.clientHeight) {
+          message.style.display = "block";
+        } else {
+          message.style.display = "none";
+        }
+      };
+      checkScrollable();
+      window.addEventListener("resize", checkScrollable);
+      return () => window.removeEventListener("resize", checkScrollable);
+    }
+  }, []);
 
   const defaultModelDestructured = defaultModel
     ? destructureValue(defaultModel)
@@ -116,7 +136,18 @@ export function SetDefaultModelModal({
           assistants that don&apos;t have a default model assigned.
           {defaultModel == null && "  No default model has been selected!"}
         </Text>
-        <div className="w-full flex text-sm flex-col">
+        <div
+          className="w-full max-h-96 overflow-y-auto flex text-sm flex-col border rounded-md"
+          ref={containerRef}
+        >
+          <div
+            ref={messageRef}
+            className="sticky top-0 bg-background-100 p-2 text-xs text-emphasis font-medium"
+            style={{ display: "none" }}
+          >
+            Scroll to see all options
+          </div>
+          <div>
             <div
               key={-1}
               className="w-full border-b flex items-center gap-x-2 hover:bg-background-50"
@@ -167,6 +198,7 @@ export function SetDefaultModelModal({
               );
             })}
           </div>
+        </div>
       </>
     </ModalWrapper>
   );