33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import { useState } from "react";
|
|
import type { WidgetProps } from "./types";
|
|
|
|
export function FreetextWidget({ descriptor, onRespond }: WidgetProps) {
|
|
const [text, setText] = useState("");
|
|
function submit() {
|
|
if (text.trim()) onRespond({ id: descriptor.id, kind: "freetext", text });
|
|
}
|
|
return (
|
|
<div className="space-y-3 rounded-xl border border-border/70 bg-card p-4 shadow-sm">
|
|
{descriptor.title && (
|
|
<p className="text-[0.95rem] font-semibold leading-snug text-foreground">
|
|
{descriptor.title}
|
|
</p>
|
|
)}
|
|
<textarea
|
|
data-awaiting-input="true"
|
|
className="thot-awaiting-input min-h-24 w-full resize-y rounded-lg border p-3 text-sm shadow-xs outline-none transition-[border-color,box-shadow]"
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } }}
|
|
placeholder="Type your answer…"
|
|
/>
|
|
<button
|
|
className="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-xs transition-colors hover:bg-[oklch(var(--primary-hover))]"
|
|
onClick={submit}
|
|
>
|
|
Send
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|