@jupyter/chat 0.14.0 → 0.15.0

package/lib/components/input/chat-input.js

@@ -118,7 +118,7 @@ export function ChatInput(props) {
             (!sendWithShiftEnter && !event.shiftKey)) {
             // Run all command providers
             await ((_a = props.chatCommandRegistry) === null || _a === void 0 ? void 0 : _a.onSubmit(model));
-            model.send(input);
+            model.send(model.value);
             event.stopPropagation();
             event.preventDefault();
         }

package/lib/components/input/use-chat-commands.js

@@ -14,7 +14,9 @@ import React, { useEffect, useState } from 'react';
 export function useChatCommands(inputModel, chatCommandRegistry) {
     // whether an option is highlighted in the chat commands menu
     const [highlighted, setHighlighted] = useState(false);
-    // whether the chat commands menu is open
+    // whether the chat commands menu is open.
+    // NOTE: every `setOpen(false)` call should be followed by a
+    // `setHighlighted(false)` call.
     const [open, setOpen] = useState(false);
     // current list of chat commands matched by the current word.
     // the current word is the space-separated word at the user's cursor.
@@ -55,7 +57,13 @@ export function useChatCommands(inputModel, chatCommandRegistry) {
             }
             // Otherwise, open/close the menu based on the presence of command
             // completions and set the menu entries.
-            setOpen(!!commandCompletions.length);
+            if (commandCompletions.length) {
+                setOpen(true);
+            }
+            else {
+                setOpen(false);
+                setHighlighted(false);
+            }
             setCommands(commandCompletions);
         }
         inputModel.currentWordChanged.connect(getCommands);
