Implement message attachments (#148)

* Add attachments in the chat model and the ychat

* Add a first UI to attach file from jupyter-chat

* Ability to add attachements from jupyterlab-chat extension input

* Display attachments with the messages

* Allow to send a message with only attachment, and open attachments file on click

* Rename attachments component according to review suggestion

* Emit signal if attachmenets list changed

Co-authored-by: David L. Qiu <[email protected]>

* Use await to select files

Co-authored-by: David L. Qiu <[email protected]>

* Rename updateAttachments() to clearAttachments()

* Add attachment opener registry, with a default opener for file

* Add tests on attachments

* Remove a left over method

* Add the attachments in the lite deployment

* Some style on the attachments

* Documentation on attachments

* update snapshot

* Apply renaming suggestion

* Emphasis changed lines in documentation examples

* Skipping the notification test, to be restored in follow up PR

---------

Co-authored-by: David L. Qiu <[email protected]>
Co-authored-by: David L. Qiu <[email protected]>

Author: brichet

docs/jupyter-chat-example/src/index.ts

@@ -5,8 +5,10 @@
 
 import {
   ActiveCellManager,
+  AttachmentOpenerRegistry,
   buildChatSidebar,
   ChatModel,
+  IAttachment,
   IChatMessage,
   INewMessage,
   SelectionWatcher
@@ -16,6 +18,7 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 import { IThemeManager } from '@jupyterlab/apputils';
+import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { INotebookTracker } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
@@ -25,15 +28,16 @@ class MyChatModel extends ChatModel {
   sendMessage(
     newMessage: INewMessage
   ): Promise<boolean | void> | boolean | void {
-    console.log(`New Message:\n${newMessage.body}`);
     const message: IChatMessage = {
       body: newMessage.body,
       id: newMessage.id ?? UUID.uuid4(),
       type: 'msg',
       time: Date.now() / 1000,
-      sender: { username: 'me' }
+      sender: { username: 'me' },
+      attachments: this.inputAttachments
     };
     this.messageAdded(message);
+    this.clearAttachments();
   }
 }
 
@@ -45,10 +49,16 @@ const plugin: JupyterFrontEndPlugin<void> = {
   description: 'The chat panel widget.',
   autoStart: true,
   requires: [IRenderMimeRegistry],
-  optional: [INotebookTracker, ISettingRegistry, IThemeManager],
+  optional: [
+    IDefaultFileBrowser,
+    INotebookTracker,
+    ISettingRegistry,
+    IThemeManager
+  ],
   activate: (
     app: JupyterFrontEnd,
     rmRegistry: IRenderMimeRegistry,
+    filebrowser: IDefaultFileBrowser | null,
     notebookTracker: INotebookTracker | null,
     settingRegistry: ISettingRegistry | null,
     themeManager: IThemeManager | null
@@ -102,7 +112,19 @@ const plugin: JupyterFrontEndPlugin<void> = {
         });
     }
 
-    const panel = buildChatSidebar({ model, rmRegistry, themeManager });
+    // Create the attachment opener registry.
+    const attachmentOpenerRegistry = new AttachmentOpenerRegistry();
+    attachmentOpenerRegistry.set('file', (attachment: IAttachment) => {
+      app.commands.execute('docmanager:open', { path: attachment.value });
+    });
+
+    const panel = buildChatSidebar({
+      model,
+      rmRegistry,
+      themeManager,
+      documentManager: filebrowser?.model.manager,
+      attachmentOpenerRegistry
+    });
     app.shell.add(panel, 'left');
   }
 };

docs/source/README.ipynb

@@ -91,6 +91,25 @@
     "    <img src=\"https://raw.githubusercontent.com/jupyterlab/jupyter-chat/c310f16bf2c784bcaed5ca0e3cd1e3996d812ec7/packages/jupyter-chat/style/icons/replace-cell.svg\" width=\"24px\" title=\"code toolbar cell replace\">"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "9cd5f2a6-25d1-4b5c-b774-1527d724c829",
