@jupyter/collaboration 1.0.0-alpha.0

package/README.md

@@ -0,0 +1,3 @@
+# @jupyter/collaboration
+
+A JupyterLab package which provides a set of widgets for Real Time Collaboration.

package/lib/awarenessmock.d.ts

@@ -0,0 +1,23 @@
+import * as Y from 'yjs';
+import { IAwareness } from './tokens';
+/**
+ * Default user implementation.
+ */
+export declare class AwarenessMock implements IAwareness {
+    constructor(doc: Y.Doc);
+    setLocalState(state: any): void;
+    setLocalStateField(field: string, value: any): void;
+    getLocalState(): any;
+    getStates(): any;
+    on(name: string, f: any): void;
+    off(name: string, f: any): void;
+    once(name: string, f: any): void;
+    emit(name: string, args: any): void;
+    destroy(): void;
+    doc: Y.Doc;
+    clientID: number;
+    states: Map<any, any>;
+    meta: Map<any, any>;
+    _checkInterval: any;
+    _observers: any;
+}

package/lib/awarenessmock.js

@@ -0,0 +1,40 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/**
+ * Default user implementation.
+ */
+export class AwarenessMock {
+    constructor(doc) {
+        this.states = new Map();
+        this.meta = new Map();
+        this.doc = doc;
+        this.clientID = doc.clientID;
+    }
+    setLocalState(state) {
+        return;
+    }
+    setLocalStateField(field, value) {
+        return;
+    }
+    getLocalState() {
+        return null;
+    }
+    getStates() {
+        return this.states;
+    }
+    on(name, f) {
+        return;
+    }
+    off(name, f) {
+        return;
+    }
+    once(name, f) {
+        return;
+    }
+    emit(name, args) {
+        return;
+    }
+    destroy() {
+        return;
+    }
+}

package/lib/collaboratorspanel.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Awareness } from 'y-protocols/awareness';
+import { Panel } from '@lumino/widgets';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { User } from '@jupyterlab/services';
+import { ICollaboratorAwareness } from './tokens';
+export declare class CollaboratorsPanel extends Panel {
+    private _currentUser;
+    private _awareness;
+    private _body;
+    constructor(currentUser: User.IManager, awareness: Awareness, fileopener: (path: string) => void);
+    /**
+     * Handle collaborator change.
+     */
+    private _onAwarenessChanged;
+}
+/**
+ * The collaborators list.
+ */
+export declare class CollaboratorsBody extends ReactWidget {
+    private _collaborators;
+    private _fileopener;
+    constructor(fileopener: (path: string) => void);
+    get collaborators(): ICollaboratorAwareness[];
+    set collaborators(value: ICollaboratorAwareness[]);
+    render(): React.ReactElement<any>[];
+}

package/lib/collaboratorspanel.js

@@ -0,0 +1,93 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+import * as React from 'react';
+import { Panel } from '@lumino/widgets';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { PathExt } from '@jupyterlab/coreutils';
+/**
+ * The CSS class added to collaborators list container.
+ */
+const COLLABORATORS_LIST_CLASS = 'jp-CollaboratorsList';
+/**
+ * The CSS class added to each collaborator element.
+ */
+const COLLABORATOR_CLASS = 'jp-Collaborator';
+/**
+ * The CSS class added to each collaborator element.
+ */
+const CLICKABLE_COLLABORATOR_CLASS = 'jp-ClickableCollaborator';
+/**
+ * The CSS class added to each collaborator icon.
+ */
+const COLLABORATOR_ICON_CLASS = 'jp-CollaboratorIcon';
+export class CollaboratorsPanel extends Panel {
+    constructor(currentUser, awareness, fileopener) {
+        super({});
+        /**
+         * Handle collaborator change.
+         */
+        this._onAwarenessChanged = () => {
+            const state = this._awareness.getStates();
+            const collaborators = [];
+            state.forEach((value, key) => {
+                if (this._currentUser.isReady &&
+                    value.user.name !== this._currentUser.identity.name) {
+                    collaborators.push(value);
+                }
+            });
+            this._body.collaborators = collaborators;
+        };
+        this._awareness = awareness;
+        this._currentUser = currentUser;
+        this._body = new CollaboratorsBody(fileopener);
+        this.addWidget(this._body);
+        this.update();
+        this._awareness.on('change', this._onAwarenessChanged);
+    }
+}
+/**
+ * The collaborators list.
+ */
+export class CollaboratorsBody extends ReactWidget {
+    constructor(fileopener) {
+        super();
+        this._collaborators = [];
+        this._fileopener = fileopener;
+        this.addClass(COLLABORATORS_LIST_CLASS);
+    }
+    get collaborators() {
+        return this._collaborators;
+    }
+    set collaborators(value) {
+        this._collaborators = value;
+        this.update();
+    }
+    render() {
+        return this._collaborators.map((value, i) => {
+            let canOpenCurrent = false;
+            let current = '';
+            let separator = '';
+            let currentFileLocation = '';
+            if (value.current) {
+                canOpenCurrent = true;
+                currentFileLocation = value.current.split(':')[1];
+                current = PathExt.basename(currentFileLocation);
+                current =
+                    current.length > 25 ? current.slice(0, 12).concat('…') : current;
+                separator = '•';
+            }
+            const onClick = () => {
+                if (canOpenCurrent) {
+                    this._fileopener(currentFileLocation);
+                }
+            };
+            const displayName = `${value.user.display_name} ${separator} ${current}`;
+            return (React.createElement("div", { className: canOpenCurrent
+                    ? `${CLICKABLE_COLLABORATOR_CLASS} ${COLLABORATOR_CLASS}`
+                    : COLLABORATOR_CLASS, key: i, onClick: onClick },
+                React.createElement("div", { className: COLLABORATOR_ICON_CLASS, style: { backgroundColor: value.user.color } },
+                    React.createElement("span", null, value.user.initials)),
+                React.createElement("span", null, displayName)));
+        });
+    }
+}

