@jupyter/chat 0.1.0 → 0.2.0

package/lib/components/chat-input.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { SxProps, Theme } from '@mui/material';
+import { IAutocompletionRegistry } from '../registry';
 export declare function ChatInput(props: ChatInput.IProps): JSX.Element;
 /**
  * The chat input namespace.
@@ -29,5 +30,13 @@ export declare namespace ChatInput {
          * Custom mui/material styles.
          */
         sx?: SxProps<Theme>;
+        /**
+         * Autocompletion properties.
+         */
+        autocompletionRegistry?: IAutocompletionRegistry;
+        /**
+         * Autocompletion name.
+         */
+        autocompletionName?: string;
     }
 }

package/lib/components/chat-input.js

@@ -2,19 +2,79 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { useState } from 'react';
-import { Box, TextField, IconButton, InputAdornment } from '@mui/material';
+import React, { useEffect, useRef, useState } from 'react';
+import { Autocomplete, Box, IconButton, InputAdornment, TextField } from '@mui/material';
 import { Send, Cancel } from '@mui/icons-material';
 import clsx from 'clsx';
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 export function ChatInput(props) {
+    var _a;
+    const { autocompletionName, autocompletionRegistry, sendWithShiftEnter } = props;
+    const autocompletion = useRef();
     const [input, setInput] = useState(props.value || '');
+    // The autocomplete commands options.
+    const [commandOptions, setCommandOptions] = useState([]);
+    // whether any option is highlighted in the slash command autocomplete
+    const [highlighted, setHighlighted] = useState(false);
+    // controls whether the slash command autocomplete is open
+    const [open, setOpen] = useState(false);
+    /**
+     * Effect: fetch the list of available autocomplete commands.
+     */
+    useEffect(() => {
+        if (autocompletionRegistry === undefined) {
+            return;
+        }
+        autocompletion.current = autocompletionName
+            ? autocompletionRegistry.get(autocompletionName)
+            : autocompletionRegistry.getDefaultCompletion();
+        if (autocompletion.current === undefined) {
+            return;
+        }
+        if (Array.isArray(autocompletion.current.commands)) {
+            setCommandOptions(autocompletion.current.commands);
+        }
+        else if (typeof autocompletion.current.commands === 'function') {
+            autocompletion.current
+                .commands()
+                .then((commands) => {
+                setCommandOptions(commands);
+            });
+        }
+    }, []);
+    /**
+     * Effect: Open the autocomplete when the user types the 'opener' string into an
+     * empty chat input. Close the autocomplete and reset the last selected value when
+     * the user clears the chat input.
+     */
+    useEffect(() => {
+        var _a, _b;
+        if (!((_a = autocompletion.current) === null || _a === void 0 ? void 0 : _a.opener)) {
+            return;
+        }
+        if (input === ((_b = autocompletion.current) === null || _b === void 0 ? void 0 : _b.opener)) {
+            setOpen(true);
+            return;
+        }
+        if (input === '') {
+            setOpen(false);
+            return;
+        }
+    }, [input]);
     function handleKeyDown(event) {
+        if (event.key !== 'Enter') {
+            return;
+        }
+        // do not send the message if the user was selecting a suggested command from the
+        // Autocomplete component.
+        if (highlighted) {
+            return;
+        }
         if (event.key === 'Enter' &&
-            ((props.sendWithShiftEnter && event.shiftKey) ||
-                (!props.sendWithShiftEnter && !event.shiftKey))) {
+            ((sendWithShiftEnter && event.shiftKey) ||
+                (!sendWithShiftEnter && !event.shiftKey))) {
             onSend();
             event.stopPropagation();
             event.preventDefault();
@@ -47,14 +107,55 @@ export function ChatInput(props) {
         React.createElement("b", null, "Enter"),
         " to add a new line"));
     return (React.createElement(Box, { sx: props.sx, className: clsx(INPUT_BOX_CLASS) },
-        React.createElement(Box, { sx: { display: 'flex' } },
-            React.createElement(TextField, { value: input, onChange: e => setInput(e.target.value), fullWidth: true, variant: "outlined", multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", InputProps: {
+        React.createElement(Autocomplete, { options: commandOptions, value: props.value, open: open, autoHighlight: true, freeSolo: true, 
+            // ensure the autocomplete popup always renders on top
+            componentsProps: {
+                popper: {
+                    placement: 'top'
+                },
+                paper: {
+                    sx: {
+                        border: '1px solid lightgray'
+                    }
+                }
+            }, ListboxProps: {
+                sx: {
+                    '& .MuiAutocomplete-option': {
+                        padding: 2
+                    }
+                }
+            }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "outlined", multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", InputProps: {
+                    ...params.InputProps,
                     endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                        props.onCancel && (React.createElement(IconButton, { size: "small", color: "primary", onClick: onCancel, disabled: !input.trim().length, title: 'Cancel edition', className: clsx(CANCEL_BUTTON_CLASS) },
+                        props.onCancel && (React.createElement(IconButton, { size: "small", color: "primary", onClick: onCancel, title: 'Cancel edition', className: clsx(CANCEL_BUTTON_CLASS) },
                             React.createElement(Cancel, null))),
-                        React.createElement(IconButton, { size: "small", color: "primary", onClick: onSend, disabled: !input.trim().length, title: `Send message ${props.sendWithShiftEnter ? '(SHIFT+ENTER)' : '(ENTER)'}`, className: clsx(SEND_BUTTON_CLASS) },
+                        React.createElement(IconButton, { size: "small", color: "primary", onClick: onSend, disabled: props.onCancel
+                                ? input === props.value
+                                : !input.trim().length, title: `Send message ${sendWithShiftEnter ? '(SHIFT+ENTER)' : '(ENTER)'}`, className: clsx(SEND_BUTTON_CLASS) },
                             React.createElement(Send, null))))
                 }, FormHelperTextProps: {
                     sx: { marginLeft: 'auto', marginRight: 0 }
-                }, helperText: input.length > 2 ? helperText : ' ' }))));
+                }, helperText: input.length > 2 ? helperText : ' ' })), ...(_a = autocompletion.current) === null || _a === void 0 ? void 0 : _a.props, inputValue: input, onInputChange: (_, newValue) => {
+                setInput(newValue);
+            }, onHighlightChange: 
+            /**
+             * On highlight change: set `highlighted` to whether an option is
+             * highlighted by the user.
+             *
+             * This isn't called when an option is selected for some reason, so we
+             * need to call `setHighlighted(false)` in `onClose()`.
+             */
+            (_, highlightedOption) => {
+                setHighlighted(!!highlightedOption);
+            }, onClose: 
+            /**
+             * On close: set `highlighted` to `false` and close the popup by
+             * setting `open` to `false`.
+             */
+            () => {
+                setHighlighted(false);
+                setOpen(false);
+            }, 
+            // hide default extra right padding in the text field
+            disableClearable: true })));
 }

