mirror of
https://github.com/aljazceru/goose.git
synced 2026-02-15 19:44:20 +01:00
move modes settings v2 (#1884)
This commit is contained in:
Lily Delalande
@@ -6,29 +6,36 @@ import {
|
||||
filterGooseModes,
|
||||
ModeSelectionItem,
|
||||
} from './settings/basic/ModeSelectionItem';
|
||||
import { useConfig } from './ConfigContext';
|
||||
|
||||
export const BottomMenuModeSelection = () => {
|
||||
const [isGooseModeMenuOpen, setIsGooseModeMenuOpen] = useState(false);
|
||||
const [gooseMode, setGooseMode] = useState('auto');
|
||||
const [previousApproveModel, setPreviousApproveModel] = useState('');
|
||||
const gooseModeDropdownRef = useRef<HTMLDivElement>(null);
|
||||
const { read, upsert } = useConfig();
|
||||
|
||||
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 (!process.env.ALPHA) {
|
||||
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) {
|
||||
setGooseMode(value);
|
||||
if (response.ok) {
|
||||
const { value } = await response.json();
|
||||
if (value) {
|
||||
setGooseMode(value);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const mode = (await read('GOOSE_MODE', false)) as string;
|
||||
setGooseMode(mode);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching current mode:', error);
|
||||
@@ -77,28 +84,37 @@ export const BottomMenuModeSelection = () => {
|
||||
if (gooseMode === newMode) {
|
||||
return;
|
||||
}
|
||||
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}`);
|
||||
if (!process.env.ALPHA) {
|
||||
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}`);
|
||||
}
|
||||
if (gooseMode.includes('approve')) {
|
||||
setPreviousApproveModel(gooseMode);
|
||||
}
|
||||
setGooseMode(newMode);
|
||||
} else {
|
||||
await upsert('GOOSE_MODE', newMode, false);
|
||||
if (gooseMode.includes('approve')) {
|
||||
setPreviousApproveModel(gooseMode);
|
||||
}
|
||||
setGooseMode(newMode);
|
||||
}
|
||||
if (gooseMode.includes('approve')) {
|
||||
setPreviousApproveModel(gooseMode);
|
||||
}
|
||||
setGooseMode(newMode);
|
||||
};
|
||||
|
||||
function getValueByKey(key) {
|
||||
|
||||
@@ -4,6 +4,7 @@ import BackButton from '../ui/BackButton';
|
||||
import type { View } from '../../App';
|
||||
import ExtensionsSection from './extensions/ExtensionsSection';
|
||||
import ModelsSection from './models/ModelsSection';
|
||||
import { ModeSection } from './mode/ModeSection';
|
||||
|
||||
export type SettingsViewOptions = {
|
||||
extensionId?: string;
|
||||
@@ -36,6 +37,8 @@ export default function SettingsView({
|
||||
<ModelsSection setView={setView} />
|
||||
{/* Extensions Section */}
|
||||
<ExtensionsSection />
|
||||
{/* Goose Modes */}
|
||||
<ModeSection />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Card } from '../../ui/card';
|
||||
import { Button } from '../../ui/button';
|
||||
import { GooseMode, ModeSelectionItem } from './ModeSelectionItem';
|
||||
|
||||
interface ConfigureApproveModeProps {
|
||||
onClose: () => void;
|
||||
handleModeChange: (newMode: string) => void;
|
||||
currentMode: string | null;
|
||||
}
|
||||
|
||||
export function ConfigureApproveMode({
|
||||
onClose,
|
||||
handleModeChange,
|
||||
currentMode,
|
||||
}: ConfigureApproveModeProps) {
|
||||
const approveModes: GooseMode[] = [
|
||||
{
|
||||
key: 'approve',
|
||||
label: 'Manual Approval',
|
||||
description: 'All tools, extensions and file modifications will require human approval',
|
||||
},
|
||||
{
|
||||
key: 'smart_approve',
|
||||
label: 'Smart Approval',
|
||||
description: 'Intelligently determine which actions need approval based on risk level ',
|
||||
},
|
||||
];
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [approveMode, setApproveMode] = useState(currentMode);
|
||||
|
||||
useEffect(() => {
|
||||
setApproveMode(currentMode);
|
||||
}, [currentMode]);
|
||||
|
||||
const handleModeSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
handleModeChange(approveMode);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Error configuring goose mode:', error);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/20 backdrop-blur-sm">
|
||||
<Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[440px] bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden p-[16px] pt-[24px] pb-0">
|
||||
<div className="px-4 pb-0 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex">
|
||||
<h2 className="text-2xl font-regular dark:text-white text-gray-900">
|
||||
Configure Approve Mode
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-[24px]">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||||
Approve requests can either be given to all tool requests or determine which actions
|
||||
may need integration
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
{approveModes.map((mode) => (
|
||||
<ModeSelectionItem
|
||||
key={mode.key}
|
||||
mode={mode}
|
||||
showDescription={true}
|
||||
currentMode={approveMode}
|
||||
isApproveModeConfigure={true}
|
||||
handleModeChange={(newMode) => {
|
||||
setApproveMode(newMode);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-[8px] ml-[-24px] mr-[-24px] pt-[16px]">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
disabled={isSubmitting}
|
||||
onClick={handleModeSubmit}
|
||||
className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-lg hover:bg-gray-50 hover:dark:text-black dark:text-white dark:border-gray-600 font-regular"
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : 'Save Mode'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
disabled={isSubmitting}
|
||||
onClick={onClose}
|
||||
className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-gray-400 hover:bg-gray-50 dark:border-gray-600 text-lg font-regular"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
88
ui/desktop/src/components/settings_v2/mode/ModeSection.tsx
Normal file
88
ui/desktop/src/components/settings_v2/mode/ModeSection.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { getApiUrl, getSecretKey } from '../../../config';
|
||||
import { all_goose_modes, filterGooseModes, ModeSelectionItem } from './ModeSelectionItem';
|
||||
import ExtensionList from '@/src/components/settings_v2/extensions/subcomponents/ExtensionList';
|
||||
import { Button } from '@/src/components/ui/button';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { GPSIcon } from '@/src/components/ui/icons';
|
||||
|
||||
export const ModeSection = () => {
|
||||
const [currentMode, setCurrentMode] = useState('auto');
|
||||
const [previousApproveModel, setPreviousApproveModel] = useState('');
|
||||
|
||||
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}`);
|
||||
}
|
||||
// Only track the previous approve if current mode is approve related but new mode is not.
|
||||
if (currentMode.includes('approve') && !newMode.includes('approve')) {
|
||||
setPreviousApproveModel(currentMode);
|
||||
}
|
||||
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 (
|
||||
<section id="mode">
|
||||
<div className="flex justify-between items-center mb-6 px-8">
|
||||
<h1 className="text-3xl font-medium text-textStandard">Mode</h1>
|
||||
</div>
|
||||
<div className="px-8">
|
||||
<p className="text-sm text-textStandard mb-6">
|
||||
Configure how Goose interacts with tools and extensions
|
||||
</p>
|
||||
<div>
|
||||
{filterGooseModes(currentMode, all_goose_modes, previousApproveModel).map((mode) => (
|
||||
<ModeSelectionItem
|
||||
key={mode.key}
|
||||
mode={mode}
|
||||
currentMode={currentMode}
|
||||
showDescription={true}
|
||||
isApproveModeConfigure={false}
|
||||
handleModeChange={handleModeChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
146
ui/desktop/src/components/settings_v2/mode/ModeSelectionItem.tsx
Normal file
146
ui/desktop/src/components/settings_v2/mode/ModeSelectionItem.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Gear } from '../../icons';
|
||||
import { ConfigureApproveMode } from './ConfigureApproveMode';
|
||||
|
||||
export interface GooseMode {
|
||||
key: string;
|
||||
label: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export const all_goose_modes: GooseMode[] = [
|
||||
{
|
||||
key: 'auto',
|
||||
label: 'Completely Autonomous',
|
||||
description: 'Full file modification capabilities, edit, create, and delete files freely.',
|
||||
},
|
||||
{
|
||||
key: 'approve',
|
||||
label: 'Manual Approval',
|
||||
description: 'All tools, extensions and file modifications will require human approval',
|
||||
},
|
||||
{
|
||||
key: 'smart_approve',
|
||||
label: 'Smart Approval',
|
||||
description: 'Intelligently determine which actions need approval based on risk level ',
|
||||
},
|
||||
{
|
||||
key: 'chat',
|
||||
label: 'Chat Only',
|
||||
description: 'Engage with the selected provider without using tools or extensions.',
|
||||
},
|
||||
];
|
||||
|
||||
export function filterGooseModes(
|
||||
currentMode: string,
|
||||
modes: GooseMode[],
|
||||
previousApproveMode: string
|
||||
) {
|
||||
return modes.filter((mode) => {
|
||||
const approveList = ['approve', 'smart_approve'];
|
||||
const nonApproveList = ['auto', 'chat'];
|
||||
// Always keep 'auto' and 'chat'
|
||||
if (nonApproveList.includes(mode.key)) {
|
||||
return true;
|
||||
}
|
||||
// If current mode is non approve mode, we display write approve by default.
|
||||
if (nonApproveList.includes(currentMode) && !previousApproveMode) {
|
||||
return mode.key === 'smart_approve';
|
||||
}
|
||||
|
||||
// Always include the current and previou approve mode
|
||||
if (mode.key === currentMode) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Current mode and previous approve mode cannot exist at the same time.
|
||||
if (approveList.includes(currentMode) && approveList.includes(previousApproveMode)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (mode.key === previousApproveMode) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
interface ModeSelectionItemProps {
|
||||
currentMode: string;
|
||||
mode: GooseMode;
|
||||
showDescription: boolean;
|
||||
isApproveModeConfigure: boolean;
|
||||
handleModeChange: (newMode: string) => void;
|
||||
}
|
||||
|
||||
export function ModeSelectionItem({
|
||||
currentMode,
|
||||
mode,
|
||||
showDescription,
|
||||
isApproveModeConfigure,
|
||||
handleModeChange,
|
||||
}: ModeSelectionItemProps) {
|
||||
const [checked, setChecked] = useState(currentMode == mode.key);
|
||||
const [isDislogOpen, setIsDislogOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setChecked(currentMode === mode.key);
|
||||
}, [currentMode, mode.key]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
|
||||
onClick={() => handleModeChange(mode.key)}
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-sm font-light text-textStandard dark:text-gray-200">{mode.label}</h3>
|
||||
{showDescription && (
|
||||
<p className="text-xs text-textSubtle dark:text-gray-400 mt-[2px]">
|
||||
{mode.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="relative flex items-center gap-3">
|
||||
{!isApproveModeConfigure && (mode.key == 'approve' || mode.key == 'smart_approve') && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsDislogOpen(true);
|
||||
}}
|
||||
>
|
||||
<Gear className="w-5 h-5 text-textSubtle hover:text-textStandard" />
|
||||
</button>
|
||||
)}
|
||||
<input
|
||||
type="radio"
|
||||
name="modes"
|
||||
value={mode.key}
|
||||
checked={checked}
|
||||
onChange={() => handleModeChange(mode.key)}
|
||||
className="peer sr-only"
|
||||
/>
|
||||
<div
|
||||
className="h-4 w-4 rounded-full border border-gray-400 dark:border-gray-500
|
||||
peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
|
||||
peer-checked:bg-white dark:peer-checked:bg-black
|
||||
transition-all duration-200 ease-in-out"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
{isDislogOpen ? (
|
||||
<ConfigureApproveMode
|
||||
onClose={() => {
|
||||
setIsDislogOpen(false);
|
||||
}}
|
||||
handleModeChange={handleModeChange}
|
||||
currentMode={currentMode}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user