feat: webui support `think` tag (#1140)

2 files changed, 55 insertions, 1 deletions

diff --git a/assets/arena.html b/assets/arena.html
index 7adad83..31973eb 100644
--- a/assets/arena.html
+++ b/assets/arena.html
@@ -1009,8 +1009,35 @@
 </div>`;
         }
       };
+      const thinkExtension = {
+        name: 'think',
+        level: 'block',
+        start(src) {
+          return src.indexOf('<think>');
+        },
+        tokenizer(src, tokens) {
+          const rule = /^\s*<think>([\s\S]*?)(<\/think>|$)/;
+          const match = rule.exec(src);
+          if (match) {
+            return {
+              type: 'think',
+              raw: match[0],
+              text: match[1].trim(),
+            };
+          }
+        },
+        renderer(token) {
+          const isOpen = !token.raw.endsWith('</think>');
+          const text = '<p>' + token.text.trim().replace(/\n+/g, '</p><p>') + '</p>';
+          return `<details ${isOpen ? "open" : ""} class="think">
+            <summary>Deeply thought</summary>
+            <blockquote>${text}</blockquote>
+          </details>`;
+        },
+      };
       marked.use({ renderer });
-      marked.use(markedKatex({ throwOnError: false, inlineTolerantNoSpace: true  }));
+      marked.use(markedKatex({ throwOnError: false, inlineTolerantNoSpace: true }));
+      marked.use({ extensions: [thinkExtension] })
     }
 
     function escapeForHTML(input) {
diff --git a/assets/playground.html b/assets/playground.html
index e7b8e11..d038bd1 100644
--- a/assets/playground.html
+++ b/assets/playground.html
@@ -1490,8 +1490,35 @@
 </div>`;
         }
       };
+      const thinkExtension = {
+        name: 'think',
+        level: 'block',
+        start(src) {
+          return src.indexOf('<think>');
+        },
+        tokenizer(src, tokens) {
+          const rule = /^\s*<think>([\s\S]*?)(<\/think>|$)/;
+          const match = rule.exec(src);
+          if (match) {
+            return {
+              type: 'think',
+              raw: match[0],
+              text: match[1].trim(),
+            };
+          }
+        },
+        renderer(token) {
+          const isOpen = !token.raw.endsWith('</think>');
+          const text = '<p>' + token.text.trim().replace(/\n+/g, '</p><p>') + '</p>';
+          return `<details ${isOpen ? "open" : ""} class="think">
+            <summary>Deeply thought</summary>
+            <blockquote>${text}</blockquote>
+          </details>`;
+        },
+      };
       marked.use({ renderer });
       marked.use(markedKatex({ throwOnError: false, inlineTolerantNoSpace: true }));
+      marked.use({ extensions: [thinkExtension] })
     }
 
     function escapeForHTML(input) {