@jupyter/chat 0.19.0-alpha.3 → 0.19.0

package/lib/__tests__/model.spec.js

@@ -52,7 +52,7 @@ describe('test chat model', () => {
             });
             model.messageAdded(msg);
             expect(messages).toHaveLength(1);
-            expect(messages[0]).toBe(msg);
+            expect(messages[0].content).toBe(msg);
         });
         it('should format message', () => {
             model = new TestChat();
@@ -62,7 +62,7 @@ describe('test chat model', () => {
             });
             model.messageAdded({ ...msg });
             expect(messages).toHaveLength(1);
-            expect(messages[0]).not.toBe(msg);
+            expect(messages[0].content).not.toBe(msg);
             expect(messages[0].body).toBe('formatted msg');
         });
     });

package/lib/components/chat.js

@@ -6,17 +6,40 @@ 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 } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ChatInput, InputToolbarRegistry } from './input';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './messages';
+import { WritingIndicator } from './writing-indicator';
 import { ChatReactContext } from '../context';
 export function ChatBody(props) {
     const { model } = props;
+    const [writers, setWriters] = useState([]);
     let { inputToolbarRegistry } = props;
     if (!inputToolbarRegistry) {
         inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
     }
+    /**
+     * Handle the changes in the writers list.
+     */
+    useEffect(() => {
+        var _a;
+        if (!model) {
+            return;
+        }
+        const updateWriters = (_, writers) => {
+            // Show all writers for now - AI generating responses will have messageID
+            setWriters(writers);
+        };
+        // Set initial writers state
+        const initialWriters = model.writers;
+        setWriters(initialWriters);
+        (_a = model.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(updateWriters);
+        return () => {
+            var _a;
+            (_a = model === null || model === void 0 ? void 0 : model.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(updateWriters);
+        };
+    }, [model]);
     // const horizontalPadding = props.area === 'main' ? 8 : 4;
     const horizontalPadding = 4;
     const contextValue = {
@@ -30,7 +53,11 @@ export function ChatBody(props) {
                 paddingRight: horizontalPadding,
                 paddingTop: 0,
                 paddingBottom: 0
-            }, model: model.input })));
+            }, model: model.input }),
+        React.createElement(WritingIndicator, { sx: {
+                paddingLeft: horizontalPadding,
+                paddingRight: horizontalPadding
+            }, writers: writers })));
 }
 export function Chat(props) {
     var _a;

package/lib/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './jl-theme-provider';
 export * from './messages';
 export * from './mui-extras';
 export * from './scroll-container';
+export * from './writing-indicator';

package/lib/components/index.js

@@ -10,3 +10,4 @@ export * from './jl-theme-provider';
 export * from './messages';
 export * from './mui-extras';
 export * from './scroll-container';
+export * from './writing-indicator';

package/lib/components/input/chat-input.js

@@ -8,7 +8,6 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useChatCommands } from './use-chat-commands';
 import { AttachmentPreviewList } from '../attachments';
 import { useChatContext } from '../../context';
-import { InputWritingIndicator } from './writing-indicator';
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const INPUT_TEXTFIELD_CLASS = 'jp-chat-input-textfield';
 const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
