learnharness/components/composer.tsx

"use client";

import { CornerDownLeftIcon, SquareIcon } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * The chat composer — content row ONLY (the persistent rounded shell lives in
 * the chat view's overlay, so the shell can later morph chat → question
 * without remounting).
 *
 * Corner-radius math (concentric with the shell): shell rounded-2xl (16px) −
 * row padding p-1.5 (6px) = button rounded-[10px] = 25% of the 40px button.
 */
export function Composer({
	busy,
	value,
	onChange,
	onSend,
	onStop,
	canSend,
	autoFocus,
}: {
	busy: boolean;
	value: string;
	onChange: (v: string) => void;
	onSend: () => void;
	onStop: () => void;
	canSend: boolean;
	autoFocus?: boolean;
}) {
	return (
		<form
			data-testid="composer"
			className="flex items-end gap-1.5 p-1.5"
			onSubmit={(e) => {
				e.preventDefault();
				if (busy) onStop();
				else if (canSend) onSend();
			}}
		>
			<textarea
				value={value}
				onChange={(e) => onChange(e.target.value)}
				onKeyDown={(e) => {
					if (e.key === "Enter" && !e.shiftKey) {
						e.preventDefault();
						if (busy) onStop();
						else if (canSend) onSend();
					}
				}}
				placeholder="Ask, answer, or steer the lesson…"
				autoFocus={autoFocus}
				rows={1}
				className="field-sizing-content max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground"
			/>
			<button
				type="submit"
				aria-label={busy ? "Stop" : "Send"}
				disabled={!busy && !canSend}
				className={cn(
					"flex size-10 shrink-0 items-center justify-center rounded-[10px] transition-colors",
					busy
						? "bg-secondary text-foreground hover:bg-accent"
						: "bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-40",
				)}
			>
				{busy ? <SquareIcon className="size-4" /> : <CornerDownLeftIcon className="size-5" />}
			</button>
		</form>
	);
}