Hide scrollbar in model selector dropdown while maintaining scroll functionality (#396)

* fix: hide vertical scrollbar in model selector while maintaining scroll functionality

* feat: add gradient shadow indicator for scrollable content

---------

Co-authored-by: Dayuan Jiang <jdy.toh@gmail.com>

components/ai-elements/model-selector.tsx

@@ -66,8 +66,22 @@ export const ModelSelectorInput = ({
 
 export type ModelSelectorListProps = ComponentProps<typeof CommandList>
 
-export const ModelSelectorList = (props: ModelSelectorListProps) => (
+export const ModelSelectorList = ({
-    <CommandList {...props} />
+    className,
+    ...props
+}: ModelSelectorListProps) => (
+    <div className="relative">
+        <CommandList
+            className={cn(
+                // Hide scrollbar on all platforms
+                "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+                className,
+            )}
+            {...props}
+        />
+        {/* Bottom shadow indicator for scrollable content */}
+        <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-muted/80 via-muted/40 to-transparent" />
+    </div>
 )
 
 export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>

components/model-selector.tsx

@@ -124,7 +124,7 @@ export function ModelSelector({
                 <ModelSelectorInput
                     placeholder={dict.modelConfig.searchModels}
                 />
-                <ModelSelectorList>
+                <ModelSelectorList className="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
                     <ModelSelectorEmpty>
                         {validatedModels.length === 0 && models.length > 0
                             ? dict.modelConfig.noVerifiedModels