@jupyter/chat 0.1.0

package/lib/theme-provider.js

@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createTheme } from '@mui/material/styles';
+function getCSSVariable(name) {
+    return getComputedStyle(document.body).getPropertyValue(name).trim();
+}
+export async function pollUntilReady() {
+    while (!document.body.hasAttribute('data-jp-theme-light')) {
+        await new Promise(resolve => setTimeout(resolve, 100)); // Wait 100ms
+    }
+}
+export async function getJupyterLabTheme() {
+    await pollUntilReady();
+    const light = document.body.getAttribute('data-jp-theme-light');
+    return createTheme({
+        spacing: 4,
+        components: {
+            MuiButton: {
+                defaultProps: {
+                    size: 'small'
+                }
+            },
+            MuiFilledInput: {
+                defaultProps: {
+                    margin: 'dense'
+                }
+            },
+            MuiFormControl: {
+                defaultProps: {
+                    margin: 'dense',
+                    size: 'small'
+                }
+            },
+            MuiFormHelperText: {
+                defaultProps: {
+                    margin: 'dense'
+                }
+            },
+            MuiIconButton: {
+                defaultProps: {
+                    size: 'small'
+                }
+            },
+            MuiInputBase: {
+                defaultProps: {
+                    margin: 'dense',
+                    size: 'small'
+                }
+            },
+            MuiInputLabel: {
+                defaultProps: {
+                    margin: 'dense'
+                }
+            },
+            MuiListItem: {
+                defaultProps: {
+                    dense: true
+                }
+            },
+            MuiOutlinedInput: {
+                defaultProps: {
+                    margin: 'dense'
+                }
+            },
+            MuiFab: {
+                defaultProps: {
+                    size: 'small'
+                }
+            },
+            MuiTable: {
+                defaultProps: {
+                    size: 'small'
+                }
+            },
+            MuiTextField: {
+                defaultProps: {
+                    margin: 'dense',
+                    size: 'small'
+                }
+            },
+            MuiToolbar: {
+                defaultProps: {
+                    variant: 'dense'
+                }
+            }
+        },
+        palette: {
+            background: {
+                paper: getCSSVariable('--jp-layout-color1'),
+                default: getCSSVariable('--jp-layout-color1')
+            },
+            mode: light === 'true' ? 'light' : 'dark',
+            primary: {
+                main: getCSSVariable('--jp-brand-color1'),
+                light: getCSSVariable('--jp-brand-color2'),
+                dark: getCSSVariable('--jp-brand-color0')
+            },
+            error: {
+                main: getCSSVariable('--jp-error-color1'),
+                light: getCSSVariable('--jp-error-color2'),
+                dark: getCSSVariable('--jp-error-color0')
+            },
+            warning: {
+                main: getCSSVariable('--jp-warn-color1'),
+                light: getCSSVariable('--jp-warn-color2'),
+                dark: getCSSVariable('--jp-warn-color0')
+            },
+            success: {
+                main: getCSSVariable('--jp-success-color1'),
+                light: getCSSVariable('--jp-success-color2'),
+                dark: getCSSVariable('--jp-success-color0')
+            },
+            text: {
+                primary: getCSSVariable('--jp-ui-font-color1'),
+                secondary: getCSSVariable('--jp-ui-font-color2'),
+                disabled: getCSSVariable('--jp-ui-font-color3')
+            }
+        },
+        shape: {
+            borderRadius: 2
+        },
+        typography: {
+            fontFamily: getCSSVariable('--jp-ui-font-family'),
+            fontSize: 12,
+            htmlFontSize: 16,
+            button: {
+                textTransform: 'capitalize'
+            }
+        }
+    });
+}

package/lib/types.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The user description.
+ */
+export interface IUser {
+    username: string;
+    name?: string;
+    display_name?: string;
+    initials?: string;
+    color?: string;
+    avatar_url?: string;
+}
+/**
+ * The configuration interface.
+ */
+export interface IConfig {
+    sendWithShiftEnter?: boolean;
+    lastRead?: number;
+}
+/**
+ * The chat message decription.
+ */
+export interface IChatMessage {
+    type: 'msg';
+    body: string;
+    id: string;
+    time: number;
+    sender: IUser | string;
+    raw_time?: boolean;
+    deleted?: boolean;
+    edited?: boolean;
+}
+/**
+ * The chat history interface.
+ */
+export interface IChatHistory {
+    messages: IChatMessage[];
+}
+/**
+ * The content of a new message.
+ */
+export interface INewMessage {
+    body: string;
+    id?: string;
+}
+/**
+ * An empty interface to describe optional settings taht could be fetched from server.
+ */
+export interface ISettings {
+}

