fix: markdown echarts (#2101)

* fix: markdown echarts

* perf: packages

packages/service/package.json

@@ -27,9 +27,9 @@
     "next": "14.2.5",
     "nextjs-cors": "^2.2.0",
     "node-cron": "^3.0.3",
-    "node-xlsx": "^0.23.0",
+    "node-xlsx": "^0.24.0",
     "papaparse": "5.4.1",
-    "pdfjs-dist": "4.0.269",
+    "pdfjs-dist": "4.4.168",
     "pg": "^8.10.0",
     "tiktoken": "^1.0.15",
     "tunnel": "^0.0.6",

packages/web/components/common/Radio/LeftRadio.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Flex, useTheme, Grid, type GridProps } from '@chakra-ui/react';
+import { Box, Flex, useTheme, Grid, type GridProps, HStack } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import MyTooltip from '../MyTooltip';
 import QuestionTip from '../MyTooltip/QuestionTip';
@@ -90,16 +90,17 @@ const LeftRadio = ({
           </Box>
           <Box flex={'1 0 0'}>
             <Flex alignItems={'center'}>
-              <Box
+              <HStack
+                spacing={1}
                 color={'myGray.900'}
                 fontWeight={item.desc ? '500' : 'normal'}
                 whiteSpace={'nowrap'}
                 fontSize={'sm'}
               >
-                {typeof item.title === 'string' ? t(item.title as any) : item.title}
+                <Box>{typeof item.title === 'string' ? t(item.title as any) : item.title}</Box>
-              </Box>
-            </Flex>
                 {!!item.tooltip && <QuestionTip label={item.tooltip} ml={1} color={'myGray.600'} />}
+              </HStack>
+            </Flex>
             {!!item.desc && (
               <Box fontSize={'xs'} color={'myGray.500'} lineHeight={1.2}>
                 {t(item.desc as any)}

packages/web/hooks/useScreen.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export const useScreen = () => {
+  const [screenWidth, setScreenWidth] = useState(window?.innerWidth || 0);
+  const [screenHeight, setScreenHeight] = useState(window?.innerHeight || 0);
+
+  useEffect(() => {
+    function handleResize() {
+      setScreenWidth(window.innerWidth);
+      setScreenHeight(window.innerHeight);
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []); // 空数组表示这个effect只在组件挂载和卸载时运行
+
+  return {
+    screenWidth,
+    screenHeight
+  };
+};

pnpm-lock.yaml

@@ -182,14 +182,14 @@ importers:
         specifier: ^3.0.3
         version: 3.0.3
       node-xlsx:
-        specifier: ^0.23.0
+        specifier: ^0.24.0
-        version: 0.23.0
+        version: 0.24.0
       papaparse:
         specifier: 5.4.1
         version: 5.4.1
       pdfjs-dist:
-        specifier: 4.0.269
+        specifier: 4.4.168
-        version: 4.0.269(encoding@0.1.13)
+        version: 4.4.168(encoding@0.1.13)
       pg:
         specifier: ^8.10.0
         version: 8.12.0
@@ -6742,8 +6742,8 @@ packages:
   node-releases@2.0.17:
     resolution: {integrity: sha512-Ww6ZlOiEQfPfXM45v17oabk77Z7mg5bOt7AjDyzy7RjK9OrLrLC8dyZQoAPEOtFX9SaNf1Tdvr5gRJWdTJj7GA==}
 
-  node-xlsx@0.23.0:
+  node-xlsx@0.24.0:
-    resolution: {integrity: sha512-r3KaSZSsSrK92rbPXnX/vDdxURmPPik0rjJ3A+Pybzpjyrk4G6WyGfj8JIz5dMMEpCmWVpmO4qoVPBxnpLv/8Q==}
+    resolution: {integrity: sha512-1olwK48XK9nXZsyH/FCltvGrQYvXXZuxVitxXXv2GIuRm51aBi1+5KwR4rWM4KeO61sFU+00913WLZTD+AcXEg==}
     engines: {node: '>=10.0.0'}
     hasBin: true
 
@@ -6965,9 +6965,9 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
-  path2d-polyfill@2.0.1:
+  path2d@0.2.1:
-    resolution: {integrity: sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==}
+    resolution: {integrity: sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==}
-    engines: {node: '>=8'}
+    engines: {node: '>=6'}
 
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
@@ -6975,8 +6975,8 @@ packages:
   pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
 
-  pdfjs-dist@4.0.269:
+  pdfjs-dist@4.4.168:
-    resolution: {integrity: sha512-jjWO56tcOjnmPqDf8PmXDeZ781AGvpHMYI3HhNtaFKTRXXPaD1ArSrhVe38/XsrIQJ0onISCND/vuXaWJkiDWw==}
+    resolution: {integrity: sha512-MbkAjpwka/dMHaCfQ75RY1FXX3IewBVu6NGZOcxerRFlaBiIkZmUoR0jotX5VUzYZEXAGzSFtknWs5xRKliXPA==}
     engines: {node: '>=18'}
 
   peek-readable@5.1.3:
@@ -8624,9 +8624,9 @@ packages:
     resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
 
-  xlsx@https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz:
+  xlsx@https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz:
-    resolution: {tarball: https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz}
+    resolution: {tarball: https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz}
-    version: 0.19.3
+    version: 0.20.2
     engines: {node: '>=0.8'}
     hasBin: true
 
@@ -16331,9 +16331,9 @@ snapshots:
 
   node-releases@2.0.17: {}
 
-  node-xlsx@0.23.0:
+  node-xlsx@0.24.0:
     dependencies:
-      xlsx: https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz
+      xlsx: https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz
 
   non-layered-tidy-tree-layout@2.0.2: {}
 
@@ -16575,17 +16575,17 @@ snapshots:
 
   path-type@4.0.0: {}
 
-  path2d-polyfill@2.0.1:
+  path2d@0.2.1:
     optional: true
 
   pathe@1.1.2: {}
 
   pathval@1.1.1: {}
 
-  pdfjs-dist@4.0.269(encoding@0.1.13):
+  pdfjs-dist@4.4.168(encoding@0.1.13):
     optionalDependencies:
       canvas: 2.11.2(encoding@0.1.13)
-      path2d-polyfill: 2.0.1
+      path2d: 0.2.1
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -18418,7 +18418,7 @@ snapshots:
       imurmurhash: 0.1.4
       signal-exit: 3.0.7
 
-  xlsx@https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz: {}
+  xlsx@https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz: {}
 
   xmlbuilder@10.1.1: {}
 

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

@@ -1,62 +1,89 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import * as echarts from 'echarts';
 import type { ECharts } from 'echarts';
 import { Box, Skeleton } from '@chakra-ui/react';
+import json5 from 'json5';
+import { useMount } from 'ahooks';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import { useScreen } from '@fastgpt/web/hooks/useScreen';
 
 const EChartsCodeBlock = ({ code }: { code: string }) => {
   const chartRef = useRef<HTMLDivElement>(null);
   const eChart = useRef<ECharts>();
+  const { isPc } = useSystem();
   const [option, setOption] = useState<any>();
   const [width, setWidth] = useState(400);
 
-  useEffect(() => {
+  const findMarkdownDom = useCallback(() => {
-    const clientWidth = document.getElementById('chat-container')?.clientWidth || 500;
+    if (!chartRef.current) return;
-    setWidth(clientWidth * 0.9);
-    setTimeout(() => {
-      eChart.current?.resize();
-    }, 100);
-  }, []);
 
-  useEffect(() => {
+    // 一直找到 parent = markdown 的元素
-    let option;
+    let parent = chartRef.current?.parentElement;
+    while (parent && !parent.className.includes('chat-box-card')) {
+      parent = parent.parentElement;
+    }
+
+    const ChatItemDom = parent?.parentElement;
+    const clientWidth = ChatItemDom?.clientWidth ? ChatItemDom.clientWidth - (isPc ? 90 : 60) : 500;
+    setWidth(clientWidth);
+    return parent?.parentElement;
+  }, [isPc]);
+
+  useMount(() => {
+    // @ts-ignore
+    import('echarts-gl');
+  });
+
+  useLayoutEffect(() => {
+    const option = (() => {
       try {
-      option = JSON.parse(code.trim());
+        const parse = {
-      option = {
+          ...json5.parse(code.trim()),
-        ...option,
           toolbox: {
-          show: true,
+            // show: true,
             feature: {
               saveAsImage: {}
             }
           }
         };
-      setOption(option);
+
+        return parse;
       } catch (error) {}
+    })();
+
+    setOption(option ?? {});
 
     if (!option) return;
 
-    (async () => {
-      // @ts-ignore
-      await import('echarts-gl');
-    })();
-
     if (chartRef.current) {
       eChart.current = echarts.init(chartRef.current);
       eChart.current.setOption(option);
-      eChart.current?.resize();
     }
 
+    findMarkdownDom();
+
     return () => {
       if (eChart.current) {
         eChart.current.dispose();
       }
     };
-  }, [code]);
+  }, [code, findMarkdownDom]);
+
+  const { screenWidth } = useScreen();
+  useEffect(() => {
+    findMarkdownDom();
+  }, [screenWidth]);
+
+  useEffect(() => {
+    eChart.current?.resize();
+  }, [width]);
 
   return (
-    <Box overflowX={'auto'}>
+    <Box overflowX={'auto'} bg={'white'} borderRadius={'md'}>
-      <Box h={'400px'} minW={'400px'} w={`${width}px`} ref={chartRef} />
+      <Box h={'400px'} w={`${width}px`} ref={chartRef} />
-      {!option && <Skeleton isLoaded={true} fadeDuration={2} h={'400px'} w={`400px`}></Skeleton>}
+      {!option && (
+        <Skeleton isLoaded={true} fadeDuration={2} h={'400px'} w={`${width}px`}></Skeleton>
+      )}
     </Box>
   );
 };

projects/app/src/components/core/chat/ChatContainer/ChatBox/components/ChatItem.tsx

@@ -139,9 +139,8 @@ const ChatItem = ({
         )}
       </Flex>
       {/* content */}
-      <Box mt={['6px', 2]} textAlign={styleMap.textAlign}>
+      <Box mt={['6px', 2]} className="chat-box-card" textAlign={styleMap.textAlign}>
         <Card
-          className="markdown"
           {...MessageCardStyle}
           bg={styleMap.bg}
           borderRadius={styleMap.borderRadius}

projects/app/src/pages/app/list/components/CreateModal.tsx

@@ -194,7 +194,7 @@ const CreateModal = ({ onClose, type }: { type: CreateAppType; onClose: () => vo
               }}
             >
               <Flex alignItems={'center'}>
-                <Avatar src={item.avatar} borderRadius={'md'} w={'1.5rem'} />
+                <Avatar src={item.avatar} borderRadius={'sm'} w={'1.5rem'} />
                 <Box ml={3} color={'myGray.900'}>
                   {t(item.name as any)}
                 </Box>

projects/app/src/web/common/system/useSystemStore.ts

@@ -73,8 +73,9 @@ export const useSystemStore = create<State>()(
           return null;
         },
 
-        gitStar: 9300,
+        gitStar: 15600,
         async loadGitStar() {
+          if (!get().feConfigs?.show_git) return;
           try {
             const { data: git } = await axios.get('https://api.github.com/repos/labring/FastGPT');
 

projects/app/src/web/context/useInitApp.ts

@@ -18,7 +18,7 @@ export const useInitApp = () => {
 
   const initFetch = useMemoizedFn(async () => {
     const {
-      feConfigs: { scripts, isPlus, show_git, systemTitle }
+      feConfigs: { scripts, isPlus, systemTitle }
     } = await clientInitData();
 
     setTitle(systemTitle || 'FastGPT');
@@ -31,9 +31,8 @@ export const useInitApp = () => {
         `GitHub：https://github.com/labring/FastGPT`
       );
     }
-    if (show_git) {
+
     loadGitStar();
-    }
 
     setScripts(scripts || []);
     setInitd();