feat: vision model (#489)

* mongo init

* perf: mongo connect

* perf: tts

perf: whisper and tts

peref: tts whisper permission

log

reabase (#488)

* perf: modal

* i18n

* perf: schema lean

* feat: vision model format

* perf: tts loading

* perf: static data

* perf: tts

* feat: image

* perf: image

* perf: upload image and title

* perf: image size

* doc

* perf: color

* doc

* speaking can not select file

* doc

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

@@ -1,12 +1,25 @@
 import { Box, Flex } 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]
+  );
+
   return (
-    <Flex w={'100%'} wrap={'wrap'}>
-      {JSON.parse(images).map((src: string) => {
+    <Flex alignItems={'center'} wrap={'wrap'} gap={4}>
+      {formatData.map(({ src }) => {
         return (
-          <Box key={src} mr={2} mb={2} rounded={'md'} flex={'0 0 auto'} w={'100px'} h={'100px'}>
+          <Box key={src} rounded={'md'} flex={'0 0 auto'} w={'120px'}>
             <MdImage src={src} />
           </Box>
         );