27 lines
736 B
TypeScript
27 lines
736 B
TypeScript
import { Flex, useColorModeValue } from '@chakra-ui/react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
|
|
export default function MessageBox(props: { output: string }) {
|
|
const { output } = props;
|
|
const textColor = useColorModeValue('#120F43', 'white');
|
|
const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
|
|
return (
|
|
<Flex
|
|
w="100%"
|
|
p="15px 20px"
|
|
border="1px solid"
|
|
color={textColor}
|
|
borderColor={borderColor}
|
|
borderRadius="10px"
|
|
minH="564px"
|
|
fontSize="md"
|
|
fontWeight="500"
|
|
mb="28px"
|
|
>
|
|
<ReactMarkdown className="font-medium">
|
|
{output ? output : 'Your generated response will appear here...'}
|
|
</ReactMarkdown>
|
|
</Flex>
|
|
);
|
|
}
|