update pay function

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

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