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

/**
 * PromptInput is the message composer: Enter sends (Shift+Enter for a new
 * line); while a turn runs the send button becomes a stop button, matching
 * the behaviour of Zed's agent panel.
 *
 * @example
 * <PromptInput turnActive={false} onSend={(t) => console.log(t)} onCancel={() => {}} />
 */

import { useState } from "react";

interface PromptInputProps {
	turnActive: boolean;
	onSend: (text: string) => void;
	onCancel: () => void;
}

export function PromptInput({
	turnActive,
	onSend,
	onCancel,
}: PromptInputProps) {
	const [text, setText] = useState("");

	const submit = () => {
		const trimmed = text.trim();
		if (trimmed === "" || turnActive) {
			return;
		}
		onSend(trimmed);
		setText("");
	};

	return (
		<form
			className="composer"
			onSubmit={(event) => {
				event.preventDefault();
				submit();
			}}
		>
			<textarea
				className="composer-input"
				placeholder="Message the agent…"
				aria-label="prompt"
				value={text}
				rows={3}
				onChange={(event) => setText(event.target.value)}
				onKeyDown={(event) => {
					if (event.key === "Enter" && !event.shiftKey) {
						event.preventDefault();
						submit();
					}
				}}
			/>
			{turnActive ? (
				<button type="button" className="composer-stop" onClick={onCancel}>
					Stop
				</button>
			) : (
				<button
					type="submit"
					className="composer-send"
					disabled={text.trim() === ""}
				>
					Send
				</button>
			)}
		</form>
	);
}