@jupyter/chat 0.18.2 → 0.19.0-alpha.0

package/src/components/messages/messages.tsx

@@ -14,12 +14,11 @@ import { ChatMessageHeader } from './header';
 import { ChatMessage } from './message';
 import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
-import { WritingUsersList } from './writers';
 import { IInputToolbarRegistry } from '../input';
 import { ScrollContainer } from '../scroll-container';
 import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
 import { IChatModel } from '../../model';
-import { IChatMessage, IUser } from '../../types';
+import { ChatArea, IChatMessage } from '../../types';
 
 export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
@@ -53,6 +52,10 @@ export type BaseMessageProps = {
    * The welcome message.
    */
   welcomeMessage?: string;
+  /**
+   * The area where the chat is displayed.
+   */
+  area?: ChatArea;
 };
 
 /**
@@ -62,7 +65,6 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
   const { model } = props;
   const [messages, setMessages] = useState<IChatMessage[]>(model.messages);
   const refMsgBox = useRef<HTMLDivElement>(null);
-  const [currentWriters, setCurrentWriters] = useState<IUser[]>([]);
   const [allRendered, setAllRendered] = useState<boolean>(false);
 
   // The list of message DOM and their rendered promises.
@@ -84,7 +86,6 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
     }
 
     fetchHistory();
-    setCurrentWriters([]);
   }, [model]);
 
   /**
@@ -95,16 +96,10 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
       setMessages([...model.messages]);
     }
 
-    function handleWritersChange(_: IChatModel, writers: IChatModel.IWriter[]) {
-      setCurrentWriters(writers.map(writer => writer.user));
-    }
-
     model.messagesUpdated.connect(handleChatEvents);
-    model.writersChanged?.connect(handleWritersChange);
 
     return function cleanup() {
       model.messagesUpdated.disconnect(handleChatEvents);
-      model.writersChanged?.disconnect(handleChatEvents);
     };
   }, [model]);
 
@@ -170,6 +165,7 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
     };
   }, [messages, allRendered]);
 
+  const horizontalPadding = props.area === 'main' ? 8 : 4;
   return (
     <>
       <ScrollContainer sx={{ flexGrow: 1 }}>
@@ -179,39 +175,67 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
             content={props.welcomeMessage}
           />
         )}
-        <Box ref={refMsgBox} className={clsx(MESSAGES_BOX_CLASS)}>
-          {messages.map((message, i) => {
-            renderedPromise.current[i] = new PromiseDelegate();
-            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}
-                  index={i}
-                  renderedPromise={renderedPromise.current[i]}
-                  ref={el => (listRef.current[i] = el)}
-                />
-                {props.messageFooterRegistry && (
-                  <MessageFooterComponent
-                    registry={props.messageFooterRegistry}
+        <Box
+          sx={{
+            paddingLeft: horizontalPadding,
+            paddingRight: horizontalPadding,
+            paddingTop: 4,
+            paddingBottom: 16,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4
+          }}
+          ref={refMsgBox}
+          className={clsx(MESSAGES_BOX_CLASS)}
+        >
+          {messages
+            .filter(message => !message.deleted)
+            .map((message, i) => {
+              renderedPromise.current[i] = new PromiseDelegate();
+              const isCurrentUser =
+                model.user !== undefined &&
+                model.user.username === message.sender.username;
+              return (
+                // extra div needed to ensure each bubble is on a new line
+                <Box
+                  key={i}
+                  sx={{
+                    ...(isCurrentUser && {
+                      marginLeft: props.area === 'main' ? '25%' : '10%',
+                      backgroundColor: 'var(--jp-layout-color2)',
+                      border: 'none',
+                      borderRadius: 2,
+                      padding: 2
+                    })
+                  }}
+                  className={clsx(
+                    MESSAGE_CLASS,
+                    message.stacked ? MESSAGE_STACKED_CLASS : ''
+                  )}
+                >
+                  <ChatMessageHeader
+                    message={message}
+                    isCurrentUser={isCurrentUser}
+                  />
+                  <ChatMessage
+                    {...props}
                     message={message}
-                    model={model}
+                    index={i}
+                    renderedPromise={renderedPromise.current[i]}
+                    ref={el => (listRef.current[i] = el)}
                   />
-                )}
-              </Box>
-            );
-          })}
+                  {props.messageFooterRegistry && (
+                    <MessageFooterComponent
+                      registry={props.messageFooterRegistry}
+                      message={message}
+                      model={model}
+                    />
+                  )}
+                </Box>
+              );
+            })}
         </Box>
       </ScrollContainer>
-      <WritingUsersList writers={currentWriters}></WritingUsersList>
       <Navigation {...props} refMsgBox={refMsgBox} allRendered={allRendered} />
     </>
   );

package/src/components/messages/toolbar.tsx

@@ -3,11 +3,9 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import {
-  ToolbarButtonComponent,
-  deleteIcon,
-  editIcon
-} from '@jupyterlab/ui-components';
+// import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import React from 'react';
 
 const TOOLBAR_CLASS = 'jp-chat-toolbar';
@@ -18,27 +16,59 @@ const TOOLBAR_CLASS = 'jp-chat-toolbar';
 export function MessageToolbar(props: MessageToolbar.IProps): JSX.Element {
   const buttons: JSX.Element[] = [];
 
-  if (props.edit !== undefined) {
-    const editButton = ToolbarButtonComponent({
-      icon: editIcon,
-      onClick: props.edit,
-      tooltip: 'Edit'
-    });
-    buttons.push(editButton);
-  }
+  // if (props.edit !== undefined) {
+  //   const editButton = (
+  //     <Tooltip key="edit" title="Edit" placement="top" arrow>
+  //       <span>
+  //         <IconButton
+  //           onClick={props.edit}
+  //           aria-label="Edit"
+  //           sx={{
+  //             width: '24px',
+  //             height: '24px',
+  //             padding: 0,
+  //             lineHeight: 0
+  //           }}
+  //         >
+  //           <EditIcon sx={{ fontSize: '16px' }} />
+  //         </IconButton>
+  //       </span>
+  //     </Tooltip>
+  //   );
+  //   buttons.push(editButton);
+  // }
   if (props.delete !== undefined) {
-    const deleteButton = ToolbarButtonComponent({
-      icon: deleteIcon,
-      onClick: props.delete,
-      tooltip: 'Delete'
-    });
+    const deleteButton = (
+      <Tooltip key="delete" title="Delete" placement="top" arrow>
+        <span>
+          <IconButton
+            onClick={props.delete}
+            aria-label="Delete"
+            sx={{
+              width: '24px',
+              height: '24px',
+              padding: 0,
+              lineHeight: 0
+            }}
+          >
+            <DeleteIcon sx={{ fontSize: '16px' }} />
+          </IconButton>
+        </span>
+      </Tooltip>
+    );
     buttons.push(deleteButton);
   }
 
   return (
-    <div className={TOOLBAR_CLASS}>
-      {buttons.map(toolbarButton => toolbarButton)}
-    </div>
+    <Box
+      className={TOOLBAR_CLASS}
+      sx={{
+        display: 'flex',
+        gap: 2
+      }}
+    >
+      {buttons}
+    </Box>
   );
 }
 

package/src/input-model.ts

@@ -4,6 +4,7 @@
  */
 
 import { IDocumentManager } from '@jupyterlab/docmanager';
