@jupyter/chat 0.13.0 → 0.15.0

package/src/components/input/use-chat-commands.tsx

@@ -11,7 +11,7 @@ import type {
 import { Box } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
-import { ChatCommand, IChatCommandRegistry } from '../../chat-commands';
+import { ChatCommand, IChatCommandRegistry } from '../../registers';
 import { IInputModel } from '../../input-model';
 
 type AutocompleteProps = GenericAutocompleteProps<any, any, any, any>;
@@ -37,7 +37,9 @@ export function useChatCommands(
   // whether an option is highlighted in the chat commands menu
   const [highlighted, setHighlighted] = useState(false);
 
-  // whether the chat commands menu is open
+  // whether the chat commands menu is open.
+  // NOTE: every `setOpen(false)` call should be followed by a
+  // `setHighlighted(false)` call.
   const [open, setOpen] = useState(false);
 
   // current list of chat commands matched by the current word.
@@ -45,6 +47,9 @@ export function useChatCommands(
   const [commands, setCommands] = useState<ChatCommand[]>([]);
 
   useEffect(() => {
+    /**
+     * Callback that runs whenever the current word changes.
+     */
     async function getCommands(_: IInputModel, currentWord: string | null) {
       const providers = chatCommandRegistry?.getProviders();
       if (!providers) {
@@ -58,12 +63,12 @@ export function useChatCommands(
         return;
       }
 
-      let newCommands: ChatCommand[] = [];
+      let commandCompletions: ChatCommand[] = [];
       for (const provider of providers) {
         // TODO: optimize performance when this method is truly async
         try {
-          newCommands = newCommands.concat(
-            await provider.getChatCommands(inputModel)
+          commandCompletions = commandCompletions.concat(
+            await provider.listCommandCompletions(inputModel)
           );
         } catch (e) {
           console.error(
@@ -72,10 +77,28 @@ export function useChatCommands(
           );
         }
       }
-      if (newCommands) {
+
+      // Immediately replace the current word if it exactly matches one command
+      // and 'replaceWith' is set.
+      if (
+        commandCompletions.length === 1 &&
+        commandCompletions[0].name === inputModel.currentWord &&
+        commandCompletions[0].replaceWith !== undefined
+      ) {
+        const replacement = commandCompletions[0].replaceWith;
+        inputModel.replaceCurrentWord(replacement);
+        return;
+      }
+
+      // Otherwise, open/close the menu based on the presence of command
+      // completions and set the menu entries.
+      if (commandCompletions.length) {
         setOpen(true);
+      } else {
+        setOpen(false);
+        setHighlighted(false);
       }
-      setCommands(newCommands);
+      setCommands(commandCompletions);
     }
 
     inputModel.currentWordChanged.connect(getCommands);
@@ -87,7 +110,8 @@ export function useChatCommands(
 
   /**
    * onChange(): the callback invoked when a command is selected from the chat
-   * commands menu by the user.
+   * commands menu. When a command `cmd` is selected, this function replaces the
+   * current word with `cmd.replaceWith` if set, `cmd.name` otherwise.
    */
   const onChange: AutocompleteProps['onChange'] = (
     e: unknown,
@@ -109,21 +133,20 @@ export function useChatCommands(
       return;
     }
 
-    // if replaceWith is set, handle the command immediately
-    if (command.replaceWith) {
-      inputModel.replaceCurrentWord(command.replaceWith);
-      return;
+    let replacement =
+      command.replaceWith === undefined ? command.name : command.replaceWith;
+    if (command.spaceOnAccept) {
+      replacement += ' ';
     }
-
-    // otherwise, defer handling to the command provider
-    chatCommandRegistry.handleChatCommand(command, inputModel);
+    inputModel.replaceCurrentWord(replacement);
   };
 
   return {
     autocompleteProps: {
       open,
       options: commands,
-      getOptionLabel: (command: ChatCommand) => command.name,
+      getOptionLabel: (command: ChatCommand | string) =>
+        typeof command === 'string' ? '' : command.name,
       renderOption: (
         defaultProps,
         command: ChatCommand,

package/src/components/messages/footer.tsx

@@ -5,10 +5,11 @@
 
 import { Box } from '@mui/material';
 import React from 'react';
+
 import {
   IMessageFooterRegistry,
   MessageFooterSectionProps
-} from '../../footers';
+} from '../../registers';
 
 /**
  * The chat footer component properties.
@@ -24,7 +25,9 @@ export interface IMessageFootersProps extends MessageFooterSectionProps {
  * The chat footer component, which displays footer components on a row according to
  * their respective positions.
  */
-export function MessageFooter(props: IMessageFootersProps): JSX.Element {
+export function MessageFooterComponent(
+  props: IMessageFootersProps
+): JSX.Element {
   const { message, model, registry } = props;
   const footer = registry.getFooter();
 

package/src/components/messages/header.tsx

@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Box, Typography } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+
+import { Avatar } from '../avatar';
+import { IChatMessage } from '../../types';
+
+const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
+const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
+
+/**
+ * The message header props.
+ */
+type ChatMessageHeaderProps = {
+  /**
+   * The chat message.
+   */
+  message: IChatMessage;
+};
+
+/**
+ * The message header component.
+ */
+export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
+  const [datetime, setDatetime] = useState<Record<number, string>>({});
+  const message = props.message;
+  const sender = message.sender;
+  /**
+   * Effect: update cached datetime strings upon receiving a new message.
+   */
+  useEffect(() => {
+    if (!datetime[message.time]) {
+      const newDatetime: Record<number, string> = {};
+      let datetime: string;
+      const currentDate = new Date();
+      const sameDay = (date: Date) =>
+        date.getFullYear() === currentDate.getFullYear() &&
+        date.getMonth() === currentDate.getMonth() &&
+        date.getDate() === currentDate.getDate();
+
+      const msgDate = new Date(message.time * 1000); // Convert message time to milliseconds
+
+      // Display only the time if the day of the message is the current one.
+      if (sameDay(msgDate)) {
+        // Use the browser's default locale
+        datetime = msgDate.toLocaleTimeString([], {
+          hour: 'numeric',
+          minute: '2-digit'
+        });
+      } else {
+        // Use the browser's default locale
+        datetime = msgDate.toLocaleString([], {
+          day: 'numeric',
+          month: 'numeric',
+          year: 'numeric',
+          hour: 'numeric',
+          minute: '2-digit'
+        });
+      }
+      newDatetime[message.time] = datetime;
+      setDatetime(newDatetime);
+    }
+  });
+
+  const avatar = message.stacked ? null : Avatar({ user: sender });
+
+  const name =
+    sender.display_name ?? sender.name ?? (sender.username || 'User undefined');
+
+  return (
+    <Box
+      className={MESSAGE_HEADER_CLASS}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        '& > :not(:last-child)': {
+          marginRight: 3
+        },
+        marginBottom: message.stacked ? '0px' : '12px'
+      }}
+    >
+      {avatar}
+      <Box
+        sx={{
+          display: 'flex',
+          flexGrow: 1,
+          flexWrap: 'wrap',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          {!message.stacked && (
+            <Typography
+              sx={{
+                fontWeight: 700,
+                color: 'var(--jp-ui-font-color1)',
+                paddingRight: '0.5em'
+              }}
+            >
+              {name}
+            </Typography>
+          )}
+          {(message.deleted || message.edited) && (
+            <Typography
+              sx={{
+                fontStyle: 'italic',
+                fontSize: 'var(--jp-content-font-size0)'
+              }}
+            >
+              {message.deleted ? '(message deleted)' : '(edited)'}
+            </Typography>
+          )}
+        </Box>
+        <Typography
+          className={MESSAGE_TIME_CLASS}
+          sx={{
+            fontSize: '0.8em',
+            color: 'var(--jp-ui-font-color2)',
+            fontWeight: 300
+          }}
+          title={message.raw_time ? 'Unverified time' : ''}
+        >
+          {`${datetime[message.time]}${message.raw_time ? '*' : ''}`}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}

package/src/components/messages/index.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './footer';
+export * from './header';
+export * from './message';
+export * from './message-renderer';
+export * from './messages';
+export * from './navigation';
+export * from './toolbar';
+export * from './welcome';
+export * from './writers';

package/src/components/messages/message-renderer.tsx

@@ -9,7 +9,7 @@ import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 import { CodeToolbar, CodeToolbarProps } from '../code-blocks/code-toolbar';
-import { MessageToolbar } from '../toolbar';
+import { MessageToolbar } from './toolbar';
 import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
 import { IChatModel } from '../../model';
 

package/src/components/messages/message.tsx

@@ -0,0 +1,156 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { PromiseDelegate } from '@lumino/coreutils';
+import React, { forwardRef, useEffect, useState } from 'react';
+
+import { MessageRenderer } from './message-renderer';
+import { BaseMessageProps } from './messages';
+import { AttachmentPreviewList } from '../attachments';
+import { ChatInput } from '../input';
+import { IInputModel, InputModel } from '../../input-model';
+import { IChatMessage } from '../../types';
+import { replaceSpanToMention } from '../../utils';
+
+/**
+ * The message component props.
+ */
+type ChatMessageProps = BaseMessageProps & {
+  /**
+   * The message to display.
+   */
+  message: IChatMessage;
+  /**
+   * The index of the message in the list.
+   */
+  index: number;
+  /**
+   * The promise to resolve when the message is rendered.
+   */
+  renderedPromise: PromiseDelegate<void>;
+};
+
+/**
+ * The message component body.
+ */
+export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
+  (props, ref): JSX.Element => {
+    const { message, model, rmRegistry } = props;
+    const [edit, setEdit] = useState<boolean>(false);
+    const [deleted, setDeleted] = useState<boolean>(false);
+    const [canEdit, setCanEdit] = useState<boolean>(false);
+    const [canDelete, setCanDelete] = useState<boolean>(false);
+
+    // Look if the message can be deleted or edited.
+    useEffect(() => {
+      // Init canDelete and canEdit state.
+      setDeleted(message.deleted ?? false);
+      if (model.user !== undefined && !message.deleted) {
+        if (model.user.username === message.sender.username) {
+          setCanEdit(model.updateMessage !== undefined);
+          setCanDelete(model.deleteMessage !== undefined);
+          return;
+        }
+        if (message.sender.bot) {
+          setCanDelete(model.deleteMessage !== undefined);
+        }
+      } else {
+        setCanEdit(false);
+        setCanDelete(false);
+      }
+    }, [model, message]);
+
+    // Create an input model only if the message is edited.
+    const startEdition = (): void => {
+      if (!canEdit) {
+        return;
+      }
+      let body = message.body;
+      message.mentions?.forEach(user => {
+        body = replaceSpanToMention(body, user);
+      });
+      const inputModel = new InputModel({
+        chatContext: model.createChatContext(),
+        onSend: (input: string, model?: IInputModel) =>
+          updateMessage(message.id, input, model),
+        onCancel: () => cancelEdition(),
+        value: body,
+        activeCellManager: model.activeCellManager,
+        selectionWatcher: model.selectionWatcher,
+        documentManager: model.documentManager,
+        config: {
+          sendWithShiftEnter: model.config.sendWithShiftEnter
+        },
+        attachments: message.attachments,
+        mentions: message.mentions
+      });
+      model.addEditionModel(message.id, inputModel);
+      setEdit(true);
+    };
+
+    // Cancel the current edition of the message.
+    const cancelEdition = (): void => {
+      model.getEditionModel(message.id)?.dispose();
+      setEdit(false);
+    };
+
+    // Update the content of the message.
+    const updateMessage = (
+      id: string,
+      input: string,
+      inputModel?: IInputModel
+    ): void => {
+      if (!canEdit || !inputModel) {
+        return;
+      }
+      // Update the message
+      const updatedMessage = { ...message };
+      updatedMessage.body = input;
+      updatedMessage.attachments = inputModel.attachments;
+      updatedMessage.mentions = inputModel.mentions;
+      model.updateMessage!(id, updatedMessage);
+      model.getEditionModel(message.id)?.dispose();
+      setEdit(false);
+    };
+
+    // Delete the message.
+    const deleteMessage = (id: string): void => {
+      if (!canDelete) {
+        return;
+      }
+      model.deleteMessage!(id);
+    };
+
+    // Empty if the message has been deleted.
+    return deleted ? (
+      <div ref={ref} data-index={props.index}></div>
+    ) : (
+      <div ref={ref} data-index={props.index}>
+        {edit && canEdit && model.getEditionModel(message.id) ? (
+          <ChatInput
+            onCancel={() => cancelEdition()}
+            model={model.getEditionModel(message.id)!}
+            chatCommandRegistry={props.chatCommandRegistry}
+            toolbarRegistry={props.inputToolbarRegistry}
+          />
+        ) : (
+          <MessageRenderer
+            rmRegistry={rmRegistry}
+            markdownStr={message.body}
+            model={model}
+            edit={canEdit ? startEdition : undefined}
+            delete={canDelete ? () => deleteMessage(message.id) : undefined}
+            rendered={props.renderedPromise}
+          />
+        )}
+        {message.attachments && !edit && (
+          // Display the attachments only if message is not edited, otherwise the
+          // input component display them.
+          <AttachmentPreviewList attachments={message.attachments} />
+        )}
+      </div>
+    );
+  }
+);

package/src/components/messages/messages.tsx

@@ -0,0 +1,218 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { Box } from '@mui/material';
+import clsx from 'clsx';
+import React, { useEffect, useState, useRef } from 'react';
+
+import { MessageFooterComponent } from './footer';
+import { ChatMessageHeader } from './header';
+import { ChatMessage } from './message';
+import { Navigation } from './navigation';
+import { WelcomeMessage } from './welcome';
+import { WritingUsersList } from './writers';
+import { IInputToolbarRegistry } from '../input';
+import { ScrollContainer } from '../scroll-container';
+import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
+import { IChatModel } from '../../model';
+import { IChatMessage, IUser } from '../../types';
+
+const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
+const MESSAGE_CLASS = 'jp-chat-message';
+const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
+
+/**
+ * The base components props.
+ */
+export type BaseMessageProps = {
+  /**
+   * The mime renderer registry.
+   */
+  rmRegistry: IRenderMimeRegistry;
+  /**
+   * The chat model.
+   */
+  model: IChatModel;
+  /**
+   * The chat commands registry.
+   */
+  chatCommandRegistry?: IChatCommandRegistry;
+  /**
+   * The input toolbar registry.
+   */
+  inputToolbarRegistry: IInputToolbarRegistry;
+  /**
+   * The footer registry.
+   */
+  messageFooterRegistry?: IMessageFooterRegistry;
+  /**
+   * The welcome message.
+   */
+  welcomeMessage?: string;
+};
+
+/**
+ * The messages list component.
+ */
+export function ChatMessages(props: BaseMessageProps): JSX.Element {
+  const { model } = props;
+  const [messages, setMessages] = useState<IChatMessage[]>(model.messages);
+  const refMsgBox = useRef<HTMLDivElement>(null);
+  const [currentWriters, setCurrentWriters] = useState<IUser[]>([]);
+  const [allRendered, setAllRendered] = useState<boolean>(false);
+
+  // The list of message DOM and their rendered promises.
+  const listRef = useRef<(HTMLDivElement | null)[]>([]);
+  const renderedPromise = useRef<PromiseDelegate<void>[]>([]);
+
+  /**
+   * Effect: fetch history and config on initial render
+   */
+  useEffect(() => {
+    async function fetchHistory() {
+      if (!model.getHistory) {
+        return;
+      }
+      model
+        .getHistory()
+        .then(history => setMessages(history.messages))
+        .catch(e => console.error(e));
+    }
+
+    fetchHistory();
+    setCurrentWriters([]);
+  }, [model]);
+
+  /**
+   * Effect: listen to chat messages.
+   */
+  useEffect(() => {
+    function handleChatEvents() {
+      setMessages([...model.messages]);
+    }
+
+    function handleWritersChange(_: IChatModel, writers: IChatModel.IWriter[]) {
+      setCurrentWriters(writers.map(writer => writer.user));
+    }
+
+    model.messagesUpdated.connect(handleChatEvents);
+    model.writersChanged?.connect(handleWritersChange);
+
+    return function cleanup() {
+      model.messagesUpdated.disconnect(handleChatEvents);
+      model.writersChanged?.disconnect(handleChatEvents);
+    };
+  }, [model]);
+
+  /**
+   * Observe the messages to update the current viewport and the unread messages.
+   */
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      // Used on first rendering, to ensure all the message as been rendered once.
+      if (!allRendered) {
+        Promise.all(renderedPromise.current.map(p => p.promise)).then(() => {
+          setAllRendered(true);
+        });
+      }
+
+      const unread = [...model.unreadMessages];
+      let unreadModified = false;
+      const inViewport = [...(model.messagesInViewport ?? [])];
+      entries.forEach(entry => {
+        const index = parseInt(entry.target.getAttribute('data-index') ?? '');
+        if (!isNaN(index)) {
+          const viewportIdx = inViewport.indexOf(index);
+          if (!entry.isIntersecting && viewportIdx !== -1) {
+            inViewport.splice(viewportIdx, 1);
+          } else if (entry.isIntersecting && viewportIdx === -1) {
+            inViewport.push(index);
+          }
+          if (unread.length) {
+            const unreadIdx = unread.indexOf(index);
+            if (unreadIdx !== -1 && entry.isIntersecting) {
+              unread.splice(unreadIdx, 1);
+              unreadModified = true;
+            }
+          }
+        }
+      });
+
+      props.model.messagesInViewport = inViewport;
+
+      // Ensure that all messages are rendered before updating unread messages, otherwise
+      // it can lead to wrong assumption , because more message are in the viewport
+      // before they are rendered.
+      if (allRendered && unreadModified) {
+        model.unreadMessages = unread;
+      }
+    });
+
+    /**
+     * Observe the messages.
+     */
+    listRef.current.forEach(item => {
+      if (item) {
+        observer.observe(item);
+      }
+    });
+
+    return () => {
+      listRef.current.forEach(item => {
+        if (item) {
+          observer.unobserve(item);
+        }
+      });
+    };
+  }, [messages, allRendered]);
+
+  return (
+    <>
+      <ScrollContainer sx={{ flexGrow: 1 }}>
+        {props.welcomeMessage && (
+          <WelcomeMessage
+            rmRegistry={props.rmRegistry}
+            content={props.welcomeMessage}
+          />
+        )}
+        <Box ref={refMsgBox} className={clsx(MESSAGES_BOX_CLASS)}>
+          {messages.map((message, i) => {
+            renderedPromise.current[i] = new PromiseDelegate();
+            return (
+              // extra div needed to ensure each bubble is on a new line
+              <Box
+                key={i}
+                className={clsx(
+                  MESSAGE_CLASS,
+                  message.stacked ? MESSAGE_STACKED_CLASS : ''
+                )}
+              >
+                <ChatMessageHeader message={message} />
+                <ChatMessage
+                  {...props}
+                  message={message}
+                  index={i}
+                  renderedPromise={renderedPromise.current[i]}
+                  ref={el => (listRef.current[i] = el)}
+                />
+                {props.messageFooterRegistry && (
+                  <MessageFooterComponent
+                    registry={props.messageFooterRegistry}
+                    message={message}
+                    model={model}
+                  />
+                )}
+              </Box>
+            );
+          })}
+        </Box>
+      </ScrollContainer>
+      <WritingUsersList writers={currentWriters}></WritingUsersList>
+      <Navigation {...props} refMsgBox={refMsgBox} allRendered={allRendered} />
+    </>
+  );
+}