fix: dropdown model position (#5199)

web-app/src/containers/DropdownModelProvider.tsx

@@ -8,7 +8,7 @@ import { useModelProvider } from '@/hooks/useModelProvider'
 import { cn, getProviderTitle } from '@/lib/utils'
 import { highlightFzfMatch } from '@/utils/highlight'
 import Capabilities from './Capabilities'
-import { IconSettings, IconX, IconCheck } from '@tabler/icons-react'
+import { IconSettings, IconX } from '@tabler/icons-react'
 import { useNavigate } from '@tanstack/react-router'
 import { route } from '@/constants/routes'
 import { useThreads } from '@/hooks/useThreads'
@@ -149,8 +149,19 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
   const groupedItems = useMemo(() => {
     const groups: Record<string, SearchableModel[]> = {}
 
+    if (!searchValue) {
+      // When not searching, show all active providers (even without models)
+      providers.forEach((provider) => {
+        if (provider.active) {
+          groups[provider.provider] = []
+        }
+      })
+    }
+
+    // Add the filtered items to their respective groups
     filteredItems.forEach((item) => {
       const providerKey = item.provider.provider
+      console.log(providerKey, 'providerKey')
       if (!groups[providerKey]) {
         groups[providerKey] = []
       }
@@ -158,7 +169,7 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
     })
 
     return groups
-  }, [filteredItems])
+  }, [filteredItems, providers, searchValue])
 
   const handleSelect = useCallback(
     (searchableModel: SearchableModel) => {
@@ -213,14 +224,14 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
       </div>
 
       <PopoverContent
-        className="w-80 p-0 max-h-[400px] overflow-hidden"
-        side="bottom"
+        className={cn('w-60 p-0', searchValue.length === 0 && 'h-[320px]')}
         align="start"
         sideOffset={10}
         alignOffset={-8}
-        avoidCollisions={false}
+        side={searchValue.length === 0 ? undefined : 'top'}
+        avoidCollisions={searchValue.length === 0 ? true : false}
       >
-        <div className="flex flex-col w-full">
+        <div className="flex flex-col w-full h-full">
           {/* Search input */}
           <div className="relative px-2 py-1.5 border-b border-main-view-fg/10">
             <input
@@ -253,6 +264,7 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
                   const providerInfo = providers.find(
                     (p) => p.provider === providerKey
                   )
+
                   if (!providerInfo) return null
 
                   return (
@@ -287,10 +299,15 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
                       </div>
 
                       {/* Models for this provider */}
-                      {models.map((searchableModel) => {
+                      {models.length === 0 ? (
+                        // Show message when provider has no available models
+                        <></>
+                      ) : (
+                        models.map((searchableModel) => {
                           const isSelected =
                             selectedModel?.id === searchableModel.model.id &&
-                          selectedProvider === searchableModel.provider.provider
+                            selectedProvider ===
+                              searchableModel.provider.provider
                           const capabilities =
                             searchableModel.model.capabilities || []
 
@@ -313,22 +330,18 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
                                       searchableModel.model.id,
                                   }}
                                 />
-                              {isSelected && (
-                                <IconCheck
-                                  size={16}
-                                  className="text-accent shrink-0"
-                                />
-                              )}
+
                                 <div className="flex-1"></div>
                                 {capabilities.length > 0 && (
-                                <div className="flex-shrink-0">
+                                  <div className="flex-shrink-0 -mr-1.5">
                                     <Capabilities capabilities={capabilities} />
                                   </div>
                                 )}
                               </div>
                             </div>
                           )
-                      })}
+                        })
+                      )}
                     </div>
                   )
                 })}