Ai Prompt Message Input Component

<div class="flex w-full items-center rounded-md bg-zinc-300 p-2 dark:bg-zinc-900" > <label for="prompt" class="sr-only">Enter your prompt</label> <div> <button class="hover:text-violet-600 dark:text-zinc-200 dark:hover:text-violet-600 sm:p-2" type="button" > <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path> </svg> <span class="sr-only">Attach file</span> </button> </div> <textarea id="prompt" rows="1" class="mx-2 flex min-h-full w-full rounded-md border border-zinc-300 bg-zinc-200 p-2 text-base text-zinc-900 placeholder-zinc-400 focus:border-violet-600 focus:outline-none focus:ring-1 focus:ring-violet-600 dark:border-zinc-300/20 dark:bg-zinc-800 dark:text-zinc-200 dark:placeholder-zinc-400 dark:focus:border-violet-600 dark:focus:ring-violet-600 resize-none" placeholder="Enter your prompt" ></textarea> <div> <button class="inline-flex hover:text-violet-600 dark:text-zinc-200 dark:hover:text-violet-600 sm:p-2" type="submit" > <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M10 14l11 -11"></path> <path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5" ></path> </svg> <span class="sr-only">Send message</span> </button> </div> </div>