@jupyter/chat 0.10.1 → 0.11.0

package/lib/components/chat-messages.d.ts

@@ -3,6 +3,7 @@ import { PromiseDelegate } from '@lumino/coreutils';
 import React from 'react';
 import { IInputToolbarRegistry } from './input';
 import { IChatCommandRegistry } from '../chat-commands';
+import { IMessageFooterRegistry } from '../footers';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
 /**
@@ -25,6 +26,10 @@ type BaseMessageProps = {
      * The input toolbar registry.
      */
     inputToolbarRegistry: IInputToolbarRegistry;
+    /**
+     * The footer registry.
+     */
+    messageFooterRegistry?: IMessageFooterRegistry;
 };
 /**
  * The messages list component.

package/lib/components/chat-messages.js

@@ -11,6 +11,7 @@ import React, { useEffect, useState, useRef, forwardRef } from 'react';
 import { AttachmentPreviewList } from './attachments';
 import { ChatInput } from './chat-input';
 import { MarkdownRenderer } from './markdown-renderer';
+import { MessageFooter } from './messages/footer';
 import { ScrollContainer } from './scroll-container';
 import { InputModel } from '../input-model';
 import { replaceSpanToMention } from '../utils';
@@ -138,7 +139,8 @@ export function ChatMessages(props) {
                 // extra div needed to ensure each bubble is on a new line
                 React.createElement(Box, { key: i, className: clsx(MESSAGE_CLASS, message.stacked ? MESSAGE_STACKED_CLASS : '') },
                     React.createElement(ChatMessageHeader, { message: message }),
-                    React.createElement(ChatMessage, { ...props, message: message, index: i, renderedPromise: renderedPromise.current[i], ref: el => (listRef.current[i] = el) })));
+                    React.createElement(ChatMessage, { ...props, message: message, index: i, renderedPromise: renderedPromise.current[i], ref: el => (listRef.current[i] = el) }),
+                    props.messageFooterRegistry && (React.createElement(MessageFooter, { registry: props.messageFooterRegistry, message: message, model: model }))));
             })),
             React.createElement(Writers, { writers: currentWriters })),
         React.createElement(Navigation, { ...props, refMsgBox: refMsgBox, allRendered: allRendered })));
@@ -237,6 +239,10 @@ export const ChatMessage = forwardRef((props, ref) => {
             if (model.user.username === message.sender.username) {
                 setCanEdit(model.updateMessage !== undefined);
                 setCanDelete(model.deleteMessage !== undefined);
+                return;
+            }
+            if (message.sender.bot) {
+                setCanDelete(model.deleteMessage !== undefined);
             }
         }
         else {

package/lib/components/chat.d.ts

@@ -3,6 +3,7 @@ import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IChatCommandRegistry } from '../chat-commands';
 import { IInputToolbarRegistry } from './input';
+import { IMessageFooterRegistry } from '../footers';
 import { IChatModel } from '../model';
 import { IAttachmentOpenerRegistry } from '../registry';
 export declare function ChatBody(props: Chat.IChatBodyProps): JSX.Element;
@@ -35,6 +36,10 @@ export declare namespace Chat {
          * The input toolbar registry
          */
         inputToolbarRegistry?: IInputToolbarRegistry;
+        /**
+         * The footer registry.
+         */
+        messageFooterRegistry?: IMessageFooterRegistry;
     }
     /**
      * The options to build the Chat UI.

package/lib/components/chat.js

@@ -19,7 +19,7 @@ export function ChatBody(props) {
         inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
     }
     return (React.createElement(AttachmentOpenerContext.Provider, { value: props.attachmentOpenerRegistry },
-        React.createElement(ChatMessages, { rmRegistry: props.rmRegistry, model: model, chatCommandRegistry: props.chatCommandRegistry, inputToolbarRegistry: inputToolbarRegistry }),
+        React.createElement(ChatMessages, { rmRegistry: props.rmRegistry, model: model, chatCommandRegistry: props.chatCommandRegistry, inputToolbarRegistry: inputToolbarRegistry, messageFooterRegistry: props.messageFooterRegistry }),
         React.createElement(ChatInput, { sx: {
                 paddingLeft: 4,
                 paddingRight: 4,

package/lib/components/messages/footer.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { IMessageFooterRegistry, MessageFooterSectionProps } from '../../footers';
+/**
+ * The chat footer component properties.
+ */
+export interface IMessageFootersProps extends MessageFooterSectionProps {
+    /**
+     * The chat footer registry.
+     */
+    registry: IMessageFooterRegistry;
+}
+/**
+ * The chat footer component, which displays footer components on a row according to
+ * their respective positions.
+ */
+export declare function MessageFooter(props: IMessageFootersProps): JSX.Element;

