@jupyter/chat 0.20.0-alpha.1 → 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/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/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/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.1",
+  "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/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/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/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.