chore: prompts input now uses useState hook for state change and inbuilt autoFocus

frontend/src/conversation/Conversation.tsx

@@ -26,8 +26,6 @@ export default function Conversation() {
   const status = useSelector(selectStatus);
   const dispatch = useDispatch<AppDispatch>();
   const endMessageRef = useRef<HTMLDivElement>(null);
-  // const inputRef = useRef<HTMLInputElement>(null);
-  // migrating to useState for managing input values and onChange
   const [prompt, setPrompt] = useState('');
   const [isDarkTheme] = useDarkTheme();
   const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
@@ -43,13 +41,6 @@ export default function Conversation() {
     !eventInterrupt && scrollIntoView();
   }, [queries.length, queries[queries.length - 1]]);
 
-  useEffect(() => {
-    const element = document.getElementById('inputbox') as HTMLInputElement;
-    if (element) {
-      element.focus();
-    }
-  }, []);
-
   useEffect(() => {
     return () => {
       if (status !== 'idle') {
@@ -241,25 +232,8 @@ export default function Conversation() {
 
       <div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
         <div className="flex h-full w-full items-center rounded-full border border-silver bg-white dark:bg-raisin-black">
-          {/* <div
-            id="inputbox"
-            ref={inputRef}
-            tabIndex={1}
-            placeholder={t('inputPlaceholder')}
-            contentEditable
-            onPaste={handlePaste}
-            className={`text-input max-h-24 w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white pt-5 pb-[22px] text-base leading-tight opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                handleQuestionSubmission();
-              }
-            }}
-          ></div> */}
           <TextInput
             variant="PROMPT"
-            id="inputbox"
-            // ref={inputRef}
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
             placeholder={t('inputPlaceholder')}