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

/**
 * PermissionPrompt asks the user to approve or reject a sensitive agent
 * action, offering exactly the options the agent proposed (allow once,
 * always, reject, ...), like Zed's permission bar.
 *
 * @example
 * <PermissionPrompt
 *   request={{ requestId: "perm-1", title: "Run `make test`", options: [
 *     { optionId: "allow", name: "Allow", kind: "allow_once" }] }}
 *   onRespond={(requestId, optionId) => console.log(requestId, optionId)}
 * />
 */

import type { PermissionRequestState } from "../reducer";
import { InlineText } from "./InlineText";

interface PermissionPromptProps {
	request: PermissionRequestState;
	onRespond: (requestId: string, optionId: string) => void;
}

export function PermissionPrompt({
	request,
	onRespond,
}: PermissionPromptProps) {
	return (
		<div
			className="permission"
			role="alertdialog"
			aria-label="permission request"
		>
			<p className="permission-title">
				🔐 <InlineText text={request.title} />
			</p>
			<div className="permission-options">
				{request.options.map((option) => (
					<button
						key={option.optionId}
						type="button"
						className={`permission-option permission-${option.kind}`}
						onClick={() => onRespond(request.requestId, option.optionId)}
					>
						{option.name}
					</button>
				))}
			</div>
		</div>
	);
}