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

This commit is contained in:
fofolee 2025-03-15 11:23:58 +08:00
parent 04b08be60b
commit a27e928cc4
2 changed files with 49 additions and 20 deletions

View File

@ -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: {

View File

@ -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;