Message attachments

packages/jupyter-chat/package.json

@@ -57,6 +57,8 @@
     "@jupyter/react-components": "^0.15.2",
     "@jupyterlab/application": "^4.2.0",
     "@jupyterlab/apputils": "^4.3.0",
+    "@jupyterlab/docmanager": "^4.2.0",
+    "@jupyterlab/filebrowser": "^4.2.0",
     "@jupyterlab/fileeditor": "^4.2.0",
     "@jupyterlab/notebook": "^4.2.0",
     "@jupyterlab/rendermime": "^4.2.0",

packages/jupyter-chat/src/components/attachments.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+// import { IDocumentManager } from '@jupyterlab/docmanager';
+import CloseIcon from '@mui/icons-material/Close';
+import { Box } from '@mui/material';
+import React from 'react';
+
+import { TooltippedButton } from './mui-extras/tooltipped-button';
+import { IAttachment } from '../types';
+
+const ATTACHMENTS_CLASS = 'jp-chat-attachments';
+const ATTACHMENT_CLASS = 'jp-chat-attachment';
+const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
+const REMOVE_BUTTON_CLASS = 'jp-chat-attachment-remove';
+
+/**
+ * The attachments props.
+ */
+export type AttachmentsProps = {
+  attachments: IAttachment[];
+  onClick?: (attachment: IAttachment) => void;
+  onRemove?: (attachment: IAttachment) => void;
+};
+
+/**
+ * The Attachments component.
+ */
+export function AttachmentsComponent(props: AttachmentsProps): JSX.Element {
+  return (
+    <Box className={ATTACHMENTS_CLASS}>
+      {props.attachments.map(attachment => (
+        <AttachmentComponent {...props} attachment={attachment} />
+      ))}
+    </Box>
+  );
+}
+
+/**
+ * The attachment props.
+ */
+export type AttachmentProps = AttachmentsProps & {
+  attachment: IAttachment;
+};
+
+/**
+ * The Attachment component.
+ */
+export function AttachmentComponent(props: AttachmentProps): JSX.Element {
+  const remove_tooltip = 'Remove attachment';
+
+  const onclick = () => {
+    if (props.onClick) {
+      props.onClick(props.attachment);
+    }
+  };
+
+  return (
+    <Box className={ATTACHMENT_CLASS}>
+      <span
+        className={props.onClick ? ATTACHMENT_CLICKABLE_CLASS : ''}
+        onClick={onclick}
+      >
+        {props.attachment.value}
+      </span>
+      {props.onRemove && (
+        <TooltippedButton
+          onClick={() => props.onRemove!(props.attachment)}
+          tooltip={remove_tooltip}
+          buttonProps={{
+            size: 'small',
+            title: remove_tooltip,
+            className: REMOVE_BUTTON_CLASS
+          }}
+          sx={{
+            minWidth: 'unset',
+            padding: '0',
+            color: 'inherit'
+          }}
+        >
+          <CloseIcon />
+        </TooltippedButton>
+      )}
+    </Box>
+  );
+}

packages/jupyter-chat/src/components/chat-input.tsx

