feat: enable smart approve for user by default (#1599)

ui/desktop/src/components/settings/SettingsView.tsx

@@ -15,8 +15,7 @@ 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';
+import { ModeSelection } from './basic/ModeSelection';
 
 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.';
@@ -62,55 +61,6 @@ export default function SettingsView({
   setView: (view: View) => void;
   viewOptions: SettingsViewOptions;
 }) {
-  const [mode, setMode] = useState('auto');
-
-  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();
-          if (value) {
-            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);
@@ -304,7 +254,7 @@ export default function SettingsView({
                     Others setting like Goose Mode, Tool Output, Experiment and more
                   </p>
 
-                  <ModeSelection value={mode} onChange={handleModeChange} />
+                  <ModeSelection />
                 </div>
               </section>
             </div>

ui/desktop/src/components/settings/basic/ModeSelection.tsx

@@ -1,7 +1,8 @@
 import * as RadioGroup from '@radix-ui/react-radio-group';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { getApiUrl, getSecretKey } from '../../../config';
 
-const ModeSelection = ({ value, onChange }) => {
+export const ModeSelection = () => {
   const modes = [
     {
       value: 'auto',
@@ -11,7 +12,8 @@ const ModeSelection = ({ value, onChange }) => {
     {
       value: 'approve',
       label: 'Approval needed',
-      description: 'Editing, creating, and deleting files will require human approval.',
+      description:
+        'Classifies the tool as either a read-only tool or write tool. Write tools will ask for human approval.',
     },
     {
       value: 'chat',
@@ -20,11 +22,64 @@ const ModeSelection = ({ value, onChange }) => {
     },
   ];
 
+  const [currentMode, setCurrentMode] = useState('auto');
+
+  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}`);
+    }
+    setCurrentMode(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();
+          if (value) {
+            setCurrentMode(value);
+          }
+        }
+      } catch (error) {
+        console.error('Error fetching current mode:', error);
+      }
+    };
+
+    fetchCurrentMode();
+  }, []);
+
   return (
     <div>
       <h4 className="font-medium mb-4 text-textStandard">Mode Selection</h4>
 
-      <RadioGroup.Root className="flex flex-col space-y-2" value={value} onValueChange={onChange}>
+      <RadioGroup.Root
+        className="flex flex-col space-y-2"
+        value={currentMode}
+        onValueChange={handleModeChange}
+      >
         {modes.map((mode) => (
           <RadioGroup.Item
             key={mode.value}
@@ -41,7 +96,7 @@ const ModeSelection = ({ value, onChange }) => {
             </div>
             <div className="flex-shrink-0">
               <div className="w-4 h-4 flex items-center justify-center rounded-full border border-gray-500 dark:border-gray-400">
-                {value === mode.value && (
+                {currentMode === mode.value && (
                   <div className="w-2 h-2 bg-black dark:bg-white rounded-full" />
                 )}
               </div>
@@ -52,5 +107,3 @@ const ModeSelection = ({ value, onChange }) => {
     </div>
   );
 };
-
-export default ModeSelection;