src/chat/ChatForm.tsx

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>
  );
}