@jupyter/chat 0.1.0

package/src/components/chat-input.tsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React, { useState } from 'react';
+
+import {
+  Box,
+  SxProps,
+  TextField,
+  Theme,
+  IconButton,
+  InputAdornment
+} 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: ChatInput.IProps): JSX.Element {
+  const [input, setInput] = useState(props.value || '');
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (
+      event.key === 'Enter' &&
+      ((props.sendWithShiftEnter && event.shiftKey) ||
+        (!props.sendWithShiftEnter && !event.shiftKey))
+    ) {
+      onSend();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+
+  /**
+   * Triggered when sending the message.
+   */
+  function onSend() {
+    setInput('');
+    props.onSend(input);
+  }
+
+  /**
+   * Triggered when cancelling edition.
+   */
+  function onCancel() {
+    setInput(props.value || '');
+    props.onCancel!();
+  }
+
+  // Set the helper text based on whether Shift+Enter is used for sending.
+  const helperText = props.sendWithShiftEnter ? (
+    <span>
+      Press <b>Shift</b>+<b>Enter</b> to send message
+    </span>
+  ) : (
+    <span>
+      Press <b>Shift</b>+<b>Enter</b> to add a new line
+    </span>
+  );
+
+  return (
+    <Box sx={props.sx} className={clsx(INPUT_BOX_CLASS)}>
+      <Box sx={{ display: 'flex' }}>
+        <TextField
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          fullWidth
+          variant="outlined"
+          multiline
+          onKeyDown={handleKeyDown}
+          placeholder="Start chatting"
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                {props.onCancel && (
+                  <IconButton
+                    size="small"
+                    color="primary"
+                    onClick={onCancel}
+                    disabled={!input.trim().length}
+                    title={'Cancel edition'}
+                    className={clsx(CANCEL_BUTTON_CLASS)}
+                  >
+                    <Cancel />
+                  </IconButton>
+                )}
+                <IconButton
+                  size="small"
+                  color="primary"
+                  onClick={onSend}
+                  disabled={!input.trim().length}
+                  title={`Send message ${props.sendWithShiftEnter ? '(SHIFT+ENTER)' : '(ENTER)'}`}
+                  className={clsx(SEND_BUTTON_CLASS)}
+                >
+                  <Send />
+                </IconButton>
+              </InputAdornment>
+            )
+          }}
+          FormHelperTextProps={{
+            sx: { marginLeft: 'auto', marginRight: 0 }
+          }}
+          helperText={input.length > 2 ? helperText : ' '}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * The chat input namespace.
+ */
+export namespace ChatInput {
+  /**
+   * The properties of the react element.
+   */
+  export interface IProps {
+    /**
+     * The initial value of the input (default to '')
+     */
+    value?: string;
+    /**
+     * The function to be called to send the message.
+     */
+    onSend: (input: string) => unknown;
+    /**
+     * The function to be called to cancel editing.
+     */
+    onCancel?: () => unknown;
+    /**
+     * Whether using shift+enter to send the message.
+     */
+    sendWithShiftEnter: boolean;
+    /**
+     * Custom mui/material styles.
+     */
+    sx?: SxProps<Theme>;
+  }
+}

package/src/components/chat-messages.tsx

