fix: 公式显示问题 #239

This commit is contained in:
kangfenmao 2024-10-24 15:30:04 +08:00
parent 5347f63aa8
commit 2cbb4c8831
10 changed files with 92 additions and 17 deletions

View File

@ -104,6 +104,7 @@
"react-syntax-highlighter": "^15.5.0",
"redux": "^5.0.1",
"redux-persist": "^6.0.0",
"rehype-katex": "^7.0.1",
"rehype-mathjax": "^6.0.0",
"rehype-raw": "^7.0.0",
"remark-gfm": "^4.0.0",

View File

@ -226,6 +226,7 @@
"messages.input.send_shortcuts": "Send shortcuts",
"messages.input.paste_long_text_as_file": "Paste long text as file",
"messages.markdown_rendering_input_message": "Markdown render input msg",
"messages.math_engine": "Math render engine",
"general.title": "General Settings",
"general.user_name": "User Name",
"general.user_name.placeholder": "Enter your name",

View File

@ -226,6 +226,7 @@
"messages.input.send_shortcuts": "发送快捷键",
"messages.input.paste_long_text_as_file": "长文本粘贴为文件",
"messages.markdown_rendering_input_message": "Markdown 渲染输入消息",
"messages.math_engine": "数学公式引擎",
"general.title": "常规设置",
"general.user_name": "用户名",
"general.user_name.placeholder": "请输入用户名",

View File

@ -225,7 +225,8 @@
"messages.input.show_estimated_tokens": "顯示預估輸入 Token 數",
"messages.input.send_shortcuts": "發送快捷鍵",
"messages.input.paste_long_text_as_file": "將長文本貼上為檔案",
"messages.markdown_rendering_input_message": "Markdown 渲染輸入訊息",
"messages.math_engine": "Markdown 渲染輸入訊息",
"messages.math_render_engine": "數學公式引擎",
"general.title": "一般設定",
"general.user_name": "使用者名稱",
"general.user_name.placeholder": "輸入您的名稱",

View File

