4.6.3-website dataset (#532)

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

@@ -1,30 +1,33 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Grid } from '@chakra-ui/react';
 import MdImage from '../img/Image';
 import { useMemo } from 'react';
 
 const ImageBlock = ({ images }: { images: string }) => {
   const formatData = useMemo(
     () =>
-      images.split('\n').map((item) => {
-        try {
-          return JSON.parse(item) as { src: string };
-        } catch (error) {
-          return { src: '' };
-        }
-      }),
+      images
+        .split('\n')
+        .filter((item) => item)
+        .map((item) => {
+          try {
+            return JSON.parse(item) as { src: string };
+          } catch (error) {
+            return { src: '' };
+          }
+        }),
     [images]
   );
 
   return (
-    <Flex alignItems={'center'} wrap={'wrap'} gap={4}>
+    <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={4}>
       {formatData.map(({ src }) => {
         return (
-          <Box key={src} rounded={'md'} flex={'0 0 auto'} w={'120px'}>
+          <Box key={src} rounded={'md'} flex={'1 0 0'} minW={'120px'}>
             <MdImage src={src} />
           </Box>
         );
       })}
-    </Flex>
+    </Grid>
   );
 };