package/lib/types.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export {};

package/lib/widgets/chat-error.d.ts

@@ -0,0 +1,2 @@
+import { IThemeManager, ReactWidget } from '@jupyterlab/apputils';
+export declare function buildErrorWidget(themeManager: IThemeManager | null): ReactWidget;

package/lib/widgets/chat-error.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { ReactWidget } from '@jupyterlab/apputils';
+import { Alert, Box } from '@mui/material';
+import React from 'react';
+import { JlThemeProvider } from '../components/jl-theme-provider';
+import { chatIcon } from '../icons';
+export function buildErrorWidget(themeManager) {
+    const ErrorWidget = ReactWidget.create(React.createElement(JlThemeProvider, { themeManager: themeManager },
+        React.createElement(Box, { sx: {
+                width: '100%',
+                height: '100%',
+                boxSizing: 'border-box',
+                background: 'var(--jp-layout-color0)',
+                display: 'flex',
+                flexDirection: 'column'
+            } },
+            React.createElement(Box, { sx: { padding: 4 } },
+                React.createElement(Alert, { severity: "error" }, "There seems to be a problem with the Chat backend, please look at the JupyterLab server logs or contact your administrator to correct this problem.")))));
+    ErrorWidget.id = 'jupyter-chat::chat';
+    ErrorWidget.title.icon = chatIcon;
+    ErrorWidget.title.caption = 'Jupyter Chat'; // TODO: i18n
+    return ErrorWidget;
+}

package/lib/widgets/chat-sidebar.d.ts

@@ -0,0 +1,4 @@
+import { IThemeManager, ReactWidget } from '@jupyterlab/apputils';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IChatModel } from '../model';
+export declare function buildChatSidebar(chatModel: IChatModel, themeManager: IThemeManager | null, rmRegistry: IRenderMimeRegistry): ReactWidget;

package/lib/widgets/chat-sidebar.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { ReactWidget } from '@jupyterlab/apputils';
+import React from 'react';
+import { Chat } from '../components/chat';
+import { chatIcon } from '../icons';
+export function buildChatSidebar(chatModel, themeManager, rmRegistry) {
+    const ChatWidget = ReactWidget.create(React.createElement(Chat, { model: chatModel, themeManager: themeManager, rmRegistry: rmRegistry }));
+    ChatWidget.id = 'jupyter-chat::side-panel';
+    ChatWidget.title.icon = chatIcon;
+    ChatWidget.title.caption = 'Jupyter Chat'; // TODO: i18n
+    return ChatWidget;
+}

package/lib/widgets/chat-widget.d.ts

@@ -0,0 +1,19 @@
+import { ReactWidget } from '@jupyterlab/apputils';
+import React from 'react';
+import { Chat } from '../components/chat';
+import { IChatModel } from '../model';
+export declare class ChatWidget extends ReactWidget {
+    constructor(options: Chat.IOptions);
+    /**
+     * Gte the model of the widget.
+     */
+    get model(): IChatModel;
+    render(): React.JSX.Element;
+    private readonly _model;
+    private _themeManager;
+    private _rmRegistry;
+}
+export declare namespace ChatWidget {
+    interface IOptions extends Chat.IOptions {
+    }
+}

package/lib/widgets/chat-widget.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { ReactWidget } from '@jupyterlab/apputils';
+import React from 'react';
+import { Chat } from '../components/chat';
+import { chatIcon } from '../icons';
+export class ChatWidget extends ReactWidget {
+    constructor(options) {
+        super();
+        this.id = 'jupyter-chat::widget';
+        this.title.icon = chatIcon;
+        this.title.caption = 'Jupyter Chat'; // TODO: i18n
+        this._model = options.model;
+        this._themeManager = (options === null || options === void 0 ? void 0 : options.themeManager) || null;
+        this._rmRegistry = options.rmRegistry;
+    }
+    /**
+     * Gte the model of the widget.
+     */
+    get model() {
+        return this._model;
+    }
+    render() {
+        return (React.createElement(Chat, { model: this._model, themeManager: this._themeManager, rmRegistry: this._rmRegistry }));
+    }
+}

package/package.json

