Open the AI settings in a side panel in Notebook application (#1309)

Author: brichet

packages/jupyter-ai/package.json

@@ -61,6 +61,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@jupyter-notebook/application": "^7.2.0",
     "@jupyter/chat": "^0.8.1",
     "@jupyterlab/application": "^4.2.0",
     "@jupyterlab/apputils": "^4.2.0",
@@ -75,6 +76,7 @@
     "@jupyterlab/services": "^7.2.0",
     "@jupyterlab/settingregistry": "^4.2.0",
     "@jupyterlab/ui-components": "^4.2.0",
+    "@lumino/widgets": "^2.3.2",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "react": "^18.2.0",

packages/jupyter-ai/src/index.ts

@@ -1,3 +1,4 @@
+import { INotebookShell } from '@jupyter-notebook/application';
 import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
@@ -11,6 +12,7 @@ import {
 } from '@jupyterlab/apputils';
 import { IDocumentWidget } from '@jupyterlab/docregistry';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { SingletonLayout, Widget } from '@lumino/widgets';
 
 import { chatCommandPlugins } from './chat-commands';
 import { completionPlugin } from './completions';
@@ -35,13 +37,19 @@ const plugin: JupyterFrontEndPlugin<void> = {
   id: '@jupyter-ai/core:plugin',
   autoStart: true,
   requires: [IRenderMimeRegistry],
-  optional: [ICommandPalette, IThemeManager, IJaiCompletionProvider],
+  optional: [
+    ICommandPalette,
+    IThemeManager,
+    IJaiCompletionProvider,
+    INotebookShell
+  ],
   activate: async (
     app: JupyterFrontEnd,
     rmRegistry: IRenderMimeRegistry,
     palette: ICommandPalette | null,
     themeManager: IThemeManager | null,
-    completionProvider: IJaiCompletionProvider | null
+    completionProvider: IJaiCompletionProvider | null,
+    notebookShell: INotebookShell | null
   ) => {
     const openInlineCompleterSettings = () => {
       app.commands.execute('settingeditor:open', {
@@ -50,7 +58,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
     };
 
     // Create a AI settings widget.
-    let aiSettings: MainAreaWidget<ReactWidget>;
+    let aiSettings: Widget;
     let settingsWidget: ReactWidget;
     try {
       settingsWidget = buildAiSettings(
@@ -67,13 +75,20 @@ const plugin: JupyterFrontEndPlugin<void> = {
     app.commands.addCommand(CommandIDs.openAiSettings, {
       execute: () => {
         if (!aiSettings || aiSettings.isDisposed) {
-          aiSettings = new MainAreaWidget({ content: settingsWidget });
+          if (notebookShell) {
+            aiSettings = new Widget();
+            const layout = new SingletonLayout();
+            aiSettings.layout = layout;
+            layout.widget = settingsWidget;
+          } else {
+            aiSettings = new MainAreaWidget({ content: settingsWidget });
+          }
           aiSettings.id = 'jupyter-ai-settings';
           aiSettings.title.label = 'AI settings';
           aiSettings.title.closable = true;
         }
         if (!aiSettings.isAttached) {
-          app?.shell.add(aiSettings, 'main');
+          app?.shell.add(aiSettings, notebookShell ? 'left' : 'main');
         }
         app.shell.activateById(aiSettings.id);
       },