Add DeepSeek and LMStudio providers

- Integrate DeepSeek and LMStudio AI providers
- Add message processing utilities for improved handling
- Implement reasoning panel for message actions
- Add logging functionality to UI
- Update configurations and dependencies

ui/components/MessageBox.tsx

@@ -4,6 +4,7 @@
 import React, { MutableRefObject, useEffect, useState } from 'react';
 import { Message } from './ChatWindow';
 import { cn } from '@/lib/utils';
+import logger from '@/lib/logger';
 import {
   BookCopy,
   Disc3,
@@ -12,6 +13,7 @@ import {
   Layers3,
   Plus,
 } from 'lucide-react';
+import ReasoningPanel from './MessageActions/ReasoningPanel';
 import Markdown from 'markdown-to-jsx';
 import Copy from './MessageActions/Copy';
 import Rewrite from './MessageActions/Rewrite';
@@ -41,26 +43,66 @@ const MessageBox = ({
 }) => {
   const [parsedMessage, setParsedMessage] = useState(message.content);
   const [speechMessage, setSpeechMessage] = useState(message.content);
+  const [thinking, setThinking] = useState<string>('');
+  const [isThinkingExpanded, setIsThinkingExpanded] = useState(true);
 
   useEffect(() => {
+    logger.info(`Processing message:`, {
+      content: message.content,
+      role: message.role,
+      messageId: message.messageId
+    });
+
     const regex = /\[(\d+)\]/g;
+    const thinkRegex = /<think>(.*?)(?:<\/think>|$)(.*)/s;
 
-    if (
-      message.role === 'assistant' &&
-      message?.sources &&
-      message.sources.length > 0
-    ) {
-      return setParsedMessage(
-        message.content.replace(
-          regex,
-          (_, number) =>
-            `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
-        ),
-      );
+    // Check for thinking content, including partial tags
+    const match = message.content.match(thinkRegex);
+    logger.info(`Think tag match:`, match);
+
+    if (match) {
+      const [_, thinkingContent, answerContent] = match;
+      
+      // Set thinking content even if </think> hasn't appeared yet
+      if (thinkingContent) {
+        logger.info(`Found thinking content:`, thinkingContent.trim());
+        setThinking(thinkingContent.trim());
+        setIsThinkingExpanded(true);  // Expand when thinking starts
+      }
+
+      // Only set answer content if we have it (after </think>)
+      if (answerContent) {
+        logger.info(`Found answer content:`, answerContent.trim());
+        setIsThinkingExpanded(false);  // Collapse when thinking is done
+        // Process the answer part for sources if needed
+        if (message.role === 'assistant' && message?.sources && message.sources.length > 0) {
+          setParsedMessage(
+            answerContent.trim().replace(
+              regex,
+              (_, number) =>
+                `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
+            ),
+          );
+        } else {
+          setParsedMessage(answerContent.trim());
+        }
+        setSpeechMessage(answerContent.trim().replace(regex, ''));
+      }
+    } else {
+      // No thinking content - process as before
+      if (message.role === 'assistant' && message?.sources && message.sources.length > 0) {
+        setParsedMessage(
+          message.content.replace(
+            regex,
+            (_, number) =>
+              `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
+          ),
+        );
+      } else {
+        setParsedMessage(message.content);
+      }
+      setSpeechMessage(message.content.replace(regex, ''));
     }
-
-    setSpeechMessage(message.content.replace(regex, ''));
-    setParsedMessage(message.content);
   }, [message.content, message.sources, message.role]);
 
   const { speechStatus, start, stop } = useSpeech({ text: speechMessage });
@@ -81,6 +123,7 @@ const MessageBox = ({
             ref={dividerRef}
             className="flex flex-col space-y-6 w-full lg:w-9/12"
           >
+            {thinking && <ReasoningPanel thinking={thinking} isExpanded={isThinkingExpanded} />}
             {message.sources && message.sources.length > 0 && (
               <div className="flex flex-col space-y-2">
                 <div className="flex flex-row items-center space-x-2">