add better search function to llm dropdown (#3280)

wandb · Dec 18, 2024 · 5fc28f2 · 5fc28f2
1 parent adb740b
commit 5fc28f2
Showing 1 changed file with 25 additions and 14 deletions.
diff --git a/...ents/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/LLMDropdown.tsx b/...ents/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>
   );