feat: support for <think></think> tags to allow reasoning tokens formatted in UI (#1205)

app/utils/markdown.ts

@@ -54,8 +54,28 @@ export const allowedHTMLElements = [
   'tr',
   'ul',
   'var',
+  'think',
 ];
 
+// Add custom rehype plugin
+function remarkThinkRawContent() {
+  return (tree: any) => {
+    visit(tree, (node: any) => {
+      if (node.type === 'html' && node.value && node.value.startsWith('<think>')) {
+        const cleanedContent = node.value.slice(7);
+        node.value = `<div class="__boltThought__">${cleanedContent}`;
+
+        return;
+      }
+
+      if (node.type === 'html' && node.value && node.value.startsWith('</think>')) {
+        const cleanedContent = node.value.slice(8);
+        node.value = `</div>${cleanedContent}`;
+      }
+    });
+  };
+}
+
 const rehypeSanitizeOptions: RehypeSanitizeOptions = {
   ...defaultSchema,
   tagNames: allowedHTMLElements,
@@ -79,6 +99,8 @@ export function remarkPlugins(limitedMarkdown: boolean) {
     plugins.unshift(limitedMarkdownPlugin);
   }
 
+  plugins.unshift(remarkThinkRawContent);
+
   return plugins;
 }