[app] Layout improvments for messages and tool calls/results

ui/desktop/src/ChatWindow.tsx

@@ -12,7 +12,7 @@ import Tabs from './components/Tabs';
 import MoreMenu from './components/MoreMenu';
 import { Bird } from './components/ui/icons';
 import LoadingGoose from './components/LoadingGoose';
-
+// import fakeToolInvocations from './fixtures/tool-calls-and-results.json';
 
 export interface Chat {
   id: number;
@@ -115,6 +115,8 @@ function ChatContent({
     },
   });
 
+  // const messages = fakeToolInvocations;
+
   // Update chat messages when they change
   useEffect(() => {
     const updatedChats = chats.map((c) =>

ui/desktop/src/components/GooseMessage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import ToolInvocation from './ToolInvocation';
 import ReactMarkdown from 'react-markdown';
+import ToolInvocations from './ToolInvocations';
 import LinkPreview from './LinkPreview';
 import GooseResponseForm from './GooseResponseForm';
 import { extractUrls } from '../utils/urlUtils';
@@ -22,44 +22,37 @@ export default function GooseMessage({ message, metadata, messages, append }: Go
   const previousUrls = previousMessage ? extractUrls(previousMessage.content) : [];
   const urls = !message.toolInvocations ? extractUrls(message.content, previousUrls) : [];
 
-  console.log("message", message.content)
-
   return (
-    <div className="flex">
-      <div className="flex flex-col">
+    <div className="flex justify-start mb-[16px]">
+      <div className="flex-col">
         {message.toolInvocations && (
-          <div className="bg-goose-bubble max-w-[100%] overflow-hidden text-white rounded-2xl p-4 mb-[16px]">
-            <div className="space-y-4">
-              {message.toolInvocations.map((toolInvocation) => (
-                <ToolInvocation
-                  key={toolInvocation.toolCallId}
-                  toolInvocation={toolInvocation}
-                />
-              ))}
-            </div>
+          <div className="flex bg-goose-bubble text-white rounded-2xl p-4 pb-0 mb-[16px]">
+            <ToolInvocations toolInvocations={message.toolInvocations} />
           </div>
         )}
 
         {message.content && (
-          <div className="bg-goose-bubble max-w-[100%] overflow-hidden text-white rounded-2xl p-4 mb-[16px]">
+          <div className="flex bg-goose-bubble text-white rounded-2xl p-4 mb-[16px]">
             <ReactMarkdown className="prose prose-xs">{message.content}</ReactMarkdown>
           </div>
         )}
 
         {urls.length > 0 && (
-          <div className="mt-2">
+          <div className="flex mb-[16px]">
             {urls.map((url, index) => (
               <LinkPreview key={index} url={url} />
             ))}
           </div>
         )}
 
         {metadata && (
+          <div className="flex mb-[16px]">
             <GooseResponseForm
               message={message.content}
               metadata={metadata}
               append={append}
             />
+          </div>
         )}
       </div>
     </div>