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
@@ -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;