package/lib/components.d.ts

@@ -0,0 +1,12 @@
+import { User } from '@jupyterlab/services';
+import * as React from 'react';
+declare type Props = {
+    user: User.IIdentity;
+};
+/**
+ * React component for the user icon.
+ *
+ * @returns The React component
+ */
+export declare const UserIconComponent: React.FC<Props>;
+export {};

package/lib/components.js

@@ -0,0 +1,15 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+import * as React from 'react';
+/**
+ * React component for the user icon.
+ *
+ * @returns The React component
+ */
+export const UserIconComponent = props => {
+    const { user } = props;
+    return (React.createElement("div", { className: "jp-UserInfo-Container" },
+        React.createElement("div", { title: user.display_name, className: "jp-UserInfo-Icon", style: { backgroundColor: user.color } },
+            React.createElement("span", null, user.initials)),
+        React.createElement("h3", null, user.display_name)));
+};

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @packageDocumentation
+ * @module collaboration
+ */
+export * from './tokens';
+export * from './awarenessmock';
+export * from './menu';
+export * from './userinfopanel';
+export * from './collaboratorspanel';

package/lib/index.js

@@ -0,0 +1,11 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/**
+ * @packageDocumentation
+ * @module collaboration
+ */
+export * from './tokens';
+export * from './awarenessmock';
+export * from './menu';
+export * from './userinfopanel';
+export * from './collaboratorspanel';

package/lib/menu.d.ts

@@ -0,0 +1,58 @@
+import { User } from '@jupyterlab/services';
+import { Menu, MenuBar } from '@lumino/widgets';
+import { VirtualElement } from '@lumino/virtualdom';
+/**
+ * Custom renderer for the user menu.
+ */
+export declare class RendererUserMenu extends MenuBar.Renderer {
+    private _user;
+    /**
+     * Constructor of the class RendererUserMenu.
+     *
+     * @argument user Current user object.
+     */
+    constructor(user: User.IManager);
+    /**
+     * Render the virtual element for a menu bar item.
+     *
+     * @param data - The data to use for rendering the item.
+     *
+     * @returns A virtual element representing the item.
+     */
+    renderItem(data: MenuBar.IRenderData): VirtualElement;
+    /**
+     * Render the label element for a menu item.
+     *
+     * @param data - The data to use for rendering the label.
+     *
+     * @returns A virtual element representing the item label.
+     */
+    renderLabel(data: MenuBar.IRenderData): VirtualElement;
+    /**
+     * Render the user icon element for a menu item.
+     *
+     * @returns A virtual element representing the item label.
+     */
+    private _createUserIcon;
+}
+/**
+ * This menu does not contain anything but we keep it around in case someone uses it.
+ * Custom lumino Menu for the user menu.
+ */
+export declare class UserMenu extends Menu {
+    constructor(options: UserMenu.IOptions);
+}
+/**
+ * Namespace of the UserMenu class.
+ */
+export declare namespace UserMenu {
+    /**
+     * User menu options interface
+     */
+    interface IOptions extends Menu.IOptions {
+        /**
+         * Current user manager.
+         */
+        user: User.IManager;
+    }
+}

package/lib/menu.js