+import { UUID } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal, Signal } from '@lumino/signaling';
 import { IActiveCellManager } from './active-cell-manager';
@@ -116,6 +117,11 @@ export interface IInputModel extends IDisposable {
    */
   clearAttachments(): void;
 
+  /**
+   * Unique identifier for the input (needed for drag-and-drop).
+   */
+  readonly id: string;
+
   /**
    * A signal emitting when the attachment list has changed.
    */
@@ -157,6 +163,7 @@ export interface IInputModel extends IDisposable {
  */
 export class InputModel implements IInputModel {
   constructor(options: InputModel.IOptions) {
+    this._id = options.id ?? `input-${UUID.uuid4()}`;
     this._onSend = options.onSend;
     this._chatContext = options.chatContext;
     this._value = options.value || '';
@@ -196,6 +203,13 @@ export class InputModel implements IInputModel {
    */
   cancel: (() => void) | undefined;
 
+  /**
+   * Unique identifier for the input (needed for drag-and-drop).
+   */
+  get id(): string {
+    return this._id;
+  }
+
   /**
    * The entire input value.
    */
@@ -471,6 +485,7 @@ export class InputModel implements IInputModel {
     return this._isDisposed;
   }
 
+  private _id: string;
   private _onSend: (input: string, model?: InputModel) => void;
   private _chatContext?: IChatContext;
   private _value: string;
@@ -532,6 +547,12 @@ export namespace InputModel {
      */
     cursorIndex?: number;
 
+    /**
+     * Optional unique identifier for this input model.
+     * If not provided, one will be generated automatically.
+     */
+    id?: string;
+
     /**
      * The configuration for the input component.
      */

package/src/model.ts

@@ -201,6 +201,11 @@ export interface IChatModel extends IDisposable {
    */
   getEditionModel(messageID: string): IInputModel | undefined;
 
+  /**
+   * Get the input models of all edited messages.
+   */
+  getEditionModels(): IInputModel[];
+
   /**
    * Add an input model of the edited message.
    */
@@ -637,6 +642,13 @@ export abstract class AbstractChatModel implements IChatModel {
     return this._messageEditions.get(messageID);
   }
 
+  /**
+   * Get the input models of all edited messages.
+   */
+  getEditionModels(): IInputModel[] {
+    return Array.from(this._messageEditions.values());
+  }
+
   /**
    * Add an input model of the edited message.
    */

package/src/types.ts

@@ -172,3 +172,8 @@ export interface IAttachmentSelection {
  * An empty interface to describe optional settings that could be fetched from server.
  */
 export interface ISettings {} /* eslint-disable-line @typescript-eslint/no-empty-object-type */
+
+/**
+ * The area where the chat is displayed.
+ */
+export type ChatArea = 'sidebar' | 'main';

package/src/widgets/chat-widget.tsx

@@ -20,6 +20,7 @@ import {
   INotebookAttachmentCell
 } from '../types';
 import { ActiveCellManager } from '../active-cell-manager';
+import { IInputModel } from '../input-model';
 
 // MIME type constant for file browser drag events
 const FILE_BROWSER_MIME = 'application/x-jupyter-icontentsrich';
@@ -141,12 +142,19 @@ export class ChatWidget extends ReactWidget {
    * Handle drag over events
    */
   private _handleDrag(event: Drag.Event): void {
-    const inputContainer = this.node.querySelector(`.${INPUT_CONTAINER_CLASS}`);
+    const inputContainers = this.node.querySelectorAll<HTMLElement>(
+      `.${INPUT_CONTAINER_CLASS}`
+    );
     const target = event.target as HTMLElement;
-    const isOverInput =
-      inputContainer?.contains(target) || inputContainer === target;
+    let overInput: HTMLElement | null = null;
+    for (const container of inputContainers) {
+      if (container.contains(target)) {
+        overInput = container;
+        break;
+      }
+    }
 
-    if (!isOverInput) {
+    if (!overInput) {
       this._removeDragHoverClass();
       return;
     }
@@ -159,12 +167,9 @@ export class ChatWidget extends ReactWidget {
     event.stopPropagation();
     event.dropAction = 'move';
 
-    if (
-      inputContainer &&
-      !inputContainer.classList.contains(DRAG_HOVER_CLASS)
-    ) {
-      inputContainer.classList.add(DRAG_HOVER_CLASS);
-      this._dragTarget = inputContainer as HTMLElement;
+    if (!overInput.classList.contains(DRAG_HOVER_CLASS)) {
+      overInput.classList.add(DRAG_HOVER_CLASS);
+      this._dragTarget = overInput;
     }
   }
 
@@ -203,6 +208,30 @@ export class ChatWidget extends ReactWidget {
     }
   }
 
+  /**
+   * Get the input model associated with the event target and input ids.
+   */
+  private _getInputFromEvent(event: Drag.Event): IInputModel | undefined {
+    let element = event.target as HTMLElement | null;
+
+    while (element) {
+      if (
+        element.classList.contains(INPUT_CONTAINER_CLASS) &&
+        element.dataset.inputId
+      ) {
+        const inputId = element.dataset.inputId;
+        const inputModel =
+          this.model.input.id === inputId
+            ? this.model.input
+            : this.model.getEditionModels().find(model => model.id === inputId);
+        return inputModel;
+      }
+      element = element.parentElement;
+    }
+
+    return;
+  }
+
   /**
    * Process dropped files
    */
@@ -221,7 +250,8 @@ export class ChatWidget extends ReactWidget {
       value: data.model.path,
       mimetype: data.model.mimetype
     };
-    this.model.input.addAttachment?.(attachment);
+    const inputModel = this._getInputFromEvent(event);
+    inputModel?.addAttachment?.(attachment);
   }
 
   /**
@@ -283,7 +313,8 @@ export class ChatWidget extends ReactWidget {
           value: notebookPath,
           cells: validCells
         };
-        this.model.input.addAttachment?.(attachment);
+        const inputModel = this._getInputFromEvent(event);
+        inputModel?.addAttachment?.(attachment);
       }
     } catch (error) {
       console.error('Failed to process cell drop: ', error);

package/src/widgets/multichat-panel.tsx

@@ -155,7 +155,8 @@ export class MultiChatPanel extends SidePanel {
       attachmentOpenerRegistry: this._attachmentOpenerRegistry,
       inputToolbarRegistry,
       messageFooterRegistry: this._messageFooterRegistry,
-      welcomeMessage: this._welcomeMessage
+      welcomeMessage: this._welcomeMessage,
+      area: 'sidebar'
     });
 
     const section = new ChatSection({

package/style/chat.css

@@ -2,20 +2,18 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-.jp-chat-message:not(.jp-chat-message-stacked) {
-  padding: 1em 1em 0;
-}
 
-.jp-chat-message:not(:first-child, .jp-chat-message-stacked) {
-  border-top: 1px solid var(--jp-border-color2);
+.jp-chat-rendered-markdown {
+  position: relative;
 }
 
-.jp-chat-message.jp-chat-message-stacked {
-  padding: 0 1em;
+.jp-chat-rendered-markdown hr {
+  color: #00000026;
+  background-color: transparent;
 }
 
-.jp-chat-rendered-markdown {
-  position: relative;
+.jp-chat-rendered-markdown .jp-RenderedHTMLCommon > :last-child {
+  margin-bottom: 0;
 }
 
 /*
@@ -38,7 +36,7 @@
   overflow-x: auto;
   white-space: pre;
   margin: 0;
-  padding: 4px 2px 0 6px;
+  padding: 4px 6px;
   border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
 }
 
@@ -53,7 +51,7 @@
 }
 
 .jp-chat-toolbar {
-  display: none;
+  visibility: hidden;
   position: absolute;
   right: 2px;
   top: 2px;
@@ -67,107 +65,13 @@
 }
 
 .jp-chat-rendered-markdown:hover .jp-chat-toolbar {
-  display: inherit;
+  visibility: visible;
 }
 
 .jp-chat-toolbar > .jp-ToolbarButtonComponent {
   margin-top: 0;
 }
 
-.jp-chat-writers {
-  display: flex;
-  flex-wrap: wrap;
-  position: sticky;
-  bottom: 0;
-  padding: 8px;
-  background-color: var(--jp-layout-color0);
-  border-top: 1px solid var(--jp-border-color2);
-  z-index: 1;
-}
-
-.jp-chat-writers-content {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-wrap: wrap;
-}
-
-.jp-chat-writer-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.jp-chat-writer-name {
-  color: var(--jp-ui-font-color1);
-  font-weight: 500;
-}
-
-.jp-chat-writer-separator {
-  color: var(--jp-ui-font-color2);
-}
-
-.jp-chat-writing-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.jp-chat-writing-text {
-  color: var(--jp-ui-font-color2);
-}
-
-/* Animated typing indicator */
-.jp-chat-typing-indicator {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 2px 4px;
-}
-
-.jp-chat-typing-dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: var(--jp-brand-color1);
-  animation: jp-chat-typing-bounce 1.4s infinite ease-in-out;
-}
-
-.jp-chat-typing-dot:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.jp-chat-typing-dot:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-.jp-chat-typing-dot:nth-child(3) {
-  animation-delay: 0s;
-}
-
-/* Keyframe animations */
-@keyframes jp-chat-typing-bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0.8);
-    opacity: 0.5;
-  }
-
-  40% {
-    transform: scale(1.2);
-    opacity: 1;
-  }
-}
-
-.jp-chat-writers > div {
-  display: flex;
-  align-items: center;
-  gap: 0.2em;
-  white-space: pre;
-  padding-left: 0.5em;
-}
-
 .jp-chat-navigation {
   position: absolute;
   right: 10px;
@@ -197,40 +101,8 @@
   bottom: 120px;
 }
 
-.jp-chat-attachments {
-  display: flex;
-  gap: 4px;
-  flex-wrap: wrap;
-  min-height: 1.5em;
-  padding: 4px 0;
-}
-
-.jp-chat-attachment {
-  border: solid 1px;
-  border-radius: 10px;
-  margin: 0 0.2em;
-  padding: 0 0.3em;
-  align-content: center;
-  background-color: var(--jp-border-color3);
-  flex-shrink: 0;
-}
-
-.jp-chat-attachment .jp-chat-attachment-clickable:hover {
-  cursor: pointer;
-}
-
-.jp-chat-command-name {
-  font-weight: normal;
-  margin: 5px;
-}
-
-.jp-chat-command-description {
-  color: gray;
-  margin: 5px;
-}
-
 .jp-chat-mention {
-  border-radius: 10px;
-  padding: 0 0.2em;
-  background-color: var(--jp-brand-color4);
+  border-radius: 4px;
+  padding: 2px 0;
+  font-weight: bold;
 }