Perf: vector queue and app ui (#1750)

projects/app/i18n/en/app.json

@@ -54,5 +54,9 @@
   },
   "modules": {
     "Title is required": "Module name cannot be empty"
+  },
+  "type": {
+    "Simple bot": "Simple bot",
+    "Workflow bot": "Workflow"
   }
 }

projects/app/i18n/zh/app.json

@@ -53,5 +53,9 @@
   },
   "modules": {
     "Title is required": "模块名不能为空"
+  },
+  "type": {
+    "Simple bot": "简易应用",
+    "Workflow bot": "工作流"
   }
 }

projects/app/src/components/common/Modal/EditResourceModal.tsx

@@ -103,7 +103,7 @@ const EditResourceModal = ({
         </Box>
       </ModalBody>
       <ModalFooter>
-        <Button isLoading={loading} onClick={handleSubmit(onSave)}>
+        <Button isLoading={loading} onClick={handleSubmit(onSave)} px={6}>
           {t('common.Confirm')}
         </Button>
       </ModalFooter>

projects/app/src/components/core/app/TypeTag.tsx

@@ -0,0 +1,35 @@
+import React, { useRef } from 'react';
+import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
+import MyTag from '@fastgpt/web/components/common/Tag/index';
+import { useI18n } from '@/web/context/I18n';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { Box } from '@chakra-ui/react';
+
+const AppTypeTag = ({ type }: { type: AppTypeEnum }) => {
+  const { appT } = useI18n();
+
+  const map = useRef({
+    [AppTypeEnum.simple]: {
+      label: appT('type.Simple bot'),
+      icon: 'core/app/type/simple'
+    },
+    [AppTypeEnum.advanced]: {
+      label: appT('type.Workflow bot'),
+      icon: 'core/app/type/workflow'
+    },
+    [AppTypeEnum.folder]: undefined
+  });
+
+  const data = map.current[type];
+
+  return data ? (
+    <MyTag type="borderFill" colorSchema="gray">
+      <MyIcon name={data.icon as any} w={'0.8rem'} color={'myGray.500'} />
+      <Box ml={1} fontSize={'mini'}>
+        {data.label}
+      </Box>
+    </MyTag>
+  ) : null;
+};
+
+export default AppTypeTag;

projects/app/src/components/core/workflow/Flow/hooks/useKeyboard.tsx

@@ -48,19 +48,22 @@ export const useKeyboard = () => {
       // filter workflow data
       const newNodes = parseData
         .filter((item) => !!item.type && item.data?.unique !== true)
-        .map((item) => ({
-          // reset id
-          ...item,
-          id: getNanoid(),
-          data: {
-            ...item.data,
-            nodeId: getNanoid()
-          },
-          position: {
-            x: item.position.x + 100,
-            y: item.position.y + 100
-          }
-        }));
+        .map((item) => {
+          const nodeId = getNanoid();
+          return {
+            // reset id
+            ...item,
+            id: nodeId,
+            data: {
+              ...item.data,
+              nodeId
+            },
+            position: {
+              x: item.position.x + 100,
+              y: item.position.y + 100
+            }
+          };
+        });
 
       setNodes((prev) =>
         prev

projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/Reference.tsx

@@ -144,7 +144,7 @@ export const useReference = ({
       .filter((item) => item.children.length > 0);
 
     return list;
-  }, [edges, nodeId, nodeList, t, valueType]);
+  }, [appDetail.chatConfig, edges, nodeId, nodeList, t, valueType]);
 
   const formatValue = useMemo(() => {
     if (

projects/app/src/components/support/permission/MemberManager/MemberListCard.tsx

@@ -29,7 +29,9 @@ const MemberListCard = ({ tagStyle, ...props }: MemberListCardProps) => {
             return (
               <Tag key={member.tmbId} type={'fill'} colorSchema="white" {...tagStyle}>
                 <Avatar src={member.avatar} w="1.25rem" />
-                <Box fontSize={'sm'}>{member.name}</Box>
+                <Box fontSize={'sm'} ml={1}>
+                  {member.name}
+                </Box>
               </Tag>
             );
           })}

projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/index.tsx

@@ -12,6 +12,7 @@ import { TeamModalContext } from '../../context';
 import { TeamPermissionList } from '@fastgpt/global/support/permission/user/constant';
 import dynamic from 'next/dynamic';
 import MyBox from '@fastgpt/web/components/common/MyBox';
+import MyTag from '@fastgpt/web/components/common/Tag/index';
 
 const AddManagerModal = dynamic(() => import('./AddManager'));
 
@@ -56,8 +57,8 @@ function PermissionManage() {
             bgColor={'myGray.100'}
             alignItems={'center'}
             alignContent={'center'}
-            mx={'6'}
             px={'3'}
+            ml={3}
             borderRadius={'sm'}
           >
             {TeamPermissionList['manage'].description}
@@ -78,19 +79,20 @@ function PermissionManage() {
           </Button>
         )}
       </Flex>
-      <Flex mt="4" mx="4">
+      <Flex mt="4" mx="4" flexWrap={'wrap'} gap={3}>
         {members.map((member) => {
           if (member.permission.hasManagePer && !member.permission.isOwner) {
             return (
-              <Tag key={member.memberName} mx={'2'} px="4" py="2" bg="myGray.100">
-                <Avatar src={member.avatar} w="20px" />
-                <TagLabel fontSize={'md'} alignItems="center" mr="6" ml="2">
+              <MyTag key={member.tmbId} px="4" py="2" type="fill" colorSchema="gray">
+                <Avatar src={member.avatar} w="1.25rem" />
+                <Box fontSize={'sm'} ml={1}>
                   {member.memberName}
-                </TagLabel>
+                </Box>
                 {userInfo?.team.role === 'owner' && (
                   <MyIcon
+                    ml={4}
                     name="common/trash"
-                    w="16px"
+                    w="1rem"
                     color="myGray.500"
                     cursor="pointer"
                     _hover={{ color: 'red.600' }}
@@ -99,7 +101,7 @@ function PermissionManage() {
                     }}
                   />
                 )}
-              </Tag>
+              </MyTag>
             );
           }
         })}

projects/app/src/pages/app/list/component/CreateModal.tsx

@@ -186,7 +186,7 @@ const CreateModal = ({ onClose }: { onClose: () => void }) => {
         <Button variant={'whiteBase'} mr={3} onClick={onClose}>
           {t('common.Close')}
         </Button>
-        <Button isLoading={creating} onClick={handleSubmit((data) => onclickCreate(data))}>
+        <Button px={6} isLoading={creating} onClick={handleSubmit((data) => onclickCreate(data))}>
           {t('common.Confirm Create')}
         </Button>
       </ModalFooter>

projects/app/src/pages/app/list/component/List.tsx

@@ -28,6 +28,7 @@ import {
   postUpdateAppCollaborators
 } from '@/web/core/app/api/collaborator';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
+import AppTypeTag from '@/components/core/app/TypeTag';
 
 const EditResourceModal = dynamic(() => import('@/components/common/Modal/EditResourceModal'));
 const ConfigPerModal = dynamic(() => import('@/components/support/permission/ConfigPerModal'));
@@ -90,10 +91,12 @@ const ListItem = () => {
         py={[4, 6]}
         gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
         gridGap={5}
+        alignItems={'stretch'}
       >
         {myApps.map((app, index) => (
           <MyTooltip
             key={app._id}
+            h="100%"
             label={
               app.type === AppTypeEnum.folder
                 ? t('common.folder.Open folder')
@@ -105,7 +108,7 @@ const ListItem = () => {
             <MyBox
               isLoading={loadingAppId === app._id}
               lineHeight={1.5}
-              h={'100%'}
+              h="100%"
               py={3}
               px={5}
               cursor={'pointer'}
@@ -238,6 +241,7 @@ const ListItem = () => {
                     color={'myGray.600'}
                   />
                 </Box>
+                <AppTypeTag type={app.type} />
               </Flex>
             </MyBox>
           </MyTooltip>