Merge pull request #6167 from ethereum/ai_textboxes_focus

adding focus to textboxes

Author: joeizang

libs/remix-ui/app/src/lib/remix-app/components/modals/modal-wrapper.tsx

@@ -171,6 +171,17 @@ const ModalWrapper = (props: ModalWrapperProps) => {
     }
   }, [props])
 
+  useEffect(() => {
+    if (props.modalType === ModalTypes.textarea && ref.current) {
+      setTimeout(() => {
+        // make sure rendering is done before focusing
+        if (ref.current && 'focus' in ref.current) {
+          (ref.current as HTMLTextAreaElement).focus()
+        }
+      }, 300)
+    }
+  }, [props.modalType, state])
+
   // reset the message and input if any, so when the modal is shown again it doesn't show the previous value.
   const handleHide = () => {
     setState((prevState) => {

libs/remix-ui/remix-ai-assistant/src/components/prompt.tsx

@@ -29,6 +29,7 @@ export interface PromptAreaProps {
   modelBtnRef: React.RefObject<HTMLButtonElement>
   aiContextGroupList: groupListType[]
   aiAssistantGroupList: groupListType[]
+  textareaRef?: React.RefObject<HTMLTextAreaElement>
 }
 
 const _paq = (window._paq = window._paq || [])
@@ -55,7 +56,8 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
   contextBtnRef,
   modelBtnRef,
   aiContextGroupList,
-  aiAssistantGroupList
+  aiAssistantGroupList,
+  textareaRef
 }) => {
 
   return (
@@ -110,6 +112,7 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
         </div>
         <div className="ai-chat-input d-flex flex-column">
           <textarea
+            ref={textareaRef}
             style={{ flexGrow: 1 }}
             rows={2}
             className="form-control bg-light"

libs/remix-ui/remix-ai-assistant/src/components/remix-ui-remix-ai-assistant.tsx

@@ -51,6 +51,7 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
   const historyRef = useRef<HTMLDivElement | null>(null)
   const modelBtnRef = useRef(null)
   const contextBtnRef = useRef(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   useOnClickOutside([modelBtnRef, contextBtnRef], () => setShowAssistantOptions(false))
   useOnClickOutside([modelBtnRef, contextBtnRef], () => setShowContextOptions(false))
@@ -200,6 +201,19 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
     }
   }, [messages])
 
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus()
+    }
+  }, [])
+
+  useEffect(() => {
+    // Focus textarea when streaming stops (after request processing)
+    if (!isStreaming && textareaRef.current) {
+      textareaRef.current.focus()
+    }
+  }, [isStreaming])
+
   // helper to toggle like / dislike feedback and push Matomo events
   const recordFeedback = (msgId: string, next: 'like' | 'dislike' | 'none') => {
     setMessages(prev =>
@@ -513,6 +527,7 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
           modelBtnRef={modelBtnRef}
           aiContextGroupList={aiContextGroupList}
           aiAssistantGroupList={aiAssistantGroupList}
+          textareaRef={textareaRef}
         />
       </section>
     </div>