chore: workflow ui (#3175)

* chore: workflow ui

* fix

* change icon color config

* change popover to mymenu

packages/web/components/common/Icon/constants.ts

@@ -5,6 +5,7 @@ export const iconPaths = {
   change: () => import('./icons/change.svg'),
   chatSend: () => import('./icons/chatSend.svg'),
   check: () => import('./icons/check.svg'),
+  checkCircle: () => import('./icons/checkCircle.svg'),
   closeSolid: () => import('./icons/closeSolid.svg'),
   collectionLight: () => import('./icons/collectionLight.svg'),
   collectionSolid: () => import('./icons/collectionSolid.svg'),
@@ -184,6 +185,7 @@ export const iconPaths = {
   'core/workflow/debugNext': () => import('./icons/core/workflow/debugNext.svg'),
   'core/workflow/debugResult': () => import('./icons/core/workflow/debugResult.svg'),
   'core/workflow/edgeArrow': () => import('./icons/core/workflow/edgeArrow.svg'),
+  'core/workflow/edgeArrowBold': () => import('./icons/core/workflow/edgeArrowBold.svg'),
   'core/workflow/grout': () => import('./icons/core/workflow/grout.svg'),
   'core/workflow/inputType/array': () => import('./icons/core/workflow/inputType/array.svg'),
   'core/workflow/inputType/customVariable': () =>

packages/web/components/common/MyBox/IconButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Flex, FlexProps } from '@chakra-ui/react';
+import MyIcon from '../Icon';
+
+type Props = FlexProps & {
+  icon: string;
+  onClick?: () => void;
+  hoverColor?: string;
+};
+
+const IconButton = ({ icon, onClick, hoverColor = 'primary.600', ...props }: Props) => {
+  return (
+    <Flex
+      mr={1}
+      p={1}
+      color={'myGray.500'}
+      rounded={'sm'}
+      alignItems={'center'}
+      bg={'transparent'}
+      transition={'background 0.1s'}
+      cursor={'pointer'}
+      _hover={{
+        bg: 'myGray.05',
+        color: hoverColor
+      }}
+      onClick={onClick}
+      {...props}
+    >
+      <MyIcon name={icon as any} w={'16px'} />
+    </Flex>
+  );
+};
+
+export default IconButton;

packages/web/components/common/MyMenu/index.tsx

@@ -7,22 +7,26 @@ import {
   useOutsideClick,
   MenuButton,
   MenuItemProps,
-  PlacementWithLogical
+  PlacementWithLogical,
+  AvatarProps,
+  BoxProps,
+  DividerProps
 } from '@chakra-ui/react';
 import MyDivider from '../MyDivider';
 import type { IconNameType } from '../Icon/type';
 import { useSystem } from '../../../hooks/useSystem';
 import Avatar from '../Avatar';
 
-export type MenuItemType = 'primary' | 'danger';
+export type MenuItemType = 'primary' | 'danger' | 'gray' | 'grayBg';
+
+export type MenuSizeType = 'sm' | 'md' | 'xs' | 'mini';
 
 export type Props = {
   width?: number | string;
   offset?: [number, number];
   Button: React.ReactNode;
   trigger?: 'hover' | 'click';
-  iconSize?: string;
-  iconRadius?: string;
+  size?: MenuSizeType;
 
   placement?: PlacementWithLogical;
   menuList: {
@@ -42,14 +46,13 @@ export type Props = {
 const MyMenu = ({
   width = 'auto',
   trigger = 'hover',
+  size = 'sm',
   offset,
-  iconSize = '1rem',
   Button,
   menuList,
-  iconRadius,
   placement = 'bottom-start'
 }: Props) => {
-  const typeMapStyle: Record<MenuItemType, MenuItemProps> = {
+  const typeMapStyle: Record<MenuItemType, MenuItemProps & { iconColor?: string }> = {
     primary: {
       _hover: {
         backgroundColor: 'primary.50',
@@ -62,7 +65,38 @@ const MyMenu = ({
       _active: {
         backgroundColor: 'primary.50',
         color: 'primary.600'
-      }
+      },
+      iconColor: 'myGray.600'
+    },
+    gray: {
+      _hover: {
+        backgroundColor: 'myGray.05',
+        color: 'primary.600'
+      },
+      _focus: {
+        backgroundColor: 'myGray.05',
+        color: 'primary.600'
+      },
+      _active: {
+        backgroundColor: 'myGray.05',
+        color: 'primary.600'
+      },
+      iconColor: 'myGray.400'
+    },
+    grayBg: {
+      _hover: {
+        backgroundColor: 'myGray.05',
+        color: 'primary.600'
+      },
+      _focus: {
+        backgroundColor: 'myGray.05',
+        color: 'primary.600'
+      },
+      _active: {
+        backgroundColor: 'myGray.05',
+        color: 'primary.600'
+      },
+      iconColor: 'myGray.600'
     },
     danger: {
       color: 'red.600',
@@ -74,6 +108,84 @@ const MyMenu = ({
       },
       _active: {
         background: 'red.1'
+      },
+      iconColor: 'red.600'
+    }
+  };
+  const sizeMapStyle: Record<
+    MenuSizeType,
+    {
+      iconStyle: AvatarProps;
+      labelStyle: BoxProps;
+      dividerStyle: DividerProps;
+      menuItemStyle: MenuItemProps;
+    }
+  > = {
+    mini: {
+      iconStyle: {
+        w: '14px'
+      },
+      labelStyle: {
+        fontSize: 'mini'
+      },
+      dividerStyle: {
+        my: 0.5
+      },
+      menuItemStyle: {
+        py: 1.5,
+        px: 2
+      }
+    },
+    xs: {
+      iconStyle: {
+        w: '14px'
+      },
+      labelStyle: {
+        fontSize: 'sm'
+      },
+      dividerStyle: {
+        my: 0.5
+      },
+      menuItemStyle: {
+        py: 1.5,
+        px: 2
+      }
+    },
+    sm: {
+      iconStyle: {
+        w: '1rem'
+      },
+      labelStyle: {
+        fontSize: 'sm'
+      },
+      dividerStyle: {
+        my: 1
+      },
+      menuItemStyle: {
+        py: 2,
+        px: 3,
+        _notLast: {
+          mb: 0.5
+        }
+      }
+    },
+    md: {
+      iconStyle: {
+        w: '2rem',
+        borderRadius: '6px'
+      },
+      labelStyle: {
+        fontSize: 'sm'
+      },
+      dividerStyle: {
+        my: 1
+      },
+      menuItemStyle: {
+        py: 2,
+        px: 3,
+        _notLast: {
+          mb: 0.5
+        }
       }
     }
   };
@@ -165,7 +277,7 @@ const MyMenu = ({
             return (
               <Box key={i}>
                 {item.label && <Box fontSize={'sm'}>{item.label}</Box>}
-                {i !== 0 && <MyDivider h={'1.5px'} my={1} />}
+                {i !== 0 && <MyDivider h={'1.5px'} {...sizeMapStyle[size].dividerStyle} />}
                 {item.children.map((child, index) => (
                   <MenuItem
                     key={index}
@@ -177,29 +289,36 @@ const MyMenu = ({
                         child.onClick();
                       }
                     }}
-                    py={2}
-                    px={3}
                     alignItems={'center'}
                     fontSize={'sm'}
                     color={child.isActive ? 'primary.700' : 'myGray.600'}
                     whiteSpace={'pre-wrap'}
-                    _notLast={{ mb: 0.5 }}
                     {...typeMapStyle[child.type || 'primary']}
+                    {...sizeMapStyle[size].menuItemStyle}
                     {...child.menuItemStyles}
                   >
                     {!!child.icon && (
                       <Avatar
                         src={child.icon as any}
-                        borderRadius={iconRadius}
-                        w={iconSize}
-                        mr={3}
+                        mr={2}
+                        {...sizeMapStyle[size].iconStyle}
+                        color={
+                          child.isActive
+                            ? 'inherit'
+                            : typeMapStyle[child.type || 'primary'].iconColor
+                        }
+                        sx={{
+                          '[role="menuitem"]:hover &': {
+                            color: 'inherit'
+                          }
+                        }}
                       />
                     )}
                     <Box w={'100%'}>
                       <Box
                         w={'100%'}
                         color={child.description ? 'myGray.900' : 'inherit'}
-                        fontSize={'sm'}
+                        {...sizeMapStyle[size].labelStyle}
                       >
                         {child.label}
                       </Box>

packages/web/components/common/Tabs/FillRowTabs.tsx

@@ -18,12 +18,13 @@ const FillRowTabs = ({ list, value, onChange, py = '7px', px = '12px', ...props
       display={'inline-flex'}
       px={'3px'}
       py={'3px'}
-      borderRadius={'md'}
+      borderRadius={'sm'}
       borderWidth={'1px'}
-      borderColor={'borderColor.base'}
+      borderColor={'myGray.200'}
       bg={'myGray.50'}
       gap={'4px'}
       fontSize={'sm'}
+      fontWeight={'medium'}
       {...props}
     >
       {list.map((item) => (
@@ -33,7 +34,7 @@ const FillRowTabs = ({ list, value, onChange, py = '7px', px = '12px', ...props
           alignItems={'center'}
           justifyContent={'center'}
           cursor={'pointer'}
-          borderRadius={'md'}
+          borderRadius={'xs'}
           px={px}
           py={py}
           userSelect={'none'}
@@ -45,10 +46,14 @@ const FillRowTabs = ({ list, value, onChange, py = '7px', px = '12px', ...props
                 color: 'primary.600'
               }
             : {
+                color: 'myGray.500',
+                _hover: {
+                  color: 'primary.600'
+                },
                 onClick: () => onChange(item.value)
               })}
         >
-          {item.icon && <MyIcon name={item.icon as any} mr={1} w={'14px'} />}
+          {item.icon && <MyIcon name={item.icon as any} mr={1.5} w={'18px'} />}
           <Box>{item.label}</Box>
         </Flex>
       ))}

packages/web/components/common/Textarea/JsonEditor/index.tsx

@@ -224,8 +224,8 @@ const JSONEditor = ({
       {resize && (
         <Box
           position={'absolute'}
-          right={'0'}
-          bottom={'0'}
+          right={'-2'}
+          bottom={'-3'}
           zIndex={10}
           cursor={'ns-resize'}
           px={'4px'}
@@ -269,6 +269,8 @@ const JSONEditor = ({
         fontSize={'xs'}
         color={'myGray.500'}
         display={placeholderDisplay}
+        pointerEvents={'none'}
+        userSelect={'none'}
       >
         {placeholder}
       </Box>

packages/web/components/common/Textarea/PromptEditor/Editor.tsx

@@ -105,8 +105,8 @@ export default function Editor({
               left={0}
               right={0}
               bottom={0}
-              py={2}
-              px={3}
+              py={3}
+              px={3.5}
               pointerEvents={'none'}
               overflow={'hidden'}
             >