From 48061839b92f004f3a0c4318d7b18ec45ff6ed2f Mon Sep 17 00:00:00 2001
From: Abhin Rustagi <abhin@thesys.dev>
Date: Tue, 21 Jul 2026 15:58:13 +0530
Subject: [PATCH] feat: add hoook for auto-focus

---
 .../AgentInterface/components/Composer.tsx    | 12 ++++++-
 .../components/DesktopWelcomeComposer.tsx     | 11 ++++++-
 packages/react-ui/src/hooks/useAutoFocus.ts   | 31 +++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-ui/src/hooks/useAutoFocus.ts

diff --git a/packages/react-ui/src/components/AgentInterface/components/Composer.tsx b/packages/react-ui/src/components/AgentInterface/components/Composer.tsx
index 18f808eda..1aa51fdfd 100644
--- a/packages/react-ui/src/components/AgentInterface/components/Composer.tsx
+++ b/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"
diff --git a/packages/react-ui/src/components/AgentInterface/components/DesktopWelcomeComposer.tsx b/packages/react-ui/src/components/AgentInterface/components/DesktopWelcomeComposer.tsx
index 1acb6f403..4c536ecb1 100644
--- a/packages/react-ui/src/components/AgentInterface/components/DesktopWelcomeComposer.tsx
+++ b/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) {
diff --git a/packages/react-ui/src/hooks/useAutoFocus.ts b/packages/react-ui/src/hooks/useAutoFocus.ts
new file mode 100644
index 000000000..13ac82fb7
--- /dev/null
+++ b/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]);
+};