perf: select app ux

labring · Mar 24, 2024 · e00593c · e00593c
1 parent 20f4d8c
commit e00593c
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 76 deletions.
diff --git a/projects/app/public/locales/en/common.json b/projects/app/public/locales/en/common.json
@@ -814,6 +814,7 @@
       },
       "Quote prompt setting": "Quote prompt setting",
       "Qupte prompt setting": "",
+      "Select app": "Select app",
       "Setting quote prompt": "Setting quote prompt",
       "Unlink tip": "[{{name}}] An unfilled or unconnected parameter exists",
       "Variable": "Variables",

diff --git a/projects/app/public/locales/zh/common.json b/projects/app/public/locales/zh/common.json
@@ -582,7 +582,8 @@
             "success": "开始同步"
           }
         },
-        "training": {}
+        "training": {
+        }
       },
       "data": {
         "Auxiliary Data": "辅助数据",
@@ -815,6 +816,7 @@
       },
       "Quote prompt setting": "引用提示词配置",
       "Qupte prompt setting": "",
+      "Select app": "选择应用",
       "Setting quote prompt": "配置引用提示词",
       "Unlink tip": "【{{name}}】存在未填或未连接参数",
       "Variable": "全局变量",

diff --git a/projects/app/src/components/ChatBox/components/ChatItem.tsx b/projects/app/src/components/ChatBox/components/ChatItem.tsx
@@ -90,13 +90,14 @@ const ChatItem = ({
         </>
       );
     }
+
     /* AI */
     return (
       <Flex flexDirection={'column'} gap={2}>
         {chat.value.map((value, i) => {
           const key = `${chat.dataId}-ai-${i}`;
           if (value.text) {
-            let source = value.text?.content || '';
+            let source = (value.text?.content || '').trim();
 
             if (!source && chat.value.length > 1) return <></>;
 

diff --git a/projects/app/src/components/core/module/Flow/SelectAppModal.tsx b/projects/app/src/components/core/module/Flow/SelectAppModal.tsx
@@ -40,11 +40,10 @@ const SelectAppModal = ({
       title={`选择应用${max > 1 ? `(${selectedApps.length}/${max})` : ''}`}
       iconSrc="/imgs/module/ai.svg"
       onClose={onClose}
-      minW={'700px'}
       position={'relative'}
+      w={'600px'}
     >
       <ModalBody
-        minH={'300px'}
         display={'grid'}
         gridTemplateColumns={['1fr', 'repeat(3, minmax(0, 1fr))']}
         gridGap={4}

diff --git a/projects/app/src/components/core/module/Flow/components/nodes/NodeRunAPP.tsx b/projects/app/src/components/core/module/Flow/components/nodes/NodeRunAPP.tsx
diff --git a/...app/src/components/core/module/Flow/components/render/RenderInput/templates/SelectApp.tsx b/...app/src/components/core/module/Flow/components/render/RenderInput/templates/SelectApp.tsx
@@ -1,14 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import type { RenderInputProps } from '../type';
-import { getFlowStore, onChangeNode, useFlowProviderStoreType } from '../../../../FlowProvider';
+import { onChangeNode, useFlowProviderStore } from '../../../../FlowProvider';
 import { Box, Button, Flex, useDisclosure, useTheme } from '@chakra-ui/react';
 import { SelectAppItemType } from '@fastgpt/global/core/module/type';
 import Avatar from '@/components/Avatar';
 import SelectAppModal from '../../../../SelectAppModal';
+import { useTranslation } from 'next-i18next';
 
 const SelectAppRender = ({ item, moduleId }: RenderInputProps) => {
+  const { t } = useTranslation();
   const theme = useTheme();
-  const [filterAppIds, setFilterAppIds] = useState<useFlowProviderStoreType['filterAppIds']>([]);
+  const { filterAppIds } = useFlowProviderStore();
 
   const {
     isOpen: isOpenSelectApp,
@@ -18,50 +20,65 @@ const SelectAppRender = ({ item, moduleId }: RenderInputProps) => {
 
   const value = item.value as SelectAppItemType | undefined;
 
-  useEffect(() => {
-    async () => {
-      const { filterAppIds } = await getFlowStore();
-      setFilterAppIds(filterAppIds);
-    };
-  }, []);
+  const filterAppString = useMemo(() => filterAppIds.join(','), [filterAppIds]);
 
-  return (
-    <>
-      <Box onClick={onOpenSelectApp}>
-        {!value ? (
-          <Button variant={'whitePrimary'} w={'100%'}>
-            选择应用
-          </Button>
-        ) : (
-          <Flex alignItems={'center'} border={theme.borders.base} borderRadius={'md'} px={3} py={2}>
-            <Avatar src={value?.logo} />
-            <Box fontWeight={'bold'} ml={1}>
-              {value?.name}
-            </Box>
-          </Flex>
+  const Render = useMemo(() => {
+    return (
+      <>
+        <Box onClick={onOpenSelectApp}>
+          {!value ? (
+            <Button variant={'whitePrimary'} w={'100%'}>
+              {t('core.module.Select app')}
+            </Button>
+          ) : (
+            <Flex
+              alignItems={'center'}
+              border={theme.borders.base}
+              borderRadius={'md'}
+              px={3}
+              py={2}
+            >
+              <Avatar src={value?.logo} />
+              <Box fontWeight={'bold'} ml={1}>
+                {value?.name}
+              </Box>
+            </Flex>
+          )}
+        </Box>
+
+        {isOpenSelectApp && (
+          <SelectAppModal
+            defaultApps={item.value?.id ? [item.value.id] : []}
+            filterAppIds={filterAppString.split(',')}
+            onClose={onCloseSelectApp}
+            onSuccess={(e) => {
+              onChangeNode({
+                moduleId,
+                type: 'updateInput',
+                key: 'app',
+                value: {
+                  ...item,
+                  value: e[0]
+                }
+              });
+            }}
+          />
         )}
-      </Box>
+      </>
+    );
+  }, [
+    filterAppString,
+    isOpenSelectApp,
+    item,
+    moduleId,
+    onCloseSelectApp,
+    onOpenSelectApp,
+    t,
+    theme.borders.base,
+    value
+  ]);
 
-      {isOpenSelectApp && (
-        <SelectAppModal
-          defaultApps={item.value?.id ? [item.value.id] : []}
-          filterAppIds={filterAppIds}
-          onClose={onCloseSelectApp}
-          onSuccess={(e) => {
-            onChangeNode({
-              moduleId,
-              type: 'updateInput',
-              key: 'app',
-              value: {
-                ...item,
-                value: e[0]
-              }
-            });
-          }}
-        />
-      )}
-    </>
-  );
+  return Render;
 };
 
 export default React.memo(SelectAppRender);
diff --git a/projects/app/src/pages/plugin/edit/index.tsx b/projects/app/src/pages/plugin/edit/index.tsx
@@ -81,7 +81,7 @@ const Render = ({ pluginId }: Props) => {
 
 export default function FlowEdit(props: any) {
   return (
-    <FlowProvider mode={'plugin'} filterAppIds={[]}>
+    <FlowProvider mode={'plugin'}>
       <Render {...props} />
     </FlowProvider>
   );