@jupyter/chat 0.1.0

package/src/theme-provider.ts

@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Theme, createTheme } from '@mui/material/styles';
+
+function getCSSVariable(name: string): string {
+  return getComputedStyle(document.body).getPropertyValue(name).trim();
+}
+
+export async function pollUntilReady(): Promise<void> {
+  while (!document.body.hasAttribute('data-jp-theme-light')) {
+    await new Promise(resolve => setTimeout(resolve, 100)); // Wait 100ms
+  }
+}
+
+export async function getJupyterLabTheme(): Promise<Theme> {
+  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/src/types/mui.d.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { ReactEventHandler } from 'react';
+
+/**
+ * Workaround for https://github.com/mui/material-ui/issues/35287.
+ */
+declare global {
+  namespace React {
+    interface DOMAttributes<T> {
+      onResize?: ReactEventHandler<T> | undefined;
+      onResizeCapture?: ReactEventHandler<T> | undefined;
+    }
+  }
+}

package/src/types/svg.d.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+// Excerpted from @jupyterlab/ui-components
+
+// including this file in a package allows for the use of import statements
+// with svg files. Example: `import xSvg from 'path/xSvg.svg'`
+
+// for use with raw-loader in Webpack.
+// The svg will be imported as a raw string
+
+declare module '*.svg' {
+  const value: string; // @ts-ignore
+  export default value;
+}

package/src/types.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+/**
+ * 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/src/widgets/chat-error.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IThemeManager, 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: IThemeManager | null
+): ReactWidget {
+  const ErrorWidget = ReactWidget.create(
+    <JlThemeProvider themeManager={themeManager}>
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          boxSizing: 'border-box',
+          background: 'var(--jp-layout-color0)',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        <Box sx={{ padding: 4 }}>
+          <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.
+          </Alert>
+        </Box>
+      </Box>
+    </JlThemeProvider>
+  );
+  ErrorWidget.id = 'jupyter-chat::chat';
+  ErrorWidget.title.icon = chatIcon;
+  ErrorWidget.title.caption = 'Jupyter Chat'; // TODO: i18n
+
+  return ErrorWidget;
+}

package/src/widgets/chat-sidebar.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IThemeManager, ReactWidget } from '@jupyterlab/apputils';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import React from 'react';
+
+import { Chat } from '../components/chat';
+import { chatIcon } from '../icons';
+import { IChatModel } from '../model';
+
+export function buildChatSidebar(
+  chatModel: IChatModel,
+  themeManager: IThemeManager | null,
+  rmRegistry: IRenderMimeRegistry
+): ReactWidget {
+  const ChatWidget = ReactWidget.create(
+    <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/src/widgets/chat-widget.tsx

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

package/style/base.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+/*
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/
+
+@import url('./chat.css');
+@import url('./chat-settings.css');

package/style/chat-settings.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+.jp-chat-SettingsHeader {
+  font-size: var(--jp-ui-font-size3);
+  font-weight: 400;
+  color: var(--jp-ui-font-color1);
+}

package/style/chat.css

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+.jp-chat-rendermime-markdown {
+  position: relative;
+}
+
+.jp-chat-rendermime-markdown .jp-RenderedHTMLCommon {
+  padding-right: 0;
+}
+
+.jp-chat-rendermime-markdown pre {
+  background-color: var(--jp-cell-editor-background);
+  overflow-x: auto;
+  white-space: pre;
+  margin: 0;
+  padding: 4px 2px 0 6px;
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
+}
+
+.jp-chat-rendermime-markdown pre > code {
+  background-color: inherit;
+  overflow-x: inherit;
+  white-space: inherit;
+}
+
+.jp-chat-rendermime-markdown mjx-container {
+  font-size: 119%;
+}
+
+.jp-chat-toolbar {
+  display: none;
+  position: absolute;
+  right: 2px;
+  top: 2px;
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color3);
+}
+
+.jp-chat-rendermime-markdown:hover .jp-chat-toolbar {
+  display: inherit;
+}
+
+.jp-chat-toolbar:hover {
+  cursor: pointer;
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-chat-toolbar > .jp-ToolbarButtonComponent {
+  margin-top: 0px;
+}

package/style/icons/chat.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
+  <g class="jp-icon3" fill="#616161">
+    <path d="M0 0h24v24H0V0z" fill="none"/>
+    <path d="M15 4v7H5.17L4 12.17V4h11m1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z"/>
+  </g>
+</svg>

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';