@@ -0,0 +1,75 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+import { userIcon } from '@jupyterlab/ui-components';
+import { Menu, MenuBar } from '@lumino/widgets';
+import { h } from '@lumino/virtualdom';
+/**
+ * Custom renderer for the user menu.
+ */
+export class RendererUserMenu extends MenuBar.Renderer {
+    /**
+     * Constructor of the class RendererUserMenu.
+     *
+     * @argument user Current user object.
+     */
+    constructor(user) {
+        super();
+        this._user = user;
+    }
+    /**
+     * Render the virtual element for a menu bar item.
+     *
+     * @param data - The data to use for rendering the item.
+     *
+     * @returns A virtual element representing the item.
+     */
+    renderItem(data) {
+        const className = this.createItemClass(data);
+        const dataset = this.createItemDataset(data);
+        const aria = this.createItemARIA(data);
+        return h.li({ className, dataset, tabindex: '0', onfocus: data.onfocus, ...aria }, this._createUserIcon(), this.renderLabel(data), this.renderIcon(data));
+    }
+    /**
+     * Render the label element for a menu item.
+     *
+     * @param data - The data to use for rendering the label.
+     *
+     * @returns A virtual element representing the item label.
+     */
+    renderLabel(data) {
+        const content = this.formatLabel(data);
+        return h.div({ className: 'lm-MenuBar-itemLabel jp-MenuBar-label' }, content);
+    }
+    /**
+     * Render the user icon element for a menu item.
+     *
+     * @returns A virtual element representing the item label.
+     */
+    _createUserIcon() {
+        if (this._user.isReady && this._user.identity.avatar_url) {
+            return h.div({
+                className: 'lm-MenuBar-itemIcon jp-MenuBar-imageIcon'
+            }, h.img({ src: this._user.identity.avatar_url }));
+        }
+        else if (this._user.isReady) {
+            return h.div({
+                className: 'lm-MenuBar-itemIcon jp-MenuBar-anonymousIcon',
+                style: { backgroundColor: this._user.identity.color }
+            }, h.span({}, this._user.identity.initials));
+        }
+        else {
+            return h.div({
+                className: 'lm-MenuBar-itemIcon jp-MenuBar-anonymousIcon'
+            }, userIcon);
+        }
+    }
+}
+/**
+ * This menu does not contain anything but we keep it around in case someone uses it.
+ * Custom lumino Menu for the user menu.
+ */
+export class UserMenu extends Menu {
+    constructor(options) {
+        super(options);
+    }
+}

package/lib/tokens.d.ts

@@ -0,0 +1,79 @@
+import type { Menu } from '@lumino/widgets';
+import { Token } from '@lumino/coreutils';
+import type { Awareness } from 'y-protocols/awareness';
+import type { User } from '@jupyterlab/services';
+/**
+ * The user menu token.
+ *
+ * NOTE: Require this token in your extension to access the user menu
+ * (top-right menu in JupyterLab's interface).
+ */
+export declare const IUserMenu: Token<IUserMenu>;
+/**
+ * The global awareness token.
+ */
+export declare const IGlobalAwareness: Token<Awareness>;
+/**
+ * The awareness interface.
+ */
+export declare type IAwareness = Awareness;
+/**
+ * An interface describing the user menu.
+ */
+export interface IUserMenu {
+    /**
+     * Dispose of the resources held by the menu.
+     */
+    dispose(): void;
+    /**
+     * Test whether the widget has been disposed.
+     */
+    readonly isDisposed: boolean;
+    /**
+     * A read-only array of the menu items in the menu.
+     */
+    readonly items: ReadonlyArray<Menu.IItem>;
+    /**
+     * Add a menu item to the end of the menu.
+     *
+     * @param options - The options for creating the menu item.
+     *
+     * @returns The menu item added to the menu.
+     */
+    addItem(options: Menu.IItemOptions): Menu.IItem;
+    /**
+     * Insert a menu item into the menu at the specified index.
+     *
+     * @param index - The index at which to insert the item.
+     *
+     * @param options - The options for creating the menu item.
+     *
+     * @returns The menu item added to the menu.
+     *
+     * #### Notes
+     * The index will be clamped to the bounds of the items.
+     */
+    insertItem(index: number, options: Menu.IItemOptions): Menu.IItem;
+    /**
+     * Remove an item from the menu.
+     *
+     * @param item - The item to remove from the menu.
+     *
+     * #### Notes
+     * This is a no-op if the item is not in the menu.
+     */
+    removeItem(item: Menu.IItem): void;
+}
+/**
+ * Global awareness for JupyterLab scopped shared data.
+ */
+export interface ICollaboratorAwareness {
+    /**
+     * The User owning theses data.
+     */
+    user: User.IIdentity;
+    /**
+     * The current file/context the user is working on.
+     */
+    current?: string;
+}