@@ -0,0 +1,283 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+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 { ChatInput } from './chat-input';
+import { RendermimeMarkdown } from './rendermime-markdown';
+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_HEADER_CLASS = 'jp-chat-message-header';
+const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
+
+type BaseMessageProps = {
+  rmRegistry: IRenderMimeRegistry;
+  model: IChatModel;
+};
+
+type ChatMessageProps = BaseMessageProps & {
+  message: IChatMessage;
+};
+
+type ChatMessagesProps = BaseMessageProps & {
+  messages: IChatMessage[];
+};
+
+export type ChatMessageHeaderProps = IUser & {
+  timestamp: number;
+  rawTime?: boolean;
+  deleted?: boolean;
+  edited?: boolean;
+  sx?: SxProps<Theme>;
+};
+
+export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
+  const [datetime, setDatetime] = useState<Record<number, string>>({});
+  const sharedStyles: SxProps<Theme> = {
+    height: '24px',
+    width: '24px'
+  };
+
+  /**
+   * Effect: update cached datetime strings upon receiving a new message.
+   */
+  useEffect(() => {
+    if (!datetime[props.timestamp]) {
+      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(props.timestamp * 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[props.timestamp] = datetime;
+      setDatetime(newDatetime);
+    }
+  });
+
+  const bgcolor = props.color;
+  const avatar = props.avatar_url ? (
+    <Avatar
+      sx={{
+        ...sharedStyles,
+        ...(bgcolor && { bgcolor })
+      }}
+      src={props.avatar_url}
+    ></Avatar>
+  ) : props.initials ? (
+    <Avatar
+      sx={{
+        ...sharedStyles,
+        ...(bgcolor && { bgcolor })
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: 'var(--jp-ui-font-size1)',
+          color: 'var(--jp-ui-inverse-font-color1)'
+        }}
+      >
+        {props.initials}
+      </Typography>
+    </Avatar>
+  ) : null;
+
+  const name =
+    props.display_name ?? props.name ?? (props.username || 'User undefined');
+
+  return (
+    <Box
+      className={MESSAGE_HEADER_CLASS}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        '& > :not(:last-child)': {
+          marginRight: 3
+        },
+        ...props.sx
+      }}
+    >
+      {avatar}
+      <Box
+        sx={{
+          display: 'flex',
+          flexGrow: 1,
+          flexWrap: 'wrap',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Typography
+            sx={{ fontWeight: 700, color: 'var(--jp-ui-font-color1)' }}
+          >
+            {name}
+          </Typography>
+          {(props.deleted || props.edited) && (
+            <Typography
+              sx={{
+                fontStyle: 'italic',
+                fontSize: 'var(--jp-content-font-size0)',
+                paddingLeft: '0.5em'
+              }}
+            >
+              {props.deleted ? '(message deleted)' : '(edited)'}
+            </Typography>
+          )}
+        </Box>
+        <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 ? '*' : ''}`}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * The messages list UI.
+ */
+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>
+  );
+}
+
+/**
+ * the message UI.
+ */
+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;
+    }
+    if (model.user.username === username && model.deleteMessage !== undefined) {
+      canDelete = true;
+    }
+  }
+  const [edit, setEdit] = useState<boolean>(false);
+
+  const cancelEdition = (): void => {
+    setEdit(false);
+  };
+
+  const updateMessage = (id: string, input: string): void => {
+    if (!canEdit) {
+      return;
+    }
+    // Update the message
+    const updatedMessage = { ...message };
+    updatedMessage.body = input;
+    model.updateMessage!(id, updatedMessage);
+    setEdit(false);
+  };
+
+  const deleteMessage = (id: string): void => {
+    if (!canDelete) {
+      return;
+    }
+    // Delete the message
+    model.deleteMessage!(id);
+  };
+
+  // Empty if the message has been deleted
+  return message.deleted ? (
+    <></>
+  ) : (
+    <div>
+      {edit && canEdit ? (
+        <ChatInput
+          value={message.body}
+          onSend={(input: string) => updateMessage(message.id, input)}
+          onCancel={() => cancelEdition()}
+          sendWithShiftEnter={model.config.sendWithShiftEnter ?? false}
+        />
+      ) : (
+        <RendermimeMarkdown
+          rmRegistry={rmRegistry}
+          markdownStr={message.body}
+          edit={canEdit ? () => setEdit(true) : undefined}
+          delete={canDelete ? () => deleteMessage(message.id) : undefined}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/chat.tsx

@@ -0,0 +1,179 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IThemeManager } from '@jupyterlab/apputils';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { IconButton } from '@mui/material';
+import { Box } from '@mui/system';
+import React, { useState, useEffect } from 'react';
+
+import { JlThemeProvider } from './jl-theme-provider';
+import { ChatMessages } from './chat-messages';
+import { ChatInput } from './chat-input';
+import { ScrollContainer } from './scroll-container';
+import { IChatModel } from '../model';
+import { IChatMessage } from '../types';
+
+type ChatBodyProps = {
+  model: IChatModel;
+  rmRegistry: IRenderMimeRegistry;
+};
+
+function ChatBody({
+  model,
+  rmRegistry: renderMimeRegistry
+}: ChatBodyProps): JSX.Element {
+  const [messages, setMessages] = useState<IChatMessage[]>([]);
+
+  /**
+   * 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(_: IChatModel) {
+      setMessages([...model.messages]);
+    }
+
+    model.messagesUpdated.connect(handleChatEvents);
+    return function cleanup() {
+      model.messagesUpdated.disconnect(handleChatEvents);
+    };
+  }, [model]);
+
+  // no need to append to messageGroups imperatively here. all of that is
+  // handled by the listeners registered in the effect hooks above.
+  const onSend = async (input: string) => {
+    // send message to backend
+    model.addMessage({ body: input });
+  };
+
+  return (
+    <>
+      <ScrollContainer sx={{ flexGrow: 1 }}>
+        <ChatMessages
+          messages={messages}
+          rmRegistry={renderMimeRegistry}
+          model={model}
+        />
+      </ScrollContainer>
+      <ChatInput
+        onSend={onSend}
+        sx={{
+          paddingLeft: 4,
+          paddingRight: 4,
+          paddingTop: 3.5,
+          paddingBottom: 0,
+          borderTop: '1px solid var(--jp-border-color1)'
+        }}
+        sendWithShiftEnter={model.config.sendWithShiftEnter ?? false}
+      />
+    </>
+  );
+}
+
+export function Chat(props: Chat.IOptions): JSX.Element {
+  const [view, setView] = useState<Chat.ChatView>(
+    props.chatView || Chat.ChatView.Chat
+  );
+  return (
+    <JlThemeProvider themeManager={props.themeManager ?? null}>
+      <Box
+        // root box should not include padding as it offsets the vertical
+        // scrollbar to the left
+        sx={{
+          width: '100%',
+          height: '100%',
+          boxSizing: 'border-box',
+          background: 'var(--jp-layout-color0)',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        {/* top bar */}
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+          {view !== Chat.ChatView.Chat ? (
+            <IconButton onClick={() => setView(Chat.ChatView.Chat)}>
+              <ArrowBackIcon />
+            </IconButton>
+          ) : (
+            <Box />
+          )}
+          {view === Chat.ChatView.Chat && props.settingsPanel ? (
+            <IconButton onClick={() => setView(Chat.ChatView.Settings)}>
+              <SettingsIcon />
+            </IconButton>
+          ) : (
+            <Box />
+          )}
+        </Box>
+        {/* body */}
+        {view === Chat.ChatView.Chat && (
+          <ChatBody model={props.model} rmRegistry={props.rmRegistry} />
+        )}
+        {view === Chat.ChatView.Settings && props.settingsPanel && (
+          <props.settingsPanel />
+        )}
+      </Box>
+    </JlThemeProvider>
+  );
+}
+
+/**
+ * The chat UI namespace
+ */
+export namespace Chat {
+  /**
+   * The options to build the Chat UI.
+   */
+  export interface IOptions {
+    /**
+     * The chat model.
+     */
+    model: IChatModel;
+    /**
+     * The rendermime registry.
+     */
+    rmRegistry: IRenderMimeRegistry;
+    /**
+     * The theme manager.
+     */
+    themeManager?: IThemeManager | null;
+    /**
+     * The view to render.
+     */
+    chatView?: ChatView;
+    /**
+     * A settings panel that can be used for dedicated settings (e.g. jupyter-ai)
+     */
+    settingsPanel?: () => JSX.Element;
+  }
+
+  /**
+   * The view to render.
+   * The settings view is available only if the settings panel is provided in options.
+   */
+  export enum ChatView {
+    Chat,
+    Settings
+  }
+}

package/src/components/copy-button.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React, { useState, useCallback } from 'react';
+
+import { Box, Button } from '@mui/material';
+
+enum CopyStatus {
+  None,
+  Copied
+}
+
+const COPYBTN_TEXT_BY_STATUS: Record<CopyStatus, string> = {
+  [CopyStatus.None]: 'Copy to Clipboard',
+  [CopyStatus.Copied]: 'Copied!'
+};
+
+type CopyButtonProps = {
+  value: string;
+};
+
+export function CopyButton(props: CopyButtonProps): JSX.Element {
+  const [copyStatus, setCopyStatus] = useState<CopyStatus>(CopyStatus.None);
+
+  const copy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(props.value);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+      setCopyStatus(CopyStatus.None);
+      return;
+    }
+
+    setCopyStatus(CopyStatus.Copied);
+    setTimeout(() => setCopyStatus(CopyStatus.None), 1000);
+  }, [props.value]);
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Button
+        onClick={copy}
+        disabled={copyStatus !== CopyStatus.None}
+        aria-label="Copy To Clipboard"
+        sx={{
+          alignSelf: 'flex-end',
+          textTransform: 'none'
+        }}
+      >
+        {COPYBTN_TEXT_BY_STATUS[copyStatus]}
+      </Button>
+    </Box>
+  );
+}

package/src/components/jl-theme-provider.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React, { useState, useEffect } from 'react';
+import type { IThemeManager } from '@jupyterlab/apputils';
+import { Theme, ThemeProvider, createTheme } from '@mui/material/styles';
+
+import { getJupyterLabTheme } from '../theme-provider';
+
+export function JlThemeProvider(props: {
+  themeManager: IThemeManager | null;
+  children: React.ReactNode;
+}): JSX.Element {
+  const [theme, setTheme] = useState<Theme>(createTheme());
+
+  useEffect(() => {
+    async function setJlTheme() {
+      setTheme(await getJupyterLabTheme());
+    }
+
+    setJlTheme();
+    props.themeManager?.themeChanged.connect(setJlTheme);
+  }, []);
+
+  return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
+}