Hugging Face's logo

Spaces:
augment17
/
agentscope
Paused

App Files Community
agentscope
File size: 2,366 Bytes
0b9dc2e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import { ChevronDown, UserRoundKey } from 'lucide-react';

import type { PermissionMode } from '@/api/types';
import { Button } from '@/components/ui/button';
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useTranslation } from '@/i18n/useI18n.ts';
import { cn } from '@/lib/utils.ts';

const PERMISSION_MODES: { value: PermissionMode; label: string }[] = [
	{ value: 'default', label: 'Default' },
	{ value: 'accept_edits', label: 'Accept Edits' },
	{ value: 'explore', label: 'Explore' },
	{ value: 'bypass', label: 'Bypass' },
	{ value: 'dont_ask', label: "Don't Ask" },
];

interface Props {
	className?: string;
	value?: PermissionMode;
	disabled?: boolean;
	onChange?: (value: PermissionMode) => void;
}

export function PermissionModeSelect({ className, value, disabled, onChange }: Props) {
	const { t } = useTranslation();

	const displayLabel = value
		? (PERMISSION_MODES.find((m) => m.value === value)?.label ?? value)
		: t('permission-mode.placeholder');

	return (
		<DropdownMenu>

			<DropdownMenuTrigger asChild>

				<Button

					variant="outline"

					size="sm"

					className={cn('justify-between gap-1', className)}

					disabled={disabled}

					tooltip={t('permission-mode.trigger-tooltip')}

				>

					<div className="flex flex-row items-center gap-x-2">

						<UserRoundKey />

						<span className="truncate">{displayLabel}</span>

					</div>

					<ChevronDown className="size-3.5 opacity-50" />

				</Button>

			</DropdownMenuTrigger>

			<DropdownMenuContent align="start" className="min-w-48">

				<DropdownMenuGroup>

					<DropdownMenuLabel>{t('permission-mode.label')}</DropdownMenuLabel>

					{PERMISSION_MODES.map((mode) => (

						<Tooltip key={mode.value}>

							<TooltipTrigger asChild>

								<DropdownMenuItem onSelect={() => onChange?.(mode.value)}>

									{mode.label}

								</DropdownMenuItem>

							</TooltipTrigger>

							<TooltipContent side="right">

								{t(`permission-mode.${mode.value}-tooltip`)}

							</TooltipContent>

						</Tooltip>

					))}

				</DropdownMenuGroup>

			</DropdownMenuContent>

		</DropdownMenu>
	);
}