Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit f4525546 by Archer Committed by GitHub
Options

fix: markdown echarts (#2101) 

* fix: markdown echarts

* perf: packages
parent 57ff38e1
Showing with 119 additions and 67 deletions
packages/service/package.json
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
"next": "14.2.5", "next": "14.2.5",
"nextjs-cors": "^2.2.0", "nextjs-cors": "^2.2.0",
"node-cron": "^3.0.3", "node-cron": "^3.0.3",
"node-xlsx": "^0.23.0", "node-xlsx": "^0.24.0",
"papaparse": "5.4.1", "papaparse": "5.4.1",
"pdfjs-dist": "4.0.269", "pdfjs-dist": "4.4.168",
"pg": "^8.10.0", "pg": "^8.10.0",
"tiktoken": "^1.0.15", "tiktoken": "^1.0.15",
"tunnel": "^0.0.6", "tunnel": "^0.0.6",
......
packages/web/components/common/Radio/LeftRadio.tsx
import React from 'react'; 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 { useTranslation } from 'next-i18next';
import MyTooltip from '../MyTooltip'; import MyTooltip from '../MyTooltip';
import QuestionTip from '../MyTooltip/QuestionTip'; import QuestionTip from '../MyTooltip/QuestionTip';
...@@ -90,16 +90,17 @@ const LeftRadio = ({ ...@@ -90,16 +90,17 @@ const LeftRadio = ({
</Box> </Box>
<Box flex={'1 0 0'}> <Box flex={'1 0 0'}>
<Flex alignItems={'center'}> <Flex alignItems={'center'}>
<Box <HStack
spacing={1}
color={'myGray.900'} color={'myGray.900'}
fontWeight={item.desc ? '500' : 'normal'} fontWeight={item.desc ? '500' : 'normal'}
whiteSpace={'nowrap'} whiteSpace={'nowrap'}
fontSize={'sm'} 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> {!!item.tooltip && <QuestionTip label={item.tooltip} ml={1} color={'myGray.600'} />}
</HStack>
</Flex> </Flex>
{!!item.tooltip && <QuestionTip label={item.tooltip} ml={1} color={'myGray.600'} />}
{!!item.desc && ( {!!item.desc && (
<Box fontSize={'xs'} color={'myGray.500'} lineHeight={1.2}> <Box fontSize={'xs'} color={'myGray.500'} lineHeight={1.2}>
{t(item.desc as any)} {t(item.desc as any)}
......
packages/web/hooks/useScreen.ts 0 → 100644
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: ...@@ -182,14 +182,14 @@ importers:
specifier: ^3.0.3 specifier: ^3.0.3
version: 3.0.3 version: 3.0.3
node-xlsx: node-xlsx:
specifier: ^0.23.0 specifier: ^0.24.0
version: 0.23.0 version: 0.24.0
papaparse: papaparse:
specifier: 5.4.1 specifier: 5.4.1
version: 5.4.1 version: 5.4.1
pdfjs-dist: 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: pg:
specifier: ^8.10.0 specifier: ^8.10.0
version: 8.12.0 version: 8.12.0
...@@ -6742,8 +6742,8 @@ packages: ...@@ -6742,8 +6742,8 @@ packages:
node-releases@2.0.17: node-releases@2.0.17:
resolution: {integrity: sha512-Ww6ZlOiEQfPfXM45v17oabk77Z7mg5bOt7AjDyzy7RjK9OrLrLC8dyZQoAPEOtFX9SaNf1Tdvr5gRJWdTJj7GA==} 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'} engines: {node: '>=10.0.0'}
hasBin: true hasBin: true
...@@ -6965,9 +6965,9 @@ packages: ...@@ -6965,9 +6965,9 @@ packages:
resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
engines: {node: '>=8'} 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: pathe@1.1.2:
resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==} resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
...@@ -6975,8 +6975,8 @@ packages: ...@@ -6975,8 +6975,8 @@ packages:
pathval@1.1.1: pathval@1.1.1:
resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==} 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'} engines: {node: '>=18'}
peek-readable@5.1.3: peek-readable@5.1.3:
...@@ -8624,9 +8624,9 @@ packages: ...@@ -8624,9 +8624,9 @@ packages:
resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==} resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==}
engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} 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'} engines: {node: '>=0.8'}
hasBin: true hasBin: true
...@@ -16331,9 +16331,9 @@ snapshots: ...@@ -16331,9 +16331,9 @@ snapshots:
node-releases@2.0.17: {} node-releases@2.0.17: {}
node-xlsx@0.23.0: node-xlsx@0.24.0:
dependencies: 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: {} non-layered-tidy-tree-layout@2.0.2: {}
...@@ -16575,17 +16575,17 @@ snapshots: ...@@ -16575,17 +16575,17 @@ snapshots:
path-type@4.0.0: {} path-type@4.0.0: {}
path2d-polyfill@2.0.1: path2d@0.2.1:
optional: true optional: true
pathe@1.1.2: {} pathe@1.1.2: {}
pathval@1.1.1: {} pathval@1.1.1: {}
pdfjs-dist@4.0.269(encoding@0.1.13): pdfjs-dist@4.4.168(encoding@0.1.13):
optionalDependencies: optionalDependencies:
canvas: 2.11.2(encoding@0.1.13) canvas: 2.11.2(encoding@0.1.13)
path2d-polyfill: 2.0.1 path2d: 0.2.1
transitivePeerDependencies: transitivePeerDependencies:
- encoding - encoding
- supports-color - supports-color
...@@ -18418,7 +18418,7 @@ snapshots: ...@@ -18418,7 +18418,7 @@ snapshots:
imurmurhash: 0.1.4 imurmurhash: 0.1.4
signal-exit: 3.0.7 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: {} xmlbuilder@10.1.1: {}
......
projects/app/public/js/pdf.worker.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
projects/app/src/components/Markdown/img/EChartsCodeBlock.tsx
import React, { useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import type { ECharts } from 'echarts'; import type { ECharts } from 'echarts';
import { Box, Skeleton } from '@chakra-ui/react'; 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 EChartsCodeBlock = ({ code }: { code: string }) => {
const chartRef = useRef<HTMLDivElement>(null); const chartRef = useRef<HTMLDivElement>(null);
const eChart = useRef<ECharts>(); const eChart = useRef<ECharts>();
const { isPc } = useSystem();
const [option, setOption] = useState<any>(); const [option, setOption] = useState<any>();
const [width, setWidth] = useState(400); 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;
try { while (parent && !parent.className.includes('chat-box-card')) {
option = JSON.parse(code.trim()); parent = parent.parentElement;
option = { }
...option,
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
}
};
setOption(option);
} catch (error) {}
if (!option) return; 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: {}
}
}
};
(async () => { return parse;
// @ts-ignore } catch (error) {}
await import('echarts-gl');
})(); })();
setOption(option ?? {});
if (!option) return;
if (chartRef.current) { if (chartRef.current) {
eChart.current = echarts.init(chartRef.current); eChart.current = echarts.init(chartRef.current);
eChart.current.setOption(option); eChart.current.setOption(option);
eChart.current?.resize();
} }
findMarkdownDom();
return () => { return () => {
if (eChart.current) { if (eChart.current) {
eChart.current.dispose(); eChart.current.dispose();
} }
}; };
}, [code]); }, [code, findMarkdownDom]);
const { screenWidth } = useScreen();
useEffect(() => {
findMarkdownDom();
}, [screenWidth]);
useEffect(() => {
eChart.current?.resize();
}, [width]);
return ( 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> </Box>
); );
}; };
......
projects/app/src/components/core/chat/ChatContainer/ChatBox/components/ChatItem.tsx
...@@ -139,9 +139,8 @@ const ChatItem = ({ ...@@ -139,9 +139,8 @@ const ChatItem = ({
)} )}
</Flex> </Flex>
{/* content */} {/* content */}
<Box mt={['6px', 2]} textAlign={styleMap.textAlign}> <Box mt={['6px', 2]} className="chat-box-card" textAlign={styleMap.textAlign}>
<Card <Card
className="markdown"
{...MessageCardStyle} {...MessageCardStyle}
bg={styleMap.bg} bg={styleMap.bg}
borderRadius={styleMap.borderRadius} borderRadius={styleMap.borderRadius}
......
projects/app/src/pages/app/list/components/CreateModal.tsx
...@@ -194,7 +194,7 @@ const CreateModal = ({ onClose, type }: { type: CreateAppType; onClose: () => vo ...@@ -194,7 +194,7 @@ const CreateModal = ({ onClose, type }: { type: CreateAppType; onClose: () => vo
}} }}
> >
<Flex alignItems={'center'}> <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'}> <Box ml={3} color={'myGray.900'}>
{t(item.name as any)} {t(item.name as any)}
</Box> </Box>
......
projects/app/src/web/common/system/useSystemStore.ts
...@@ -73,8 +73,9 @@ export const useSystemStore = create<State>()( ...@@ -73,8 +73,9 @@ export const useSystemStore = create<State>()(
return null; return null;
}, },
gitStar: 9300, gitStar: 15600,
async loadGitStar() { async loadGitStar() {
if (!get().feConfigs?.show_git) return;
try { try {
const { data: git } = await axios.get('https://api.github.com/repos/labring/FastGPT'); 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 = () => { ...@@ -18,7 +18,7 @@ export const useInitApp = () => {
const initFetch = useMemoizedFn(async () => { const initFetch = useMemoizedFn(async () => {
const { const {
feConfigs: { scripts, isPlus, show_git, systemTitle } feConfigs: { scripts, isPlus, systemTitle }
} = await clientInitData(); } = await clientInitData();
setTitle(systemTitle || 'FastGPT'); setTitle(systemTitle || 'FastGPT');
...@@ -31,9 +31,8 @@ export const useInitApp = () => { ...@@ -31,9 +31,8 @@ export const useInitApp = () => {
`GitHub：https://github.com/labring/FastGPT` `GitHub：https://github.com/labring/FastGPT`
); );
} }
if (show_git) {
loadGitStar(); loadGitStar();
}
setScripts(scripts || []); setScripts(scripts || []);
setInitd(); setInitd();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment