Add keyboard shortcut command to focus chat input (#876)

* Focus chat input with keyboard * Focus chat input with keyboard * Rename `inputFocusRequested` to `focusInputSignal` * Make sure that the shortcut does not interrupt default action
jupyterlab · Jul 8, 2024 · 2019571 · 2019571
1 parent ab38fe7
commit 2019571
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 4 deletions.
diff --git a/packages/jupyter-ai/schema/plugin.json b/packages/jupyter-ai/schema/plugin.json
@@ -4,6 +4,14 @@
   "description": "JupyterLab generative artificial intelligence integration.",
   "jupyter.lab.setting-icon": "jupyter-ai::chat",
   "jupyter.lab.setting-icon-label": "Jupyter AI Chat",
+  "jupyter.lab.shortcuts": [
+    {
+      "command": "jupyter-ai:focus-chat-input",
+      "keys": ["Accel Shift 1"],
+      "selector": "body",
+      "preventDefault": false
+    }
+  ],
   "additionalProperties": false,
   "type": "object"
 }
diff --git a/packages/jupyter-ai/src/components/chat-input.tsx b/packages/jupyter-ai/src/components/chat-input.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import {
   Autocomplete,
@@ -22,6 +22,7 @@ import {
   HideSource,
   AutoFixNormal
 } from '@mui/icons-material';
+import { ISignal } from '@lumino/signaling';
 
 import { AiService } from '../handler';
 import { SendButton, SendButtonProps } from './chat-input/send-button';
@@ -33,6 +34,7 @@ type ChatInputProps = {
   onSend: (selection?: AiService.Selection) => unknown;
   hasSelection: boolean;
   includeSelection: boolean;
+  focusInputSignal: ISignal<unknown, void>;
   toggleIncludeSelection: () => unknown;
   replaceSelection: boolean;
   toggleReplaceSelection: () => unknown;
@@ -131,6 +133,24 @@ export function ChatInput(props: ChatInputProps): JSX.Element {
   // controls whether the slash command autocomplete is open
   const [open, setOpen] = useState<boolean>(false);
 
+  // store reference to the input element to enable focusing it easily
+  const inputRef = useRef<HTMLInputElement>();
+
+  /**
+   * Effect: connect the signal emitted on input focus request.
+   */
+  useEffect(() => {
+    const focusInputElement = () => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    };
+    props.focusInputSignal.connect(focusInputElement);
+    return () => {
+      props.focusInputSignal.disconnect(focusInputElement);
+    };
+  }, []);
+
   /**
    * Effect: Open the autocomplete when the user types a slash into an empty
    * chat input. Close the autocomplete when the user clears the chat input.
@@ -284,6 +304,7 @@ export function ChatInput(props: ChatInputProps): JSX.Element {
             multiline
             placeholder="Ask Jupyternaut"
             onKeyDown={handleKeyDown}
+            inputRef={inputRef}
             InputProps={{
               ...params.InputProps,
               endAdornment: (

diff --git a/packages/jupyter-ai/src/components/chat.tsx b/packages/jupyter-ai/src/components/chat.tsx
@@ -6,6 +6,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import type { Awareness } from 'y-protocols/awareness';
 import type { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISignal } from '@lumino/signaling';
 
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './chat-messages';
@@ -31,10 +32,12 @@ type ChatBodyProps = {
   chatHandler: ChatHandler;
   setChatView: (view: ChatView) => void;
   rmRegistry: IRenderMimeRegistry;
+  focusInputSignal: ISignal<unknown, void>;
 };
 
 function ChatBody({
   chatHandler,
+  focusInputSignal,
   setChatView: chatViewHandler,
   rmRegistry: renderMimeRegistry
 }: ChatBodyProps): JSX.Element {
@@ -162,6 +165,7 @@ function ChatBody({
         onSend={onSend}
         hasSelection={!!textSelection?.text}
         includeSelection={includeSelection}
+        focusInputSignal={focusInputSignal}
         toggleIncludeSelection={() =>
           setIncludeSelection(includeSelection => !includeSelection)
         }
@@ -192,6 +196,7 @@ export type ChatProps = {
   completionProvider: IJaiCompletionProvider | null;
   openInlineCompleterSettings: () => void;
   activeCellManager: ActiveCellManager;
+  focusInputSignal: ISignal<unknown, void>;
 };
 
 enum ChatView {
@@ -244,6 +249,7 @@ export function Chat(props: ChatProps): JSX.Element {
                   chatHandler={props.chatHandler}
                   setChatView={setView}
                   rmRegistry={props.rmRegistry}
+                  focusInputSignal={props.focusInputSignal}
                 />
               )}
               {view === ChatView.Settings && (

diff --git a/packages/jupyter-ai/src/index.ts b/packages/jupyter-ai/src/index.ts
@@ -21,9 +21,17 @@ import { statusItemPlugin } from './status';
 import { IJaiCompletionProvider } from './tokens';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ActiveCellManager } from './contexts/active-cell-context';
+import { Signal } from '@lumino/signaling';
 
 export type DocumentTracker = IWidgetTracker<IDocumentWidget>;
 
+export namespace CommandIDs {
+  /**
+   * Command to focus the input.
+   */
+  export const focusChatInput = 'jupyter-ai:focus-chat-input';
+}
+
 /**
  * Initialization data for the jupyter_ai extension.
  */
@@ -66,7 +74,9 @@ const plugin: JupyterFrontEndPlugin<void> = {
       });
     };
 
-    let chatWidget: ReactWidget | null = null;
+    const focusInputSignal = new Signal<unknown, void>({});
+
+    let chatWidget: ReactWidget;
     try {
       await chatHandler.initialize();
       chatWidget = buildChatSidebar(
@@ -77,7 +87,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
         rmRegistry,
         completionProvider,
         openInlineCompleterSettings,
-        activeCellManager
+        activeCellManager,
+        focusInputSignal
       );
     } catch (e) {
       chatWidget = buildErrorWidget(themeManager);
@@ -91,6 +102,15 @@ const plugin: JupyterFrontEndPlugin<void> = {
     if (restorer) {
       restorer.add(chatWidget, 'jupyter-ai-chat');
     }
+
+    // Define jupyter-ai commands
+    app.commands.addCommand(CommandIDs.focusChatInput, {
+      execute: () => {
+        app.shell.activateById(chatWidget.id);
+        focusInputSignal.emit();
+      },
+      label: 'Focus the jupyter-ai chat'
+    });
   }
 };
 

diff --git a/packages/jupyter-ai/src/widgets/chat-sidebar.tsx b/packages/jupyter-ai/src/widgets/chat-sidebar.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ISignal } from '@lumino/signaling';
 import { ReactWidget } from '@jupyterlab/apputils';
 import type { IThemeManager } from '@jupyterlab/apputils';
 import type { Awareness } from 'y-protocols/awareness';
@@ -19,7 +20,8 @@ export function buildChatSidebar(
   rmRegistry: IRenderMimeRegistry,
   completionProvider: IJaiCompletionProvider | null,
   openInlineCompleterSettings: () => void,
-  activeCellManager: ActiveCellManager
+  activeCellManager: ActiveCellManager,
+  focusInputSignal: ISignal<unknown, void>
 ): ReactWidget {
   const ChatWidget = ReactWidget.create(
     <Chat
@@ -31,6 +33,7 @@ export function buildChatSidebar(
       completionProvider={completionProvider}
       openInlineCompleterSettings={openInlineCompleterSettings}
       activeCellManager={activeCellManager}
+      focusInputSignal={focusInputSignal}
     />
   );
   ChatWidget.id = 'jupyter-ai::chat';