From 32b70a24674ab3468fe80d66d87b7ae026de0278 Mon Sep 17 00:00:00 2001
From: Ivy <ivy@acorn.io>
Date: Fri, 13 Dec 2024 17:06:01 -0500
Subject: [PATCH] fix: adds model provider in dropdown options for default
 models (#851)

* fix: adds model provider in dropdown options for default models

* Update DefaultModelAliasForm.tsx

* Update AgentForm.tsx
---
 ui/admin/app/components/agent/AgentForm.tsx   |  5 +++--
 .../model/DefaultModelAliasForm.tsx           | 22 +++++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/ui/admin/app/components/agent/AgentForm.tsx b/ui/admin/app/components/agent/AgentForm.tsx
index 22f1844f0..93b10a3b6 100644
--- a/ui/admin/app/components/agent/AgentForm.tsx
+++ b/ui/admin/app/components/agent/AgentForm.tsx
@@ -137,9 +137,10 @@ export function AgentForm({ agent, onSubmit, onChange }: AgentFormProps) {
 
                                 {models.map((m) => (
                                     <SelectItem key={m.id} value={m.id}>
-                                        {m.name || m.id}{" "}
+                                        {m.name || m.id}
+                                        {" - "}
                                         <span className="text-muted-foreground">
-                                            ({m.modelProvider})
+                                            {m.modelProvider}
                                         </span>
                                     </SelectItem>
                                 ))}
diff --git a/ui/admin/app/components/model/DefaultModelAliasForm.tsx b/ui/admin/app/components/model/DefaultModelAliasForm.tsx
index ee650cf90..30af9cbc4 100644
--- a/ui/admin/app/components/model/DefaultModelAliasForm.tsx
+++ b/ui/admin/app/components/model/DefaultModelAliasForm.tsx
@@ -259,6 +259,10 @@ export function DefaultModelAliasForm({
                         {otherModels.map((model) => (
                             <SelectItem key={model.id} value={model.id}>
                                 {model.name || model.id}
+                                {" - "}
+                                <span className="text-muted-foreground">
+                                    {model.modelProvider}
+                                </span>
                             </SelectItem>
                         ))}
                     </SelectGroup>
@@ -271,16 +275,16 @@ export function DefaultModelAliasForm({
 function getModelOptionLabel(model: Model, aliasFor: ModelAlias) {
     // if the model name is the same as the suggested model name, show that it's suggested
     const suggestionName = SUGGESTED_MODEL_SELECTIONS[aliasFor];
-    if (suggestionName === model.name) {
-        return (
-            <>
-                {model.name || model.id}{" "}
+    return (
+        <>
+            {model.name || model.id}{" "}
+            {suggestionName === model.name && (
                 <span className="text-muted-foreground">(Suggested)</span>
-            </>
-        );
-    }
-
-    return model.name || model.id;
+            )}
+            {" - "}
+            <span className="text-muted-foreground">{model.modelProvider}</span>
+        </>
+    );
 }
 
 export function DefaultModelAliasFormDialog({