perf: modal

client/src/components/ChatBox/ContextModal.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  ModalCloseButton,
-  ModalHeader,
-  Box,
-  useTheme
-} from '@chakra-ui/react';
+import { ModalBody, Box, useTheme } from '@chakra-ui/react';
 import { ChatItemType } from '@/types/chat';
+import MyModal from '../MyModal';
 
 const ContextModal = ({
   context = [],
@@ -21,35 +13,23 @@ const ContextModal = ({
   const theme = useTheme();
 
   return (
-    <>
-      <Modal isOpen={true} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent
-          position={'relative'}
-          maxW={'min(90vw, 700px)'}
-          h={'80vh'}
-          overflow={'overlay'}
-        >
-          <ModalHeader>完整对话记录({context.length}条)</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'sm'}>
-            {context.map((item, i) => (
-              <Box
-                key={i}
-                p={2}
-                borderRadius={'lg'}
-                border={theme.borders.base}
-                _notLast={{ mb: 2 }}
-                position={'relative'}
-              >
-                <Box fontWeight={'bold'}>{item.obj}</Box>
-                <Box>{item.value}</Box>
-              </Box>
-            ))}
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    </>
+    <MyModal isOpen={true} onClose={onClose} title={`完整对话记录(${context.length}条)`} h={'80vh'}>
+      <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'sm'}>
+        {context.map((item, i) => (
+          <Box
+            key={i}
+            p={2}
+            borderRadius={'lg'}
+            border={theme.borders.base}
+            _notLast={{ mb: 2 }}
+            position={'relative'}
+          >
+            <Box fontWeight={'bold'}>{item.obj}</Box>
+            <Box>{item.value}</Box>
+          </Box>
+        ))}
+      </ModalBody>
+    </MyModal>
   );
 };