import * as React from "react";
import { ArrowUp, Paperclip, Sparkles, Square } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AIPromptInputProps {
  placeholder?: string;
  models?: string[];
  onSubmit?: (value: string, model: string) => void;
  className?: string;
}

export function AIPromptInput({
  placeholder = "Ask anything…",
  models = ["Opus 5", "Sonnet 5", "Haiku 4.5"],
  onSubmit,
  className,
}: AIPromptInputProps) {
  const [value, setValue] = React.useState("");
  const [model, setModel] = React.useState(models[0]);
  const [streaming, setStreaming] = React.useState(false);
  const textareaRef = React.useRef<HTMLTextAreaElement>(null);

  React.useEffect(() => {
    const node = textareaRef.current;
    if (!node) return;
    node.style.height = "auto";
    node.style.height = Math.min(node.scrollHeight, 200) + "px";
  }, [value]);

  function submit() {
    if (!value.trim()) return;
    onSubmit?.(value, model);
    setStreaming(true);
    setValue("");
    setTimeout(() => setStreaming(false), 1400);
  }

  return (
    <div
      className={cn(
        "w-full rounded-2xl border bg-card p-2 shadow-sm transition-shadow focus-within:shadow-md",
        className
      )}
    >
      <textarea
        ref={textareaRef}
        rows={1}
        value={value}
        placeholder={placeholder}
        onChange={(event) => setValue(event.target.value)}
        onKeyDown={(event) => {
          if (event.key === "Enter" && !event.shiftKey) {
            event.preventDefault();
            submit();
          }
        }}
        className="w-full resize-none bg-transparent px-3 py-2.5 text-sm outline-none placeholder:text-muted-foreground"
      />

      <div className="flex items-center gap-1.5 px-1 pb-0.5">
        <button className="flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">
          <Paperclip className="size-4" />
        </button>

        <div className="relative">
          <select
            value={model}
            onChange={(event) => setModel(event.target.value)}
            className="h-8 appearance-none rounded-lg bg-transparent ps-7 pe-2 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-accent"
          >
            {models.map((name) => (
              <option key={name} value={name}>
                {name}
              </option>
            ))}
          </select>
          <Sparkles className="pointer-events-none absolute start-2 top-1/2 size-3.5 -translate-y-1/2 text-violet-500" />
        </div>

        <button
          onClick={submit}
          disabled={!value.trim() && !streaming}
          className={cn(
            "ms-auto flex size-8 items-center justify-center rounded-lg transition-all",
            value.trim() || streaming
              ? "bg-primary text-primary-foreground hover:opacity-90"
              : "bg-muted text-muted-foreground"
          )}
        >
          {streaming ? (
            <Square className="size-3.5 fill-current" />
          ) : (
            <ArrowUp className="size-4" />
          )}
        </button>
      </div>
    </div>
  );
}
Related components
