chore: workflow ui

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'),
@@ -183,6 +184,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,25 @@ import {
   useOutsideClick,
   MenuButton,
   MenuItemProps,
-  PlacementWithLogical
+  PlacementWithLogical,
+  AvatarProps,
+  BoxProps
 } 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';
+
+export type MenuSizeType = 'sm' | 'md' | '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: {
@@ -31,6 +34,7 @@ export type Props = {
       isActive?: boolean;
       type?: MenuItemType;
       icon?: IconNameType | string;
+      iconColor?: string;
       label: string | React.ReactNode;
       description?: string;
       onClick?: () => any;
@@ -42,11 +46,10 @@ 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> = {
@@ -64,6 +67,20 @@ const MyMenu = ({
         color: 'primary.600'
       }
     },
+    gray: {
+      _hover: {
+        backgroundColor: 'myGray.05',
+        color: 'primary.600'
+      },
+      _focus: {
+        backgroundColor: 'myGray.05',
+        color: 'primary.600'
+      },
+      _active: {
+        backgroundColor: 'myGray.05',
+        color: 'primary.600'
+      }
+    },
     danger: {
       color: 'red.600',
       _hover: {
@@ -77,6 +94,33 @@ const MyMenu = ({
       }
     }
   };
+  const sizeMapStyle: Record<MenuSizeType, { iconStyle: AvatarProps; labelStyle: BoxProps }> = {
+    mini: {
+      iconStyle: {
+        w: '14px'
+      },
+      labelStyle: {
+        fontSize: '12px'
+      }
+    },
+    sm: {
+      iconStyle: {
+        w: '1rem'
+      },
+      labelStyle: {
+        fontSize: 'sm'
+      }
+    },
+    md: {
+      iconStyle: {
+        w: '2rem',
+        borderRadius: '6px'
+      },
+      labelStyle: {
+        fontSize: 'sm'
+      }
+    }
+  };
 
   const { isPc } = useSystem();
   const ref = useRef<HTMLDivElement>(null);
@@ -190,16 +234,25 @@ const MyMenu = ({
                     {!!child.icon && (
                       <Avatar
                         src={child.icon as any}
-                        borderRadius={iconRadius}
-                        w={iconSize}
-                        mr={3}
+                        mr={2}
+                        {...sizeMapStyle[size].iconStyle}
+                        {...(child.iconColor
+                          ? {
+                              color: child.isActive ? 'inherit' : child.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'}
             >

packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/components/VariableLabel.tsx

@@ -1,5 +1,5 @@
 import { ChevronRightIcon } from '@chakra-ui/icons';
-import { Box } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import Avatar from '../../../../../../../components/common/Avatar';
 
@@ -28,20 +28,19 @@ export default function VariableLabel({
         color={parentLabel !== 'undefined' ? 'myGray.900' : 'red.600'}
       >
         {parentLabel !== 'undefined' ? (
-          <span>
+          <Flex alignItems={'center'} color={'myGray.600'}>
             <Avatar
               src={nodeAvatar as any}
               w={'1rem'}
               mr={1}
               borderRadius={'xs'}
               display={'inline-flex'}
               verticalAlign={'middle'}
-              mb={'3px'}
             />
             {parentLabel}
-            <ChevronRightIcon />
+            <ChevronRightIcon color={'myGray.500'} />
             {childLabel}
-          </span>
+          </Flex>
         ) : (
           <>
             <Box>{t('common:invalid_variable')}</Box>