From 46c8f85e9b373e8dbe2f3b3e9035a87152eb4f79 Mon Sep 17 00:00:00 2001
From: ViperEkura <3081035982@qq.com>
Date: Tue, 24 Mar 2026 16:13:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0katex=20=E5=85=AC?=
=?UTF-8?q?=E5=BC=8F=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/index.html | 2 +-
frontend/package-lock.json | 26 ++++++++
frontend/package.json | 1 +
frontend/src/components/ChatView.vue | 25 ++++----
frontend/src/components/MessageBubble.vue | 24 ++++----
frontend/src/main.js | 1 +
frontend/src/utils/markdown.js | 72 +++++++++++++++++++++++
7 files changed, 122 insertions(+), 29 deletions(-)
create mode 100644 frontend/src/utils/markdown.js
diff --git a/frontend/index.html b/frontend/index.html
index e95b3bf..68d26d0 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,7 @@
- AI Chat
+ Chat
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b663d71..8fb912b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"highlight.js": "^11.10.0",
+ "katex": "^0.16.40",
"marked": "^15.0.0",
"vue": "^3.4.0"
},
@@ -990,6 +991,15 @@
"dev": true,
"license": "Python-2.0"
},
+ "node_modules/commander": {
+ "version": "8.3.0",
+ "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
+ "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 12"
+ }
+ },
"node_modules/csstype": {
"version": "3.2.3",
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
@@ -1111,6 +1121,22 @@
"js-yaml": "bin/js-yaml.js"
}
},
+ "node_modules/katex": {
+ "version": "0.16.40",
+ "resolved": "https://registry.npmmirror.com/katex/-/katex-0.16.40.tgz",
+ "integrity": "sha512-1DJcK/L05k1Y9Gf7wMcyuqFOL6BiY3vY0CFcAM/LPRN04NALxcl6u7lOWNsp3f/bCHWxigzQl6FbR95XJ4R84Q==",
+ "funding": [
+ "https://opencollective.com/katex",
+ "https://github.com/sponsors/katex"
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "commander": "^8.3.0"
+ },
+ "bin": {
+ "katex": "cli.js"
+ }
+ },
"node_modules/magic-string": {
"version": "0.30.21",
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 89c5142..176b2ef 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
},
"dependencies": {
"highlight.js": "^11.10.0",
+ "katex": "^0.16.40",
"marked": "^15.0.0",
"vue": "^3.4.0"
},
diff --git a/frontend/src/components/ChatView.vue b/frontend/src/components/ChatView.vue
index 9a0a3e5..c29038d 100644
--- a/frontend/src/components/ChatView.vue
+++ b/frontend/src/components/ChatView.vue
@@ -68,19 +68,7 @@
import { ref, computed, watch, nextTick } from 'vue'
import MessageBubble from './MessageBubble.vue'
import MessageInput from './MessageInput.vue'
-import { marked } from 'marked'
-import hljs from 'highlight.js'
-
-marked.setOptions({
- highlight(code, lang) {
- if (lang && hljs.getLanguage(lang)) {
- return hljs.highlight(code, { language: lang }).value
- }
- return hljs.highlightAuto(code).value
- },
- breaks: true,
- gfm: true,
-})
+import { renderMarkdown } from '../utils/markdown'
const props = defineProps({
conversation: { type: Object, default: null },
@@ -99,7 +87,7 @@ const inputRef = ref(null)
const renderedStreamContent = computed(() => {
if (!props.streamingContent) return ''
- return marked.parse(props.streamingContent)
+ return renderMarkdown(props.streamingContent)
})
function scrollToBottom(smooth = true) {
@@ -375,4 +363,13 @@ defineExpose({ scrollToBottom })
.streaming-content :deep(.placeholder) {
color: #94a3b8;
}
+
+.streaming-content :deep(.math-block),
+.message-content :deep(.math-block) {
+ display: block;
+ text-align: center;
+ padding: 12px 0;
+ margin: 8px 0;
+ overflow-x: auto;
+}
diff --git a/frontend/src/components/MessageBubble.vue b/frontend/src/components/MessageBubble.vue
index 41f461c..70d451d 100644
--- a/frontend/src/components/MessageBubble.vue
+++ b/frontend/src/components/MessageBubble.vue
@@ -38,8 +38,7 @@