@@ -23,7 +22,6 @@ export function ChatInput(props) {
     const [sendWithShiftEnter, setSendWithShiftEnter] = useState((_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
     const [attachments, setAttachments] = useState(model.attachments);
     const [toolbarElements, setToolbarElements] = useState([]);
-    const [writers, setWriters] = useState([]);
     /**
      * Auto-focus the input when the component is first mounted.
      */
@@ -79,27 +77,6 @@ export function ChatInput(props) {
             inputToolbarRegistry === null || inputToolbarRegistry === void 0 ? void 0 : inputToolbarRegistry.itemsChanged.disconnect(updateToolbar);
         };
     }, [inputToolbarRegistry]);
-    /**
-     * Handle the changes in the writers list.
-     */
-    useEffect(() => {
-        var _a;
-        if (!chatModel) {
-            return;
-        }
-        const updateWriters = (_, writers) => {
-            // Show all writers for now - AI generating responses will have messageID
-            setWriters(writers);
-        };
-        // Set initial writers state
-        const initialWriters = chatModel.writers;
-        setWriters(initialWriters);
-        (_a = chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(updateWriters);
-        return () => {
-            var _a;
-            (_a = chatModel === null || chatModel === void 0 ? void 0 : chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(updateWriters);
-        };
-    }, [chatModel]);
     const inputExists = !!input.trim();
     /**
      * `handleKeyDown()`: callback invoked when the user presses any key in the
@@ -232,6 +209,5 @@ export function ChatInput(props) {
                     borderColor: 'var(--jp-border-color1)',
                     backgroundColor: 'var(--jp-layout-color0)',
                     transition: 'background-color 0.2s ease'
-                } }, toolbarElements.map((item, index) => (React.createElement(item.element, { key: index, model: model, chatCommandRegistry: chatCommandRegistry, chatModel: chatModel, edit: props.edit }))))),
-        React.createElement(InputWritingIndicator, { writers: writers })));
+                } }, toolbarElements.map((item, index) => (React.createElement(item.element, { key: index, model: model, chatCommandRegistry: chatCommandRegistry, chatModel: chatModel, edit: props.edit })))))));
 }

package/lib/components/input/index.d.ts

@@ -2,4 +2,3 @@ export * from './buttons';
 export * from './chat-input';
 export * from './toolbar-registry';
 export * from './use-chat-commands';
-export * from './writing-indicator';

package/lib/components/input/index.js

@@ -6,4 +6,3 @@ export * from './buttons';
 export * from './chat-input';
 export * from './toolbar-registry';
 export * from './use-chat-commands';
-export * from './writing-indicator';

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IChatMessage } from '../../types';
+import { IMessageContent } from '../../types';
 /**
  * The chat footer component properties.
  */
@@ -7,7 +7,7 @@ export interface IMessageFootersProps {
     /**
      * The chat model.
      */
-    message: IChatMessage;
+    message: IMessageContent;
 }
 /**
  * The chat footer component, which displays footer components on a row according to

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IChatMessage } from '../../types';
+import { IMessage } from '../../types';
 /**
  * The message header props.
  */
@@ -7,7 +7,7 @@ type ChatMessageHeaderProps = {
     /**
      * The chat message.
      */
-    message: IChatMessage;
+    message: IMessage;
     /**
      * Whether this message is from the current user.
      */

package/lib/components/messages/header.js

@@ -12,11 +12,7 @@ const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
  */
 export function ChatMessageHeader(props) {
     var _a, _b;
-    const message = props.message;
-    // Don't render header for stacked messages not deleted or edited.
-    if (message.stacked && !message.deleted && !message.edited) {
-        return React.createElement(React.Fragment, null);
-    }
+    const [message, setMessage] = useState(props.message.content);
     // Flag to display only the deleted or edited information (stacked message).
     const onlyState = message.stacked && (message.deleted || message.edited);
     const [datetime, setDatetime] = useState({});
@@ -55,9 +51,20 @@ export function ChatMessageHeader(props) {
             setDatetime(newDatetime);
         }
     });
+    // Listen for changes in the current message.
+    useEffect(() => {
+        function messageChanged() {
+            setMessage(props.message.content);
+        }
+        props.message.changed.connect(messageChanged);
+        return () => {
+            props.message.changed.disconnect(messageChanged);
+        };
+    }, [props.message]);
     const avatar = message.stacked ? null : Avatar({ user: sender });
     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: {
+    // Don't render header for stacked messages not deleted or edited.
+    return message.stacked && !message.deleted && !message.edited ? (React.createElement(React.Fragment, null)) : (React.createElement(Box, { className: MESSAGE_HEADER_CLASS, sx: {
             display: 'flex',
             alignItems: 'center',
             '& > :not(:last-child)': {

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

@@ -1,6 +1,6 @@
 import { PromiseDelegate } from '@lumino/coreutils';
 import React from 'react';
-import { IChatMessage } from '../../types';
+import { IMessage } from '../../types';
 /**
  * The message component props.
  */
@@ -8,7 +8,7 @@ type ChatMessageProps = {
     /**
      * The message to display.
      */
-    message: IChatMessage;
+    message: IMessage;
     /**
      * The index of the message in the list.
      */

package/lib/components/messages/message.js

@@ -13,8 +13,8 @@ import { replaceSpanToMention } from '../../utils';
  * The message component body.
  */
 export const ChatMessage = forwardRef((props, ref) => {
-    const { message } = props;
     const { model } = useChatContext();
+    const [message, setMessage] = useState(props.message.content);
     const [edit, setEdit] = useState(false);
     const [deleted, setDeleted] = useState(false);
     const [canEdit, setCanEdit] = useState(false);
@@ -39,6 +39,21 @@ export const ChatMessage = forwardRef((props, ref) => {
             setCanDelete(false);
         }
     }, [model, message]);
+    // Listen for changes in the current message.
+    useEffect(() => {
+        function messageChanged() {
+            setMessage(props.message.content);
+        }
+        props.message.changed.connect(messageChanged);
+        // Initialize the message when the message is re-rendered.
+        // FIX ? This seems to be required for outofband change, to get the new value,
+        // even if when an outofband change occurs, all the messages are deleted and
+        // recreated.
+        setMessage(props.message.content);
+        return () => {
+            props.message.changed.disconnect(messageChanged);
+        };
+    }, [props.message]);
     // Create an input model only if the message is edited.
     const startEdition = () => {
         var _a;

package/lib/components/messages/messages.js

@@ -13,6 +13,7 @@ import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
 import { ScrollContainer } from '../scroll-container';
 import { useChatContext } from '../../context';
+import { Message } from '../../message';
 export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
@@ -39,7 +40,7 @@ export function ChatMessages() {
             }
             model
                 .getHistory()
-                .then(history => setMessages(history.messages))
+                .then(history => setMessages(history.messages.map(message => new Message({ ...message }))))
                 .catch(e => console.error(e));
         }
         fetchHistory();
@@ -150,7 +151,7 @@ export function ChatMessages() {
                     model.user.username === message.sender.username;
                 return (
                 // extra div needed to ensure each bubble is on a new line
-                React.createElement(Box, { key: i, sx: {
+                React.createElement(Box, { key: message.id, sx: {
                         ...(isCurrentUser && {
                             marginLeft: area === 'main' ? '25%' : '10%',
                             backgroundColor: 'var(--jp-layout-color2)',

package/lib/components/messages/toolbar.js

@@ -2,8 +2,8 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-// import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
 import { Box } from '@mui/material';
 import React from 'react';
 import { TooltippedIconButton } from '../mui-extras';
@@ -13,19 +13,11 @@ const TOOLBAR_CLASS = 'jp-chat-toolbar';
  */
 export function MessageToolbar(props) {
     const buttons = [];
-    // if (props.edit !== undefined) {
-    //   const editButton = (
-    //     <TooltippedIconButton
-    //       tooltip={'edit'}
-    //       onClick={props.edit}
-    //       aria-label={'Edit'}
-    //       inputToolbar={false}
-    //     >
-    //       <EditIcon />
-    //     </TooltippedIconButton>
-    //   );
-    //   buttons.push(editButton);
-    // }
+    if (props.edit !== undefined) {
+        const editButton = (React.createElement(TooltippedIconButton, { tooltip: 'edit', onClick: props.edit, "aria-label": 'Edit', inputToolbar: false },
+            React.createElement(EditIcon, null)));
+        buttons.push(editButton);
+    }
     if (props.delete !== undefined) {
         const deleteButton = (React.createElement(TooltippedIconButton, { tooltip: 'Delete', onClick: props.delete, "aria-label": 'Delete', inputToolbar: false },
             React.createElement(DeleteIcon, null)));

package/lib/components/writing-indicator.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material';
+import { IChatModel } from '../model';
+/**
+ * The input writing indicator component props.
+ */
+export interface IInputWritingIndicatorProps {
+    /**
+     * The list of users currently writing.
+     */
+    writers: IChatModel.IWriter[];
+    /**
+     * Custom mui/material styles.
+     */
+    sx?: SxProps<Theme>;
+}
+/**
+ * The writing indicator component, displaying typing status.
+ */
+export declare function WritingIndicator(props: IInputWritingIndicatorProps): JSX.Element;

package/lib/components/{input/writing-indicator.js → writing-indicator.js}

@@ -30,13 +30,14 @@ function formatWritersText(writers) {
     }
 }
 /**
- * The input writing indicator component, displaying typing status in the chat input area.
+ * The writing indicator component, displaying typing status.
  */
-export function InputWritingIndicator(props) {
+export function WritingIndicator(props) {
     const { writers } = props;
     // Always render the container to reserve space, even if no writers
     const writersText = writers.length > 0 ? formatWritersText(writers) : '';
     return (React.createElement(Box, { className: WRITERS_ELEMENT_CLASSNAME, sx: {
+            ...props.sx,
             minHeight: '16px'
         } },
         React.createElement(Typography, { variant: "caption", sx: {

package/lib/message.d.ts

@@ -0,0 +1,41 @@
+import { ISignal } from '@lumino/signaling';
+import { IAttachment, IMessageContent, IMessage, IUser } from './types';
+/**
+ * The message object.
+ */
+export declare class Message implements IMessage {
+    /**
+     * The constructor of the message.
+     *
+     * @param content: the content of the message.
+     */
+    constructor(content: IMessageContent);
+    /**
+     * The message content.
+     */
+    get content(): IMessageContent;
+    /**
+     * Getters for each attribute individually.
+     */
+    get type(): string;
+    get body(): string;
+    get id(): string;
+    get time(): number;
+    get sender(): IUser;
+    get attachments(): IAttachment[] | undefined;
+    get mentions(): IUser[] | undefined;
+    get raw_time(): boolean | undefined;
+    get deleted(): boolean | undefined;
+    get edited(): boolean | undefined;
+    get stacked(): boolean | undefined;
+    /**
+     * A signal emitting when the message has been updated.
+     */
+    get changed(): ISignal<IMessage, void>;
+    /**
+     * Update one or several fields of the message.
+     */
+    update(updated: Partial<IMessageContent>): void;
+    private _content;
+    private _changed;
+}

package/lib/message.js

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Signal } from '@lumino/signaling';
+/**
+ * The message object.
+ */
+export class Message {
+    /**
+     * The constructor of the message.
+     *
+     * @param content: the content of the message.
+     */
+    constructor(content) {
+        this._changed = new Signal(this);
+        this._content = content;
+    }
+    /**
+     * The message content.
+     */
+    get content() {
+        return this._content;
+    }
+    /**
+     * Getters for each attribute individually.
+     */
+    get type() {
+        return this._content.type;
+    }
+    get body() {
+        return this._content.body;
+    }
+    get id() {
+        return this._content.id;
+    }
+    get time() {
+        return this._content.time;
+    }
+    get sender() {
+        return this._content.sender;
+    }
+    get attachments() {
+        return this._content.attachments;
+    }
+    get mentions() {
+        return this._content.mentions;
+    }
+    get raw_time() {
+        return this._content.raw_time;
+    }
+    get deleted() {
+        return this._content.deleted;
+    }
+    get edited() {
+        return this._content.edited;
+    }
+    get stacked() {
+        return this._content.stacked;
+    }
+    /**
+     * A signal emitting when the message has been updated.
+     */
+    get changed() {
+        return this._changed;
+    }
+    /**
+     * Update one or several fields of the message.
+     */
+    update(updated) {
+        this._content = { ...this._content, ...updated };
+        this._changed.emit();
+    }
+}

package/lib/model.d.ts

@@ -5,7 +5,7 @@ import { ISignal } from '@lumino/signaling';
 import { IActiveCellManager } from './active-cell-manager';
 import { IInputModel } from './input-model';
 import { ISelectionWatcher } from './selection-watcher';
-import { IChatHistory, INewMessage, IChatMessage, IConfig, IUser } from './types';
+import { IChatHistory, IConfig, IMessage, IMessageContent, INewMessage, IUser } from './types';
 /**
  * The chat model interface.
  */
@@ -37,7 +37,7 @@ export interface IChatModel extends IDisposable {
     /**
      * The chat messages list.
      */
-    readonly messages: IChatMessage[];
+    readonly messages: IMessage[];
     /**
      * The input model.
      */
@@ -100,7 +100,7 @@ export interface IChatModel extends IDisposable {
      * @param id - the unique ID of the message.
      * @param message - the updated message.
      */
-    updateMessage?(id: string, message: IChatMessage): Promise<boolean | void> | boolean | void;
+    updateMessage?(id: string, message: IMessageContent): Promise<boolean | void> | boolean | void;
     /**
      * Optional, to delete a message from the chat.
      *
@@ -124,14 +124,14 @@ export interface IChatModel extends IDisposable {
      *
      * @param message - the message with user information and body.
      */
-    messageAdded(message: IChatMessage): void;
+    messageAdded(message: IMessageContent): void;
     /**
      * Function called when messages are inserted.
      *
      * @param index - the index of the first message of the list.
      * @param messages - the messages list.
      */
-    messagesInserted(index: number, messages: IChatMessage[]): void;
+    messagesInserted(index: number, messages: IMessageContent[]): void;
     /**
      * Function called when messages are deleted.
      *
@@ -185,7 +185,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
     /**
      * The chat messages list.
      */
-    get messages(): IChatMessage[];
+    get messages(): IMessage[];
     /**
      * The input model.
      */
@@ -235,7 +235,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
     get messagesInViewport(): number[];
     set messagesInViewport(values: number[]);
     /**
-     * A signal emitting when the messages list is updated.
+     * A signal emitting when the message list is updated.
      */
     get messagesUpdated(): ISignal<IChatModel, void>;
     /**
@@ -282,20 +282,20 @@ export declare abstract class AbstractChatModel implements IChatModel {
      * A function called before transferring the message to the panel(s).
      * Can be useful if some actions are required on the message.
      */
-    protected formatChatMessage(message: IChatMessage): IChatMessage;
+    protected formatChatMessage(message: IMessageContent): IMessageContent;
     /**
      * Function to call when a message is received.
      *
      * @param message - the message with user information and body.
      */
-    messageAdded(message: IChatMessage): void;
+    messageAdded(message: IMessageContent): void;
     /**
      * Function called when messages are inserted.
      *
      * @param index - the index of the first message of the list.
      * @param messages - the messages list.
      */
-    messagesInserted(index: number, messages: IChatMessage[]): void;
+    messagesInserted(index: number, messages: IMessageContent[]): void;
     /**
      * Function called when messages are deleted.
      *
@@ -435,9 +435,9 @@ export interface IChatContext {
      */
     readonly name: string;
     /**
-     * A copy of the messages.
+     * A copy of the messages content.
      */
-    readonly messages: IChatMessage[];
+    readonly messages: IMessageContent[];
     /**
      * A list of all users who have connected to this chat.
      */
@@ -456,7 +456,7 @@ export declare abstract class AbstractChatContext implements IChatContext {
         model: IChatModel;
     });
     get name(): string;
-    get messages(): IChatMessage[];
+    get messages(): IMessageContent[];
     get user(): IUser | undefined;
     /**
      * ABSTRACT: Should return a list of users who have connected to this chat.

package/lib/model.js

@@ -3,10 +3,11 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { ArrayExt } from '@lumino/algorithm';
+import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import { InputModel } from './input-model';
+import { Message } from './message';
 import { replaceMentionToSpan } from './utils';
-import { PromiseDelegate } from '@lumino/coreutils';
 /**
  * An abstract implementation of IChatModel.
  *
@@ -170,12 +171,12 @@ export class AbstractChatModel {
             if (this._config.stackMessages) {
                 this._messages.slice(1).forEach((message, idx) => {
                     const previousUser = this._messages[idx].sender.username;
-                    message.stacked = previousUser === message.sender.username;
+                    message.update({ stacked: previousUser === message.sender.username });
                 });
             }
             else {
                 this._messages.forEach(message => {
-                    delete message.stacked;
+                    message.update({ stacked: undefined });
                 });
             }
             this._messagesUpdated.emit();
@@ -225,7 +226,7 @@ export class AbstractChatModel {
         this._viewportChanged.emit(values);
     }
     /**
-     * A signal emitting when the messages list is updated.
+     * A signal emitting when the message list is updated.
      */
     get messagesUpdated() {
         return this._messagesUpdated;
@@ -328,7 +329,8 @@ export class AbstractChatModel {
         const lastRead = (_a = this.lastRead) !== null && _a !== void 0 ? _a : 0;
         // Format the messages.
         messages.forEach((message, idx) => {
-            formattedMessages.push(this.formatChatMessage(message));
+            const formattedMessage = this.formatChatMessage(message);
+            formattedMessages.push(new Message(formattedMessage));
             if (message.time > lastRead) {
                 unreadIndexes.push(index + idx);
             }
@@ -344,7 +346,7 @@ export class AbstractChatModel {
             for (let idx = start; idx <= end; idx++) {
                 const message = this._messages[idx];
                 const previousUser = this._messages[idx - 1].sender.username;
-                message.stacked = previousUser === message.sender.username;
+                message.update({ stacked: previousUser === message.sender.username });
             }
         }
         this._addUnreadMessages(unreadIndexes);
@@ -461,7 +463,7 @@ export class AbstractChatContext {
         return this._model.name;
     }
     get messages() {
-        return [...this._model.messages];
+        return this._model.messages.map(message => ({ ...message.content }));
     }
     get user() {
         var _a;