fix(frontend): tools display name

cohere-ai · Jun 27, 2024 · 6113e65 · 6113e65
1 parent d392945
commit 6113e65
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/src/interfaces/coral_web/src/components/Agents/AgentForm.tsx b/src/interfaces/coral_web/src/components/Agents/AgentForm.tsx
@@ -84,7 +84,7 @@ export const AgentForm: React.FC<Props> = ({
             return (
               <Checkbox
                 key={tool.name}
-                label={tool.name}
+                label={tool.display_name ?? tool.name}
                 name={tool.name + i}
                 checked={checked}
                 onChange={(e) => onToolToggle(tool.name, e.target.checked)}

diff --git a/src/interfaces/coral_web/src/components/Settings/ToolsTab.tsx b/src/interfaces/coral_web/src/components/Settings/ToolsTab.tsx
@@ -94,19 +94,17 @@ export const ToolsTab: React.FC<{ requiredTools: string[] | undefined; className
                 const disabled = !!requiredTools;
 
                 return (
-                  <>
-                    <ToggleCard
-                      key={name}
-                      disabled={disabled}
-                      errorMessage={error_message}
-                      checked={checked}
-                      label={display_name ?? name}
-                      name={name}
-                      icon={TOOL_ID_TO_DISPLAY_INFO[name]?.icon ?? TOOL_FALLBACK_ICON}
-                      description={description ?? ''}
-                      onToggle={(checked) => handleToggle(name, checked)}
-                    />
-                  </>
+                  <ToggleCard
+                    key={name}
+                    disabled={disabled}
+                    errorMessage={error_message}
+                    checked={checked}
+                    label={display_name ?? name}
+                    name={name}
+                    icon={TOOL_ID_TO_DISPLAY_INFO[name]?.icon ?? TOOL_FALLBACK_ICON}
+                    description={description ?? ''}
+                    onToggle={(checked) => handleToggle(name, checked)}
+                  />
                 );
               })}
             </div>