package/lib/components/chat-messages.d.ts

@@ -1,32 +1,62 @@
-/// <reference types="react" />
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import type { SxProps, Theme } from '@mui/material';
+import React from 'react';
 import { IChatModel } from '../model';
-import { IChatMessage, IUser } from '../types';
+import { IChatMessage } from '../types';
+/**
+ * The base components props.
+ */
 type BaseMessageProps = {
     rmRegistry: IRenderMimeRegistry;
     model: IChatModel;
 };
-type ChatMessageProps = BaseMessageProps & {
+/**
+ * The messages list component.
+ */
+export declare function ChatMessages(props: BaseMessageProps): JSX.Element;
+/**
+ * The message header props.
+ */
+type ChatMessageHeaderProps = {
     message: IChatMessage;
-};
-type ChatMessagesProps = BaseMessageProps & {
-    messages: IChatMessage[];
-};
-export type ChatMessageHeaderProps = IUser & {
-    timestamp: number;
-    rawTime?: boolean;
-    deleted?: boolean;
-    edited?: boolean;
     sx?: SxProps<Theme>;
 };
+/**
+ * The message header component.
+ */
 export declare function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element;
 /**
- * The messages list UI.
+ * The message component props.
  */
-export declare function ChatMessages(props: ChatMessagesProps): JSX.Element;
+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 declare function ChatMessage(props: ChatMessageProps): JSX.Element;
+/**
+ * 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 declare function Navigation(props: NavigationProps): JSX.Element;
 export {};

package/lib/components/chat-messages.js

@@ -2,15 +2,109 @@
  * 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 { Avatar, Box, Typography } 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';
 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 messages list component.
+ */
+export function ChatMessages(props) {
+    const { model } = props;
+    const [messages, setMessages] = useState(model.messages);
+    const refMsgBox = useRef(null);
+    const inViewport = useRef([]);
+    // The intersection observer that listen to all the message visibility.
+    const observerRef = useRef(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) {
+        const unread = [...model.unreadMessages];
+        let unreadModified = false;
+        entries.forEach(entry => {
+            var _a;
+            const index = parseInt((_a = entry.target.getAttribute('data-index')) !== null && _a !== void 0 ? _a : '');
+            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;
+        }
+        return () => {
+            var _a;
+            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ScrollContainer, { sx: { flexGrow: 1 } },
+            React.createElement(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
+                React.createElement(Box, { key: i, className: clsx(MESSAGE_CLASS, message.stacked ? MESSAGE_STACKED_CLASS : '') },
+                    React.createElement(ChatMessageHeader, { message: message }),
+                    React.createElement(ChatMessage, { ...props, message: message, observer: observerRef.current, index: i })));
+            }))),
+        React.createElement(Navigation, { ...props, refMsgBox: refMsgBox })));
+}
+/**
+ * The message header component.
+ */
 export function ChatMessageHeader(props) {
     var _a, _b;
     const [datetime, setDatetime] = useState({});
@@ -18,18 +112,20 @@ export function ChatMessageHeader(props) {
         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 = {};
             let datetime;
             const currentDate = new Date();
             const sameDay = (date) => date.getFullYear() === currentDate.getFullYear() &&
                 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)) {
                 // Use the browser's default locale
@@ -48,29 +144,30 @@ export function ChatMessageHeader(props) {
                     minute: '2-digit'
                 });
             }