package/lib/components/messages/footer.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Box } from '@mui/material';
+import React from 'react';
+/**
+ * The chat footer component, which displays footer components on a row according to
+ * their respective positions.
+ */
+export function MessageFooter(props) {
+    var _a, _b, _c;
+    const { message, model, registry } = props;
+    const footer = registry.getFooter();
+    return (React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
+        ((_a = footer.left) === null || _a === void 0 ? void 0 : _a.component) ? (React.createElement(footer.left.component, { message: message, model: model })) : (React.createElement("div", null)),
+        ((_b = footer.center) === null || _b === void 0 ? void 0 : _b.component) ? (React.createElement(footer.center.component, { message: message, model: model })) : (React.createElement("div", null)),
+        ((_c = footer.right) === null || _c === void 0 ? void 0 : _c.component) ? (React.createElement(footer.right.component, { message: message, model: model })) : (React.createElement("div", null))));
+}

package/lib/footers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './registry';
+export * from './types';

package/lib/footers/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './registry';
+export * from './types';

package/lib/footers/registry.d.ts

@@ -0,0 +1,36 @@
+import { Token } from '@lumino/coreutils';
+import { MessageFooter, MessageFooterSection } from './types';
+/**
+ * The interface of a registry to provide chat footer.
+ */
+export interface IMessageFooterRegistry {
+    /**
+     * Get the message footer.
+     */
+    getFooter(): MessageFooter;
+    /**
+     * Add a message footer section.
+     * If multiple labextensions add a section in the same region, only
+     * the last one will be displayed.
+     */
+    addSection(section: MessageFooterSection): void;
+}
+/**
+ * The default implementation of the message footer registry.
+ */
+export declare class MessageFooterRegistry implements IMessageFooterRegistry {
+    /**
+     * Get the footer from the registry.
+     */
+    getFooter(): MessageFooter;
+    /**
+     * Add a message footer.
+     * If several extension add footers, only the last one will be displayed.
+     */
+    addSection(footer: MessageFooterSection): void;
+    private _footers;
+}
+/**
+ * The token providing the chat footer registry.
+ */
+export declare const IMessageFooterRegistry: Token<IMessageFooterRegistry>;

package/lib/footers/registry.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Token } from '@lumino/coreutils';
+/**
+ * The default implementation of the message footer registry.
+ */
+export class MessageFooterRegistry {
+    constructor() {
+        this._footers = {};
+    }
+    /**
+     * Get the footer from the registry.
+     */
+    getFooter() {
+        return this._footers;
+    }
+    /**
+     * Add a message footer.
+     * If several extension add footers, only the last one will be displayed.
+     */
+    addSection(footer) {
+        this._footers[footer.position] = footer;
+    }
+}
+/**
+ * The token providing the chat footer registry.
+ */
+export const IMessageFooterRegistry = new Token('@jupyter/chat:ChatFooterRegistry');

package/lib/footers/types.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { IChatModel } from '../model';
+import { IChatMessage } from '../types';
+/**
+ * The props sent passed to each `MessageFooterSection` React component.
+ */
+export type MessageFooterSectionProps = {
+    model: IChatModel;
+    message: IChatMessage;
+};
+/**
+ * A message footer section which can be added to the footer registry.
+ */
+export type MessageFooterSection = {
+    component: React.FC<MessageFooterSectionProps>;
+    position: 'left' | 'center' | 'right';
+};
+/**
+ * The message footer returned by the registry, composed of 'left', 'center',
+ * and 'right' sections.
+ */
+export type MessageFooter = {
+    left?: MessageFooterSection;
+    center?: MessageFooterSection;
+    right?: MessageFooterSection;
+};

package/lib/footers/types.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export {};

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 export * from './active-cell-manager';
 export * from './chat-commands';
 export * from './components';
+export * from './footers';
 export * from './icons';
 export * from './input-model';
 export * from './model';

package/lib/index.js

@@ -5,6 +5,7 @@
 export * from './active-cell-manager';
 export * from './chat-commands';
 export * from './components';
+export * from './footers';
 export * from './icons';
 export * from './input-model';
 export * from './model';

package/lib/types.d.ts

@@ -12,6 +12,10 @@ export interface IUser {
      * The string to use to mention a user in the chat.
      */
     mention_name?: string;
+    /**
+     * Boolean identifying if user is a bot.
+     */
+    bot?: boolean;
 }
 /**
  * The configuration interface.

package/package.json

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

package/src/components/chat-messages.tsx

@@ -20,8 +20,10 @@ import { AttachmentPreviewList } from './attachments';
 import { ChatInput } from './chat-input';
 import { IInputToolbarRegistry } from './input';
 import { MarkdownRenderer } from './markdown-renderer';
+import { MessageFooter } from './messages/footer';
 import { ScrollContainer } from './scroll-container';
 import { IChatCommandRegistry } from '../chat-commands';
+import { IMessageFooterRegistry } from '../footers';
 import { IInputModel, InputModel } from '../input-model';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
@@ -58,6 +60,10 @@ type BaseMessageProps = {
    * The input toolbar registry.
    */
   inputToolbarRegistry: IInputToolbarRegistry;
