fix(ui): auto-focus chat input on Hub mount (#8007)
Signed-off-by: Douwe Osinga <douwe@squareup.com> Co-authored-by: Douwe Osinga <douwe@squareup.com>
This commit is contained in:
@@ -15,7 +15,7 @@ import { AppEvents } from '../constants/events';
|
|||||||
* Hub (input submission) → Create Session → Pair (with session ID and initial message)
|
* Hub (input submission) → Create Session → Pair (with session ID and initial message)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import { SessionInsights } from './sessions/SessionsInsights';
|
import { SessionInsights } from './sessions/SessionsInsights';
|
||||||
import ChatInput from './ChatInput';
|
import ChatInput from './ChatInput';
|
||||||
import { ChatState } from '../types/chatState';
|
import { ChatState } from '../types/chatState';
|
||||||
@@ -39,6 +39,15 @@ export default function Hub({
|
|||||||
const { extensionsList } = useConfig();
|
const { extensionsList } = useConfig();
|
||||||
const [workingDir, setWorkingDir] = useState(getInitialWorkingDir());
|
const [workingDir, setWorkingDir] = useState(getInitialWorkingDir());
|
||||||
const [isCreatingSession, setIsCreatingSession] = useState(false);
|
const [isCreatingSession, setIsCreatingSession] = useState(false);
|
||||||
|
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
|
||||||
|
// rAF is more reliable than autoFocus across async render boundaries (Suspense, OnboardingGuard, etc.)
|
||||||
|
useEffect(() => {
|
||||||
|
const frameId = requestAnimationFrame(() => {
|
||||||
|
inputRef.current?.focus();
|
||||||
|
});
|
||||||
|
return () => cancelAnimationFrame(frameId);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const handleSubmit = async (input: UserInput) => {
|
const handleSubmit = async (input: UserInput) => {
|
||||||
const { msg: userMessage, images } = input;
|
const { msg: userMessage, images } = input;
|
||||||
@@ -101,6 +110,7 @@ export default function Hub({
|
|||||||
sessionCosts={undefined}
|
sessionCosts={undefined}
|
||||||
toolCount={0}
|
toolCount={0}
|
||||||
onWorkingDirChange={setWorkingDir}
|
onWorkingDirChange={setWorkingDir}
|
||||||
|
inputRef={inputRef}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user