-            newDatetime[props.timestamp] = datetime;
+            newDatetime[message.time] = datetime;
             setDatetime(newDatetime);
         }
     });
-    const bgcolor = props.color;
-    const avatar = props.avatar_url ? (React.createElement(Avatar, { sx: {
+    const bgcolor = sender.color;
+    const avatar = message.stacked ? null : sender.avatar_url ? (React.createElement(Avatar, { sx: {
             ...sharedStyles,
             ...(bgcolor && { bgcolor })
-        }, src: props.avatar_url })) : props.initials ? (React.createElement(Avatar, { sx: {
+        }, src: sender.avatar_url })) : sender.initials ? (React.createElement(Avatar, { sx: {
             ...sharedStyles,
             ...(bgcolor && { bgcolor })
         } },
         React.createElement(Typography, { sx: {
                 fontSize: 'var(--jp-ui-font-size1)',
                 color: 'var(--jp-ui-inverse-font-color1)'
-            } }, props.initials))) : null;
-    const name = (_b = (_a = props.display_name) !== null && _a !== void 0 ? _a : props.name) !== null && _b !== void 0 ? _b : (props.username || 'User undefined');
+            } }, sender.initials))) : null;
+    const name = (_b = (_a = sender.display_name) !== null && _a !== void 0 ? _a : sender.name) !== null && _b !== void 0 ? _b : (sender.username || 'User undefined');
     return (React.createElement(Box, { className: MESSAGE_HEADER_CLASS, sx: {
             display: 'flex',
             alignItems: 'center',
             '& > :not(:last-child)': {
                 marginRight: 3
             },
+            marginBottom: message.stacked ? '0px' : '12px',
             ...props.sx
         } },
         avatar,
@@ -82,64 +179,67 @@ export function ChatMessageHeader(props) {
                 alignItems: 'center'
             } },
             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-                React.createElement(Typography, { sx: { fontWeight: 700, color: 'var(--jp-ui-font-color1)' } }, name),
-                (props.deleted || props.edited) && (React.createElement(Typography, { sx: {
+                !message.stacked && (React.createElement(Typography, { sx: {
+                        fontWeight: 700,
+                        color: 'var(--jp-ui-font-color1)',
+                        paddingRight: '0.5em'
+                    } }, name)),
+                (message.deleted || message.edited) && (React.createElement(Typography, { sx: {
                         fontStyle: 'italic',
-                        fontSize: 'var(--jp-content-font-size0)',
-                        paddingLeft: '0.5em'
-                    } }, props.deleted ? '(message deleted)' : '(edited)'))),
+                        fontSize: 'var(--jp-content-font-size0)'
+                    } }, message.deleted ? '(message deleted)' : '(edited)'))),
             React.createElement(Typography, { className: MESSAGE_TIME_CLASS, sx: {
                     fontSize: '0.8em',
                     color: 'var(--jp-ui-font-color2)',
                     fontWeight: 300
-                }, title: props.rawTime ? 'Unverified time' : '' }, `${datetime[props.timestamp]}${props.rawTime ? '*' : ''}`))));
+                }, title: message.raw_time ? 'Unverified time' : '' }, `${datetime[message.time]}${message.raw_time ? '*' : ''}`))));
 }
 /**
- * The messages list UI.
- */
-export function ChatMessages(props) {
-    return (React.createElement(Box, { sx: {
-            '& > :not(:last-child)': {
-                borderBottom: '1px solid var(--jp-border-color2)'
-            }
-        }, className: clsx(MESSAGES_BOX_CLASS) }, props.messages.map((message, i) => {
-        let sender;
-        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
-        React.createElement(Box, { key: i, sx: { padding: '1em 1em 0 1em' }, className: clsx(MESSAGE_CLASS) },
-            React.createElement(ChatMessageHeader, { ...sender, timestamp: message.time, rawTime: message.raw_time, deleted: message.deleted, edited: message.edited, sx: { marginBottom: 3 } }),
-            React.createElement(ChatMessage, { ...props, message: message })));
-    })));
-}
-/**
- * the message UI.
+ * The message component body.
  */
 export function ChatMessage(props) {
     var _a;
     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(null);
+    const [edit, setEdit] = useState(false);
+    const [deleted, setDeleted] = useState(false);
+    const [canEdit, setCanEdit] = useState(false);
+    const [canDelete, setCanDelete] = useState(false);
+    // Add the current message to the observer, to actualize viewport and unread messages.
+    useEffect(() => {
+        var _a;
+        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.
+        (_a = props.observer) === null || _a === void 0 ? void 0 : _a.observe(elementRef.current);
+        return () => {
+            var _a;
+            if (elementRef.current !== null) {
+                (_a = props.observer) === null || _a === void 0 ? void 0 : _a.unobserve(elementRef.current);
+            }
+        };
+    }, [model]);
+    // Look if the message can be deleted or edited.
+    useEffect(() => {
+        var _a;
+        setDeleted((_a = message.deleted) !== null && _a !== void 0 ? _a : false);
+        if (model.user !== undefined && !message.deleted) {
+            if (model.user.username === message.sender.username) {
+                setCanEdit(model.updateMessage !== undefined);
+                setCanDelete(model.deleteMessage !== undefined);
+            }
         }
-    }
-    const [edit, setEdit] = useState(false);
+        else {
+            setCanEdit(false);
+            setCanDelete(false);
+        }
+    }, [model, message]);
+    // Cancel the current edition of the message.
     const cancelEdition = () => {
         setEdit(false);
     };