+  /**
+   * The footer registry.
+   */
+  messageFooterRegistry?: IMessageFooterRegistry;
 };
 
 /**
@@ -198,6 +204,13 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
                   renderedPromise={renderedPromise.current[i]}
                   ref={el => (listRef.current[i] = el)}
                 />
+                {props.messageFooterRegistry && (
+                  <MessageFooter
+                    registry={props.messageFooterRegistry}
+                    message={message}
+                    model={model}
+                  />
+                )}
               </Box>
             );
           })}
@@ -366,6 +379,10 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
         if (model.user.username === message.sender.username) {
           setCanEdit(model.updateMessage !== undefined);
           setCanDelete(model.deleteMessage !== undefined);
+          return;
+        }
+        if (message.sender.bot) {
+          setCanDelete(model.deleteMessage !== undefined);
         }
       } else {
         setCanEdit(false);

package/src/components/chat.tsx

@@ -17,6 +17,7 @@ import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
 import { IInputToolbarRegistry, InputToolbarRegistry } from './input';
 import { AttachmentOpenerContext } from '../context';
+import { IMessageFooterRegistry } from '../footers';
 import { IChatModel } from '../model';
 import { IAttachmentOpenerRegistry } from '../registry';
 
@@ -34,6 +35,7 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
         model={model}
         chatCommandRegistry={props.chatCommandRegistry}
         inputToolbarRegistry={inputToolbarRegistry}
+        messageFooterRegistry={props.messageFooterRegistry}
       />
       <ChatInput
         sx={{
@@ -125,6 +127,10 @@ export namespace Chat {
      * The input toolbar registry
      */
     inputToolbarRegistry?: IInputToolbarRegistry;
+    /**
+     * The footer registry.
+     */
+    messageFooterRegistry?: IMessageFooterRegistry;
   }
 
   /**

package/src/components/messages/footer.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Box } from '@mui/material';
+import React from 'react';
+import {
+  IMessageFooterRegistry,
+  MessageFooterSectionProps
+} from '../../footers';
+
+/**
+ * The chat footer component properties.
+ */
+export interface IMessageFootersProps extends MessageFooterSectionProps {
+  /**
+   * The chat footer registry.
+   */
+  registry: IMessageFooterRegistry;
+}
+
+/**
+ * The chat footer component, which displays footer components on a row according to
+ * their respective positions.
+ */
+export function MessageFooter(props: IMessageFootersProps): JSX.Element {
+  const { message, model, registry } = props;
+  const footer = registry.getFooter();
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+      {footer.left?.component ? (
+        <footer.left.component message={message} model={model} />
+      ) : (
+        <div />
+      )}
+      {footer.center?.component ? (
+        <footer.center.component message={message} model={model} />
+      ) : (
+        <div />
+      )}
+      {footer.right?.component ? (
+        <footer.right.component message={message} model={model} />
+      ) : (
+        <div />
+      )}
+    </Box>
+  );
+}

package/src/footers/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './registry';
+export * from './types';

package/src/footers/registry.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Token } from '@lumino/coreutils';
+import { MessageFooter, MessageFooterSection } from './types';
+
+/**
+ * The interface of a registry to provide chat footer.
+ */
+export interface IMessageFooterRegistry {
+  /**
+   * Get the message footer.
+   */
+  getFooter(): MessageFooter;
+  /**
+   * Add a message footer section.
+   * If multiple labextensions add a section in the same region, only
+   * the last one will be displayed.
+   */
+  addSection(section: MessageFooterSection): void;
+}
+
+/**
+ * The default implementation of the message footer registry.
+ */
+export class MessageFooterRegistry implements IMessageFooterRegistry {
+  /**
+   * Get the footer from the registry.
+   */
+  getFooter(): MessageFooter {
+    return this._footers;
+  }
+
+  /**
+   * Add a message footer.
+   * If several extension add footers, only the last one will be displayed.
+   */
+  addSection(footer: MessageFooterSection): void {
+    this._footers[footer.position] = footer;
+  }
+
+  private _footers: MessageFooter = {};
+}
+
+/**
+ * The token providing the chat footer registry.
+ */
+export const IMessageFooterRegistry = new Token<IMessageFooterRegistry>(
+  '@jupyter/chat:ChatFooterRegistry'
+);

package/src/footers/types.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IChatModel } from '../model';
+import { IChatMessage } from '../types';
+
+/**
+ * The props sent passed to each `MessageFooterSection` React component.
+ */
+export type MessageFooterSectionProps = {
+  model: IChatModel;
+  message: IChatMessage;
+};
+
+/**
+ * A message footer section which can be added to the footer registry.
+ */
+export type MessageFooterSection = {
+  component: React.FC<MessageFooterSectionProps>;
+  position: 'left' | 'center' | 'right';
+};
+
+/**
+ * The message footer returned by the registry, composed of 'left', 'center',
+ * and 'right' sections.
+ */
+export type MessageFooter = {
+  left?: MessageFooterSection;
+  center?: MessageFooterSection;
+  right?: MessageFooterSection;
+};

package/src/index.ts

@@ -6,6 +6,7 @@
 export * from './active-cell-manager';
 export * from './chat-commands';
 export * from './components';
+export * from './footers';
 export * from './icons';
 export * from './input-model';
 export * from './model';

package/src/types.ts

@@ -17,6 +17,10 @@ export interface IUser {
    * The string to use to mention a user in the chat.
    */
   mention_name?: string;
+  /**
+   * Boolean identifying if user is a bot.
+   */
+  bot?: boolean;
 }
 
 /**