From 7edb624bdc1fe40692561c97b6cdc98b0e3e7280 Mon Sep 17 00:00:00 2001
From: Yingjie He <yingjiehe@squareup.com>
Date: Mon, 3 Mar 2025 13:42:49 -0800
Subject: [PATCH] feat: improve the allow tool ui (#1473)

---
 ui/desktop/src/components/GooseMessage.tsx    | 12 ++-
 .../src/components/ToolCallConfirmation.tsx   | 82 +++++++++++++------
 ui/desktop/src/types/message.ts               | 15 +---
 3 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/ui/desktop/src/components/GooseMessage.tsx b/ui/desktop/src/components/GooseMessage.tsx
index 56ef805d..f41159ad 100644
--- a/ui/desktop/src/components/GooseMessage.tsx
+++ b/ui/desktop/src/components/GooseMessage.tsx
@@ -9,7 +9,7 @@ import {
   getTextContent,
   getToolRequests,
   getToolResponses,
-  getToolConfirmationRequestId,
+  getToolConfirmationContent,
 } from '../types/message';
 import ToolCallConfirmation from './ToolCallConfirmation';
 
@@ -36,7 +36,8 @@ export default function GooseMessage({ message, metadata, messages, append }: Go
   const previousUrls = previousMessage ? extractUrls(getTextContent(previousMessage)) : [];
   const urls = toolRequests.length === 0 ? extractUrls(textContent, previousUrls) : [];
 
-  const [toolConfirmationId, hasToolConfirmation] = getToolConfirmationRequestId(message);
+  const toolConfirmationContent = getToolConfirmationContent(message);
+  const hasToolConfirmation = toolConfirmationContent !== undefined;
 
   // Find tool responses that correspond to the tool requests in this message
   const toolResponsesMap = useMemo(() => {
@@ -72,7 +73,12 @@ export default function GooseMessage({ message, metadata, messages, append }: Go
           </div>
         )}
 
-        {hasToolConfirmation && <ToolCallConfirmation toolConfirmationId={toolConfirmationId} />}
+        {hasToolConfirmation && (
+          <ToolCallConfirmation
+            toolConfirmationId={toolConfirmationContent.id}
+            toolName={toolConfirmationContent.toolName}
+          />
+        )}
 
         {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">
diff --git a/ui/desktop/src/components/ToolCallConfirmation.tsx b/ui/desktop/src/components/ToolCallConfirmation.tsx
index 32418b83..1c3daa88 100644
--- a/ui/desktop/src/components/ToolCallConfirmation.tsx
+++ b/ui/desktop/src/components/ToolCallConfirmation.tsx
@@ -1,11 +1,15 @@
 import React, { useState } from 'react';
 import { ConfirmToolRequest } from '../utils/toolConfirm';
+import { snakeToTitleCase } from '../utils';
+import Box from './ui/Box';
 
-export default function ToolConfirmation({ toolConfirmationId }) {
-  const [disabled, setDisabled] = useState(false);
+export default function ToolConfirmation({ toolConfirmationId, toolName }) {
+  const [clicked, setClicked] = useState(false);
+  const [status, setStatus] = useState('');
 
   const handleButtonClick = (confirmed) => {
-    setDisabled(true);
+    setClicked(true);
+    setStatus(confirmed ? 'approved' : 'denied');
     ConfirmToolRequest(toolConfirmationId, confirmed);
   };
 
@@ -14,26 +18,58 @@ export default function ToolConfirmation({ toolConfirmationId }) {
       <div className="goose-message-content bg-bgSubtle rounded-2xl px-4 py-2 rounded-b-none">
         Goose would like to call the above tool. Allow?
       </div>
-      <div className="goose-message-tool bg-bgApp border border-borderSubtle dark:border-gray-700 rounded-b-2xl px-4 pt-4 pb-2 flex gap-4 mt-1">
-        <button
-          className={
-            'bg-black text-white dark:bg-white dark:text-black rounded-full px-6 py-2 transition'
-          }
-          onClick={() => handleButtonClick(true)}
-          disabled={disabled}
-        >
-          Allow tool
-        </button>
-        <button
-          className={
-            'bg-white text-black dark:bg-black dark:text-white border border-gray-300 dark:border-gray-700 rounded-full px-6 py-2 transition'
-          }
-          onClick={() => handleButtonClick(false)}
-          disabled={disabled}
-        >
-          Deny
-        </button>
-      </div>
+      {clicked ? (
+        <div className="goose-message-tool bg-bgApp border border-borderSubtle dark:border-gray-700 rounded-b-2xl px-4 pt-4 pb-2 flex gap-4 mt-1">
+          <div className="flex items-center">
+            {status === 'approved' && (
+              <svg
+                className="w-5 h-5 text-gray-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+            )}
+            {status === 'denied' && (
+              <svg
+                className="w-5 h-5 text-gray-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            )}
+            <span className="ml-2 text-gray-500 dark:text-gray-400">
+              {snakeToTitleCase(toolName.substring(toolName.lastIndexOf('__') + 2))} is {status}
+            </span>
+          </div>
+        </div>
+      ) : (
+        <div className="goose-message-tool bg-bgApp border border-borderSubtle dark:border-gray-700 rounded-b-2xl px-4 pt-4 pb-2 flex gap-4 mt-1">
+          <button
+            className={
+              'bg-black text-white dark:bg-white dark:text-black rounded-full px-6 py-2 transition'
+            }
+            onClick={() => handleButtonClick(true)}
+          >
+            Allow tool
+          </button>
+          <button
+            className={
+              'bg-white text-black dark:bg-black dark:text-white border border-gray-300 dark:border-gray-700 rounded-full px-6 py-2 transition'
+            }
+            onClick={() => handleButtonClick(false)}
+          >
+            Deny
+          </button>
+        </div>
+      )}
     </>
   );
 }
diff --git a/ui/desktop/src/types/message.ts b/ui/desktop/src/types/message.ts
index d03212bd..31e898aa 100644
--- a/ui/desktop/src/types/message.ts
+++ b/ui/desktop/src/types/message.ts
@@ -187,20 +187,13 @@ export function getToolResponses(message: Message): ToolResponseMessageContent[]
   );
 }
 
-export function getToolConfirmationRequestId(message: Message): [string, boolean] {
-  const hasToolConfirmationRequest = message.content.some(
+export function getToolConfirmationContent(
+  message: Message
+): ToolConfirmationRequestMessageContent {
+  return message.content.find(
     (content): content is ToolConfirmationRequestMessageContent =>
       content.type === 'toolConfirmationRequest'
   );
-
-  const contentId = hasToolConfirmationRequest
-    ? message.content.find(
-        (content): content is ToolConfirmationRequestMessageContent =>
-          content.type === 'toolConfirmationRequest'
-      )?.id || ''
-    : '';
-
-  return [contentId, hasToolConfirmationRequest];
 }
 
 export function hasCompletedToolCalls(message: Message): boolean {