package/lib/tokens.js

@@ -0,0 +1,14 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+import { Token } from '@lumino/coreutils';
+/**
+ * The user menu token.
+ *
+ * NOTE: Require this token in your extension to access the user menu
+ * (top-right menu in JupyterLab's interface).
+ */
+export const IUserMenu = new Token('@jupyter/collaboration:IUserMenu');
+/**
+ * The global awareness token.
+ */
+export const IGlobalAwareness = new Token('@jupyter/collaboration:IGlobalAwareness');

package/lib/userinfopanel.d.ts

@@ -0,0 +1,21 @@
+import { ReactWidget } from '@jupyterlab/apputils';
+import { User } from '@jupyterlab/services';
+import { Panel } from '@lumino/widgets';
+export declare class UserInfoPanel extends Panel {
+    private _profile;
+    private _body;
+    constructor(user: User.IManager);
+}
+/**
+ * A SettingsWidget for the user.
+ */
+export declare class UserInfoBody extends ReactWidget {
+    private _user;
+    /**
+     * Constructs a new settings widget.
+     */
+    constructor(user: User.IIdentity);
+    get user(): User.IIdentity;
+    set user(user: User.IIdentity);
+    render(): JSX.Element;
+}

package/lib/userinfopanel.js

@@ -0,0 +1,50 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+import { ReactWidget } from '@jupyterlab/apputils';
+import { Panel } from '@lumino/widgets';
+import * as React from 'react';
+import { UserIconComponent } from './components';
+export class UserInfoPanel extends Panel {
+    constructor(user) {
+        super({});
+        this.addClass('jp-UserInfoPanel');
+        this._profile = user;
+        this._body = null;
+        if (this._profile.isReady) {
+            this._body = new UserInfoBody(this._profile.identity);
+            this.addWidget(this._body);
+            this.update();
+        }
+        else {
+            this._profile.ready
+                .then(() => {
+                this._body = new UserInfoBody(this._profile.identity);
+                this.addWidget(this._body);
+                this.update();
+            })
+                .catch(e => console.error(e));
+        }
+    }
+}
+/**
+ * A SettingsWidget for the user.
+ */
+export class UserInfoBody extends ReactWidget {
+    /**
+     * Constructs a new settings widget.
+     */
+    constructor(user) {
+        super();
+        this._user = user;
+    }
+    get user() {
+        return this._user;
+    }
+    set user(user) {
+        this._user = user;
+        this.update();
+    }
+    render() {
+        return React.createElement(UserIconComponent, { user: this._user });
+    }
+}

package/lib/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Call the API extension
+ *
+ * @param endPoint API REST end point for the extension
+ * @param init Initial values for the request
+ * @returns The response body interpreted as JSON
+ */
+export declare function requestAPI<T>(endPoint?: string, init?: RequestInit): Promise<T>;

package/lib/utils.js

