@jupyter/chat 0.20.0-alpha.1 → 0.20.0-alpha.3

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/lib/widgets/chat-selector-popup.d.ts

@@ -0,0 +1,102 @@
+/// <reference types="react" />
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { Message } from '@lumino/messaging';
+/**
+ * A popup widget for selecting a chat from a filtered list.
+ */
+export declare class ChatSelectorPopup extends ReactWidget {
+    constructor(options: ChatSelectorPopup.IOptions);
+    /**
+     * Getter/setter of the anchor element.
+     */
+    get anchor(): HTMLElement | null;
+    set anchor(element: HTMLElement | null);
+    /**
+     * Update the list of available chats.
+     */
+    updateChats(chatNames: string[]): void;
+    /**
+     * Update the list of loaded models.
+     */
+    setLoadedModels(loadedModels: string[]): void;
+    /**
+     * Set the currently displayed chat.
+     */
+    setCurrentChat(chatName: string | null): void;
+    /**
+     * Set the search query and filter the list.
+     */
+    setQuery(query: string): void;
+    /**
+     * Get the currently selected chat value.
+     */
+    getSelectedValue(): string | null;
+    /**
+     * Move selection down.
+     */
+    selectNext(): void;
+    /**
+     * Move selection up.
+     */
+    selectPrevious(): void;
+    /**
+     * Show the popup and position it.
+     */
+    show(): void;
+    /**
+     * Hide the popup.
+     */
+    hide(): void;
+    render(): JSX.Element;
+    protected onAfterShow(msg: Message): void;
+    protected onAfterHide(msg: Message): void;
+    /**
+     * Check if the popup should move (anchor has moved).
+     */
+    private _checkPosition;
+    /**
+     * Position the popup below the search element.
+     */
+    private _positionPopup;
+    /**
+     * Update the filtered and sorted chats based on current state.
+     */
+    private _updateFilteredChats;
+    private _handleItemClick;
+    private _handleUpdateSelectedName;
+    private _handleClose;
+    private _handleOutsideClick;
+    private _chatNames;
+    private _loadedModels;
+    private _currentChat;
+    private _query;
+    private _selectedName;
+    private _filteredChats;
+    private _onSelect?;
+    private _onClose?;
+    private _anchor;
+    private _anchorRect;
+}
+/**
+ * Namespace for ChatSelectorPopup.
+ */
+export declare namespace ChatSelectorPopup {
+    interface IOptions {
+        /**
+         * Object mapping display names to values used to identify/open chats.
+         */
+        chatNames: string[];
+        /**
+         * Callback when a chat is selected.
+         */
+        onSelect?: (name: string) => void;
+        /**
+         * Callback when a chat is closed/disposed.
+         */
+        onClose?: (name: string) => void;
+        /**
+         * The element to anchor the popup to.
+         */
+        anchor?: HTMLElement;
+    }
+}