webui: format+qol

This commit is contained in:
Stéphane du Hamel 2025-01-23 20:11:22 +01:00
parent 77c08a8fb8
commit 7402727de4
3 changed files with 20 additions and 14 deletions

Binary file not shown.

View file

@ -261,8 +261,11 @@
<span v-if="msg.content === null" class="loading loading-dots loading-md"></span> <span v-if="msg.content === null" class="loading loading-dots loading-md"></span>
<!-- render message as markdown --> <!-- render message as markdown -->
<div v-else dir="auto"> <div v-else dir="auto">
<details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200" :open="isGenerating"> <details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200" :open="splitMsgContent.isThinking">
<summary class="collapse-title">Reasoning?</summary> <summary class="collapse-title text-xl font-medium">
<span v-if="splitMsgContent.isThinking">Thinking<span class="loading loading-dots loading-md" style="vertical-align: middle;"></span></span>
<span v-else >Thought Process</span>
</summary>
<vue-markdown :source="splitMsgContent.cot" dir="auto" class="collapse-content"></vue-markdown> <vue-markdown :source="splitMsgContent.cot" dir="auto" class="collapse-content"></vue-markdown>
</details> </details>
<vue-markdown :source="splitMsgContent.content"></vue-markdown> <vue-markdown :source="splitMsgContent.content"></vue-markdown>

View file

@ -191,24 +191,27 @@ const MessageBubble = defineComponent({
}, },
splitMsgContent() { splitMsgContent() {
const content = this.msg.content; const content = this.msg.content;
if (this.msg.role !== 'assistant'){ if (this.msg.role !== "assistant") {
return {content}; return { content };
} }
let actualContent = ''; let actualContent = "";
let cot = ''; let cot = "";
let thinkSplit = content.split("<think>",2); let isThinking = false;
let thinkSplit = content.split("<think>", 2);
actualContent += thinkSplit[0]; actualContent += thinkSplit[0];
while (thinkSplit[1]!==undefined){ while (thinkSplit[1] !== undefined) {
// <think> tag found // <think> tag found
thinkSplit = thinkSplit[1].split("</think>",2); thinkSplit = thinkSplit[1].split("</think>", 2);
cot+=thinkSplit[0]; cot += thinkSplit[0];
if(thinkSplit[1]!==undefined){ isThinking = true;
if (thinkSplit[1] !== undefined) {
// </think> closing tag found // </think> closing tag found
thinkSplit = thinkSplit[1].split("<think>",2); isThinking = false;
actualContent+=thinkSplit[0]; thinkSplit = thinkSplit[1].split("<think>", 2);
actualContent += thinkSplit[0];
} }
} }
return {content : actualContent, cot }; return { content: actualContent, cot , isThinking};
}, },
}, },
methods: { methods: {