@jupyter/chat 0.19.0-alpha.0 → 0.19.0-alpha.2

package/lib/widgets/multichat-panel.d.ts

@@ -64,13 +64,8 @@ export declare class MultiChatPanel extends SidePanel {
     private _onExpansionToggled;
     private _chatNamesChanged;
     private _sectionAdded;
-    private _rmRegistry;
-    private _themeManager?;
-    private _chatCommandRegistry?;
-    private _attachmentOpenerRegistry?;
+    private _chatOptions;
     private _inputToolbarFactory?;
-    private _messageFooterRegistry?;
-    private _welcomeMessage?;
     private _updateChatListDebouncer;
     private _createModel?;
     private _getChatNames?;

package/lib/widgets/multichat-panel.js

@@ -43,13 +43,8 @@ export class MultiChatPanel extends SidePanel {
         this.title.icon = chatIcon;
         this.title.caption = 'Jupyter Chat'; // TODO: i18n/
         this.addClass(SIDEPANEL_CLASS);
-        this._rmRegistry = options.rmRegistry;
-        this._themeManager = options.themeManager;
-        this._chatCommandRegistry = options.chatCommandRegistry;
-        this._attachmentOpenerRegistry = options.attachmentOpenerRegistry;
+        this._chatOptions = options;
         this._inputToolbarFactory = options.inputToolbarFactory;
-        this._messageFooterRegistry = options.messageFooterRegistry;
-        this._welcomeMessage = options.welcomeMessage;
         this._getChatNames = options.getChatNames;
         this._createModel = options.createModel;
         this._openInMain = options.openInMain;
@@ -116,13 +111,8 @@ export class MultiChatPanel extends SidePanel {
         // Create a new widget.
         const widget = new ChatWidget({
             model,
-            rmRegistry: this._rmRegistry,
-            themeManager: this._themeManager,
-            chatCommandRegistry: this._chatCommandRegistry,
-            attachmentOpenerRegistry: this._attachmentOpenerRegistry,
+            ...this._chatOptions,
             inputToolbarRegistry,
-            messageFooterRegistry: this._messageFooterRegistry,
-            welcomeMessage: this._welcomeMessage,
             area: 'sidebar'
         });
         const section = new ChatSection({
@@ -365,6 +355,6 @@ function ChatSelect({ chatNamesChanged, handleChange }) {
         setChatNames(chatNames);
     });
     return (React.createElement(HTMLSelect, { onChange: handleChange, value: "-" },
-        React.createElement("option", { value: "-" }, "Open a chat"),
+        React.createElement("option", { value: "-", disabled: true, hidden: true }, "Open a chat"),
         Object.keys(chatNames).map(name => (React.createElement("option", { value: chatNames[name] }, name)))));
 }

package/package.json

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

package/src/active-cell-manager.ts

@@ -267,7 +267,9 @@ export class ActiveCellManager implements IActiveCellManager {
     activeCell: Cell<ICellModel> | null
   ): void => {
     if (this._activeCell !== activeCell) {
-      this._activeCell?.model.stateChanged.disconnect(this._cellStateChange);
+      if (!this._activeCell?.disposed) {
+        this._activeCell?.model.stateChanged.disconnect(this._cellStateChange);
+      }
       this._activeCell = activeCell;
 
       activeCell?.ready.then(() => {

package/src/components/attachments.tsx

@@ -5,12 +5,12 @@
 
 import CloseIcon from '@mui/icons-material/Close';
 import { Box, Button, Tooltip } from '@mui/material';
-import React, { useContext } from 'react';
+import React from 'react';
 import { PathExt } from '@jupyterlab/coreutils';
 import { UUID } from '@lumino/coreutils';
 
+import { useChatContext } from '../context';
 import { IAttachment } from '../types';
-import { AttachmentOpenerContext } from '../context';
 
 const ATTACHMENT_CLASS = 'jp-chat-attachment';
 const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
@@ -87,7 +87,7 @@ export type AttachmentProps = AttachmentsProps & {
  */
 export function AttachmentPreview(props: AttachmentProps): JSX.Element {
   const remove_tooltip = 'Remove attachment';
-  const attachmentOpenerRegistry = useContext(AttachmentOpenerContext);
+  const { attachmentOpenerRegistry } = useChatContext();
   const isClickable = !!attachmentOpenerRegistry?.get(props.attachment.type);
 
   return (

package/src/components/chat.tsx

@@ -18,7 +18,7 @@ import {
 } from './input';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './messages';
-import { AttachmentOpenerContext } from '../context';
+import { ChatReactContext } from '../context';
 import { IChatModel } from '../model';
 import {
   IAttachmentOpenerRegistry,
@@ -27,7 +27,7 @@ import {
 } from '../registers';
 import { ChatArea } from '../types';
 
-export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
+export function ChatBody(props: Chat.IChatProps): JSX.Element {
   const { model } = props;
   let { inputToolbarRegistry } = props;
   if (!inputToolbarRegistry) {
@@ -36,17 +36,14 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
   // const horizontalPadding = props.area === 'main' ? 8 : 4;
   const horizontalPadding = 4;
 
+  const contextValue: Chat.IChatProps = {
+    ...props,
+    inputToolbarRegistry
+  };
+
   return (
-    <AttachmentOpenerContext.Provider value={props.attachmentOpenerRegistry}>
-      <ChatMessages
-        rmRegistry={props.rmRegistry}
-        model={model}
-        chatCommandRegistry={props.chatCommandRegistry}
-        inputToolbarRegistry={inputToolbarRegistry}
-        messageFooterRegistry={props.messageFooterRegistry}
-        welcomeMessage={props.welcomeMessage}
-        area={props.area}
-      />
+    <ChatReactContext.Provider value={contextValue}>
+      <ChatMessages />
       <ChatInput
         sx={{
           paddingLeft: horizontalPadding,
@@ -55,17 +52,13 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
           paddingBottom: 0
         }}
         model={model.input}
-        chatCommandRegistry={props.chatCommandRegistry}
-        toolbarRegistry={inputToolbarRegistry}
-        area={props.area}
-        chatModel={model}
       />
-    </AttachmentOpenerContext.Provider>
+    </ChatReactContext.Provider>
   );
 }
 
 export function Chat(props: Chat.IOptions): JSX.Element {
-  const [view, setView] = useState<Chat.View>(props.chatView || Chat.View.chat);
+  const [view, setView] = useState<Chat.View>(Chat.View.chat);
   return (
     <JlThemeProvider themeManager={props.themeManager ?? null}>
       <Box
@@ -117,7 +110,7 @@ export namespace Chat {
   /**
    * The props for the chat body component.
    */
-  export interface IChatBodyProps {
+  export interface IChatProps {
     /**
      * The chat model.
      */
@@ -155,15 +148,11 @@ export namespace Chat {
   /**
    * The options to build the Chat UI.
    */
-  export interface IOptions extends IChatBodyProps {
+  export interface IOptions extends IChatProps {
     /**
      * The theme manager.
      */
     themeManager?: IThemeManager | null;
-    /**
-     * The view to render.
-     */
-    chatView?: View;
     /**
      * A settings panel that can be used for dedicated settings (e.g. jupyter-ai)
      */

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

@@ -4,10 +4,11 @@
  */
 
 import { addAboveIcon, addBelowIcon } from '@jupyterlab/ui-components';
-import { Box, IconButton, Tooltip } from '@mui/material';
+import { Box } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import { CopyButton } from './copy-button';
+import { TooltippedIconButton } from '../mui-extras';
 import { IActiveCellManager } from '../../active-cell-manager';
 import { replaceCellIcon } from '../../icons';
 import { IChatModel } from '../../model';
@@ -114,24 +115,15 @@ function InsertAboveButton(props: ToolbarButtonProps) {
     : 'Insert above active cell (no active cell)';
 
   return (
-    <Tooltip title={tooltip} placement="top" arrow>
-      <span>
-        <IconButton
-          className={props.className}
-          onClick={() => props.activeCellManager?.insertAbove(props.content)}
-          disabled={!props.activeCellAvailable}
-          aria-label={tooltip}
-          sx={{
-            lineHeight: 0,
-            '&.Mui-disabled': {
-              opacity: 0.5
-            }
-          }}
-        >
-          <addAboveIcon.react height="16px" width="16px" />
-        </IconButton>
-      </span>
-    </Tooltip>
+    <TooltippedIconButton
+      className={props.className}
+      tooltip={tooltip}
+      onClick={() => props.activeCellManager?.insertAbove(props.content)}
+      disabled={!props.activeCellAvailable}
+      inputToolbar={false}
+    >
+      <addAboveIcon.react height="16px" width="16px" />
+    </TooltippedIconButton>
   );
 }
 
@@ -141,24 +133,15 @@ function InsertBelowButton(props: ToolbarButtonProps) {
     : 'Insert below active cell (no active cell)';
 
   return (
-    <Tooltip title={tooltip} placement="top" arrow>
-      <span>
-        <IconButton
-          className={props.className}
-          disabled={!props.activeCellAvailable}
-          onClick={() => props.activeCellManager?.insertBelow(props.content)}
-          aria-label={tooltip}
-          sx={{
-            lineHeight: 0,
-            '&.Mui-disabled': {
-              opacity: 0.5
-            }
-          }}
-        >
-          <addBelowIcon.react height="16px" width="16px" />
-        </IconButton>
-      </span>
-    </Tooltip>
+    <TooltippedIconButton
+      className={props.className}
+      tooltip={tooltip}
+      disabled={!props.activeCellAvailable}
+      onClick={() => props.activeCellManager?.insertBelow(props.content)}
+      inputToolbar={false}
+    >
+      <addBelowIcon.react height="16px" width="16px" />
+    </TooltippedIconButton>
   );
 }
 
@@ -187,23 +170,14 @@ function ReplaceButton(props: ToolbarButtonProps) {
   };
 
   return (
-    <Tooltip title={tooltip} placement="top" arrow>
-      <span>
-        <IconButton
-          className={props.className}
-          disabled={disabled}
-          onClick={replace}
-          aria-label={tooltip}
-          sx={{
-            lineHeight: 0,
-            '&.Mui-disabled': {
-              opacity: 0.5
-            }
-          }}
-        >
-          <replaceCellIcon.react height="16px" width="16px" />
-        </IconButton>
-      </span>
-    </Tooltip>
+    <TooltippedIconButton
+      className={props.className}
+      tooltip={tooltip}
+      disabled={disabled}
+      onClick={replace}
+      inputToolbar={false}
+    >
+      <replaceCellIcon.react height="16px" width="16px" />
+    </TooltippedIconButton>
   );
 }

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

@@ -3,10 +3,10 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { copyIcon } from '@jupyterlab/ui-components';
 import React, { useState, useCallback, useRef } from 'react';
 
-import { copyIcon } from '@jupyterlab/ui-components';
-import { IconButton, Tooltip } from '@mui/material';
+import { TooltippedIconButton } from '../mui-extras';
 
 enum CopyStatus {
   None,
@@ -61,23 +61,16 @@ export function CopyButton(props: CopyButtonProps): JSX.Element {
   const tooltip = COPYBTN_TEXT_BY_STATUS[copyStatus];
 
   return (
-    <Tooltip title={tooltip} placement="top" arrow>
-      <span>
-        <IconButton
-          disabled={isCopyDisabled}
-          className={props.className}
-          onClick={copy}
-          aria-label="Copy to clipboard"
-          sx={{
-            lineHeight: 0,
-            '&.Mui-disabled': {
-              opacity: 0.5
-            }
-          }}
-        >
-          <copyIcon.react height="16px" width="16px" />
-        </IconButton>
-      </span>
-    </Tooltip>
+    <TooltippedIconButton
+      disabled={isCopyDisabled}
+      className={props.className}
+      tooltip={tooltip}
+      placement="top"
+      onClick={copy}
+      aria-label="Copy to clipboard"
+      inputToolbar={false}
+    >
+      <copyIcon.react height="16px" width="16px" />
+    </TooltippedIconButton>
   );
 }

package/src/components/index.ts

@@ -9,4 +9,5 @@ export * from './code-blocks';
 export * from './input';
 export * from './jl-theme-provider';
 export * from './messages';
+export * from './mui-extras';
 export * from './scroll-container';

package/src/components/input/buttons/attach-button.tsx

@@ -8,7 +8,7 @@ import AttachFileIcon from '@mui/icons-material/AttachFile';
 import React from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
-import { TooltippedButton } from '../../mui-extras/tooltipped-button';
+import { TooltippedIconButton } from '../../mui-extras';
 
 const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';
 
@@ -47,23 +47,15 @@ export function AttachButton(
   };
 
   return (
-    <TooltippedButton
+    <TooltippedIconButton
       onClick={onclick}
       tooltip={tooltip}
-      buttonProps={{
-        size: 'small',
-        variant: 'text',
+      iconButtonProps={{
         title: tooltip,
         className: ATTACH_BUTTON_CLASS
       }}
-      sx={{
-        width: '24px',
-        height: '24px',
-        minWidth: '24px',
-        color: 'gray'
-      }}
     >
-      <AttachFileIcon sx={{ fontSize: '16px ' }} />
-    </TooltippedButton>
+      <AttachFileIcon />
+    </TooltippedIconButton>
   );
 }

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

@@ -4,10 +4,10 @@
  */
 
 import CloseIcon from '@mui/icons-material/Close';
-import { IconButton, Tooltip } from '@mui/material';
 import React from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
+import { TooltippedIconButton } from '../../mui-extras';
 
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 
@@ -22,22 +22,15 @@ export function CancelButton(
   }
   const tooltip = 'Cancel editing';
   return (
-    <Tooltip title={tooltip} placement="top" arrow>
-      <span>
-        <IconButton
-          onClick={props.model.cancel}
-          className={CANCEL_BUTTON_CLASS}
-          aria-label={tooltip}
-          sx={{
-            width: '24px',
-            height: '24px',
-            padding: 0,
-            lineHeight: 0
-          }}
-        >
-          <CloseIcon sx={{ fontSize: '16px' }} />
-        </IconButton>
-      </span>
-    </Tooltip>
+    <TooltippedIconButton
+      onClick={props.model.cancel}
+      tooltip={tooltip}
+      iconButtonProps={{
+        title: tooltip,
+        className: CANCEL_BUTTON_CLASS
+      }}
+    >
+      <CloseIcon />
+    </TooltippedIconButton>
   );
 }

package/src/components/input/buttons/save-edit-button.tsx

@@ -4,10 +4,10 @@
  */
 
 import CheckIcon from '@mui/icons-material/Check';
-import { IconButton, Tooltip } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
+import { TooltippedIconButton } from '../../mui-extras';
 
 const SAVE_EDIT_BUTTON_CLASS = 'jp-chat-save-edit-button';
 
@@ -50,26 +50,17 @@ export function SaveEditButton(
   }
 
   return (
-    <Tooltip title={tooltip} placement="top" arrow>
-      <span>
-        <IconButton
-          onClick={save}
-          disabled={disabled}
-          className={SAVE_EDIT_BUTTON_CLASS}
-          aria-label={tooltip}
-          sx={{
-            width: '24px',
-            height: '24px',
-            padding: 0,
-            lineHeight: 0,
-            '&.Mui-disabled': {
-              opacity: 0.5
-            }
-          }}
-        >
-          <CheckIcon sx={{ fontSize: '16px' }} />
-        </IconButton>
-      </span>
-    </Tooltip>
+    <TooltippedIconButton
+      onClick={save}
+      tooltip={tooltip}
+      disabled={disabled}
+      iconButtonProps={{
+        title: tooltip,
+        className: SAVE_EDIT_BUTTON_CLASS
+      }}
+      aria-label={tooltip}
+    >
+      <CheckIcon />
+    </TooltippedIconButton>
   );
 }

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

@@ -4,10 +4,10 @@
  */
 
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-import { Button, Tooltip } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
+import { TooltippedIconButton } from '../../mui-extras';
 import { IInputModel, InputModel } from '../../../input-model';
 
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
@@ -69,38 +69,17 @@ export function SendButton(
   }
 
   return (
-    <Tooltip title={tooltip} placement="top" arrow>
-      <span>
-        <Button
-          onClick={send}
-          disabled={disabled}
-          size="small"
-          variant="contained"
-          className={SEND_BUTTON_CLASS}
-          aria-label={tooltip}
-          sx={{
-            backgroundColor: 'var(--jp-brand-color1)',
-            color: 'white',
-            minWidth: '24px',
-            width: '24px',
-            height: '24px',
-            borderRadius: '4px',
-            boxShadow: 'none',
-            lineHeight: 0,
-            '&:hover': {
-              backgroundColor: 'var(--jp-brand-color0)',
-              boxShadow: 'none'
-            },
-            '&.Mui-disabled': {
-              backgroundColor: 'var(--jp-border-color2)',
-              color: 'var(--jp-ui-font-color3)',
-              opacity: 0.5
-            }
-          }}
-        >
-          <ArrowUpwardIcon sx={{ fontSize: '16px' }} />
-        </Button>
-      </span>
-    </Tooltip>
+    <TooltippedIconButton
+      onClick={send}
+      tooltip={tooltip}
+      disabled={disabled}
+      iconButtonProps={{
+        title: tooltip,
+        className: SEND_BUTTON_CLASS
+      }}
+      aria-label={tooltip}
+    >
+      <ArrowUpwardIcon />
+    </TooltippedIconButton>
   );
 }

package/src/components/input/buttons/stop-button.tsx

@@ -4,10 +4,10 @@
  */
 
 import StopIcon from '@mui/icons-material/Stop';
-import { Button, Tooltip } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
+import { TooltippedIconButton } from '../../mui-extras';
 
 const STOP_BUTTON_CLASS = 'jp-chat-stop-button';
 
@@ -51,38 +51,17 @@ export function StopButton(
   }
 
   return (
-    <Tooltip title={tooltip} placement="top" arrow>
-      <span>
-        <Button
-          onClick={stop}
-          disabled={disabled}
-          size="small"
-          variant="contained"
-          className={STOP_BUTTON_CLASS}
-          aria-label={tooltip}
-          sx={{
-            backgroundColor: 'var(--jp-error-color1)',
-            color: 'white',
-            minWidth: '24px',
-            width: '24px',
-            height: '24px',
-            borderRadius: '4px',
-            boxShadow: 'none',
-            lineHeight: 0,
-            '&:hover': {
-              backgroundColor: 'var(--jp-error-color0)',
-              boxShadow: 'none'
-            },
-            '&.Mui-disabled': {
-              backgroundColor: 'var(--jp-border-color2)',
-              color: 'var(--jp-ui-font-color3)',
-              opacity: 0.5
-            }
-          }}
-        >
-          <StopIcon sx={{ fontSize: '16px' }} />
-        </Button>
-      </span>
-    </Tooltip>
+    <TooltippedIconButton
+      onClick={stop}
+      tooltip={tooltip}
+      disabled={disabled}
+      iconButtonProps={{
+        title: tooltip,
+        className: STOP_BUTTON_CLASS
+      }}
+      aria-label={tooltip}
+    >
+      <StopIcon />
+    </TooltippedIconButton>
   );
 }