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>
         );

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

@@ -27,6 +27,7 @@ const MdImage = ({ src }: { src?: string }) => {
         borderRadius={'md'}
         src={src}
         alt={''}
+        maxH={'150px'}
         fallbackSrc={'/imgs/errImg.png'}
         fallbackStrategy={'onError'}
         cursor={succeed ? 'pointer' : 'default'}
@@ -45,7 +46,6 @@ const MdImage = ({ src }: { src?: string }) => {
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
         <ModalContent m={'auto'}>
-          <ModalCloseButton />
           <Image
             src={src}
             alt={''}
@@ -55,6 +55,7 @@ const MdImage = ({ src }: { src?: string }) => {
             objectFit={'contain'}
           />
         </ModalContent>
+        <ModalCloseButton bg={'myWhite.500'} zIndex={999999} />
       </Modal>
     </Skeleton>
   );