@jupyter/chat 0.3.0 → 0.4.0

package/lib/components/chat-input.js

@@ -15,11 +15,26 @@ export function ChatInput(props) {
     const autocompletion = useRef();
     const [input, setInput] = useState(props.value || '');
     const [sendWithShiftEnter, setSendWithShiftEnter] = useState((_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
+    // store reference to the input element to enable focusing it easily
+    const inputRef = useRef();
     useEffect(() => {
-        model.configChanged.connect((_, config) => {
+        var _a;
+        const configChanged = (_, config) => {
             var _a;
             setSendWithShiftEnter((_a = config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
-        });
+        };
+        model.configChanged.connect(configChanged);
+        const focusInputElement = () => {
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+        };
+        (_a = model.focusInputSignal) === null || _a === void 0 ? void 0 : _a.connect(focusInputElement);
+        return () => {
+            var _a, _b;
+            (_a = model.configChanged) === null || _a === void 0 ? void 0 : _a.disconnect(configChanged);
+            (_b = model.focusInputSignal) === null || _b === void 0 ? void 0 : _b.disconnect(focusInputElement);
+        };
     }, [model]);
     // The autocomplete commands options.
     const [commandOptions, setCommandOptions] = useState([]);
@@ -131,7 +146,7 @@ export function ChatInput(props) {
                         padding: 2
                     }
                 }
-            }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "outlined", multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", InputProps: {
+            }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "outlined", multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", inputRef: inputRef, InputProps: {
                     ...params.InputProps,
                     endAdornment: (React.createElement(InputAdornment, { position: "end" },
                         props.onCancel && (React.createElement(IconButton, { size: "small", color: "primary", onClick: onCancel, title: 'Cancel edition', className: clsx(CANCEL_BUTTON_CLASS) },

package/lib/model.d.ts

@@ -51,6 +51,10 @@ export interface IChatModel extends IDisposable {
      * A signal emitting when the viewport change.
      */
     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.
@@ -104,6 +108,10 @@ 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;
 }
 /**
  * The default chat model implementation.
@@ -166,6 +174,10 @@ export declare class ChatModel implements IChatModel {
      * A signal emitting when the viewport change.
      */
     get viewportChanged(): ISignal<IChatModel, number[]>;
+    /**
+     * A signal emitting when the focus is requested on the input.
+     */
+    get focusInputSignal(): ISignal<IChatModel, void>;
     /**
      * Send a message, to be defined depending on the chosen technology.
      * Default to no-op.
@@ -207,6 +219,10 @@ export declare class ChatModel implements IChatModel {
      * @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;
     /**
      * Add unread messages to the list.
      * @param indexes - list of new indexes.
@@ -236,6 +252,7 @@ export declare class ChatModel implements IChatModel {
     private _configChanged;
     private _unreadChanged;
     private _viewportChanged;
+    private _focusInputSignal;
 }
 /**
  * The chat model namespace.

package/lib/model.js

@@ -24,6 +24,7 @@ export class ChatModel {
         this._configChanged = new Signal(this);
         this._unreadChanged = new Signal(this);
         this._viewportChanged = new Signal(this);
+        this._focusInputSignal = new Signal(this);
         const config = (_a = options.config) !== null && _a !== void 0 ? _a : {};
         // Stack consecutive messages from the same user by default.
         this._config = { stackMessages: true, ...config };
@@ -172,6 +173,12 @@ export class ChatModel {
     get viewportChanged() {
         return this._viewportChanged;
     }
+    /**
+     * A signal emitting when the focus is requested on the input.
+     */
+    get focusInputSignal() {
+        return this._focusInputSignal;
+    }
     /**
      * Send a message, to be defined depending on the chosen technology.
      * Default to no-op.
@@ -268,6 +275,12 @@ export class ChatModel {
         this._messages.splice(index, count);
         this._messagesUpdated.emit();
     }
+    /**
+     * Function to request the focus on the input of the chat.
+     */
+    focusInput() {
+        this._focusInputSignal.emit();
+    }
     /**
      * Add unread messages to the list.
      * @param indexes - list of new indexes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -70,6 +70,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@jupyterlab/testing": "^4.2.0",
     "@types/jest": "^29.2.0",
     "@types/json-schema": "^7.0.11",
     "@types/react": "^18.2.0",
@@ -102,20 +103,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "jupyterlab": {
-    "discovery": {
-      "server": {
-        "managers": [
-          "pip"
-        ],
-        "base": {
-          "name": "jupyter_chat"
-        }
-      }
-    },
-    "extension": false,
-    "schemaDir": "schema"
-  },
   "eslintIgnore": [
     "node_modules",
     "dist",

package/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: (

package/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);
 }
 
 /**