feat: fold sliderbar

src/constants/theme.ts

@@ -221,8 +221,8 @@ export const theme = extendTheme({
     sm: '900px',
     sm: '900px',
     md: '1200px',
     md: '1200px',
     lg: '1500px',
     lg: '1500px',
-    xl: '1800',
-    '2xl': '2100'
+    xl: '1800px',
+    '2xl': '2100px'
   },
   },
   components: {
   components: {
     Modal: ModalTheme,
     Modal: ModalTheme,

src/pages/chat/index.tsx

@@ -98,6 +98,7 @@ const Chat = ({
     top: number;
     top: number;
     message: ChatSiteItemType;
     message: ChatSiteItemType;
   }>();
   }>();
+  const [foldSliderBar, setFoldSlideBar] = useState(false);
 
 
   const {
   const {
     lastChatModelId,
     lastChatModelId,
@@ -636,14 +637,57 @@ const Chat = ({
       flexDirection={['column', 'row']}
       flexDirection={['column', 'row']}
       backgroundColor={useColorModeValue('#fdfdfd', '')}
       backgroundColor={useColorModeValue('#fdfdfd', '')}
     >
     >
-      {/* pc always show history. phone is only show when modelId is present */}
+      {/* pc always show history.  */}
       {(isPc || !modelId) && (
       {(isPc || !modelId) && (
-        <Box flex={[1, '0 0 250px']} w={['100%', 0]} h={'100%'}>
-          <History
-            onclickDelHistory={onclickDelHistory}
-            onclickExportChat={onclickExportChat}
-            isPcDevice={isPcDevice}
-          />
+        <Box
+          position={'relative'}
+          flex={foldSliderBar ? '0 0 0' : [1, '0 0 250px', '0 0 280px', '0 0 310px', '0 0 340px']}
+          w={['100%', 0]}
+          h={'100%'}
+          zIndex={1}
+          transition={'0.2s'}
+          _hover={{
+            '& > div': { visibility: 'visible', opacity: 1 }
+          }}
+        >
+          <Flex
+            position={'absolute'}
+            right={0}
+            top={'50%'}
+            transform={'translate(50%,-50%)'}
+            alignItems={'center'}
+            justifyContent={'flex-end'}
+            pr={1}
+            w={'36px'}
+            h={'50px'}
+            borderRadius={'10px'}
+            bg={'rgba(0,0,0,0.5)'}
+            cursor={'pointer'}
+            transition={'0.2s'}
+            {...(foldSliderBar
+              ? {
+                  opacity: 0.6
+                }
+              : {
+                  visibility: 'hidden',
+                  opacity: 0
+                })}
+            onClick={() => setFoldSlideBar(!foldSliderBar)}
+          >
+            <MyIcon
+              name={'back'}
+              transform={foldSliderBar ? 'rotate(180deg)' : ''}
+              w={'14px'}
+              color={'white'}
+            />
+          </Flex>
+          <Box position={'relative'} h={'100%'} bg={'white'} overflow={'hidden'}>
+            <History
+              onclickDelHistory={onclickDelHistory}
+              onclickExportChat={onclickExportChat}
+              isPcDevice={isPcDevice}
+            />
+          </Box>
         </Box>
         </Box>
       )}
       )}
 
 
@@ -656,6 +700,7 @@ const Chat = ({
           flex={'1 0 0'}
           flex={'1 0 0'}
           flexDirection={'column'}
           flexDirection={'column'}
         >
         >
+          {/* chat header */}
           <Flex
           <Flex
             alignItems={'center'}
             alignItems={'center'}
             justifyContent={'space-between'}
             justifyContent={'space-between'}
@@ -722,10 +767,11 @@ const Chat = ({
               <Box w={'16px'} h={'16px'} />
               <Box w={'16px'} h={'16px'} />
             )}
             )}
           </Flex>
           </Flex>
+          {/* chat content box */}
           <Box ref={ChatBox} pb={[4, 0]} flex={'1 0 0'} h={0} w={'100%'} overflow={'overlay'}>
           <Box ref={ChatBox} pb={[4, 0]} flex={'1 0 0'} h={0} w={'100%'} overflow={'overlay'}>
-            <Box id={'history'} maxW={['auto', '800px', '1000px']} m={'auto'}>
+            <Box id={'history'}>
               {chatData.history.map((item, index) => (
               {chatData.history.map((item, index) => (
-                <Flex key={item._id} alignItems={'flex-start'} py={2} px={[2, 4]}>
+                <Flex key={item._id} alignItems={'flex-start'} py={2} px={[2, 6, 8]}>
                   {item.obj === 'Human' && <Box flex={1} />}
                   {item.obj === 'Human' && <Box flex={1} />}
                   {/* avatar */}
                   {/* avatar */}
                   <Menu autoSelect={false} isLazy>
                   <Menu autoSelect={false} isLazy>