@jupyter/chat 0.2.0 → 0.3.0

package/src/components/chat-input.tsx

@@ -16,18 +16,27 @@ import {
 } from '@mui/material';
 import { Send, Cancel } from '@mui/icons-material';
 import clsx from 'clsx';
-import { AutocompleteCommand, IAutocompletionCommandsProps } from '../types';
+import { IChatModel } from '../model';
 import { IAutocompletionRegistry } from '../registry';
+import { AutocompleteCommand, IAutocompletionCommandsProps } 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, sendWithShiftEnter } =
-    props;
+  const { autocompletionName, autocompletionRegistry, model } = props;
   const autocompletion = useRef<IAutocompletionCommandsProps>();
   const [input, setInput] = useState<string>(props.value || '');
+  const [sendWithShiftEnter, setSendWithShiftEnter] = useState<boolean>(
+    model.config.sendWithShiftEnter ?? false
+  );
+
+  useEffect(() => {
+    model.configChanged.connect((_, config) => {
+      setSendWithShiftEnter(config.sendWithShiftEnter ?? false);
+    });
+  }, [model]);
 
   // The autocomplete commands options.
   const [commandOptions, setCommandOptions] = useState<AutocompleteCommand[]>(
@@ -124,7 +133,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
   }
 
   // Set the helper text based on whether Shift+Enter is used for sending.
