29 lines
856 B
TypeScript
29 lines
856 B
TypeScript
import Card from '@/components/card/Card';
|
|
import { useColorModeValue } from '@chakra-ui/system';
|
|
import ReactMarkdown from 'react-markdown';
|
|
|
|
export default function MessageBox(props: { output: string }) {
|
|
const { output } = props;
|
|
const bgColor = useColorModeValue('white', 'whiteAlpha.100');
|
|
const textColor = useColorModeValue('#120F43', 'white');
|
|
const borderWidth = useColorModeValue('1px', '0px');
|
|
return (
|
|
<Card
|
|
display={output ? 'flex' : 'none'}
|
|
p="22px"
|
|
maxH="max-content"
|
|
color={textColor}
|
|
bg={bgColor}
|
|
backdropBlur="xl"
|
|
borderWidth={borderWidth}
|
|
fontSize={{ base: 'sm', md: '16px' }}
|
|
lineHeight={{ base: '24px', md: '26px' }}
|
|
fontWeight={'500'}
|
|
>
|
|
<ReactMarkdown className="font-medium">
|
|
{output ? output : ''}
|
|
</ReactMarkdown>
|
|
</Card>
|
|
);
|
|
}
|