ChatInput: remove querySelector avoid useRef() & forwardRef()

src/app/chat/ChatInput.tsx

@@ -1,15 +1,15 @@
-import { useEffect } from "preact/hooks"
+import { useEffect, useId } from "preact/hooks"
 import { SendHorizontal } from "lucide"
 import { AutoGrowTextarea, Form, IconButton } from "../_components"
 
 export const ChatInput = ({ value, onChange, onSend }) => {
+  const id = useId()
+
   // Steal focus if no input is focused and a key is pressed
   useEffect(() => {
     const listener = e => {
       if (!("value" in e.target) && !e.altKey && !e.metaKey && !e.ctrlKey && e.key.length === 1) {
-        // TODO: useRef()
-        // TODO: or maybe just use one global listener and always find closest textarea/input?
-        const input = document.querySelector("footer textarea")!
+        const input = document.getElementById(id)!
         e.preventDefault()
         input.focus()
         input.value += e.key
@@ -30,6 +30,7 @@ export const ChatInput = ({ value, onChange, onSend }) => {
   return (
     <Form class="relative max-w-2xl mx-auto" onSubmit={onSend}>
       <AutoGrowTextarea
+        id={id}
         class="text-lg px-3 py-3 pr-16 bg-transparent"
         rows={1}
         placeholder="Ask anything..."