feat: update goose selection (#1638)
This commit is contained in:
Yingjie He
@@ -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 modificatio will require human approval',
|
||||
},
|
||||
{
|
||||
key: 'smart_approve',
|
||||
label: 'Smart Approval',
|
||||
description: 'Intelligently determime 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>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +1,10 @@
|
||||
import * as RadioGroup from '@radix-ui/react-radio-group';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { getApiUrl, getSecretKey } from '../../../config';
|
||||
import { all_goose_modes, filterGooseModes, ModeSelectionItem } from './ModeSelectionItem';
|
||||
|
||||
export const ModeSelection = () => {
|
||||
const modes = [
|
||||
{
|
||||
value: 'auto',
|
||||
label: 'Completely autonomous',
|
||||
description: 'Full file modification capabilities, edit, create, and delete files freely.',
|
||||
},
|
||||
{
|
||||
value: 'approve',
|
||||
label: 'Approval needed',
|
||||
description:
|
||||
'Classifies the tool as either a read-only tool or write tool. Write tools will ask for human approval.',
|
||||
},
|
||||
{
|
||||
value: 'chat',
|
||||
label: 'Chat only',
|
||||
description: 'Engage with the selected provider without using tools or extensions.',
|
||||
},
|
||||
];
|
||||
|
||||
const [currentMode, setCurrentMode] = useState('auto');
|
||||
const [previousApproveModel, setPreviousApproveModel] = useState('');
|
||||
|
||||
const handleModeChange = async (newMode: string) => {
|
||||
const storeResponse = await fetch(getApiUrl('/configs/store'), {
|
||||
@@ -43,6 +25,10 @@ export const ModeSelection = () => {
|
||||
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);
|
||||
};
|
||||
|
||||
@@ -73,37 +59,24 @@ export const ModeSelection = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4 className="font-medium mb-4 text-textStandard">Mode Selection</h4>
|
||||
<h4 className="font-medium mb-2 text-textStandard">Mode Selection</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
Change the access goose is given to modify, edit or delet files. This setting can be changed
|
||||
at anytime.
|
||||
</p>
|
||||
|
||||
<RadioGroup.Root
|
||||
className="flex flex-col space-y-2"
|
||||
value={currentMode}
|
||||
onValueChange={handleModeChange}
|
||||
>
|
||||
{modes.map((mode) => (
|
||||
<RadioGroup.Item
|
||||
key={mode.value}
|
||||
value={mode.value}
|
||||
className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-all cursor-pointer"
|
||||
>
|
||||
<div className="flex flex-col text-left">
|
||||
<h3 className="text-sm font-semibold text-textStandard dark:text-gray-200">
|
||||
{mode.label}
|
||||
</h3>
|
||||
<p className="text-xs text-textSubtle dark:text-gray-400 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 dark:border-gray-400">
|
||||
{currentMode === mode.value && (
|
||||
<div className="w-2 h-2 bg-black dark:bg-white rounded-full" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</RadioGroup.Item>
|
||||
<div>
|
||||
{filterGooseModes(currentMode, all_goose_modes, previousApproveModel).map((mode) => (
|
||||
<ModeSelectionItem
|
||||
key={mode.key}
|
||||
mode={mode}
|
||||
currentMode={currentMode}
|
||||
showDescription={true}
|
||||
isApproveModeConfigure={false}
|
||||
handleModeChange={handleModeChange}
|
||||
/>
|
||||
))}
|
||||
</RadioGroup.Root>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
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 modificatio will require human approval',
|
||||
},
|
||||
{
|
||||
key: 'smart_approve',
|
||||
label: 'Smart Approval',
|
||||
description: 'Intelligently determime 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-semibold 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-5 w-5 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