@jupyter/chat 0.4.0 → 0.6.0

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

@@ -0,0 +1,210 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+import SendIcon from '@mui/icons-material/Send';
+import { Box, Menu, MenuItem, Typography } from '@mui/material';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { IChatModel } from '../../model';
+import { TooltippedButton } from '../mui-extras/tooltipped-button';
+import { includeSelectionIcon } from '../../icons';
+import { Selection } from '../../types';
+
+const SEND_BUTTON_CLASS = 'jp-chat-send-button';
+const SEND_INCLUDE_OPENER_CLASS = 'jp-chat-send-include-opener';
+const SEND_INCLUDE_LI_CLASS = 'jp-chat-send-include';
+
+/**
+ * The send button props.
+ */
+export type SendButtonProps = {
+  model: IChatModel;
+  sendWithShiftEnter: boolean;
+  inputExists: boolean;
+  onSend: (selection?: Selection) => unknown;
+  hideIncludeSelection?: boolean;
+  hasButtonOnLeft?: boolean;
+};
+
+/**
+ * The send button, with optional 'include selection' menu.
+ */
+export function SendButton(props: SendButtonProps): JSX.Element {
+  const { activeCellManager, selectionWatcher } = props.model;
+  const hideIncludeSelection = props.hideIncludeSelection ?? false;
+  const hasButtonOnLeft = props.hasButtonOnLeft ?? false;
+  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const openMenu = useCallback((el: HTMLElement | null) => {
+    setMenuAnchorEl(el);
+    setMenuOpen(true);
+  }, []);
+
+  const closeMenu = useCallback(() => {
+    setMenuOpen(false);
+  }, []);
+
+  const disabled = !props.inputExists;
+
+  const [selectionTooltip, setSelectionTooltip] = useState<string>('');
+  const [disableInclude, setDisableInclude] = useState<boolean>(true);
+
+  useEffect(() => {
+    /**
+     * Enable or disable the include selection button, and adapt the tooltip.
+     */
+    const toggleIncludeState = () => {
+      setDisableInclude(
+        !(selectionWatcher?.selection || activeCellManager?.available)
+      );
+      const tooltip = selectionWatcher?.selection
+        ? `${selectionWatcher.selection.numLines} line(s) selected`
+        : activeCellManager?.available
+          ? 'Code from 1 active cell'
+          : 'No selection or active cell';
+      setSelectionTooltip(tooltip);
+    };
+
+    if (!hideIncludeSelection) {
+      selectionWatcher?.selectionChanged.connect(toggleIncludeState);
+      activeCellManager?.availabilityChanged.connect(toggleIncludeState);
+      toggleIncludeState();
+    }
+    return () => {
+      selectionWatcher?.selectionChanged.disconnect(toggleIncludeState);
+      activeCellManager?.availabilityChanged.disconnect(toggleIncludeState);
+    };
+  }, [activeCellManager, selectionWatcher, hideIncludeSelection]);
+
+  const defaultTooltip = props.sendWithShiftEnter
+    ? 'Send message (SHIFT+ENTER)'
+    : 'Send message (ENTER)';
+  const tooltip = defaultTooltip;
+
+  function sendWithSelection() {
+    // Append the selected text if exists.
+    if (selectionWatcher?.selection) {
+      props.onSend({
+        type: 'text',
+        source: selectionWatcher.selection.text
+      });
+      closeMenu();
+      return;
+    }
+
+    // Append the active cell content if exists.
+    if (activeCellManager?.available) {
+      props.onSend({
+        type: 'cell',
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        source: activeCellManager.getContent(false)!.source
+      });
+      closeMenu();
+      return;
+    }
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexWrap: 'nowrap' }}>
+      <TooltippedButton
+        onClick={() => props.onSend()}
+        disabled={disabled}
+        tooltip={tooltip}
+        buttonProps={{
+          size: 'small',
+          title: defaultTooltip,
+          variant: 'contained',
+          className: SEND_BUTTON_CLASS
+        }}
+        sx={{
+          minWidth: 'unset',
+          borderTopLeftRadius: hasButtonOnLeft ? '0px' : '2px',
+          borderTopRightRadius: hideIncludeSelection ? '2px' : '0px',
+          borderBottomRightRadius: hideIncludeSelection ? '2px' : '0px',
+          borderBottomLeftRadius: hasButtonOnLeft ? '0px' : '2px'
+        }}
+      >
+        <SendIcon />
+      </TooltippedButton>
+      {!hideIncludeSelection && (
+        <>
+          <TooltippedButton
+            onClick={e => {
+              openMenu(e.currentTarget);
+            }}
+            disabled={disabled}
+            tooltip=""
+            buttonProps={{
+              variant: 'contained',
+              onKeyDown: e => {
+                if (e.key !== 'Enter' && e.key !== ' ') {
+                  return;
+                }
+                openMenu(e.currentTarget);
+                // stopping propagation of this event prevents the prompt from being
+                // sent when the dropdown button is selected and clicked via 'Enter'.
+                e.stopPropagation();
+              },
+              className: SEND_INCLUDE_OPENER_CLASS
+            }}
+            sx={{
+              minWidth: 'unset',
+              padding: '4px 0px',
+              borderRadius: '0px 2px 2px 0px',
+              marginLeft: '1px'
+            }}
+          >
+            <KeyboardArrowDown />
+          </TooltippedButton>
+          <Menu
+            open={menuOpen}
+            onClose={closeMenu}
+            anchorEl={menuAnchorEl}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right'
+            }}
+            transformOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right'
+            }}
+            sx={{
+              '& .MuiMenuItem-root': {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px'
+              },
+              '& svg': {
+                lineHeight: 0
+              }
+            }}
+          >
+            <MenuItem
+              onClick={e => {
+                sendWithSelection();
+                // prevent sending second message with no selection
+                e.stopPropagation();
+              }}
+              disabled={disableInclude}
+              className={SEND_INCLUDE_LI_CLASS}
+            >
+              <includeSelectionIcon.react />
+              <Box>
+                <Typography display="block">
+                  Send message with selection
+                </Typography>
+                <Typography display="block" sx={{ opacity: 0.618 }}>
+                  {selectionTooltip}
+                </Typography>
+              </Box>
+            </MenuItem>
+          </Menu>
+        </>
+      )}
+    </Box>
+  );
+}

