From f95a96b68479c3b63670ba53b1ded9e33bee4ff1 Mon Sep 17 00:00:00 2001
From: sunshinesmilelk <ximo.lk@antgroup.com>
Date: Wed, 18 Dec 2024 12:09:07 +0800
Subject: [PATCH] feat(ai-native): add katex plugin for md render

---
 packages/libro-ai-native/package.json             | 15 +++++++++------
 .../src/ai-native-for-cell-view.tsx               |  4 ++++
 packages/libro-ai-native/src/chat-view.tsx        |  1 +
 .../src/libro-ai-native-chat-view.tsx             |  3 +++
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/libro-ai-native/package.json b/packages/libro-ai-native/package.json
index 7170e0a1..c77cc6aa 100644
--- 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
index 52614312..b9929f0d 100644
--- 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
index be2d695c..b7ebec4a 100644
--- 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
index 59e6cac1..dfd6de3a 100644
--- 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[],
     };
   }