feat: enable extension from ui (#2117)

ui/desktop/src/components/ChatView.tsx

@@ -25,6 +25,7 @@ import {
   ToolResponseMessageContent,
   ToolConfirmationRequestMessageContent,
   getTextContent,
+  EnableExtensionRequestMessageContent,
 } from '../types/message';
 
 export interface ChatType {
@@ -49,10 +50,12 @@ const isUserMessage = (message: Message): boolean => {
   if (message.role === 'assistant') {
     return false;
   }
-
   if (message.content.every((c) => c.type === 'toolConfirmationRequest')) {
     return false;
   }
+  if (message.content.every((c) => c.type === 'enableExtensionRequest')) {
+    return false;
+  }  
   return true;
 };
 
@@ -312,6 +315,14 @@ export default function ChatView({
             return [content.id, toolCall];
           }
         });
+      const enableExtensionRequests = lastMessage.content
+        .filter(
+          (content): content is EnableExtensionRequestMessageContent =>
+            content.type === 'enableExtensionRequest'
+        )
+        .map((content) => {
+          return [content.id, content.extensionName];
+        });
 
       if (toolRequests.length !== 0) {
         // This means we were interrupted during a tool request
@@ -338,10 +349,33 @@ export default function ChatView({
 
           responseMessage.content.push(toolResponse);
         }
-
         // Use an immutable update to add the response message to the messages array
         setMessages([...messages, responseMessage]);
       }
+
+      // do the same for enable extension requests
+      // leverages toolResponse to send the error notification
+      if (enableExtensionRequests.length !== 0) {
+        let responseMessage: Message = {
+          role: 'user',
+          created: Date.now(),
+          content: [],
+        };
+        const notification = 'Interrupted by the user to make a correction';
+        // generate a response saying it was interrupted for each extension request
+        for (const [reqId, _] of enableExtensionRequests) {
+          const toolResponse: ToolResponseMessageContent = {
+            type: 'toolResponse',
+            id: reqId,
+            toolResult: {
+              status: 'error',
+              error: notification,
+            },
+          };
+          responseMessage.content.push(toolResponse);
+        }
+        setMessages([...messages, responseMessage]);
+      }
     }
   };
 
@@ -359,8 +393,9 @@ export default function ChatView({
         (c) => c.type === 'toolConfirmationRequest'
       );
 
+      const hasEnableExtension = message.content.every((c) => c.type === 'enableExtensionRequest');
       // Keep the message if it has text content or tool confirmation or is not just tool responses
-      return hasTextContent || !hasOnlyToolResponses || hasToolConfirmation;
+      return hasTextContent || !hasOnlyToolResponses || hasToolConfirmation || hasEnableExtension;
     }
 
     return true;

ui/desktop/src/components/ExtensionConfirmation.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { ConfirmExtensionRequest } from '../utils/extensionConfirm';
+import { snakeToTitleCase } from '../utils';
+
+export default function ExtensionConfirmation({
+  isCancelledMessage,
+  isClicked,
+  extensionConfirmationId,
+  extensionName,
+}) {
+  const [clicked, setClicked] = useState(isClicked);
+  const [status, setStatus] = useState('unknown');
+
+  const handleButtonClick = (confirmed) => {
+    setClicked(true);
+    setStatus(confirmed ? 'approved' : 'denied');
+    ConfirmExtensionRequest(extensionConfirmationId, confirmed);
+  };
+
+  return isCancelledMessage ? (
+    <div className="goose-message-content bg-bgSubtle rounded-2xl px-4 py-2 text-textStandard">
+      Extension enablement is cancelled.
+    </div>
+  ) : (
+    <>
+      <div className="goose-message-content bg-bgSubtle rounded-2xl px-4 py-2 rounded-b-none text-textStandard">
+        Goose would like to enable the above extension. Allow?
+      </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-textStandard">
+              {isClicked
+                ? 'Extension enablement is not available'
+                : `${snakeToTitleCase(extensionName.includes('__') ? extensionName.split('__').pop() : extensionName)} 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)}
+          >
+            Enable extension
+          </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>
+      )}
+    </>
+  );
+}

ui/desktop/src/components/GooseMessage.tsx

@@ -11,9 +11,11 @@ import {
   getToolResponses,
   getToolConfirmationContent,
   createToolErrorResponseMessage,
+  getEnableExtensionContent,
 } from '../types/message';
 import ToolCallConfirmation from './ToolCallConfirmation';
 import MessageCopyLink from './MessageCopyLink';
+import ExtensionConfirmation from './ExtensionConfirmation';
 
 interface GooseMessageProps {
   messageHistoryIndex: number;
@@ -52,6 +54,9 @@ export default function GooseMessage({
   const toolConfirmationContent = getToolConfirmationContent(message);
   const hasToolConfirmation = toolConfirmationContent !== undefined;
 
+  const enableExtensionContent = getEnableExtensionContent(message);
+  const hasEnableExtension = enableExtensionContent !== undefined;
+
   // Find tool responses that correspond to the tool requests in this message
   const toolResponsesMap = useMemo(() => {
     const responseMap = new Map();
@@ -86,12 +91,23 @@ export default function GooseMessage({
         createToolErrorResponseMessage(toolConfirmationContent.id, 'The tool call is cancelled.')
       );
     }
+    if (messageIndex == messageHistoryIndex - 1 && hasEnableExtension) {
+      appendMessage(
+        createToolErrorResponseMessage(
+          enableExtensionContent.id,
+          'The extension enablement is cancelled.'
+        )
+      );
+    }
   }, [
     messageIndex,
     messageHistoryIndex,
     hasToolConfirmation,
     toolConfirmationContent,
     appendMessage,
+    hasEnableExtension,
+    // Only include enableExtensionContent if it exists
+    enableExtensionContent?.id,
   ]);
 
   return (
@@ -140,6 +156,15 @@ export default function GooseMessage({
             toolName={toolConfirmationContent.toolName}
           />
         )}
+
+        {hasEnableExtension && (
+          <ExtensionConfirmation
+            isCancelledMessage={messageIndex == messageHistoryIndex - 1}
+            isClicked={messageIndex < messageHistoryIndex - 1}
+            extensionConfirmationId={enableExtensionContent.id}
+            extensionName={enableExtensionContent.extensionName}
+          />
+        )}
       </div>
 
       {/* TODO(alexhancock): Re-enable link previews once styled well again */}