webui: format+qol

Author: stduhpf

examples/server/public/index.html.gz

@@ -261,8 +261,11 @@ <h3 class="text-lg font-bold mb-6">Settings</h3>
           <span v-if="msg.content === null" class="loading loading-dots loading-md"></span>
           <!-- render message as markdown -->
           <div v-else dir="auto">
-            <details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200" :open="isGenerating">
-              <summary class="collapse-title">Reasoning?</summary>
+            <details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200" :open="splitMsgContent.isThinking">
+              <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>
             </details>
             <vue-markdown :source="splitMsgContent.content"></vue-markdown>

examples/server/webui/index.html

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