-
+
- Alias Name
- Target Model
- Actions
+ Alias Name
+ Target Model
+ Actions
-
+
{aliases.map((alias) => (
@@ -284,9 +285,9 @@ const ModelAliasManager: React.FC = ({
{/* Configuration Example */}
{showExampleConfig && (
-
- Configuration Example
- Here's how your current aliases would look in the config:
+
+ Configuration Example
+
Here's how your current aliases would look in the config:
model_aliases:
diff --git a/ui/litellm-dashboard/src/components/common_components/ModelSelector.test.tsx b/ui/litellm-dashboard/src/components/common_components/ModelSelector.test.tsx
index 857e4d3296b..bd7b56f1817 100644
--- a/ui/litellm-dashboard/src/components/common_components/ModelSelector.test.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/ModelSelector.test.tsx
@@ -1,28 +1,20 @@
import { act, fireEvent, render, screen } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
import ModelSelector from "./ModelSelector";
vi.mock("@/components/llm_calls/fetch_models", () => ({
fetchAvailableModels: vi.fn().mockResolvedValue([]),
}));
-const openCustomModelInput = () => {
- const selector = document.querySelector(".ant-select-selector");
- expect(selector).toBeTruthy();
- act(() => {
- fireEvent.mouseDown(selector!);
- });
- act(() => {
- fireEvent.click(screen.getByText("Enter custom model"));
- });
+const openCustomModelInput = async () => {
+ const user = userEvent.setup();
+ await user.click(screen.getByRole("combobox"));
+ await user.click(await screen.findByText("Enter custom model"));
return screen.getByPlaceholderText("Enter custom model name");
};
describe("ModelSelector custom model debounce", () => {
- beforeEach(() => {
- vi.useFakeTimers();
- });
-
afterEach(() => {
act(() => {
vi.runOnlyPendingTimers();
@@ -30,11 +22,12 @@ describe("ModelSelector custom model debounce", () => {
vi.useRealTimers();
});
- it("does not call onChange before the debounce wait elapses", () => {
+ it("does not call onChange before the debounce wait elapses", async () => {
const onChange = vi.fn();
render();
- const input = openCustomModelInput();
+ const input = await openCustomModelInput();
+ vi.useFakeTimers();
act(() => {
fireEvent.change(input, { target: { value: "gpt-4o" } });
@@ -49,11 +42,12 @@ describe("ModelSelector custom model debounce", () => {
expect(onChange).not.toHaveBeenCalled();
});
- it("calls onChange exactly once with the last typed value after the wait", () => {
+ it("calls onChange exactly once with the last typed value after the wait", async () => {
const onChange = vi.fn();
render();
- const input = openCustomModelInput();
+ const input = await openCustomModelInput();
+ vi.useFakeTimers();
act(() => {
fireEvent.change(input, { target: { value: "g" } });
@@ -71,11 +65,12 @@ describe("ModelSelector custom model debounce", () => {
expect(onChange).toHaveBeenCalledWith("gpt-5.2");
});
- it("does not call onChange when unmounted mid-wait", () => {
+ it("does not call onChange when unmounted mid-wait", async () => {
const onChange = vi.fn();
const { unmount } = render();
- const input = openCustomModelInput();
+ const input = await openCustomModelInput();
+ vi.useFakeTimers();
act(() => {
fireEvent.change(input, { target: { value: "gpt-4o" } });
diff --git a/ui/litellm-dashboard/src/components/common_components/ModelSelector.tsx b/ui/litellm-dashboard/src/components/common_components/ModelSelector.tsx
index f2621cd1acb..a50131256fa 100644
--- a/ui/litellm-dashboard/src/components/common_components/ModelSelector.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/ModelSelector.tsx
@@ -1,8 +1,8 @@
import React, { useState, useEffect } from "react";
-import { TextInput, Text } from "@tremor/react";
-import { Select } from "antd";
-import { RobotOutlined } from "@ant-design/icons";
+import { Bot } from "lucide-react";
import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
+import { Input } from "@/components/ui/input";
+import { SearchSelect } from "@/components/shared/SearchSelect";
import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
const MODEL_SELECT_DEBOUNCE_MS = 500;
@@ -80,32 +80,30 @@ const ModelSelector: React.FC = ({
return (
Setting Key/Team logging settings is a LiteLLM Enterprise feature. Global Logging Settings are available for
all free users. Get a trial key{" "}
here
.
-