chat quote reader (#3912)

* init chat quote full text reader

* linked structure

* dataset data linked

* optimize code

* fix ts build

* test finish

* delete log

* fix

* fix ts

* fix ts

* remove nextId

* initial scroll

* fix

* fix

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

@@ -1,22 +1,41 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import type { BoxProps } from '@chakra-ui/react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 
-interface Props extends BoxProps {}
+interface Props extends BoxProps {
+  externalTrigger?: Boolean;
+}
 
 const SideBar = (e?: Props) => {
   const {
     w = ['100%', '0 0 250px', '0 0 270px', '0 0 290px', '0 0 310px'],
     children,
+    externalTrigger,
     ...props
   } = e || {};
 
-  const [foldSideBar, setFoldSideBar] = useState(false);
+  const [isFolded, setIsFolded] = useState(false);
+
+  const prevExternalTriggerRef = useRef<Boolean | undefined>(undefined);
+
+  useEffect(() => {
+    if (externalTrigger && !prevExternalTriggerRef.current && !isFolded) {
+      setIsFolded(true);
+    }
+
+    prevExternalTriggerRef.current = externalTrigger;
+  }, [externalTrigger, isFolded]);
+
+  const handleToggle = () => {
+    const newFolded = !isFolded;
+    setIsFolded(newFolded);
+  };
+
   return (
     <Box
       position={'relative'}
-      flex={foldSideBar ? '0 0 0' : w}
+      flex={isFolded ? '0 0 0' : w}
       w={['100%', 0]}
       h={'100%'}
       zIndex={1}
@@ -40,7 +59,7 @@ const SideBar = (e?: Props) => {
         bg={'rgba(0,0,0,0.5)'}
         cursor={'pointer'}
         transition={'0.2s'}
-        {...(foldSideBar
+        {...(isFolded
           ? {
               opacity: 0.6
             }
@@ -48,16 +67,16 @@ const SideBar = (e?: Props) => {
               visibility: 'hidden',
               opacity: 0
             })}
-        onClick={() => setFoldSideBar(!foldSideBar)}
+        onClick={handleToggle}
       >
         <MyIcon
           name={'common/backLight'}
-          transform={foldSideBar ? 'rotate(180deg)' : ''}
+          transform={isFolded ? 'rotate(180deg)' : ''}
           w={'14px'}
           color={'white'}
         />
       </Flex>
-      <Box position={'relative'} h={'100%'} overflow={foldSideBar ? 'hidden' : 'visible'}>
+      <Box position={'relative'} h={'100%'} overflow={isFolded ? 'hidden' : 'visible'}>
         {children}
       </Box>
     </Box>