implement different rendering for thinking responses

Signed-off-by: Demis Bellot <demis.bellot@gmail.com>

Author: mythz

AiServer/wwwroot/mjs/markdown.mjs

@@ -11,6 +11,7 @@ export const marked = (() => {
             }
         })
     )
+    ret.use({ extensions:[thinkTag()] })
     //ret.use({ extensions: [divExtension()] })
     return ret
 })();
@@ -105,4 +106,75 @@ function escape(html, encode) {
     }
 
     return html
-}
+}
+
+/**
+ * Marked.js extension for rendering <think> tags as expandable, scrollable components
+ * using Tailwind CSS
+ */
+
+// Extension for Marked.js to handle <think> tags
+function thinkTag() {
+    globalThis.toggleThink = toggleThink
+    return ({
+        name: 'thinkTag',
+        level: 'block',
+        start(src) {
+            return src.match(/^<think>/)?.index;
+        },
+        tokenizer(src) {
+            const rule = /^<think>([\s\S]*?)<\/think>/
+            const match = rule.exec(src)
+            if (match) {
+                return {
+                    type: 'thinkTag',
+                    raw: match[0],
+                    content: match[1].trim(),
+                }
+            }
+            return undefined
+        },
+        renderer(token) {
+            // Parse the markdown content inside the think tag
+            const parsedContent = marked.parse(token.content)
+
+            // Generate a unique ID for this think component
+            const uniqueId = 'think-' + Math.random().toString(36).substring(2, 10)
+
+            // Create the expandable, scrollable component with Tailwind CSS
+            return `
+    <div class="my-4 border border-gray-200 rounded-lg shadow-sm">
+      <button 
+        id="${uniqueId}-toggle"
+        class="flex justify-between items-center w-full py-2 px-4 text-left text-gray-700 font-medium hover:bg-gray-50 focus:outline-none"
+        onclick="toggleThink('${uniqueId}')">
+        <span>Thinking</span>
+        <svg id="${uniqueId}-icon" class="h-5 w-5 text-gray-500 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+        </svg>
+      </button>
+      <div 
+        id="${uniqueId}-content" 
+        class="hidden overflow-auto max-h-64 px-4 border-t border-gray-200 bg-gray-50"
+        style="max-height:16rem;">
+        ${parsedContent}
+      </div>
+    </div>
+    `
+        }
+    })
+}
+
+// JavaScript function to toggle the visibility of the think content
+function toggleThink(id) {
+    const content = document.getElementById(`${id}-content`)
+    const icon = document.getElementById(`${id}-icon`)
+
+    if (content.classList.contains('hidden')) {
+        content.classList.remove('hidden')
+        icon.classList.add('rotate-180')
+    } else {
+        content.classList.add('hidden')
+        icon.classList.remove('rotate-180')
+    }
+}