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

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

ui/desktop/openapi.json

@@ -5042,6 +5042,27 @@
                 }
               }
             ]
+          },
+          {
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/ReasoningContent"
+              },
+              {
+                "type": "object",
+                "required": [
+                  "type"
+                ],
+                "properties": {
+                  "type": {
+                    "type": "string",
+                    "enum": [
+                      "reasoning"
+                    ]
+                  }
+                }
+              }
+            ]
           }
         ],
         "description": "Content passed inside a message, which can be both simple content and tool content",
@@ -5724,6 +5745,17 @@
           }
         }
       },
+      "ReasoningContent": {
+        "type": "object",
+        "required": [
+          "text"
+        ],
+        "properties": {
+          "text": {
+            "type": "string"
+          }
+        }
+      },
       "Recipe": {
         "type": "object",
         "required": [

ui/desktop/src/api/types.gen.ts

@@ -564,6 +564,8 @@ export type MessageContent = (TextContent & {
     type: 'redactedThinking';
 }) | (SystemNotificationContent & {
     type: 'systemNotification';
+}) | (ReasoningContent & {
+    type: 'reasoning';
 });
 
 export type MessageEvent = {
@@ -833,6 +835,10 @@ export type ReadResourceResponse = {
     uri: string;
 };
 
+export type ReasoningContent = {
+    text: string;
+};
+
 export type Recipe = {
     activities?: Array<string> | null;
     author?: Author | null;

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' : ''}`}

ui/desktop/src/types/message.ts

@@ -97,6 +97,18 @@ export function getTextAndImageContent(message: Message): {
   return { textContent, imagePaths };
 }
 
+export function getReasoningContent(message: Message): string | null {
+  const reasoningContents = message.content
+    .filter((content) => content.type === 'reasoning')
+    .map((content) => {
+      if ('text' in content) return content.text;
+      return '';
+    })
+    .filter((text) => text.length > 0);
+
+  return reasoningContents.length > 0 ? reasoningContents.join('') : null;
+}
+
 export function getToolRequests(message: Message): (ToolRequest & { type: 'toolRequest' })[] {
   return message.content.filter(
     (content): content is ToolRequest & { type: 'toolRequest' } => content.type === 'toolRequest'