From a27e928cc4617849d0acdd4601a5a6e1410df267 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sat, 15 Mar 2025 11:23:58 +0800
Subject: [PATCH] =?UTF-8?q?ai=E7=BB=84=E6=89=8B=E6=B7=BB=E5=8A=A0=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E6=B8=B2=E6=9F=93md=E4=B8=BAhtml=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ai/AIAssistantSideBar.vue | 49 ++++++++++++++++--------
 src/components/ai/AIChatHistory.vue      | 20 ++++++++--
 2 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/src/components/ai/AIAssistantSideBar.vue b/src/components/ai/AIAssistantSideBar.vue
index 096e035..7f1f758 100644
--- a/src/components/ai/AIAssistantSideBar.vue
+++ b/src/components/ai/AIAssistantSideBar.vue
@@ -19,6 +19,7 @@
     <AIChatHistory
       :messages="chatHistory"
       @update-code="(...event) => $emit('update-code', ...event)"
+      :render-md="renderMd"
     />
 
     <!-- 输入区域 -->
@@ -38,8 +39,18 @@
       </div>
       <div class="row items-center justify-between q-gutter-x-xs">
         <div class="row items-center q-gutter-x-xs">
-          <q-btn flat dense size="sm" icon="clear_all" @click="clearHistory">
-            <q-tooltip>清空对话</q-tooltip>
+          <q-btn
+            flat
+            dense
+            size="sm"
+            icon="html"
+            :color="renderMd ? 'primary' : 'grey'"
+            @click="renderMd = !renderMd"
+          >
+            <q-tooltip>
+              是否渲染md为html<br />
+              状态：{{ renderMd ? "已开启" : "已关闭" }}
+            </q-tooltip>
           </q-btn>
           <q-btn
             flat
@@ -87,20 +98,25 @@
             </q-tooltip>
           </q-btn>
         </div>
-        <q-btn
-          flat
-          dense
-          size="sm"
-          :label="streamingResponse ? '停止' : '发送'"
-          :disable="!streamingResponse && !prompt"
-          :color="streamingResponse ? 'negative' : 'primary'"
-          :icon="streamingResponse ? 'stop' : 'send'"
-          @click="handleSubmit"
-        >
-          <q-tooltip v-if="!streamingResponse">
-            Enter 发送，Shift+Enter 换行
-          </q-tooltip>
-        </q-btn>
+        <div class="row items-center q-gutter-x-xs">
+          <q-btn flat dense size="sm" icon="clear_all" @click="clearHistory">
+            <q-tooltip>清空对话</q-tooltip>
+          </q-btn>
+          <q-btn
+            flat
+            dense
+            size="sm"
+            :label="streamingResponse ? '停止' : '发送'"
+            :disable="!streamingResponse && !prompt"
+            :color="streamingResponse ? 'negative' : 'primary'"
+            :icon="streamingResponse ? 'stop' : 'send'"
+            @click="handleSubmit"
+          >
+            <q-tooltip v-if="!streamingResponse">
+              Enter 发送，Shift+Enter 换行
+            </q-tooltip>
+          </q-btn>
+        </div>
       </div>
     </div>
   </q-card>
@@ -144,6 +160,7 @@ export default defineComponent({
       autoUpdateCode: localStorage.getItem("ai_auto_update") !== "false",
       sendCode: false,
       submitDocs: true,
+      renderMd: true,
     };
   },
   props: {
diff --git a/src/components/ai/AIChatHistory.vue b/src/components/ai/AIChatHistory.vue
index 269d36f..e966587 100644
--- a/src/components/ai/AIChatHistory.vue
+++ b/src/components/ai/AIChatHistory.vue
@@ -18,13 +18,18 @@
         <div :class="['chat-message', message.role]">
           <div class="message-bubble">
             <div
-              v-if="message.role === 'assistant'"
+              v-if="message.role === 'assistant' && renderMd"
               class="message-content markdown"
               v-html="getAssistantMsg(message.content)"
             />
+            <div
+              v-else-if="message.role === 'assistant' && !renderMd"
+              class="message-content pre-text"
+              v-text="message.content"
+            />
             <div
               v-else
-              class="message-content"
+              class="message-content pre-text"
               v-text="getUserMsg(message.content)"
             />
           </div>
@@ -45,6 +50,10 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    renderMd: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ["update-code"],
   data() {
@@ -199,8 +208,6 @@ export default defineComponent({
 
 .chat-message.user .message-bubble {
   color: var(--q-primary);
-  word-break: break-all;
-  white-space: pre-wrap;
 }
 
 .message-content {
@@ -208,6 +215,11 @@ export default defineComponent({
   line-height: 1.5;
 }
 
+.message-content.pre-text {
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
 /* 代码块样式优化 */
 .message-content :deep(pre) {
   margin: 4px 0;