feat: support goose mode in UI (#1434)

Co-authored-by: Lily Delalande <ldelalande@squareup.com>
2025-02-28 17:00:41 -08:00
parent 8f5fba97b8
commit f7f2540287
16 changed files with 320 additions and 19 deletions
@@ -16,6 +16,7 @@
        "@radix-ui/react-avatar": "^1.1.1",
        "@radix-ui/react-dialog": "^1.1.4",
        "@radix-ui/react-icons": "^1.3.1",
+        "@radix-ui/react-radio-group": "^1.2.3",
        "@radix-ui/react-scroll-area": "^1.2.0",
        "@radix-ui/react-select": "^2.1.5",
        "@radix-ui/react-slot": "^1.1.1",
@@ -72,6 +72,7 @@
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-icons": "^1.3.1",
+    "@radix-ui/react-radio-group": "^1.2.3",
    "@radix-ui/react-scroll-area": "^1.2.0",
    "@radix-ui/react-select": "^2.1.5",
    "@radix-ui/react-slot": "^1.1.1",
@@ -167,14 +167,28 @@ export default function ChatView({ setView }: { setView: (view: View) => void })
    if (message.role === 'user') {
      const hasOnlyToolResponses = message.content.every((c) => c.type === 'toolResponse');
      const hasTextContent = message.content.some((c) => c.type === 'text');
+      const hasToolConfirmation = message.content.every(
+        (c) => c.type === 'toolConfirmationRequest'
+      );

-      // Keep the message if it has text content or is not just tool responses
-      return hasTextContent || !hasOnlyToolResponses;
+      // Keep the message if it has text content or tool confirmation or is not just tool responses
+      return hasTextContent || !hasOnlyToolResponses || hasToolConfirmation;
    }

    return true;
  });

