update pay function

boilerplate-chakra-pro-main/components/MessageBox/index.tsx

@@ -0,0 +1,26 @@
+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>
+  );
+}