From fa225a423afcb476b5e51a4c1a29e1cb86b44302 Mon Sep 17 00:00:00 2001
From: Xuan Son Nguyen <son@huggingface.co>
Date: Thu, 23 Jan 2025 23:41:54 +0100
Subject: [PATCH] ui fix, add configs

---
 examples/server/webui/index.html  | 26 ++++++++++++++++++++++----
 examples/server/webui/src/main.js | 17 ++++++++++-------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/examples/server/webui/index.html b/examples/server/webui/index.html
index 3f4a9cd93..d3893ea4e 100644
--- a/examples/server/webui/index.html
+++ b/examples/server/webui/index.html
@@ -141,6 +141,7 @@
               :msg="pendingMsg"
               :key="pendingMsg.id"
               :is-generating="isGenerating"
+              :show-thought-in-progress="config.showThoughtInProgress"
               :edit-user-msg-and-regenerate="() => {}"
               :regenerate-msg="() => {}"></message-bubble>
           </div>
@@ -202,6 +203,20 @@
               </template>
             </div>
           </details>
+          <!-- Section: Reasoning models -->
+          <details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
+            <summary class="collapse-title font-bold">Reasoning models</summary>
+            <div class="collapse-content">
+              <div class="flex flex-row items-center mb-2">
+                <input type="checkbox" class="checkbox" v-model="config.showThoughtInProgress" />
+                <span class="ml-4">Expand though process by default for generating message</span>
+              </div>
+              <div class="flex flex-row items-center mb-2">
+                <input type="checkbox" class="checkbox" v-model="config.excludeThoughtOnReq" />
+                <span class="ml-4">Exclude thought process when sending request to API (Recommended for DeepSeek-R1)</span>
+              </div>
+            </div>
+          </details>
           <!-- Section: Advanced config -->
           <details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
             <summary class="collapse-title font-bold">Advanced config</summary>
@@ -261,10 +276,13 @@
           <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="splitMsgContent.isThinking">
-              <summary class="collapse-title text-xl font-medium">
-                <span v-if="splitMsgContent.isThinking">Thinking<span v-if="isGenerating" class="loading loading-dots loading-md" style="vertical-align: middle;"></span></span>
-                <span v-else >Thought Process</span>
+            <details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200 collapse-arrow mb-4" :open="splitMsgContent.isThinking && showThoughtInProgress">
+              <summary class="collapse-title">
+                <span v-if="splitMsgContent.isThinking">
+                  <span v-if="isGenerating" class="loading loading-spinner loading-md mr-2" style="vertical-align: middle;"></span>
+                  <b>Thinking</b>
+                </span>
+                <b v-else>Thought Process</b>
               </summary>
               <vue-markdown :source="splitMsgContent.cot" dir="auto" class="collapse-content"></vue-markdown>
             </details>
diff --git a/examples/server/webui/src/main.js b/examples/server/webui/src/main.js
index bd6a3ffaf..f9eebc417 100644
--- a/examples/server/webui/src/main.js
+++ b/examples/server/webui/src/main.js
@@ -50,6 +50,8 @@ const CONFIG_DEFAULT = {
   apiKey: '',
   systemMessage: 'You are a helpful assistant.',
   showTokensPerSecond: false,
+  showThoughtInProgress: false,
+  excludeThoughtOnReq: true,
   // make sure these default values are in sync with `common.h`
   samplers: 'edkypmxt',
   temperature: 0.8,
@@ -172,6 +174,7 @@ const MessageBubble = defineComponent({
     config: Object,
     msg: Object,
     isGenerating: Boolean,
+    showThoughtInProgress: Boolean,
     editUserMsgAndRegenerate: Function,
     regenerateMsg: Function,
   },
@@ -191,27 +194,27 @@ const MessageBubble = defineComponent({
     },
     splitMsgContent() {
       const content = this.msg.content;
-      if (this.msg.role !== "assistant") {
+      if (this.msg.role !== 'assistant') {
         return { content };
       }
-      let actualContent = "";
-      let cot = "";
+      let actualContent = '';
+      let cot = '';
       let isThinking = false;
-      let thinkSplit = content.split("<think>", 2);
+      let thinkSplit = content.split('<think>', 2);
       actualContent += thinkSplit[0];
       while (thinkSplit[1] !== undefined) {
         // <think> tag found
-        thinkSplit = thinkSplit[1].split("</think>", 2);
+        thinkSplit = thinkSplit[1].split('</think>', 2);
         cot += thinkSplit[0];
         isThinking = true;
         if (thinkSplit[1] !== undefined) {
           // </think> closing tag found
           isThinking = false;
-          thinkSplit = thinkSplit[1].split("<think>", 2);
+          thinkSplit = thinkSplit[1].split('<think>', 2);
           actualContent += thinkSplit[0];
         }
       }
-      return { content: actualContent, cot , isThinking};
+      return { content: actualContent, cot, isThinking };
     },
   },
   methods: {