@jupyter/chat 0.22.0 → 0.23.0-alpha.0

package/src/widgets/multichat-panel.tsx

@@ -15,15 +15,17 @@ import {
   closeIcon,
   launchIcon,
   PanelWithToolbar,
+  ReactiveToolbar,
   ReactWidget,
   Spinner,
+  Toolbar,
   ToolbarButton
 } from '@jupyterlab/ui-components';
 import { ArrayExt } from '@lumino/algorithm';
-import { Message } from '@lumino/messaging';
+import { Message, MessageLoop } from '@lumino/messaging';
 import { Debouncer } from '@lumino/polling';
 import { ISignal, Signal } from '@lumino/signaling';
-import { Widget } from '@lumino/widgets';
+import { Panel, Widget } from '@lumino/widgets';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { ChatSelectorPopup } from './chat-selector-popup';
@@ -43,8 +45,26 @@ const SIDEPANEL_CLASS = 'jp-chat-sidepanel';
 const ADD_BUTTON_CLASS = 'jp-chat-add';
 const OPEN_SELECT_CLASS = 'jp-chat-open';
 const SIDEPANEL_WIDGET_CLASS = 'jp-chat-sidepanel-widget';
+// TODO: Drop this workaround class (and related CSS) once we depend on
+// @jupyterlab/ui-components >= 4.6.0 (refs - jupyterlab/jupyterlab#18824).
 const TOOLBAR_CLASS = 'jp-chat-sidepanel-widget-toolbar';
 
+/**
+ * A panel widget with a reactive toolbar.
+ */
+class ReactivePanelWithToolbar extends Panel {
+  constructor() {
+    super();
+    this._toolbar = new ReactiveToolbar({ noFocusOnClick: true });
+  }
+
+  get toolbar(): ReactiveToolbar {
+    return this._toolbar;
+  }
+
+  private _toolbar: ReactiveToolbar;
+}
+
 /**
  * Generic sidepanel widget including multiple chats and the add chat button.
  */
@@ -105,7 +125,7 @@ export class MultiChatPanel extends PanelWithToolbar {
         chatNames: [],
         onSelect: this._onSelectChat,
         onClose: (name: string) => {
-          this.disposeLoadedModel(name);
+          this.unsetLoadedModel(name);
         },
         translator
       });
@@ -180,9 +200,10 @@ export class MultiChatPanel extends PanelWithToolbar {
   }
 
   /**
-   * Dispose a model, removing it from loaded models.
+   * Removing a model from loaded list.
+   * Dispose of the widget and optionally dispose of the model.
    */
-  disposeLoadedModel(name: string): void {
+  unsetLoadedModel(name: string, dispose = true): void {
     const model = this._loadedModels.get(name);
     if (model) {
       // If this is the currently displayed chat, remove it.
@@ -198,7 +219,9 @@ export class MultiChatPanel extends PanelWithToolbar {
         this._addPlaceholder();
       }
 
-      model.dispose();
+      if (dispose) {
+        model.dispose();
+      }
       this._loadedModels.delete(name);
       this._chatSelectorPopup?.setLoadedModels(this.getLoadedModelNames());
     }
@@ -272,8 +295,8 @@ export class MultiChatPanel extends PanelWithToolbar {
       displayName: name,
       openInMain: this._openInMain,
       renameChat: this._renameChat,
-      onClose: (name: string) => {
-        this.disposeLoadedModel(name);
+      onClose: (name: string, disposeModel = true) => {
+        this.unsetLoadedModel(name, disposeModel);
       },
       trans: this._trans
     });
@@ -508,7 +531,7 @@ export namespace MultiChatPanel {
 /**
  * A widget containing the chat and its toolbar.
  */
-class SidePanelWidget extends PanelWithToolbar {
+class SidePanelWidget extends ReactivePanelWithToolbar {
   constructor(options: SidePanelWidget.IOptions) {
     super();
     this._chatWidget = options.widget;
@@ -516,8 +539,11 @@ class SidePanelWidget extends PanelWithToolbar {
     const trans = options.trans;
 
     this.addClass(SIDEPANEL_WIDGET_CLASS);
+    // Keep side-panel toolbar baseline sizing from ui-components.
+    this.toolbar.addClass('jp-SidePanel-toolbar');
     this.toolbar.addClass(TOOLBAR_CLASS);
     this._updateTitle();
+    this.toolbar.addItem('titleSpacer', Toolbar.createSpacerItem());
 
     this.addWidget(this.toolbar);
 
@@ -588,7 +614,7 @@ class SidePanelWidget extends PanelWithToolbar {
         onClick: async () => {
           const name = this.model.name;
           if (await options.openInMain?.(name)) {
-            options.onClose(this._displayName);
+            options.onClose(this._displayName, false);
           }
         }
       });
@@ -610,6 +636,16 @@ class SidePanelWidget extends PanelWithToolbar {
     this._markAsRead.enabled = (this.model?.unreadMessages.length ?? 0) > 0;
   }
 
+  protected onAfterAttach(msg: Message): void {
+    super.onAfterAttach(msg);
+    requestAnimationFrame(() => this._updateReactiveToolbar());
+  }
+
+  protected onResize(msg: Widget.ResizeMessage): void {
+    super.onResize(msg);
+    this._updateReactiveToolbar();
+  }
+
   /**
    * The chat widget embedded in the sidepanel widget.
    */
@@ -687,6 +723,21 @@ class SidePanelWidget extends PanelWithToolbar {
     this._markAsRead.enabled = unread.length > 0;
   };
 
+  /**
+   * Trigger reactive toolbar overflow computation from rendered toolbar size.
+   */
+  private _updateReactiveToolbar(): void {
+    const toolbarWidth = this.toolbar.node.offsetWidth;
+    if (toolbarWidth <= 0) {
+      return;
+    }
+    const toolbarHeight = this.toolbar.node.offsetHeight;
+    MessageLoop.sendMessage(
+      this.toolbar,
+      new Widget.ResizeMessage(toolbarWidth, toolbarHeight)
+    );
+  }
+
   private _chatWidget: ChatWidget;
   private _markAsRead: ToolbarButton;
   private _displayName: string;
@@ -712,7 +763,7 @@ namespace SidePanelWidget {
     /**
      * The callback when closing the chat.
      */
-    onClose: (name: string) => void;
+    onClose: (name: string, disposeModel?: boolean) => void;
     /**
      * The displayed name of the chat.
      */

package/style/chat.css

@@ -61,12 +61,15 @@
 }
 
 .jp-chat-toolbar {
-  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.15s ease;
   position: absolute;
   right: 0;
-  top: 0;
+  top: -20px;
   font-size: var(--jp-ui-font-size0);
   color: var(--jp-ui-font-color3);
+  background-color: var(--jp-layout-color2);
+  box-shadow: var(--jp-elevation-z2);
 }
 
 .jp-chat-toolbar:hover {
@@ -75,7 +78,7 @@
 }
 
 .jp-chat-message-container:hover .jp-chat-toolbar {
-  visibility: visible;
+  opacity: 1;
 }
 
 .jp-chat-toolbar > .jp-ToolbarButtonComponent {
@@ -144,10 +147,11 @@
 .jp-chat-sidepanel-widget-toolbar > .jp-chat-sidepanel-widget-title {
   display: block;
   align-content: center;
-  flex: 1 1 0%;
+  max-width: 16em;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
   text-transform: uppercase;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size0);