@@ -0,0 +1,209 @@
+{
+    "name": "@jupyter/chat",
+    "version": "0.1.0",
+    "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
+    "keywords": [
+        "jupyter",
+        "jupyterlab",
+        "jupyterlab-extension"
+    ],
+    "homepage": "https://github.com/jupyterlab/jupyter-chat",
+    "bugs": {
+        "url": "https://github.com/jupyterlab/jupyter-chat/issues"
+    },
+    "license": "BSD-3-Clause",
+    "author": {
+        "name": "Jupyter Development Team",
+        "email": "jupyter@googlegroups.com"
+    },
+    "files": [
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+        "src/**/*.{ts,tsx}",
+        "schema/*.json"
+    ],
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "style": "style/index.css",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/jupyterlab/jupyter-chat.git"
+    },
+    "scripts": {
+        "build": "jlpm build:lib",
+        "build:prod": "jlpm clean && jlpm build:lib:prod",
+        "build:lib": "tsc --sourceMap",
+        "build:lib:prod": "tsc",
+        "clean": "jlpm clean:lib",
+        "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+        "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+        "clean:all": "jlpm clean:lib && jlpm clean:lintcache",
+        "eslint": "jlpm eslint:check --fix",
+        "eslint:check": "eslint . --cache --ext .ts,.tsx",
+        "install:extension": "jlpm build",
+        "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
+        "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
+        "prettier": "jlpm prettier:base --write --list-different",
+        "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+        "prettier:check": "jlpm prettier:base --check",
+        "stylelint": "jlpm stylelint:check --fix",
+        "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+        "test": "jest --coverage",
+        "watch:src": "tsc -w --sourceMap"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
+        "@jupyterlab/apputils": "^4.0.0",
+        "@jupyterlab/rendermime": "^4.0.0",
+        "@jupyterlab/ui-components": "^4.0.0",
+        "@lumino/disposable": "^2.0.0",
+        "@lumino/signaling": "^2.0.0",
+        "@mui/icons-material": "^5.11.0",
+        "@mui/material": "^5.11.0",
+        "clsx": "^2.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@types/jest": "^29.2.0",
+        "@types/json-schema": "^7.0.11",
+        "@types/react": "^18.2.0",
+        "@types/react-addons-linked-state-mixin": "^0.14.22",
+        "@types/react-dom": "^18.2.0",
+        "@typescript-eslint/eslint-plugin": "^6.1.0",
+        "@typescript-eslint/parser": "^6.1.0",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.36.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "jest": "^29.2.0",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^3.0.0",
+        "rimraf": "^5.0.1",
+        "source-map-loader": "^1.0.2",
+        "style-loader": "^3.3.1",
+        "stylelint": "^15.10.1",
+        "stylelint-config-recommended": "^13.0.0",
+        "stylelint-config-standard": "^34.0.0",
+        "stylelint-csstree-validator": "^3.0.0",
+        "stylelint-prettier": "^4.0.0",
+        "typescript": "~5.0.2"
+    },
+    "sideEffects": [
+        "style/*.css",
+        "style/index.js"
+    ],
+    "styleModule": "style/index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "jupyterlab": {
+        "discovery": {
+            "server": {
+                "managers": [
+                    "pip"
+                ],
+                "base": {
+                    "name": "jupyter_chat"
+                }
+            }
+        },
+        "extension": false,
+        "schemaDir": "schema"
+    },
+    "eslintIgnore": [
+        "node_modules",
+        "dist",
+        "coverage",
+        "**/*.d.ts",
+        "tests",
+        "**/__tests__",
+        "ui-tests"
+    ],
+    "eslintConfig": {
+        "extends": [
+            "eslint:recommended",
+            "plugin:@typescript-eslint/eslint-recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:prettier/recommended"
+        ],
+        "parser": "@typescript-eslint/parser",
+        "parserOptions": {
+            "project": "tsconfig.json",
+            "sourceType": "module"
+        },
+        "plugins": [
+            "@typescript-eslint"
+        ],
+        "rules": {
+            "@typescript-eslint/naming-convention": [
+                "error",
+                {
+                    "selector": "interface",
+                    "format": [
+                        "PascalCase"
+                    ],
+                    "custom": {
+                        "regex": "^I[A-Z]",
+                        "match": true
+                    }
+                }
+            ],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    "args": "none"
+                }
+            ],
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-namespace": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/quotes": [
+                "error",
+                "single",
+                {
+                    "avoidEscape": true,
+                    "allowTemplateLiterals": false
+                }
+            ],
+            "curly": [
+                "error",
+                "all"
+            ],
+            "eqeqeq": "error",
+            "prefer-arrow-callback": "error"
+        }
+    },
+    "prettier": {
+        "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
+        "endOfLine": "auto",
+        "overrides": [
+            {
+                "files": "package.json",
+                "options": {
+                    "tabWidth": 4
+                }
+            }
+        ]
+    },
+    "stylelint": {
+        "extends": [
+            "stylelint-config-recommended",
+            "stylelint-config-standard",
+            "stylelint-prettier/recommended"
+        ],
+        "plugins": [
+            "stylelint-csstree-validator"
+        ],
+        "rules": {
+            "csstree/validator": true,
+            "property-no-vendor-prefix": null,
+            "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
+            "selector-no-vendor-prefix": null,
+            "value-no-vendor-prefix": null
+        }
+    }
+}

