whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: add Mermaid render

Browse Source
This commit is contained in:
kangfenmao 2024-07-23 17:59:53 +08:00
parent 764aadd234
commit 4036c36753
6 changed files with 46 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/index.html
View File

@ -7,7 +7,7 @@
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
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:" />
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:" />
</head>
<body theme-mode="dark">

1
src/renderer/src/env.d.ts vendored
View File

@ -9,5 +9,6 @@ declare global {
message: MessageInstance
modal: HookAPI
keyv: KeyvStorage
mermaid: any
}
}

12
src/renderer/src/init.ts
View File

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

5
src/renderer/src/pages/home/components/CodeBlock.tsx
View File

@ -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<CodeBlockProps> = ({ children, className, ...rest }) =
window.message.success({ content: t('message.copied'), key: 'copy-code' })
}
if (match && match[1] === 'mermaid') {
return <Mermaid chart={children} />
}
return match ? (
<div>
<CodeHeader>

15
src/renderer/src/pages/home/components/Mermaid.tsx Normal file
View File

@ -0,0 +1,15 @@
import React, { useEffect } from 'react'
interface Props {
chart: string
}
const Mermaid: React.FC<Props> = ({ chart }) => {
useEffect(() => {
window?.mermaid?.contentLoaded()
}, [])
return <div className="mermaid">{chart}</div>
}
export default Mermaid

13
src/renderer/src/utils/index.ts
View File

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