Filtering for endpoint selector

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(<EndpointSelector endpointType={ENDPOINT_OPTIONS[0].value} onEndpointChange={() => {}} />);
+
+    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();
+  });
 });

ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.tsx

@@ -18,6 +18,10 @@ const EndpointSelector: React.FC<EndpointSelectorProps> = ({ 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())
+        }
       />
     </div>
   );