feat: reasoning_content in API for reasoning models (#6322)

Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>

ui/desktop/src/components/GooseMessage.tsx

@@ -5,6 +5,7 @@ import MarkdownContent from './MarkdownContent';
 import ToolCallWithResponse from './ToolCallWithResponse';
 import {
   getTextAndImageContent,
+  getReasoningContent,
   getToolRequests,
   getToolResponses,
   getToolConfirmationContent,
@@ -47,6 +48,7 @@ export default function GooseMessage({
   const contentRef = useRef<HTMLDivElement | null>(null);
 
   let { textContent, imagePaths } = getTextAndImageContent(message);
+  const reasoningContent = getReasoningContent(message);
 
   const splitChainOfThought = (text: string): { displayText: string; cotText: string | null } => {
     const regex = /<think>([\s\S]*?)<\/think>/i;
@@ -129,6 +131,17 @@ export default function GooseMessage({
   return (
     <div className="goose-message flex w-[90%] justify-start min-w-0">
       <div className="flex flex-col w-full min-w-0">
+        {reasoningContent && (
+          <details className="mb-2">
+            <summary className="cursor-pointer text-xs text-textSubtle select-none">
+              Show reasoning
+            </summary>
+            <div className="mt-2 text-sm">
+              <MarkdownContent content={reasoningContent} />
+            </div>
+          </details>
+        )}
+
         {cotText && (
           <details className="bg-background-muted border border-border-default rounded p-2 mb-2">
             <summary className="cursor-pointer text-sm text-text-muted select-none">

ui/desktop/src/components/sessions/SessionViewComponents.tsx

@@ -8,6 +8,7 @@ import ToolCallWithResponse from '../ToolCallWithResponse';
 import ImagePreview from '../ImagePreview';
 import {
   getTextAndImageContent,
+  getReasoningContent,
   ToolRequestMessageContent,
   ToolResponseMessageContent,
 } from '../../types/message';
@@ -82,6 +83,7 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
               messages
                 .map((message, index) => {
                   const { textContent, imagePaths } = getTextAndImageContent(message);
+                  const reasoningContent = getReasoningContent(message);
 
                   // Get tool requests from the message
                   const toolRequests = message.content
@@ -119,6 +121,19 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
                       </div>
 
                       <div className="flex flex-col w-full">
+                        {/* Reasoning content */}
+                        {reasoningContent && (
+                          <details className="mb-2">
+                            <summary className="cursor-pointer text-xs text-textSubtle select-none">
+                              Show reasoning
+                            </summary>
+                            <div className="mt-2 text-sm">
+                              <MarkdownContent content={reasoningContent} />
+                            </div>
+                          </details>
+                        )}
+
+                        {/* Text content */}
                         {textContent && (
                           <div
                             className={`${toolRequests.length > 0 || imagePaths.length > 0 ? 'mb-4' : ''}`}