style(weave): LLM dropdown UX improvements (#3276)

* LLM dropdown UX improvements * make llm dd wider, capitalize variables
wandb · Dec 17, 2024 · b978a7f · b978a7f
1 parent 33aef16
commit b978a7f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/...ents/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/LLMDropdown.tsx b/...ents/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/LLMDropdown.tsx
@@ -19,18 +19,22 @@ export const LLMDropdown: React.FC<LLMDropdownProps> = ({value, onChange}) => {
     // for each provider, get all the LLMs that are supported by that provider
     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,
-          label: llm,
-          value: llm,
-        });
-      }
-      return acc;
-    }, []),
+    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;
+        },
+        []
+      )
+      .sort((a, b) => a.label.localeCompare(b.label)),
   }));
 
   return (
@@ -40,11 +44,11 @@ export const LLMDropdown: React.FC<LLMDropdownProps> = ({value, onChange}) => {
         maxWidth: '100%',
         '& .MuiOutlinedInput-root': {
           width: 'max-content',
-          maxWidth: '200px',
+          maxWidth: '300px',
         },
         '& > div': {
           width: 'max-content',
-          maxWidth: '200px',
+          maxWidth: '300px',
         },
         '& .MuiAutocomplete-popper, & [class*="-menu"]': {
           width: '300px !important',

diff --git a/...e-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/llmMaxTokens.ts b/...e-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/llmMaxTokens.ts
@@ -397,8 +397,8 @@ export const LLM_PROVIDER_LABELS: Record<
 > = {
   openai: 'OpenAI',
   anthropic: 'Anthropic',
-  gemini: 'Gemini',
+  gemini: 'Google Gemini',
   groq: 'Groq',
-  bedrock: 'Bedrock',
+  bedrock: 'AWS Bedrock',
   xai: 'xAI',
 };
diff --git a/...rc/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/usePlaygroundState.ts b/...rc/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/usePlaygroundState.ts
@@ -119,6 +119,13 @@ export const usePlaygroundState = () => {
           if (LLM_MAX_TOKENS_KEYS.includes(inputs.model as LLMMaxTokensKey)) {
             newState.model = inputs.model as LLMMaxTokensKey;
           } else {
+            // Allows for bedrock/us.amazon.nova-micro-v1:0 to map to amazon.nova-micro-v1:0
+            // Allows for gpt-4o-mini to map to gpt-4o-mini-2024-07-18
+            newState.model = LLM_MAX_TOKENS_KEYS.find(
+              key => key.includes(inputs.model) || inputs.model.includes(key)
+            ) as LLMMaxTokensKey;
+          }
+          if (newState.model === undefined) {
             newState.model = DEFAULT_MODEL;
           }
         }