@jupyter/chat 0.4.0 → 0.6.0

package/lib/utils.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { CodeMirrorEditor } from '@jupyterlab/codemirror';
+import { DocumentWidget } from '@jupyterlab/docregistry';
+import { FileEditor } from '@jupyterlab/fileeditor';
+import { Notebook } from '@jupyterlab/notebook';
+/**
+ * Gets the editor instance used by a document widget. Returns `null` if unable.
+ */
+export function getEditor(widget) {
+    var _a;
+    if (!(widget instanceof DocumentWidget)) {
+        return null;
+    }
+    let editor;
+    const { content } = widget;
+    if (content instanceof FileEditor) {
+        editor = content.editor;
+    }
+    else if (content instanceof Notebook) {
+        editor = (_a = content.activeCell) === null || _a === void 0 ? void 0 : _a.editor;
+    }
+    if (!(editor instanceof CodeMirrorEditor)) {
+        return undefined;
+    }
+    return editor;
+}
+/**
+ * Gets the index of the cell associated with `cellId`.
+ */
+export function getCellIndex(notebook, cellId) {
+    var _a;
+    const idx = (_a = notebook.model) === null || _a === void 0 ? void 0 : _a.sharedModel.cells.findIndex(cell => cell.getId() === cellId);
+    return idx === undefined ? -1 : idx;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -57,6 +57,7 @@
     "@jupyter/react-components": "^0.15.2",
     "@jupyterlab/application": "^4.2.0",
     "@jupyterlab/apputils": "^4.3.0",
+    "@jupyterlab/fileeditor": "^4.2.0",
     "@jupyterlab/notebook": "^4.2.0",
     "@jupyterlab/rendermime": "^4.2.0",
     "@jupyterlab/ui-components": "^4.2.0",

package/src/active-cell-manager.ts

@@ -25,6 +25,9 @@ type CellWithErrorContent = {
   };
 };
 
