57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Modal,
|
|
ModalOverlay,
|
|
ModalContent,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
ModalHeader,
|
|
Box,
|
|
useTheme
|
|
} from '@chakra-ui/react';
|
|
import { ChatItemType } from '@/types/chat';
|
|
|
|
const ContextModal = ({
|
|
context = [],
|
|
onClose
|
|
}: {
|
|
context: ChatItemType[];
|
|
onClose: () => void;
|
|
}) => {
|
|
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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ContextModal;
|