From 5fc28f245e6ff655e96439a260256dd9f49e348b Mon Sep 17 00:00:00 2001
From: Josiah Lee <josiahwlee@gmail.com>
Date: Tue, 17 Dec 2024 18:01:00 -0800
Subject: [PATCH] add better search function to llm dropdown (#3280)

---
 .../PlaygroundChat/LLMDropdown.tsx            | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/LLMDropdown.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/LLMDropdown.tsx
index fb0e280484a0..a15437de1b19 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/LLMDropdown.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/LLMDropdown.tsx
@@ -20,20 +20,23 @@ export const LLMDropdown: React.FC<LLMDropdownProps> = ({value, onChange}) => {
     label: LLM_PROVIDER_LABELS[provider],
     // filtering to the LLMs that are supported by that provider
     options: Object.keys(LLM_MAX_TOKENS)
-      .reduce<Array<{group: string; label: string; value: string}>>(
-        (acc, llm) => {
-          if (LLM_MAX_TOKENS[llm as LLMMaxTokensKey].provider === provider) {
-            acc.push({
-              group: provider,
-              // add provider to the label if the LLM is not already prefixed with it
-              label: llm.includes(provider) ? llm : provider + '/' + llm,
-              value: llm,
-            });
-          }
-          return acc;
-        },
-        []
-      )
+      .reduce<
+        Array<{
+          provider_label: string;
+          label: string;
+          value: string;
+        }>
+      >((acc, llm) => {
+        if (LLM_MAX_TOKENS[llm as LLMMaxTokensKey].provider === provider) {
+          acc.push({
+            provider_label: LLM_PROVIDER_LABELS[provider],
+            // add provider to the label if the LLM is not already prefixed with it
+            label: llm.includes(provider) ? llm : provider + '/' + llm,
+            value: llm,
+          });
+        }
+        return acc;
+      }, [])
       .sort((a, b) => a.label.localeCompare(b.label)),
   }));
 
@@ -74,6 +77,14 @@ export const LLMDropdown: React.FC<LLMDropdownProps> = ({value, onChange}) => {
         options={options}
         size="medium"
         isSearchable
+        filterOption={(option, inputValue) => {
+          const searchTerm = inputValue.toLowerCase();
+          return (
+            option.data.provider_label.toLowerCase().includes(searchTerm) ||
+            option.data.label.toLowerCase().includes(searchTerm) ||
+            option.data.value.toLowerCase().includes(searchTerm)
+          );
+        }}
       />
     </Box>
   );