44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import { useState } from "react";
|
|
import PixelButton from "./PixelButton.jsx";
|
|
|
|
export default function PromptComposer({ disabled, onSubmit }) {
|
|
const [value, setValue] = useState("");
|
|
|
|
async function handleSubmit() {
|
|
const prompt = value.trim();
|
|
if (!prompt) {
|
|
return;
|
|
}
|
|
|
|
await onSubmit(prompt);
|
|
setValue("");
|
|
}
|
|
|
|
return (
|
|
<div className="prompt-composer">
|
|
<label className="prompt-composer__label" htmlFor="prompt-box">
|
|
COMMAND INPUT
|
|
</label>
|
|
<textarea
|
|
id="prompt-box"
|
|
value={value}
|
|
disabled={disabled}
|
|
onChange={(event) => setValue(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter" && !event.shiftKey) {
|
|
event.preventDefault();
|
|
handleSubmit();
|
|
}
|
|
}}
|
|
placeholder="Write a prompt and hit Enter..."
|
|
/>
|
|
<div className="prompt-composer__actions">
|
|
<span>Enter = send / Shift+Enter = newline</span>
|
|
<PixelButton tone="amber" disabled={disabled || !value.trim()} onClick={handleSubmit}>
|
|
Send Prompt
|
|
</PixelButton>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|