@jupyter/chat 0.1.0 → 0.3.0

package/src/components/chat-messages.tsx

@@ -3,55 +3,177 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { Button } from '@jupyter/react-components';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import {
+  LabIcon,
+  caretDownEmptyIcon,
+  classes
+} from '@jupyterlab/ui-components';
 import { Avatar, Box, Typography } from '@mui/material';
 import type { SxProps, Theme } from '@mui/material';
 import clsx from 'clsx';
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 import { ChatInput } from './chat-input';
 import { RendermimeMarkdown } from './rendermime-markdown';
+import { ScrollContainer } from './scroll-container';
 import { IChatModel } from '../model';
-import { IChatMessage, IUser } from '../types';
+import { IChatMessage } from '../types';
 
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_CLASS = 'jp-chat-message';
+const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
 const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
 const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
+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 base components props.
+ */
 type BaseMessageProps = {
   rmRegistry: IRenderMimeRegistry;
   model: IChatModel;
 };
 
-type ChatMessageProps = BaseMessageProps & {
-  message: IChatMessage;
-};
+/**
+ * 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 inViewport = useRef<number[]>([]);
 
-type ChatMessagesProps = BaseMessageProps & {
-  messages: IChatMessage[];
-};
+  // The intersection observer that listen to all the message visibility.
+  const observerRef = useRef<IntersectionObserver>(
+    new IntersectionObserver(viewportChange)
+  );
+
+  /**
+   * 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();
+  }, [model]);
+
+  /**
+   * Effect: listen to chat messages.
+   */
+  useEffect(() => {
+    function handleChatEvents() {
+      setMessages([...model.messages]);
+    }
+
+    model.messagesUpdated.connect(handleChatEvents);
+    return function cleanup() {
+      model.messagesUpdated.disconnect(handleChatEvents);
+    };
+  }, [model]);
+
+  /**
+   * Function called when a message enter or leave the viewport.
+   */
+  function viewportChange(entries: IntersectionObserverEntry[]) {
+    const unread = [...model.unreadMessages];
+    let unreadModified = false;
+    entries.forEach(entry => {
+      const index = parseInt(entry.target.getAttribute('data-index') ?? '');
+      if (!isNaN(index)) {
+        if (unread.length) {
+          const unreadIdx = unread.indexOf(index);
+          if (unreadIdx !== -1 && entry.isIntersecting) {
+            unread.splice(unreadIdx, 1);
+            unreadModified = true;
+          }
+        }
+        const viewportIdx = inViewport.current.indexOf(index);
+        if (!entry.isIntersecting && viewportIdx !== -1) {
+          inViewport.current.splice(viewportIdx, 1);
+        } else if (entry.isIntersecting && viewportIdx === -1) {
+          inViewport.current.push(index);
+        }
+      }
+    });
+
+    props.model.messagesInViewport = inViewport.current;
+    if (unreadModified) {
+      props.model.unreadMessages = unread;
+    }
 
-export type ChatMessageHeaderProps = IUser & {
-  timestamp: number;
-  rawTime?: boolean;
-  deleted?: boolean;
-  edited?: boolean;
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }
+
+  return (
+    <>
+      <ScrollContainer sx={{ flexGrow: 1 }}>
+        <Box ref={refMsgBox} className={clsx(MESSAGES_BOX_CLASS)}>
+          {messages.map((message, i) => {
+            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}
+                  observer={observerRef.current}
+                  index={i}
+                />
+              </Box>
+            );
+          })}
+        </Box>
+      </ScrollContainer>
+      <Navigation {...props} refMsgBox={refMsgBox} />
+    </>
+  );
+}
+
+/**
+ * The message header props.
+ */
+type ChatMessageHeaderProps = {
+  message: IChatMessage;
   sx?: SxProps<Theme>;
 };
 
+/**
+ * The message header component.
+ */
 export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
   const [datetime, setDatetime] = useState<Record<number, string>>({});
   const sharedStyles: SxProps<Theme> = {
     height: '24px',
     width: '24px'
   };