-  const helperText = props.sendWithShiftEnter ? (
+  const helperText = sendWithShiftEnter ? (
     <span>
       Press <b>Shift</b>+<b>Enter</b> to send message
     </span>
@@ -248,6 +257,10 @@ export namespace ChatInput {
    * The properties of the react element.
    */
   export interface IProps {
+    /**
+     * The chat model.
+     */
+    model: IChatModel;
     /**
      * The initial value of the input (default to '')
      */
@@ -260,10 +273,6 @@ export namespace ChatInput {
      * The function to be called to cancel editing.
      */
     onCancel?: () => unknown;
-    /**
-     * Whether using shift+enter to send the message.
-     */
-    sendWithShiftEnter: boolean;
     /**
      * Custom mui/material styles.
      */

package/src/components/chat-messages.tsx

@@ -74,7 +74,7 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
    * Effect: listen to chat messages.
    */
   useEffect(() => {
-    function handleChatEvents(_: IChatModel) {
+    function handleChatEvents() {
       setMessages([...model.messages]);
     }
 
@@ -392,12 +392,13 @@ export function ChatMessage(props: ChatMessageProps): JSX.Element {
           value={message.body}
           onSend={(input: string) => updateMessage(message.id, input)}
           onCancel={() => cancelEdition()}
-          sendWithShiftEnter={model.config.sendWithShiftEnter ?? false}
+          model={model}
         />
       ) : (
         <RendermimeMarkdown
           rmRegistry={rmRegistry}
           markdownStr={message.body}
+          model={model}
           edit={canEdit ? () => setEdit(true) : undefined}
           delete={canDelete ? () => deleteMessage(message.id) : undefined}
         />

package/src/components/chat.tsx

@@ -42,7 +42,7 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
           paddingBottom: 0,
           borderTop: '1px solid var(--jp-border-color1)'
         }}
-        sendWithShiftEnter={model.config.sendWithShiftEnter ?? false}
+        model={model}
         autocompletionRegistry={autocompletionRegistry}
       />
     </>

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

@@ -0,0 +1,143 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { addAboveIcon, addBelowIcon } from '@jupyterlab/ui-components';
+import { Box } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+
+import { CopyButton } from './copy-button';
+import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
+import { IActiveCellManager } from '../../active-cell-manager';
+import { replaceCellIcon } from '../../icons';
+import { IChatModel } from '../../model';
+
+const CODE_TOOLBAR_CLASS = 'jp-chat-code-toolbar';
+const CODE_TOOLBAR_ITEM_CLASS = 'jp-chat-code-toolbar-item';
+
+export type CodeToolbarProps = {
+  /**
+   * The chat model.
+   */
+  model: IChatModel;
+  /**
+   * The content of the Markdown code block this component is attached to.
+   */
+  content: string;
+};
+
+export function CodeToolbar(props: CodeToolbarProps): JSX.Element {
+  const { content, model } = props;
+  const [toolbarEnable, setToolbarEnable] = useState<boolean>(
+    model.config.enableCodeToolbar ?? true
+  );
+
+  const activeCellManager = model.activeCellManager;
+
+  const [toolbarBtnProps, setToolbarBtnProps] = useState<ToolbarButtonProps>({
+    content: content,
+    activeCellManager: activeCellManager,
+    activeCellAvailable: activeCellManager?.available ?? false
+  });
+
+  useEffect(() => {
+    activeCellManager?.availabilityChanged.connect(() => {
+      setToolbarBtnProps({
+        content,
+        activeCellManager: activeCellManager,
+        activeCellAvailable: activeCellManager.available
+      });
+    });
+
+    model.configChanged.connect((_, config) => {
+      setToolbarEnable(config.enableCodeToolbar ?? true);
+    });
+  }, [model]);
+
+  return activeCellManager === null || !toolbarEnable ? (
+    <></>
+  ) : (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        padding: '6px 2px',
+        marginBottom: '1em',
+        border: '1px solid var(--jp-cell-editor-border-color)',
+        borderTop: 'none'
+      }}
+      className={CODE_TOOLBAR_CLASS}
+    >
+      <InsertAboveButton
+        {...toolbarBtnProps}
+        className={CODE_TOOLBAR_ITEM_CLASS}
+      />
+      <InsertBelowButton
+        {...toolbarBtnProps}
+        className={CODE_TOOLBAR_ITEM_CLASS}
+      />
+      <ReplaceButton {...toolbarBtnProps} className={CODE_TOOLBAR_ITEM_CLASS} />
+      <CopyButton value={content} className={CODE_TOOLBAR_ITEM_CLASS} />
+    </Box>
+  );
+}
+
+type ToolbarButtonProps = {
+  content: string;
+  activeCellAvailable?: boolean;
+  activeCellManager: IActiveCellManager | null;
+  className?: string;
+};
+
+function InsertAboveButton(props: ToolbarButtonProps) {
+  const tooltip = props.activeCellAvailable
+    ? 'Insert above active cell'
+    : 'Insert above active cell (no active cell)';
+
+  return (
+    <TooltippedIconButton
+      className={props.className}
+      tooltip={tooltip}
+      onClick={() => props.activeCellManager?.insertAbove(props.content)}
+      disabled={!props.activeCellAvailable}
+    >
+      <addAboveIcon.react height="16px" width="16px" />
+    </TooltippedIconButton>
+  );
+}
+
+function InsertBelowButton(props: ToolbarButtonProps) {
+  const tooltip = props.activeCellAvailable
+    ? 'Insert below active cell'
+    : 'Insert below active cell (no active cell)';
+
+  return (
+    <TooltippedIconButton
+      className={props.className}
+      tooltip={tooltip}
+      disabled={!props.activeCellAvailable}
+      onClick={() => props.activeCellManager?.insertBelow(props.content)}
+    >
+      <addBelowIcon.react height="16px" width="16px" />
+    </TooltippedIconButton>
+  );
+}
+
+function ReplaceButton(props: ToolbarButtonProps) {
+  const tooltip = props.activeCellAvailable
+    ? 'Replace active cell'
+    : 'Replace active cell (no active cell)';
+
+  return (
+    <TooltippedIconButton
+      className={props.className}
+      tooltip={tooltip}
+      disabled={!props.activeCellAvailable}
+      onClick={() => props.activeCellManager?.replace(props.content)}
+    >
+      <replaceCellIcon.react height="16px" width="16px" />
+    </TooltippedIconButton>
+  );
+}

package/src/components/code-blocks/copy-button.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React, { useState, useCallback, useRef } from 'react';
+
+import { copyIcon } from '@jupyterlab/ui-components';
+
+import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
+
+enum CopyStatus {
+  None,
+  Copying,
+  Copied
+}
+
+const COPYBTN_TEXT_BY_STATUS: Record<CopyStatus, string> = {
+  [CopyStatus.None]: 'Copy to clipboard',
+  [CopyStatus.Copying]: 'Copying…',
+  [CopyStatus.Copied]: 'Copied!'
+};
+
+type CopyButtonProps = {
+  value: string;
+  className?: string;
+};
+
+export function CopyButton(props: CopyButtonProps): JSX.Element {
+  const [copyStatus, setCopyStatus] = useState<CopyStatus>(CopyStatus.None);
+  const timeoutId = useRef<number | null>(null);
+
+  const copy = useCallback(async () => {
+    // ignore if we are already copying
+    if (copyStatus === CopyStatus.Copying) {
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(props.value);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+      setCopyStatus(CopyStatus.None);
+      return;
+    }
+
+    setCopyStatus(CopyStatus.Copied);
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
+    timeoutId.current = window.setTimeout(
+      () => setCopyStatus(CopyStatus.None),
+      1000
+    );
+  }, [copyStatus, props.value]);
+
+  return (
+    <TooltippedIconButton
+      className={props.className}
+      tooltip={COPYBTN_TEXT_BY_STATUS[copyStatus]}
+      placement="top"
+      onClick={copy}
+      aria-label="Copy to clipboard"
+    >
+      <copyIcon.react height="16px" width="16px" />
+    </TooltippedIconButton>
+  );
+}

package/src/components/mui-extras/contrasting-tooltip.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React from 'react';
+import { styled, Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
+
+/**
+ * A restyled MUI tooltip component that is dark by default to improve contrast
+ * against JupyterLab's default light theme. TODO: support dark themes.
+ */
+export const ContrastingTooltip = styled(
+  ({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} arrow classes={{ popper: className }} />
+  )
+)(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+    boxShadow: theme.shadows[1],
+    fontSize: 11
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.common.black
+  }
+}));

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

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React from 'react';
+import { IconButton, IconButtonProps, TooltipProps } from '@mui/material';
+
+import { ContrastingTooltip } from './contrasting-tooltip';
+
+export type TooltippedIconButtonProps = {
+  onClick: () => unknown;
+  tooltip: string;
+  children: JSX.Element;
+  className?: string;
+  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 `IconButton` component.
+   */
+  iconButtonProps?: IconButtonProps;
+};
+
+/**
+ * A component that renders an MUI `IconButton` 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 IconButton when disabled.
+ * - Renders the IconButton with `line-height: 0` to avoid showing extra
+ * vertical space in SVG icons.
+ */
+export function TooltippedIconButton(
+  props: TooltippedIconButtonProps
+): 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 IconButton 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 className={props.className}>
+        <IconButton
+          {...props.iconButtonProps}
+          onClick={props.onClick}
+          disabled={props.disabled}
+          sx={{ lineHeight: 0, ...(props.disabled && { opacity: 0.5 }) }}
+          aria-label={props['aria-label']}
+        >
+          {props.children}
+        </IconButton>
+      </span>
+    </ContrastingTooltip>
+  );
+}

package/src/components/rendermime-markdown.tsx

@@ -4,11 +4,12 @@
  */
 
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 
-import { CopyButton } from './copy-button';
+import { CodeToolbar, CodeToolbarProps } from './code-blocks/code-toolbar';
 import { MessageToolbar } from './toolbar';
+import { IChatModel } from '../model';
 
 const MD_MIME_TYPE = 'text/markdown';
 const RENDERMIME_MD_CLASS = 'jp-chat-rendermime-markdown';
@@ -17,6 +18,7 @@ type RendermimeMarkdownProps = {
   markdownStr: string;
   rmRegistry: IRenderMimeRegistry;
   appendContent?: boolean;
+  model: IChatModel;
   edit?: () => void;
   delete?: () => void;
 };
@@ -37,7 +39,11 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
   const [renderedContent, setRenderedContent] = useState<HTMLElement | null>(
     null
   );
-  const containerRef = useRef<HTMLDivElement>(null);
+
+  // each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
+  const [codeToolbarDefns, setCodeToolbarDefns] = useState<
+    Array<[HTMLDivElement, CodeToolbarProps]>
+  >([]);
 
   useEffect(() => {
     const renderContent = async () => {
@@ -49,23 +55,29 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
       const renderer = props.rmRegistry.createRenderer(MD_MIME_TYPE);
       await renderer.renderModel(model);
       props.rmRegistry.latexTypesetter?.typeset(renderer.node);
-
-      // Attach CopyButton to each <pre> block
-      if (containerRef.current && renderer.node) {
-        const preBlocks = renderer.node.querySelectorAll('pre');
-        preBlocks.forEach(preBlock => {
-          const copyButtonContainer = document.createElement('div');
-          preBlock.parentNode?.insertBefore(
-            copyButtonContainer,
-            preBlock.nextSibling
-          );
-          ReactDOM.render(
-            <CopyButton value={preBlock.textContent || ''} />,
-            copyButtonContainer
-          );
-        });
+      if (!renderer.node) {
+        throw new Error(
+          'Rendermime was unable to render Markdown content within a chat message. Please report this upstream to Jupyter chat on GitHub.'
+        );
       }
 
+      const newCodeToolbarDefns: [HTMLDivElement, CodeToolbarProps][] = [];
+
+      // Attach CodeToolbar root element to each <pre> block
+      const preBlocks = renderer.node.querySelectorAll('pre');
+      preBlocks.forEach(preBlock => {
+        const codeToolbarRoot = document.createElement('div');
+        preBlock.parentNode?.insertBefore(
+          codeToolbarRoot,
+          preBlock.nextSibling
+        );
+        newCodeToolbarDefns.push([
+          codeToolbarRoot,
+          { model: props.model, content: preBlock.textContent || '' }
+        ]);
+      });
+
+      setCodeToolbarDefns(newCodeToolbarDefns);
       setRenderedContent(renderer.node);
     };
 
@@ -73,7 +85,7 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
   }, [props.markdownStr, props.rmRegistry]);
 
   return (
-    <div ref={containerRef} className={RENDERMIME_MD_CLASS}>
+    <div className={RENDERMIME_MD_CLASS}>
       {renderedContent &&
         (appendContent ? (
           <div ref={node => node && node.appendChild(renderedContent)} />
@@ -81,6 +93,18 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
           <div ref={node => node && node.replaceChildren(renderedContent)} />
         ))}
       <MessageToolbar edit={props.edit} delete={props.delete} />
+      {
+        // Render a `CodeToolbar` element underneath each code block.
+        // We use ReactDOM.createPortal() so each `CodeToolbar` element is able
+        // to use the context in the main React tree.
+        codeToolbarDefns.map(codeToolbarDefn => {
+          const [codeToolbarRoot, codeToolbarProps] = codeToolbarDefn;
+          return createPortal(
+            <CodeToolbar {...codeToolbarProps} />,
+            codeToolbarRoot
+          );
+        })
+      }
     </div>
   );
 }

package/src/icons.ts

@@ -9,6 +9,7 @@ import { LabIcon } from '@jupyterlab/ui-components';
 
 import chatSvgStr from '../style/icons/chat.svg';
 import readSvgStr from '../style/icons/read.svg';
+import replaceCellSvg from '../style/icons/replace-cell.svg';
 
 export const chatIcon = new LabIcon({
   name: 'jupyter-chat::chat',
@@ -19,3 +20,8 @@ export const readIcon = new LabIcon({
   name: 'jupyter-chat::read',
   svgstr: readSvgStr
 });
+
+export const replaceCellIcon = new LabIcon({
+  name: 'jupyter-ai::replace-cell',
+  svgstr: replaceCellSvg
+});

package/src/index.ts

@@ -7,6 +7,7 @@ export * from './icons';
 export * from './model';
 export * from './registry';
 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

@@ -14,6 +14,7 @@ import {
   IConfig,
   IUser
 } from './types';
+import { IActiveCellManager } from './active-cell-manager';
 
 /**
  * The chat model interface.
@@ -49,11 +50,21 @@ export interface IChatModel extends IDisposable {
    */
   readonly messages: IChatMessage[];
 
+  /**
+   * Get the active cell manager.
+   */
+  readonly activeCellManager: IActiveCellManager | null;
+
   /**
    * A signal emitting when the messages list is updated.
    */
   readonly messagesUpdated: ISignal<IChatModel, void>;
 
+  /**
+   * A signal emitting when the messages list is updated.
+   */
+  get configChanged(): ISignal<IChatModel, IConfig>;
+
   /**
    * A signal emitting when unread messages change.
    */
@@ -146,6 +157,8 @@ export class ChatModel implements IChatModel {
     this._config = { stackMessages: true, ...config };
 
     this._commands = options.commands;
+
+    this._activeCellManager = options.activeCellManager ?? null;
   }
 
   /**
@@ -155,6 +168,9 @@ export class ChatModel implements IChatModel {
     return this._messages;
   }
 
+  get activeCellManager(): IActiveCellManager | null {
+    return this._activeCellManager;
+  }
   /**
    * The chat model id.
    */
@@ -215,6 +231,9 @@ export class ChatModel implements IChatModel {
 
     this._config = { ...this._config, ...value };
 
+    this._configChanged.emit(this._config);
+
+    // Update the stacked status of the messages and the view.
     if (stackMessagesChanged) {
       if (this._config.stackMessages) {
         this._messages.slice(1).forEach((message, idx) => {
@@ -288,6 +307,13 @@ export class ChatModel implements IChatModel {
     return this._messagesUpdated;
   }
 
+  /**
+   * A signal emitting when the messages list is updated.
+   */
+  get configChanged(): ISignal<IChatModel, IConfig> {
+    return this._configChanged;
+  }
+
   /**
    * A signal emitting when unread messages change.
    */
@@ -466,8 +492,10 @@ export class ChatModel implements IChatModel {
   private _config: IConfig;
   private _isDisposed = false;
   private _commands?: CommandRegistry;
+  private _activeCellManager: IActiveCellManager | 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);
 }
@@ -489,5 +517,10 @@ export namespace ChatModel {
      * Commands registry.
      */
     commands?: CommandRegistry;
+
+    /**
+     * Active cell manager
+     */
+    activeCellManager?: IActiveCellManager | null;
   }
 }

package/src/types.ts

@@ -35,6 +35,10 @@ export interface IConfig {
    * Whether to enable or not the notifications on unread messages.
    */
   unreadNotifications?: boolean;
+  /**
+   * Whether to enable or not the code toolbar.
+   */
+  enableCodeToolbar?: boolean;
 }
 
 /**

package/style/icons/replace-cell.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M12 4.71429V7H1.71429V4.71429H12ZM12.5714 3C13.2026 3 13.7143 3.51168 13.7143 4.14286V7.57143C13.7143 8.20263 13.2026 8.71429 12.5714 8.71429H1.14286C0.51168 8.71429 0 8.20263 0 7.57143V4.14286C0 3.51168 0.511669 3 1.14286 3H12.5714Z"
+        fill="#565656" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M14 8.71429V11H3.71429V8.71429H14ZM14.5714 7C15.2026 7 15.7143 7.51168 15.7143 8.14286V11.5714C15.7143 12.2026 15.2026 12.7143 14.5714 12.7143H3.14286C2.51168 12.7143 2 12.2026 2 11.5714V8.14286C2 7.51168 2.51167 7 3.14286 7H14.5714Z"
+        fill="#565656" />
+</svg>