ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-10-15 15:41:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: markdown echarts (#2101)

Browse Source 
* fix: markdown echarts

* perf: packages
This commit is contained in:
Archer
2024-07-22 10:10:32 +08:00
committed by GitHub
parent 57ff38e16f
commit f452554663
10 changed files with 119 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/service/package.json
View File

@@ -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",

11
packages/web/components/common/Radio/LeftRadio.tsx
View File

@@ -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>
<Box>{typeof item.title === 'string' ? t(item.title as any) : item.title}</Box>
{!!item.tooltip && <QuestionTip label={item.tooltip} ml={1} color={'myGray.600'} />}
</HStack>
</Flex>
{!!item.tooltip && <QuestionTip label={item.tooltip} ml={1} color={'myGray.600'} />}
{!!item.desc && (
<Box fontSize={'xs'} color={'myGray.500'} lineHeight={1.2}>
{t(item.desc as any)}

25
packages/web/hooks/useScreen.ts Normal file
View File

@@ -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
};
};

40
pnpm-lock.yaml generated
View File

@@ -182,14 +182,14 @@ importers:
specifier: ^3.0.3
version: 3.0.3
node-xlsx:
specifier: ^0.23.0
version: 0.23.0
specifier: ^0.24.0
version: 0.24.0
papaparse:
specifier: 5.4.1
version: 5.4.1
pdfjs-dist:
specifier: 4.0.269
version: 4.0.269(encoding@0.1.13)
specifier: 4.4.168
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:
resolution: {integrity: sha512-r3KaSZSsSrK92rbPXnX/vDdxURmPPik0rjJ3A+Pybzpjyrk4G6WyGfj8JIz5dMMEpCmWVpmO4qoVPBxnpLv/8Q==}
node-xlsx@0.24.0:
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:
resolution: {integrity: sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==}
engines: {node: '>=8'}
path2d@0.2.1:
resolution: {integrity: sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==}
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:
resolution: {integrity: sha512-jjWO56tcOjnmPqDf8PmXDeZ781AGvpHMYI3HhNtaFKTRXXPaD1ArSrhVe38/XsrIQJ0onISCND/vuXaWJkiDWw==}
pdfjs-dist@4.4.168:
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:
resolution: {tarball: https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz}
version: 0.19.3
xlsx@https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz:
resolution: {tarball: https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz}
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: {}

21
projects/app/public/js/pdf.worker.js vendored
View File

File diff suppressed because one or more lines are too long

91
projects/app/src/components/Markdown/img/EChartsCodeBlock.tsx
View File

@@ -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 clientWidth = document.getElementById('chat-container')?.clientWidth || 500;
setWidth(clientWidth * 0.9);
setTimeout(() => {
eChart.current?.resize();
}, 100);
}, []);
const findMarkdownDom = useCallback(() => {
if (!chartRef.current) return;
useEffect(() => {
let option;
try {
option = JSON.parse(code.trim());
option = {
...option,
toolbox: {
show: true,
feature: {
saveAsImage: {}
// 一直找到 parent = markdown 的元素
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 {
const parse = {
...json5.parse(code.trim()),
toolbox: {
// show: true,
feature: {
saveAsImage: {}
}
}
}
};
setOption(option);
} catch (error) {}
};
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 h={'400px'} minW={'400px'} w={`${width}px`} ref={chartRef} />
{!option && <Skeleton isLoaded={true} fadeDuration={2} h={'400px'} w={`400px`}></Skeleton>}
<Box overflowX={'auto'} bg={'white'} borderRadius={'md'}>
<Box h={'400px'} w={`${width}px`} ref={chartRef} />
{!option && (
<Skeleton isLoaded={true} fadeDuration={2} h={'400px'} w={`${width}px`}></Skeleton>
)}
</Box>
);
};

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

@@ -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}

2
projects/app/src/pages/app/list/components/CreateModal.tsx
View File

@@ -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>

3
projects/app/src/web/common/system/useSystemStore.ts
View File

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

7
projects/app/src/web/context/useInitApp.ts
View File

@@ -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();
}
loadGitStar();
setScripts(scripts || []);
setInitd();