package/src/components/mui-extras/tooltipped-button.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React from 'react';
+import { Button, ButtonProps, SxProps, TooltipProps } from '@mui/material';
+
+import { ContrastingTooltip } from './contrasting-tooltip';
+
+export type TooltippedButtonProps = {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  tooltip: string;
+  children: JSX.Element;
+  disabled?: boolean;
+  placement?: TooltipProps['placement'];
+  /**
+   * The offset of the tooltip popup.
+   *
+   * The expected syntax is defined by the Popper library:
+   * https://popper.js.org/docs/v2/modifiers/offset/
+   */
+  offset?: [number, number];
+  'aria-label'?: string;
+  /**
+   * Props passed directly to the MUI `Button` component.
+   */
+  buttonProps?: ButtonProps;
+  /**
+   * Styles applied to the MUI `Button` component.
+   */
+  sx?: SxProps;
+};
+
+/**
+ * A component that renders an MUI `Button` with a high-contrast tooltip
+ * provided by `ContrastingTooltip`. This component differs from the MUI
+ * defaults in the following ways:
+ *
+ * - Shows the tooltip on hover even if disabled.
+ * - Renders the tooltip above the button by default.
+ * - Renders the tooltip closer to the button by default.
+ * - Lowers the opacity of the Button when disabled.
+ * - Renders the Button with `line-height: 0` to avoid showing extra
+ * vertical space in SVG icons.
+ *
+ * NOTE TO DEVS: Please keep this component's features synchronized with
+ * features available to `TooltippedIconButton`.
+ */
+export function TooltippedButton(props: TooltippedButtonProps): JSX.Element {
+  return (
+    <ContrastingTooltip
+      title={props.tooltip}
+      placement={props.placement ?? 'top'}
+      slotProps={{
+        popper: {
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, -8]
+              }
+            }
+          ]
+        }
+      }}
+    >
+      {/*
+        By default, tooltips never appear when the Button is disabled. The
+        official way to support this feature in MUI is to wrap the child Button
+        element in a `span` element.
+
+        See: https://mui.com/material-ui/react-tooltip/#disabled-elements
+      */}
+      <span style={{ cursor: 'default' }}>
+        <Button
+          {...props.buttonProps}
+          onClick={props.onClick}
+          disabled={props.disabled}
+          sx={{
+            lineHeight: 0,
+            ...(props.disabled && { opacity: 0.5 }),
+            ...props.sx
+          }}
+          aria-label={props['aria-label']}
+        >
+          {props.children}
+        </Button>
+      </span>
+    </ContrastingTooltip>
+  );
+}

package/src/components/mui-extras/tooltipped-icon-button.tsx

