Add mdast-related dependencies and update code to use mdast

- Update package.json to include mdast dependencies
- Import necessary functions and types from mdast-util
- Update logic to use mdast functions and types
- Update rendering logic to work with new mdast structure

package.json

@@ -9,8 +9,8 @@
 		"vscode": "^1.75.0"
 	},
 	"extensionDependencies": [
-        "merico.lang-bridge-vsc"
-    ],
+		"merico.lang-bridge-vsc"
+	],
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/devchat-ai/devchat-vscode.git"
@@ -796,6 +796,9 @@
 		"axios": "^1.3.6",
 		"dotenv": "^16.0.3",
 		"js-yaml": "^4.1.0",
+		"mdast": "^3.0.0",
+		"mdast-util-from-markdown": "^2.0.0",
+		"mdast-util-to-markdown": "^2.1.0",
 		"mobx": "^6.10.0",
 		"mobx-react": "^9.0.0",
 		"mobx-state-tree": "^5.1.8",

src/views/components/CurrentMessage/index.tsx

@@ -1,12 +1,14 @@
 
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { keyframes } from "@emotion/react";
 import { Box, Container, Text } from "@mantine/core";
 import MessageBody from "@/views/components/MessageBody";
 import { observer } from "mobx-react-lite";
 import { useMst } from "@/views/stores/RootStore";
 import { Message } from "@/views/stores/ChatStore";
-
+import {fromMarkdown} from 'mdast-util-from-markdown';
+import {toMarkdown} from 'mdast-util-to-markdown';
+import {Root} from 'mdast';
 
 const MessageBlink = observer(() => {
     const { chat } = useMst();
@@ -49,13 +51,12 @@ const CurrentMessage = observer((props: any) => {
     const { width } = props;
     const { chat } = useMst();
     const { messages, currentMessage, generating, responsed, hasDone } = chat;
-
     // split blocks
-    const messageBlocks = getBlocks(currentMessage);
-    const lastMessageBlocks = getBlocks(messages[messages.length - 1]?.message);
-    const fixedCount = lastMessageBlocks.length;
-    const receivedCount = messageBlocks.length;
-    const renderBlocks = messageBlocks.splice(-1);
+    const messageBlocks = fromMarkdown(currentMessage);
+    const lastMessageBlocks = fromMarkdown(messages[messages.length - 1]?.message);
+    const fixedCount = lastMessageBlocks.children.length;
+    const receivedCount = messageBlocks.children.length;
+    const renderBlocks = messageBlocks.children.splice(-1);
 
     useEffect(() => {
         if (generating) {
@@ -67,7 +68,10 @@ const CurrentMessage = observer((props: any) => {
 
     useEffect(() => {
         if (generating && (receivedCount - fixedCount >= 1 || !responsed)) {
-            chat.updateLastMessage(currentMessage);
+            chat.updateLastMessage(toMarkdown({
+                    type: 'root',
+                    children: messageBlocks.children
+                }));
         }
     }, [currentMessage, responsed, generating]);
 
@@ -86,7 +90,7 @@ const CurrentMessage = observer((props: any) => {
                     whiteSpace: 'break-spaces'
                 },
             }}>
-            <MessageBody messageText={renderBlocks.join('\n\n')} messageType="bot" />
+            <MessageBody messageText={renderBlocks.length>0?toMarkdown(renderBlocks[0]):''} messageType="bot" />
             <MessageBlink />
         </Box>
         : <></>;