@jupyter/chat 0.13.0 → 0.14.0

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} />
+    </>
+  );
+}

package/src/components/messages/navigation.tsx

@@ -0,0 +1,167 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Button } from '@jupyter/react-components';
+import {
+  LabIcon,
+  caretDownEmptyIcon,
+  classes
+} from '@jupyterlab/ui-components';
+import React, { useEffect, useState } from 'react';
+
+import { BaseMessageProps } from './messages';
+import { IChatModel } from '../../model';
+
+const NAVIGATION_BUTTON_CLASS = 'jp-chat-navigation';
+const NAVIGATION_UNREAD_CLASS = 'jp-chat-navigation-unread';
+const NAVIGATION_TOP_CLASS = 'jp-chat-navigation-top';
+const NAVIGATION_BOTTOM_CLASS = 'jp-chat-navigation-bottom';
+
+/**
+ * The navigation component props.
+ */
+type NavigationProps = BaseMessageProps & {
+  /**
+   * The reference to the messages container.
+   */
+  refMsgBox: React.RefObject<HTMLDivElement>;
+  /**
+   * Whether all the messages has been rendered once on first display.
+   */
+  allRendered: boolean;
+};
+
+/**
+ * The navigation component, to navigate to unread messages.
+ */
+export function Navigation(props: NavigationProps): JSX.Element {
+  const { model } = props;
+  const [lastInViewport, setLastInViewport] = useState<boolean>(true);
+  const [unreadBefore, setUnreadBefore] = useState<number | null>(null);
+  const [unreadAfter, setUnreadAfter] = useState<number | null>(null);
+
+  const gotoMessage = (msgIdx: number, alignToTop: boolean = true) => {
+    props.refMsgBox.current?.children.item(msgIdx)?.scrollIntoView(alignToTop);
+  };
+
+  // Listen for change in unread messages, and find the first unread message before or
+  // after the current viewport, to display navigation buttons.
+  useEffect(() => {
+    // Do not attempt to display navigation until messages are rendered, it can lead to
+    // wrong assumption, because more messages are in the viewport before they are
+    // rendered.
+    if (!props.allRendered) {
+      return;
+    }
+
+    const unreadChanged = (model: IChatModel, unreadIndexes: number[]) => {
+      const viewport = model.messagesInViewport;
+      if (!viewport) {
+        return;
+      }
+
+      // Initialize the next values with the current values if there still relevant.
+      let before =
+        unreadBefore !== null &&
+        unreadIndexes.includes(unreadBefore) &&
+        unreadBefore < Math.min(...viewport)
+          ? unreadBefore
+          : null;
+
+      let after =
+        unreadAfter !== null &&
+        unreadIndexes.includes(unreadAfter) &&
+        unreadAfter > Math.max(...viewport)
+          ? unreadAfter
+          : null;
+
+      unreadIndexes.forEach(unread => {
+        if (viewport?.includes(unread)) {
+          return;
+        }
+        if (unread < (before ?? Math.min(...viewport))) {
+          before = unread;
+        } else if (
+          unread > Math.max(...viewport) &&
+          unread < (after ?? model.messages.length)
+        ) {
+          after = unread;
+        }
+      });
+
+      setUnreadBefore(before);
+      setUnreadAfter(after);
+    };
+
+    model.unreadChanged?.connect(unreadChanged);
+
+    unreadChanged(model, model.unreadMessages);
+
+    // Move to the last the message after all the messages have been first rendered.
+    gotoMessage(model.messages.length - 1, false);
+
+    return () => {
+      model.unreadChanged?.disconnect(unreadChanged);
+    };
+  }, [model, props.allRendered]);
+
+  // Listen for change in the viewport, to add a navigation button if the last is not
+  // in viewport.
+  useEffect(() => {
+    const viewportChanged = (model: IChatModel, viewport: number[]) => {
+      setLastInViewport(
+        model.messages.length === 0 ||
+          viewport.includes(model.messages.length - 1)
+      );
+    };
+
+    model.viewportChanged?.connect(viewportChanged);
+
+    viewportChanged(model, model.messagesInViewport ?? []);
+
+    return () => {
+      model.viewportChanged?.disconnect(viewportChanged);
+    };
+  }, [model]);
+
+  return (
+    <>
+      {unreadBefore !== null && (
+        <Button
+          className={`${NAVIGATION_BUTTON_CLASS} ${NAVIGATION_UNREAD_CLASS} ${NAVIGATION_TOP_CLASS}`}
+          onClick={() => gotoMessage!(unreadBefore)}
+          title={'Go to unread messages'}
+        >
+          <LabIcon.resolveReact
+            display={'flex'}
+            icon={caretDownEmptyIcon}
+            iconClass={classes('jp-Icon')}
+          />
+        </Button>
+      )}
+      {(unreadAfter !== null || !lastInViewport) && (
+        <Button
+          className={`${NAVIGATION_BUTTON_CLASS} ${unreadAfter !== null ? NAVIGATION_UNREAD_CLASS : ''} ${NAVIGATION_BOTTOM_CLASS}`}
+          onClick={
+            unreadAfter === null
+              ? () => gotoMessage(model.messages.length - 1, false)
+              : () => gotoMessage(unreadAfter)
+          }
+          title={
+            unreadAfter !== null
+              ? 'Go to unread messages'
+              : 'Go to last message'
+          }
+        >
+          <LabIcon.resolveReact
+            display={'flex'}
+            icon={caretDownEmptyIcon}
+            iconClass={classes('jp-Icon')}
+          />
+        </Button>
+      )}
+    </>
+  );
+}

package/src/components/messages/welcome.tsx

@@ -5,6 +5,7 @@
 
 import { classes } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef } from 'react';
+
 import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
 
 const WELCOME_MESSAGE_CLASS = 'jp-chat-welcome-message';