21 lines
1.3 KiB
TypeScript
21 lines
1.3 KiB
TypeScript
import { useI18n } from "../i18n";
|
|
import { useState } from "react";
|
|
import { useUnsavedDraft } from "../hooks/useUnsavedDraft";
|
|
import type { WidgetProps } from "./types";
|
|
|
|
export function FallbackWidget({ descriptor, onRespond }: WidgetProps) {
|
|
const { t: translate } = useI18n();
|
|
const [text, setText] = useState("");
|
|
useUnsavedDraft(text);
|
|
return (
|
|
<div className="rounded-xl border border-border/70 bg-card p-3 shadow-sm space-y-2">
|
|
<p className="text-sm text-warning">{translate("Unsupported widget (kind: {kind}) — respond manually", { kind: descriptor.widget })}</p>
|
|
<pre className="text-xs font-mono overflow-auto max-h-48 rounded-lg bg-muted p-2">{JSON.stringify(descriptor, null, 2)}</pre>
|
|
<textarea aria-label={translate("Manual response")} className="w-full rounded-lg border border-input bg-card p-2 text-sm shadow-xs outline-none transition-[border-color,box-shadow] focus:border-primary/50 focus:ring-2 focus:ring-ring/20" value={text} onChange={(e) => setText(e.target.value)} />
|
|
<button className="rounded-md border border-border/70 px-2 py-1 text-sm shadow-xs transition-colors hover:bg-accent" onClick={() => {
|
|
onRespond({ id: descriptor.id, control: "freetext", text });
|
|
}}>{translate("Send")}</button>
|
|
</div>
|
|
);
|
|
}
|