+    // Update the content of the message.
     const updateMessage = (id, input) => {
         if (!canEdit) {
             return;
@@ -150,13 +250,96 @@ export function ChatMessage(props) {
         model.updateMessage(id, updatedMessage);
         setEdit(false);
     };
+    // Delete the message.
     const deleteMessage = (id) => {
         if (!canDelete) {
             return;
         }
-        // Delete the message
         model.deleteMessage(id);
     };
-    // Empty if the message has been deleted
-    return message.deleted ? (React.createElement(React.Fragment, null)) : (React.createElement("div", null, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), sendWithShiftEnter: (_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false })) : (React.createElement(RendermimeMarkdown, { rmRegistry: rmRegistry, markdownStr: message.body, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined }))));
+    // Empty if the message has been deleted.
+    return deleted ? (React.createElement("div", { ref: elementRef, "data-index": props.index })) : (React.createElement("div", { ref: elementRef, "data-index": props.index }, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), sendWithShiftEnter: (_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false })) : (React.createElement(RendermimeMarkdown, { rmRegistry: rmRegistry, markdownStr: message.body, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined }))));
+}
+/**
+ * The navigation component, to navigate to unread messages.
+ */
+export function Navigation(props) {
+    const { model } = props;
+    const [lastInViewport, setLastInViewport] = useState(true);
+    const [unreadBefore, setUnreadBefore] = useState(null);
+    const [unreadAfter, setUnreadAfter] = useState(null);
+    const gotoMessage = (msgIdx) => {
+        var _a, _b;
+        (_b = (_a = props.refMsgBox.current) === null || _a === void 0 ? void 0 : _a.children.item(msgIdx)) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+    };
+    // Listen for change in unread messages, and find the first unread message before or
+    // after the current viewport, to display navigation buttons.
+    useEffect(() => {
+        var _a;
+        const unreadChanged = (model, unreadIndexes) => {
+            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 === null || viewport === void 0 ? void 0 : viewport.includes(unread)) {
+                    return;
+                }
+                if (unread < (before !== null && before !== void 0 ? before : Math.min(...viewport))) {
+                    before = unread;
+                }
+                else if (unread > Math.max(...viewport) &&
+                    unread < (after !== null && after !== void 0 ? after : model.messages.length)) {
+                    after = unread;
+                }
+            });
+            setUnreadBefore(before);
+            setUnreadAfter(after);
+        };
+        (_a = model.unreadChanged) === null || _a === void 0 ? void 0 : _a.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 () => {
+            var _a;
+            (_a = model.unreadChanged) === null || _a === void 0 ? void 0 : _a.disconnect(unreadChanged);
+        };
+    }, [model]);
+    // Listen for change in the viewport, to add a navigation button if the last is not
+    // in viewport.
+    useEffect(() => {
+        var _a, _b;
+        const viewportChanged = (model, viewport) => {
+            setLastInViewport(viewport.includes(model.messages.length - 1));
+        };
+        (_a = model.viewportChanged) === null || _a === void 0 ? void 0 : _a.connect(viewportChanged);
+        viewportChanged(model, (_b = model.messagesInViewport) !== null && _b !== void 0 ? _b : []);
+        return () => {
+            var _a;
+            (_a = model.viewportChanged) === null || _a === void 0 ? void 0 : _a.disconnect(viewportChanged);
+        };
+    }, [model]);
+    return (React.createElement(React.Fragment, null,
+        unreadBefore !== null && (React.createElement(Button, { className: `${NAVIGATION_BUTTON_CLASS} ${NAVIGATION_UNREAD_CLASS} ${NAVIGATION_TOP_CLASS}`, onClick: () => gotoMessage(unreadBefore), title: 'Go to unread messages' },
+            React.createElement(LabIcon.resolveReact, { display: 'flex', icon: caretDownEmptyIcon, iconClass: classes('jp-Icon') }))),
+        (unreadAfter !== null || !lastInViewport) && (React.createElement(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' },
+            React.createElement(LabIcon.resolveReact, { display: 'flex', icon: caretDownEmptyIcon, iconClass: classes('jp-Icon') })))));
 }