Shortcut to focus on the chat input (#80)

* Add an function in the chat model to focus on the input

* Add a shortcut to focus on the current collaborative chat input

* Add a shortcut to focus on the websocket chat input

Author: brichet

packages/jupyter-chat/src/components/chat-input.tsx

@@ -18,7 +18,11 @@ import { Send, Cancel } from '@mui/icons-material';
 import clsx from 'clsx';
 import { IChatModel } from '../model';
 import { IAutocompletionRegistry } from '../registry';
-import { AutocompleteCommand, IAutocompletionCommandsProps } from '../types';
+import {
+  AutocompleteCommand,
+  IAutocompletionCommandsProps,
+  IConfig
+} from '../types';
 
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
@@ -32,10 +36,26 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
     model.config.sendWithShiftEnter ?? false
   );
 
+  // store reference to the input element to enable focusing it easily
+  const inputRef = useRef<HTMLInputElement>();
+
   useEffect(() => {
-    model.configChanged.connect((_, config) => {
+    const configChanged = (_: IChatModel, config: IConfig) => {
       setSendWithShiftEnter(config.sendWithShiftEnter ?? false);
-    });
+    };
+    model.configChanged.connect(configChanged);
+
+    const focusInputElement = () => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    };
+    model.focusInputSignal?.connect(focusInputElement);
+
+    return () => {
+      model.configChanged?.disconnect(configChanged);
+      model.focusInputSignal?.disconnect(focusInputElement);
+    };
   }, [model]);
 
   // The autocomplete commands options.
@@ -177,6 +197,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
             multiline
             onKeyDown={handleKeyDown}
             placeholder="Start chatting"
+            inputRef={inputRef}
             InputProps={{
               ...params.InputProps,
               endAdornment: (

packages/jupyter-chat/src/model.ts

@@ -75,6 +75,11 @@ export interface IChatModel extends IDisposable {
    */
   readonly viewportChanged?: ISignal<IChatModel, number[]>;
 
+  /**
+   * A signal emitting when the focus is requested on the input.
+   */
+  readonly focusInputSignal?: ISignal<IChatModel, void>;
+
   /**
    * Send a message, to be defined depending on the chosen technology.
    * Default to no-op.
@@ -139,6 +144,11 @@ export interface IChatModel extends IDisposable {
    * @param count - the number of messages to delete.
    */
   messagesDeleted(index: number, count: number): void;
+
+  /**
+   * Function to request the focus on the input of the chat.
+   */
+  focusInput(): void;
 }
 
 /**
@@ -328,6 +338,13 @@ export class ChatModel implements IChatModel {
     return this._viewportChanged;
   }
 
+  /**
+   * A signal emitting when the focus is requested on the input.
+   */
+  get focusInputSignal(): ISignal<IChatModel, void> {
+    return this._focusInputSignal;
+  }
+
   /**
    * Send a message, to be defined depending on the chosen technology.
    * Default to no-op.
@@ -435,6 +452,13 @@ export class ChatModel implements IChatModel {
     this._messagesUpdated.emit();
   }
 
+  /**
+   * Function to request the focus on the input of the chat.
+   */
+  focusInput(): void {
+    this._focusInputSignal.emit();
+  }
+
   /**
    * Add unread messages to the list.
    * @param indexes - list of new indexes.
@@ -498,6 +522,7 @@ export class ChatModel implements IChatModel {
   private _configChanged = new Signal<IChatModel, IConfig>(this);
   private _unreadChanged = new Signal<IChatModel, number[]>(this);
   private _viewportChanged = new Signal<IChatModel, number[]>(this);
+  private _focusInputSignal = new Signal<ChatModel, void>(this);
 }
 
 /**

packages/jupyterlab-collaborative-chat/src/token.ts

@@ -78,13 +78,17 @@ export const CommandIDs = {
    */
   openChat: 'collaborative-chat:open',
   /**
-   * Move a main widget to the side panel
+   * Move a main widget to the side panel.
    */
   moveToSide: 'collaborative-chat:moveToSide',
   /**
    * Mark as read.
    */
-  markAsRead: 'collaborative-chat:markAsRead'
+  markAsRead: 'collaborative-chat:markAsRead',
+  /**
+   * Focus the input of the current chat.
+   */
+  focusInput: 'collaborative-chat:focusInput'
 };
 
 /**

packages/jupyterlab-collaborative-chat/src/widget.tsx

@@ -73,7 +73,7 @@ export class CollaborativeChatPanel extends DocumentWidget<
    * The model for the widget.
    */
   get model(): CollaborativeChatModel {
-    return this.content.model as CollaborativeChatModel;
+    return this.context.model;
   }
 
   /**

python/jupyterlab-collaborative-chat/schema/commands.json

@@ -23,6 +23,14 @@
       }
     ]
   },
+  "jupyter.lab.shortcuts": [
+    {
+      "command": "collaborative-chat:focusInput",
+      "keys": ["Accel Shift 1"],
+      "selector": "body",
+      "preventDefault": false
+    }
+  ],
   "properties": {},
   "additionalProperties": false
 }

python/jupyterlab-collaborative-chat/src/index.ts

@@ -512,6 +512,25 @@ const chatCommands: JupyterFrontEndPlugin<void> = {
       .catch(e =>
         console.error('The command to open a chat is not initialized\n', e)
       );
+
+    // The command to focus the input of the current chat widget.
+    commands.addCommand(CommandIDs.focusInput, {
+      caption: 'Focus the input of the current chat widget',
+      isEnabled: () => tracker.currentWidget !== null,
+      execute: async () => {
+        const widget = tracker.currentWidget;
+        // Ensure widget is a CollaborativeChatPanel and is in main area
+        if (
+          !widget ||
+          !(widget instanceof CollaborativeChatPanel) ||
+          !Array.from(app.shell.widgets('main')).includes(widget)
+        ) {
+          return;
+        }
+        app.shell.activateById(widget.id);
+        widget.model.focusInput();
+      }
+    });
   }
 };
 

python/jupyterlab-ws-chat/schema/chat.json

@@ -2,6 +2,14 @@
   "title": "Chat configuration",
   "description": "Configuration for the chat panel",
   "type": "object",
+  "jupyter.lab.shortcuts": [
+    {
+      "command": "websocket-chat:focusInput",
+      "keys": ["Accel Shift 1"],
+      "selector": "body",
+      "preventDefault": false
+    }
+  ],
   "properties": {
     "sendWithShiftEnter": {
       "description": "Whether to send a message via Shift-Enter instead of Enter.",

python/jupyterlab-ws-chat/src/index.ts

@@ -64,6 +64,8 @@ const chat: JupyterFrontEndPlugin<void> = {
     settingsRegistry: ISettingRegistry | null,
     themeManager: IThemeManager | null
   ) => {
+    const { commands } = app;
+
     // Create an active cell manager for code toolbar.
     const activeCellManager = new ActiveCellManager({
       tracker: notebookTracker,
@@ -146,7 +148,17 @@ const chat: JupyterFrontEndPlugin<void> = {
       restorer.add(chatWidget as ReactWidget, 'jupyter-chat');
     }
 
-    console.log('Chat extension initialized');
+    // The command to focus the input of the chat widget.
+    commands.addCommand('websocket-chat:focusInput', {
+      caption: 'Focus the input of the chat widget',
+      isEnabled: () => chatWidget !== null,
+      execute: async () => {
+        if (chatWidget !== null) {
+          app.shell.activateById(chatWidget.id);
+          chatHandler.focusInput();
+        }
+      }
+    });
   }
 };