@@ -3,8 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
-
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import {
   Autocomplete,
   Box,
@@ -14,13 +13,15 @@ import {
   Theme
 } from '@mui/material';
 import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
 
-import { CancelButton } from './input/cancel-button';
-import { SendButton } from './input/send-button';
+import { AttachmentsComponent } from './attachments';
+import { AttachButton, CancelButton, SendButton } from './input';
 import { IChatModel } from '../model';
 import { IAutocompletionRegistry } from '../registry';
 import {
   AutocompleteCommand,
+  IAttachment,
   IAutocompletionCommandsProps,
   IConfig,
   Selection
@@ -29,7 +30,9 @@ import {
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 
 export function ChatInput(props: ChatInput.IProps): JSX.Element {
-  const { autocompletionName, autocompletionRegistry, model } = props;
+  const { autocompletionName, autocompletionRegistry, documentManager, model } =
+    props;
+
   const autocompletion = useRef<IAutocompletionCommandsProps>();
   const [input, setInput] = useState<string>(props.value || '');
   const [sendWithShiftEnter, setSendWithShiftEnter] = useState<boolean>(
@@ -38,6 +41,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
   const [typingNotification, setTypingNotification] = useState<boolean>(
     model.config.sendTypingNotification ?? false
   );
+  const [attachments, setAttachments] = useState<IAttachment[]>([]);
 
   // Display the include selection menu if it is not explicitly hidden, and if at least
   // one of the tool to check for text or cell selection is enabled.
@@ -63,9 +67,15 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
     };
     model.focusInputSignal?.connect(focusInputElement);
 
+    const attachmentChanged = (_: IChatModel, attachments: IAttachment[]) => {
+      setAttachments([...attachments]);
+    };
+    model.inputAttachmentsChanges?.connect(attachmentChanged);
+
     return () => {
       model.configChanged?.disconnect(configChanged);
       model.focusInputSignal?.disconnect(focusInputElement);
+      model.inputAttachmentsChanges?.disconnect(attachmentChanged);
     };
   }, [model]);
 
@@ -195,6 +205,11 @@ ${selection.source}
 
   return (
     <Box sx={props.sx} className={clsx(INPUT_BOX_CLASS)}>
+      <AttachmentsComponent
+        attachments={attachments}
+        onClick={model.clickAttachment}
+        onRemove={model.removeAttachment}
+      />
       <Autocomplete
         options={commandOptions}
         value={props.value}
@@ -228,15 +243,22 @@ ${selection.source}
             onKeyDown={handleKeyDown}
             placeholder="Start chatting"
             inputRef={inputRef}
+            sx={{ marginTop: '1px' }}
             InputProps={{
               ...params.InputProps,
               endAdornment: (
                 <InputAdornment position="end">
+                  {documentManager && model.addAttachment && (
+                    <AttachButton
+                      documentManager={documentManager}
+                      onAttach={model.addAttachment}
+                    />
+                  )}
                   {props.onCancel && <CancelButton onCancel={onCancel} />}
                   <SendButton
                     model={model}
                     sendWithShiftEnter={sendWithShiftEnter}
-                    inputExists={inputExists}
+                    inputExists={inputExists || attachments.length > 0}
                     onSend={onSend}
                     hideIncludeSelection={hideIncludeSelection}
                     hasButtonOnLeft={!!props.onCancel}
@@ -319,6 +341,10 @@ export namespace ChatInput {
      * Custom mui/material styles.
      */
     sx?: SxProps<Theme>;
+    /**
+     * The document manager.
+     */
+    documentManager?: IDocumentManager;
     /**
      * Autocompletion properties.
      */

packages/jupyter-chat/src/components/chat-messages.tsx

@@ -21,6 +21,7 @@ import { MarkdownRenderer } from './markdown-renderer';
 import { ScrollContainer } from './scroll-container';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
+import { AttachmentsComponent } from './attachments';
 
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_CLASS = 'jp-chat-message';
@@ -400,6 +401,12 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
             rendered={props.renderedPromise}
           />
         )}
+        {message.attachments && (
+          <AttachmentsComponent
+            attachments={message.attachments}
+            onClick={model.clickAttachment}
+          />
+        )}
       </div>
     );
   }

packages/jupyter-chat/src/components/chat.tsx

@@ -4,6 +4,7 @@
  */
 
 import { IThemeManager } from '@jupyterlab/apputils';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -18,32 +19,27 @@ import { IChatModel } from '../model';
 import { IAutocompletionRegistry } from '../registry';
 
 export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
-  const {
-    model,
-    rmRegistry: renderMimeRegistry,
-    autocompletionRegistry
-  } = props;
-  // no need to append to messageGroups imperatively here. all of that is
-  // handled by the listeners registered in the effect hooks above.
+  const { model } = props;
   const onSend = async (input: string) => {
     // send message to backend
     model.sendMessage({ body: input });
   };
 
   return (
     <>
-      <ChatMessages rmRegistry={renderMimeRegistry} model={model} />
+      <ChatMessages rmRegistry={props.rmRegistry} model={model} />
       <ChatInput
         onSend={onSend}
         sx={{
           paddingLeft: 4,
           paddingRight: 4,
-          paddingTop: 3.5,
+          paddingTop: 1,
           paddingBottom: 0,
           borderTop: '1px solid var(--jp-border-color1)'
         }}
         model={model}
-        autocompletionRegistry={autocompletionRegistry}
+        documentManager={props.documentManager}
+        autocompletionRegistry={props.autocompletionRegistry}
       />
     </>
   );
@@ -90,6 +86,7 @@ export function Chat(props: Chat.IOptions): JSX.Element {
           <ChatBody
             model={props.model}
             rmRegistry={props.rmRegistry}
+            documentManager={props.documentManager}
             autocompletionRegistry={props.autocompletionRegistry}
           />
         )}
@@ -117,6 +114,10 @@ export namespace Chat {
      * The rendermime registry.
      */
     rmRegistry: IRenderMimeRegistry;
+    /**
+     * The document manager.
+     */
+    documentManager?: IDocumentManager;
     /**
      * Autocompletion registry.
      */

packages/jupyter-chat/src/components/input/attach-button.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IDocumentManager } from '@jupyterlab/docmanager';
+import { FileDialog } from '@jupyterlab/filebrowser';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import React from 'react';
+
+import { TooltippedButton } from '../mui-extras/tooltipped-button';
+import { IAttachment } from '../../types';
+
+const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';
+
+/**
+ * The attach button props.
+ */
+export type AttachButtonProps = {
+  documentManager: IDocumentManager;
+  onAttach: (attachment: IAttachment) => void;
+};
+
+/**
+ * The attach button.
+ */
+export function AttachButton(props: AttachButtonProps): JSX.Element {
+  const tooltip = 'Add attachment';
+
+  const onclick = async () => {
+    FileDialog.getOpenFiles({
+      title: 'Select files to attach',
+      manager: props.documentManager
+    })
+      .then(result => {
+        if (result.value) {
+          result.value.forEach(file => {
+            if (file.type !== 'directory') {
+              props.onAttach({ type: 'file', value: file.path });
+            }
+          });
+        }
+      })
+      .catch(e => {
+        console.warn('Error selecting files to attach', e);
+      });
+  };
+
+  return (
+    <TooltippedButton
+      onClick={onclick}
+      tooltip={tooltip}
+      buttonProps={{
+        size: 'small',
+        variant: 'contained',
+        title: tooltip,
+        className: ATTACH_BUTTON_CLASS
+      }}
+      sx={{
+        minWidth: 'unset',
+        padding: '4px',
+        borderRadius: '2px 0px 0px 2px',
+        marginRight: '1px'
+      }}
+    >
+      <AttachFileIcon />
+    </TooltippedButton>
+  );
+}

packages/jupyter-chat/src/components/input/cancel-button.tsx

@@ -5,6 +5,7 @@
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import React from 'react';
+
 import { TooltippedButton } from '../mui-extras/tooltipped-button';
 
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';

packages/jupyter-chat/src/components/input/index.ts

@@ -3,5 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+export * from './attach-button';
 export * from './cancel-button';
 export * from './send-button';