feat: added support for reasoning content

[thecodacus]

Add Thought Process Box Component and DeepSeek Integration

Overview

This PR introduces a collapsible thought process box component to display AI reasoning and integrates the DeepSeek AI provider. It also includes minor fixes for LM Studio provider configuration and package updates.

Key Changes

1. Thought Process Box Component

• Added new ThoughtBox React component for displaying AI reasoning in a collapsible format
• Integrated thought box rendering in the Markdown component
• Implemented styling using Tailwind CSS with a clean, modern design

2. AI Provider Updates

• Integrated DeepSeek AI provider with proper SDK configuration
• Updated LM Studio provider to use correct baseURL parameter
• Updated AI-related package dependencies

Technical Details

ThoughtBox Component

Key technical implementation details:

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
      `}
    >
      {/* Component implementation */}
    </div>
  );
};

Markdown Component Integration

Added thought box processing in the Markdown component:

div: ({ className, children, node, ...props }) => {
  if (className?.includes('__boltThought__')) {
    return <ThoughtBox title="Thought process">{children}</ThoughtBox>;
  }
  // ... rest of the component
}

DeepSeek Integration

Updated provider implementation:

export default class DeepseekProvider extends BaseProvider {
  name = 'Deepseek';
  
  createModel(model: string): LanguageModelV1 {
    const apiKey = this.getApiKey();
    
    const deepseek = createDeepSeek({
      apiKey,
    });

    return deepseek(model);
  }
}

System Changes

• Modified chat API to handle thought process markers in the stream
• Updated sanitization rules to allow thought box class names
• Added proper stream transformation for thought process content

Stream transformation implementation:

.pipeThrough(
  new TransformStream({
    transform: (chunk, controller) => {
      if (!lastChunk) {
        lastChunk = ' ';
      }

      if (typeof chunk === 'string') {
        // Add opening thought box div when thought content starts
        if (chunk.startsWith('g') && !lastChunk.startsWith('g')) {
          controller.enqueue(encoder.encode(`0: "<div class=\\"__boltThought__\\">"\n`));
        }

        // Add closing thought box div when thought content ends
        if (lastChunk.startsWith('g') && !chunk.startsWith('g')) {
          controller.enqueue(encoder.encode(`0: "</div>\\n"\n`));
        }
      }

      lastChunk = chunk;

      let transformedChunk = chunk;

      // Transform thought content chunks
      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 to byte stream
      const str = typeof transformedChunk === 'string' ? transformedChunk : JSON.stringify(transformedChunk);
      controller.enqueue(encoder.encode(str));
    },
  }),
)

Testing

• Unit test coverage added for ThoughtBox component
• Integration tests for thought process rendering in chat
• Verified DeepSeek API integration
• Tested collapsible behavior and styling across browsers

Migration Impact

• No breaking changes to existing functionality
• AI provider updates are backward compatible
• No database migrations required

Future Improvements

• Add customization options for thought box appearance
• Add more configuration options for DeepSeek integration

Preview

demo.mov

[leex279]

Nice work, thanks. Testet it out and works fine.