perf: new chat modal

src/pages/chat/components/History.tsx

@@ -115,15 +115,23 @@ const PcSliderBar = ({
           </Button>
           </Button>
           {models.length > 1 && (
           {models.length > 1 && (
             <Box
             <Box
-              className={styles.modelList}
+              className={styles.modelListContainer}
               position={'absolute'}
               position={'absolute'}
-              transition={'0.15s ease-out'}
               w={'110%'}
               w={'110%'}
               left={0}
               left={0}
-              top={'45px'}
+              top={'40px'}
+              transition={'0.15s ease-out'}
+              bg={'white'}
+            >
+              <Box
+                className={styles.modelList}
+                mt={'6px'}
+                h={'calc(100% - 6px)'}
+                overflow={'overlay'}
               >
               >
                 <ModelList models={models} modelId={modelId} />
                 <ModelList models={models} modelId={modelId} />
               </Box>
               </Box>
+            </Box>
           )}
           )}
         </Box>
         </Box>
       )}
       )}

src/pages/chat/components/ModelList.tsx

@@ -7,7 +7,7 @@ const ModelList = ({ models, modelId }: { models: ModelListItemType[]; modelId:
   const router = useRouter();
   const router = useRouter();
 
 
   return (
   return (
-    <Box w={'100%'} h={'100%'} bg={'white'} overflow={'overlay'}>
+    <>
       {models.map((item) => (
       {models.map((item) => (
         <Box key={item._id}>
         <Box key={item._id}>
           <Flex
           <Flex
@@ -18,6 +18,7 @@ const ModelList = ({ models, modelId }: { models: ModelListItemType[]; modelId:
             cursor={'pointer'}
             cursor={'pointer'}
             transition={'background-color .2s ease-in'}
             transition={'background-color .2s ease-in'}
             borderLeft={['', '5px solid transparent']}
             borderLeft={['', '5px solid transparent']}
+            zIndex={0}
             _hover={{
             _hover={{
               backgroundColor: ['', '#dee0e3']
               backgroundColor: ['', '#dee0e3']
             }}
             }}
@@ -50,7 +51,7 @@ const ModelList = ({ models, modelId }: { models: ModelListItemType[]; modelId:
           </Flex>
           </Flex>
         </Box>
         </Box>
       ))}
       ))}
-    </Box>
+    </>
   );
   );
 };
 };
 
 

src/pages/chat/index.module.scss

@@ -11,14 +11,18 @@
 }
 }
 
 
 .newChat {
 .newChat {
-  .modelList {
+  .modelListContainer {
     height: 0;
     height: 0;
-    border-radius: 6px;
     overflow: hidden;
     overflow: hidden;
   }
   }
+  .modelList {
+    border-radius: 6px;
+  }
   &:hover {
   &:hover {
+    .modelListContainer {
+      height: 60vh;
+    }
     .modelList {
     .modelList {
-      height: 50vh;
       box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.05);
       box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.05);
       border: 1px solid #dee0e2;
       border: 1px solid #dee0e2;
     }
     }