From b651012fdc993f60095e69d3fe849e351edb488e Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Fri, 12 Dec 2025 12:00:23 -0800
Subject: [PATCH] [fix] UI playground - allow custom model name as option[0] 
 (#17892)

* fix: move custom model to top

* fix test
---
 .../playground/chat_ui/ChatUI.test.tsx        | 36 +++++++++++++++++++
 .../components/playground/chat_ui/ChatUI.tsx  |  2 +-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx
index 7f97012846..2de324499e 100644
--- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx
+++ b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.test.tsx
@@ -182,4 +182,40 @@ describe("ChatUI", () => {
       expect(screen.queryByText("ResponsesModel")).toBeNull();
     });
   });
+
+  /**
+   * Tests that the 'Enter custom model' option is available in the model selector dropdown.
+   * This ensures users can manually enter a model name if it's not in the list.
+   */
+  it("should show 'Enter custom model' option in model selector", async () => {
+    const { getByText } = render(
+      <ChatUI
+        accessToken="1234567890"
+        token="1234567890"
+        userRole="user"
+        userID="1234567890"
+        disabledPersonalKeyCreation={false}
+      />,
+    );
+
+    // Wait for the component to render
+    await waitFor(() => {
+      expect(getByText("Test Key")).toBeInTheDocument();
+    });
+
+    // Open the "Select Model" dropdown
+    const selectModelLabel = getByText("Select Model");
+    const modelSelectContainer = selectModelLabel.closest("div");
+    const modelSelect = modelSelectContainer?.querySelector(".ant-select-selector");
+
+    fireEvent.mouseDown(modelSelect!);
+
+    await waitFor(() => {
+      // Get all options in the dropdown (Ant Design renders these in a portal)
+      const options = document.querySelectorAll(".ant-select-item-option-content");
+      expect(options.length).toBeGreaterThan(0);
+      // Check if the first option is 'Enter custom model'
+      expect(options[0]).toHaveTextContent("Enter custom model");
+    });
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
index 31cb87611a..bc3af2cfc7 100644
--- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
+++ b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
@@ -1208,6 +1208,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
                     placeholder="Select a Model"
                     onChange={onModelChange}
                     options={[
+                      { value: "custom", label: "Enter custom model", key: "custom" },
                       ...Array.from(
                         new Set(
                           modelInfo
@@ -1237,7 +1238,6 @@ const ChatUI: React.FC<ChatUIProps> = ({
                         label: model_group,
                         key: index,
                       })),
-                      { value: "custom", label: "Enter custom model", key: "custom" },
                     ]}
                     style={{ width: "100%" }}
                     showSearch={true}