@jupyter/chat 0.12.0 → 0.14.0

package/src/components/messages/writers.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Box, Typography } from '@mui/material';
+import React, { useMemo } from 'react';
+
+import { Avatar } from '../avatar';
+import { IUser } from '../../types';
+
+const WRITERS_CLASS = 'jp-chat-writers';
+
+/**
+ * The writers component props.
+ */
+type writersProps = {
+  /**
+   * The list of users currently writing.
+   */
+  writers: IUser[];
+};
+
+/**
+ * Animated typing indicator component
+ */
+const TypingIndicator = (): JSX.Element => (
+  <Box className="jp-chat-typing-indicator">
+    <span className="jp-chat-typing-dot"></span>
+    <span className="jp-chat-typing-dot"></span>
+    <span className="jp-chat-typing-dot"></span>
+  </Box>
+);
+
+/**
+ * The writers component, displaying the current writers.
+ */
+export function WritingUsersList(props: writersProps): JSX.Element | null {
+  const { writers } = props;
+
+  // Don't render if no writers
+  if (writers.length === 0) {
+    return null;
+  }
+
+  const writersText = writers.length > 1 ? ' are writing' : ' is writing';
+
+  const writingUsers: JSX.Element[] = useMemo(
+    () =>
+      writers.map((writer, index) => (
+        <Box key={writer.username || index} className="jp-chat-writer-item">
+          <Avatar user={writer} small />
+          <Typography variant="body2" className="jp-chat-writer-name">
+            {writer.display_name ??
+              writer.name ??
+              (writer.username || 'User undefined')}
+          </Typography>
+          {index < writers.length - 1 && (
+            <Typography variant="body2" className="jp-chat-writer-separator">
+              {index < writers.length - 2 ? ', ' : ' and '}
+            </Typography>
+          )}
+        </Box>
+      )),
+    [writers]
+  );
+
+  return (
+    <Box className={`${WRITERS_CLASS}`}>
+      <Box className="jp-chat-writers-content">
+        {writingUsers}
+        <Box className="jp-chat-writing-status">
+          <Typography variant="body2" className="jp-chat-writing-text">
+            {writersText}
+          </Typography>
+          <TypingIndicator />
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/context.ts

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { createContext } from 'react';
-import { IAttachmentOpenerRegistry } from './registry';
+import { IAttachmentOpenerRegistry } from './registers';
 
 export const AttachmentOpenerContext = createContext<
   IAttachmentOpenerRegistry | undefined

package/src/index.ts

@@ -4,16 +4,12 @@
  */
 
 export * from './active-cell-manager';
-export * from './chat-commands';
 export * from './components';
-export * from './footers';
 export * from './icons';
 export * from './input-model';
 export * from './markdown-renderer';
 export * from './model';
-export * from './registry';
+export * from './registers';
 export * from './selection-watcher';
 export * from './types';
-export * from './widgets/chat-error';
-export * from './widgets/chat-sidebar';
-export * from './widgets/chat-widget';
+export * from './widgets';

package/src/{registry.ts → registers/attachment-openers.ts}

@@ -2,8 +2,9 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+
 import { Token } from '@lumino/coreutils';
-import { IAttachment } from './types';
+import { IAttachment } from '../types';
 
 /**
  * The token for the attachments opener registry, which can be provided by an extension

package/src/registers/chat-commands.ts

@@ -0,0 +1,142 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { LabIcon } from '@jupyterlab/ui-components';
+import { Token } from '@lumino/coreutils';
+import { IInputModel } from '../input-model';
+
+/**
+ * The token for the chat command registry, which can be provided by an extension
+ * using @jupyter/chat package.
+ */
+export const IChatCommandRegistry = new Token<IChatCommandRegistry>(
+  '@jupyter/chat:IChatCommandRegistry'
+);
+
+/**
+ * Interface of a chat command registry, which tracks a list of chat command
+ * providers. Providers provide a list of commands given a user's partial input,
+ * and define how commands are handled when accepted in the chat commands menu.
+ */
+export interface IChatCommandRegistry {
+  /**
+   * Adds a chat command provider to the registry.
+   */
+  addProvider(provider: IChatCommandProvider): void;
+
+  /**
+   * Lists all chat command providers previously added via `addProvider()`.
+   */
+  getProviders(): IChatCommandProvider[];
+
+  /**
+   * Calls `onSubmit()` on each command provider in serial. Each command
+   * provider's `onSubmit()` method is responsible for checking the entire input
+   * for command calls and handling them accordingly.
+   *
+   * This method is called by the application after the user presses the "Send"
+   * button but before the message is sent to server.
+   */
+  onSubmit(inputModel: IInputModel): Promise<void>;
+}
+
+export type ChatCommand = {
+  /**
+   * The name of the command. This defines what the user should type in the
+   * input to have the command appear in the chat commands menu.
+   */
+  name: string;
+
+  /**
+   * ID of the provider the command originated from.
+   */
+  providerId: string;
+
+  /**
+   * If set, this will be rendered as the icon for the command in the chat
+   * commands menu. Jupyter Chat will choose a default if this is unset.
+   */
+  icon?: LabIcon | JSX.Element | string | null;
+
+  /**
+   * If set, this will be rendered as the description for the command in the
+   * chat commands menu. Jupyter Chat will choose a default if this is unset.
+   */
+  description?: string;
+
+  /**
+   * If set, Jupyter Chat will replace the current word with this string immediately when
+   * the command is accepted from the chat commands menu or the current word
+   * matches the command's `name` exactly.
+   *
+   * This is generally used by "shortcut command" providers, e.g. the emoji
+   * command provider.
+   */
+  replaceWith?: string;
+
+  /**
+   * Specifies whether the application should add a space ' ' after the command
+   * is accepted from the menu. This should be set to `true` if the command that
+   * replaces the current word needs to be handled on submit, and the command is
+   * valid on its own.
+   *
+   * Defaults to `false`.
+   */
+  spaceOnAccept?: boolean;
+};
+
+/**
+ * Interface of a command provider.
+ */
+export interface IChatCommandProvider {
+  /**
+   * ID of this command provider.
+   */
+  id: string;
+
+  /**
+   * A method that should return the list of valid chat commands whose names
+   * complete the current word.
+   *
+   * The current word should be accessed from `inputModel.currentWord`.
+   */
+  listCommandCompletions(inputModel: IInputModel): Promise<ChatCommand[]>;
+
+  /**
+   * A method that should identify and handle *all* command calls within a
+   * message that the user intends to submit. This method is called after a user
+   * presses the "Send" button but before the message is sent to the server.
+   *
+   * The entire message should be read from `inputModel.value`. This method may
+   * modify the new message before submission by setting `inputModel.value` or
+   * by calling other methods available on `inputModel`.
+   */
+  onSubmit(inputModel: IInputModel): Promise<void>;
+}
+
+/**
+ * Default chat command registry implementation.
+ */
+export class ChatCommandRegistry implements IChatCommandRegistry {
+  constructor() {
+    this._providers = new Map<string, IChatCommandProvider>();
+  }
+
+  addProvider(provider: IChatCommandProvider): void {
+    this._providers.set(provider.id, provider);
+  }
+
+  getProviders(): IChatCommandProvider[] {
+    return Array.from(this._providers.values());
+  }
+
+  async onSubmit(inputModel: IInputModel) {
+    for (const provider of this._providers.values()) {
+      await provider.onSubmit(inputModel);
+    }
+  }
+
+  private _providers: Map<string, IChatCommandProvider>;
+}

package/src/{footers/registry.ts → registers/footers.ts}

@@ -4,7 +4,15 @@
  */
 
 import { Token } from '@lumino/coreutils';
-import { MessageFooter, MessageFooterSection } from './types';
+import { IChatModel } from '../model';
+import { IChatMessage } from '../types';
+
+/**
+ * The token providing the chat footer registry.
+ */
+export const IMessageFooterRegistry = new Token<IMessageFooterRegistry>(
+  '@jupyter/chat:ChatFooterRegistry'
+);
 
 /**
  * The interface of a registry to provide chat footer.
@@ -22,6 +30,32 @@ export interface IMessageFooterRegistry {
   addSection(section: MessageFooterSection): void;
 }
 
+/**
+ * The props sent passed to each `MessageFooterSection` React component.
+ */
+export type MessageFooterSectionProps = {
+  model: IChatModel;
+  message: IChatMessage;
+};
+
+/**
+ * A message footer section which can be added to the footer registry.
+ */
+export type MessageFooterSection = {
+  component: React.FC<MessageFooterSectionProps>;
+  position: 'left' | 'center' | 'right';
+};
+
+/**
+ * The message footer returned by the registry, composed of 'left', 'center',
+ * and 'right' sections.
+ */
+export type MessageFooter = {
+  left?: MessageFooterSection;
+  center?: MessageFooterSection;
+  right?: MessageFooterSection;
+};
+
 /**
  * The default implementation of the message footer registry.
  */
@@ -43,10 +77,3 @@ export class MessageFooterRegistry implements IMessageFooterRegistry {
 
   private _footers: MessageFooter = {};
 }
-
-/**
- * The token providing the chat footer registry.
- */
-export const IMessageFooterRegistry = new Token<IMessageFooterRegistry>(
-  '@jupyter/chat:ChatFooterRegistry'
-);

package/src/{footers → registers}/index.ts

@@ -3,5 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-export * from './registry';
-export * from './types';
+export * from './attachment-openers';
+export * from './chat-commands';
+export * from './footers';

package/src/selection-watcher.ts

@@ -6,6 +6,10 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { CodeEditor } from '@jupyterlab/codeeditor';
+import {
+  EditorLanguageRegistry,
+  IEditorLanguageRegistry
+} from '@jupyterlab/codemirror';
 import { Notebook } from '@jupyterlab/notebook';
 
 import { find } from '@lumino/algorithm';
@@ -26,6 +30,10 @@ export namespace SelectionWatcher {
      * The current shell of the application.
      */
     shell: JupyterFrontEnd.IShell;
+    /**
+     * Editor language registry.
+     */
+    languages?: IEditorLanguageRegistry;
   }
 
   /**
@@ -44,6 +52,10 @@ export namespace SelectionWatcher {
      * The ID of the document widget in which the selection was made.
      */
     widgetId: string;
+    /**
+     * The language of the selection.
+     */
+    language?: string;
     /**
      * The ID of the cell in which the selection was made, if the original widget
      * was a notebook.
@@ -70,6 +82,7 @@ export interface ISelectionWatcher {
 export class SelectionWatcher {
   constructor(options: SelectionWatcher.IOptions) {
     this._shell = options.shell;
+    this._languages = options.languages || new EditorLanguageRegistry();
     this._shell.currentChanged?.connect((sender, args) => {
       // Do not change the main area widget if the new one has no editor, for example
       // a chat panel. However, the selected text is only available if the main area
@@ -149,12 +162,15 @@ export class SelectionWatcher {
     editor.setSelection({ start: newPosition, end: newPosition });
   }
 
-  protected _poll(): void {
+  protected async _poll(): Promise<void> {
     let currSelection: SelectionWatcher.Selection | null = null;
     const prevSelection = this._selection;
     // Do not return selected text if the main area widget is hidden.
     if (this._mainAreaDocumentWidget?.isVisible) {
-      currSelection = getTextSelection(this._mainAreaDocumentWidget);
+      currSelection = await getTextSelection(
+        this._mainAreaDocumentWidget,
+        this._languages
+      );
     }
     if (prevSelection?.text !== currSelection?.text) {
       this._selection = currSelection;
@@ -169,14 +185,16 @@ export class SelectionWatcher {
     this,
     SelectionWatcher.Selection | null
   >(this);
+  private _languages: IEditorLanguageRegistry;
 }
 
 /**
  * Gets a Selection object from a document widget. Returns `null` if unable.
  */
-function getTextSelection(
-  widget: Widget | null
-): SelectionWatcher.Selection | null {
+async function getTextSelection(
+  widget: Widget | null,
+  languages: IEditorLanguageRegistry
+): Promise<SelectionWatcher.Selection | null> {
   const editor = getEditor(widget);
   // widget type check is redundant but hints the type to TypeScript
   if (!editor || !(widget instanceof DocumentWidget)) {
@@ -207,6 +225,7 @@ function getTextSelection(
     [start, end] = [end, start];
   }
 
+  const language = (await languages.getLanguage(editor?.model.mimeType))?.name;
   return {
     ...selectionObj,
     start,
@@ -214,6 +233,10 @@ function getTextSelection(
     text,
     numLines: text.split('\n').length,
     widgetId: widget.id,
+
+    ...(language && {
+      language
+    }),
     ...(cellId && {
       cellId
     })

package/src/{chat-commands → widgets}/index.ts

@@ -3,5 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-export * from './types';
-export * from './registry';
+export * from './chat-error';
+export * from './chat-sidebar';
+export * from './chat-widget';

package/style/chat.css

@@ -78,6 +78,88 @@
 .jp-chat-writers {
   display: flex;
   flex-wrap: wrap;
+  position: sticky;
+  bottom: 0;
+  padding: 8px;
+  background-color: var(--jp-layout-color0);
+  border-top: 1px solid var(--jp-border-color2);
+  z-index: 1;
+}
+
+.jp-chat-writers-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.jp-chat-writer-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.jp-chat-writer-name {
+  color: var(--jp-ui-font-color1);
+  font-weight: 500;
+}
+
+.jp-chat-writer-separator {
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-chat-writing-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.jp-chat-writing-text {
+  color: var(--jp-ui-font-color2);
+}
+
+/* Animated typing indicator */
+.jp-chat-typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 4px;
+}
+
+.jp-chat-typing-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--jp-brand-color1);
+  animation: jp-chat-typing-bounce 1.4s infinite ease-in-out;
+}
+
+.jp-chat-typing-dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.jp-chat-typing-dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+.jp-chat-typing-dot:nth-child(3) {
+  animation-delay: 0s;
+}
+
+/* Keyframe animations */
+
+@keyframes jp-chat-typing-bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+
+  40% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
 }
 
 .jp-chat-writers > div {

package/lib/chat-commands/index.d.ts

@@ -1,2 +0,0 @@
-export * from './types';
-export * from './registry';

package/lib/chat-commands/registry.d.ts

@@ -1,28 +0,0 @@
-import { Token } from '@lumino/coreutils';
-import { ChatCommand, IChatCommandProvider } from './types';
-import { IInputModel } from '../input-model';
-/**
- * Interface of a chat command registry, which tracks a list of chat command
- * providers. Providers provide a list of commands given a user's partial input,
- * and define how commands are handled when accepted in the chat commands menu.
- */
-export interface IChatCommandRegistry {
-    addProvider(provider: IChatCommandProvider): void;
-    getProviders(): IChatCommandProvider[];
-    /**
-     * Handles a chat command by calling `handleChatCommand()` on the provider
-     * corresponding to this chat command.
-     */
-    handleChatCommand(command: ChatCommand, inputModel: IInputModel): void;
-}
-/**
- * Default chat command registry implementation.
- */
-export declare class ChatCommandRegistry implements IChatCommandRegistry {
-    constructor();
-    addProvider(provider: IChatCommandProvider): void;
-    getProviders(): IChatCommandProvider[];
-    handleChatCommand(command: ChatCommand, inputModel: IInputModel): void;
-    private _providers;
-}
-export declare const IChatCommandRegistry: Token<IChatCommandRegistry>;

package/lib/chat-commands/types.d.ts

@@ -1,52 +0,0 @@
-/// <reference types="react" />
-import { LabIcon } from '@jupyterlab/ui-components';
-import { IInputModel } from '../input-model';
-export type ChatCommand = {
-    /**
-     * The name of the command. This defines what the user should type in the
-     * input to have the command appear in the chat commands menu.
-     */
-    name: string;
-    /**
-     * ID of the provider the command originated from.
-     */
-    providerId: string;
-    /**
-     * If set, this will be rendered as the icon for the command in the chat
-     * commands menu. Jupyter Chat will choose a default if this is unset.
-     */
-    icon?: LabIcon | JSX.Element | string | null;
-    /**
-     * If set, this will be rendered as the description for the command in the
-     * chat commands menu. Jupyter Chat will choose a default if this is unset.
-     */
-    description?: string;
-    /**
-     * If set, Jupyter Chat will replace the current word with this string after
-     * the command is run from the chat commands menu.
-     *
-     * If all commands from a provider have this property set, then
-     * `handleChatCommands()` can just return on the first line.
-     */
-    replaceWith?: string;
-};
-/**
- * Interface of a command provider.
- */
-export interface IChatCommandProvider {
-    /**
-     * ID of this command provider.
-     */
-    id: string;
-    /**
-     * Async function which accepts the input model and returns a list of
-     * valid chat commands that match the current word. The current word is
-     * space-separated word at the user's cursor.
-     */
-    getChatCommands(inputModel: IInputModel): Promise<ChatCommand[]>;
-    /**
-     * Function called when a chat command is run by the user through the chat
-     * commands menu.
-     */
-    handleChatCommand(command: ChatCommand, inputModel: IInputModel): Promise<void>;
-}

package/lib/chat-commands/types.js

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