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( + , + ); + + // 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 = ({ 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 = ({ label: model_group, key: index, })), - { value: "custom", label: "Enter custom model", key: "custom" }, ]} style={{ width: "100%" }} showSearch={true}