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

package/src/components/messages/toolbar.tsx

@@ -5,9 +5,11 @@
 
 // import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { Box, IconButton, Tooltip } from '@mui/material';
+import { Box } from '@mui/material';
 import React from 'react';
 
+import { TooltippedIconButton } from '../mui-extras';
+
 const TOOLBAR_CLASS = 'jp-chat-toolbar';
 
 /**
@@ -18,43 +20,27 @@ export function MessageToolbar(props: MessageToolbar.IProps): JSX.Element {
 
   // if (props.edit !== undefined) {
   //   const editButton = (
-  //     <Tooltip key="edit" title="Edit" placement="top" arrow>
-  //       <span>
-  //         <IconButton
-  //           onClick={props.edit}
-  //           aria-label="Edit"
-  //           sx={{
-  //             width: '24px',
-  //             height: '24px',
-  //             padding: 0,
-  //             lineHeight: 0
-  //           }}
-  //         >
-  //           <EditIcon sx={{ fontSize: '16px' }} />
-  //         </IconButton>
-  //       </span>
-  //     </Tooltip>
+  //     <TooltippedIconButton
+  //       tooltip={'edit'}
+  //       onClick={props.edit}
+  //       aria-label={'Edit'}
+  //       inputToolbar={false}
+  //     >
+  //       <EditIcon />
+  //     </TooltippedIconButton>
   //   );
   //   buttons.push(editButton);
   // }
   if (props.delete !== undefined) {
     const deleteButton = (
-      <Tooltip key="delete" title="Delete" placement="top" arrow>
-        <span>
-          <IconButton
-            onClick={props.delete}
-            aria-label="Delete"
-            sx={{
-              width: '24px',
-              height: '24px',
-              padding: 0,
-              lineHeight: 0
-            }}
-          >
-            <DeleteIcon sx={{ fontSize: '16px' }} />
-          </IconButton>
-        </span>
-      </Tooltip>
+      <TooltippedIconButton
+        tooltip={'Delete'}
+        onClick={props.delete}
+        aria-label={'Delete'}
+        inputToolbar={false}
+      >
+        <DeleteIcon />
+      </TooltippedIconButton>
     );
     buttons.push(deleteButton);
   }

package/src/components/messages/welcome.tsx

@@ -6,17 +6,28 @@
 import { classes } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef } from 'react';
 
+import { useChatContext } from '../../context';
 import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
 
 const WELCOME_MESSAGE_CLASS = 'jp-chat-welcome-message';
 
+/**
+ * The component props.
+ */
+export interface IWelcomeMessageProps {
+  /**
+   * The content of the welcome message (markdown).
+   */
+  content: string;
+}
+
 /**
  * The welcome message component.
  * This message is displayed on top of the chat messages, and is rendered using a
  * markdown renderer.
  */
