feat: update goose selection (#1638)
This commit is contained in:
Yingjie He
@@ -708,8 +708,8 @@ pub fn configure_goose_mode_dialog() -> Result<(), Box<dyn Error>> {
|
||||
"All tools, extensions and file modificatio will require human approval"
|
||||
)
|
||||
.item(
|
||||
"write_approve",
|
||||
"Write Approve Mode",
|
||||
"smart_approve",
|
||||
"Smart Approve Mode",
|
||||
"Editing, creating, deleting files and using extensions will require human approval"
|
||||
)
|
||||
.item(
|
||||
@@ -728,9 +728,9 @@ pub fn configure_goose_mode_dialog() -> Result<(), Box<dyn Error>> {
|
||||
config.set_param("GOOSE_MODE", Value::String("approve".to_string()))?;
|
||||
cliclack::outro("Set to Approve Mode - all tools and modifications require approval")?;
|
||||
}
|
||||
"write_approve" => {
|
||||
config.set_param("GOOSE_MODE", Value::String("write_approve".to_string()))?;
|
||||
cliclack::outro("Set to Write Approve Mode - modifications require approval")?;
|
||||
"smart_approve" => {
|
||||
config.set_param("GOOSE_MODE", Value::String("smart_approve".to_string()))?;
|
||||
cliclack::outro("Set to Smart Approve Mode - modifications require approval")?;
|
||||
}
|
||||
"chat" => {
|
||||
config.set_param("GOOSE_MODE", Value::String("chat".to_string()))?;
|
||||
|
||||
@@ -77,7 +77,7 @@ impl GooseCompleter {
|
||||
|
||||
/// Complete flags for the /mode command
|
||||
fn complete_mode_flags(&self, line: &str) -> Result<(usize, Vec<Pair>)> {
|
||||
let modes = ["auto", "approve", "write_approve", "chat"];
|
||||
let modes = ["auto", "approve", "smart_approve", "chat"];
|
||||
|
||||
let parts: Vec<&str> = line.split_whitespace().collect();
|
||||
|
||||
|
||||
@@ -335,7 +335,7 @@ impl Session {
|
||||
let mode = mode.to_lowercase();
|
||||
|
||||
// Check if mode is valid
|
||||
if !["auto", "approve", "chat", "write_approve"].contains(&mode.as_str()) {
|
||||
if !["auto", "approve", "chat", "smart_approve"].contains(&mode.as_str()) {
|
||||
output::render_error(&format!(
|
||||
"Invalid mode '{}'. Mode must be one of: auto, approve, chat",
|
||||
mode
|
||||
|
||||
@@ -296,7 +296,7 @@ impl Agent for TruncateAgent {
|
||||
// Clone goose_mode once before the match to avoid move issues
|
||||
let mode = goose_mode.clone();
|
||||
match mode.as_str() {
|
||||
"approve" | "write_approve" => {
|
||||
"approve" | "smart_approve" => {
|
||||
let mut read_only_tools = Vec::new();
|
||||
let mut needs_confirmation = Vec::<&ToolRequest>::new();
|
||||
let mut approved_tools = Vec::new();
|
||||
@@ -319,7 +319,7 @@ impl Agent for TruncateAgent {
|
||||
}
|
||||
|
||||
// Only check read-only status for tools needing confirmation
|
||||
if !needs_confirmation.is_empty() && mode == "write_approve" {
|
||||
if !needs_confirmation.is_empty() && mode == "smart_approve" {
|
||||
read_only_tools = detect_read_only_tools(&capabilities, needs_confirmation.clone()).await;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,6 @@ import { Sliders } from 'lucide-react';
|
||||
import { ModelRadioList } from './settings/models/ModelRadioList';
|
||||
import { Document, ChevronUp, ChevronDown } from './icons';
|
||||
import type { View } from '../App';
|
||||
import { getApiUrl, getSecretKey } from '../config';
|
||||
import { BottomMenuModeSelection } from './BottomMenuModeSelection';
|
||||
|
||||
export default function BottomMenu({
|
||||
@@ -20,10 +19,6 @@ export default function BottomMenu({
|
||||
const { recentModels } = useRecentModels(); // Get recent models
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [isGooseModeMenuOpen, setIsGooseModeMenuOpen] = useState(false);
|
||||
const [gooseMode, setGooseMode] = useState('auto');
|
||||
const gooseModeDropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Add effect to handle clicks outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
@@ -41,31 +36,6 @@ export default function BottomMenu({
|
||||
};
|
||||
}, [isModelMenuOpen]);
|
||||
|
||||
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) {
|
||||
setGooseMode(value);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching current mode:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCurrentMode();
|
||||
}, []);
|
||||
|
||||
// Add effect to handle Escape key
|
||||
useEffect(() => {
|
||||
const handleEsc = (event: KeyboardEvent) => {
|
||||
@@ -83,41 +53,6 @@ export default function BottomMenu({
|
||||
};
|
||||
}, [isModelMenuOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
gooseModeDropdownRef.current &&
|
||||
!gooseModeDropdownRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setIsGooseModeMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isGooseModeMenuOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [isGooseModeMenuOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleEsc = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
setIsGooseModeMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isGooseModeMenuOpen) {
|
||||
window.addEventListener('keydown', handleEsc);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleEsc);
|
||||
};
|
||||
}, [isGooseModeMenuOpen]);
|
||||
|
||||
// Removed the envModelProvider code that was checking for environment variables
|
||||
|
||||
return (
|
||||
@@ -139,24 +74,7 @@ export default function BottomMenu({
|
||||
</span>
|
||||
|
||||
{/* Goose Mode Selector Dropdown */}
|
||||
<div className="relative flex items-center ml-6" ref={gooseModeDropdownRef}>
|
||||
<div
|
||||
className="flex items-center cursor-pointer"
|
||||
onClick={() => setIsGooseModeMenuOpen(!isGooseModeMenuOpen)}
|
||||
>
|
||||
<span>Goose Mode: {gooseMode}</span>
|
||||
{isGooseModeMenuOpen ? (
|
||||
<ChevronDown className="w-4 h-4 ml-1" />
|
||||
) : (
|
||||
<ChevronUp className="w-4 h-4 ml-1" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isGooseModeMenuOpen && (
|
||||
<BottomMenuModeSelection selectedMode={gooseMode} setSelectedMode={setGooseMode} />
|
||||
)}
|
||||
</div>
|
||||
<BottomMenuModeSelection />
|
||||
|
||||
{/* Model Selector Dropdown - Only in development */}
|
||||
<div className="relative flex items-center ml-auto mr-4" ref={dropdownRef}>
|
||||
|
||||
@@ -1,20 +1,82 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { getApiUrl, getSecretKey } from '../config';
|
||||
import { ChevronDown, ChevronUp } from './icons';
|
||||
import {
|
||||
all_goose_modes,
|
||||
filterGooseModes,
|
||||
ModeSelectionItem,
|
||||
} from './settings/basic/ModeSelectionItem';
|
||||
|
||||
export const BottomMenuModeSelection = ({ selectedMode, setSelectedMode }) => {
|
||||
const modes = [
|
||||
{
|
||||
value: 'auto',
|
||||
},
|
||||
{
|
||||
value: 'approve',
|
||||
},
|
||||
{
|
||||
value: 'chat',
|
||||
},
|
||||
];
|
||||
export const BottomMenuModeSelection = () => {
|
||||
const [isGooseModeMenuOpen, setIsGooseModeMenuOpen] = useState(false);
|
||||
const [gooseMode, setGooseMode] = useState('auto');
|
||||
const [previousApproveModel, setPreviousApproveModel] = useState('');
|
||||
const gooseModeDropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
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) {
|
||||
setGooseMode(value);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching current mode:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCurrentMode();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleEsc = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
setIsGooseModeMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isGooseModeMenuOpen) {
|
||||
window.addEventListener('keydown', handleEsc);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleEsc);
|
||||
};
|
||||
}, [isGooseModeMenuOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
gooseModeDropdownRef.current &&
|
||||
!gooseModeDropdownRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setIsGooseModeMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isGooseModeMenuOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [isGooseModeMenuOpen]);
|
||||
|
||||
const handleModeChange = async (newMode: string) => {
|
||||
if (gooseMode === newMode) {
|
||||
return;
|
||||
}
|
||||
const storeResponse = await fetch(getApiUrl('/configs/store'), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -33,41 +95,48 @@ export const BottomMenuModeSelection = ({ selectedMode, setSelectedMode }) => {
|
||||
console.error('Store response error:', errorText);
|
||||
throw new Error(`Failed to store new goose mode: ${newMode}`);
|
||||
}
|
||||
setSelectedMode(newMode);
|
||||
if (gooseMode.includes('approve')) {
|
||||
setPreviousApproveModel(gooseMode);
|
||||
}
|
||||
setGooseMode(newMode);
|
||||
};
|
||||
|
||||
function getValueByKey(key) {
|
||||
const mode = all_goose_modes.find((mode) => mode.key === key);
|
||||
return mode ? mode.label : 'auto';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="absolute bottom-[24px] right-0 w-[120px] bg-bgApp rounded-lg border border-borderSubtle">
|
||||
<div>
|
||||
{modes.map((mode) => (
|
||||
<label key={mode.value} className="block cursor-pointer">
|
||||
<div
|
||||
className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
|
||||
onClick={() => handleModeChange(mode.value)}
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm">{mode.value}</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="radio"
|
||||
name="modes"
|
||||
value={mode.value}
|
||||
checked={selectedMode === mode.value}
|
||||
onChange={() => handleModeChange(mode.value)}
|
||||
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>
|
||||
</label>
|
||||
))}
|
||||
<div className="relative flex items-center ml-6" ref={gooseModeDropdownRef}>
|
||||
<div
|
||||
className="flex items-center cursor-pointer"
|
||||
onClick={() => setIsGooseModeMenuOpen(!isGooseModeMenuOpen)}
|
||||
>
|
||||
<span className="truncate w-[170px]">Goose Mode: {getValueByKey(gooseMode)}</span>
|
||||
{isGooseModeMenuOpen ? (
|
||||
<ChevronDown className="w-4 h-4 ml-1" />
|
||||
) : (
|
||||
<ChevronUp className="w-4 h-4 ml-1" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isGooseModeMenuOpen && (
|
||||
<div className="absolute bottom-[24px] right-0 w-[240px] bg-bgApp rounded-lg border border-borderSubtle">
|
||||
<div>
|
||||
{filterGooseModes(gooseMode, all_goose_modes, previousApproveModel).map((mode) => (
|
||||
<ModeSelectionItem
|
||||
key={mode.key}
|
||||
mode={mode}
|
||||
currentMode={gooseMode}
|
||||
showDescription={false}
|
||||
isApproveModeConfigure={false}
|
||||
handleModeChange={handleModeChange}
|
||||
/>
|
||||
))}
|
||||
</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 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