feat: Add autoFocus to chat input

Author: raminr77

src/layout/components/ai-bot/ai-chat-modal.tsx

@@ -80,6 +80,12 @@ export function AiChatModal({ isOpen, onClose }: AiChatModalProps) {
   };
 
   useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
     const callback = (mutationList: MutationRecord[]) => {
       for (const mutation of mutationList) {
         if (mutation.type === 'childList') {
@@ -96,7 +102,10 @@ export function AiChatModal({ isOpen, onClose }: AiChatModalProps) {
       observer.observe(chatContainerRef.current, MUTATION_OBSERVER_CONFIGS);
     }
 
-    return () => observer.disconnect();
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('keydown', handleKeyDown);
+    }
   }, []);
 
   return (
@@ -166,9 +175,10 @@ export function AiChatModal({ isOpen, onClose }: AiChatModalProps) {
         >
           <TextInput
             required
-            id="text"
+            autoFocus
             type="text"
             tabIndex={1}
+            id="ai-chat-input"
             className="w-full h-12"
             error={errors.text?.message}
             placeholder="Ask About Ramin From AI"

src/shared/components/text-input/index.tsx

@@ -6,11 +6,13 @@ import { clsx } from 'clsx';
 
 interface TextInputProps {
   id?: string;
+  name?: string;
   value?: string;
   label?: string;
   tabIndex?: number;
   required?: boolean;
   className?: string;
+  autoFocus?: boolean;
   placeholder?: string;
   error?: string | null;
   containerClassName?: string;
@@ -19,6 +21,7 @@ interface TextInputProps {
 }
 
 export function TextInput({
+  name,
   label,
   value,
   error,
@@ -29,6 +32,7 @@ export function TextInput({
   type = 'text',
   required = false,
   id = 'text-input',
+  autoFocus = false,
   containerClassName,
   ...rest
 }: TextInputProps) {
@@ -48,9 +52,11 @@ export function TextInput({
           id={id}
           type={type}
           value={value}
+          name={name ?? id}
           tabIndex={tabIndex}
           required={required}
           onChange={onChange}
+          autoFocus={autoFocus}
           placeholder={placeholder}
           className={clsx(INPUT_CLASSES, {
             'border-red-500': !!error