@jupyter/chat 0.1.0 → 0.3.0

package/lib/components/code-blocks/copy-button.js

@@ -0,0 +1,43 @@
+/*
+ * 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';
+var CopyStatus;
+(function (CopyStatus) {
+    CopyStatus[CopyStatus["None"] = 0] = "None";
+    CopyStatus[CopyStatus["Copying"] = 1] = "Copying";
+    CopyStatus[CopyStatus["Copied"] = 2] = "Copied";
+})(CopyStatus || (CopyStatus = {}));
+const COPYBTN_TEXT_BY_STATUS = {
+    [CopyStatus.None]: 'Copy to clipboard',
+    [CopyStatus.Copying]: 'Copying…',
+    [CopyStatus.Copied]: 'Copied!'
+};
+export function CopyButton(props) {
+    const [copyStatus, setCopyStatus] = useState(CopyStatus.None);
+    const timeoutId = useRef(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 (React.createElement(TooltippedIconButton, { className: props.className, tooltip: COPYBTN_TEXT_BY_STATUS[copyStatus], placement: "top", onClick: copy, "aria-label": "Copy to clipboard" },
+        React.createElement(copyIcon.react, { height: "16px", width: "16px" })));
+}

package/lib/components/mui-extras/contrasting-tooltip.d.ts

@@ -0,0 +1,6 @@
+import { TooltipProps } 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 declare const ContrastingTooltip: import("@emotion/styled").StyledComponent<TooltipProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/lib/components/mui-extras/contrasting-tooltip.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React from 'react';
+import { styled, Tooltip, 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 }) => (React.createElement(Tooltip, { ...props, arrow: true, 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/lib/components/mui-extras/tooltipped-icon-button.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { IconButtonProps, TooltipProps } from '@mui/material';
+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 declare function TooltippedIconButton(props: TooltippedIconButtonProps): JSX.Element;

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React from 'react';
+import { IconButton } from '@mui/material';
+import { ContrastingTooltip } from './contrasting-tooltip';
+/**
+ * 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) {
+    var _a;
+    return (React.createElement(ContrastingTooltip, { title: props.tooltip, placement: (_a = props.placement) !== null && _a !== void 0 ? _a : 'top', slotProps: {
+            popper: {
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, -8]
+                        }
+                    }
+                ]
+            }
+        } },
+        React.createElement("span", { className: props.className },
+            React.createElement(IconButton, { ...props.iconButtonProps, onClick: props.onClick, disabled: props.disabled, sx: { lineHeight: 0, ...(props.disabled && { opacity: 0.5 }) }, "aria-label": props['aria-label'] }, props.children))));
+}

package/lib/components/rendermime-markdown.d.ts

@@ -1,9 +1,11 @@
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import React from 'react';
+import { IChatModel } from '../model';
 type RendermimeMarkdownProps = {
     markdownStr: string;
     rmRegistry: IRenderMimeRegistry;
     appendContent?: boolean;
+    model: IChatModel;
     edit?: () => void;
     delete?: () => void;
 };

package/lib/components/rendermime-markdown.js

@@ -2,9 +2,9 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { CopyButton } from './copy-button';
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { CodeToolbar } from './code-blocks/code-toolbar';
 import { MessageToolbar } from './toolbar';
 const MD_MIME_TYPE = 'text/markdown';
 const RENDERMIME_MD_CLASS = 'jp-chat-rendermime-markdown';
@@ -21,7 +21,8 @@ function escapeLatexDelimiters(text) {
 function RendermimeMarkdownBase(props) {
     const appendContent = props.appendContent || false;
     const [renderedContent, setRenderedContent] = useState(null);
-    const containerRef = useRef(null);
+    // each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
+    const [codeToolbarDefns, setCodeToolbarDefns] = useState([]);
     useEffect(() => {
         const renderContent = async () => {
             var _a;
@@ -32,23 +33,36 @@ function RendermimeMarkdownBase(props) {
             const renderer = props.rmRegistry.createRenderer(MD_MIME_TYPE);
             await renderer.renderModel(model);
             (_a = props.rmRegistry.latexTypesetter) === null || _a === void 0 ? void 0 : _a.typeset(renderer.node);
-            // Attach CopyButton to each <pre> block
-            if (containerRef.current && renderer.node) {
-                const preBlocks = renderer.node.querySelectorAll('pre');
-                preBlocks.forEach(preBlock => {
-                    var _a;
-                    const copyButtonContainer = document.createElement('div');
-                    (_a = preBlock.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(copyButtonContainer, preBlock.nextSibling);
-                    ReactDOM.render(React.createElement(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 = [];
+            // Attach CodeToolbar root element to each <pre> block
+            const preBlocks = renderer.node.querySelectorAll('pre');
+            preBlocks.forEach(preBlock => {
+                var _a;
+                const codeToolbarRoot = document.createElement('div');
+                (_a = preBlock.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(codeToolbarRoot, preBlock.nextSibling);
+                newCodeToolbarDefns.push([
+                    codeToolbarRoot,
+                    { model: props.model, content: preBlock.textContent || '' }
+                ]);
+            });
+            setCodeToolbarDefns(newCodeToolbarDefns);
             setRenderedContent(renderer.node);
         };
         renderContent();
     }, [props.markdownStr, props.rmRegistry]);
-    return (React.createElement("div", { ref: containerRef, className: RENDERMIME_MD_CLASS },
+    return (React.createElement("div", { className: RENDERMIME_MD_CLASS },
         renderedContent &&
             (appendContent ? (React.createElement("div", { ref: node => node && node.appendChild(renderedContent) })) : (React.createElement("div", { ref: node => node && node.replaceChildren(renderedContent) }))),
-        React.createElement(MessageToolbar, { edit: props.edit, delete: props.delete })));
+        React.createElement(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(React.createElement(CodeToolbar, { ...codeToolbarProps }), codeToolbarRoot);
+        })));
 }
 export const RendermimeMarkdown = React.memo(RendermimeMarkdownBase);

package/lib/components/scroll-container.js

@@ -2,7 +2,7 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box } from '@mui/material';
 /**
  * Component that handles intelligent scrolling.
@@ -21,24 +21,6 @@ import { Box } from '@mui/material';
  */
 export function ScrollContainer(props) {
     const id = useMemo(() => 'jupyter-chat-scroll-container-' + Date.now().toString(), []);
-    /**
-     * Effect: Scroll the container to the bottom as soon as it is visible.
-     */
-    useEffect(() => {
-        const el = document.querySelector(`#${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 (React.createElement(Box, { id: id, sx: {
             overflowY: 'scroll',
             '& *': {

package/lib/icons.d.ts

@@ -1,2 +1,4 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 export declare const chatIcon: LabIcon;
+export declare const readIcon: LabIcon;
+export declare const replaceCellIcon: LabIcon;

package/lib/icons.js

@@ -5,7 +5,17 @@
 // This file is based on iconimports.ts in @jupyterlab/ui-components, but is manually generated.
 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/lib/index.d.ts

@@ -1,6 +1,8 @@
 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';

package/lib/index.js

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

package/lib/model.d.ts

@@ -1,18 +1,28 @@
+import { CommandRegistry } from '@lumino/commands';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
 import { IChatHistory, INewMessage, IChatMessage, IConfig, IUser } from './types';
+import { IActiveCellManager } from './active-cell-manager';
 /**
  * The chat model interface.
  */
 export interface IChatModel extends IDisposable {
     /**
-     * The chat model ID.
+     * The chat model name.
      */
-    id: string;
+    name: string;
     /**
      * The configuration for the chat panel.
      */
     config: IConfig;
+    /**
+     * The indexes list of the unread messages.
+     */
+    unreadMessages: number[];
+    /**
+     * The indexes list of the messages currently in the viewport.
+     */
+    messagesInViewport?: number[];
     /**
      * The user connected to the chat panel.
      */
@@ -22,9 +32,25 @@ export interface IChatModel extends IDisposable {
      */
     readonly messages: IChatMessage[];
     /**
-     * The signal emitted when the messages list is updated.
+     * Get the active cell manager.
+     */
+    readonly activeCellManager: IActiveCellManager | null;
+    /**
+     * A signal emitting when the messages list is updated.
      */
     readonly messagesUpdated: ISignal<IChatModel, void>;
+    /**
+     * A signal emitting when the messages list is updated.
+     */
+    get configChanged(): ISignal<IChatModel, IConfig>;
+    /**
+     * A signal emitting when unread messages change.
+     */
+    readonly unreadChanged?: ISignal<IChatModel, number[]>;
+    /**
+     * A signal emitting when the viewport change.
+     */
+    readonly viewportChanged?: ISignal<IChatModel, number[]>;
     /**
      * Send a message, to be defined depending on the chosen technology.
      * Default to no-op.
@@ -93,20 +119,53 @@ export declare class ChatModel implements IChatModel {
      * The chat messages list.
      */
     get messages(): IChatMessage[];
+    get activeCellManager(): IActiveCellManager | null;
+    /**
+     * The chat model id.
+     */
+    get id(): string | undefined;
+    set id(value: string | undefined);
+    /**
+     * The chat model name.
+     */
+    get name(): string;
+    set name(value: string);
     /**
-     * The chat model ID.
+     * Timestamp of the last read message in local storage.
      */
-    get id(): string;
-    set id(value: string);
+    get lastRead(): number;
+    set lastRead(value: number);
     /**
      * The chat settings.
      */
     get config(): IConfig;
     set config(value: Partial<IConfig>);
     /**
-     * The signal emitted when the messages list is updated.
+     * The indexes list of the unread messages.
+     */
+    get unreadMessages(): number[];
+    set unreadMessages(unread: number[]);
+    /**
+     * The indexes list of the messages currently in the viewport.
+     */
+    get messagesInViewport(): number[];
+    set messagesInViewport(values: number[]);
+    /**
+     * A signal emitting when the messages list is updated.
      */
     get messagesUpdated(): ISignal<IChatModel, void>;
+    /**
+     * A signal emitting when the messages list is updated.
+     */
+    get configChanged(): ISignal<IChatModel, IConfig>;
+    /**
+     * A signal emitting when unread messages change.
+     */
+    get unreadChanged(): ISignal<IChatModel, number[]>;
+    /**
+     * A signal emitting when the viewport change.
+     */
+    get viewportChanged(): ISignal<IChatModel, number[]>;
     /**
      * Send a message, to be defined depending on the chosen technology.
      * Default to no-op.
@@ -115,13 +174,6 @@ export declare class ChatModel implements IChatModel {
      * @returns whether the message has been sent or not.
      */
     addMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
-    /**
-     * Optional, to update a message from the chat panel.
-     *
-     * @param id - the unique ID of the message.
-     * @param message - the message to update.
-     */
-    updateMessage?(id: string, message: INewMessage): Promise<boolean | void> | boolean | void;
     /**
      * Dispose the chat model.
      */
@@ -155,11 +207,35 @@ export declare class ChatModel implements IChatModel {
      * @param count - the number of messages to delete.
      */
     messagesDeleted(index: number, count: number): void;
+    /**
+     * Add unread messages to the list.
+     * @param indexes - list of new indexes.
+     */
+    private _addUnreadMessages;
+    /**
+     * Notifications on unread messages.
+     *
+     * @param unreadCount - number of unread messages.
+     *    If the value is 0, existing notification will be deleted.
+     * @param canCreate - whether to create a notification if it does not exist.
+     *    Usually it is used when there are new unread messages, and not when the
+     *    unread messages count decrease.
+     */
+    private _notify;
     private _messages;
+    private _unreadMessages;
+    private _messagesInViewport;
     private _id;
+    private _name;
     private _config;
     private _isDisposed;
+    private _commands?;
+    private _activeCellManager;
+    private _notificationId;
     private _messagesUpdated;
+    private _configChanged;
+    private _unreadChanged;
+    private _viewportChanged;
 }
 /**
  * The chat model namespace.
@@ -173,5 +249,13 @@ export declare namespace ChatModel {
          * Initial config for the chat widget.
          */
         config?: IConfig;
+        /**
+         * Commands registry.
+         */
+        commands?: CommandRegistry;
+        /**
+         * Active cell manager
+         */
+        activeCellManager?: IActiveCellManager | null;
     }
 }