From 3257262410d0b56dfedb5a2f631d48ffac1d023a Mon Sep 17 00:00:00 2001
From: Alex Hancock <alexhancock@block.xyz>
Date: Thu, 20 Mar 2025 12:08:51 -0400
Subject: [PATCH] fix: #1562 - Only show text portion of goose message if there
 is text to display (#1791)

---
 ui/desktop/openapi.json                    |  8 ++++++++
 ui/desktop/src/api/types.gen.ts            |  2 ++
 ui/desktop/src/components/ChatView.tsx     |  8 ++++++++
 ui/desktop/src/components/GooseMessage.tsx | 11 +++++------
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/ui/desktop/openapi.json b/ui/desktop/openapi.json
index e05b755f..867e7e56 100644
--- a/ui/desktop/openapi.json
+++ b/ui/desktop/openapi.json
@@ -320,6 +320,10 @@
               "type"
             ],
             "properties": {
+              "description": {
+                "type": "string",
+                "nullable": true
+              },
               "envs": {
                 "$ref": "#/components/schemas/Envs"
               },
@@ -363,6 +367,10 @@
               "cmd": {
                 "type": "string"
               },
+              "description": {
+                "type": "string",
+                "nullable": true
+              },
               "envs": {
                 "$ref": "#/components/schemas/Envs"
               },
diff --git a/ui/desktop/src/api/types.gen.ts b/ui/desktop/src/api/types.gen.ts
index 06f4901f..e24ff62d 100644
--- a/ui/desktop/src/api/types.gen.ts
+++ b/ui/desktop/src/api/types.gen.ts
@@ -24,6 +24,7 @@ export type Envs = {
  * Represents the different types of MCP extensions that can be added to the manager
  */
 export type ExtensionConfig = {
+    description?: string | null;
     envs?: Envs;
     /**
      * The name used to identify this extension
@@ -35,6 +36,7 @@ export type ExtensionConfig = {
 } | {
     args: Array<string>;
     cmd: string;
+    description?: string | null;
     envs?: Envs;
     /**
      * The name used to identify this extension
diff --git a/ui/desktop/src/components/ChatView.tsx b/ui/desktop/src/components/ChatView.tsx
index 511e18ed..df272050 100644
--- a/ui/desktop/src/components/ChatView.tsx
+++ b/ui/desktop/src/components/ChatView.tsx
@@ -94,6 +94,14 @@ export default function ChatView({
     },
   });
 
+  // Leaving these in for easy debugging of different message states
+
+  // One message with a tool call and no text content
+  // const messages = [{"role":"assistant","created":1742484893,"content":[{"type":"toolRequest","id":"call_udVcu3crnFdx2k5FzlAjk5dI","toolCall":{"status":"success","value":{"name":"developer__text_editor","arguments":{"command":"write","file_text":"Hello, this is a test file.\nLet's see if this works properly.","path":"/Users/alexhancock/Development/testfile.txt"}}}}]}];
+
+  // One message with text content and tool calls
+  // const messages = [{"role":"assistant","created":1742484388,"content":[{"type":"text","text":"Sure, let's break this down into two steps:\n\n1. **Write content to a `.txt` file.**\n2. **Read the content from the `.txt` file.**\n\nLet's start by writing some example content to a `.txt` file. I'll create a file named `example.txt` and write a sample sentence into it. Then I'll read the content back. \n\n### Sample Content\nWe'll write the following content into the `example.txt` file:\n\n```\nHello World! This is an example text file.\n```\n\nLet's proceed with this task."},{"type":"toolRequest","id":"call_CmvAsxMxiWVKZvONZvnz4QCE","toolCall":{"status":"success","value":{"name":"developer__text_editor","arguments":{"command":"write","file_text":"Hello World! This is an example text file.","path":"/Users/alexhancock/Development/example.txt"}}}}]}];
+
   // Update chat messages when they change and save to sessionStorage
   useEffect(() => {
     setChat((prevChat) => {
diff --git a/ui/desktop/src/components/GooseMessage.tsx b/ui/desktop/src/components/GooseMessage.tsx
index 3419be8b..72b79a92 100644
--- a/ui/desktop/src/components/GooseMessage.tsx
+++ b/ui/desktop/src/components/GooseMessage.tsx
@@ -87,15 +87,12 @@ export default function GooseMessage({
   return (
     <div className="goose-message flex w-[90%] justify-start opacity-0 animate-[appear_150ms_ease-in_forwards]">
       <div className="flex flex-col w-full">
-        {/* Always show the top content area if there are tool calls, even if textContent is empty */}
-        {(textContent || toolRequests.length > 0) && (
+        {textContent && (
           <div className="flex flex-col group">
             <div
               className={`goose-message-content bg-bgSubtle rounded-2xl px-4 py-2 ${toolRequests.length > 0 ? 'rounded-b-none' : ''}`}
             >
-              <div ref={contentRef}>
-                {textContent ? <MarkdownContent content={textContent} /> : null}
-              </div>
+              <div ref={contentRef}>{<MarkdownContent content={textContent} />}</div>
             </div>
             {/* Only show MessageCopyLink if there's text content and no tool requests/responses */}
             {textContent && message.content.every((content) => content.type === 'text') && (
@@ -107,7 +104,9 @@ export default function GooseMessage({
         )}
 
         {toolRequests.length > 0 && (
-          <div className="goose-message-tool bg-bgApp border border-borderSubtle dark:border-gray-700 rounded-b-2xl px-4 pt-4 pb-2 mt-1">
+          <div
+            className={`goose-message-tool bg-bgApp border border-borderSubtle dark:border-gray-700 ${textContent ? '' : 'rounded-t-2xl'} rounded-b-2xl px-4 pt-4 pb-2 mt-1`}
+          >
             {toolRequests.map((toolRequest) => (
               <ToolCallWithResponse
                 // If the message is resumed and not matched tool response, it means the tool is broken or cancelled.