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

package/lib/components/messages/message-renderer.d.ts

@@ -1,7 +1,5 @@
-import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { PromiseDelegate } from '@lumino/coreutils';
 import React from 'react';
-import { IChatModel } from '../../model';
 /**
  * The type of the props for the MessageRenderer component.
  */
@@ -10,14 +8,6 @@ type MessageRendererProps = {
      * The string to render.
      */
     markdownStr: string;
-    /**
-     * The rendermime registry.
-     */
-    rmRegistry: IRenderMimeRegistry;
-    /**
-     * The model of the chat.
-     */
-    model: IChatModel;
     /**
      * The promise to resolve when the message is rendered.
      */

package/lib/components/messages/message-renderer.js

@@ -4,14 +4,16 @@
  */
 import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { CodeToolbar } from '../code-blocks/code-toolbar';
 import { MessageToolbar } from './toolbar';
+import { CodeToolbar } from '../code-blocks/code-toolbar';
+import { useChatContext } from '../../context';
 import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
 /**
  * The message renderer base component.
  */
 function MessageRendererBase(props) {
-    const { markdownStr, rmRegistry } = props;
+    const { markdownStr } = props;
+    const { model, rmRegistry } = useChatContext();
     const appendContent = props.appendContent || false;
     const [renderedContent, setRenderedContent] = useState(null);
     // each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
@@ -31,7 +33,7 @@ function MessageRendererBase(props) {
                 (_a = preBlock.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(codeToolbarRoot, preBlock.nextSibling);
                 newCodeToolbarDefns.push([
                     codeToolbarRoot,
-                    { model: props.model, content: preBlock.textContent || '' }
+                    { model: model, content: preBlock.textContent || '' }
                 ]);
             });
             setCodeToolbarDefns(newCodeToolbarDefns);

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

@@ -1,11 +1,10 @@
 import { PromiseDelegate } from '@lumino/coreutils';
 import React from 'react';
-import { BaseMessageProps } from './messages';
 import { IChatMessage } from '../../types';
 /**
- * The message component body.
+ * The message component props.
  */
-export declare const ChatMessage: React.ForwardRefExoticComponent<BaseMessageProps & {
+type ChatMessageProps = {
     /**
      * The message to display.
      */
@@ -18,4 +17,9 @@ export declare const ChatMessage: React.ForwardRefExoticComponent<BaseMessagePro
      * The promise to resolve when the message is rendered.
      */
     renderedPromise: PromiseDelegate<void>;
-} & React.RefAttributes<HTMLDivElement>>;
+};
+/**
+ * The message component body.
+ */
+export declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/messages/message.js

@@ -6,13 +6,15 @@ import React, { forwardRef, useEffect, useState } from 'react';
 import { MessageRenderer } from './message-renderer';
 import { AttachmentPreviewList } from '../attachments';
 import { ChatInput } from '../input';
+import { useChatContext } from '../../context';
 import { InputModel } from '../../input-model';
 import { replaceSpanToMention } from '../../utils';
 /**
  * The message component body.
  */
 export const ChatMessage = forwardRef((props, ref) => {
-    const { message, model, rmRegistry } = props;
+    const { message } = props;
+    const { model } = useChatContext();
     const [edit, setEdit] = useState(false);
     const [deleted, setDeleted] = useState(false);
     const [canEdit, setCanEdit] = useState(false);
@@ -94,7 +96,7 @@ export const ChatMessage = forwardRef((props, ref) => {
     };
     // Empty if the message has been deleted.
     return deleted ? (React.createElement("div", { ref: ref, "data-index": props.index })) : (React.createElement("div", { ref: ref, "data-index": props.index },
-        edit && canEdit && model.getEditionModel(message.id) ? (React.createElement(ChatInput, { onCancel: () => cancelEdition(), model: model.getEditionModel(message.id), chatCommandRegistry: props.chatCommandRegistry, toolbarRegistry: props.inputToolbarRegistry, edit: true })) : (React.createElement(MessageRenderer, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? startEdition : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined, rendered: props.renderedPromise })),
+        edit && canEdit && model.getEditionModel(message.id) ? (React.createElement(ChatInput, { onCancel: () => cancelEdition(), model: model.getEditionModel(message.id), edit: true })) : (React.createElement(MessageRenderer, { markdownStr: message.body, edit: canEdit ? startEdition : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined, rendered: props.renderedPromise })),
         message.attachments && !edit && (
         // Display the attachments only if message is not edited, otherwise the
         // input component display them.

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

@@ -1,44 +1,6 @@
 /// <reference types="react" />
-import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { IInputToolbarRegistry } from '../input';
-import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
-import { IChatModel } from '../../model';
-import { ChatArea } from '../../types';
 export declare const MESSAGE_CLASS = "jp-chat-message";
-/**
- * The base components props.
- */
-export type BaseMessageProps = {
-    /**
-     * The mime renderer registry.
-     */
-    rmRegistry: IRenderMimeRegistry;
-    /**
-     * The chat model.
-     */
-    model: IChatModel;
-    /**
-     * The chat commands registry.
-     */
-    chatCommandRegistry?: IChatCommandRegistry;
-    /**
-     * The input toolbar registry.
-     */
-    inputToolbarRegistry: IInputToolbarRegistry;
-    /**
-     * The footer registry.
-     */
-    messageFooterRegistry?: IMessageFooterRegistry;
-    /**
-     * The welcome message.
-     */
-    welcomeMessage?: string;
-    /**
-     * The area where the chat is displayed.
-     */
-    area?: ChatArea;
-};
 /**
  * The messages list component.
  */
-export declare function ChatMessages(props: BaseMessageProps): JSX.Element;
+export declare function ChatMessages(): JSX.Element;

package/lib/components/messages/messages.js

@@ -12,17 +12,20 @@ import { ChatMessage } from './message';
 import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
 import { ScrollContainer } from '../scroll-container';
+import { useChatContext } from '../../context';
 export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
 /**
  * The messages list component.
  */
-export function ChatMessages(props) {
-    const { model } = props;
+export function ChatMessages() {
+    var _a;
+    const { area, messageFooterRegistry, model, welcomeMessage } = useChatContext();
     const [messages, setMessages] = useState(model.messages);
     const refMsgBox = useRef(null);
     const [allRendered, setAllRendered] = useState(false);
+    const [showDeleted, setShowDeleted] = useState((_a = model.config.showDeleted) !== null && _a !== void 0 ? _a : false);
     // The list of message DOM and their rendered promises.
     const listRef = useRef([]);
     const renderedPromise = useRef([]);
@@ -49,10 +52,25 @@ export function ChatMessages(props) {
             setMessages([...model.messages]);
         }
         model.messagesUpdated.connect(handleChatEvents);
-        return function cleanup() {
+        return () => {
             model.messagesUpdated.disconnect(handleChatEvents);
         };
     }, [model]);
+    /**
+     * Effect: Listen to the config change.
+     */
+    useEffect(() => {
+        function handleConfigChange(_, config) {
+            var _a;
+            if (config.showDeleted !== showDeleted) {
+                setShowDeleted((_a = config.showDeleted) !== null && _a !== void 0 ? _a : false);
+            }
+        }
+        model.configChanged.connect(handleConfigChange);
+        return () => {
+            model.configChanged.disconnect(handleConfigChange);
+        };
+    }, [model, showDeleted]);
     /**
      * Observe the messages to update the current viewport and the unread messages.
      */
@@ -88,7 +106,7 @@ export function ChatMessages(props) {
                     }
                 }
             });
-            props.model.messagesInViewport = inViewport;
+            model.messagesInViewport = inViewport;
             // Ensure that all messages are rendered before updating unread messages, otherwise
             // it can lead to wrong assumption , because more message are in the viewport
             // before they are rendered.
@@ -112,10 +130,10 @@ export function ChatMessages(props) {
             });
         };
     }, [messages, allRendered]);
-    const horizontalPadding = props.area === 'main' ? 8 : 4;
+    const horizontalPadding = area === 'main' ? 8 : 4;
     return (React.createElement(React.Fragment, null,
         React.createElement(ScrollContainer, { sx: { flexGrow: 1 } },
-            props.welcomeMessage && (React.createElement(WelcomeMessage, { rmRegistry: props.rmRegistry, content: props.welcomeMessage })),
+            welcomeMessage && React.createElement(WelcomeMessage, { content: welcomeMessage }),
             React.createElement(Box, { sx: {
                     paddingLeft: horizontalPadding,
                     paddingRight: horizontalPadding,
@@ -124,9 +142,9 @@ export function ChatMessages(props) {
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 4
-                }, ref: refMsgBox, className: clsx(MESSAGES_BOX_CLASS) }, messages
-                .filter(message => !message.deleted)
-                .map((message, i) => {
+                }, ref: refMsgBox, className: clsx(MESSAGES_BOX_CLASS) }, (showDeleted
+                ? messages
+                : messages.filter(message => !message.deleted)).map((message, i) => {
                 renderedPromise.current[i] = new PromiseDelegate();
                 const isCurrentUser = model.user !== undefined &&
                     model.user.username === message.sender.username;
@@ -134,7 +152,7 @@ export function ChatMessages(props) {
                 // extra div needed to ensure each bubble is on a new line
                 React.createElement(Box, { key: i, sx: {
                         ...(isCurrentUser && {
-                            marginLeft: props.area === 'main' ? '25%' : '10%',
+                            marginLeft: area === 'main' ? '25%' : '10%',
                             backgroundColor: 'var(--jp-layout-color2)',
                             border: 'none',
                             borderRadius: 2,
@@ -142,8 +160,8 @@ export function ChatMessages(props) {
                         })
                     }, className: clsx(MESSAGE_CLASS, message.stacked ? MESSAGE_STACKED_CLASS : '') },
                     React.createElement(ChatMessageHeader, { message: message, isCurrentUser: isCurrentUser }),
-                    React.createElement(ChatMessage, { ...props, message: message, index: i, renderedPromise: renderedPromise.current[i], ref: el => (listRef.current[i] = el) }),
-                    props.messageFooterRegistry && (React.createElement(MessageFooterComponent, { registry: props.messageFooterRegistry, message: message, model: model }))));
+                    React.createElement(ChatMessage, { message: message, index: i, renderedPromise: renderedPromise.current[i], ref: el => (listRef.current[i] = el) }),
+                    messageFooterRegistry && (React.createElement(MessageFooterComponent, { message: message }))));
             }))),
-        React.createElement(Navigation, { ...props, refMsgBox: refMsgBox, allRendered: allRendered })));
+        React.createElement(Navigation, { refMsgBox: refMsgBox, allRendered: allRendered })));
 }

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { BaseMessageProps } from './messages';
 /**
  * The navigation component props.
  */