+  const isUserMessage = (message: Message) => {
+    if (message.role === 'assistant') {
+      return false;
+    }
+
+    if (message.content.every((c) => c.type === 'toolConfirmationRequest')) {
+      return false;
+    }
+    return true;
+  };
+
  return (
    <div className="flex flex-col w-full h-screen items-center justify-center">
      <div className="relative flex items-center h-[36px] w-full bg-bgSubtle border-b border-borderSubtle">
@@ -187,7 +201,7 @@ export default function ChatView({ setView }: { setView: (view: View) => void })
          <ScrollArea ref={scrollRef} className="flex-1 px-4" autoScroll>
            {filteredMessages.map((message, index) => (
              <div key={message.id || index} className="mt-[16px]">
-                {message.role === 'user' ? (
+                {isUserMessage(message) ? (
                  <UserMessage message={message} />
                ) : (
                  <GooseMessage
@@ -4,7 +4,14 @@ import GooseResponseForm from './GooseResponseForm';
 import { extractUrls } from '../utils/urlUtils';
 import MarkdownContent from './MarkdownContent';
 import ToolCallWithResponse from './ToolCallWithResponse';
-import { Message, getTextContent, getToolRequests, getToolResponses } from '../types/message';
+import {
+  Message,
+  getTextContent,
+  getToolRequests,
+  getToolResponses,
+  getToolConfirmationRequestId,
+} from '../types/message';
+import ToolCallConfirmation from './ToolCallConfirmation';

 interface GooseMessageProps {
  message: Message;
@@ -15,7 +22,7 @@ interface GooseMessageProps {

 export default function GooseMessage({ message, metadata, messages, append }: GooseMessageProps) {
  // Extract text content from the message
-  const textContent = getTextContent(message);
+  let textContent = getTextContent(message);

  // Get tool requests from the message
  const toolRequests = getToolRequests(message);
@@ -29,6 +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);
+
  // Find tool responses that correspond to the tool requests in this message
  const toolResponsesMap = useMemo(() => {
    const responseMap = new Map();
@@ -63,6 +72,8 @@ export default function GooseMessage({ message, metadata, messages, append }: Go
          </div>
        )}

+        {hasToolConfirmation && <ToolCallConfirmation toolConfirmationId={toolConfirmationId} />}
+
        {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">
            {toolRequests.map((toolRequest) => (
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { ConfirmToolRequest } from '../utils/toolConfirm';
+
+export default function ToolConfirmation({ toolConfirmationId }) {
+  const [disabled, setDisabled] = useState(false);
+
+  const handleButtonClick = (confirmed) => {
+    setDisabled(true);
+    ConfirmToolRequest(toolConfirmationId, confirmed);
+  };
+
+  return (
+    <>
+      <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>
+    </>
+  );
+}
@@ -80,6 +80,9 @@ function ToolResultView({ result }: ToolResultViewProps) {

  // Find results where either audience is not set, or it's set to a list that includes user
  const filteredResults = result.filter((item) => {
+    if (!item.annotations) {
+      return false;
+    }
    // Check audience (which may not be in the type)
    const audience = item.annotations?.audience;

@@ -15,6 +15,8 @@ import BackButton from '../ui/BackButton';
 import { RecentModelsRadio } from './models/RecentModels';
 import { ExtensionItem } from './extensions/ExtensionItem';
 import type { View } from '../../App';
+import ModeSelection from './basic/ModeSelection';
+import { getApiUrl, getSecretKey } from '../../config';

 const EXTENSIONS_DESCRIPTION =
  'The Model Context Protocol (MCP) is a system that allows AI models to securely connect with local or remote resources using standard server setups. It works like a client-server setup and expands AI capabilities using three main components: Prompts, Resources, and Tools.';
@@ -60,6 +62,53 @@ export default function SettingsView({
  setView: (view: View) => void;
  viewOptions: SettingsViewOptions;
 }) {
+  const [mode, setMode] = useState('approve');
+
+  const handleModeChange = async (newMode: string) => {
+    const storeResponse = await fetch(getApiUrl('/configs/store'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Secret-Key': getSecretKey(),
+      },
+      body: JSON.stringify({
+        key: 'GOOSE_MODE',
+        value: newMode,
+        isSecret: false,
+      }),
+    });
+
+    if (!storeResponse.ok) {
+      const errorText = await storeResponse.text();
+      console.error('Store response error:', errorText);
+      throw new Error(`Failed to store new goose mode: ${newMode}`);
+    }
+    setMode(newMode);
+  };
+
+  useEffect(() => {
+    const fetchCurrentMode = async () => {
+      try {
+        const response = await fetch(getApiUrl('/configs/get?key=GOOSE_MODE'), {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Secret-Key': getSecretKey(),
+          },
+        });
+
+        if (response.ok) {
+          const { value } = await response.json();
+          setMode(value);
+        }
+      } catch (error) {
+        console.error('Error fetching current mode:', error);
+      }
+    };
+
+    fetchCurrentMode();
+  }, []);
+
  const [settings, setSettings] = React.useState<SettingsType>(() => {
    const saved = localStorage.getItem('user_settings');
    window.electron.logInfo('Settings: ' + saved);
@@ -84,7 +133,7 @@ export default function SettingsView({
  const [isManualModalOpen, setIsManualModalOpen] = useState(false);

  // Persist settings changes
-  React.useEffect(() => {
+  useEffect(() => {
    localStorage.setItem('user_settings', JSON.stringify(settings));
  }, [settings]);

@@ -255,6 +304,20 @@ export default function SettingsView({
                  )}
                </div>
              </section>
+
+              <section id="others">
+                <div className="flex justify-between items-center mb-6 border-b border-borderSubtle px-8">
+                  <h2 className="text-xl font-semibold text-textStandard">Others</h2>
+                </div>
+
+                <div className="px-8">
+                  <p className="text-sm text-textStandard mb-4">
+                    Others setting like Goose Mode, Tool Output, Experiment and more
+                  </p>
+
+                  <ModeSelection value={mode} onChange={handleModeChange} />
+                </div>
+              </section>
            </div>
          </div>
        </div>
@@ -0,0 +1,50 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import React from 'react';
+
+const ModeSelection = ({ value, onChange }) => {
+  const modes = [
+    {
+      value: 'auto',
+      label: 'Completely autonomous',
+      description: 'Full file modification capabilities, edit, create, and delete files freely.',
+    },
+    {
+      value: 'approve',
+      label: 'Approval needed',
+      description: 'Editing, creating, and deleting files will require human approval.',
+    },
+    {
+      value: 'chat',
+      label: 'Chat only',
+      description: 'Engage with the selected provider without using tools or extensions.',
+    },
+  ];
+
+  return (
+    <div>
+      <h4 className="font-medium mb-4">Mode Selection</h4>
+
+      <RadioGroup.Root className="flex flex-col space-y-2" value={value} onValueChange={onChange}>
+        {modes.map((mode) => (
+          <RadioGroup.Item
+            key={mode.value}
+            value={mode.value}
+            className="flex items-center justify-between p-2 hover:bg-gray-100 rounded transition-all cursor-pointer"
+          >
+            <div className="flex flex-col text-left">
+              <h3 className="text-sm font-semibold text-textStandard">{mode.label}</h3>
+              <p className="text-xs text-textSubtle mt-[2px]">{mode.description}</p>
+            </div>
+            <div className="flex-shrink-0">
+              <div className="w-4 h-4 flex items-center justify-center rounded-full border border-gray-500">
+                {value === mode.value && <div className="w-2 h-2 bg-black rounded-full" />}
+              </div>
+            </div>
+          </RadioGroup.Item>
+        ))}
+      </RadioGroup.Root>
+    </div>
+  );
+};
+
+export default ModeSelection;
@@ -187,6 +187,22 @@ export function getToolResponses(message: Message): ToolResponseMessageContent[]
  );
 }

+export function getToolConfirmationRequestId(message: Message): [string, boolean] {
+  const hasToolConfirmationRequest = message.content.some(
+    (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 {
  const toolRequests = getToolRequests(message);
  if (toolRequests.length === 0) return false;
@@ -0,0 +1,25 @@
+import { getApiUrl, getSecretKey } from '../config';
+
+export async function ConfirmToolRequest(requesyId: string, confirmed: boolean) {
+  try {
+    const response = await fetch(getApiUrl('/confirm'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Secret-Key': getSecretKey(),
+      },
+      body: JSON.stringify({
+        id: requesyId,
+        confirmed,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Delete response error: ', errorText);
+      throw new Error('Failed to confirm tool');
+    }
+  } catch (error) {
+    console.error('Error confirm tool: ', error);
+  }
+}