From dddfb3c90eec900d747790a439bd362a764039cd Mon Sep 17 00:00:00 2001 From: j-sanaa Date: Fri, 10 Apr 2026 16:41:40 -0700 Subject: [PATCH] Fix/agentflow - Fixes for minor UI issues in extracted canvas (#6190) * Fix c=incorrect color for edit nodes * Fix to ensure all input fields have same width * Fix accordian having an extra line * Fix gemini comment * Test fix --- .../agentflow/src/atoms/ConditionBuilder.tsx | 24 +++++---- .../agentflow/src/atoms/MessagesInput.tsx | 24 +++++---- .../src/atoms/StructuredOutputBuilder.tsx | 24 +++++---- .../core/theme/createAgentflowTheme.test.ts | 4 +- .../src/core/theme/createAgentflowTheme.ts | 20 +++++-- packages/agentflow/src/core/theme/tokens.ts | 54 +++++++++++++++++++ .../canvas/components/NodeToolbarActions.tsx | 2 +- 7 files changed, 113 insertions(+), 39 deletions(-) diff --git a/packages/agentflow/src/atoms/ConditionBuilder.tsx b/packages/agentflow/src/atoms/ConditionBuilder.tsx index c63472c5c..f16e54ac4 100644 --- a/packages/agentflow/src/atoms/ConditionBuilder.tsx +++ b/packages/agentflow/src/atoms/ConditionBuilder.tsx @@ -171,17 +171,19 @@ export function ConditionBuilder({ - + + + ) } diff --git a/packages/agentflow/src/atoms/MessagesInput.tsx b/packages/agentflow/src/atoms/MessagesInput.tsx index 5871c501b..7c5704e67 100644 --- a/packages/agentflow/src/atoms/MessagesInput.tsx +++ b/packages/agentflow/src/atoms/MessagesInput.tsx @@ -219,17 +219,19 @@ export function MessagesInput({ inputParam, data, disabled = false, variableItem ))} {/* Add button */} - + + + {/* Expand content dialog — conditionally mounted so it always initializes fresh */} {expandIndex !== null && ( diff --git a/packages/agentflow/src/atoms/StructuredOutputBuilder.tsx b/packages/agentflow/src/atoms/StructuredOutputBuilder.tsx index 92a65289c..7eccb13a0 100644 --- a/packages/agentflow/src/atoms/StructuredOutputBuilder.tsx +++ b/packages/agentflow/src/atoms/StructuredOutputBuilder.tsx @@ -245,17 +245,19 @@ export function StructuredOutputBuilder({ inputParam, data, disabled = false, on ))} {/* Add button */} - + + + {/* Expand dialog for JSON Schema */} {expandOpen && ( diff --git a/packages/agentflow/src/core/theme/createAgentflowTheme.test.ts b/packages/agentflow/src/core/theme/createAgentflowTheme.test.ts index 50b1ebad8..61a611e65 100644 --- a/packages/agentflow/src/core/theme/createAgentflowTheme.test.ts +++ b/packages/agentflow/src/core/theme/createAgentflowTheme.test.ts @@ -32,8 +32,8 @@ describe('createAgentflowTheme', () => { expect(theme.palette.divider).toBe(tokens.colors.border.default.light) }) - it('should set primary color from agent node color', () => { - expect(theme.palette.primary.main).toBe(tokens.colors.nodes.agent) + it('should set primary color from palette token', () => { + expect(theme.palette.primary.main).toBe(tokens.colors.palette.primary.main) }) it('should set custom card palette color', () => { diff --git a/packages/agentflow/src/core/theme/createAgentflowTheme.ts b/packages/agentflow/src/core/theme/createAgentflowTheme.ts index dc4020525..1e750659c 100644 --- a/packages/agentflow/src/core/theme/createAgentflowTheme.ts +++ b/packages/agentflow/src/core/theme/createAgentflowTheme.ts @@ -17,9 +17,11 @@ export function createAgentflowTheme(isDarkMode: boolean): Theme { return createTheme({ palette: { mode, - primary: { - main: tokens.colors.nodes.agent - }, + primary: tokens.colors.palette.primary, + secondary: tokens.colors.palette.secondary, + success: tokens.colors.palette.success, + error: tokens.colors.palette.error, + warning: tokens.colors.palette.warning, background: { default: tokens.colors.background.canvas[mode], paper: tokens.colors.background.card[mode] @@ -46,6 +48,18 @@ export function createAgentflowTheme(isDarkMode: boolean): Theme { body1: { fontSize: '0.875rem', fontWeight: 400 }, body2: { fontSize: '0.75rem', fontWeight: 400 } }, + components: { + MuiPaper: { + defaultProps: { + elevation: 0 + }, + styleOverrides: { + root: { + backgroundImage: 'none' + } + } + } + }, spacing: 8, // MUI's default base unit shape: { borderRadius: tokens.borderRadius.md diff --git a/packages/agentflow/src/core/theme/tokens.ts b/packages/agentflow/src/core/theme/tokens.ts index 66890385b..429c9547a 100644 --- a/packages/agentflow/src/core/theme/tokens.ts +++ b/packages/agentflow/src/core/theme/tokens.ts @@ -45,6 +45,31 @@ const baseColors = { warningText: '#744210', info: '#2196f3', + // MUI palette colors - primary (blue) + primaryLight: '#e3f2fd', + primaryMain: '#2196f3', + primaryDark: '#1e88e5', + + // MUI palette colors - secondary (purple) + secondaryLight: '#ede7f6', + secondaryMain: '#673ab7', + secondaryDark: '#5e35b1', + + // MUI palette colors - success (green) + successLight: '#cdf5d8', + successMain: '#00e676', + successDark: '#00c853', + + // MUI palette colors - error (red) + errorLight: '#f3d2d2', + errorMain: '#f44336', + errorDark: '#c62828', + + // MUI palette colors - warning (yellow) + warningLight: '#fff8e1', + warningMain: '#ffe57f', + warningDark: '#ffc107', + // Node type colors (brand colors) nodeCondition: '#FFB938', nodeStart: '#7EE787', @@ -109,6 +134,35 @@ export const tokens = { tertiary: { light: baseColors.gray600, dark: baseColors.gray500 } }, + // MUI theme palette colors - referenced from base + palette: { + primary: { + light: baseColors.primaryLight, + main: baseColors.primaryMain, + dark: baseColors.primaryDark + }, + secondary: { + light: baseColors.secondaryLight, + main: baseColors.secondaryMain, + dark: baseColors.secondaryDark + }, + success: { + light: baseColors.successLight, + main: baseColors.successMain, + dark: baseColors.successDark + }, + error: { + light: baseColors.errorLight, + main: baseColors.errorMain, + dark: baseColors.errorDark + }, + warning: { + light: baseColors.warningLight, + main: baseColors.warningMain, + dark: baseColors.warningDark + } + }, + // Semantic status colors - referenced from base semantic: { success: baseColors.success, diff --git a/packages/agentflow/src/features/canvas/components/NodeToolbarActions.tsx b/packages/agentflow/src/features/canvas/components/NodeToolbarActions.tsx index 2b5728dc2..25cd3bbd8 100644 --- a/packages/agentflow/src/features/canvas/components/NodeToolbarActions.tsx +++ b/packages/agentflow/src/features/canvas/components/NodeToolbarActions.tsx @@ -55,7 +55,7 @@ function NodeToolbarActionsComponent({ nodeId, nodeName, isVisible, onInfoClick title='Edit' onClick={handleEditClick} sx={{ - color: isDarkMode ? 'white' : theme.palette.grey[600], + color: isDarkMode ? 'white' : 'inherit', '&:hover': { color: theme.palette.primary.main } }} >