From d6f2c11a79261e750b3173a1fe8e7a8247d679cf Mon Sep 17 00:00:00 2001 From: Abigail MacKenzie-Armes <70247056+abimacarmes@users.noreply.github.com> Date: Thu, 22 Aug 2024 10:09:19 -0400 Subject: [PATCH 1/6] fix(toolkit): tool list and switch design fixes (#718) * fix tool list styling * update switch styling with on/off * use changes in create assistant flow --- .../AgentSettingsForm/ToolsStep.tsx | 3 +- .../components/Composer/DataSourceMenu.tsx | 1 + .../src/components/UI/Switch.tsx | 68 +++++++++++++------ .../src/components/UI/ToggleCard.tsx | 11 ++- 4 files changed, 57 insertions(+), 26 deletions(-) diff --git a/src/interfaces/assistants_web/src/components/AgentSettingsForm/ToolsStep.tsx b/src/interfaces/assistants_web/src/components/AgentSettingsForm/ToolsStep.tsx index 7033aa1df3..1f65fd1c0a 100644 --- a/src/interfaces/assistants_web/src/components/AgentSettingsForm/ToolsStep.tsx +++ b/src/interfaces/assistants_web/src/components/AgentSettingsForm/ToolsStep.tsx @@ -57,7 +57,7 @@ const ToolRow: React.FC<{ handleSwitch: (checked: boolean) => void; }> = ({ name, description, icon, checked, handleSwitch }) => { return ( -
+
@@ -70,6 +70,7 @@ const ToolRow: React.FC<{ !!name && handleSwitch(checked)} + showCheckedState />
{description} diff --git a/src/interfaces/assistants_web/src/components/Composer/DataSourceMenu.tsx b/src/interfaces/assistants_web/src/components/Composer/DataSourceMenu.tsx index 765976a3da..2513ed8cec 100644 --- a/src/interfaces/assistants_web/src/components/Composer/DataSourceMenu.tsx +++ b/src/interfaces/assistants_web/src/components/Composer/DataSourceMenu.tsx @@ -113,6 +113,7 @@ export const DataSourceMenu: React.FC = ({ agent, tools }) => { theme="evolved-blue" checked={!!paramsTools?.find((t) => t.name === tool.name)} onChange={(checked) => handleToggle(tool.name!, checked)} + showCheckedState /> )}
diff --git a/src/interfaces/assistants_web/src/components/UI/Switch.tsx b/src/interfaces/assistants_web/src/components/UI/Switch.tsx index 5ccf10d275..fd14128221 100644 --- a/src/interfaces/assistants_web/src/components/UI/Switch.tsx +++ b/src/interfaces/assistants_web/src/components/UI/Switch.tsx @@ -19,6 +19,7 @@ type Props = { label?: string; name?: string; theme?: COHERE_BRANDED_COLORS; + showCheckedState?: boolean; className?: string; }; @@ -30,8 +31,30 @@ export const Switch: React.FC = ({ tooltip, theme = 'evolved-green', name, + showCheckedState = false, className = '', }) => { + const themeColors: Partial> = { + blue: 'bg-blue-500 group-hover:bg-blue-400', + 'evolved-green': 'bg-evolved-green-700 group-hover:bg-evolved-green-500', + quartz: 'bg-quartz-500 group-hover:bg-quartz-400', + green: 'bg-green-250 group-hover:bg-green-200', + mushroom: 'bg-mushroom-600 group-hover:bg-mushroom-500', + coral: 'bg-coral-600 group-hover:bg-coral-500', + 'evolved-blue': 'bg-evolved-blue-500 group-hover:bg-blue-400', + 'evolved-mushroom': 'bg-evolved-mushroom-500 group-hover:bg-evolved-mushroom-600', + 'evolved-quartz': 'bg-evolved-quartz-500 group-hover:bg-evolved-quartz-700', + }; + + const checkedColor = checked + ? themeColors[theme] + : 'bg-mushroom-900 hover:bg-mushroom-800 dark:bg-volcanic-500 dark:group-hover:bg-volcanic-400'; + + const toggleTextClassNames = cn( + 'pointer-events-none absolute', + 'pt-0.5 font-variable text-[6px] font-medium uppercase', + 'transform transition-all duration-300 ease-in-out' + ); return (
@@ -47,34 +70,41 @@ export const Switch: React.FC = ({ checked={checked} onChange={onChange} className={cn( - 'relative inline-flex h-5 w-10 shrink-0 cursor-pointer rounded border-2 border-transparent', + 'relative inline-flex h-4 w-[30px] shrink-0 cursor-pointer rounded border-2 border-transparent', 'transition-colors duration-300 ease-in-out', 'focus-visible:outline focus-visible:outline-offset-4 focus-visible:outline-volcanic-500', - { - 'bg-mushroom-900 hover:bg-mushroom-800 dark:bg-volcanic-500 dark:group-hover:bg-volcanic-400': - !checked, - 'bg-blue-500 group-hover:bg-blue-400': checked && theme === 'blue', - 'bg-evolved-green-700 group-hover:bg-evolved-green-500': - checked && theme === 'evolved-green', - 'bg-quartz-500 group-hover:bg-quartz-400': checked && theme === 'quartz', - 'bg-green-250 group-hover:bg-green-200': checked && theme === 'green', - 'bg-mushroom-600 group-hover:bg-mushroom-500': checked && theme === 'mushroom', - 'bg-coral-600 group-hover:bg-coral-500': checked && theme === 'coral', - 'bg-evolved-blue-500 group-hover:bg-blue-400': checked && theme === 'evolved-blue', - 'bg-evolved-mushroom-500 group-hover:bg-evolved-mushroom-600': - checked && theme === 'evolved-mushroom', - 'bg-evolved-quartz-500 group-hover:bg-evolved-quartz-700': - checked && theme === 'evolved-quartz', - } + checkedColor )} > + {showCheckedState && ( + <> + + + + )}