V4.7-alpha (#985)

Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>

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

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { Box, Flex, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import Icon from '@fastgpt/web/components/common/Icon';
 import { useCopyData } from '@/web/common/hooks/useCopyData';
+import { useTranslation } from 'next-i18next';
 
 const codeLight: { [key: string]: React.CSSProperties } = {
   'code[class*=language-]': {
@@ -294,24 +295,41 @@ const CodeLight = ({
   inline?: boolean;
   match: RegExpExecArray | null;
 }) => {
+  const { t } = useTranslation();
   const { copyData } = useCopyData();
 
   if (!inline) {
+    const codeBoxName = useMemo(() => {
+      const input = match?.['input'] || '';
+      if (!input) return match?.[1];
+
+      const splitInput = input.split('#');
+      return splitInput[1] || match?.[1];
+    }, [match]);
+
     return (
-      <Box my={3} borderRadius={'md'} overflow={'overlay'} backgroundColor={'#222'}>
+      <Box
+        my={3}
+        borderRadius={'md'}
+        overflow={'overlay'}
+        bg={'myGray.900'}
+        boxShadow={
+          '0px 0px 1px 0px rgba(19, 51, 107, 0.08), 0px 1px 2px 0px rgba(19, 51, 107, 0.05)'
+        }
+      >
         <Flex
           className="code-header"
           py={2}
           px={5}
-          backgroundColor={useColorModeValue('#323641', 'gray.600')}
-          color={'#fff'}
+          bg={'myGray.600'}
+          color={'white'}
           fontSize={'sm'}
           userSelect={'none'}
         >
-          <Box flex={1}>{match?.[1]}</Box>
+          <Box flex={1}>{codeBoxName}</Box>
           <Flex cursor={'pointer'} onClick={() => copyData(String(children))} alignItems={'center'}>
-            <Icon name={'copy'} width={15} height={15} fill={'#fff'}></Icon>
-            <Box ml={1}>复制</Box>
+            <Icon name={'copy'} width={15} height={15}></Icon>
+            <Box ml={1}>{t('common.Copy')}</Box>
           </Flex>
         </Flex>
         <SyntaxHighlighter style={codeLight as any} language={match?.[1]} PreTag="pre">

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

@@ -1,34 +0,0 @@
-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')
-        .filter((item) => item)
-        .map((item) => {
-          try {
-            return JSON.parse(item) as { src: string };
-          } catch (error) {
-            return { src: '' };
-          }
-        }),
-    [images]
-  );
-
-  return (
-    <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={4}>
-      {formatData.map(({ src }) => {
-        return (
-          <Box key={src} rounded={'md'} flex={'1 0 0'} minW={'120px'}>
-            <MdImage src={src} />
-          </Box>
-        );
-      })}
-    </Grid>
-  );
-};
-
-export default ImageBlock;

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

@@ -24,7 +24,6 @@ const EChartsCodeBlock = dynamic(() => import('./img/EChartsCodeBlock'));
 
 const ChatGuide = dynamic(() => import('./chat/Guide'));
 const QuestionGuide = dynamic(() => import('./chat/QuestionGuide'));
-const ImageBlock = dynamic(() => import('./chat/Image'));
 
 export enum CodeClassName {
   guide = 'guide',
@@ -32,10 +31,16 @@ export enum CodeClassName {
   mermaid = 'mermaid',
   echarts = 'echarts',
   quote = 'quote',
-  img = 'img'
+  files = 'files'
 }
 
-const Markdown = ({ source, isChatting = false }: { source: string; isChatting?: boolean }) => {
+const Markdown = ({
+  source = '',
+  isChatting = false
+}: {
+  source?: string;
+  isChatting?: boolean;
+}) => {
   const components = useMemo<any>(
     () => ({
       img: Image,
@@ -91,9 +96,7 @@ const Code = React.memo(function Code(e: any) {
     if (codeType === CodeClassName.echarts) {
       return <EChartsCodeBlock code={strChildren} />;
     }
-    if (codeType === CodeClassName.img) {
-      return <ImageBlock images={strChildren} />;
-    }
+
     return (
       <CodeLight className={className} inline={inline} match={match}>
         {children}