From d2e5afb298c5123d0ebe5eb0ba05135c3ba6bc5d Mon Sep 17 00:00:00 2001
From: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>
Date: Thu, 25 Dec 2025 05:28:04 +0530
Subject: [PATCH] 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 | 18 ++++++++++++++++--
 components/model-selector.tsx             |  2 +-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/ai-elements/model-selector.tsx b/components/ai-elements/model-selector.tsx
index d5bcae2..92f82fc 100644
--- a/components/ai-elements/model-selector.tsx
+++ b/components/ai-elements/model-selector.tsx
@@ -66,8 +66,22 @@ export const ModelSelectorInput = ({
 
 export type ModelSelectorListProps = ComponentProps<typeof CommandList>
 
-export const ModelSelectorList = (props: ModelSelectorListProps) => (
-    <CommandList {...props} />
+export const ModelSelectorList = ({
+    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>
diff --git a/components/model-selector.tsx b/components/model-selector.tsx
index cefab04..8153433 100644
--- a/components/model-selector.tsx
+++ b/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