@jupyter/chat 0.1.0 → 0.3.0

package/lib/components/chat-messages.js

@@ -2,15 +2,109 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { Button } from '@jupyter/react-components';
+import { LabIcon, caretDownEmptyIcon, classes } from '@jupyterlab/ui-components';
 import { Avatar, Box, Typography } from '@mui/material';
 import clsx from 'clsx';
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { ChatInput } from './chat-input';
 import { RendermimeMarkdown } from './rendermime-markdown';
+import { ScrollContainer } from './scroll-container';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_CLASS = 'jp-chat-message';
+const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
 const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
 const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
+const NAVIGATION_BUTTON_CLASS = 'jp-chat-navigation';
+const NAVIGATION_UNREAD_CLASS = 'jp-chat-navigation-unread';
+const NAVIGATION_TOP_CLASS = 'jp-chat-navigation-top';
+const NAVIGATION_BOTTOM_CLASS = 'jp-chat-navigation-bottom';
+/**
+ * The messages list component.
+ */
+export function ChatMessages(props) {
+    const { model } = props;
+    const [messages, setMessages] = useState(model.messages);
+    const refMsgBox = useRef(null);
+    const inViewport = useRef([]);
+    // The intersection observer that listen to all the message visibility.
+    const observerRef = useRef(new IntersectionObserver(viewportChange));
+    /**
+     * Effect: fetch history and config on initial render
+     */
+    useEffect(() => {
+        async function fetchHistory() {
+            if (!model.getHistory) {
+                return;
+            }
+            model
+                .getHistory()
+                .then(history => setMessages(history.messages))
+                .catch(e => console.error(e));
+        }
+        fetchHistory();
+    }, [model]);
+    /**
+     * Effect: listen to chat messages.
+     */
+    useEffect(() => {
+        function handleChatEvents() {
+            setMessages([...model.messages]);
+        }
+        model.messagesUpdated.connect(handleChatEvents);
+        return function cleanup() {
+            model.messagesUpdated.disconnect(handleChatEvents);
+        };
+    }, [model]);
+    /**
+     * Function called when a message enter or leave the viewport.
+     */
+    function viewportChange(entries) {
+        const unread = [...model.unreadMessages];
+        let unreadModified = false;
+        entries.forEach(entry => {
+            var _a;
+            const index = parseInt((_a = entry.target.getAttribute('data-index')) !== null && _a !== void 0 ? _a : '');
+            if (!isNaN(index)) {
+                if (unread.length) {
+                    const unreadIdx = unread.indexOf(index);
+                    if (unreadIdx !== -1 && entry.isIntersecting) {
+                        unread.splice(unreadIdx, 1);
+                        unreadModified = true;
+                    }
+                }
+                const viewportIdx = inViewport.current.indexOf(index);
+                if (!entry.isIntersecting && viewportIdx !== -1) {
+                    inViewport.current.splice(viewportIdx, 1);
+                }
+                else if (entry.isIntersecting && viewportIdx === -1) {
+                    inViewport.current.push(index);
+                }
+            }
+        });
+        props.model.messagesInViewport = inViewport.current;
+        if (unreadModified) {
+            props.model.unreadMessages = unread;
+        }
+        return () => {
+            var _a;
+            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ScrollContainer, { sx: { flexGrow: 1 } },
+            React.createElement(Box, { ref: refMsgBox, className: clsx(MESSAGES_BOX_CLASS) }, messages.map((message, i) => {
+                return (
+                // 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, observer: observerRef.current, index: i })));
+            }))),
+        React.createElement(Navigation, { ...props, refMsgBox: refMsgBox })));
+}
+/**
+ * The message header component.
+ */
 export function ChatMessageHeader(props) {
     var _a, _b;
     const [datetime, setDatetime] = useState({});
@@ -18,18 +112,20 @@ export function ChatMessageHeader(props) {
         height: '24px',
         width: '24px'
     };
+    const message = props.message;
+    const sender = message.sender;
     /**
      * Effect: update cached datetime strings upon receiving a new message.
      */
     useEffect(() => {
-        if (!datetime[props.timestamp]) {
+        if (!datetime[message.time]) {
             const newDatetime = {};
             let datetime;
             const currentDate = new Date();
             const sameDay = (date) => date.getFullYear() === currentDate.getFullYear() &&
                 date.getMonth() === currentDate.getMonth() &&
                 date.getDate() === currentDate.getDate();
-            const msgDate = new Date(props.timestamp * 1000); // Convert message time to milliseconds
+            const msgDate = new Date(message.time * 1000); // Convert message time to milliseconds
             // Display only the time if the day of the message is the current one.
             if (sameDay(msgDate)) {
                 // Use the browser's default locale
@@ -48,29 +144,30 @@ export function ChatMessageHeader(props) {
                     minute: '2-digit'
                 });
             }
-            newDatetime[props.timestamp] = datetime;
+            newDatetime[message.time] = datetime;
             setDatetime(newDatetime);
         }
     });
-    const bgcolor = props.color;
-    const avatar = props.avatar_url ? (React.createElement(Avatar, { sx: {
+    const bgcolor = sender.color;
+    const avatar = message.stacked ? null : sender.avatar_url ? (React.createElement(Avatar, { sx: {
             ...sharedStyles,
             ...(bgcolor && { bgcolor })
-        }, src: props.avatar_url })) : props.initials ? (React.createElement(Avatar, { sx: {
+        }, src: sender.avatar_url })) : sender.initials ? (React.createElement(Avatar, { sx: {
             ...sharedStyles,
             ...(bgcolor && { bgcolor })
         } },
         React.createElement(Typography, { sx: {
                 fontSize: 'var(--jp-ui-font-size1)',
                 color: 'var(--jp-ui-inverse-font-color1)'
-            } }, props.initials))) : null;
-    const name = (_b = (_a = props.display_name) !== null && _a !== void 0 ? _a : props.name) !== null && _b !== void 0 ? _b : (props.username || 'User undefined');
+            } }, sender.initials))) : null;
+    const name = (_b = (_a = sender.display_name) !== null && _a !== void 0 ? _a : sender.name) !== null && _b !== void 0 ? _b : (sender.username || 'User undefined');
     return (React.createElement(Box, { className: MESSAGE_HEADER_CLASS, sx: {
             display: 'flex',
             alignItems: 'center',
             '& > :not(:last-child)': {
                 marginRight: 3
             },
+            marginBottom: message.stacked ? '0px' : '12px',
             ...props.sx
         } },
         avatar,
@@ -82,64 +179,66 @@ export function ChatMessageHeader(props) {
                 alignItems: 'center'
             } },
             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-                React.createElement(Typography, { sx: { fontWeight: 700, color: 'var(--jp-ui-font-color1)' } }, name),
-                (props.deleted || props.edited) && (React.createElement(Typography, { sx: {
+                !message.stacked && (React.createElement(Typography, { sx: {
+                        fontWeight: 700,
+                        color: 'var(--jp-ui-font-color1)',
+                        paddingRight: '0.5em'
+                    } }, name)),
+                (message.deleted || message.edited) && (React.createElement(Typography, { sx: {
                         fontStyle: 'italic',
-                        fontSize: 'var(--jp-content-font-size0)',
-                        paddingLeft: '0.5em'
-                    } }, props.deleted ? '(message deleted)' : '(edited)'))),
+                        fontSize: 'var(--jp-content-font-size0)'
+                    } }, message.deleted ? '(message deleted)' : '(edited)'))),
             React.createElement(Typography, { className: MESSAGE_TIME_CLASS, sx: {
                     fontSize: '0.8em',
                     color: 'var(--jp-ui-font-color2)',
                     fontWeight: 300
-                }, title: props.rawTime ? 'Unverified time' : '' }, `${datetime[props.timestamp]}${props.rawTime ? '*' : ''}`))));
+                }, title: message.raw_time ? 'Unverified time' : '' }, `${datetime[message.time]}${message.raw_time ? '*' : ''}`))));
 }
 /**
- * The messages list UI.
- */
-export function ChatMessages(props) {
-    return (React.createElement(Box, { sx: {
-            '& > :not(:last-child)': {
-                borderBottom: '1px solid var(--jp-border-color2)'
-            }
-        }, className: clsx(MESSAGES_BOX_CLASS) }, props.messages.map((message, i) => {
-        let sender;
-        if (typeof message.sender === 'string') {
-            sender = { username: message.sender };
-        }
-        else {
-            sender = message.sender;
-        }
-        return (
-        // extra div needed to ensure each bubble is on a new line
-        React.createElement(Box, { key: i, sx: { padding: '1em 1em 0 1em' }, className: clsx(MESSAGE_CLASS) },
-            React.createElement(ChatMessageHeader, { ...sender, timestamp: message.time, rawTime: message.raw_time, deleted: message.deleted, edited: message.edited, sx: { marginBottom: 3 } }),
-            React.createElement(ChatMessage, { ...props, message: message })));
-    })));
-}
-/**
- * the message UI.
+ * The message component body.
  */
 export function ChatMessage(props) {
-    var _a;
     const { message, model, rmRegistry } = props;
-    let canEdit = false;
-    let canDelete = false;
-    if (model.user !== undefined && !message.deleted) {
-        const username = typeof message.sender === 'string'
-            ? message.sender
-            : message.sender.username;
-        if (model.user.username === username && model.updateMessage !== undefined) {
-            canEdit = true;
+    const elementRef = useRef(null);
+    const [edit, setEdit] = useState(false);
+    const [deleted, setDeleted] = useState(false);
+    const [canEdit, setCanEdit] = useState(false);
+    const [canDelete, setCanDelete] = useState(false);
+    // Add the current message to the observer, to actualize viewport and unread messages.
+    useEffect(() => {
+        var _a;
+        if (elementRef.current === null) {
+            return;
         }
-        if (model.user.username === username && model.deleteMessage !== undefined) {
-            canDelete = true;
+        // If the observer is defined, let's observe the message.
+        (_a = props.observer) === null || _a === void 0 ? void 0 : _a.observe(elementRef.current);
+        return () => {
+            var _a;
+            if (elementRef.current !== null) {
+                (_a = props.observer) === null || _a === void 0 ? void 0 : _a.unobserve(elementRef.current);
+            }
+        };
+    }, [model]);
+    // Look if the message can be deleted or edited.
+    useEffect(() => {
+        var _a;
+        setDeleted((_a = message.deleted) !== null && _a !== void 0 ? _a : false);
+        if (model.user !== undefined && !message.deleted) {
+            if (model.user.username === message.sender.username) {
+                setCanEdit(model.updateMessage !== undefined);
+                setCanDelete(model.deleteMessage !== undefined);
+            }
         }
-    }
-    const [edit, setEdit] = useState(false);
+        else {
+            setCanEdit(false);
+            setCanDelete(false);
+        }
+    }, [model, message]);
+    // Cancel the current edition of the message.
     const cancelEdition = () => {
         setEdit(false);
     };
+    // Update the content of the message.
     const updateMessage = (id, input) => {
         if (!canEdit) {
             return;
@@ -150,13 +249,96 @@ export function ChatMessage(props) {
         model.updateMessage(id, updatedMessage);
         setEdit(false);
     };
+    // Delete the message.
     const deleteMessage = (id) => {
         if (!canDelete) {
             return;
         }
-        // Delete the message
         model.deleteMessage(id);
     };
-    // Empty if the message has been deleted
-    return message.deleted ? (React.createElement(React.Fragment, null)) : (React.createElement("div", null, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), sendWithShiftEnter: (_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false })) : (React.createElement(RendermimeMarkdown, { rmRegistry: rmRegistry, markdownStr: message.body, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined }))));
+    // Empty if the message has been deleted.
+    return deleted ? (React.createElement("div", { ref: elementRef, "data-index": props.index })) : (React.createElement("div", { ref: elementRef, "data-index": props.index }, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), model: model })) : (React.createElement(RendermimeMarkdown, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined }))));
+}
+/**
+ * The navigation component, to navigate to unread messages.
+ */
+export function Navigation(props) {
+    const { model } = props;
+    const [lastInViewport, setLastInViewport] = useState(true);
+    const [unreadBefore, setUnreadBefore] = useState(null);
+    const [unreadAfter, setUnreadAfter] = useState(null);
+    const gotoMessage = (msgIdx) => {
+        var _a, _b;
+        (_b = (_a = props.refMsgBox.current) === null || _a === void 0 ? void 0 : _a.children.item(msgIdx)) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+    };
+    // Listen for change in unread messages, and find the first unread message before or
+    // after the current viewport, to display navigation buttons.
+    useEffect(() => {
+        var _a;
+        const unreadChanged = (model, unreadIndexes) => {
+            const viewport = model.messagesInViewport;
+            if (!viewport) {
+                return;
+            }
+            // Initialize the next values with the current values if there still relevant.
+            let before = unreadBefore !== null &&
+                unreadIndexes.includes(unreadBefore) &&
+                unreadBefore < Math.min(...viewport)
+                ? unreadBefore
+                : null;
+            let after = unreadAfter !== null &&
+                unreadIndexes.includes(unreadAfter) &&
+                unreadAfter > Math.max(...viewport)
+                ? unreadAfter
+                : null;
+            unreadIndexes.forEach(unread => {
+                if (viewport === null || viewport === void 0 ? void 0 : viewport.includes(unread)) {
+                    return;
+                }
+                if (unread < (before !== null && before !== void 0 ? before : Math.min(...viewport))) {
+                    before = unread;
+                }
+                else if (unread > Math.max(...viewport) &&
+                    unread < (after !== null && after !== void 0 ? after : model.messages.length)) {
+                    after = unread;
+                }
+            });
+            setUnreadBefore(before);
+            setUnreadAfter(after);
+        };
+        (_a = model.unreadChanged) === null || _a === void 0 ? void 0 : _a.connect(unreadChanged);
+        unreadChanged(model, model.unreadMessages);
+        // Move to first the unread message or to last message on first rendering.
+        if (model.unreadMessages.length) {
+            gotoMessage(Math.min(...model.unreadMessages));
+        }
+        else {
+            gotoMessage(model.messages.length - 1);
+        }
+        return () => {
+            var _a;
+            (_a = model.unreadChanged) === null || _a === void 0 ? void 0 : _a.disconnect(unreadChanged);
+        };
+    }, [model]);
+    // Listen for change in the viewport, to add a navigation button if the last is not
+    // in viewport.
+    useEffect(() => {
+        var _a, _b;
+        const viewportChanged = (model, viewport) => {
+            setLastInViewport(viewport.includes(model.messages.length - 1));
+        };
+        (_a = model.viewportChanged) === null || _a === void 0 ? void 0 : _a.connect(viewportChanged);
+        viewportChanged(model, (_b = model.messagesInViewport) !== null && _b !== void 0 ? _b : []);
+        return () => {
+            var _a;
+            (_a = model.viewportChanged) === null || _a === void 0 ? void 0 : _a.disconnect(viewportChanged);
+        };
+    }, [model]);
+    return (React.createElement(React.Fragment, null,
+        unreadBefore !== null && (React.createElement(Button, { className: `${NAVIGATION_BUTTON_CLASS} ${NAVIGATION_UNREAD_CLASS} ${NAVIGATION_TOP_CLASS}`, onClick: () => gotoMessage(unreadBefore), title: 'Go to unread messages' },
+            React.createElement(LabIcon.resolveReact, { display: 'flex', icon: caretDownEmptyIcon, iconClass: classes('jp-Icon') }))),
+        (unreadAfter !== null || !lastInViewport) && (React.createElement(Button, { className: `${NAVIGATION_BUTTON_CLASS} ${unreadAfter !== null ? NAVIGATION_UNREAD_CLASS : ''} ${NAVIGATION_BOTTOM_CLASS}`, onClick: () => gotoMessage(unreadAfter !== null ? unreadAfter : model.messages.length - 1), title: unreadAfter !== null
+                ? 'Go to unread messages'
+                : 'Go to last message' },
+            React.createElement(LabIcon.resolveReact, { display: 'flex', icon: caretDownEmptyIcon, iconClass: classes('jp-Icon') })))));
 }