+/**
+ * The active cell interface.
+ */
 export interface IActiveCellManager {
   /**
    * Whether the notebook is available and an active cell exists.

package/src/components/chat-input.tsx

@@ -8,25 +8,25 @@ import React, { useEffect, useRef, useState } from 'react';
 import {
   Autocomplete,
   Box,
-  IconButton,
   InputAdornment,
   SxProps,
   TextField,
   Theme
 } from '@mui/material';
-import { Send, Cancel } from '@mui/icons-material';
 import clsx from 'clsx';
+
+import { CancelButton } from './input/cancel-button';
+import { SendButton } from './input/send-button';
 import { IChatModel } from '../model';
 import { IAutocompletionRegistry } from '../registry';
 import {
   AutocompleteCommand,
   IAutocompletionCommandsProps,
-  IConfig
+  IConfig,
+  Selection
 } from '../types';
 
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
-const SEND_BUTTON_CLASS = 'jp-chat-send-button';
-const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 
 export function ChatInput(props: ChatInput.IProps): JSX.Element {
   const { autocompletionName, autocompletionRegistry, model } = props;
@@ -35,6 +35,16 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
   const [sendWithShiftEnter, setSendWithShiftEnter] = useState<boolean>(
     model.config.sendWithShiftEnter ?? false
   );
+  const [typingNotification, setTypingNotification] = useState<boolean>(
+    model.config.sendTypingNotification ?? false
+  );
+
+  // Display the include selection menu if it is not explicitly hidden, and if at least
+  // one of the tool to check for text or cell selection is enabled.
+  let hideIncludeSelection = props.hideIncludeSelection ?? false;
+  if (model.activeCellManager === null && model.selectionWatcher === null) {
+    hideIncludeSelection = true;
+  }
 
   // store reference to the input element to enable focusing it easily
   const inputRef = useRef<HTMLInputElement>();
@@ -42,6 +52,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
   useEffect(() => {
     const configChanged = (_: IChatModel, config: IConfig) => {
       setSendWithShiftEnter(config.sendWithShiftEnter ?? false);
+      setTypingNotification(config.sendTypingNotification ?? false);
     };
     model.configChanged.connect(configChanged);
 
@@ -138,10 +149,21 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
 
   /**
    * Triggered when sending the message.
+   *
+   * Add code block if cell or text is selected.
    */
-  function onSend() {
+  function onSend(selection?: Selection) {
+    let content = input;
+    if (selection) {
+      content += `
+
+\`\`\`
+${selection.source}
+\`\`\`
+`;
+    }
+    props.onSend(content);
     setInput('');
-    props.onSend(input);
   }
 
   /**
@@ -203,30 +225,19 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
               endAdornment: (
                 <InputAdornment position="end">
                   {props.onCancel && (
-                    <IconButton
-                      size="small"
-                      color="primary"
-                      onClick={onCancel}
-                      title={'Cancel edition'}
-                      className={clsx(CANCEL_BUTTON_CLASS)}
-                    >
-                      <Cancel />
-                    </IconButton>
+                    <CancelButton
+                      inputExists={input.length > 0}
+                      onCancel={onCancel}
+                    />
                   )}
-                  <IconButton
-                    size="small"
-                    color="primary"
-                    onClick={onSend}
-                    disabled={
-                      props.onCancel
-                        ? input === props.value
-                        : !input.trim().length
-                    }
-                    title={`Send message ${sendWithShiftEnter ? '(SHIFT+ENTER)' : '(ENTER)'}`}
-                    className={clsx(SEND_BUTTON_CLASS)}
-                  >
-                    <Send />
-                  </IconButton>
+                  <SendButton
+                    model={model}
+                    sendWithShiftEnter={sendWithShiftEnter}
+                    inputExists={input.length > 0}
+                    onSend={onSend}
+                    hideIncludeSelection={hideIncludeSelection}
+                    hasButtonOnLeft={!!props.onCancel}
+                  />
                 </InputAdornment>
               )
             }}
@@ -240,6 +251,9 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
         inputValue={input}
         onInputChange={(_, newValue: string) => {
           setInput(newValue);
+          if (typingNotification && model.inputChanged) {
+            model.inputChanged(newValue);
+          }
         }}
         onHighlightChange={
           /**
@@ -294,6 +308,10 @@ export namespace ChatInput {
      * The function to be called to cancel editing.
      */
     onCancel?: () => unknown;
+    /**
+     * Whether to allow or not including selection.
+     */
+    hideIncludeSelection?: boolean;
     /**
      * Custom mui/material styles.
      */

package/src/components/chat-messages.tsx

@@ -10,7 +10,7 @@ import {
   caretDownEmptyIcon,
   classes
 } from '@jupyterlab/ui-components';
-import { Avatar, Box, Typography } from '@mui/material';
+import { Avatar as MuiAvatar, Box, Typography } from '@mui/material';
 import type { SxProps, Theme } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useState, useRef } from 'react';
@@ -19,13 +19,14 @@ import { ChatInput } from './chat-input';
 import { RendermimeMarkdown } from './rendermime-markdown';
 import { ScrollContainer } from './scroll-container';
 import { IChatModel } from '../model';
-import { IChatMessage } from '../types';
+import { IChatMessage, IUser } from '../types';
 
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
 const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
 const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
+const WRITERS_CLASS = 'jp-chat-writers';
 const NAVIGATION_BUTTON_CLASS = 'jp-chat-navigation';
 const NAVIGATION_UNREAD_CLASS = 'jp-chat-navigation-unread';
 const NAVIGATION_TOP_CLASS = 'jp-chat-navigation-top';
@@ -47,6 +48,7 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
   const [messages, setMessages] = useState<IChatMessage[]>(model.messages);
   const refMsgBox = useRef<HTMLDivElement>(null);
   const inViewport = useRef<number[]>([]);
+  const [currentWriters, setCurrentWriters] = useState<IUser[]>([]);
 
   // The intersection observer that listen to all the message visibility.
   const observerRef = useRef<IntersectionObserver>(
@@ -68,6 +70,7 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
     }
 
     fetchHistory();
+    setCurrentWriters([]);
   }, [model]);
 
   /**
@@ -78,9 +81,16 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
       setMessages([...model.messages]);
     }
 
+    function handleWritersChange(_: IChatModel, writers: IUser[]) {
+      setCurrentWriters(writers);
+    }
+
     model.messagesUpdated.connect(handleChatEvents);
+    model.writersChanged?.connect(handleWritersChange);
+
     return function cleanup() {
       model.messagesUpdated.disconnect(handleChatEvents);
+      model.writersChanged?.disconnect(handleChatEvents);
     };
   }, [model]);
 
@@ -144,6 +154,7 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
             );
           })}
         </Box>
+        <Writers writers={currentWriters}></Writers>
       </ScrollContainer>
       <Navigation {...props} refMsgBox={refMsgBox} />
     </>
@@ -163,10 +174,6 @@ type ChatMessageHeaderProps = {
  */
 export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
   const [datetime, setDatetime] = useState<Record<number, string>>({});
