feat: auto focus on first input on app load (reworkd#139)

Co-authored-by: Jaha  Naeem Gitonga <[email protected]>

src/components/Input.tsx

@@ -13,18 +13,21 @@ interface InputProps {
   setValue?: (value: string) => void;
   type?: string;
   attributes?: { [key: string]: string | number | string[] }; // attributes specific to input type
+  inputRef?: React.RefObject<HTMLInputElement>;
 }
 
-const Input = ({
-  placeholder,
-  left,
-  value,
-  type,
-  onChange,
-  setValue,
-  disabled,
-  attributes,
-}: InputProps) => {
+const Input = (props: InputProps) => {
+  const {
+    placeholder,
+    left,
+    value,
+    type,
+    onChange,
+    setValue,
+    disabled,
+    attributes,
+    inputRef
+  } = props;
   const isTypeCombobox = () => {
     return type === "combobox";
   };
@@ -52,6 +55,7 @@ const Input = ({
           disabled && " cursor-not-allowed hover:border-white/10",
           left && "md:rounded-l-none"
         )}
+        ref={inputRef}
         placeholder={placeholder}
         type="text"
         value={value}

src/components/SettingsDialog.tsx

@@ -6,21 +6,25 @@ import Input from "./Input";
 import Dropdown from "./Dropdown";
 import { GPT_MODEL_NAMES } from "../utils/constants";
 
-export default function SettingsDialog({
-  show,
-  close,
-  customApiKey,
-  setCustomApiKey,
-  customModelName,
-  setCustomModelName,
-}: {
+interface SettingsDialogProps {
   show: boolean;
   close: () => void;
   customApiKey: string;
   setCustomApiKey: (key: string) => void;
   customModelName: string;
   setCustomModelName: (key: string) => void;
-}) {
+}
+
+export default function SettingsDialog(props: SettingsDialogProps) {
+  const {
+    show,
+    close,
+    customApiKey,
+    setCustomApiKey,
+    customModelName,
+    setCustomModelName,
+  } = props;
+
   const [key, setKey] = React.useState<string>(customApiKey);
 
   const handleClose = () => {

src/pages/index.tsx

@@ -1,7 +1,7 @@
+import React, { useEffect, useRef } from "react";
 import { type NextPage } from "next";
 import Badge from "../components/Badge";
 import DefaultLayout from "../layout/default";
-import React, { useEffect } from "react";
 import type { Message } from "../components/ChatWindow";
 import ChatWindow from "../components/ChatWindow";
 import Drawer from "../components/Drawer";
@@ -63,6 +63,11 @@ const Home: NextPage = () => {
     localStorage.setItem(key, JSON.stringify(true));
   }, []);
 
+  const nameInputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    nameInputRef?.current?.focus();
+  }, []);
+
   useEffect(() => {
     if (agent == null) {
       setShouldAgentStop(false);
@@ -158,6 +163,7 @@ const Home: NextPage = () => {
             <div className="mt-5 flex w-full flex-col gap-2 sm:mt-10">
               <Expand delay={1.2}>
                 <Input
+                  inputRef={nameInputRef}
                   left={
                     <>
                       <FaRobot />