ai组手添加是否渲染md为html选项

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-btn
-            <q-tooltip>清空对话</q-tooltip>
+            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
+        <div class="row items-center q-gutter-x-xs">
-          flat
+          <q-btn flat dense size="sm" icon="clear_all" @click="clearHistory">
-          dense
+            <q-tooltip>清空对话</q-tooltip>
-          size="sm"
+          </q-btn>
-          :label="streamingResponse ? '停止' : '发送'"
+          <q-btn
-          :disable="!streamingResponse && !prompt"
+            flat
-          :color="streamingResponse ? 'negative' : 'primary'"
+            dense
-          :icon="streamingResponse ? 'stop' : 'send'"
+            size="sm"
-          @click="handleSubmit"
+            :label="streamingResponse ? '停止' : '发送'"
-        >
+            :disable="!streamingResponse && !prompt"
-          <q-tooltip v-if="!streamingResponse">
+            :color="streamingResponse ? 'negative' : 'primary'"
-            Enter 发送，Shift+Enter 换行
+            :icon="streamingResponse ? 'stop' : 'send'"
-          </q-tooltip>
+            @click="handleSubmit"
-        </q-btn>
+          >
+            <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: {

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;