-  const sharedStyles: SxProps<Theme> = {
-    height: '24px',
-    width: '24px'
-  };
   const message = props.message;
   const sender = message.sender;
   /**
@@ -206,32 +213,7 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
     }
   });
 
-  const bgcolor = sender.color;
-  const avatar = message.stacked ? null : sender.avatar_url ? (
-    <Avatar
-      sx={{
-        ...sharedStyles,
-        ...(bgcolor && { bgcolor })
-      }}
-      src={sender.avatar_url}
-    ></Avatar>
-  ) : sender.initials ? (
-    <Avatar
-      sx={{
-        ...sharedStyles,
-        ...(bgcolor && { bgcolor })
-      }}
-    >
-      <Typography
-        sx={{
-          fontSize: 'var(--jp-ui-font-size1)',
-          color: 'var(--jp-ui-inverse-font-color1)'
-        }}
-      >
-        {sender.initials}
-      </Typography>
-    </Avatar>
-  ) : null;
+  const avatar = message.stacked ? null : Avatar({ user: sender });
 
   const name =
     sender.display_name ?? sender.name ?? (sender.username || 'User undefined');
@@ -393,6 +375,7 @@ export function ChatMessage(props: ChatMessageProps): JSX.Element {
           onSend={(input: string) => updateMessage(message.id, input)}
           onCancel={() => cancelEdition()}
           model={model}
+          hideIncludeSelection={true}
         />
       ) : (
         <RendermimeMarkdown
@@ -407,6 +390,45 @@ export function ChatMessage(props: ChatMessageProps): JSX.Element {
   );
 }
 
+/**
+ * The writers component props.
+ */
+type writersProps = {
+  /**
+   * The list of users currently writing.
+   */
+  writers: IUser[];
+};
+
+/**
+ * The writers component, displaying the current writers.
+ */
+export function Writers(props: writersProps): JSX.Element | null {
+  const { writers } = props;
+  return writers.length > 0 ? (
+    <Box className={WRITERS_CLASS}>
+      {writers.map((writer, index) => (
+        <div>
+          <Avatar user={writer} small />
+          <span>
+            {writer.display_name ??
+              writer.name ??
+              (writer.username || 'User undefined')}
+          </span>
+          <span>
+            {index < writers.length - 1
+              ? index < writers.length - 2
+                ? ', '
+                : ' and '
+              : ''}
+          </span>
+        </div>
+      ))}
+      <span>{(writers.length > 1 ? ' are' : ' is') + ' writing'}</span>
+    </Box>
+  ) : null;
+}
+
 /**
  * The navigation component props.
  */
@@ -543,3 +565,61 @@ export function Navigation(props: NavigationProps): JSX.Element {
     </>
   );
 }
+
+/**
+ * The avatar props.
+ */
+type AvatarProps = {
+  /**
+   * The user to display an avatar.
+   */
+  user: IUser;
+  /**
+   * Whether the avatar should be small.
+   */
+  small?: boolean;
+};
+
+/**
+ * The avatar component.
+ */
+export function Avatar(props: AvatarProps): JSX.Element | null {
+  const { user } = props;
+
+  const sharedStyles: SxProps<Theme> = {
+    height: `${props.small ? '16' : '24'}px`,
+    width: `${props.small ? '16' : '24'}px`,
+    bgcolor: user.color,
+    fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`
+  };
+
+  const name =
+    user.display_name ?? user.name ?? (user.username || 'User undefined');
+  return user.avatar_url ? (
+    <MuiAvatar
+      sx={{
+        ...sharedStyles
+      }}
+      src={user.avatar_url}
+      alt={name}
+      title={name}
+    ></MuiAvatar>
+  ) : user.initials ? (
+    <MuiAvatar
+      sx={{
+        ...sharedStyles
+      }}
+      alt={name}
+      title={name}
+    >
+      <Typography
+        sx={{
+          fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`,
+          color: 'var(--jp-ui-inverse-font-color1)'
+        }}
+      >
+        {user.initials}
+      </Typography>
+    </MuiAvatar>
+  ) : null;
+}

package/src/components/chat.tsx