@ -7,6 +7,7 @@ import { isEmpty } from 'lodash'
import { FC, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import ReactMarkdown, { Components } from 'react-markdown'
import rehypeKatex from 'rehype-katex'
// @ts-ignore next-line
import rehypeMathjax from 'rehype-mathjax'
import rehypeRaw from 'rehype-raw'
@ -23,7 +24,9 @@ interface Props {
const Markdown: FC<Props> = ({ message }) => {
const { t } = useTranslation()
const { renderInputMessageAsMarkdown } = useSettings()
const { renderInputMessageAsMarkdown, mathEngine } = useSettings()
const rehypeMath = mathEngine === 'KaTeX' ? rehypeKatex : rehypeMathjax
const messageContent = useMemo(() => {
const empty = isEmpty(message.content)
@ -34,8 +37,8 @@ const Markdown: FC<Props> = ({ message }) => {
const rehypePlugins = useMemo(() => {
const hasUnsafeElements = /<(input|textarea|select)/i.test(messageContent)
return hasUnsafeElements ? [rehypeMathjax] : [rehypeRaw, rehypeMathjax]
}, [messageContent])
return hasUnsafeElements ? [rehypeMath] : [rehypeRaw, rehypeMath]
}, [messageContent, rehypeMath])
if (message.role === 'user' && !renderInputMessageAsMarkdown) {
return <p style={{ marginBottom: 5, whiteSpace: 'pre-wrap' }}>{messageContent}</p>

View File

@ -9,6 +9,7 @@ import { useAppDispatch } from '@renderer/store'
import {
setCodeShowLineNumbers,
setFontSize,
setMathEngine,
setMessageFont,
setPasteLongTextAsFile,
setRenderInputMessageAsMarkdown,
@ -46,7 +47,8 @@ const SettingsTab: FC<Props> = (props) => {
setSendMessageShortcut,
pasteLongTextAsFile,
renderInputMessageAsMarkdown,
codeShowLineNumbers
codeShowLineNumbers,
mathEngine
} = useSettings()
const onUpdateAssistantSettings = (settings: Partial<AssistantSettings>) => {
@ -213,6 +215,18 @@ const SettingsTab: FC<Props> = (props) => {
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.math_engine')}</SettingRowTitleSmall>
<Select
value={mathEngine}
onChange={(value) => dispatch(setMathEngine(value))}
style={{ width: 100 }}
size="small">
<Select.Option value="KaTeX">KaTeX</Select.Option>
<Select.Option value="MathJax">MathJax</Select.Option>
</Select>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.font_size.title')}</SettingRowTitleSmall>
</SettingRow>
@ -264,17 +278,18 @@ const SettingsTab: FC<Props> = (props) => {
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
<Select
size="small"
value={sendMessageShortcut}
menuItemSelectedIcon={<CheckOutlined />}
options={[
{ value: 'Enter', label: 'Enter' },
{ value: 'Shift+Enter', label: `Shift + Enter` }
]}
onChange={(value) => setSendMessageShortcut(value)}
style={{ width: 100 }}
/>
</SettingRow>
<Select
value={sendMessageShortcut}
menuItemSelectedIcon={<CheckOutlined />}
options={[
{ value: 'Enter', label: `Enter ${t('chat.input.send')}` },
{ value: 'Shift+Enter', label: `Shift + Enter ${t('chat.input.send')}` }
]}
onChange={(value) => setSendMessageShortcut(value)}
style={{ width: '100%', marginTop: 10 }}
/>
</Container>
</Scrollbar>
)
@ -286,6 +301,7 @@ const Container = styled.div`
flex-direction: column;
padding-bottom: 10px;
padding: 10px 15px;
margin-bottom: 10px;
`
const Label = styled.p`

View File

@ -22,7 +22,7 @@ const persistedReducer = persistReducer(
{
key: 'cherry-studio',
storage,
version: 34,
version: 35,
blacklist: ['runtime'],
migrate
},

View File

@ -610,6 +610,10 @@ const migrateConfig = {
})
})
return state
},
'35': (state: RootState) => {
state.settings.mathEngine = 'KaTeX'
return state
}
}

View File

@ -23,6 +23,7 @@ export interface SettingsState {
manualUpdateCheck: boolean
renderInputMessageAsMarkdown: boolean
codeShowLineNumbers: boolean
mathEngine: 'MathJax' | 'KaTeX'
// webdav 配置 host, user, pass, path
webdavHost: string
webdavUser: string
@ -50,6 +51,7 @@ const initialState: SettingsState = {
manualUpdateCheck: false,
renderInputMessageAsMarkdown: true,
codeShowLineNumbers: false,
mathEngine: 'MathJax',
webdavHost: '',
webdavUser: '',
webdavPass: '',
@ -135,6 +137,9 @@ const settingsSlice = createSlice({
},
setCodeShowLineNumbers: (state, action: PayloadAction<boolean>) => {
state.codeShowLineNumbers = action.payload
},
setMathEngine: (state, action: PayloadAction<'MathJax' | 'KaTeX'>) => {
state.mathEngine = action.payload
}
}
})
@ -164,7 +169,8 @@ export const {
setWebdavUser,
setWebdavPass,
setWebdavPath,
setCodeShowLineNumbers
setCodeShowLineNumbers,
setMathEngine
} = settingsSlice.actions
export default settingsSlice.reducer

View File

@ -2355,6 +2355,7 @@ __metadata:
react-syntax-highlighter: "npm:^15.5.0"
redux: "npm:^5.0.1"
redux-persist: "npm:^6.0.0"
rehype-katex: "npm:^7.0.1"
rehype-mathjax: "npm:^6.0.0"
rehype-raw: "npm:^7.0.0"
remark-gfm: "npm:^4.0.0"
@ -5988,6 +5989,32 @@ __metadata:
languageName: node
linkType: hard
"hast-util-from-html-isomorphic@npm:^2.0.0":
version: 2.0.0
resolution: "hast-util-from-html-isomorphic@npm:2.0.0"
dependencies:
"@types/hast": "npm:^3.0.0"
hast-util-from-dom: "npm:^5.0.0"
hast-util-from-html: "npm:^2.0.0"
unist-util-remove-position: "npm:^5.0.0"
checksum: 10c0/fc68d9245e794483a802d5c85a9f6c25959e00db78cc796411efc965134f3206f9cc9fa38134572ea781ad74663e801f1f83202007b208e27a770855566a62b6
languageName: node
linkType: hard
"hast-util-from-html@npm:^2.0.0":
version: 2.0.3
resolution: "hast-util-from-html@npm:2.0.3"
dependencies:
"@types/hast": "npm:^3.0.0"
devlop: "npm:^1.1.0"
hast-util-from-parse5: "npm:^8.0.0"
parse5: "npm:^7.0.0"
vfile: "npm:^6.0.0"
vfile-message: "npm:^4.0.0"
checksum: 10c0/993ef707c1a12474c8d4094fc9706a72826c660a7e308ea54c50ad893353d32e139b7cbc67510c2e82feac572b320e3b05aeb13d0f9c6302d61261f337b46764
languageName: node
linkType: hard
"hast-util-from-parse5@npm:^8.0.0":
version: 8.0.1
resolution: "hast-util-from-parse5@npm:8.0.1"
@ -10466,6 +10493,21 @@ __metadata:
languageName: node
linkType: hard
"rehype-katex@npm:^7.0.1":
version: 7.0.1
resolution: "rehype-katex@npm:7.0.1"
dependencies:
"@types/hast": "npm:^3.0.0"
"@types/katex": "npm:^0.16.0"
hast-util-from-html-isomorphic: "npm:^2.0.0"
hast-util-to-text: "npm:^4.0.0"
katex: "npm:^0.16.0"
unist-util-visit-parents: "npm:^6.0.0"
vfile: "npm:^6.0.0"
checksum: 10c0/73c770319536128b75055d904d06951789d00a0552c11724c0dac2e244dcb21041630552d118a11cc42233fdcd1bfee525e78a0020fde635bd916cceb281dfb1
languageName: node
linkType: hard
"rehype-mathjax@npm:^6.0.0":
version: 6.0.0
resolution: "rehype-mathjax@npm:6.0.0"