From 4036c36753275496ffc7ba6a15c3b358bb231185 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Tue, 23 Jul 2024 17:59:53 +0800 Subject: [PATCH] feat: add Mermaid render --- src/renderer/index.html | 2 +- src/renderer/src/env.d.ts | 1 + src/renderer/src/init.ts | 12 +++++++++++- .../src/pages/home/components/CodeBlock.tsx | 5 +++++ .../src/pages/home/components/Mermaid.tsx | 15 +++++++++++++++ src/renderer/src/utils/index.ts | 13 +++++++++++++ 6 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 src/renderer/src/pages/home/components/Mermaid.tsx diff --git a/src/renderer/index.html b/src/renderer/index.html index fc1826ee..c092132b 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -7,7 +7,7 @@ + content="default-src 'self'; connect-src *; script-src 'self' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' *; img-src 'self' data:" /> diff --git a/src/renderer/src/env.d.ts b/src/renderer/src/env.d.ts index 8a9efb43..8b1587ec 100644 --- a/src/renderer/src/env.d.ts +++ b/src/renderer/src/env.d.ts @@ -9,5 +9,6 @@ declare global { message: MessageInstance modal: HookAPI keyv: KeyvStorage + mermaid: any } } diff --git a/src/renderer/src/init.ts b/src/renderer/src/init.ts index 3562dcbf..9a5cdcf8 100644 --- a/src/renderer/src/init.ts +++ b/src/renderer/src/init.ts @@ -1,7 +1,7 @@ import localforage from 'localforage' import KeyvStorage from '@kangfenmao/keyv-storage' import * as Sentry from '@sentry/electron/renderer' -import { isProduction } from './utils' +import { isProduction, loadScript } from './utils' async function initSentry() { if (await isProduction()) { @@ -21,6 +21,15 @@ async function initSentry() { } } +async function initMermaid() { + await loadScript('https://unpkg.com/mermaid@10.9.1/dist/mermaid.min.js') + window.mermaid.initialize({ + startOnLoad: true, + theme: 'dark', + securityLevel: 'loose' + }) +} + function init() { localforage.config({ driver: localforage.INDEXEDDB, @@ -34,6 +43,7 @@ function init() { window.keyv.init() initSentry() + initMermaid() } init() diff --git a/src/renderer/src/pages/home/components/CodeBlock.tsx b/src/renderer/src/pages/home/components/CodeBlock.tsx index f350581d..a6cb64e1 100644 --- a/src/renderer/src/pages/home/components/CodeBlock.tsx +++ b/src/renderer/src/pages/home/components/CodeBlock.tsx @@ -4,6 +4,7 @@ import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism' import styled from 'styled-components' import { CopyOutlined } from '@ant-design/icons' import { useTranslation } from 'react-i18next' +import Mermaid from './Mermaid' interface CodeBlockProps { children: string @@ -21,6 +22,10 @@ const CodeBlock: React.FC = ({ children, className, ...rest }) = window.message.success({ content: t('message.copied'), key: 'copy-code' }) } + if (match && match[1] === 'mermaid') { + return + } + return match ? (
diff --git a/src/renderer/src/pages/home/components/Mermaid.tsx b/src/renderer/src/pages/home/components/Mermaid.tsx new file mode 100644 index 00000000..8c74667e --- /dev/null +++ b/src/renderer/src/pages/home/components/Mermaid.tsx @@ -0,0 +1,15 @@ +import React, { useEffect } from 'react' + +interface Props { + chart: string +} + +const Mermaid: React.FC = ({ chart }) => { + useEffect(() => { + window?.mermaid?.contentLoaded() + }, []) + + return
{chart}
+} + +export default Mermaid diff --git a/src/renderer/src/utils/index.ts b/src/renderer/src/utils/index.ts index 4d28e5f9..c3a46a6e 100644 --- a/src/renderer/src/utils/index.ts +++ b/src/renderer/src/utils/index.ts @@ -207,3 +207,16 @@ export function estimateHistoryTokenCount(assistant: Assistant, msgs: Message[]) export const isValidProxyUrl = (url: string) => { return url.includes('://') } + +export function loadScript(url: string) { + return new Promise((resolve, reject) => { + const script = document.createElement('script') + script.type = 'text/javascript' + script.src = url + + script.onload = resolve + script.onerror = reject + + document.head.appendChild(script) + }) +}