@@ -27,7 +27,7 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
   // handled by the listeners registered in the effect hooks above.
   const onSend = async (input: string) => {
     // send message to backend
-    model.addMessage({ body: input });
+    model.sendMessage({ body: input });
   };
 
   return (

package/src/components/code-blocks/code-toolbar.tsx

@@ -12,6 +12,7 @@ import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
 import { IActiveCellManager } from '../../active-cell-manager';
 import { replaceCellIcon } from '../../icons';
 import { IChatModel } from '../../model';
+import { ISelectionWatcher } from '../../selection-watcher';
 
 const CODE_TOOLBAR_CLASS = 'jp-chat-code-toolbar';
 const CODE_TOOLBAR_ITEM_CLASS = 'jp-chat-code-toolbar-item';
@@ -34,25 +35,41 @@ export function CodeToolbar(props: CodeToolbarProps): JSX.Element {
   );
 
   const activeCellManager = model.activeCellManager;
+  const selectionWatcher = model.selectionWatcher;
 
   const [toolbarBtnProps, setToolbarBtnProps] = useState<ToolbarButtonProps>({
-    content: content,
-    activeCellManager: activeCellManager,
-    activeCellAvailable: activeCellManager?.available ?? false
+    content,
+    activeCellManager,
+    selectionWatcher,
+    activeCellAvailable: !!activeCellManager?.available,
+    selectionExists: !!selectionWatcher?.selection
   });
 
   useEffect(() => {
-    activeCellManager?.availabilityChanged.connect(() => {
+    const toggleToolbar = () => {
+      setToolbarEnable(model.config.enableCodeToolbar ?? true);
+    };
+
+    const selectionStatusChange = () => {
       setToolbarBtnProps({
         content,
-        activeCellManager: activeCellManager,
-        activeCellAvailable: activeCellManager.available
+        activeCellManager,
+        selectionWatcher,
+        activeCellAvailable: !!activeCellManager?.available,
+        selectionExists: !!selectionWatcher?.selection
       });
-    });
-
-    model.configChanged.connect((_, config) => {
-      setToolbarEnable(config.enableCodeToolbar ?? true);
-    });
+    };
+
+    activeCellManager?.availabilityChanged.connect(selectionStatusChange);
+    selectionWatcher?.selectionChanged.connect(selectionStatusChange);
+    model.configChanged.connect(toggleToolbar);
+
+    selectionStatusChange();
+    return () => {
+      activeCellManager?.availabilityChanged.disconnect(selectionStatusChange);
+      selectionWatcher?.selectionChanged.disconnect(selectionStatusChange);
+      model.configChanged.disconnect(toggleToolbar);
+    };
   }, [model]);
 
   return activeCellManager === null || !toolbarEnable ? (
@@ -63,7 +80,7 @@ export function CodeToolbar(props: CodeToolbarProps): JSX.Element {
         display: 'flex',
         justifyContent: 'flex-end',
         alignItems: 'center',
-        padding: '6px 2px',
+        padding: '2px 2px',
         marginBottom: '1em',
         border: '1px solid var(--jp-cell-editor-border-color)',
         borderTop: 'none'
@@ -86,8 +103,10 @@ export function CodeToolbar(props: CodeToolbarProps): JSX.Element {
 
 type ToolbarButtonProps = {
   content: string;
-  activeCellAvailable?: boolean;
   activeCellManager: IActiveCellManager | null;
+  activeCellAvailable?: boolean;
+  selectionWatcher: ISelectionWatcher | null;
+  selectionExists?: boolean;
   className?: string;
 };
 
@@ -126,16 +145,35 @@ function InsertBelowButton(props: ToolbarButtonProps) {
 }
 
 function ReplaceButton(props: ToolbarButtonProps) {
-  const tooltip = props.activeCellAvailable
-    ? 'Replace active cell'
-    : 'Replace active cell (no active cell)';
+  const tooltip = props.selectionExists
+    ? `Replace selection (${props.selectionWatcher?.selection?.numLines} line(s))`
+    : props.activeCellAvailable
+      ? 'Replace selection (active cell)'
+      : 'Replace selection (no selection)';
+
+  const disabled = !props.activeCellAvailable && !props.selectionExists;
+
+  const replace = () => {
+    if (props.selectionExists) {
+      const selection = props.selectionWatcher?.selection;
+      if (!selection) {
+        return;
+      }
+      props.selectionWatcher?.replaceSelection({
+        ...selection,
+        text: props.content
+      });
+    } else if (props.activeCellAvailable) {
+      props.activeCellManager?.replace(props.content);
+    }
+  };
 
   return (
     <TooltippedIconButton
       className={props.className}
       tooltip={tooltip}
-      disabled={!props.activeCellAvailable}
-      onClick={() => props.activeCellManager?.replace(props.content)}
+      disabled={disabled}
+      onClick={replace}
     >
       <replaceCellIcon.react height="16px" width="16px" />
     </TooltippedIconButton>

package/src/components/input/cancel-button.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import React from 'react';
+import { TooltippedButton } from '../mui-extras/tooltipped-button';
+
+const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
+
+/**
+ * The cancel button props.
+ */
+export type CancelButtonProps = {
+  inputExists: boolean;
+  onCancel: () => void;
+};
+
+/**
+ * The cancel button.
+ */
+export function CancelButton(props: CancelButtonProps): JSX.Element {
+  const tooltip = 'Cancel edition';
+  const disabled = !props.inputExists;
+  return (
+    <TooltippedButton
+      onClick={props.onCancel}
+      disabled={disabled}
+      tooltip={tooltip}
+      buttonProps={{
+        size: 'small',
+        variant: 'contained',
+        title: tooltip,
+        className: CANCEL_BUTTON_CLASS
+      }}
+      sx={{
+        minWidth: 'unset',
+        padding: '4px',
+        borderRadius: '2px 0px 0px 2px',
+        marginRight: '1px'
+      }}
+    >
+      <CancelIcon />
+    </TooltippedButton>
+  );
+}