Improve keys without providers

frontend/src/components/modals/settings/ModelSelector.tsx

@@ -27,41 +27,45 @@ export function ModelSelector({ models, onModelChange }: ModelSelectorProps) {
   };
 
   return (
-    <div>
-      <span data-testid="model-id">{litellmId || "No model selected"}</span>
+    <div className="flex flex-col gap-2">
+      <span className="text-center italic text-gray-500" data-testid="model-id">
+        {litellmId?.replace("other", "") || "No model selected"}
+      </span>
 
-      <Autocomplete
-        label="Provider"
-        onSelectionChange={(e) => {
-          if (e?.toString()) handleChangeProvider(e.toString());
-        }}
-      >
-        {Object.keys(models).map((provider) => (
-          <AutocompleteItem key={provider} value={provider}>
-            {provider}
-          </AutocompleteItem>
-        ))}
-      </Autocomplete>
+      <div className="flex flex-col gap-3">
+        <Autocomplete
+          label="Provider"
+          onSelectionChange={(e) => {
+            if (e?.toString()) handleChangeProvider(e.toString());
+          }}
+        >
+          {Object.keys(models).map((provider) => (
+            <AutocompleteItem key={provider} value={provider}>
+              {provider}
+            </AutocompleteItem>
+          ))}
+        </Autocomplete>
 
-      <Autocomplete
-        label="Model"
-        onSelectionChange={(e) => {
-          if (e?.toString()) handleChangeModel(e.toString());
-        }}
-        isDisabled={!selectedProvider}
-      >
-        {selectedProvider ? (
-          models[selectedProvider].models.map((model) => (
-            <AutocompleteItem key={model} value={model}>
-              {model}
+        <Autocomplete
+          label="Model"
+          onSelectionChange={(e) => {
+            if (e?.toString()) handleChangeModel(e.toString());
+          }}
+          isDisabled={!selectedProvider}
+        >
+          {selectedProvider ? (
+            models[selectedProvider].models.map((model) => (
+              <AutocompleteItem key={model} value={model}>
+                {model}
+              </AutocompleteItem>
+            ))
+          ) : (
+            <AutocompleteItem key="" value="">
+              Select a model
             </AutocompleteItem>
-          ))
-        ) : (
-          <AutocompleteItem key="" value="">
-            Select a model
-          </AutocompleteItem>
-        )}
-      </Autocomplete>
+          )}
+        </Autocomplete>
+      </div>
     </div>
   );
 }

frontend/src/components/modals/settings/SettingsModal.tsx

@@ -26,6 +26,7 @@ import toast from "#/utils/toast";
 import BaseModal from "../base-modal/BaseModal";
 import SettingsForm from "./SettingsForm";
 import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders";
+import { ModelSelector } from "./ModelSelector";
 
 interface SettingsProps {
   isOpen: boolean;
@@ -184,6 +185,10 @@ function SettingsModal({ isOpen, onOpenChange }: SettingsProps) {
         },
       ]}
     >
+      <ModelSelector
+        models={organizeModelsAndProviders(models)}
+        onModelChange={handleModelChange}
+      />
       {loading && <Spinner />}
       {!loading && (
         <SettingsForm

frontend/src/utils/organizeModelsAndProviders.test.ts

@@ -39,7 +39,7 @@ test("organizeModelsAndProviders", () => {
       separator: "/",
       models: ["@cf/mistral/mistral-7b-instruct-v0.1"],
     },
-    "": {
+    other: {
       separator: "",
       models: ["gpt-4o", "together-ai-21.1b-41b", "gpt-3.5-turbo"],
     },

frontend/src/utils/organizeModelsAndProviders.ts

@@ -32,10 +32,11 @@ export const organizeModelsAndProviders = (models: string[]) => {
       provider,
       model: modelId,
     } = extractModelAndProvider(model);
-    if (!object[provider]) {
-      object[provider] = { separator, models: [] };
+    const key = provider || "other";
+    if (!object[key]) {
+      object[key] = { separator, models: [] };
     }
-    object[provider].models.push(modelId);
+    object[key].models.push(modelId);
   });
   return object;
 };