-export function WelcomeMessage(props: MarkdownRenderer.IOptions): JSX.Element {
-  const { rmRegistry } = props;
+export function WelcomeMessage(props: IWelcomeMessageProps): JSX.Element {
+  const { rmRegistry } = useChatContext();
   const content = props.content + '\n----\n';
 
   // ref that tracks the content container to store the rendermime node in

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

@@ -3,17 +3,55 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { Button, ButtonProps, SxProps, TooltipProps } from '@mui/material';
+import {
+  Button,
+  ButtonOwnProps,
+  ButtonProps,
+  SxProps,
+  TooltipProps
+} from '@mui/material';
 import React from 'react';
 
 import { ContrastingTooltip } from './contrasting-tooltip';
 
-const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
+export const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
+
+export const DEFAULT_BUTTON_PROPS: Partial<ButtonOwnProps> = {
+  size: 'small',
+  variant: 'contained'
+};
+
+export const DEFAULT_BUTTON_SX = {
+  minWidth: '24px',
+  width: '24px',
+  height: '24px',
+  lineHeight: 0,
+  '&:disabled': {
+    opacity: 0.5
+  }
+};
+
+export const INPUT_TOOLBAR_BUTTON_SX = {
+  backgroundColor: 'var(--jp-brand-color1)',
+  color: 'white',
+  borderRadius: '4px',
+  boxShadow: 'none',
+  '&:hover': {
+    backgroundColor: 'var(--jp-brand-color0)',
+    boxShadow: 'none'
+  },
+  '&:disabled': {
+    backgroundColor: 'var(--jp-border-color2)',
+    color: 'var(--jp-ui-font-color3)',
+    opacity: 0.5
+  }
+};
 
 export type TooltippedButtonProps = {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   tooltip: string;
   children: JSX.Element;
+  inputToolbar?: boolean;
   disabled?: boolean;
   placement?: TooltipProps['placement'];
   /**
@@ -76,15 +114,16 @@ export function TooltippedButton(props: TooltippedButtonProps): JSX.Element {
       */}
       <span style={{ cursor: 'default' }} className={TOOLTIPPED_WRAP_CLASS}>
         <Button
+          {...DEFAULT_BUTTON_PROPS}
           {...props.buttonProps}
           onClick={props.onClick}
           disabled={props.disabled}
           sx={{
-            lineHeight: 0,
-            ...(props.disabled && { opacity: 0.5 }),
+            ...DEFAULT_BUTTON_SX,
+            ...((props.inputToolbar ?? true) && INPUT_TOOLBAR_BUTTON_SX),
             ...props.sx
           }}
-          aria-label={props['aria-label']}
+          aria-label={props['aria-label'] ?? props.tooltip}
         >
           {props.children}
         </Button>

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

@@ -4,20 +4,34 @@
  */
 
 import { classes } from '@jupyterlab/ui-components';
-import { IconButton, IconButtonProps, TooltipProps } from '@mui/material';
+import {
+  IconButton,
+  IconButtonProps,
+  SvgIconOwnProps,
+  TooltipProps
+} from '@mui/material';
 import React from 'react';
 
 import { ContrastingTooltip } from './contrasting-tooltip';
-
-const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
+import {
+  DEFAULT_BUTTON_PROPS,
+  DEFAULT_BUTTON_SX,
+  INPUT_TOOLBAR_BUTTON_SX,
+  TOOLTIPPED_WRAP_CLASS
+} from './tooltipped-button';
 
 export type TooltippedIconButtonProps = {
   onClick: () => unknown;
   tooltip: string;
   children: JSX.Element;
   className?: string;
+  inputToolbar?: boolean;
   disabled?: boolean;
   placement?: TooltipProps['placement'];
+  /**
+   * The font size of the icon. By default it will be set to 'small'.
+   */
+  fontSize?: SvgIconOwnProps['fontSize'];
   /**
    * The offset of the tooltip popup.
    *
@@ -47,6 +61,8 @@ export type TooltippedIconButtonProps = {
 export function TooltippedIconButton(
   props: TooltippedIconButtonProps
 ): JSX.Element {
+  // Override the default icon font size from 'medium' to 'small'
+  props.children.props.fontSize = props.fontSize ?? 'small';
   return (
     <ContrastingTooltip
       title={props.tooltip}
@@ -73,13 +89,13 @@ export function TooltippedIconButton(
       */}
       <span className={classes(props.className, TOOLTIPPED_WRAP_CLASS)}>
         <IconButton
+          {...DEFAULT_BUTTON_PROPS}
           {...props.iconButtonProps}
           onClick={props.onClick}
           disabled={props.disabled}
           sx={{
-            marginLeft: '8px',
-            lineHeight: 0,
-            ...(props.disabled && { opacity: 0.5 })
+            ...DEFAULT_BUTTON_SX,
+            ...((props.inputToolbar ?? true) && INPUT_TOOLBAR_BUTTON_SX)
           }}
           aria-label={props['aria-label']}
         >

package/src/context.ts

@@ -2,9 +2,19 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import { createContext } from 'react';
-import { IAttachmentOpenerRegistry } from './registers';
 
-export const AttachmentOpenerContext = createContext<
-  IAttachmentOpenerRegistry | undefined
->(undefined);
+import { createContext, useContext } from 'react';
+
+import { Chat } from './components';
+
+export const ChatReactContext = createContext<Chat.IChatProps | undefined>(
+  undefined
+);
+
+export function useChatContext(): Chat.IChatProps {
+  const context = useContext(ChatReactContext);
+  if (!context) {
+    throw new Error('The chat context is missing in the chat');
+  }
+  return context;
+}

package/src/index.ts

@@ -11,5 +11,6 @@ export * from './markdown-renderer';
 export * from './model';
 export * from './registers';
 export * from './selection-watcher';
+export * from './tokens';
 export * from './types';
 export * from './widgets';

package/src/tokens.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IWidgetTracker, MainAreaWidget } from '@jupyterlab/apputils';
+import { Token } from '@lumino/coreutils';
+
+import { ChatWidget } from './widgets';
+
+/**
+ * the chat tracker type.
+ */
+export type IChatTracker = IWidgetTracker<
+  ChatWidget | MainAreaWidget<ChatWidget>
+>;
+
+/**
+ * A chat tracker token.
+ */
+export const IChatTracker = new Token<IChatTracker>(
+  '@jupyter/chat:IChatTracker',
+  'The chat widget tracker'
+);

package/src/types.ts

@@ -52,6 +52,10 @@ export interface IConfig {
    * Whether to send typing notification.
    */
   sendTypingNotification?: boolean;
+  /**
+   * Whether to display deleted messages.
+   */
+  showDeleted?: boolean;
 }
 
 /**

package/src/widgets/chat-widget.tsx

@@ -15,6 +15,7 @@ import { Chat, IInputToolbarRegistry, MESSAGE_CLASS } from '../components';
 import { chatIcon } from '../icons';
 import { IChatModel } from '../model';
 import {
+  ChatArea,
   IFileAttachment,
   INotebookAttachment,
   INotebookAttachmentCell
@@ -71,6 +72,13 @@ export class ChatWidget extends ReactWidget {
     return this._chatOptions.model;
   }
 
+  /**
+   * The area where the chat is opened.
+   */
+  get area(): ChatArea | undefined {
+    return this._chatOptions.area;
+  }
+
   /**
    * Get the input toolbar registry (if it has been provided when creating the widget).
    */

package/src/widgets/multichat-panel.tsx

@@ -8,8 +8,7 @@
  * Originally adapted from jupyterlab-chat's ChatPanel
  */
 
-import { InputDialog, IThemeManager } from '@jupyterlab/apputils';
-import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { InputDialog } from '@jupyterlab/apputils';
 import {
   addIcon,
   closeIcon,
@@ -34,11 +33,6 @@ import {
 } from '../components';
 import { chatIcon, readIcon } from '../icons';
 import { IChatModel } from '../model';
-import {
-  IAttachmentOpenerRegistry,
-  IChatCommandRegistry,
-  IMessageFooterRegistry
-} from '../registers';
 
 const SIDEPANEL_CLASS = 'jp-chat-sidepanel';
 const ADD_BUTTON_CLASS = 'jp-chat-add';
@@ -58,13 +52,8 @@ export class MultiChatPanel extends SidePanel {
 
     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;
@@ -149,13 +138,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'
     });
 
@@ -267,13 +251,8 @@ export class MultiChatPanel extends SidePanel {
     this
   );
   private _sectionAdded = new Signal<MultiChatPanel, ChatSection>(this);
-  private _rmRegistry: IRenderMimeRegistry;
-  private _themeManager?: IThemeManager | null;
-  private _chatCommandRegistry?: IChatCommandRegistry;
-  private _attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
+  private _chatOptions: Omit<Chat.IOptions, 'model' | 'inputToolbarRegistry'>;
   private _inputToolbarFactory?: IInputToolbarRegistryFactory;
-  private _messageFooterRegistry?: IMessageFooterRegistry;
-  private _welcomeMessage?: string;
   private _updateChatListDebouncer: Debouncer;
 
   private _createModel?: (
@@ -568,7 +547,9 @@ function ChatSelect({
 
   return (
     <HTMLSelect onChange={handleChange} value="-">
-      <option value="-">Open a chat</option>
+      <option value="-" disabled hidden>
+        Open a chat
+      </option>
       {Object.keys(chatNames).map(name => (
         <option value={chatNames[name]}>{name}</option>
       ))}