-
+  const message = props.message;
+  const sender = message.sender;
   /**
    * Effect: update cached datetime strings upon receiving a new message.
    */
   useEffect(() => {
-    if (!datetime[props.timestamp]) {
+    if (!datetime[message.time]) {
       const newDatetime: Record<number, string> = {};
       let datetime: string;
       const currentDate = new Date();
@@ -60,7 +182,7 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
         date.getMonth() === currentDate.getMonth() &&
         date.getDate() === currentDate.getDate();
 
-      const msgDate = new Date(props.timestamp * 1000); // Convert message time to milliseconds
+      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)) {
@@ -79,21 +201,21 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
           minute: '2-digit'
         });
       }
-      newDatetime[props.timestamp] = datetime;
+      newDatetime[message.time] = datetime;
       setDatetime(newDatetime);
     }
   });
 
-  const bgcolor = props.color;
-  const avatar = props.avatar_url ? (
+  const bgcolor = sender.color;
+  const avatar = message.stacked ? null : sender.avatar_url ? (
     <Avatar
       sx={{
         ...sharedStyles,
         ...(bgcolor && { bgcolor })
       }}
-      src={props.avatar_url}
+      src={sender.avatar_url}
     ></Avatar>
-  ) : props.initials ? (
+  ) : sender.initials ? (
     <Avatar
       sx={{
         ...sharedStyles,
@@ -106,13 +228,13 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
           color: 'var(--jp-ui-inverse-font-color1)'
         }}
       >
-        {props.initials}
+        {sender.initials}
       </Typography>
     </Avatar>
   ) : null;
 
   const name =
-    props.display_name ?? props.name ?? (props.username || 'User undefined');
+    sender.display_name ?? sender.name ?? (sender.username || 'User undefined');
 
   return (
     <Box
@@ -123,6 +245,7 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
         '& > :not(:last-child)': {
           marginRight: 3
         },
+        marginBottom: message.stacked ? '0px' : '12px',
         ...props.sx
       }}
     >
@@ -137,20 +260,25 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Typography
-            sx={{ fontWeight: 700, color: 'var(--jp-ui-font-color1)' }}
-          >
-            {name}
-          </Typography>
-          {(props.deleted || props.edited) && (
+          {!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)',
-                paddingLeft: '0.5em'
+                fontSize: 'var(--jp-content-font-size0)'
               }}
             >
-              {props.deleted ? '(message deleted)' : '(edited)'}
+              {message.deleted ? '(message deleted)' : '(edited)'}
             </Typography>
           )}
         </Box>
@@ -161,9 +289,9 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
             color: 'var(--jp-ui-font-color2)',
             fontWeight: 300
           }}
-          title={props.rawTime ? 'Unverified time' : ''}
+          title={message.raw_time ? 'Unverified time' : ''}
         >
-          {`${datetime[props.timestamp]}${props.rawTime ? '*' : ''}`}
+          {`${datetime[message.time]}${message.raw_time ? '*' : ''}`}
         </Typography>
       </Box>
     </Box>
@@ -171,74 +299,70 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
 }
 
 /**
- * The messages list UI.
+ * The message component props.
  */
