Chat Input

import { ChatInput } from "@/components/ui/chat-input";

export default function Example() {
  return <ChatInput />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const ChatInput = forwardRef(({ className, onSend, placeholder = "Type a message...", ...props }, ref) => {
  const [val, setVal] = useState("");
  const send = () => { if (val.trim()) { onSend?.(val.trim()); setVal(""); } };

  return (
    <div ref={ref} className={cn("flex items-end gap-2 rounded-lg border bg-background p-2", className)} {...props}>
      <textarea value={val} onChange={(e) => setVal(e.target.value)} placeholder={placeholder} rows={1}
        onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
        className="flex-1 resize-none bg-transparent px-2 py-1.5 text-sm outline-none placeholder:text-muted-foreground"
      />
      <button onClick={send} disabled={!val.trim()}
        className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground disabled:opacity-50"
      >
        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19V5m0 0l-7 7m7-7l7 7" /></svg>
      </button>
    </div>
  );
});
ChatInput.displayName = "ChatInput";

export { ChatInput };