@@ -73,7 +73,11 @@ export function TooltippedIconButton(
           {...props.iconButtonProps}
           onClick={props.onClick}
           disabled={props.disabled}
-          sx={{ lineHeight: 0, ...(props.disabled && { opacity: 0.5 }) }}
+          sx={{
+            marginLeft: '8px',
+            lineHeight: 0,
+            ...(props.disabled && { opacity: 0.5 })
+          }}
           aria-label={props['aria-label']}
         >
           {props.children}

package/src/components/rendermime-markdown.tsx

@@ -24,14 +24,19 @@ type RendermimeMarkdownProps = {
 };
 
 /**
- * Takes \( and returns \\(. Escapes LaTeX delimeters by adding extra backslashes where needed for proper rendering by @jupyterlab/rendermime.
+ * Escapes backslashes in LaTeX delimiters such that they appear in the DOM
+ * after the initial MarkDown render. For example, this function takes '\(` and
+ * returns `\\(`.
+ *
+ * Required for proper rendering of MarkDown + LaTeX markup in the chat by
+ * `ILatexTypesetter`.
  */
 function escapeLatexDelimiters(text: string) {
   return text
-    .replace('\\(', '\\\\(')
-    .replace('\\)', '\\\\)')
-    .replace('\\[', '\\\\[')
-    .replace('\\]', '\\\\]');
+    .replace('\\(/g', '\\\\(')
+    .replace('\\)/g', '\\\\)')
+    .replace('\\[/g', '\\\\[')
+    .replace('\\]/g', '\\\\]');
 }
 
 function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
@@ -47,12 +52,15 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
 
   useEffect(() => {
     const renderContent = async () => {
+      // initialize mime model
       const mdStr = escapeLatexDelimiters(props.markdownStr);
       const model = props.rmRegistry.createModel({
         data: { [MD_MIME_TYPE]: mdStr }
       });
 
       const renderer = props.rmRegistry.createRenderer(MD_MIME_TYPE);
+
+      // step 1: render markdown
       await renderer.renderModel(model);
       props.rmRegistry.latexTypesetter?.typeset(renderer.node);
       if (!renderer.node) {
@@ -61,6 +69,9 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
         );
       }
 
+      // step 2: render LaTeX via MathJax.
+      props.rmRegistry.latexTypesetter?.typeset(renderer.node);
+
       const newCodeToolbarDefns: [HTMLDivElement, CodeToolbarProps][] = [];
 
       // Attach CodeToolbar root element to each <pre> block

package/src/icons.ts

@@ -8,6 +8,7 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 
 import chatSvgStr from '../style/icons/chat.svg';
+import includeSelectionIconStr from '../style/icons/include-selection.svg';
 import readSvgStr from '../style/icons/read.svg';
 import replaceCellSvg from '../style/icons/replace-cell.svg';
 
@@ -25,3 +26,8 @@ export const replaceCellIcon = new LabIcon({
   name: 'jupyter-ai::replace-cell',
   svgstr: replaceCellSvg
 });
+
+export const includeSelectionIcon = new LabIcon({
+  name: 'jupyter-chat::include',
+  svgstr: includeSelectionIconStr
+});

package/src/index.ts

@@ -3,11 +3,12 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+export * from './active-cell-manager';
 export * from './icons';
 export * from './model';
 export * from './registry';
+export * from './selection-watcher';
 export * from './types';
-export * from './active-cell-manager';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';
 export * from './widgets/chat-widget';

package/src/model.ts

@@ -15,6 +15,7 @@ import {
   IUser
 } from './types';
 import { IActiveCellManager } from './active-cell-manager';
+import { ISelectionWatcher } from './selection-watcher';
 
 /**
  * The chat model interface.
@@ -55,6 +56,11 @@ export interface IChatModel extends IDisposable {
    */
   readonly activeCellManager: IActiveCellManager | null;
 
+  /**
+   * Get the selection watcher.
+   */
+  readonly selectionWatcher: ISelectionWatcher | null;
+
   /**
    * A signal emitting when the messages list is updated.
    */
@@ -75,6 +81,11 @@ export interface IChatModel extends IDisposable {
    */
   readonly viewportChanged?: ISignal<IChatModel, number[]>;
 
+  /**
+   * A signal emitting when the writers change.
+   */
+  readonly writersChanged?: ISignal<IChatModel, IUser[]>;
+
   /**
    * A signal emitting when the focus is requested on the input.
    */
@@ -87,7 +98,7 @@ export interface IChatModel extends IDisposable {
    * @param message - the message to send.
    * @returns whether the message has been sent or not, or nothing if not needed.
    */
-  addMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+  sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
 
   /**
    * Optional, to update a message from the chat panel.
@@ -145,10 +156,20 @@ export interface IChatModel extends IDisposable {
    */
   messagesDeleted(index: number, count: number): void;
 
+  /**
+   * Update the current writers list.
+   */
+  updateWriters(writers: IUser[]): void;
+
   /**
    * Function to request the focus on the input of the chat.
    */
   focusInput(): void;
+
+  /**
+   * Function called by the input on key pressed.
+   */
+  inputChanged?(input?: string): void;
 }
 
 /**
@@ -164,23 +185,19 @@ export class ChatModel implements IChatModel {
     const config = options.config ?? {};
 
     // Stack consecutive messages from the same user by default.
-    this._config = { stackMessages: true, ...config };
+    this._config = {
+      stackMessages: true,
+      sendTypingNotification: true,
+      ...config
+    };
 
     this._commands = options.commands;
 
     this._activeCellManager = options.activeCellManager ?? null;
-  }
 
-  /**
-   * The chat messages list.
-   */
-  get messages(): IChatMessage[] {
-    return this._messages;
+    this._selectionWatcher = options.selectionWatcher ?? null;
   }
 
-  get activeCellManager(): IActiveCellManager | null {
-    return this._activeCellManager;
-  }
   /**
    * The chat model id.
    */
@@ -201,6 +218,26 @@ export class ChatModel implements IChatModel {
     this._name = value;
   }
 
+  /**
+   * The chat messages list.
+   */
+  get messages(): IChatMessage[] {
+    return this._messages;
+  }
+  /**
+   * Get the active cell manager.
+   */
+  get activeCellManager(): IActiveCellManager | null {
+    return this._activeCellManager;
+  }
+
+  /**
+   * Get the selection watcher.
+   */
+  get selectionWatcher(): ISelectionWatcher | null {
+    return this._selectionWatcher;
+  }
+
   /**
    * Timestamp of the last read message in local storage.
    */
@@ -338,6 +375,13 @@ export class ChatModel implements IChatModel {
     return this._viewportChanged;
   }
 
+  /**
+   * A signal emitting when the writers change.
+   */
+  get writersChanged(): ISignal<IChatModel, IUser[]> {
+    return this._writersChanged;
+  }
+
   /**
    * A signal emitting when the focus is requested on the input.
    */
@@ -352,7 +396,7 @@ export class ChatModel implements IChatModel {
    * @param message - the message to send.
    * @returns whether the message has been sent or not.
    */
-  addMessage(message: INewMessage): Promise<boolean | void> | boolean | void {}
+  sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void {}
 
   /**
    * Dispose the chat model.
@@ -452,6 +496,14 @@ export class ChatModel implements IChatModel {
     this._messagesUpdated.emit();
   }
 
+  /**
+   * Update the current writers list.
+   * This implementation only propagate the list via a signal.
+   */
+  updateWriters(writers: IUser[]): void {
+    this._writersChanged.emit(writers);
+  }
+
   /**
    * Function to request the focus on the input of the chat.
    */
@@ -459,6 +511,11 @@ export class ChatModel implements IChatModel {
     this._focusInputSignal.emit();
   }
 
+  /**
+   * Function called by the input on key pressed.
+   */
+  inputChanged?(input?: string): void {}
+
   /**
    * Add unread messages to the list.
    * @param indexes - list of new indexes.
@@ -517,11 +574,13 @@ export class ChatModel implements IChatModel {
   private _isDisposed = false;
   private _commands?: CommandRegistry;
   private _activeCellManager: IActiveCellManager | null;
+  private _selectionWatcher: ISelectionWatcher | null;
   private _notificationId: string | null = null;
   private _messagesUpdated = new Signal<IChatModel, void>(this);
   private _configChanged = new Signal<IChatModel, IConfig>(this);
   private _unreadChanged = new Signal<IChatModel, number[]>(this);
   private _viewportChanged = new Signal<IChatModel, number[]>(this);
+  private _writersChanged = new Signal<IChatModel, IUser[]>(this);
   private _focusInputSignal = new Signal<ChatModel, void>(this);
 }
 
@@ -544,8 +603,13 @@ export namespace ChatModel {
     commands?: CommandRegistry;
 
     /**
-     * Active cell manager
+     * Active cell manager.
      */
     activeCellManager?: IActiveCellManager | null;
+
+    /**
+     * Selection watcher.
+     */
+    selectionWatcher?: ISelectionWatcher | null;
   }
 }