-export function ChatMessages(props: ChatMessagesProps): JSX.Element {
-  return (
-    <Box
-      sx={{
-        '& > :not(:last-child)': {
-          borderBottom: '1px solid var(--jp-border-color2)'
-        }
-      }}
-      className={clsx(MESSAGES_BOX_CLASS)}
-    >
-      {props.messages.map((message, i) => {
-        let sender: IUser;
-        if (typeof message.sender === 'string') {
-          sender = { username: message.sender };
-        } else {
-          sender = message.sender;
-        }
-        return (
-          // extra div needed to ensure each bubble is on a new line
-          <Box
-            key={i}
-            sx={{ padding: '1em 1em 0 1em' }}
-            className={clsx(MESSAGE_CLASS)}
-          >
-            <ChatMessageHeader
-              {...sender}
-              timestamp={message.time}
-              rawTime={message.raw_time}
-              deleted={message.deleted}
-              edited={message.edited}
-              sx={{ marginBottom: 3 }}
-            />
-            <ChatMessage {...props} message={message} />
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
+type ChatMessageProps = BaseMessageProps & {
+  /**
+   * The message to display.
+   */
+  message: IChatMessage;
+  /**
+   * The index of the message in the list.
+   */
+  index: number;
+  /**
+   * The intersection observer for all the messages.
+   */
+  observer: IntersectionObserver | null;
+};
 
 /**
- * the message UI.
+ * The message component body.
  */
 export function ChatMessage(props: ChatMessageProps): JSX.Element {
   const { message, model, rmRegistry } = props;
-  let canEdit = false;
-  let canDelete = false;
-  if (model.user !== undefined && !message.deleted) {
-    const username =
-      typeof message.sender === 'string'
-        ? message.sender
-        : message.sender.username;
-
-    if (model.user.username === username && model.updateMessage !== undefined) {
-      canEdit = true;
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [edit, setEdit] = useState<boolean>(false);
+  const [deleted, setDeleted] = useState<boolean>(false);
+  const [canEdit, setCanEdit] = useState<boolean>(false);
+  const [canDelete, setCanDelete] = useState<boolean>(false);
+
+  // Add the current message to the observer, to actualize viewport and unread messages.
+  useEffect(() => {
+    if (elementRef.current === null) {
+      return;
     }
-    if (model.user.username === username && model.deleteMessage !== undefined) {
-      canDelete = true;
+
+    // If the observer is defined, let's observe the message.
+    props.observer?.observe(elementRef.current);
+
+    return () => {
+      if (elementRef.current !== null) {
+        props.observer?.unobserve(elementRef.current);
+      }
+    };
+  }, [model]);
+
+  // Look if the message can be deleted or edited.
+  useEffect(() => {
+    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);
+      }
+    } else {
+      setCanEdit(false);
+      setCanDelete(false);
     }
-  }
-  const [edit, setEdit] = useState<boolean>(false);
+  }, [model, message]);
 
+  // Cancel the current edition of the message.
   const cancelEdition = (): void => {
     setEdit(false);
   };
 
+  // Update the content of the message.
   const updateMessage = (id: string, input: string): void => {
     if (!canEdit) {
       return;
@@ -250,30 +374,31 @@ export function ChatMessage(props: ChatMessageProps): JSX.Element {
     setEdit(false);
   };
 
+  // Delete the message.
   const deleteMessage = (id: string): void => {
     if (!canDelete) {
       return;
     }
-    // Delete the message
     model.deleteMessage!(id);
   };
 
-  // Empty if the message has been deleted
-  return message.deleted ? (
-    <></>
+  // Empty if the message has been deleted.
+  return deleted ? (
+    <div ref={elementRef} data-index={props.index}></div>
   ) : (
-    <div>
+    <div ref={elementRef} data-index={props.index}>
       {edit && canEdit ? (
         <ChatInput
           value={message.body}
           onSend={(input: string) => updateMessage(message.id, input)}
           onCancel={() => cancelEdition()}
-          sendWithShiftEnter={model.config.sendWithShiftEnter ?? false}
+          model={model}
         />
       ) : (
         <RendermimeMarkdown
           rmRegistry={rmRegistry}
           markdownStr={message.body}
+          model={model}
           edit={canEdit ? () => setEdit(true) : undefined}
           delete={canDelete ? () => deleteMessage(message.id) : undefined}
         />
@@ -281,3 +406,140 @@ export function ChatMessage(props: ChatMessageProps): JSX.Element {
     </div>
   );
 }
+
+/**
+ * The navigation component props.
+ */
+type NavigationProps = BaseMessageProps & {
+  /**
+   * The reference to the messages container.
+   */
+  refMsgBox: React.RefObject<HTMLDivElement>;
+};
+
+/**
+ * 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) => {
+    props.refMsgBox.current?.children.item(msgIdx)?.scrollIntoView();
+  };
+
+  // Listen for change in unread messages, and find the first unread message before or
+  // after the current viewport, to display navigation buttons.
+  useEffect(() => {
+    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 first the unread message or to last message on first rendering.
+    if (model.unreadMessages.length) {
+      gotoMessage(Math.min(...model.unreadMessages));
+    } else {
+      gotoMessage(model.messages.length - 1);
+    }
+
+    return () => {
+      model.unreadChanged?.disconnect(unreadChanged);
+    };
+  }, [model]);
+
+  // 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(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={() =>
+            gotoMessage!(
+              unreadAfter !== null ? unreadAfter : model.messages.length - 1
+            )
+          }
+          title={
+            unreadAfter !== null
+              ? 'Go to unread messages'
+              : 'Go to last message'
+          }
+        >
+          <LabIcon.resolveReact
+            display={'flex'}
+            icon={caretDownEmptyIcon}
+            iconClass={classes('jp-Icon')}
+          />
+        </Button>
+      )}
+    </>
+  );
+}