package/src/__tests__/model.spec.ts

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */
+
+import { ChatModel, IChatModel } from '../model';
+import { IChatMessage } from '../types';
+
+describe('test chat model', () => {
+  describe('model instantiation', () => {
+    it('should create a ChatModel', () => {
+      const model = new ChatModel();
+      expect(model).toBeInstanceOf(ChatModel);
+    });
+
+    it('should dispose a ChatModel', () => {
+      const model = new ChatModel();
+      model.dispose();
+      expect(model.isDisposed).toBeTruthy();
+    });
+  });
+
+  describe('incoming message', () => {
+    class TestChat extends ChatModel {
+      protected formatChatMessage(message: IChatMessage): IChatMessage {
+        message.body = 'formatted msg';
+        return message;
+      }
+    }
+
+    let model: IChatModel;
+    let messages: IChatMessage[];
+    const msg = {
+      type: 'msg',
+      id: 'message1',
+      time: Date.now() / 1000,
+      body: 'message test',
+      sender: { username: 'user' }
+    } as IChatMessage;
+
+    beforeEach(() => {
+      messages = [];
+    });
+
+    it('should signal incoming message', () => {
+      model = new ChatModel();
+      model.messagesUpdated.connect((sender: IChatModel) => {
+        expect(sender).toBe(model);
+        messages = model.messages;
+      });
+      model.messageAdded(msg);
+      expect(messages).toHaveLength(1);
+      expect(messages[0]).toBe(msg);
+    });
+
+    it('should format message', () => {
+      model = new TestChat();
+      model.messagesUpdated.connect((sender: IChatModel) => {
+        expect(sender).toBe(model);
+        messages = model.messages;
+      });
+      model.messageAdded({ ...msg });
+      expect(messages).toHaveLength(1);
+      expect(messages[0]).not.toBe(msg);
+      expect((messages[0] as IChatMessage).body).toBe('formatted msg');
+    });
+  });
+
+  describe('model config', () => {
+    it('should have empty config', () => {
+      const model = new ChatModel();
+      expect(model.config.sendWithShiftEnter).toBeUndefined();
+    });
+
+    it('should allow config', () => {
+      const model = new ChatModel({ config: { sendWithShiftEnter: true } });
+      expect(model.config.sendWithShiftEnter).toBeTruthy();
+    });
+  });
+});

package/src/__tests__/widgets.spec.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */
+
+import {
+  IRenderMimeRegistry,
+  RenderMimeRegistry
+} from '@jupyterlab/rendermime';
+import { ChatModel, IChatModel } from '../model';
+import { ChatWidget } from '../widgets/chat-widget';
+
+describe('test chat widget', () => {
+  let model: IChatModel;
+  let rmRegistry: IRenderMimeRegistry;
+
+  beforeEach(() => {
+    model = new ChatModel();
+    rmRegistry = new RenderMimeRegistry();
+  });
+
+  describe('model instantiation', () => {
+    it('should create a ChatModel', () => {
+      const widget = new ChatWidget({ model, rmRegistry });
+      expect(widget).toBeInstanceOf(ChatWidget);
+    });
+
+    it('should dispose a ChatModel', () => {
+      const widget = new ChatWidget({ model, rmRegistry });
+      widget.dispose();
+      expect(widget.isDisposed).toBeTruthy();
+    });
+
+    it('should provides the model', () => {
+      const widget = new ChatWidget({ model, rmRegistry });
+      expect(widget.model).toBe(model);
+    });
+  });
+});