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

package/lib/__tests__/preamble-registry.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/__tests__/preamble-registry.spec.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { MessagePreambleRegistry } from '../registers/preambles';
+describe('MessagePreambleRegistry', () => {
+    let registry;
+    beforeEach(() => {
+        registry = new MessagePreambleRegistry();
+    });
+    it('should start with no components', () => {
+        expect(registry.getComponents()).toEqual([]);
+    });
+    it('should add a component', () => {
+        const component = () => null;
+        registry.addComponent(component);
+        expect(registry.getComponents()).toHaveLength(1);
+        expect(registry.getComponents()[0]).toBe(component);
+    });
+    it('should preserve insertion order', () => {
+        const first = () => null;
+        const second = () => null;
+        registry.addComponent(first);
+        registry.addComponent(second);
+        const components = registry.getComponents();
+        expect(components).toHaveLength(2);
+        expect(components[0]).toBe(first);
+        expect(components[1]).toBe(second);
+    });
+    it('should return a copy from getComponents', () => {
+        const component = () => null;
+        registry.addComponent(component);
+        const result = registry.getComponents();
+        result.push(() => null);
+        expect(registry.getComponents()).toHaveLength(1);
+    });
+});

package/lib/components/chat.d.ts

@@ -3,7 +3,7 @@ import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IInputToolbarRegistry } from './input';
 import { IChatModel } from '../model';
-import { IAttachmentOpenerRegistry, IChatCommandRegistry, IMessageFooterRegistry } from '../registers';
+import { IAttachmentOpenerRegistry, IChatCommandRegistry, IMessageFooterRegistry, IMessagePreambleRegistry } from '../registers';
 import { ChatArea } from '../types';
 export declare function ChatBody(props: Chat.IChatProps): JSX.Element;
 export declare function Chat(props: Chat.IOptions): JSX.Element;
