From f20a5fe9a6a4abf82d9c8d4bae035fe22ff1c6a1 Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Mon, 8 May 2023 14:19:28 +0800
Subject: [PATCH] perf: new chat modal

---
 src/pages/chat/components/History.tsx   | 16 ++++++++++++----
 src/pages/chat/components/ModelList.tsx |  5 +++--
 src/pages/chat/index.module.scss        | 10 +++++++---
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/pages/chat/components/History.tsx b/src/pages/chat/components/History.tsx
index c5833c704..7b2d95b0f 100644
--- a/src/pages/chat/components/History.tsx
+++ b/src/pages/chat/components/History.tsx
@@ -115,14 +115,22 @@ const PcSliderBar = ({
           </Button>
           {models.length > 1 && (
             <Box
-              className={styles.modelList}
+              className={styles.modelListContainer}
               position={'absolute'}
-              transition={'0.15s ease-out'}
               w={'110%'}
               left={0}
-              top={'45px'}
+              top={'40px'}
+              transition={'0.15s ease-out'}
+              bg={'white'}
             >
-              <ModelList models={models} modelId={modelId} />
+              <Box
+                className={styles.modelList}
+                mt={'6px'}
+                h={'calc(100% - 6px)'}
+                overflow={'overlay'}
+              >
+                <ModelList models={models} modelId={modelId} />
+              </Box>
             </Box>
           )}
         </Box>
diff --git a/src/pages/chat/components/ModelList.tsx b/src/pages/chat/components/ModelList.tsx
index 7e6a7cb55..84f97c29b 100644
--- a/src/pages/chat/components/ModelList.tsx
+++ b/src/pages/chat/components/ModelList.tsx
@@ -7,7 +7,7 @@ const ModelList = ({ models, modelId }: { models: ModelListItemType[]; modelId:
   const router = useRouter();
 
   return (
-    <Box w={'100%'} h={'100%'} bg={'white'} overflow={'overlay'}>
+    <>
       {models.map((item) => (
         <Box key={item._id}>
           <Flex
@@ -18,6 +18,7 @@ const ModelList = ({ models, modelId }: { models: ModelListItemType[]; modelId:
             cursor={'pointer'}
             transition={'background-color .2s ease-in'}
             borderLeft={['', '5px solid transparent']}
+            zIndex={0}
             _hover={{
               backgroundColor: ['', '#dee0e3']
             }}
@@ -50,7 +51,7 @@ const ModelList = ({ models, modelId }: { models: ModelListItemType[]; modelId:
           </Flex>
         </Box>
       ))}
-    </Box>
+    </>
   );
 };
 
diff --git a/src/pages/chat/index.module.scss b/src/pages/chat/index.module.scss
index 4dea32235..477d13f08 100644
--- a/src/pages/chat/index.module.scss
+++ b/src/pages/chat/index.module.scss
@@ -11,14 +11,18 @@
 }
 
 .newChat {
-  .modelList {
+  .modelListContainer {
     height: 0;
-    border-radius: 6px;
     overflow: hidden;
   }
+  .modelList {
+    border-radius: 6px;
+  }
   &:hover {
+    .modelListContainer {
+      height: 60vh;
+    }
     .modelList {
-      height: 50vh;
       box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.05);
       border: 1px solid #dee0e2;
     }