"use client"; import { useEffect, useState, useRef } from "react"; import { PlusIcon, AudioLinesIcon, PaperclipIcon, SendIcon, } from "lucide-react"; export const GradientChatInput = () => { const inputRef = useRef(null); const [isSendActive, setIsSendActive] = useState(false); useEffect(() => { if (inputRef.current) { inputRef.current.focus(); } }, []); return (

) => {
            if (e.target.value.trim()) {
              setIsSendActive(true);
            } else {
              setIsSendActive(false);
            }
          }}
          placeholder="Ask anything"
          spellCheck={false}
          className="resize-none bg-transparent check text-black px-3 placeholder:text-gray-400/60 placeholder:font-medium field-sizing-content min-h-8 max-h-80 p-2 w-full border-none outline-0 focus:ring-0"
        />

{isSendActive ? (
            <button className="p-2 bg-zinc-50 rounded-lg border border-white shadow-sm cursor-pointer">
              <SendIcon className="size-4 text-black" />
            </button>
          ) : (
            <button className="p-2 bg-zinc-50 rounded-lg border border-white shadow-sm cursor-pointer">
              <AudioLinesIcon className="size-4 text-black" />
            </button>
          )}
        </div>
      </form>
    </div>
  );
};
</article></body></html>

Gradient Chat Input

Installation

Usage

Built by Ankit. The source code is available on Github