File size: 1,723 Bytes
db78b1a 9b72f0d db78b1a 9b72f0d db78b1a 9b72f0d db78b1a 9b72f0d bef6066 9b72f0d db78b1a 9b72f0d db78b1a 9b72f0d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
import { Button, Tooltip } from "@theme";
import cn from "@utils/classnames.ts";
import { ArrowUp, Square } from "lucide-react";
import { Controller, useForm } from "react-hook-form";
interface FormParams {
input: string;
}
export default function ChatForm({
className = "",
onSubmit,
disabled,
isGenerating,
onAbort,
}: {
className?: string;
onSubmit: (prompt: string) => void;
disabled: boolean;
isGenerating: boolean;
onAbort: () => Promise<void>;
}) {
const { control, handleSubmit, reset } = useForm<FormParams>({
defaultValues: {
input: "",
},
});
return (
<div className={cn(className)}>
<form
className="flex items-center"
onSubmit={handleSubmit((data) => {
onSubmit(data.input);
reset();
})}
>
<Controller
name="input"
control={control}
rules={{ required: "Message is required" }}
render={({ field }) => (
<input
id="text-input"
placeholder="Type your message..."
disabled={disabled}
value={field.value}
onChange={field.onChange}
className={cn(
"w-full rounded-md border-0 p-2 text-sm transition-colors focus:outline-none"
/*'focus:ring-1 focus:ring-yellow-500 focus:ring-offset-1'*/
)}
/>
)}
/>
{isGenerating ? (
<Tooltip text="Cancel">
<Button type="button" onClick={onAbort} iconLeft={<Square />} />
</Tooltip>
) : (
<Button type="submit" iconLeft={<ArrowUp />} disabled={disabled} />
)}
</form>
</div>
);
}
|