feat: added support for reasoning content (stackblitz-labs#1168)

Author: thecodacus

app/components/chat/Markdown.tsx

@@ -7,6 +7,7 @@ import { Artifact } from './Artifact';
 import { CodeBlock } from './CodeBlock';
 
 import styles from './Markdown.module.scss';
+import ThoughtBox from './ThoughtBox';
 
 const logger = createScopedLogger('MarkdownComponent');
 
@@ -22,6 +23,8 @@ export const Markdown = memo(({ children, html = false, limitedMarkdown = false
   const components = useMemo(() => {
     return {
       div: ({ className, children, node, ...props }) => {
+        console.log(className, node);
+
         if (className?.includes('__boltArtifact__')) {
           const messageId = node?.properties.dataMessageId as string;
 
@@ -32,6 +35,10 @@ export const Markdown = memo(({ children, html = false, limitedMarkdown = false
           return <Artifact messageId={messageId} />;
         }
 
+        if (className?.includes('__boltThought__')) {
+          return <ThoughtBox title="Thought process">{children}</ThoughtBox>;
+        }
+
         return (
           <div className={className} {...props}>
             {children}

app/components/chat/ThoughtBox.tsx

@@ -0,0 +1,43 @@
+import { useState, type PropsWithChildren } from 'react';
+
+const ThoughtBox = ({ title, children }: PropsWithChildren<{ title: string }>) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div
+      onClick={() => setIsExpanded(!isExpanded)}
+      className={`
+        bg-bolt-elements-background-depth-2
+        shadow-md 
+        rounded-lg 
+        cursor-pointer 
+        transition-all 
+        duration-300
+        ${isExpanded ? 'max-h-96' : 'max-h-13'}
+        overflow-auto
+        border border-bolt-elements-borderColor
+      `}
+    >
+      <div className="p-4 flex items-center gap-4 rounded-lg  text-bolt-elements-textSecondary font-medium leading-5 text-sm  border border-bolt-elements-borderColor">
+        <div className="i-ph:brain-thin text-2xl" />
+        <div className="div">
+          <span> {title}</span>{' '}
+          {!isExpanded && <span className="text-bolt-elements-textTertiary"> - Click to expand</span>}
+        </div>
+      </div>
+      <div
+        className={`
+        transition-opacity 
+        duration-300
+        p-4 
+        rounded-lg 
+        ${isExpanded ? 'opacity-100' : 'opacity-0'}
+      `}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ThoughtBox;

app/lib/modules/llm/providers/deepseek.ts

@@ -2,7 +2,7 @@ import { BaseProvider } from '~/lib/modules/llm/base-provider';
 import type { ModelInfo } from '~/lib/modules/llm/types';
 import type { IProviderSetting } from '~/types/model';
 import type { LanguageModelV1 } from 'ai';
-import { createOpenAI } from '@ai-sdk/openai';
+import { createDeepSeek } from '@ai-sdk/deepseek';
 
 export default class DeepseekProvider extends BaseProvider {
   name = 'Deepseek';
@@ -38,11 +38,12 @@ export default class DeepseekProvider extends BaseProvider {
       throw new Error(`Missing API key for ${this.name} provider`);
     }
 
-    const openai = createOpenAI({
-      baseURL: 'https://api.deepseek.com/beta',
+    const deepseek = createDeepSeek({
       apiKey,
     });
 
-    return openai(model);
+    return deepseek(model, {
+      // simulateStreaming: true,
+    });
   }
 }

app/routes/api.chat.ts

@@ -63,6 +63,8 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
     const totalMessageContent = messages.reduce((acc, message) => acc + message.content, '');
     logger.debug(`Total message length: ${totalMessageContent.split(' ').length}, words`);
 
+    let lastChunk: string | undefined = undefined;
+
     const dataStream = createDataStream({
       async execute(dataStream) {
         const filePaths = getFilePaths(files || {});
@@ -247,15 +249,42 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
             }
           }
         })();
-
         result.mergeIntoDataStream(dataStream);
       },
       onError: (error: any) => `Custom error: ${error.message}`,
     }).pipeThrough(
       new TransformStream({
         transform: (chunk, controller) => {
+          if (!lastChunk) {
+            lastChunk = ' ';
+          }
+
+          if (typeof chunk === 'string') {
+            if (chunk.startsWith('g') && !lastChunk.startsWith('g')) {
+              controller.enqueue(encoder.encode(`0: "<div class=\\"__boltThought__\\">"\n`));
+            }
+
+            if (lastChunk.startsWith('g') && !chunk.startsWith('g')) {
+              controller.enqueue(encoder.encode(`0: "</div>\\n"\n`));
+            }
+          }
+
+          lastChunk = chunk;
+
+          let transformedChunk = chunk;
+
+          if (typeof chunk === 'string' && chunk.startsWith('g')) {
+            let content = chunk.split(':').slice(1).join(':');
+
+            if (content.endsWith('\n')) {
+              content = content.slice(0, content.length - 1);
+            }
+
+            transformedChunk = `0:${content}\n`;
+          }
+
           // Convert the string stream to a byte stream
-          const str = typeof chunk === 'string' ? chunk : JSON.stringify(chunk);
+          const str = typeof transformedChunk === 'string' ? transformedChunk : JSON.stringify(transformedChunk);
           controller.enqueue(encoder.encode(str));
         },
       }),

app/utils/markdown.ts

@@ -61,7 +61,13 @@ const rehypeSanitizeOptions: RehypeSanitizeOptions = {
   tagNames: allowedHTMLElements,
   attributes: {
     ...defaultSchema.attributes,
-    div: [...(defaultSchema.attributes?.div ?? []), 'data*', ['className', '__boltArtifact__']],
+    div: [
+      ...(defaultSchema.attributes?.div ?? []),
+      'data*',
+      ['className', '__boltArtifact__', '__boltThought__'],
+
+      // ['className', '__boltThought__']
+    ],
   },
   strip: [],
 };

package.json

@@ -33,9 +33,10 @@
     "@ai-sdk/amazon-bedrock": "1.0.6",
     "@ai-sdk/anthropic": "^0.0.39",
     "@ai-sdk/cohere": "^1.0.3",
+    "@ai-sdk/deepseek": "^0.1.3",
     "@ai-sdk/google": "^0.0.52",
     "@ai-sdk/mistral": "^0.0.43",
-    "@ai-sdk/openai": "^0.0.66",
+    "@ai-sdk/openai": "^1.1.2",
     "@codemirror/autocomplete": "^6.18.3",
     "@codemirror/commands": "^6.7.1",
     "@codemirror/lang-cpp": "^6.0.2",
@@ -75,7 +76,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",
     "@xterm/xterm": "^5.5.0",
-    "ai": "^4.0.13",
+    "ai": "^4.1.2",
     "chalk": "^5.4.1",
     "date-fns": "^3.6.0",
     "diff": "^5.2.0",
@@ -131,7 +132,7 @@
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^2.1.7",
     "wrangler": "^3.91.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "resolutions": {
     "@typescript-eslint/utils": "^8.0.0-alpha.30"