diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx index 88c5386fb7a664..776abf3dff79c3 100644 --- a/web/app/components/base/mermaid/index.tsx +++ b/web/app/components/base/mermaid/index.tsx @@ -1,7 +1,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react' import mermaid from 'mermaid' import { usePrevious } from 'ahooks' -import CryptoJS from 'crypto-js' import { useTranslation } from 'react-i18next' import { ExclamationTriangleIcon } from '@heroicons/react/24/outline' import LoadingAnim from '@/app/components/base/chat/chat/loading-anim' @@ -38,7 +37,6 @@ const Flowchart = React.forwardRef((props: { const [svgCode, setSvgCode] = useState(null) const [look, setLook] = useState<'classic' | 'handDrawn'>('classic') - const chartId = useRef(`flowchart_${CryptoJS.MD5(props.PrimitiveCode).toString()}`) const prevPrimitiveCode = usePrevious(props.PrimitiveCode) const [isLoading, setIsLoading] = useState(true) const timeRef = useRef() @@ -51,12 +49,10 @@ const Flowchart = React.forwardRef((props: { try { if (typeof window !== 'undefined' && mermaidAPI) { - const svgGraph = await mermaidAPI.render(chartId.current, PrimitiveCode) + const svgGraph = await mermaidAPI.render('flowchart', PrimitiveCode) const base64Svg: any = await svgToBase64(svgGraph.svg) setSvgCode(base64Svg) setIsLoading(false) - if (chartId.current && base64Svg) - localStorage.setItem(chartId.current, base64Svg) } } catch (error) { @@ -79,19 +75,11 @@ const Flowchart = React.forwardRef((props: { }, }) - localStorage.removeItem(chartId.current) renderFlowchart(props.PrimitiveCode) } }, [look]) useEffect(() => { - const cachedSvg: any = localStorage.getItem(chartId.current) - - if (cachedSvg) { - setSvgCode(cachedSvg) - setIsLoading(false) - return - } if (timeRef.current) clearTimeout(timeRef.current)