@@ -39,6 +39,10 @@ export declare namespace Chat {
          * The footer registry.
          */
         messageFooterRegistry?: IMessageFooterRegistry;
+        /**
+         * The preamble registry for content above message body.
+         */
+        messagePreambleRegistry?: IMessagePreambleRegistry;
         /**
          * The welcome message.
          */

package/lib/components/input/buttons/send-button.js

@@ -10,7 +10,7 @@ const SEND_BUTTON_CLASS = 'jp-chat-send-button';
  * The send button.
  */
 export function SendButton(props) {
-    const { model, chatModel, chatCommandRegistry, edit } = props;
+    const { model, chatCommandRegistry, edit } = props;
     // Don't show this button when in edit mode
     if (edit) {
         return React.createElement(React.Fragment, null);
@@ -45,12 +45,9 @@ export function SendButton(props) {
     async function send() {
         // Run all command providers
         await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
-        // send message through chat model
-        await (chatModel === null || chatModel === void 0 ? void 0 : chatModel.sendMessage({
-            body: model.value
-        }));
-        // clear input model value & re-focus
+        const body = model.value;
         model.value = '';
+        model.send(body);
         model.focus();
     }
     return (React.createElement(TooltippedIconButton, { onClick: send, tooltip: tooltip, disabled: disabled, buttonProps: {

package/lib/components/messages/footer.js

@@ -17,6 +17,9 @@ export function MessageFooterComponent(props) {
         return null;
     }
     const footer = messageFooterRegistry.getFooter();
+    if (!footer.left && !footer.center && !footer.right) {
+        return null;
+    }
     return (React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
         ((_a = footer.left) === null || _a === void 0 ? void 0 : _a.component) ? (React.createElement(footer.left.component, { message: message, model: model })) : (React.createElement("div", null)),
         ((_b = footer.center) === null || _b === void 0 ? void 0 : _b.component) ? (React.createElement(footer.center.component, { message: message, model: model })) : (React.createElement("div", null)),

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

@@ -4,5 +4,6 @@ export * from './message';
 export * from './message-renderer';
 export * from './messages';
 export * from './navigation';
+export * from './preamble';
 export * from './toolbar';
 export * from './welcome';

package/lib/components/messages/index.js

@@ -8,5 +8,6 @@ export * from './message';
 export * from './message-renderer';
 export * from './messages';
 export * from './navigation';
+export * from './preamble';
 export * from './toolbar';
 export * from './welcome';

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

@@ -4,7 +4,7 @@
  */
 import { MessageLoop } from '@lumino/messaging';
 import { Widget } from '@lumino/widgets';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { MessageToolbar } from './toolbar';
 import { CodeToolbar } from '../code-blocks/code-toolbar';
@@ -18,17 +18,13 @@ const DEFAULT_MIME_TYPE = 'text/markdown';
 function MessageRendererBase(props) {
     const { message } = props;
     const { model, rmRegistry } = useChatContext();
-    const containerRef = useRef(null);
+    // The rendered content, return by the mime renderer.
+    const [renderedContent, setRenderedContent] = useState(null);
     // Allow edition only on text messages.
     const [canEdit, setCanEdit] = useState(false);
     // Each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
     const [codeToolbarDefns, setCodeToolbarDefns] = useState([]);
     useEffect(() => {
-        let node = null;
-        const container = containerRef.current;
-        if (!container) {
-            return;
-        }
         const renderContent = async () => {
             var _a, _b;
             let isMarkdownRenderer = true;
@@ -106,21 +102,15 @@ function MessageRendererBase(props) {
                 });
                 setCodeToolbarDefns(newCodeToolbarDefns);
             }
-            // Add the rendered node to the DOM.
-            node = renderer.node;
-            container.insertBefore(node, container.firstChild);
+            // Update the content.
+            setRenderedContent(renderer.node);
             // Resolve the rendered promise.
             props.rendered.resolve();
         };
         renderContent();
-        return () => {
-            if (node && container.contains(node)) {
-                container.removeChild(node);
-            }
-            node = null;
-        };
     }, [message.body, message.mentions, rmRegistry]);
-    return (React.createElement("div", { className: RENDERED_CLASS, ref: containerRef },
+    return (React.createElement(React.Fragment, null,
+        renderedContent && (React.createElement("div", { className: RENDERED_CLASS, ref: node => node && node.replaceChildren(renderedContent) })),
         React.createElement(MessageToolbar, { edit: canEdit ? props.edit : undefined, delete: props.delete }),
         // Render a `CodeToolbar` element underneath each code block.
         // We use ReactDOM.createPortal() so each `CodeToolbar` element is able

package/lib/components/messages/message.js

@@ -9,6 +9,7 @@ import { ChatInput } from '../input';
 import { useChatContext } from '../../context';
 import { InputModel } from '../../input-model';
 import { replaceSpanToMention } from '../../utils';
+const MESSAGE_CONTAINER_CLASS = 'jp-chat-message-container';
 /**
  * The message component body.
  */
@@ -56,7 +57,7 @@ export const ChatMessage = forwardRef((props, ref) => {
     }, [props.message]);
     // Create an input model only if the message is edited.
     const startEdition = () => {
-        var _a;
+        var _a, _b;
         if (!canEdit || !(typeof message.body === 'string')) {
             return;
         }
@@ -75,7 +76,7 @@ export const ChatMessage = forwardRef((props, ref) => {
             config: {
                 sendWithShiftEnter: model.config.sendWithShiftEnter
             },
-            attachments: message.attachments,
+            attachments: structuredClone((_b = message.attachments) !== null && _b !== void 0 ? _b : []),
             mentions: message.mentions
         });
         model.addEditionModel(message.id, inputModel);
@@ -110,7 +111,7 @@ export const ChatMessage = forwardRef((props, ref) => {
         model.deleteMessage(id);
     };
     // 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 },
+    return deleted ? (React.createElement("div", { ref: ref, "data-index": props.index })) : (React.createElement("div", { ref: ref, "data-index": props.index, className: MESSAGE_CONTAINER_CLASS },
         edit && canEdit && model.getEditionModel(message.id) ? (React.createElement(ChatInput, { onCancel: () => cancelEdition(), model: model.getEditionModel(message.id), edit: true })) : (React.createElement(MessageRenderer, { message: message, 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

package/lib/components/messages/messages.js

@@ -9,6 +9,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { MessageFooterComponent } from './footer';
 import { ChatMessageHeader } from './header';
 import { ChatMessage } from './message';
+import { MessagePreambleComponent } from './preamble';
 import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
 import { ScrollContainer } from '../scroll-container';
@@ -22,7 +23,7 @@ const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
  */
 export function ChatMessages() {
     var _a;
-    const { area, messageFooterRegistry, model, welcomeMessage } = useChatContext();
+    const { area, messageFooterRegistry, messagePreambleRegistry, model, welcomeMessage } = useChatContext();
     const [messages, setMessages] = useState(model.messages);
     const refMsgBox = useRef(null);
     const [allRendered, setAllRendered] = useState(false);
@@ -161,6 +162,7 @@ export function ChatMessages() {
                         })
                     }, className: clsx(MESSAGE_CLASS, message.stacked ? MESSAGE_STACKED_CLASS : '') },
                     React.createElement(ChatMessageHeader, { message: message, isCurrentUser: isCurrentUser }),
+                    messagePreambleRegistry && (React.createElement(MessagePreambleComponent, { message: message })),
                     React.createElement(ChatMessage, { message: message, index: i, renderedPromise: renderedPromise.current[i], ref: el => (listRef.current[i] = el) }),
                     messageFooterRegistry && (React.createElement(MessageFooterComponent, { message: message }))));
             }))),

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IMessage } from '../../types';
+/**
+ * The preamble component properties.
+ */
+export interface IMessagePreambleProps {
+    message: IMessage;
+}
+/**
+ * Renders all registered preamble components vertically above the message body.
+ */
+export declare function MessagePreambleComponent(props: IMessagePreambleProps): JSX.Element | null;

package/lib/components/messages/preamble.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { useEffect, useState } from 'react';
+import { useChatContext } from '../../context';
+/**
+ * Renders all registered preamble components vertically above the message body.
+ */
+export function MessagePreambleComponent(props) {
+    const [message, setMessage] = useState(props.message.content);
+    useEffect(() => {
+        function messageChanged() {
+            setMessage(props.message.content);
+        }
+        props.message.changed.connect(messageChanged);
+        setMessage(props.message.content);
+        return () => {
+            props.message.changed.disconnect(messageChanged);
+        };
+    }, [props.message]);
+    const { model, messagePreambleRegistry } = useChatContext();
+    if (!messagePreambleRegistry) {
+        return null;
+    }
+    const components = messagePreambleRegistry.getComponents();
+    if (!components.length) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, components.map((Component, i) => (React.createElement(Component, { key: i, model: model, message: message })))));
+}

package/lib/message.d.ts

@@ -1,6 +1,6 @@
 import { IRenderMime } from '@jupyterlab/rendermime';
 import { ISignal } from '@lumino/signaling';
-import { IAttachment, IMessageContent, IMessage, IUser } from './types';
+import { IAttachment, IMessageContent, IMessage, IMessageMetadata, IUser } from './types';
 /**
  * The message object.
  */
@@ -29,6 +29,7 @@ export declare class Message implements IMessage {
     get deleted(): boolean | undefined;
     get edited(): boolean | undefined;
     get stacked(): boolean | undefined;
+    get metadata(): IMessageMetadata | undefined;
     /**
      * A signal emitting when the message has been updated.
      */

package/lib/message.js

@@ -58,6 +58,9 @@ export class Message {
     get stacked() {
         return this._content.stacked;
     }
+    get metadata() {
+        return this._content.metadata;
+    }
     /**
      * A signal emitting when the message has been updated.
      */

package/lib/model.d.ts

@@ -341,6 +341,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
     private _notify;
     private _messages;
     private _unreadMessages;
+    private _lastRead;
     private _messagesInViewport;
     private _id;
     private _name;

package/lib/model.js

@@ -21,6 +21,7 @@ export class AbstractChatModel {
         var _a, _b, _c, _d;
         this._messages = [];
         this._unreadMessages = [];
+        this._lastRead = 0;
         this._messagesInViewport = [];
         this._name = '';
         this._readyDelegate = new PromiseDelegate();
@@ -71,6 +72,12 @@ export class AbstractChatModel {
     }
     set id(value) {
         this._id = value;
+        // Update the last read message.
+        const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
+        if (typeof storage.lastRead === 'number' &&
+            storage.lastRead > this._lastRead) {
+            this._lastRead = storage.lastRead;
+        }
     }
     /**
      * The chat model name.
@@ -124,17 +131,14 @@ export class AbstractChatModel {
      * Timestamp of the last read message in local storage.
      */
     get lastRead() {
-        var _a;
-        if (this._id === undefined) {
-            return 0;
-        }
-        const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
-        return (_a = storage.lastRead) !== null && _a !== void 0 ? _a : 0;
+        return this._lastRead;
     }
     set lastRead(value) {
+        this._lastRead = value;
         if (this._id === undefined) {
             return;
         }
+        // Save the last read message to the local storage, for persistence across reload.
         const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
         storage.lastRead = value;
         localStorage.setItem(`@jupyter/chat:${this._id}`, JSON.stringify(storage));
@@ -192,17 +196,16 @@ export class AbstractChatModel {
         return this._unreadMessages;
     }
     set unreadMessages(unread) {
-        var _a;
         const recentlyRead = this._unreadMessages.filter(elem => !unread.includes(elem));
         const unreadCountDiff = unread.length - this._unreadMessages.length;
         this._unreadMessages = unread;
         this._unreadChanged.emit(this._unreadMessages);
         // Notify the change.
         this._notify(unread.length, unreadCountDiff > 0);
-        // Save the last read to the local storage.
-        if (this._id !== undefined && recentlyRead.length) {
+        // Save the last read.
+        if (recentlyRead.length) {
             let lastReadChanged = false;
-            let lastRead = (_a = this.lastRead) !== null && _a !== void 0 ? _a : this.messages[recentlyRead[0]].time;
+            let lastRead = this.lastRead;
             recentlyRead.forEach(index => {
                 if (this.messages[index].time > lastRead) {
                     lastRead = this.messages[index].time;
@@ -318,15 +321,13 @@ export class AbstractChatModel {
      * @param messages - the messages list.
      */
     messagesInserted(index, messages) {
-        var _a;
         const formattedMessages = [];
         const unreadIndexes = [];
-        const lastRead = (_a = this.lastRead) !== null && _a !== void 0 ? _a : 0;
         // Format the messages.
         messages.forEach((message, idx) => {
             const formattedMessage = this.formatChatMessage(message);
             formattedMessages.push(new Message(formattedMessage));
-            if (message.time > lastRead) {
+            if (message.time > this.lastRead) {
                 unreadIndexes.push(index + idx);
             }
         });

package/lib/registers/index.d.ts

@@ -1,3 +1,4 @@
 export * from './attachment-openers';
 export * from './chat-commands';
 export * from './footers';
+export * from './preambles';

package/lib/registers/index.js

@@ -5,3 +5,4 @@
 export * from './attachment-openers';
 export * from './chat-commands';
 export * from './footers';
+export * from './preambles';

package/lib/registers/preambles.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { Token } from '@lumino/coreutils';
+import { IChatModel } from '../model';
+import { IMessageContent } from '../types';
+/**
+ * The token providing the chat preamble registry.
+ */
+export declare const IMessagePreambleRegistry: Token<IMessagePreambleRegistry>;
+/**
+ * The props passed to each preamble component.
+ */
+export type MessagePreambleProps = {
+    model: IChatModel;
+    message: IMessageContent;
+};
+/**
+ * The interface of a registry to provide message preamble components.
+ * Preamble components render above the message body, after the header.
+ */
+export interface IMessagePreambleRegistry {
+    /**
+     * Add a preamble component to the registry.
+     * Components are rendered in the order they are added.
+     */
+    addComponent(component: (props: MessagePreambleProps) => JSX.Element | null): void;
+    /**
+     * Get all registered preamble components.
+     */
+    getComponents(): ((props: MessagePreambleProps) => JSX.Element | null)[];
+}
+/**
+ * The default implementation of the message preamble registry.
+ */
+export declare class MessagePreambleRegistry implements IMessagePreambleRegistry {
+    /**
+     * Add a preamble component to the registry.
+     */
+    addComponent(component: (props: MessagePreambleProps) => JSX.Element | null): void;
+    /**
+     * Get all registered preamble components.
+     */
+    getComponents(): ((props: MessagePreambleProps) => JSX.Element | null)[];
+    private _components;
+}

package/lib/registers/preambles.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Token } from '@lumino/coreutils';
+/**
+ * The token providing the chat preamble registry.
+ */
+export const IMessagePreambleRegistry = new Token('@jupyter/chat:ChatPreambleRegistry');
+/**
+ * The default implementation of the message preamble registry.
+ */
+export class MessagePreambleRegistry {
+    constructor() {
+        this._components = [];
+    }
+    /**
+     * Add a preamble component to the registry.
+     */
+    addComponent(component) {
+        this._components.push(component);
+    }
+    /**
+     * Get all registered preamble components.
+     */
+    getComponents() {
+        return [...this._components];
+    }
+}

package/lib/types.d.ts

@@ -53,6 +53,20 @@ export interface IConfig {
      */
     showDeleted?: boolean;
 }
+/**
+ * An empty interface to describe optional metadata attached to a chat message.
+ * Extensions can augment this interface to add custom fields:
+ *
+ * ```ts
+ * declare module '@jupyter/chat' {
+ *   interface IMessageMetadata {
+ *     myField?: MyType;
+ *   }
+ * }
+ * ```
+ */
+export interface IMessageMetadata {
+}
 /**
  * The chat message description.
  */
@@ -68,10 +82,8 @@ export type IMessageContent<T = IUser, U = IAttachment> = {
     deleted?: boolean;
     edited?: boolean;
     stacked?: boolean;
+    metadata?: IMessageMetadata;
 };
-/**
- *
- */
 export interface IMessage extends IMessageContent {
     /**
      * Update one or several fields of the message.

package/package.json

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

package/src/__tests__/preamble-registry.spec.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import {
+  MessagePreambleRegistry,
+  MessagePreambleProps
+} from '../registers/preambles';
+
+describe('MessagePreambleRegistry', () => {
+  let registry: MessagePreambleRegistry;
+
+  beforeEach(() => {
+    registry = new MessagePreambleRegistry();
+  });
+
+  it('should start with no components', () => {
+    expect(registry.getComponents()).toEqual([]);
+  });
+
+  it('should add a component', () => {
+    const component: (props: MessagePreambleProps) => JSX.Element | null = () =>
+      null;
+    registry.addComponent(component);
+    expect(registry.getComponents()).toHaveLength(1);
+    expect(registry.getComponents()[0]).toBe(component);
+  });
+
+  it('should preserve insertion order', () => {
+    const first: (props: MessagePreambleProps) => JSX.Element | null = () =>
+      null;
+    const second: (props: MessagePreambleProps) => JSX.Element | null = () =>
+      null;
+    registry.addComponent(first);
+    registry.addComponent(second);
+    const components = registry.getComponents();
+    expect(components).toHaveLength(2);
+    expect(components[0]).toBe(first);
+    expect(components[1]).toBe(second);
+  });
+
+  it('should return a copy from getComponents', () => {
+    const component: (props: MessagePreambleProps) => JSX.Element | null = () =>
+      null;
+    registry.addComponent(component);
+    const result = registry.getComponents();
+    result.push(() => null);
+    expect(registry.getComponents()).toHaveLength(1);
+  });
+});

package/src/components/chat.tsx

@@ -24,7 +24,8 @@ import { IChatModel } from '../model';
 import {
   IAttachmentOpenerRegistry,
   IChatCommandRegistry,
-  IMessageFooterRegistry
+  IMessageFooterRegistry,
+  IMessagePreambleRegistry
 } from '../registers';
 import { ChatArea } from '../types';
 
@@ -168,6 +169,10 @@ export namespace Chat {
      * The footer registry.
      */
     messageFooterRegistry?: IMessageFooterRegistry;
+    /**
+     * The preamble registry for content above message body.
+     */
+    messagePreambleRegistry?: IMessagePreambleRegistry;
     /**
      * The welcome message.
      */

package/src/components/input/buttons/send-button.tsx

@@ -18,7 +18,7 @@ const SEND_BUTTON_CLASS = 'jp-chat-send-button';
 export function SendButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
-  const { model, chatModel, chatCommandRegistry, edit } = props;
+  const { model, chatCommandRegistry, edit } = props;
 
   // Don't show this button when in edit mode
   if (edit) {
@@ -62,12 +62,10 @@ export function SendButton(
     // Run all command providers
     await chatCommandRegistry?.onSubmit(model);
 
-    // send message through chat model
-    await chatModel?.sendMessage({
-      body: model.value
-    });
-    // clear input model value & re-focus
+    const body = model.value;
+
     model.value = '';
+    model.send(body);
     model.focus();
   }
 

package/src/components/messages/footer.tsx

@@ -33,6 +33,10 @@ export function MessageFooterComponent(
   }
   const footer = messageFooterRegistry.getFooter();
 
+  if (!footer.left && !footer.center && !footer.right) {
+    return null;
+  }
+
   return (
     <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
       {footer.left?.component ? (

package/src/components/messages/index.ts

@@ -9,5 +9,6 @@ export * from './message';
 export * from './message-renderer';
 export * from './messages';
 export * from './navigation';
+export * from './preamble';
 export * from './toolbar';
 export * from './welcome';

package/src/components/messages/message-renderer.tsx

@@ -7,7 +7,7 @@ import { IRenderMime } from '@jupyterlab/rendermime';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { MessageLoop } from '@lumino/messaging';
 import { Widget } from '@lumino/widgets';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 import { MessageToolbar } from './toolbar';
@@ -48,7 +48,10 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
   const { message } = props;
   const { model, rmRegistry } = useChatContext();
 
-  const containerRef = useRef<HTMLDivElement>(null);
+  // The rendered content, return by the mime renderer.
+  const [renderedContent, setRenderedContent] = useState<HTMLElement | null>(
+    null
+  );
 
   // Allow edition only on text messages.
   const [canEdit, setCanEdit] = useState<boolean>(false);
@@ -59,12 +62,6 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
   >([]);
 
   useEffect(() => {
-    let node: HTMLElement | null = null;
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-
     const renderContent = async () => {
       let isMarkdownRenderer = true;
       let renderer: IRenderMime.IRenderer;
@@ -153,26 +150,24 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
         setCodeToolbarDefns(newCodeToolbarDefns);
       }
 
-      // Add the rendered node to the DOM.
-      node = renderer.node;
-      container.insertBefore(node, container.firstChild);
+      // Update the content.
+      setRenderedContent(renderer.node);
 
       // Resolve the rendered promise.
       props.rendered.resolve();
     };
 
     renderContent();
-
-    return () => {
-      if (node && container.contains(node)) {
-        container.removeChild(node);
-      }
-      node = null;
-    };
   }, [message.body, message.mentions, rmRegistry]);
 
   return (
-    <div className={RENDERED_CLASS} ref={containerRef}>
+    <>
+      {renderedContent && (
+        <div
+          className={RENDERED_CLASS}
+          ref={node => node && node.replaceChildren(renderedContent)}
+        />
+      )}
       <MessageToolbar
         edit={canEdit ? props.edit : undefined}
         delete={props.delete}
@@ -189,7 +184,7 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
           );
         })
       }
-    </div>
+    </>
   );
 }
 

package/src/components/messages/message.tsx

@@ -14,6 +14,8 @@ import { IInputModel, InputModel } from '../../input-model';
 import { IMessageContent, IMessage } from '../../types';
 import { replaceSpanToMention } from '../../utils';
 
+const MESSAGE_CONTAINER_CLASS = 'jp-chat-message-container';
+
 /**
  * The message component props.
  */
@@ -104,7 +106,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
         config: {
           sendWithShiftEnter: model.config.sendWithShiftEnter
         },
-        attachments: message.attachments,
+        attachments: structuredClone(message.attachments ?? []),
         mentions: message.mentions
       });
       model.addEditionModel(message.id, inputModel);
@@ -148,7 +150,11 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     return deleted ? (
       <div ref={ref} data-index={props.index}></div>
     ) : (
-      <div ref={ref} data-index={props.index}>
+      <div
+        ref={ref}
+        data-index={props.index}
+        className={MESSAGE_CONTAINER_CLASS}
+      >
         {edit && canEdit && model.getEditionModel(message.id) ? (
           <ChatInput
             onCancel={() => cancelEdition()}

package/src/components/messages/messages.tsx

@@ -11,6 +11,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { MessageFooterComponent } from './footer';
 import { ChatMessageHeader } from './header';
 import { ChatMessage } from './message';
+import { MessagePreambleComponent } from './preamble';
 import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
 import { ScrollContainer } from '../scroll-container';
@@ -27,8 +28,13 @@ const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
  * The messages list component.
  */
 export function ChatMessages(): JSX.Element {
-  const { area, messageFooterRegistry, model, welcomeMessage } =
-    useChatContext();
+  const {
+    area,
+    messageFooterRegistry,
+    messagePreambleRegistry,
+    model,
+    welcomeMessage
+  } = useChatContext();
 
   const [messages, setMessages] = useState<IMessage[]>(model.messages);
   const refMsgBox = useRef<HTMLDivElement>(null);
@@ -203,6 +209,9 @@ export function ChatMessages(): JSX.Element {
                   message={message}
                   isCurrentUser={isCurrentUser}
                 />
+                {messagePreambleRegistry && (
+                  <MessagePreambleComponent message={message} />
+                )}
                 <ChatMessage
                   message={message}
                   index={i}

package/src/components/messages/preamble.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { useChatContext } from '../../context';
+import { IMessage, IMessageContent } from '../../types';
+
+/**
+ * The preamble component properties.
+ */
+export interface IMessagePreambleProps {
+  message: IMessage;
+}
+
+/**
+ * Renders all registered preamble components vertically above the message body.
+ */
+export function MessagePreambleComponent(
+  props: IMessagePreambleProps
+): JSX.Element | null {
+  const [message, setMessage] = useState<IMessageContent>(
+    props.message.content
+  );
+
+  useEffect(() => {
+    function messageChanged() {
+      setMessage(props.message.content);
+    }
+    props.message.changed.connect(messageChanged);
+    setMessage(props.message.content);
+    return () => {
+      props.message.changed.disconnect(messageChanged);
+    };
+  }, [props.message]);
+
+  const { model, messagePreambleRegistry } = useChatContext();
+  if (!messagePreambleRegistry) {
+    return null;
+  }
+  const components = messagePreambleRegistry.getComponents();
+  if (!components.length) {
+    return null;
+  }
+
+  return (
+    <>
+      {components.map((Component, i) => (
+        <Component key={i} model={model} message={message} />
+      ))}
+    </>
+  );
+}

package/src/message.ts

@@ -5,7 +5,13 @@
 
 import { IRenderMime } from '@jupyterlab/rendermime';
 import { ISignal, Signal } from '@lumino/signaling';
-import { IAttachment, IMessageContent, IMessage, IUser } from './types';
+import {
+  IAttachment,
+  IMessageContent,
+  IMessage,
+  IMessageMetadata,
+  IUser
+} from './types';
 
 /**
  * The message object.
@@ -65,6 +71,9 @@ export class Message implements IMessage {
   get stacked(): boolean | undefined {
     return this._content.stacked;
   }
+  get metadata(): IMessageMetadata | undefined {
+    return this._content.metadata;
+  }
 
   /**
    * A signal emitting when the message has been updated.

package/src/model.ts

@@ -268,6 +268,17 @@ export abstract class AbstractChatModel implements IChatModel {
   }
   set id(value: string | undefined) {
     this._id = value;
+
+    // Update the last read message.
+    const storage = JSON.parse(
+      localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}'
+    );
+    if (
+      typeof storage.lastRead === 'number' &&
+      storage.lastRead > this._lastRead
+    ) {
+      this._lastRead = storage.lastRead;
+    }
   }
 
   /**
@@ -330,18 +341,15 @@ export abstract class AbstractChatModel implements IChatModel {
    * Timestamp of the last read message in local storage.
    */
   get lastRead(): number {
-    if (this._id === undefined) {
-      return 0;
-    }
-    const storage = JSON.parse(
-      localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}'
-    );
-    return storage.lastRead ?? 0;
+    return this._lastRead;
   }
   set lastRead(value: number) {
+    this._lastRead = value;
+
     if (this._id === undefined) {
       return;
     }
+    // Save the last read message to the local storage, for persistence across reload.
     const storage = JSON.parse(
       localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}'
     );
@@ -422,10 +430,10 @@ export abstract class AbstractChatModel implements IChatModel {
     // Notify the change.
     this._notify(unread.length, unreadCountDiff > 0);
 
-    // Save the last read to the local storage.
-    if (this._id !== undefined && recentlyRead.length) {
+    // Save the last read.
+    if (recentlyRead.length) {
       let lastReadChanged = false;
-      let lastRead = this.lastRead ?? this.messages[recentlyRead[0]].time;
+      let lastRead = this.lastRead;
       recentlyRead.forEach(index => {
         if (this.messages[index].time > lastRead) {
           lastRead = this.messages[index].time;
@@ -569,13 +577,11 @@ export abstract class AbstractChatModel implements IChatModel {
     const formattedMessages: IMessage[] = [];
     const unreadIndexes: number[] = [];
 
-    const lastRead = this.lastRead ?? 0;
-
     // Format the messages.
     messages.forEach((message, idx) => {
       const formattedMessage = this.formatChatMessage(message);
       formattedMessages.push(new Message(formattedMessage));
-      if (message.time > lastRead) {
+      if (message.time > this.lastRead) {
         unreadIndexes.push(index + idx);
       }
     });
@@ -714,6 +720,7 @@ export abstract class AbstractChatModel implements IChatModel {
 
   private _messages: IMessage[] = [];
   private _unreadMessages: number[] = [];
+  private _lastRead: number = 0;
   private _messagesInViewport: number[] = [];
   private _id: string | undefined;
   private _name: string = '';

package/src/registers/index.ts

@@ -6,3 +6,4 @@
 export * from './attachment-openers';
 export * from './chat-commands';
 export * from './footers';
+export * from './preambles';

package/src/registers/preambles.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Token } from '@lumino/coreutils';
+import { IChatModel } from '../model';
+import { IMessageContent } from '../types';
+
+/**
+ * The token providing the chat preamble registry.
+ */
+export const IMessagePreambleRegistry = new Token<IMessagePreambleRegistry>(
+  '@jupyter/chat:ChatPreambleRegistry'
+);
+
+/**
+ * The props passed to each preamble component.
+ */
+export type MessagePreambleProps = {
+  model: IChatModel;
+  message: IMessageContent;
+};
+
+/**
+ * The interface of a registry to provide message preamble components.
+ * Preamble components render above the message body, after the header.
+ */
+export interface IMessagePreambleRegistry {
+  /**
+   * Add a preamble component to the registry.
+   * Components are rendered in the order they are added.
+   */
+  addComponent(
+    component: (props: MessagePreambleProps) => JSX.Element | null
+  ): void;
+  /**
+   * Get all registered preamble components.
+   */
+  getComponents(): ((props: MessagePreambleProps) => JSX.Element | null)[];
+}
+
+/**
+ * The default implementation of the message preamble registry.
+ */
+export class MessagePreambleRegistry implements IMessagePreambleRegistry {
+  /**
+   * Add a preamble component to the registry.
+   */
+  addComponent(
+    component: (props: MessagePreambleProps) => JSX.Element | null
+  ): void {
+    this._components.push(component);
+  }
+
+  /**
+   * Get all registered preamble components.
+   */
+  getComponents(): ((props: MessagePreambleProps) => JSX.Element | null)[] {
+    return [...this._components];
+  }
+
+  private _components: ((props: MessagePreambleProps) => JSX.Element | null)[] =
+    [];
+}

package/src/types.ts

@@ -61,6 +61,20 @@ export interface IConfig {
   showDeleted?: boolean;
 }
 
+/**
+ * An empty interface to describe optional metadata attached to a chat message.
+ * Extensions can augment this interface to add custom fields:
+ *
+ * ```ts
+ * declare module '@jupyter/chat' {
+ *   interface IMessageMetadata {
+ *     myField?: MyType;
+ *   }
+ * }
+ * ```
+ */
+export interface IMessageMetadata {} /* eslint-disable-line @typescript-eslint/no-empty-object-type */
+
 /**
  * The chat message description.
  */
@@ -79,11 +93,9 @@ export type IMessageContent<T = IUser, U = IAttachment> = {
   deleted?: boolean;
   edited?: boolean;
   stacked?: boolean;
+  metadata?: IMessageMetadata;
 };
 
-/**
- *
- */
 export interface IMessage extends IMessageContent {
   /**
    * Update one or several fields of the message.

package/style/chat.css

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-.jp-chat-rendered-message {
+.jp-chat-message-container {
   position: relative;
 }
 
@@ -58,8 +58,8 @@
 .jp-chat-toolbar {
   visibility: hidden;
   position: absolute;
-  right: 2px;
-  top: 2px;
+  right: 0;
+  top: 0;
   font-size: var(--jp-ui-font-size0);
   color: var(--jp-ui-font-color3);
 }
@@ -69,7 +69,7 @@
   color: var(--jp-ui-font-color2);
 }
 
-.jp-chat-rendered-message:hover .jp-chat-toolbar {
+.jp-chat-message-container:hover .jp-chat-toolbar {
   visibility: visible;
 }