package/lib/components/chat.d.ts

@@ -2,15 +2,17 @@
 import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IChatModel } from '../model';
+import { IAutocompletionRegistry } from '../registry';
+export declare function ChatBody(props: Chat.IChatBodyProps): JSX.Element;
 export declare function Chat(props: Chat.IOptions): JSX.Element;
 /**
  * The chat UI namespace
  */
 export declare namespace Chat {
     /**
-     * The options to build the Chat UI.
+     * The props for the chat body component.
      */
-    interface IOptions {
+    interface IChatBodyProps {
         /**
          * The chat model.
          */
@@ -19,6 +21,19 @@ export declare namespace Chat {
          * The rendermime registry.
          */
         rmRegistry: IRenderMimeRegistry;
+        /**
+         * Autocompletion registry.
+         */
+        autocompletionRegistry?: IAutocompletionRegistry;
+        /**
+         * Autocompletion name.
+         */
+        autocompletionName?: string;
+    }
+    /**
+     * The options to build the Chat UI.
+     */
+    interface IOptions extends IChatBodyProps {
         /**
          * The theme manager.
          */
@@ -26,7 +41,7 @@ export declare namespace Chat {
         /**
          * The view to render.
          */
-        chatView?: ChatView;
+        chatView?: View;
         /**
          * A settings panel that can be used for dedicated settings (e.g. jupyter-ai)
          */
@@ -36,8 +51,8 @@ export declare namespace Chat {
      * The view to render.
      * The settings view is available only if the settings panel is provided in options.
      */
-    enum ChatView {
-        Chat = 0,
-        Settings = 1
+    enum View {
+        chat = 0,
+        settings = 1
     }
 }

package/lib/components/chat.js

@@ -6,41 +6,12 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton } from '@mui/material';
 import { Box } from '@mui/system';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
-import { ScrollContainer } from './scroll-container';
-function ChatBody({ model, rmRegistry: renderMimeRegistry }) {
-    var _a;
-    const [messages, setMessages] = useState([]);
-    /**
-     * Effect: fetch history and config on initial render
-     */
-    useEffect(() => {
-        async function fetchHistory() {
-            if (!model.getHistory) {
-                return;
-            }
-            model
-                .getHistory()
-                .then(history => setMessages(history.messages))
-                .catch(e => console.error(e));
-        }
-        fetchHistory();
-    }, [model]);
-    /**
-     * Effect: listen to chat messages
-     */
-    useEffect(() => {
-        function handleChatEvents(_) {
-            setMessages([...model.messages]);
-        }
-        model.messagesUpdated.connect(handleChatEvents);
-        return function cleanup() {
-            model.messagesUpdated.disconnect(handleChatEvents);
-        };
-    }, [model]);
+export function ChatBody(props) {
+    const { model, rmRegistry: renderMimeRegistry, autocompletionRegistry } = props;
     // no need to append to messageGroups imperatively here. all of that is
     // handled by the listeners registered in the effect hooks above.
     const onSend = async (input) => {
@@ -48,19 +19,18 @@ function ChatBody({ model, rmRegistry: renderMimeRegistry }) {
         model.addMessage({ body: input });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(ScrollContainer, { sx: { flexGrow: 1 } },
-            React.createElement(ChatMessages, { messages: messages, rmRegistry: renderMimeRegistry, model: model })),
+        React.createElement(ChatMessages, { rmRegistry: renderMimeRegistry, model: model }),
         React.createElement(ChatInput, { onSend: onSend, sx: {
                 paddingLeft: 4,
                 paddingRight: 4,
                 paddingTop: 3.5,
                 paddingBottom: 0,
                 borderTop: '1px solid var(--jp-border-color1)'
-            }, sendWithShiftEnter: (_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false })));
+            }, model: model, autocompletionRegistry: autocompletionRegistry })));
 }
 export function Chat(props) {
     var _a;
-    const [view, setView] = useState(props.chatView || Chat.ChatView.Chat);
+    const [view, setView] = useState(props.chatView || Chat.View.chat);
     return (React.createElement(JlThemeProvider, { themeManager: (_a = props.themeManager) !== null && _a !== void 0 ? _a : null },
         React.createElement(Box
         // root box should not include padding as it offsets the vertical
@@ -77,12 +47,12 @@ export function Chat(props) {
                 flexDirection: 'column'
             } },
             React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
-                view !== Chat.ChatView.Chat ? (React.createElement(IconButton, { onClick: () => setView(Chat.ChatView.Chat) },
+                view !== Chat.View.chat ? (React.createElement(IconButton, { onClick: () => setView(Chat.View.chat) },
                     React.createElement(ArrowBackIcon, null))) : (React.createElement(Box, null)),
-                view === Chat.ChatView.Chat && props.settingsPanel ? (React.createElement(IconButton, { onClick: () => setView(Chat.ChatView.Settings) },
+                view !== Chat.View.settings && props.settingsPanel ? (React.createElement(IconButton, { onClick: () => setView(Chat.View.settings) },
                     React.createElement(SettingsIcon, null))) : (React.createElement(Box, null))),
-            view === Chat.ChatView.Chat && (React.createElement(ChatBody, { model: props.model, rmRegistry: props.rmRegistry })),
-            view === Chat.ChatView.Settings && props.settingsPanel && (React.createElement(props.settingsPanel, null)))));
+            view === Chat.View.chat && (React.createElement(ChatBody, { model: props.model, rmRegistry: props.rmRegistry, autocompletionRegistry: props.autocompletionRegistry })),
+            view === Chat.View.settings && props.settingsPanel && (React.createElement(props.settingsPanel, null)))));
 }
 /**
  * The chat UI namespace
@@ -92,9 +62,9 @@ export function Chat(props) {
      * The view to render.
      * The settings view is available only if the settings panel is provided in options.
      */
-    let ChatView;
-    (function (ChatView) {
-        ChatView[ChatView["Chat"] = 0] = "Chat";
-        ChatView[ChatView["Settings"] = 1] = "Settings";
-    })(ChatView = Chat.ChatView || (Chat.ChatView = {}));
+    let View;
+    (function (View) {
+        View[View["chat"] = 0] = "chat";
+        View[View["settings"] = 1] = "settings";
+    })(View = Chat.View || (Chat.View = {}));
 })(Chat || (Chat = {}));

