@jupyter/chat 0.20.0-alpha.2 → 0.20.0-alpha.3

package/src/widgets/multichat-panel.tsx

@@ -12,20 +12,21 @@ import { InputDialog } from '@jupyterlab/apputils';
 import {
   addIcon,
   closeIcon,
-  HTMLSelect,
   launchIcon,
   PanelWithToolbar,
   ReactWidget,
-  SidePanel,
   Spinner,
   ToolbarButton
 } from '@jupyterlab/ui-components';
+import { ArrayExt } from '@lumino/algorithm';
+import { Message } from '@lumino/messaging';
 import { Debouncer } from '@lumino/polling';
 import { ISignal, Signal } from '@lumino/signaling';
-import { AccordionPanel, Panel } from '@lumino/widgets';
-import React, { useState } from 'react';
+import { Widget } from '@lumino/widgets';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { ChatWidget } from './chat-widget';
+import { ChatSelectorPopup } from './chat-selector-popup';
 import {
   Chat,
   IInputToolbarRegistry,
@@ -37,13 +38,16 @@ import { IChatModel } from '../model';
 const SIDEPANEL_CLASS = 'jp-chat-sidepanel';
 const ADD_BUTTON_CLASS = 'jp-chat-add';
 const OPEN_SELECT_CLASS = 'jp-chat-open';
-const SECTION_CLASS = 'jp-chat-section';
-const TOOLBAR_CLASS = 'jp-chat-section-toolbar';
+const SIDEPANEL_WIDGET_CLASS = 'jp-chat-sidepanel-widget';
+const TOOLBAR_CLASS = 'jp-chat-sidepanel-widget-toolbar';
 
 /**
  * Generic sidepanel widget including multiple chats and the add chat button.
  */
-export class MultiChatPanel extends SidePanel {
+export class MultiChatPanel extends PanelWithToolbar {
+  /**
+   * The constructor of the multichat panel.
+   */
   constructor(options: MultiChatPanel.IOptions) {
     super(options);
     this.id = 'jupyter-chat::multi-chat-panel';
@@ -65,68 +69,147 @@ export class MultiChatPanel extends SidePanel {
       const addChat = new ToolbarButton({
         onClick: async () => {
           const addChatArgs = await this._createModel!();
-          this.addChat(addChatArgs);
+          this.open(addChatArgs);
         },
         icon: addIcon,
-        label: 'Chat',
-        tooltip: 'Add a new chat'
+        tooltip: 'Create a new chat'
       });
       addChat.addClass(ADD_BUTTON_CLASS);
       this.toolbar.addItem('createChat', addChat);
     }
 
     if (this._getChatNames && this._createModel) {
-      // Chat select dropdown
+      // Chat selector with search input
       this._openChatWidget = ReactWidget.create(
-        <ChatSelect
-          chatNamesChanged={this._chatNamesChanged}
-          handleChange={this._chatSelected.bind(this)}
+        <ChatSearchInput
+          selectChat={this._onSelectChat}
+          getPopup={() => this._chatSelectorPopup}
+          chatOpened={this._chatOpened}
         />
       );
       this._openChatWidget.addClass(OPEN_SELECT_CLASS);
       this.toolbar.addItem('openChat', this._openChatWidget);
-    }
 
-    const content = this.content as AccordionPanel;
-    content.expansionToggled.connect(this._onExpansionToggled, this);
+      // Create the popup widget (attached to document body)
+      this._chatSelectorPopup = new ChatSelectorPopup({
+        chatNames: [],
+        onSelect: this._onSelectChat,
+        onClose: (name: string) => {
+          this.disposeLoadedModel(name);
+        }
+      });
+    }
 
+    // Insert the toolbar as first child.
+    this.insertWidget(0, this.toolbar);
     this._updateChatListDebouncer = new Debouncer(this._updateChatList, 200);
   }
 
   /**
-   * The sections of the side panel.
+   * The currently displayed chat widget.
    */
-  get sections(): ChatSection[] {
-    return this.widgets as ChatSection[];
+  get current(): SidePanelWidget | undefined {
+    return this._currentWidget;
   }
 
   /**
-   * A signal emitting when a section is added to the panel.
+   * A signal emitting when a chat widget is opened in the panel.
    */
-  get sectionAdded(): ISignal<MultiChatPanel, ChatSection> {
-    return this._sectionAdded;
+  get chatOpened(): ISignal<MultiChatPanel, ChatWidget> {
+    return this._chatOpened;
   }
 
   /**
-   * Add a new widget to the chat panel.
-   *
-   * @param model - the model of the chat widget
-   * @param displayName - the name of the chat.
+   * A signal emitting when the panel visibility changed.
    */
+  get visibilityChanged(): ISignal<MultiChatPanel, boolean> {
+    return this._visibilityChanged;
+  }
 
-  addChat(args: MultiChatPanel.IAddChatArgs): ChatWidget | undefined {
-    const { model, displayName } = args;
+  /**
+   * Add a chat to the panel by creating or showing its widget.
+   *
+   * @param args - the chat args including model and display name.
+   */
+  open(args: MultiChatPanel.IOpenChatArgs): ChatWidget | undefined {
+    const { model } = args;
     if (!model) {
       return;
     }
 
-    if (this.openIfExists(model.name)) {
+    const displayName = args.displayName ?? model.name;
+
+    // Add model to loaded models
+    if (!this._loadedModels.has(displayName)) {
+      this._loadedModels.set(displayName, model);
+      this._chatSelectorPopup?.setLoadedModels(this.getLoadedModelNames());
+    }
+
+    // Open this chat (will create widget)
+    return this._open(displayName);
+  }
+
+  /**
+   * Get a loaded model by name, or undefined if not loaded.
+   */
+  getLoadedModel(name: string): IChatModel | undefined {
+    return this._loadedModels.get(name);
+  }
+
+  /**
+   * Get all loaded model names.
+   */
+  getLoadedModelNames(): string[] {
+    return Array.from(this._loadedModels.keys());
+  }
+
+  /**
+   * Dispose a model, removing it from loaded models.
+   */
+  disposeLoadedModel(name: string): void {
+    const model = this._loadedModels.get(name);
+    if (model) {
+      // If this is the currently displayed chat, remove it.
+      if (this._currentWidget?.model === model) {
+        this._currentWidget.nameChanged.disconnect(this._modelNameChanged);
+        this._currentWidget.dispose();
+        this._currentWidget = undefined;
+
+        // Clear current chat in selector
+        if (this._chatSelectorPopup) {
+          this._chatSelectorPopup.setCurrentChat(null);
+        }
+      }
+
+      model.dispose();
+      this._loadedModels.delete(name);
+      this._chatSelectorPopup?.setLoadedModels(this.getLoadedModelNames());
+    }
+  }
+
+  /**
+   * Emit a signal when the panel visibility changed.
+   */
+  protected onAfterShow(msg: Message): void {
+    this._visibilityChanged.emit(true);
+  }
+  protected onBeforeHide(msg: Message): void {
+    this._visibilityChanged.emit(false);
+  }
+
+  /**
+   * Open a specific chat by name, creating a new sidepanel widget.
+   */
+  private _open(name: string): ChatWidget | undefined {
+    const model = this._loadedModels.get(name);
+    if (!model) {
       return;
     }
 
-    const content = this.content as AccordionPanel;
-    for (let i = 0; i < this.widgets.length; i++) {
-      content.collapse(i);
+    // Dispose current chat widget if any
+    if (this._currentWidget) {
+      this._currentWidget.nameChanged.disconnect(this._modelNameChanged);
+      this._currentWidget.dispose();
     }
 
     // Create the toolbar registry.
@@ -135,34 +218,47 @@ export class MultiChatPanel extends SidePanel {
       inputToolbarRegistry = this._inputToolbarFactory.create();
     }
 
-    // Create a new widget.
-    const widget = new ChatWidget({
+    // Create a new widget for this model
+    const chatWidget = new ChatWidget({
       model,
       ...this._chatOptions,
       inputToolbarRegistry,
       area: 'sidebar'
     });
 
-    const section = new ChatSection({
-      widget,
+    // Create a chat with toolbar
+    const widget = new SidePanelWidget({
+      widget: chatWidget,
+      displayName: name,
       openInMain: this._openInMain,
       renameChat: this._renameChat,
-      displayName
+      onClose: (name: string) => {
+        this.disposeLoadedModel(name);
+      }
     });
 
-    this.addWidget(section);
-    content.expand(this.widgets.length - 1);
+    // Add to content panel
+    this.addWidget(widget);
+    this.update();
+    this._currentWidget = widget;
 
-    this._sectionAdded.emit(section);
-    return widget;
+    this._currentWidget.nameChanged.connect(this._modelNameChanged);
+
+    // Update selector to show current chat
+    if (this._chatSelectorPopup) {
+      this._chatSelectorPopup.setCurrentChat(name);
+    }
+
+    this._chatOpened.emit(chatWidget);
+    return chatWidget;
   }
 
   /**
    * Invoke the update of the list of available chats.
    */
-  updateChatList() {
+  updateChatList = (): void => {
     this._updateChatListDebouncer.invoke();
-  }
+  };
 
   /**
    * Update the list of available chats.
@@ -170,24 +266,33 @@ export class MultiChatPanel extends SidePanel {
   private _updateChatList = async (): Promise<void> => {
     try {
       const chatNames = await this._getChatNames?.();
-      this._chatNamesChanged.emit(chatNames ?? {});
+      if (
+        !ArrayExt.shallowEqual(
+          Object.keys(chatNames ?? {}),
+          Object.keys(this._chatNames)
+        )
+      ) {
+        this._chatNames = chatNames ?? {};
+        this._chatSelectorPopup?.updateChats(Object.keys(this._chatNames));
+      }
     } catch (e) {
       console.error('Error getting chat files', e);
     }
   };
 
   /**
-   * Open a chat if it exists in the side panel.
+   * Open a chat if its model is already loaded.
    *
    * @param name - the name of the chat.
-   * @returns a boolean, whether the chat existed in the side panel or not.
+   * @returns a boolean, whether the chat model was already loaded or not.
    */
-  openIfExists(name: string): boolean {
-    const index = this._getChatIndex(name);
-    if (index > -1) {
-      this._expandChat(index);
+  openIfLoaded(name: string): boolean {
+    const model = this._loadedModels.get(name);
+    if (model) {
+      this._open(name);
+      return true;
     }
-    return index > -1;
+    return false;
   }
 
   /**
@@ -195,74 +300,95 @@ export class MultiChatPanel extends SidePanel {
    */
   protected onAfterAttach(): void {
     this._openChatWidget?.renderPromise?.then(() => this.updateChatList());
+
+    // Attach the popup to the document body
+    if (this._chatSelectorPopup && !this._chatSelectorPopup.isAttached) {
+      Widget.attach(this._chatSelectorPopup, document.body);
+    }
   }
 
   /**
-   * Return the index of the chat in the list (-1 if not opened).
-   *
-   * @param name - the chat name.
+   * A message handler invoked on an `'before-detach'` message.
    */
-  private _getChatIndex(name: string) {
-    return this.sections.findIndex(section => section.model?.name === name);
+  protected onBeforeDetach(): void {
+    // Detach the popup
+    if (this._chatSelectorPopup && this._chatSelectorPopup.isAttached) {
+      Widget.detach(this._chatSelectorPopup);
+    }
   }
 
   /**
-   * Expand the chat from its index.
+   * Dispose of the resources held by the widget.
    */
-  private _expandChat(index: number): void {
-    if (!this.widgets[index].isVisible) {
-      (this.content as AccordionPanel).expand(index);
+  dispose(): void {
+    // Dispose all loaded models
+    for (const model of this._loadedModels.values()) {
+      model.dispose();
     }
+    this._loadedModels.clear();
+
+    if (this._chatSelectorPopup) {
+      this._chatSelectorPopup.dispose();
+      this._chatSelectorPopup = undefined;
+    }
+    super.dispose();
   }
 
   /**
-   * Handle `change` events for the HTMLSelect component.
+   * Update loaded model when the current widget updates its name.
    */
-  private async _chatSelected(
-    event: React.ChangeEvent<HTMLSelectElement>
-  ): Promise<void> {
-    const selection = event.target.value;
-    if (selection === '-') {
-      return;
-    }
-    if (this._createModel) {
-      const addChatArgs = await this._createModel(selection);
-      this.addChat(addChatArgs);
+  private _modelNameChanged = (
+    _: SidePanelWidget,
+    change: { old: string; new: string }
+  ) => {
+    const model = this.getLoadedModel(change.old);
+    if (model) {
+      this._loadedModels.set(change.new, model);
+      this._loadedModels.delete(change.old);
+      this._chatSelectorPopup?.setLoadedModels(this.getLoadedModelNames());
+      if (this._currentWidget?.model.name === model.name) {
+        this._chatSelectorPopup?.setCurrentChat(change.new);
+      }
     }
-    event.target.selectedIndex = 0;
-  }
+  };
 
   /**
-   * Triggered when a section is toggled. If the section is opened, all others
-   * sections are closed.
+   * Handle chat selection from the popup.
    */
-  private _onExpansionToggled(panel: AccordionPanel, index: number) {
-    if (!this.widgets[index].isVisible) {
-      return;
+  private _onSelectChat = async (name: string): Promise<void> => {
+    // Check if model is already loaded
+    let openChatArgs: MultiChatPanel.IOpenChatArgs = {
+      model: this.getLoadedModel(name),
+      displayName: name
+    };
+    // If not, create the model.
+    if (!openChatArgs.model && this._createModel) {
+      const chatID = this._chatNames[name];
+      openChatArgs = await this._createModel(chatID);
     }
-    for (let i = 0; i < this.widgets.length; i++) {
-      if (i !== index) {
-        panel.collapse(i);
-      }
+    if (openChatArgs.model) {
+      this.open(openChatArgs);
     }
-  }
+    this._chatSelectorPopup?.hide();
+  };
 
-  private _chatNamesChanged = new Signal<this, { [name: string]: string }>(
-    this
-  );
-  private _sectionAdded = new Signal<MultiChatPanel, ChatSection>(this);
+  private _chatOpened = new Signal<MultiChatPanel, ChatWidget>(this);
   private _chatOptions: Omit<Chat.IOptions, 'model' | 'inputToolbarRegistry'>;
   private _inputToolbarFactory?: IInputToolbarRegistryFactory;
   private _updateChatListDebouncer: Debouncer;
 
   private _createModel?: (
     name?: string
-  ) => Promise<MultiChatPanel.IAddChatArgs>;
+  ) => Promise<MultiChatPanel.IOpenChatArgs>;
   private _getChatNames?: () => Promise<{ [name: string]: string }>;
   private _openInMain?: (name: string) => Promise<boolean>;
-  private _renameChat?: (oldName: string, newName: string) => Promise<boolean>;
-
+  private _renameChat?: boolean | ((oldName: string) => Promise<string | null>);
   private _openChatWidget?: ReactWidget;
+  private _chatSelectorPopup?: ChatSelectorPopup;
+  private _loadedModels: Map<string, IChatModel> = new Map();
+  private _currentWidget?: SidePanelWidget;
+  private _chatNames: { [name: string]: string } = {};
+  private _visibilityChanged = new Signal<MultiChatPanel, boolean>(this);
 }
 
 /**
@@ -273,7 +399,7 @@ export namespace MultiChatPanel {
    * Options of the constructor of the chat panel.
    */
   export interface IOptions
-    extends SidePanel.IOptions,
+    extends PanelWithToolbar.IOptions,
       Omit<Chat.IOptions, 'model' | 'inputToolbarRegistry'> {
     /**
      * The input toolbar factory;
@@ -283,13 +409,13 @@ export namespace MultiChatPanel {
      * An optional callback to create a chat model.
      *
      * @param name - the name of the chat, optional.
-     * @return an object that can be passed to add a chat section.
+     * @return an object that can be passed to open the chat.
      */
-    createModel?: (name?: string) => Promise<IAddChatArgs>;
+    createModel?: (name?: string) => Promise<IOpenChatArgs>;
     /**
      * An optional callback to get the list of existing chats.
      *
-     * @returns an object with display name as key and the "full" name as value.
+     * @returns an object mapping chat display names to identifiers.
      */
     getChatNames?: () => Promise<{ [name: string]: string }>;
     /**
@@ -305,42 +431,50 @@ export namespace MultiChatPanel {
      * @param newName - the new name of the chat.
      * @returns - a boolean, whether the chat has been renamed or not.
      */
-    renameChat?: (oldName: string, newName: string) => Promise<boolean>;
+    renameChat?: boolean | ((oldName: string) => Promise<string | null>);
   }
   /**
    * The options for the add chat method.
    */
-  export interface IAddChatArgs {
+  export interface IOpenChatArgs {
     /**
      * The model of the chat.
-     * No-op id undefined.
+     * No-op if undefined.
      */
     model?: IChatModel;
     /**
-     * The display name of the chat in the section title.
+     * The display name of the chat, shown in the toolbar.
      */
     displayName?: string;
   }
 }
 
 /**
- * The chat section containing a chat widget.
+ * A widget containing the chat and its toolbar.
  */
-export class ChatSection extends PanelWithToolbar {
-  /**
-   * Constructor of the chat section.
-   */
-  constructor(options: ChatSection.IOptions) {
-    super(options);
+class SidePanelWidget extends PanelWithToolbar {
+  constructor(options: SidePanelWidget.IOptions) {
+    super();
     this._chatWidget = options.widget;
-    this.addWidget(this._chatWidget);
-    this.addWidget(this._spinner);
-    this.addClass(SECTION_CLASS);
+    this._displayName = options.displayName ?? options.widget.model.name;
+
+    this.addClass(SIDEPANEL_WIDGET_CLASS);
     this.toolbar.addClass(TOOLBAR_CLASS);
-    this._displayName =
-      options.displayName ?? options.widget.model.name ?? 'Chat';
     this._updateTitle();
 
+    this.addWidget(this.toolbar);
+
+    // Add spinner while loading
+    const spinner = new Spinner();
+    this.addWidget(spinner);
+    this._chatWidget.model.ready.then(() => {
+      spinner.dispose();
+    });
+
+    // Add the chat widget
+    this.addWidget(this._chatWidget);
+
+    // Add toolbar buttons
     this._markAsRead = new ToolbarButton({
       icon: readIcon,
       iconLabel: 'Mark chat as read',
@@ -359,22 +493,30 @@ export class ChatSection extends PanelWithToolbar {
         iconLabel: 'Rename chat',
         className: 'jp-mod-styled',
         onClick: async () => {
-          const oldName = this.model.name ?? 'Chat';
-          const result = await InputDialog.getText({
-            title: 'Rename Chat',
-            text: this.model.name,
-            placeholder: 'new-name'
-          });
-          if (!result.button.accept) {
-            return; // user cancelled
+          if (!options.renameChat) {
+            return;
           }
-          const newName = result.value;
-          if (this.model && newName && newName !== oldName) {
-            if (await options.renameChat?.(oldName, newName)) {
+          let newName: string | null;
+          if (options.renameChat === true) {
+            // If rename chat is true, let's provide a input to select new name.
+            const result = await InputDialog.getText({
+              title: 'Rename Chat',
+              text: this.model.name,
+              placeholder: 'new-name'
+            });
+            if (!result.button.accept && result.value) {
+              return;
+            }
+            newName = result.value;
+            if (newName) {
               this.model.name = newName;
-              this._displayName = newName;
-              this._updateTitle();
             }
+          } else {
+            // Rename chat is a function, let's call it.
+            newName = await options.renameChat(this.model.name);
+          }
+          if (newName) {
+            this.name = newName;
           }
         }
       });
@@ -389,8 +531,7 @@ export class ChatSection extends PanelWithToolbar {
         onClick: async () => {
           const name = this.model.name;
           if (await options.openInMain?.(name)) {
-            this.model.dispose();
-            this.dispose();
+            options.onClose(this._displayName);
           }
         }
       });
@@ -402,49 +543,51 @@ export class ChatSection extends PanelWithToolbar {
       iconLabel: 'Close the chat',
       className: 'jp-mod-styled',
       onClick: () => {
-        this.model.dispose();
-        this.dispose();
+        options.onClose(this._displayName);
       }
     });
-
     this.toolbar.addItem('close', closeButton);
 
+    // Update mark as read button state
     this.model.unreadChanged?.connect(this._unreadChanged);
     this._markAsRead.enabled = (this.model?.unreadMessages.length ?? 0) > 0;
+  }
 
-    options.widget.node.style.height = '100%';
+  /**
+   * The chat widget embedded in the sidepanel widget.
+   */
+  get widget(): ChatWidget {
+    return this._chatWidget;
+  }
 
-    /**
-     * Remove the spinner when the chat is ready.
-     */
-    this.model.ready.then(() => {
-      this._spinner.dispose();
-    });
+  /**
+   * The model of the widget.
+   */
+  get model(): IChatModel {
+    return this._chatWidget.model;
   }
 
   /**
-   * The display name.
+   * The displayed name of the widget.
    */
-  get displayName(): string {
+  get name(): string {
     return this._displayName;
   }
-  set displayName(value: string) {
+  set name(value: string) {
+    const old = this._displayName;
+    if (old === value) {
+      return;
+    }
     this._displayName = value;
     this._updateTitle();
+    this._nameChanged.emit({ old, new: value });
   }
 
   /**
-   * The chat widget of the section.
-   */
-  get widget(): ChatWidget {
-    return this._chatWidget;
-  }
-
-  /**
-   * The model of the widget.
+   * A signal emitting when the name has changed.
    */
-  get model(): IChatModel {
-    return this._chatWidget.model;
+  get nameChanged(): ISignal<SidePanelWidget, { old: string; new: string }> {
+    return this._nameChanged;
   }
 
   /**
@@ -459,21 +602,29 @@ export class ChatSection extends PanelWithToolbar {
   }
 
   /**
-   *  * Update the section’s title based on the chat name.
-   * */
-
+   * Update the title based on the chat name.
+   */
   private _updateTitle(): void {
-    this.title.label = this._displayName;
+    this.title.label = this.model.name;
     this.title.caption = this._displayName;
+
+    const titleElement = document.createElement('span');
+    titleElement.classList.add('jp-chat-sidepanel-widget-title');
+    titleElement.title = this._displayName;
+    titleElement.textContent = this._displayName;
+
+    // Dispose of the previous widget.
+    if (this._titleWidget) {
+      this._titleWidget.dispose();
+    }
+
+    // Insert the new title widget in toolbar.
+    this._titleWidget = new Widget({ node: titleElement });
+    this.toolbar.insertItem(0, 'title', this._titleWidget);
   }
 
   /**
-   * Change the title when messages are unread.
-   *
-   * TODO: fix it upstream in @jupyterlab/ui-components.
-   * Updating the title create a new Title widget, but does not attach again the
-   * toolbar. The toolbar is attached only when the title widget is attached the first
-   * time.
+   * Enable/disable unread icon.
    */
   private _unreadChanged = (_: IChatModel, unread: number[]) => {
     this._markAsRead.enabled = unread.length > 0;
@@ -481,82 +632,158 @@ export class ChatSection extends PanelWithToolbar {
 
   private _chatWidget: ChatWidget;
   private _markAsRead: ToolbarButton;
-  private _spinner = new Spinner();
   private _displayName: string;
+  private _titleWidget: Widget | undefined;
+  private _nameChanged = new Signal<
+    SidePanelWidget,
+    { old: string; new: string }
+  >(this);
 }
 
 /**
- * The chat section namespace.
+ * The sidepanel widget namespace.
  */
-export namespace ChatSection {
+namespace SidePanelWidget {
   /**
-   * Options to build a chat section.
+   * The sidepanel widget constructor options.
    */
-  export interface IOptions extends Panel.IOptions {
+  export interface IOptions {
     /**
-     * The widget to display in the section.
+     * The chat widget.
      */
     widget: ChatWidget;
     /**
-     * An optional callback to open the chat in the main area.
-     *
-     * @param name - the name of the chat to move.
+     * The callback when closing the chat.
      */
-    openInMain?: (name: string) => Promise<boolean>;
+    onClose: (name: string) => void;
     /**
-     * An optional callback to rename a chat.
-     *
-     * @param oldName - the old name of the chat.
-     * @param newName - the new name of the chat.
-     * @returns - a boolean, whether the chat has been renamed or not.
+     * The displayed name of the chat.
      */
-    renameChat?: (oldName: string, newName: string) => Promise<boolean>;
+    displayName?: string;
     /**
-     * The name to display in the section title.
+     * The callback to open the chat in main area.
      */
-    displayName?: string;
+    openInMain?: (name: string) => Promise<boolean>;
+    /**
+     * The callback to rename the chat.
+     */
+    renameChat?: boolean | ((oldName: string) => Promise<string | null>);
   }
 }
 
-type ChatSelectProps = {
+type ChatSearchInputProps = {
   /**
-   * A signal emitting when the list of chat changed.
+   * The callback to call when a chat is selected.
    */
-  chatNamesChanged: ISignal<MultiChatPanel, { [name: string]: string }>;
+  selectChat: (value: string) => void;
   /**
-   * The callback to call when the selection changed in the select.
+   * Function to get the popup widget.
    */
-  handleChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  getPopup: () => ChatSelectorPopup | undefined;
+  /**
+   * Signal emitting when a chat is opened.
+   */
+  chatOpened: ISignal<MultiChatPanel, ChatWidget>;
 };
 
 /**
- * A component to select a chat from the drive.
+ * A search input component for selecting a chat.
  */
-function ChatSelect({
-  chatNamesChanged,
-  handleChange
-}: ChatSelectProps): JSX.Element {
-  // An object associating a chat name to its path. Both are purely indicative, the name
-  // is the section title and the path is used as caption.
-  const [chatNames, setChatNames] = useState<{ [name: string]: string }>({});
-
-  // Update the chat list.
-  chatNamesChanged.connect((_, chatNames) => {
-    setChatNames(chatNames);
-  });
+function ChatSearchInput({
+  selectChat,
+  getPopup,
+  chatOpened
+}: ChatSearchInputProps): JSX.Element {
+  const [query, setQuery] = useState<string>('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const resetQuery = () => {
+      setQuery('');
+    };
+    chatOpened.connect(resetQuery);
+
+    return () => {
+      chatOpened.disconnect(resetQuery);
+    };
+  }, [chatOpened]);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setQuery(value);
+    const popup = getPopup();
+    if (popup) {
+      popup.setQuery(value);
+      if (!popup.isVisible && value) {
+        popup.show();
+      }
+    }
+  };
+
+  const handleInputFocus = () => {
+    const popup = getPopup();
+    if (popup && inputRef.current) {
+      // Set anchor element before showing
+      popup.anchor = inputRef.current;
+      popup.setQuery(query);
+      popup.show();
+    }
+  };
+
+  const handleInputClick = () => {
+    const popup = getPopup();
+    if (popup && inputRef.current && !popup.isVisible) {
+      popup.anchor = inputRef.current;
+      popup.setQuery(query);
+      popup.show();
+    }
+    // Force focus on input.
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const popup = getPopup();
+    if (!popup || !popup.isVisible) {
+      return;
+    }
+
+    let value: string | null;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        popup.selectNext();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        popup.selectPrevious();
+        break;
+      case 'Enter':
+        event.preventDefault();
+        value = popup.getSelectedValue();
+        if (value) {
+          selectChat(value);
+          popup.hide();
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        popup.hide();
+        setQuery('');
+        break;
+    }
+  };
 
   return (
-    <HTMLSelect
-      key={Object.keys(chatNames).join()}
-      onChange={handleChange}
-      value="-"
-    >
-      <option value="-" disabled hidden>
-        Open a chat
-      </option>
-      {Object.keys(chatNames).map(name => (
-        <option value={chatNames[name]}>{name}</option>
-      ))}
-    </HTMLSelect>
+    <input
+      ref={inputRef}
+      type="text"
+      placeholder="Select a chat"
+      value={query}
+      onChange={handleInputChange}
+      onFocus={handleInputFocus}
+      onClick={handleInputClick}
+      onKeyDown={handleKeyDown}
+      className="jp-chat-search-input"
+    />
   );
 }