Perf: worfklow scroll cannot wheel. Adapt wrokflow skip circle. Change tab alway output stream (#2688)

* perf: teaxtarea no wheel

* remove render error

* adapt workflow skip circle

* perf: change tab can stream output

projects/app/src/components/Layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useLoading } from '@fastgpt/web/hooks/useLoading';
@@ -12,6 +12,7 @@ import { useI18nLng } from '@fastgpt/web/hooks/useI18n';
 import Auth from './auth';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import { useMount } from 'ahooks';
+import { watchWindowHidden } from '@/web/common/system/utils';
 const Navbar = dynamic(() => import('./navbar'));
 const NavbarPhone = dynamic(() => import('./navbarPhone'));
 const UpdateInviteModal = dynamic(() => import('@/components/support/user/team/UpdateInviteModal'));
@@ -68,6 +69,14 @@ const Layout = ({ children }: { children: JSX.Element }) => {
     setUserDefaultLng();
   });
 
+  // Add global listener
+  useEffect(() => {
+    document.addEventListener('visibilitychange', watchWindowHidden);
+    return () => {
+      document.removeEventListener('visibilitychange', watchWindowHidden);
+    };
+  });
+
   return (
     <>
       <Box h={'100%'} bg={'myGray.100'}>

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/ImportSettings.tsx

@@ -4,17 +4,16 @@ import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '../context';
-import { useI18n } from '@/web/context/I18n';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
+
 type Props = {
   onClose: () => void;
 };
 
 const ImportSettings = ({ onClose }: Props) => {
-  const { appT } = useI18n();
   const { toast } = useToast();
   const { File, onOpen } = useSelectFile({
     fileType: 'json',
@@ -25,21 +24,6 @@ const ImportSettings = ({ onClose }: Props) => {
   const [isDragging, setIsDragging] = useState(false);
   const [value, setValue] = useState('');
   const { t } = useTranslation();
-  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragging(false);
-  }, []);
-  const handleDrop = useCallback(async (e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    const file = e.dataTransfer.files[0];
-    readJSONFile(file);
-    setIsDragging(false);
-  }, []);
 
   const readJSONFile = useCallback(
     (file: File) => {
@@ -62,6 +46,25 @@ const ImportSettings = ({ onClose }: Props) => {
     [t, toast]
   );
 
+  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+  const handleDrop = useCallback(
+    async (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const file = e.dataTransfer.files[0];
+      readJSONFile(file);
+      setIsDragging(false);
+    },
+    [readJSONFile]
+  );
+
   const onSelectFile = useCallback(
     async (e: File[]) => {
       const file = e[0];
@@ -70,16 +73,14 @@ const ImportSettings = ({ onClose }: Props) => {
     },
     [readJSONFile]
   );
+
   return (
     <MyModal
       isOpen
       onClose={onClose}
-      title={
-        <Flex align={'center'} ml={-3}>
-          <MyIcon name={'common/importLight'} color={'primary.600'} w={'1.25rem'} mr={'0.62rem'} />
-          <Box lineHeight={'1.25rem'}>{appT('import_configs')}</Box>
-        </Flex>
-      }
+      iconSrc="common/importLight"
+      iconColor="primary.600"
+      title={t('app:import_configs')}
       size={isPc ? 'lg' : 'md'}
     >
       <ModalBody>
@@ -129,14 +130,12 @@ const ImportSettings = ({ onClose }: Props) => {
                 border={'1px solid'}
                 borderRadius={'md'}
                 borderColor={'myGray.200'}
-                h={'15.125rem'}
                 value={value}
                 placeholder={
                   isPc
                     ? t('app:paste_config') + '\n' + t('app:or_drag_JSON')
                     : t('app:paste_config')
                 }
-                defaultValue={value}
                 rows={16}
                 onChange={(e) => setValue(e.target.value)}
               />

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/FlowController.tsx

@@ -34,12 +34,10 @@ const FlowController = React.memo(function FlowController() {
 
   // Controller shortcut key
   useKeyPress(['ctrl.z', 'meta.z'], (e) => {
-    e.preventDefault();
     if (!mouseInCanvas) return;
     undo();
   });
   useKeyPress(['ctrl.shift.z', 'meta.shift.z', 'ctrl.y', 'meta.y'], (e) => {
-    e.preventDefault();
     if (!mouseInCanvas) return;
     redo();
   });

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useKeyboard.tsx

@@ -86,12 +86,10 @@ export const useKeyboard = () => {
   }, [computedNewNodeName, hasInputtingElement, setNodes]);
 
   useKeyPressEffect(['ctrl.c', 'meta.c'], (e) => {
-    e.preventDefault();
     if (!mouseInCanvas) return;
     onCopy();
   });
   useKeyPressEffect(['ctrl.v', 'meta.v'], (e) => {
-    e.preventDefault();
     if (!mouseInCanvas) return;
     onParse();
   });

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/ToolHandle.tsx

@@ -44,7 +44,7 @@ export const ToolTargetHandle = ({ show, nodeId }: ToolHandleProps) => {
         type="target"
         id={handleId}
         position={Position.Top}
-        isConnectableStart={false}
+        isConnectableEnd={showHandle}
       >
         <Box
           className="flow-handle"

projects/app/src/types/index.d.ts

@@ -23,13 +23,12 @@ declare global {
   var qaQueueLen: number;
   var vectorQueueLen: number;
 
-  var systemVersion: string;
-
   interface Window {
     grecaptcha: any;
     QRCode: any;
     umami?: {
       track: (event: TrackEventName, data: any) => void;
     };
+    windowHidden: boolean;
   }
 }

projects/app/src/web/common/api/fetch.ts

@@ -84,7 +84,7 @@ export const streamFetch = ({
       }
 
       if (responseQueue.length > 0) {
-        const fetchCount = Math.max(1, Math.round(responseQueue.length / 30));
+        const fetchCount = Math.max(1, Math.round(responseQueue.length / 20));
         for (let i = 0; i < fetchCount; i++) {
           const item = responseQueue[i];
           onMessage(item);
@@ -100,7 +100,9 @@ export const streamFetch = ({
         return finish();
       }
 
-      requestAnimationFrame(animateResponseText);
+      window.windowHidden
+        ? setTimeout(animateResponseText, 16)
+        : requestAnimationFrame(animateResponseText);
     }
     // start animation
     animateResponseText();

projects/app/src/web/common/system/utils.ts

@@ -13,3 +13,12 @@ export const getWebLLMModel = (model?: string) => {
   const list = useSystemStore.getState().llmModelList;
   return list.find((item) => item.model === model || item.name === model) ?? list[0];
 };
+
+export const watchWindowHidden = () => {
+  // @ts-ignore
+  if (document.hidden) {
+    window.windowHidden = true;
+  } else {
+    window.windowHidden = false;
+  }
+};