fix(ai-chat): input auto focus

src/components/App/UniverseQuestion/index.tsx

@@ -1,9 +1,9 @@
+import { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 
 import { TextareaAutosize } from '@mui/base'
 import { Button } from '@mui/material'
-import { useEffect, useState } from 'react'
 import ArrowForwardIcon from '~/components/Icons/ArrowForwardIcon'
 import ExploreIcon from '~/components/Icons/ExploreIcon'
 import HelpIcon from '~/components/Icons/HelpIcon'
@@ -15,6 +15,7 @@ import { colors } from '~/utils/colors'
 
 export const UniverseQuestion = () => {
   const [question, setQuestion] = useState('')
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
   const { fetchData, setAbortRequests, seedQuestions } = useDataStore((s) => s)
   const [setBudget] = useUserStore((s) => [s.setBudget])
 
@@ -33,6 +34,12 @@ export const UniverseQuestion = () => {
     }
   }, [seedQuestions])
 
+  useEffect(() => {
+    if (textAreaRef.current) {
+      textAreaRef.current.focus()
+    }
+  }, [])
+
   const handleSubmitQuestion = async (questionToSubmit: string) => {
     if (questionToSubmit) {
       resetAiSummaryAnswer()
@@ -85,6 +92,7 @@ export const UniverseQuestion = () => {
       Ideas have shapes
       <TextAreaWrapper onKeyDown={onEnterPress} py={12} tabIndex={-1}>
         <StyledTextarea
+          ref={textAreaRef}
           onChange={(e) => setQuestion(e.target.value)}
           placeholder="What do you want to know?"
           value={question}