Autofocus input when after clicking OpenAI API Key in sidebar. (#324)

* Update Key.tsx

Autofocus input after its visible.

* Update Key.tsx

components/Settings/Key.tsx

@@ -1,6 +1,6 @@
 import { IconCheck, IconKey, IconX } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-import { FC, KeyboardEvent, useState } from 'react';
+import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { SidebarButton } from '../Sidebar/SidebarButton';
 
 interface Props {
@@ -12,6 +12,7 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
   const { t } = useTranslation('sidebar');
   const [isChanging, setIsChanging] = useState(false);
   const [newKey, setNewKey] = useState(apiKey);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
     if (e.key === 'Enter') {
@@ -24,12 +25,19 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
     onApiKeyChange(newKey.trim());
     setIsChanging(false);
   };
+  
+  useEffect(() => {
+    if (isChanging) {
+      inputRef.current?.focus();
+    }
+  }, [isChanging]);
 
   return isChanging ? (
     <div className="duration:200 flex w-full cursor-pointer items-center rounded-md py-3 px-3 transition-colors hover:bg-gray-500/10">
       <IconKey size={18} />
 
       <input
+        ref={inputRef}
         className="ml-2 h-[20px] flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-[12.5px] leading-3 text-left text-white outline-none focus:border-neutral-100"
         type="password"
         value={newKey}