+   "metadata": {},
+   "source": [
+    "## Attachments"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "93642e43-c4da-4260-84b8-d6fdab556e8a",
+   "metadata": {},
+   "source": [
+    "Files can be attached to the messages using the clip icon next to the send icon in the input.\n",
+    "It opens a Dialog allowing to select and atach files.\n",
+    "\n",
+    "Attachments can then be opened by clicking on the preview icon."
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "40240824-8b1e-4da7-bfd7-40e87ff47383",

docs/source/developers/developing_extensions/extension-providing-chat.md

@@ -79,7 +79,7 @@ The rendermime registry is required to display the messages using markdown synta
 This registry is provided by jupyterlab with a token, and must be required by the
 extension.
 
-### A full example
+### A minimal full extension
 
 The example below adds a new chat to the right panel.
 
@@ -346,6 +346,8 @@ the [Material UI API](https://mui.com/material-ui/api/autocomplete/).
 
 Here is a simple example using a commands list (commands list copied from _jupyter-ai_):
 
+{emphasize-lines="2,6,12,13,14,15,16,17,18,25,26,32"}
+
 ```typescript
 import {
   AutocompletionRegistry,
@@ -385,3 +387,79 @@ const myChatExtension: JupyterFrontEndPlugin<void> = {
   }
 };
 ```
+
+(attachment-opener-registry)=
+
+### attachmentOpenerRegistry
+
+The `attachmentOpenerRegistry` provides a way to open attachments for a given type.
+A simple example is to handle the attached files, by opening them using a command.
+
+```{tip}
+To be able to attach files from the chat, you must provide a `IDocumentManager` that will
+be used to select the files to attach.
+By default the `IDefaultFileBrowser.model.manager` can be used.
+```
+
+The default registry is not much than a `Map<string, () => void>`, allowing setting a
+specific function for an attachment type.
+
+{emphasize-lines="2,5,9,23,26,34,38,40,41,42,43,49,50"}
+
+```typescript
+import {
+  AttachmentOpenerRegistry,
+  ChatModel,
+  ChatWidget,
+  IAttachment,
+  IChatMessage,
+  INewMessage
+} from '@jupyter/chat';
+import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
+
+...
+
+class MyModel extends ChatModel {
+  sendMessage(
+    newMessage: INewMessage
+  ): Promise<boolean | void> | boolean | void {
+    const message: IChatMessage = {
+      body: newMessage.body,
+      id: newMessage.id ?? UUID.uuid4(),
+      type: 'msg',
+      time: Date.now() / 1000,
+      sender: { username: 'me' },
+      attachments: this.inputAttachments
+    };
+    this.messageAdded(message);
+    this.clearAttachments();
+  }
+}
+
+const myChatExtension: JupyterFrontEndPlugin<void> = {
+  id: 'myExtension:plugin',
+  autoStart: true,
+  requires: [IRenderMimeRegistry],
+  optional: [IDefaultFileBrowser],
+  activate: (
+    app: JupyterFrontEnd,
+    rmRegistry: IRenderMimeRegistry,
+    filebrowser: IDefaultFileBrowser | null
+  ): void => {
+    const attachmentOpenerRegistry = new AttachmentOpenerRegistry();
+    attachmentOpenerRegistry.set('file', (attachment: IAttachment) => {
+      app.commands.execute('docmanager:open', { path: attachment.value });
+    });
+
+    const model = new MyModel();
+    const widget = new ChatWidget({
+      model,
+      rmRegistry,
+      documentManager: filebrowser?.model.manager,
+      attachmentOpenerRegistry
+    });
+
+    app.shell.add(widget, 'right');
+  }
+};
+```

docs/source/users/index.md

@@ -98,6 +98,13 @@ available:
 
 (chat-settings)=
 
+### Attachments
+
+Files can be attached to the messages using the clip icon next to the send icon in the input.
+It opens a Dialog allowing to select and atach files.
+
+Attachments can then be opened by clicking on the preview icon.
+
 ## Chat settings
 
 Some jupyterlab settings are available for the chats in the setting panel

packages/jupyter-chat/package.json

@@ -48,6 +48,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,91 @@
+/*
+ * 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, { useContext } from 'react';
+
+import { TooltippedButton } from './mui-extras/tooltipped-button';
+import { IAttachment } from '../types';
+import { AttachmentOpenerContext } from '../context';
+
+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[];
+  onRemove?: (attachment: IAttachment) => void;
+};
+
+/**
+ * The Attachments component.
+ */
+export function AttachmentPreviewList(props: AttachmentsProps): JSX.Element {
+  return (
+    <Box className={ATTACHMENTS_CLASS}>
+      {props.attachments.map(attachment => (
+        <AttachmentPreview {...props} attachment={attachment} />
+      ))}
+    </Box>
+  );
+}
+
+/**
+ * The attachment props.
+ */
+export type AttachmentProps = AttachmentsProps & {
+  attachment: IAttachment;
+};
+
+/**
+ * The Attachment component.
+ */
+export function AttachmentPreview(props: AttachmentProps): JSX.Element {
+  const remove_tooltip = 'Remove attachment';
+  const attachmentOpenerRegistry = useContext(AttachmentOpenerContext);
+
+  return (
+    <Box className={ATTACHMENT_CLASS}>
+      <span
+        className={
+          attachmentOpenerRegistry?.get(props.attachment.type)
+            ? ATTACHMENT_CLICKABLE_CLASS
+            : ''
+        }
+        onClick={() =>
+          attachmentOpenerRegistry?.get(props.attachment.type)?.(
+            props.attachment
+          )
+        }
+      >
+        {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>
+  );
+}