diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.test.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.test.tsx index fa2affdf4b..85c120fb90 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.test.tsx +++ b/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.test.tsx @@ -1,5 +1,6 @@ -import { render, waitFor } from "@testing-library/react"; -import { describe, it, expect } from "vitest"; +import { render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it } from "vitest"; import EndpointSelector from "./EndpointSelector"; import { ENDPOINT_OPTIONS } from "./chatConstants"; @@ -12,4 +13,18 @@ describe("EndpointSelector", () => { }); }); }); + + it("should filter and show audio endpoints when user inputs 'audio'", async () => { + const user = userEvent.setup(); + render( {}} />); + + const combobox = screen.getByRole("combobox"); + await user.click(combobox); + + const input = await screen.findByRole("combobox"); + await user.type(input, "audio"); + + expect(await screen.findByText("/v1/audio/speech")).toBeInTheDocument(); + expect(await screen.findByText("/v1/audio/transcriptions")).toBeInTheDocument(); + }); }); diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.tsx index fcdab90047..c6c15d3714 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.tsx +++ b/ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.tsx @@ -18,6 +18,10 @@ const EndpointSelector: React.FC = ({ endpointType, onEnd onChange={onEndpointChange} options={ENDPOINT_OPTIONS} className="rounded-md" + filterOption={(input, option) => + (option?.label ?? "").toLowerCase().includes(input.toLowerCase()) || + (option?.value ?? "").toLowerCase().includes(input.toLowerCase()) + } /> );