feat: added support for reasoning content (#1168)

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;