package/lib/components/code-blocks/code-toolbar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IChatModel } from '../../model';
+export type CodeToolbarProps = {
+    /**
+     * The chat model.
+     */
+    model: IChatModel;
+    /**
+     * The content of the Markdown code block this component is attached to.
+     */
+    content: string;
+};
+export declare function CodeToolbar(props: CodeToolbarProps): JSX.Element;

package/lib/components/code-blocks/code-toolbar.js

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { addAboveIcon, addBelowIcon } from '@jupyterlab/ui-components';
+import { Box } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { CopyButton } from './copy-button';
+import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
+import { replaceCellIcon } from '../../icons';
+const CODE_TOOLBAR_CLASS = 'jp-chat-code-toolbar';
+const CODE_TOOLBAR_ITEM_CLASS = 'jp-chat-code-toolbar-item';
+export function CodeToolbar(props) {
+    var _a, _b;
+    const { content, model } = props;
+    const [toolbarEnable, setToolbarEnable] = useState((_a = model.config.enableCodeToolbar) !== null && _a !== void 0 ? _a : true);
+    const activeCellManager = model.activeCellManager;
+    const [toolbarBtnProps, setToolbarBtnProps] = useState({
+        content: content,
+        activeCellManager: activeCellManager,
+        activeCellAvailable: (_b = activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available) !== null && _b !== void 0 ? _b : false
+    });
+    useEffect(() => {
+        activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.availabilityChanged.connect(() => {
+            setToolbarBtnProps({
+                content,
+                activeCellManager: activeCellManager,
+                activeCellAvailable: activeCellManager.available
+            });
+        });
+        model.configChanged.connect((_, config) => {
+            var _a;
+            setToolbarEnable((_a = config.enableCodeToolbar) !== null && _a !== void 0 ? _a : true);
+        });
+    }, [model]);
+    return activeCellManager === null || !toolbarEnable ? (React.createElement(React.Fragment, null)) : (React.createElement(Box, { sx: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            padding: '6px 2px',
+            marginBottom: '1em',
+            border: '1px solid var(--jp-cell-editor-border-color)',
+            borderTop: 'none'
+        }, className: CODE_TOOLBAR_CLASS },
+        React.createElement(InsertAboveButton, { ...toolbarBtnProps, className: CODE_TOOLBAR_ITEM_CLASS }),
+        React.createElement(InsertBelowButton, { ...toolbarBtnProps, className: CODE_TOOLBAR_ITEM_CLASS }),
+        React.createElement(ReplaceButton, { ...toolbarBtnProps, className: CODE_TOOLBAR_ITEM_CLASS }),
+        React.createElement(CopyButton, { value: content, className: CODE_TOOLBAR_ITEM_CLASS })));
+}
+function InsertAboveButton(props) {
+    const tooltip = props.activeCellAvailable
+        ? 'Insert above active cell'
+        : 'Insert above active cell (no active cell)';
+    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.insertAbove(props.content); }, disabled: !props.activeCellAvailable },
+        React.createElement(addAboveIcon.react, { height: "16px", width: "16px" })));
+}
+function InsertBelowButton(props) {
+    const tooltip = props.activeCellAvailable
+        ? 'Insert below active cell'
+        : 'Insert below active cell (no active cell)';
+    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, disabled: !props.activeCellAvailable, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.insertBelow(props.content); } },
+        React.createElement(addBelowIcon.react, { height: "16px", width: "16px" })));
+}
+function ReplaceButton(props) {
+    const tooltip = props.activeCellAvailable
+        ? 'Replace active cell'
+        : 'Replace active cell (no active cell)';
+    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, disabled: !props.activeCellAvailable, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.replace(props.content); } },
+        React.createElement(replaceCellIcon.react, { height: "16px", width: "16px" })));
+}

package/lib/components/{copy-button.d.ts → code-blocks/copy-button.d.ts}

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 type CopyButtonProps = {
     value: string;
+    className?: string;
 };
 export declare function CopyButton(props: CopyButtonProps): JSX.Element;
 export {};