Add Hook for Autofocus on Agent Interface

packages/react-ui/src/components/AgentInterface/components/Composer.tsx

@@ -1,7 +1,9 @@
-import { useThread } from "@openuidev/react-headless";
+import { useThread, useThreadList } from "@openuidev/react-headless";
 import clsx from "clsx";
 import { ArrowUp, Square } from "lucide-react";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useLayoutContext } from "../../../context/LayoutContext";
+import { useAutoFocus } from "../../../hooks/useAutoFocus";
 import { useComposerState } from "../../../hooks/useComposerState";
 import { IconButton } from "../../IconButton";
 
@@ -19,6 +21,13 @@ export const Composer = ({ className, placeholder = "Type your query here" }: Co
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [hasInputOverflowTop, setHasInputOverflowTop] = useState(false);
   const [hasInputOverflowBottom, setHasInputOverflowBottom] = useState(false);
+  const selectedThreadId = useThreadList((s) => s.selectedThreadId);
+  const { layout } = useLayoutContext();
+
+  useAutoFocus(inputRef, {
+    enabled: layout !== "mobile" && !isLoadingMessages,
+    focusKey: selectedThreadId,
+  });
 
   const updateInputOverflow = useCallback(() => {
     const input = inputRef.current;
@@ -71,6 +80,7 @@ export const Composer = ({ className, placeholder = "Type your query here" }: Co
         <textarea
           ref={inputRef}
           value={textContent}
+          autoFocus
           onChange={(e) => setTextContent(e.target.value)}
           onScroll={updateInputOverflow}
           className="openui-agent-thread-composer__input"

packages/react-ui/src/components/AgentInterface/components/DesktopWelcomeComposer.tsx

@@ -1,7 +1,9 @@
-import { useThread } from "@openuidev/react-headless";
+import { useThread, useThreadList } from "@openuidev/react-headless";
 import clsx from "clsx";
 import { ArrowUp, Square } from "lucide-react";
 import { useLayoutEffect, useRef } from "react";
+import { useLayoutContext } from "../../../context/LayoutContext";
+import { useAutoFocus } from "../../../hooks/useAutoFocus";
 import { useComposerState } from "../../../hooks/useComposerState";
 import { IconButton } from "../../IconButton";
 
@@ -20,6 +22,13 @@ export const DesktopWelcomeComposer = ({
   const isRunning = useThread((s) => s.isRunning);
   const isLoadingMessages = useThread((s) => s.isLoadingMessages);
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const selectedThreadId = useThreadList((s) => s.selectedThreadId);
+  const { layout } = useLayoutContext();
+
+  useAutoFocus(inputRef, {
+    enabled: layout !== "mobile" && !isLoadingMessages,
+    focusKey: selectedThreadId,
+  });
 
   const handleSubmit = () => {
     if (!textContent.trim() || isRunning || isLoadingMessages) {

packages/react-ui/src/hooks/useAutoFocus.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect, type RefObject } from "react";
+
+/** Whether an element is currently rendered on screen enough to receive focus. */
+const canFocus = (el: HTMLElement) =>
+  typeof el.checkVisibility === "function" ? el.checkVisibility() : el.getClientRects().length > 0;
+
+export interface UseAutoFocusOptions {
+  /** @default true */
+  enabled?: boolean;
+  /** When this value changes, the element is re-focused */
+  focusKey?: unknown;
+}
+
+/**
+ * Focuses a ref'd element on mount, whenever `focusKey` changes, and whenever
+ * `enabled` flips back to `true` — but only while the element is actually on
+ * screen.
+ */
+export const useAutoFocus = <T extends HTMLElement | null>(
+  ref: RefObject<T>,
+  { enabled = true, focusKey }: UseAutoFocusOptions = {},
+) => {
+  useEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el || !canFocus(el)) return;
+    el.focus();
+  }, [ref, enabled, focusKey]);
+};