-type NavigationProps = BaseMessageProps & {
+type NavigationProps = {
     /**
      * The reference to the messages container.
      */

package/lib/components/messages/navigation.js

@@ -5,6 +5,7 @@
 import { Button } from '@jupyter/react-components';
 import { LabIcon, caretDownEmptyIcon, classes } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
+import { useChatContext } from '../../context';
 const NAVIGATION_BUTTON_CLASS = 'jp-chat-navigation';
 const NAVIGATION_UNREAD_CLASS = 'jp-chat-navigation-unread';
 const NAVIGATION_TOP_CLASS = 'jp-chat-navigation-top';
@@ -13,7 +14,7 @@ const NAVIGATION_BOTTOM_CLASS = 'jp-chat-navigation-bottom';
  * The navigation component, to navigate to unread messages.
  */
 export function Navigation(props) {
-    const { model } = props;
+    const { model } = useChatContext();
     const [lastInViewport, setLastInViewport] = useState(true);
     const [unreadBefore, setUnreadBefore] = useState(null);
     const [unreadAfter, setUnreadAfter] = useState(null);

package/lib/components/messages/toolbar.js

@@ -4,8 +4,9 @@
  */
 // 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';
 /**
  * The toolbar attached to a message.
@@ -14,35 +15,20 @@ export function MessageToolbar(props) {
     const buttons = [];
     // 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 = (React.createElement(Tooltip, { key: "delete", title: "Delete", placement: "top", arrow: true },
-            React.createElement("span", null,
-                React.createElement(IconButton, { onClick: props.delete, "aria-label": "Delete", sx: {
-                        width: '24px',
-                        height: '24px',
-                        padding: 0,
-                        lineHeight: 0
-                    } },
-                    React.createElement(DeleteIcon, { sx: { fontSize: '16px' } })))));
+        const deleteButton = (React.createElement(TooltippedIconButton, { tooltip: 'Delete', onClick: props.delete, "aria-label": 'Delete', inputToolbar: false },
+            React.createElement(DeleteIcon, null)));
         buttons.push(deleteButton);
     }
     return (React.createElement(Box, { className: TOOLBAR_CLASS, sx: {

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

@@ -1,8 +1,16 @@
 /// <reference types="react" />
-import { MarkdownRenderer } from '../../markdown-renderer';
+/**
+ * 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 declare function WelcomeMessage(props: MarkdownRenderer.IOptions): JSX.Element;
+export declare function WelcomeMessage(props: IWelcomeMessageProps): JSX.Element;

package/lib/components/messages/welcome.js

@@ -4,6 +4,7 @@
  */
 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';
 /**
@@ -12,7 +13,7 @@ const WELCOME_MESSAGE_CLASS = 'jp-chat-welcome-message';
  * markdown renderer.
  */
 export function WelcomeMessage(props) {
-    const { rmRegistry } = props;
+    const { rmRegistry } = useChatContext();
     const content = props.content + '\n----\n';
     // ref that tracks the content container to store the rendermime node in
     const renderingContainer = useRef(null);

package/lib/components/mui-extras/tooltipped-button.d.ts

@@ -1,9 +1,36 @@
-import { ButtonProps, SxProps, TooltipProps } from '@mui/material';
+import { ButtonOwnProps, ButtonProps, SxProps, TooltipProps } from '@mui/material';
 import React from 'react';
+export declare const TOOLTIPPED_WRAP_CLASS = "jp-chat-tooltipped-wrap";
+export declare const DEFAULT_BUTTON_PROPS: Partial<ButtonOwnProps>;
+export declare const DEFAULT_BUTTON_SX: {
+    minWidth: string;
+    width: string;
+    height: string;
+    lineHeight: number;
+    '&:disabled': {
+        opacity: number;
+    };
+};
+export declare const INPUT_TOOLBAR_BUTTON_SX: {
+    backgroundColor: string;
+    color: string;
+    borderRadius: string;
+    boxShadow: string;
+    '&:hover': {
+        backgroundColor: string;
+        boxShadow: string;
+    };
+    '&:disabled': {
+        backgroundColor: string;
+        color: string;
+        opacity: number;
+    };
+};
 export type TooltippedButtonProps = {
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     tooltip: string;
     children: JSX.Element;
+    inputToolbar?: boolean;
     disabled?: boolean;
     placement?: TooltipProps['placement'];
     /**

package/lib/components/mui-extras/tooltipped-button.js

@@ -5,7 +5,35 @@
 import { Button } 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 = {
+    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
+    }
+};
 /**
  * A component that renders an MUI `Button` with a high-contrast tooltip
  * provided by `ContrastingTooltip`. This component differs from the MUI
@@ -22,7 +50,7 @@ const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
  * features available to `TooltippedIconButton`.
  */
 export function TooltippedButton(props) {
-    var _a;
+    var _a, _b, _c;
     return (React.createElement(ContrastingTooltip, { title: props.tooltip, placement: (_a = props.placement) !== null && _a !== void 0 ? _a : 'top', slotProps: {
             popper: {
                 modifiers: [
@@ -36,9 +64,9 @@ export function TooltippedButton(props) {
             }
         } },
         React.createElement("span", { style: { cursor: 'default' }, className: TOOLTIPPED_WRAP_CLASS },
-            React.createElement(Button, { ...props.buttonProps, onClick: props.onClick, disabled: props.disabled, sx: {
-                    lineHeight: 0,
-                    ...(props.disabled && { opacity: 0.5 }),
+            React.createElement(Button, { ...DEFAULT_BUTTON_PROPS, ...props.buttonProps, onClick: props.onClick, disabled: props.disabled, sx: {
+                    ...DEFAULT_BUTTON_SX,
+                    ...(((_b = props.inputToolbar) !== null && _b !== void 0 ? _b : true) && INPUT_TOOLBAR_BUTTON_SX),
                     ...props.sx
-                }, "aria-label": props['aria-label'] }, props.children))));
+                }, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : props.tooltip }, props.children))));
 }

package/lib/components/mui-extras/tooltipped-icon-button.d.ts

@@ -1,12 +1,17 @@
 /// <reference types="react" />
-import { IconButtonProps, TooltipProps } from '@mui/material';
+import { IconButtonProps, SvgIconOwnProps, TooltipProps } from '@mui/material';
 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.
      *

package/lib/components/mui-extras/tooltipped-icon-button.js

@@ -6,7 +6,7 @@ import { classes } from '@jupyterlab/ui-components';
 import { IconButton } 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';
 /**
  * A component that renders an MUI `IconButton` with a high-contrast tooltip
  * provided by `ContrastingTooltip`. This component differs from the MUI
@@ -20,8 +20,10 @@ const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
  * vertical space in SVG icons.
  */
 export function TooltippedIconButton(props) {
-    var _a;
-    return (React.createElement(ContrastingTooltip, { title: props.tooltip, placement: (_a = props.placement) !== null && _a !== void 0 ? _a : 'top', slotProps: {
+    var _a, _b, _c;
+    // Override the default icon font size from 'medium' to 'small'
+    props.children.props.fontSize = (_a = props.fontSize) !== null && _a !== void 0 ? _a : 'small';
+    return (React.createElement(ContrastingTooltip, { title: props.tooltip, placement: (_b = props.placement) !== null && _b !== void 0 ? _b : 'top', slotProps: {
             popper: {
                 modifiers: [
                     {
@@ -34,9 +36,8 @@ export function TooltippedIconButton(props) {
             }
         } },
         React.createElement("span", { className: classes(props.className, TOOLTIPPED_WRAP_CLASS) },
-            React.createElement(IconButton, { ...props.iconButtonProps, onClick: props.onClick, disabled: props.disabled, sx: {
-                    marginLeft: '8px',
-                    lineHeight: 0,
-                    ...(props.disabled && { opacity: 0.5 })
+            React.createElement(IconButton, { ...DEFAULT_BUTTON_PROPS, ...props.iconButtonProps, onClick: props.onClick, disabled: props.disabled, sx: {
+                    ...DEFAULT_BUTTON_SX,
+                    ...(((_c = props.inputToolbar) !== null && _c !== void 0 ? _c : true) && INPUT_TOOLBAR_BUTTON_SX)
                 }, "aria-label": props['aria-label'] }, props.children))));
 }

package/lib/context.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
-import { IAttachmentOpenerRegistry } from './registers';
-export declare const AttachmentOpenerContext: import("react").Context<IAttachmentOpenerRegistry | undefined>;
+import { Chat } from './components';
+export declare const ChatReactContext: import("react").Context<Chat.IChatProps | undefined>;
+export declare function useChatContext(): Chat.IChatProps;

package/lib/context.js

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

package/lib/index.d.ts

@@ -6,5 +6,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/lib/index.js

@@ -10,5 +10,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/lib/tokens.d.ts

@@ -0,0 +1,11 @@
+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 declare const IChatTracker: Token<IChatTracker>;

package/lib/tokens.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Token } from '@lumino/coreutils';
+/**
+ * A chat tracker token.
+ */
+export const IChatTracker = new Token('@jupyter/chat:IChatTracker', 'The chat widget tracker');

package/lib/types.d.ts

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

package/lib/widgets/chat-widget.d.ts

@@ -3,12 +3,17 @@ import React from 'react';
 import { Message } from '@lumino/messaging';
 import { Chat, IInputToolbarRegistry } from '../components';
 import { IChatModel } from '../model';
+import { ChatArea } from '../types';
 export declare class ChatWidget extends ReactWidget {
     constructor(options: Chat.IOptions);
     /**
      * Get the model of the widget.
      */
     get model(): IChatModel;
+    /**
+     * The area where the chat is opened.
+     */
+    get area(): ChatArea | undefined;
     /**
      * Get the input toolbar registry (if it has been provided when creating the widget).
      */

package/lib/widgets/chat-widget.js

@@ -46,6 +46,12 @@ export class ChatWidget extends ReactWidget {
     get model() {
         return this._chatOptions.model;
     }
+    /**
+     * The area where the chat is opened.
+     */
+    get area() {
+        return this._chatOptions.area;
+    }
     /**
      * Get the input toolbar registry (if it has been provided when creating the widget).
      */