@@ -0,0 +1,35 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+import { URLExt } from '@jupyterlab/coreutils';
+import { ServerConnection } from '@jupyterlab/services';
+/**
+ * Call the API extension
+ *
+ * @param endPoint API REST end point for the extension
+ * @param init Initial values for the request
+ * @returns The response body interpreted as JSON
+ */
+export async function requestAPI(endPoint = '', init = {}) {
+    const settings = ServerConnection.makeSettings();
+    const requestUrl = URLExt.join(settings.baseUrl, endPoint);
+    let response;
+    try {
+        response = await ServerConnection.makeRequest(requestUrl, init, settings);
+    }
+    catch (error) {
+        throw new ServerConnection.NetworkError(error);
+    }
+    let data = await response.text();
+    if (data.length > 0) {
+        try {
+            data = JSON.parse(data);
+        }
+        catch (error) {
+            console.log('Not a JSON response body.', response);
+        }
+    }
+    if (!response.ok) {
+        throw new ServerConnection.ResponseError(response, data.message || data);
+    }
+    return data;
+}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@jupyter/collaboration",
+  "version": "1.0.0-alpha.0",
+  "description": "JupyterLab - Real-Time Collaboration Widgets",
+  "homepage": "https://github.com/jupyterlab/jupyter_collaboration",
+  "bugs": {
+    "url": "https://github.com/jupyterlab/jupyter_collaboration/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jupyterlab/jupyter_collaboration.git"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Project Jupyter",
+  "sideEffects": [
+    "style/*.css",
+    "style/index.js"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "directories": {
+    "lib": "lib/"
+  },
+  "files": [
+    "lib/*.d.ts",
+    "lib/*.js.map",
+    "lib/*.js",
+    "style/*.css",
+    "style/index.js"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "build:prod": "jlpm run build",
+    "clean": "rimraf lib tsconfig.tsbuildinfo",
+    "clean:lib": "jlpm run clean:all",
+    "clean:all": "rimraf lib tsconfig.tsbuildinfo node_modules",
+    "install:extension": "jlpm run build",
+    "watch": "tsc -b --watch"
+  },
+  "dependencies": {
+    "@jupyterlab/apputils": "^4.0.0-alpha.18",
+    "@jupyterlab/coreutils": "^6.0.0-alpha.18",
+    "@jupyterlab/services": "^7.0.0-alpha.18",
+    "@jupyterlab/ui-components": "^4.0.0-alpha.33",
+    "@lumino/coreutils": "^2.0.0-alpha.6",
+    "@lumino/virtualdom": "^2.0.0-alpha.6",
+    "@lumino/widgets": "^2.0.0-alpha.6",
+    "react": "^18.2.0",
+    "y-protocols": "^1.0.5",
+    "yjs": "^13.5.40"
+  },
+  "devDependencies": {
+    "rimraf": "~3.0.0",
+    "typescript": "~4.7.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "jupyterlab": {},
+  "typedoc": {
+    "entryPoint": "./src/index.ts",
+    "readmeFile": "./README.md",
+    "displayName": "@jupyter/collaboration",
+    "tsconfig": "./tsconfig.json"
+  },
+  "styleModule": "style/index.js"
+}

package/style/base.css

@@ -0,0 +1,7 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|---------------------------------------------------------------------------- */
+
+@import url("./menu.css");
+@import url("./sidepanel.css");

package/style/index.css

@@ -0,0 +1,6 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|---------------------------------------------------------------------------- */
+
+@import url('./base.css');

package/style/index.js

@@ -0,0 +1,6 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+import './base.css';

package/style/menu.css

@@ -0,0 +1,41 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|---------------------------------------------------------------------------- */
+
+.jp-MenuBar-label {
+  margin-left: 25px;
+}
+
+.jp-MenuBar-anonymousIcon span {
+  width: 24px;
+  text-align: center;
+  fill: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-MenuBar-anonymousIcon,
+.jp-MenuBar-imageIcon {
+  position: absolute;
+  top: 1px;
+  left: 8px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  border-radius: 100%;
+}
+
+.jp-MenuBar-imageIcon img {
+  width: 24px;
+  border-radius: 100%;
+  fill: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-UserMenu-caretDownIcon {
+  height: 22px;
+  position: relative;
+  top: 15%;
+}

package/style/sidepanel.css

@@ -0,0 +1,124 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+/************************************************************
+                      Main Panel
+*************************************************************/
+
+.jp-RTCPanel {
+  min-width: var(--jp-sidebar-min-width) !important;
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
+  font-size: var(--jp-ui-font-size1);
+}
+
+/************************************************************
+                      User Info Panel
+*************************************************************/
+.jp-UserInfoPanel {
+  display: flex;
+  flex-direction: column;
+  max-height: 140px;
+  padding-top: 3px;
+}
+
+.jp-UserInfo-Container {
+  margin: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.jp-UserInfo-Icon {
+  margin: auto;
+  width: 50px;
+  height: 50px;
+  border-radius: 50px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.jp-UserInfo-Icon span {
+  margin: auto;
+  text-align: center;
+  font-size: 25px;
+  fill: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-UserInfo-Info {
+  margin: 20px;
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.jp-UserInfo-Info label {
+  font-weight: bold;
+  fill: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-UserInfo-Info input {
+  text-decoration: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-color: var(--jp-ui-font-color1);
+  border-width: 0.5px;
+  background-color: transparent;
+  fill: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+/************************************************************
+                Collaborators Info Panel
+*************************************************************/
+
+.jp-CollaboratorsList {
+  flex-direction: column;
+  display: flex;
+  z-index: 1000;
+}
+
+.jp-Collaborator {
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  font-size: var(--jp-ui-font-size0);
+  fill: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-ClickableCollaborator:hover {
+  cursor: pointer;
+  background-color: var(--jp-layout-color2);
+  fill: var(--jp-ui-font-color0);
+  color: var(--jp-ui-font-color0);
+}
+
+.jp-Collaborator > span {
+  padding-left: 7px;
+}
+
+.jp-CollaboratorIcon {
+  border-radius: 100%;
+  padding: 2px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+}
+
+.jp-CollaboratorIcon > span {
+  text-align: center;
+  margin: auto;
+  font-size: 12px;
+  fill: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-CollaboratorCurrent {
+  position: absolute;
+  right: 0;
+}