webui : put DeepSeek R1 CoT in a collapsible <details> element

Author: stduhpf

examples/server/public/index.html.gz

@@ -261,6 +261,10 @@ <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' && 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>
             <vue-markdown :source="msg.content"></vue-markdown>
           </div>
           <!-- render timings if enabled -->

examples/server/webui/index.html

@@ -468,14 +468,22 @@ const mainApp = createApp({
         for await (const chunk of chunks) {
           const stop = chunk.stop;
           const addedContent = chunk.choices[0].delta.content;
-          const lastContent = this.pendingMsg.content || '';
+          const lastContent = this.pendingMsg.fullContent || '';
           if (addedContent) {
             this.pendingMsg = {
               id: this.pendingMsg.id,
               role: 'assistant',
-              content: lastContent + addedContent,
+              fullContent: 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