feat(flow-chat): focus composer when typing

Author: bobleer

src/web-ui/src/flow_chat/components/ChatInput.tsx

@@ -4325,24 +4325,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     });
   }, []);
 
-  // Space-to-focus: when no editable element is focused, Space key focuses the input.
-  useEffect(() => {
-    const handleGlobalKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== ' ') return;
-      const target = e.target as HTMLElement;
-      const isEditable =
-        target.tagName === 'INPUT' ||
-        target.tagName === 'TEXTAREA' ||
-        target.isContentEditable ||
-        target.closest('[contenteditable="true"]') !== null;
-      if (isEditable) return;
-      e.preventDefault();
-      focusRichTextInputSoon();
-    };
-    document.addEventListener('keydown', handleGlobalKeyDown, true);
-    return () => document.removeEventListener('keydown', handleGlobalKeyDown, true);
-  }, [focusRichTextInputSoon]);
-
   const insertSkillIntoInput = useCallback(
     (skillName: string) => {
       dispatchInput({ type: 'ACTIVATE' });

src/web-ui/src/flow_chat/hooks/useComposerDefaultFocus.test.tsx

@@ -56,6 +56,17 @@ describe('useComposerDefaultFocus', () => {
     return container.querySelector('[data-testid="composer"]') as HTMLDivElement;
   }
 
+  function pressKey(key: string, init: KeyboardEventInit = {}): KeyboardEvent {
+    const event = new KeyboardEvent('keydown', {
+      key,
+      bubbles: true,
+      cancelable: true,
+      ...init,
+    });
+    act(() => document.body.dispatchEvent(event));
+    return event;
+  }
+
   it('focuses the composer when the active session has no input owner', () => {
     const composer = renderProbe({ sessionId: 'session-a', isSceneActive: true });
 
@@ -126,8 +137,84 @@ describe('useComposerDefaultFocus', () => {
     button.focus();
 
     const composer = renderProbe({ sessionId: 'session-a', isSceneActive: true });
+    pressKey('a');
 
     expect(document.activeElement).toBe(button);
     expect(document.activeElement).not.toBe(composer);
   });
+
+  it('moves focus to the composer for a printable character without consuming it', () => {
+    const composer = renderProbe({ sessionId: 'session-a', isSceneActive: true });
+    const button = document.createElement('button');
+    document.body.appendChild(button);
+    button.focus();
+
+    const event = pressKey('a');
+
+    expect(document.activeElement).toBe(composer);
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it('moves focus to the composer for Space without consuming it', () => {
+    const composer = renderProbe({ sessionId: 'session-a', isSceneActive: true });
+    const button = document.createElement('button');
+    document.body.appendChild(button);
+    button.focus();
+
+    const event = pressKey(' ');
+
+    expect(document.activeElement).toBe(composer);
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it.each(['Dead', 'Process'])('focuses the composer for %s text entry', key => {
+    const composer = renderProbe({ sessionId: 'session-a', isSceneActive: true });
+    const button = document.createElement('button');
+    document.body.appendChild(button);
+    button.focus();
+
+    pressKey(key);
+
+    expect(document.activeElement).toBe(composer);
+  });
+
+  it('does not steal keyboard shortcuts or navigation keys', () => {
+    const composer = renderProbe({ sessionId: 'session-a', isSceneActive: true });
+    const button = document.createElement('button');
+    document.body.appendChild(button);
+
+    for (const [key, init] of [
+      ['k', { ctrlKey: true }],
+      ['k', { metaKey: true }],
+      ['k', { altKey: true }],
+      ['Enter', {}],
+      ['ArrowDown', {}],
+    ] satisfies Array<[string, KeyboardEventInit]>) {
+      button.focus();
+      pressKey(key, init);
+      expect(document.activeElement).toBe(button);
+      expect(document.activeElement).not.toBe(composer);
+    }
+  });
+
+  it('preserves another visible text input while typing', () => {
+    const alternateInput = document.createElement('textarea');
+    document.body.appendChild(alternateInput);
+    markRendered(alternateInput);
+    alternateInput.focus();
+
+    const composer = renderProbe({ sessionId: 'session-a', isSceneActive: true });
+    pressKey('a');
+
+    expect(document.activeElement).toBe(alternateInput);
+    expect(document.activeElement).not.toBe(composer);
+  });
+
+  it('does not focus an inactive scene while typing', () => {
+    const composer = renderProbe({ sessionId: 'session-a', isSceneActive: false });
+
+    pressKey('a');
+
+    expect(document.activeElement).not.toBe(composer);
+  });
 });

src/web-ui/src/flow_chat/hooks/useComposerDefaultFocus.ts

@@ -47,6 +47,22 @@ function hasBlockingModal(): boolean {
   return document.querySelector('[role="dialog"][aria-modal="true"]') !== null;
 }
 
+function isTextEntryKey(event: KeyboardEvent): boolean {
+  if (event.defaultPrevented || event.metaKey) {
+    return false;
+  }
+
+  const usesAltGraph = event.getModifierState?.('AltGraph') ?? false;
+  if ((event.ctrlKey || event.altKey) && !usesAltGraph) {
+    return false;
+  }
+
+  return event.key.length === 1
+    || event.key === 'Dead'
+    || event.key === 'Process'
+    || event.keyCode === 229;
+}
+
 interface UseComposerDefaultFocusOptions {
   editorRef: RefObject<HTMLElement | null>;
   sessionId: string | null;
@@ -106,4 +122,38 @@ export function useComposerDefaultFocus({
       }
     };
   }, [focusComposerIfUnowned]);
+
+  useEffect(() => {
+    const focusComposerForTextEntry = (event: KeyboardEvent) => {
+      if (
+        !sceneActiveRef.current
+        || !sessionIdRef.current
+        || !isTextEntryKey(event)
+        || hasBlockingModal()
+      ) {
+        return;
+      }
+
+      const editor = editorRef.current;
+      if (
+        !editor
+        || !editor.isConnected
+        || editor.getAttribute('contenteditable') === 'false'
+        || editor.getAttribute('aria-disabled') === 'true'
+        || document.activeElement === editor
+        || hasVisibleTextInputFocus()
+      ) {
+        return;
+      }
+
+      // Focus synchronously and leave the event untouched. The browser can then
+      // apply this same keystroke (including IME/dead-key input) to the composer.
+      editor.focus({ preventScroll: true });
+    };
+
+    document.addEventListener('keydown', focusComposerForTextEntry, true);
+    return () => {
+      document.removeEventListener('keydown', focusComposerForTextEntry, true);
+    };
+  }, [editorRef]);
 }