@jupyter/chat 0.1.0 → 0.3.0

package/src/components/chat.tsx

@@ -9,57 +9,20 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton } from '@mui/material';
 import { Box } from '@mui/system';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
-import { ScrollContainer } from './scroll-container';
 import { IChatModel } from '../model';
-import { IChatMessage } from '../types';
-
-type ChatBodyProps = {
-  model: IChatModel;
-  rmRegistry: IRenderMimeRegistry;
-};
-
-function ChatBody({
-  model,
-  rmRegistry: renderMimeRegistry
-}: ChatBodyProps): JSX.Element {
-  const [messages, setMessages] = useState<IChatMessage[]>([]);
-
-  /**
-   * Effect: fetch history and config on initial render
-   */
-  useEffect(() => {
-    async function fetchHistory() {
-      if (!model.getHistory) {
-        return;
-      }
-      model
-        .getHistory()
-        .then(history => setMessages(history.messages))
-        .catch(e => console.error(e));
-    }
-
-    fetchHistory();
-  }, [model]);
-
-  /**
-   * Effect: listen to chat messages
-   */
-  useEffect(() => {
-    function handleChatEvents(_: IChatModel) {
-      setMessages([...model.messages]);
-    }
-
-    model.messagesUpdated.connect(handleChatEvents);
-    return function cleanup() {
-      model.messagesUpdated.disconnect(handleChatEvents);
-    };
-  }, [model]);
+import { IAutocompletionRegistry } from '../registry';
 
+export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
+  const {
+    model,
+    rmRegistry: renderMimeRegistry,
+    autocompletionRegistry
+  } = props;
   // no need to append to messageGroups imperatively here. all of that is
   // handled by the listeners registered in the effect hooks above.
   const onSend = async (input: string) => {
@@ -69,13 +32,7 @@ function ChatBody({
 
   return (
     <>
-      <ScrollContainer sx={{ flexGrow: 1 }}>
-        <ChatMessages
-          messages={messages}
-          rmRegistry={renderMimeRegistry}
-          model={model}
-        />
-      </ScrollContainer>
+      <ChatMessages rmRegistry={renderMimeRegistry} model={model} />
       <ChatInput
         onSend={onSend}
         sx={{
@@ -85,16 +42,15 @@ function ChatBody({
           paddingBottom: 0,
           borderTop: '1px solid var(--jp-border-color1)'
         }}
-        sendWithShiftEnter={model.config.sendWithShiftEnter ?? false}
+        model={model}
+        autocompletionRegistry={autocompletionRegistry}
       />
     </>
   );
 }
 
 export function Chat(props: Chat.IOptions): JSX.Element {
-  const [view, setView] = useState<Chat.ChatView>(
-    props.chatView || Chat.ChatView.Chat
-  );
+  const [view, setView] = useState<Chat.View>(props.chatView || Chat.View.chat);
   return (
     <JlThemeProvider themeManager={props.themeManager ?? null}>
       <Box
@@ -111,15 +67,15 @@ export function Chat(props: Chat.IOptions): JSX.Element {
       >
         {/* top bar */}
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-          {view !== Chat.ChatView.Chat ? (
-            <IconButton onClick={() => setView(Chat.ChatView.Chat)}>
+          {view !== Chat.View.chat ? (
+            <IconButton onClick={() => setView(Chat.View.chat)}>
               <ArrowBackIcon />
             </IconButton>
           ) : (
             <Box />
           )}
-          {view === Chat.ChatView.Chat && props.settingsPanel ? (
-            <IconButton onClick={() => setView(Chat.ChatView.Settings)}>
+          {view !== Chat.View.settings && props.settingsPanel ? (
+            <IconButton onClick={() => setView(Chat.View.settings)}>
               <SettingsIcon />
             </IconButton>
           ) : (
@@ -127,10 +83,14 @@ export function Chat(props: Chat.IOptions): JSX.Element {
           )}
         </Box>
         {/* body */}
-        {view === Chat.ChatView.Chat && (
-          <ChatBody model={props.model} rmRegistry={props.rmRegistry} />
+        {view === Chat.View.chat && (
+          <ChatBody
+            model={props.model}
+            rmRegistry={props.rmRegistry}
+            autocompletionRegistry={props.autocompletionRegistry}
+          />
         )}
-        {view === Chat.ChatView.Settings && props.settingsPanel && (
+        {view === Chat.View.settings && props.settingsPanel && (
           <props.settingsPanel />
         )}
       </Box>
@@ -143,9 +103,9 @@ export function Chat(props: Chat.IOptions): JSX.Element {
  */
 export namespace Chat {
   /**
-   * The options to build the Chat UI.
+   * The props for the chat body component.
    */
-  export interface IOptions {
+  export interface IChatBodyProps {
     /**
      * The chat model.
      */
@@ -154,6 +114,20 @@ export namespace Chat {
      * The rendermime registry.
      */
     rmRegistry: IRenderMimeRegistry;
+    /**
+     * Autocompletion registry.
+     */
+    autocompletionRegistry?: IAutocompletionRegistry;
+    /**
+     * Autocompletion name.
+     */
+    autocompletionName?: string;
+  }
+
+  /**
+   * The options to build the Chat UI.
+   */
+  export interface IOptions extends IChatBodyProps {
     /**
      * The theme manager.
      */
@@ -161,7 +135,7 @@ export namespace Chat {
     /**
      * The view to render.
      */
-    chatView?: ChatView;
+    chatView?: View;
     /**
      * A settings panel that can be used for dedicated settings (e.g. jupyter-ai)
      */
@@ -172,8 +146,8 @@ export namespace Chat {
    * The view to render.
    * The settings view is available only if the settings panel is provided in options.
    */
-  export enum ChatView {
-    Chat,
-    Settings
+  export enum View {
+    chat,
+    settings
   }
 }

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/components/scroll-container.tsx

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, SxProps, Theme } from '@mui/material';
 
 type ScrollContainerProps = {
@@ -32,30 +32,6 @@ export function ScrollContainer(props: ScrollContainerProps): JSX.Element {
     []
   );
 
-  /**
-   * Effect: Scroll the container to the bottom as soon as it is visible.
-   */
-  useEffect(() => {
-    const el = document.querySelector<HTMLElement>(`#${id}`);
-    if (!el) {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            el.scroll({ top: 999999999 });
-          }
-        });
-      },
-      { threshold: 1.0 }
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
   return (
     <Box
       id={id}

package/src/icons.ts

@@ -8,8 +8,20 @@
 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',
   svgstr: chatSvgStr
 });
+
+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

@@ -5,7 +5,9 @@
 
 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';