add image input (#486)

* add image input

* use json

projects/app/src/components/Markdown/chat/Image.tsx

@@ -0,0 +1,18 @@
+import { Box, Flex } from '@chakra-ui/react';
+import MdImage from '../img/Image';
+
+const ImageBlock = ({ images }: { images: string }) => {
+  return (
+    <Flex w={'100%'} wrap={'wrap'}>
+      {JSON.parse(images).map((src: string) => {
+        return (
+          <Box key={src} mr={2} mb={2} rounded={'md'} flex={'0 0 auto'} w={'100px'} h={'100px'}>
+            <MdImage src={src} />
+          </Box>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default ImageBlock;

projects/app/src/components/Markdown/index.tsx

@@ -16,12 +16,14 @@ const MdImage = dynamic(() => import('./img/Image'));
 const ChatGuide = dynamic(() => import('./chat/Guide'));
 const EChartsCodeBlock = dynamic(() => import('./img/EChartsCodeBlock'));
 const QuoteBlock = dynamic(() => import('./chat/Quote'));
+const ImageBlock = dynamic(() => import('./chat/Image'));
 
 export enum CodeClassName {
   guide = 'guide',
   mermaid = 'mermaid',
   echarts = 'echarts',
-  quote = 'quote'
+  quote = 'quote',
+  img = 'img'
 }
 
 function Code({ inline, className, children }: any) {
@@ -41,6 +43,9 @@ function Code({ inline, className, children }: any) {
   if (codeType === CodeClassName.quote) {
     return <QuoteBlock code={String(children)} />;
   }
+  if (codeType === CodeClassName.img) {
+    return <ImageBlock images={String(children)} />;
+  }
   return (
     <CodeLight className={className} inline={inline} match={match}>
       {children}