diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx
index 8e242e6ec35..32f1013f386 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx
@@ -475,4 +475,71 @@ describe("ChatUI", () => {
expect(await screen.findByText("clip.wav")).toBeInTheDocument();
});
+
+ it("should name the virtual key source options instead of showing raw values", async () => {
+ const user = userEvent.setup();
+
+ render(
+ ,
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("Test Key")).toBeInTheDocument();
+ });
+
+ const keySourceTrigger = screen.getByLabelText("Virtual Key Source");
+ expect(keySourceTrigger).toHaveTextContent("Current UI Session");
+ expect(keySourceTrigger).not.toHaveTextContent("session");
+
+ await user.click(keySourceTrigger);
+ await user.click(await screen.findByRole("option", { name: "Virtual Key" }));
+
+ await waitFor(() => {
+ expect(screen.getByLabelText("Virtual Key Source")).toHaveTextContent("Virtual Key");
+ });
+ expect(screen.getByLabelText("Virtual Key Source")).not.toHaveTextContent("custom");
+ });
+
+ it("should re-enable the model selector when the virtual key is cleared mid-load", async () => {
+ const user = userEvent.setup();
+ (fetchModelsModule.fetchAvailableModels as ReturnType).mockImplementation(
+ () => new Promise(() => {}),
+ );
+
+ render(
+ ,
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("Test Key")).toBeInTheDocument();
+ });
+
+ await user.click(screen.getByLabelText("Virtual Key Source"));
+ await user.click(await screen.findByRole("option", { name: "Virtual Key" }));
+
+ const keyField = await screen.findByPlaceholderText("Enter custom Virtual Key");
+ await user.type(keyField, "sk-test");
+
+ await waitFor(() => {
+ expect(screen.getByPlaceholderText("Loading models...")).toBeInTheDocument();
+ });
+
+ await user.clear(keyField);
+
+ await waitFor(() => {
+ expect(screen.getByPlaceholderText("Select a Model")).not.toBeDisabled();
+ });
+ });
});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx
index f3d79dd3a2f..9ef44589240 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx
@@ -407,6 +407,7 @@ const ChatUI: React.FC = ({
if (!userApiKey) {
setModelInfo([]);
setModelLoadError(false);
+ setIsLoadingModels(false);
return;
}
@@ -1240,7 +1241,7 @@ const ChatUI: React.FC = ({
}}
>
-
+ {apiKeySource === "custom" ? "Virtual Key" : "Current UI Session"}
Current UI Session