[front] - feature: add scrollable area to model selection dropdown

 - Introduced a scrollable area within the model selection dropdown to enhance usability for long lists of models
 - Separated "Best performing models" and "Other models" into distinct sections within the scrollable area for better organization

Author: JulesBelveze

front/components/assistant_builder/InstructionScreen.tsx

@@ -8,6 +8,7 @@ import {
   DropdownMenuTrigger,
   Page,
   Popover,
+  ScrollArea,
   Spinner,
 } from "@dust-tt/sparkle";
 import type {
@@ -402,25 +403,27 @@ function AdvancedSettings({
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 <DropdownMenuLabel label="Best performing models" />
-                <ModelList
-                  modelConfigs={bestPerformingModelConfig}
-                  onClick={(modelSettings) => {
-                    setGenerationSettings({
-                      ...generationSettings,
-                      modelSettings,
-                    });
-                  }}
-                />
-                <DropdownMenuLabel label="Other models" />
-                <ModelList
-                  modelConfigs={otherModelsConfig}
-                  onClick={(modelSettings) => {
-                    setGenerationSettings({
-                      ...generationSettings,
-                      modelSettings,
-                    });
-                  }}
-                />
+                <ScrollArea className="max-h-[300px]">
+                  <ModelList
+                    modelConfigs={bestPerformingModelConfig}
+                    onClick={(modelSettings) => {
+                      setGenerationSettings({
+                        ...generationSettings,
+                        modelSettings,
+                      });
+                    }}
+                  />
+                  <DropdownMenuLabel label="Other models" />
+                  <ModelList
+                    modelConfigs={otherModelsConfig}
+                    onClick={(modelSettings) => {
+                      setGenerationSettings({
+                        ...generationSettings,
+                        modelSettings,
+                      });
+                    }}
+                  />
+                </ScrollArea>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>