nandi/ori · PromptInput.tsx

nandi/oripublic⑂ Fork 0

⑂ 2434cc7fb724f02b34c0189dfd5fb30c1a8a68e3

PromptInput.tsx · 71 lines · 1.4 KBTypeScript    Blame HistoryRaw
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS   1
* 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={() => {}} />
10import { useState } from "react";
12interface PromptInputProps {
turnActive: boolean;
onSend: (text: string) => void;
onCancel: () => void;
18export function PromptInput({
turnActive,
21
22}: PromptInputProps) {
const [text, setText] = useState("");
const submit = () => {
const trimmed = text.trim();
if (trimmed === "" || turnActive) {
28
onSend(trimmed);
setText("");
34
	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}>
58
		</button>
		<button
			type="submit"
			className="composer-send"
			disabled={text.trim() === ""}
66
		</button>
69

✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday	1	/**
	2	* PromptInput is the message composer: Enter sends (Shift+Enter for a new
	3	* line); while a turn runs the send button becomes a stop button, matching
	4	* the behaviour of Zed's agent panel.
	5	*
	6	* @example
	7	* <PromptInput turnActive={false} onSend={(t) => console.log(t)} onCancel={() => {}} />
	8	*/
	9
	10	import { useState } from "react";
	11
	12	interface PromptInputProps {
	13	turnActive: boolean;
	14	onSend: (text: string) => void;
	15	onCancel: () => void;
	16	}
	17
	18	export function PromptInput({
	19	turnActive,
	20	onSend,
	21	onCancel,
	22	}: PromptInputProps) {
	23	const [text, setText] = useState("");
	24
	25	const submit = () => {
	26	const trimmed = text.trim();
	27	if (trimmed === "" \|\| turnActive) {
	28	return;
	29	}
	30	onSend(trimmed);
	31	setText("");
	32	};
	33
	34	return (
	35	<form
	36	className="composer"
	37	onSubmit={(event) => {
	38	event.preventDefault();
	39	submit();
	40	}}
	41	>
	42	<textarea
	43	className="composer-input"
	44	placeholder="Message the agent…"
	45	aria-label="prompt"
	46	value={text}
	47	rows={3}
	48	onChange={(event) => setText(event.target.value)}
	49	onKeyDown={(event) => {
	50	if (event.key === "Enter" && !event.shiftKey) {
	51	event.preventDefault();
	52	submit();
	53	}
	54	}}
	55	/>
	56	{turnActive ? (
	57	<button type="button" className="composer-stop" onClick={onCancel}>
	58	Stop
	59	</button>
	60	) : (
	61	<button
	62	type="submit"
	63	className="composer-send"
	64	disabled={text.trim() === ""}
65	>
66	Send
67	</button>
68	)}
69	</form>
70	);
71	}