@@ -91,7 +99,7 @@ export function useChatCommands(inputModel, chatCommandRegistry) {
         autocompleteProps: {
             open,
             options: commands,
-            getOptionLabel: (command) => command.name,
+            getOptionLabel: (command) => typeof command === 'string' ? '' : command.name,
             renderOption: (defaultProps, command, __, ___) => {
                 const { key, ...listItemProps } = defaultProps;
                 const commandIcon = React.isValidElement(command.icon) ? (command.icon) : (React.createElement("span", null, command.icon instanceof LabIcon ? (React.createElement(command.icon.react, null)) : (command.icon)));

package/lib/input-model.js

@@ -3,7 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { Signal } from '@lumino/signaling';
-const WHITESPACE = new Set([' ', '\n', '\t']);
 /**
  * The input model.
  */
@@ -254,14 +253,42 @@ export class InputModel {
 }
 var Private;
 (function (Private) {
+    const WHITESPACE = new Set([' ', '\n', '\t']);
+    /**
+     * Returns the start index (inclusive) & end index (exclusive) that contain
+     * the current word. The start & end index can be passed to `String.slice()`
+     * to extract the current word. The returned range never includes any
+     * whitespace character unless it is escaped by a backslash `\`.
+     *
+     * NOTE: the escape sequence handling here is naive and non-recursive. This
+     * function considers the space in "`\\ `" as escaped, even though "`\\ `"
+     * defines a backslash followed by an _unescaped_ space in most languages.
+     */
     function getCurrentWordBoundaries(input, cursorIndex) {
         let start = cursorIndex;
         let end = cursorIndex;
         const n = input.length;
-        while (start > 0 && !WHITESPACE.has(input[start - 1])) {
+        while (
+        // terminate when `input[start - 1]` is whitespace
+        // i.e. `input[start]` is never whitespace after exiting
+        (start - 1 >= 0 && !WHITESPACE.has(input[start - 1])) ||
+            // unless it is preceded by a backslash
+            (start - 2 >= 0 &&
+                input[start - 2] === '\\' &&
+                WHITESPACE.has(input[start - 1]))) {
             start--;
         }
-        while (end < n && !WHITESPACE.has(input[end])) {
+        // `end` is an exclusive index unlike `start`, hence the different `while`
+        // condition here
+        while (
+        // terminate when `input[end]` is whitespace
+        // i.e. `input[end]` may be whitespace after exiting
+        (end < n && !WHITESPACE.has(input[end])) ||
+            // unless it is preceded by a backslash
+            (end < n &&
+                end - 1 >= 0 &&
+                input[end - 1] === '\\' &&
+                WHITESPACE.has(input[end]))) {
             end++;
         }
         return [start, end];

package/lib/types.d.ts

@@ -9,9 +9,14 @@ export interface IUser {
     color?: string;
     avatar_url?: string;
     /**
-     * The string to use to mention a user in the chat.
+     * The string to use to mention a user in the chat. This is computed via the
+     * following procedure:
+     *
+     * 1. Let `mention_name = user.display_name || user.name || user.username`.
+     *
+     * 2. Replace each ' ' character with '-' in `mention_name`.
      */
-    mention_name?: string;
+    mention_name: string;
     /**
      * Boolean identifying if user is a bot.
      */

package/lib/utils.js

@@ -46,9 +46,10 @@ export function replaceMentionToSpan(content, user) {
     if (!user.mention_name) {
         return content;
     }
-    const regex = new RegExp(user.mention_name, 'g');
-    const mention = `<span class="${MENTION_CLASS}">${user.mention_name}</span>`;
-    return content.replace(regex, mention);
+    const mention = '@' + user.mention_name;
+    const regex = new RegExp(mention, 'g');
+    const mentionEl = `<span class="${MENTION_CLASS}">${mention}</span>`;
+    return content.replace(regex, mentionEl);
 }
 /**
  * Replace a span to a mentioned to user string (@someone).
@@ -60,7 +61,8 @@ export function replaceSpanToMention(content, user) {
     if (!user.mention_name) {
         return content;
     }
-    const span = `<span class="${MENTION_CLASS}">${user.mention_name}</span>`;
-    const regex = new RegExp(span, 'g');
-    return content.replace(regex, user.mention_name);
+    const mention = '@' + user.mention_name;
+    const mentionEl = `<span class="${MENTION_CLASS}">${mention}</span>`;
+    const regex = new RegExp(mentionEl, 'g');
+    return content.replace(regex, mention);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",

package/src/components/input/chat-input.tsx

@@ -159,7 +159,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
     ) {
       // Run all command providers
       await props.chatCommandRegistry?.onSubmit(model);
-      model.send(input);
+      model.send(model.value);
       event.stopPropagation();
       event.preventDefault();
     }

package/src/components/input/use-chat-commands.tsx

@@ -37,7 +37,9 @@ export function useChatCommands(
   // whether an option is highlighted in the chat commands menu
   const [highlighted, setHighlighted] = useState(false);
 
-  // whether the chat commands menu is open
+  // whether the chat commands menu is open.
+  // NOTE: every `setOpen(false)` call should be followed by a
+  // `setHighlighted(false)` call.
   const [open, setOpen] = useState(false);
 
   // current list of chat commands matched by the current word.
@@ -90,7 +92,12 @@ export function useChatCommands(
 
       // Otherwise, open/close the menu based on the presence of command
       // completions and set the menu entries.
-      setOpen(!!commandCompletions.length);
+      if (commandCompletions.length) {
+        setOpen(true);
+      } else {
+        setOpen(false);
+        setHighlighted(false);
+      }
       setCommands(commandCompletions);
     }
 
@@ -138,7 +145,8 @@ export function useChatCommands(
     autocompleteProps: {
       open,
       options: commands,
-      getOptionLabel: (command: ChatCommand) => command.name,
+      getOptionLabel: (command: ChatCommand | string) =>
+        typeof command === 'string' ? '' : command.name,
       renderOption: (
         defaultProps,
         command: ChatCommand,

package/src/input-model.ts

@@ -11,8 +11,6 @@ import { ISelectionWatcher } from './selection-watcher';
 import { IChatContext } from './model';
 import { IAttachment, IUser } from './types';
 
-const WHITESPACE = new Set([' ', '\n', '\t']);
-
 /**
  * The chat input interface.
  */
@@ -525,6 +523,18 @@ export namespace InputModel {
 }
 
 namespace Private {
+  const WHITESPACE = new Set([' ', '\n', '\t']);
+
+  /**
+   * Returns the start index (inclusive) & end index (exclusive) that contain
+   * the current word. The start & end index can be passed to `String.slice()`
+   * to extract the current word. The returned range never includes any
+   * whitespace character unless it is escaped by a backslash `\`.
+   *
+   * NOTE: the escape sequence handling here is naive and non-recursive. This
+   * function considers the space in "`\\ `" as escaped, even though "`\\ `"
+   * defines a backslash followed by an _unescaped_ space in most languages.
+   */
   export function getCurrentWordBoundaries(
     input: string,
     cursorIndex: number
@@ -533,11 +543,30 @@ namespace Private {
     let end = cursorIndex;
     const n = input.length;
 
-    while (start > 0 && !WHITESPACE.has(input[start - 1])) {
+    while (
+      // terminate when `input[start - 1]` is whitespace
+      // i.e. `input[start]` is never whitespace after exiting
+      (start - 1 >= 0 && !WHITESPACE.has(input[start - 1])) ||
+      // unless it is preceded by a backslash
+      (start - 2 >= 0 &&
+        input[start - 2] === '\\' &&
+        WHITESPACE.has(input[start - 1]))
+    ) {
       start--;
     }
 
-    while (end < n && !WHITESPACE.has(input[end])) {
+    // `end` is an exclusive index unlike `start`, hence the different `while`
+    // condition here
+    while (
+      // terminate when `input[end]` is whitespace
+      // i.e. `input[end]` may be whitespace after exiting
+      (end < n && !WHITESPACE.has(input[end])) ||
+      // unless it is preceded by a backslash
+      (end < n &&
+        end - 1 >= 0 &&
+        input[end - 1] === '\\' &&
+        WHITESPACE.has(input[end]))
+    ) {
       end++;
     }
 

package/src/types.ts

@@ -14,9 +14,14 @@ export interface IUser {
   color?: string;
   avatar_url?: string;
   /**
-   * The string to use to mention a user in the chat.
+   * The string to use to mention a user in the chat. This is computed via the
+   * following procedure:
+   *
+   * 1. Let `mention_name = user.display_name || user.name || user.username`.
+   *
+   * 2. Replace each ' ' character with '-' in `mention_name`.
    */
-  mention_name?: string;
+  mention_name: string;
   /**
    * Boolean identifying if user is a bot.
    */

package/src/utils.ts

@@ -60,9 +60,10 @@ export function replaceMentionToSpan(content: string, user: IUser): string {
   if (!user.mention_name) {
     return content;
   }
-  const regex = new RegExp(user.mention_name, 'g');
-  const mention = `<span class="${MENTION_CLASS}">${user.mention_name}</span>`;
-  return content.replace(regex, mention);
+  const mention = '@' + user.mention_name;
+  const regex = new RegExp(mention, 'g');
+  const mentionEl = `<span class="${MENTION_CLASS}">${mention}</span>`;
+  return content.replace(regex, mentionEl);
 }
 
 /**
@@ -75,7 +76,8 @@ export function replaceSpanToMention(content: string, user: IUser): string {
   if (!user.mention_name) {
     return content;
   }
-  const span = `<span class="${MENTION_CLASS}">${user.mention_name}</span>`;
-  const regex = new RegExp(span, 'g');
-  return content.replace(regex, user.mention_name);
+  const mention = '@' + user.mention_name;
+  const mentionEl = `<span class="${MENTION_CLASS}">${mention}</span>`;
+  const regex = new RegExp(mentionEl, 'g');
+  return content.replace(regex, mention);
 }