diff --git a/examples/server/public/index.html.gz b/examples/server/public/index.html.gz
index cf7d18bf3..f0419e181 100644
Binary files a/examples/server/public/index.html.gz and b/examples/server/public/index.html.gz differ
diff --git a/examples/server/webui/index.html b/examples/server/webui/index.html
index 899ebd499..e802a584c 100644
--- a/examples/server/webui/index.html
+++ b/examples/server/webui/index.html
@@ -261,11 +261,11 @@
           <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' && msg.cot" class="collapse bg-base-200" :open="isGenerating">
-              <summary class="collapse-title">Reasoning</summary>
-              <vue-markdown :source="msg.cot" dir="auto" class="collapse-content"></vue-markdown>
+            <details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200" :open="isGenerating">
+              <summary class="collapse-title">Reasoning?</summary>
+              <vue-markdown :source="splitMsgContent.cot" dir="auto" class="collapse-content"></vue-markdown>
             </details>
-            <vue-markdown :source="msg.content"></vue-markdown>
+            <vue-markdown :source="splitMsgContent.content"></vue-markdown>
           </div>
           <!-- render timings if enabled -->
           <div class="dropdown dropdown-hover dropdown-top mt-2" v-if="timings && config.showTokensPerSecond">
diff --git a/examples/server/webui/src/main.js b/examples/server/webui/src/main.js
index 7fec4f769..af1117008 100644
--- a/examples/server/webui/src/main.js
+++ b/examples/server/webui/src/main.js
@@ -188,7 +188,21 @@ const MessageBubble = defineComponent({
         prompt_per_second: this.msg.timings.prompt_n / (this.msg.timings.prompt_ms / 1000),
         predicted_per_second: this.msg.timings.predicted_n / (this.msg.timings.predicted_ms / 1000),
       };
-    }
+    },
+    splitMsgContent() {
+      // TODO: make it more efficient
+      const content = this.msg.content;
+      if (this.msg.role !== 'assistant'){
+        return {content};
+      }
+      const regex = /<think>(.*?)?(?=(<\/think>)|$)/gis;
+      const matches = [];
+      let match;
+      while ((match = regex.exec(content)) !== null) {
+          matches.push(match[1]);
+      }
+      return {content : content.replace(/<think>.*?(<\/think>|$)/gis, ''), cot : matches.join('<br/>') };
+    },
   },
   methods: {
     copyMsg() {
@@ -468,22 +482,14 @@ const mainApp = createApp({
         for await (const chunk of chunks) {
           const stop = chunk.stop;
           const addedContent = chunk.choices[0].delta.content;
-          const lastContent = this.pendingMsg.fullContent || '';
+          const lastContent = this.pendingMsg.content || '';
           if (addedContent) {
             this.pendingMsg = {
               id: this.pendingMsg.id,
               role: 'assistant',
-              fullContent: lastContent + addedContent,
+              content: lastContent + addedContent,
             };
           }
-          const regex = /<think>(.*?)?(?=(<\/think>)|$)/gis;
-          const matches = [];
-          let match;
-          while ((match = regex.exec(this.pendingMsg.fullContent)) !== null) {
-              matches.push(match[1]);
-          }
-          this.pendingMsg.content = this.pendingMsg.fullContent.replace(/<think>.*?(<\/think>|$)/gis, '');
-          this.pendingMsg.cot = matches.join('<br/>');
           const timings = chunk.timings;
           if (timings && this.config.showTokensPerSecond) {
             // only extract what's really needed, to save some space