feat(ai-native): add katex plugin for md render

difizen · Dec 18, 2024 · 09341a1 · 09341a1
1 parent a4ab6ca
commit 09341a1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/packages/libro-ai-native/package.json b/packages/libro-ai-native/package.json
@@ -45,18 +45,21 @@
     "typecheck:tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@difizen/libro-jupyter": "^0.3.2",
-    "@difizen/libro-code-editor": "^0.3.2",
     "@ant-design/icons": "^5.4.0",
-    "@difizen/mana-app": "latest",
-    "@difizen/mana-l10n": "latest",
-    "@difizen/magent-libro": "^0.1.27",
+    "@difizen/libro-code-editor": "^0.3.2",
+    "@difizen/libro-jupyter": "^0.3.2",
     "@difizen/magent-chat": "^0.1.27",
     "@difizen/magent-core": "^0.1.27",
+    "@difizen/magent-libro": "^0.1.27",
+    "@difizen/mana-app": "latest",
+    "@difizen/mana-l10n": "latest",
     "copy-to-clipboard": "^3.3.3",
     "eventsource-parser": "^1.1.2",
-    "react-syntax-highlighter": "^15.5.0",
+    "katex": "^0.16.10",
     "markdown-it": "^13.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
     "uuid": "^9.0.0"

diff --git a/packages/libro-ai-native/src/ai-native-for-cell-view.tsx b/packages/libro-ai-native/src/ai-native-for-cell-view.tsx
@@ -18,8 +18,11 @@ import { l10n } from '@difizen/mana-l10n';
 import { Button } from 'antd';
 import type { ParsedEvent } from 'eventsource-parser/stream';
 import { EventSourceParserStream } from 'eventsource-parser/stream';
+import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
 import breaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
+import 'katex/dist/katex.min.css'; // 引入 KaTeX 样式
 
 import { CodeBlockInCell } from './ai-native-code-block.js';
 import { LibroAINativeService } from './ai-native-service.js';
@@ -49,6 +52,7 @@ export function LibroAINativeForCellRender() {
           type="message"
           components={{ code: CodeBlockInCell }}
           remarkPlugins={[remarkGfm, breaks]}
+          rehypePlugins={[rehypeKatex, rehypeRaw]}
         >
           {msgItem?.content || ''}
         </LLMRender>

diff --git a/packages/libro-ai-native/src/chat-view.tsx b/packages/libro-ai-native/src/chat-view.tsx
@@ -18,6 +18,7 @@ import {
   ViewRender,
 } from '@difizen/mana-app';
 import { useRef } from 'react';
+import 'katex/dist/katex.min.css'; // 引入 KaTeX 样式
 
 import { LibroAINativeService } from './ai-native-service.js';
 import { LibroAiNativeChatView } from './libro-ai-native-chat-view.js';

diff --git a/packages/libro-ai-native/src/libro-ai-native-chat-view.tsx b/packages/libro-ai-native/src/libro-ai-native-chat-view.tsx
@@ -1,6 +1,8 @@
 import type { CellView, LibroView } from '@difizen/libro-jupyter';
 import { ChatView, ChatComponents } from '@difizen/magent-chat';
 import { inject, prop, transient, view, ViewOption } from '@difizen/mana-app';
+import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
 import breaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 
@@ -32,6 +34,7 @@ export class LibroAiNativeChatView extends ChatView {
     return {
       components: { code: CodeBlockInChat, img: ImageModal },
       remarkPlugins: [remarkGfm, breaks],
+      rehypePlugins: [rehypeRaw, rehypeKatex] as any[],
     };
   }