feat: 将对话消息使用markdown 渲染

src/renderer/views/home/ChatBox.vue

@@ -18,10 +18,11 @@
             <span class="text-xs text-[#86909C]"> 20:30</span>
           </div>
 
-          <div class="text-sm text-gray-700"
-            :class="msg.messageRole === MessageRole.ME ? 'bg-[#f7f9fc] rounded-md px-2 py-2' : ''">
-            {{ msg.messageContent }}
-          </div>
+          <!-- AI 发的消息 -->
+          <ChatRoleAI v-if="msg.messageRole === MessageRole.AI" :msg="msg" />
+
+          <!-- 自己 发的消息 -->
+          <ChatRoleMe v-if="msg.messageRole === MessageRole.ME" :msg="msg" />
 
           <!-- AI 标识 -->
           <div v-if="msg.messageRole === MessageRole.AI && msg.finished" class="mt-2 text-xs text-gray-400 ">
@@ -29,7 +30,7 @@
           </div>
 
           <!-- AI 操作按钮 -->
-          <ChatOperation v-if="msg.messageRole === MessageRole.AI && msg.finished" :msg="msg" /> 
+          <ChatOperation v-if="msg.messageRole === MessageRole.AI && msg.finished" :msg="msg" />
         </div>
 
         <!-- User avatar -->
@@ -69,19 +70,22 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { RiLink, RiSendPlaneFill, RiStopFill, RiFileCopyLine, RiShareForwardLine, RiDownload2Line, RiThumbUpLine, RiThumbDownLine } from '@remixicon/vue'
+import { RiLink, RiSendPlaneFill, RiStopFill } from '@remixicon/vue'
 import { onMounted, nextTick, onUnmounted } from "vue";
 import { WebSocketManager } from "@common/WebSocketManager";
 import { MessageRole, ChatMessage } from "./model/ChatModel";
 import { IdUtils } from "@common/index";
 import ChatAvatar from './components/ChatAvatar.vue';
 import ChatOperation from './components/ChatOperation.vue';
+import ChatRoleAI from './components/ChatRoleAI.vue';
+import ChatRoleMe from './components/ChatRoleMe.vue';
 
 import { Session } from '../../utils/storage';
 
 import userAvatar from '@assets/images/login/user_icon.png';
 import aiAvatar from '@assets/images/login/blue_logo.png';
 
+
 ///（控制滚动位置）
 const scrollTop = ref(99999);