npm - @notebook-intelligence/notebook-intelligence - Versions diffs - 1.2.5 → 1.3.0 - Mend

@notebook-intelligence/notebook-intelligence 1.2.5 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md CHANGED Viewed

@@ -21,11 +21,19 @@ See blog posts for features and usage.
 <img src="media/copilot-chat.gif" alt="Chat interface" width=600 />
-[![Github Actions Status](https://github.com/notebook-intelligence/notebook-intelligence/workflows/Build/badge.svg)](https://github.com/notebook-intelligence/notebook-intelligence/actions/workflows/build.yml)
+## Installation
-## Configuring LLM Provider and models
+NBI requires JupyterLab >= 4.0.0. To install the extension, run the command below and restart JupyterLab.
-You can configure the model provider and model options using the Notebook Intelligence Settings dialog. You can access this dialog from JupyterLab Settings menu -> Notebook Intelligence Settings, using `/settings` command in Copilot Chat or by using the command palette. For more details, see the [blog post](https://notebook-intelligence.github.io/notebook-intelligence/blog/2025/03/05/support-for-any-llm-provider.html).
+```bash
+pip install notebook-intelligence
+```
+## Configuration options
+### Configuring LLM Provider and models
+You can configure the model provider and model options using the Notebook Intelligence Settings dialog. You can access this dialog from JupyterLab Settings menu -> Notebook Intelligence Settings, using `/settings` command in NBI Chat or by using the command palette. For more details, see the [blog post](https://notebook-intelligence.github.io/notebook-intelligence/blog/2025/03/05/support-for-any-llm-provider.html).
 <img src="media/provider-list.png" alt="Settings dialog" width=500 />
@@ -35,28 +43,6 @@ This extension is composed of a Python package named `notebook_intelligence`
 for the server extension and a NPM package named `@notebook-intelligence/notebook-intelligence`
 for the frontend extension.
-## Requirements
-- JupyterLab >= 4.0.0
-## Install
-To install the extension, execute:
-```bash
-pip install notebook_intelligence
-```
-## Uninstall
-To remove the extension, execute:
-```bash
-pip uninstall notebook_intelligence
-```
-## Configuration options
 ### Remembering GitHub Copilot login
 Notebook Intelligence uses system keyring to store the GitHub access tokens. If your stored access token fails to login (due to expiration or other reasons), you will be prompted to relogin on the UI. If you run into issues with this feature, check the Jupyter server logs and the [keyring package](https://github.com/jaraco/keyring) documentation.
@@ -73,79 +59,183 @@ Once you set it to remember, it will continue to remember even if you skip `--No
 jupyter lab --NotebookIntelligence.github_access_token=forget
 ```
-## Troubleshoot
+### Configuration files
-If you are seeing the frontend extension, but it is not working, check
-that the server extension is enabled:
+NBI saves configuration at `~/.jupyter/nbi-config.json`. It also supports environment wide base configuration at `<env-prefix>/share/jupyter/nbi-config.json`. Organizations can ship default configuration at this environment wide config path. User's changes will be stored as overrides at `~/.jupyter/nbi-config.json`.
-```bash
-jupyter server extension list
-```
+These config files are used for saving LLM provider, model and MCP configuration. Note that API keys you enter for your custom LLM providers will also be stored in these config files.
-If the server extension is installed and enabled, but you are not seeing
-the frontend extension, check the frontend extension is installed:
+> [!IMPORTANT]
+> Note that updating nbi-config.json manually requires restarting JupyterLab to take effect.
-```bash
-jupyter labextension list
-```
+### Model Context Protocol ([MCP](https://modelcontextprotocol.io)) Support
-## Contributing
+NBI seamlessly integrates with MCP servers. It supports servers with both Standard Input/Output (stdio) and Server-Sent Events (SSE) transports. The MCP support is limited to server tools at the moment.
-### Development install
+You can easily add MCP servers to NBI by editing the configuration file [nbi-config.json](#configuration-files). Simply add a key "mcp" and "mcpServers" under it as shown below.
-Note: You will need NodeJS to build the extension package.
+> [!NOTE]
+> Using MCP servers requires an LLM model with tool calling capabilities. All of the GitHub Copilot models provided in NBI support this feature. If you are using other providers make sure you choose a tool calling capable model.
-The `jlpm` command is JupyterLab's pinned version of
-[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
-`yarn` or `npm` in lieu of `jlpm` below.
+> [!CAUTION]
+> Note that most MCP servers are run on the same computer as your JupyterLab installation and they can make irreversible changes to your computer and/or access private data. Make sure that you only install MCP servers from trusted sources.
-```bash
-# Clone the repo to your local environment
-# Change directory to the notebook_intelligence directory
-# Install package in development mode
-pip install -e "."
-# Link your development version of the extension with JupyterLab
-jupyter labextension develop . --overwrite
-# Server extension must be manually installed in develop mode
-jupyter server extension enable notebook_intelligence
-# Rebuild extension Typescript source after making changes
-jlpm build
+```json
+{
+    "chat_model": {
+        ...
+    },
+    ...<other configuration>,
+    "mcp": {
+        "mcpServers": {
+            "filesystem": {
+                "command": "npx",
+                "args": [
+                    "-y",
+                    "@modelcontextprotocol/server-filesystem",
+                    "/Users/mbektas/mcp-test"
+                ]
+            },
+        }
+    }
+}
 ```
-You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
+This will automatically create a new chat participant in NBI and you can access it by starting your prompts with `@mcp`. Use `@mcp /info` prompt to get information on the tools provided by the MCP servers you configured. This chat participant will have access all the tools provided by the servers you configure.
-```bash
-# Watch the source directory in one terminal, automatically rebuilding when needed
-jlpm watch
-# Run JupyterLab in another terminal
-jupyter lab
+<img src="media/mcp-prompt.png" alt="Settings dialog" width=600 />
+By default, each tool call to MCP servers will require approval. If you would like to auto approve tools, you can do so by using the `"alwaysAllow": []` configuration key in the nbi-config.json. Simply list the names of tools.
+```json
+"mcpServers": {
+    "filesystem": {
+        "command": "npx",
+        "args": [
+            "-y",
+            "@modelcontextprotocol/server-filesystem",
+            "/Users/mbektas/mcp-test"
+        ],
+        "alwaysAllow": ["list_allowed_directories", "list_directory"]
+    },
+}
 ```
-With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
+For servers with stdio transport, you can also set additional environment variables by using the `env` key. Environment variables are specified as key value pairs.
+```json
+"mcpServers": {
+    "servername": {
+        "command": "",
+        "args": [],
+        "env": {
+            "ENV_VAR_NAME": "ENV_VAR_VALUE"
+        }
+    },
+}
+```
-By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
+Below is an example of a server configuration with SSE transport. For SSE transport servers, you can also specify headers to be sent as part of the requests.
+```json
+"mcpServers": {
+    "remoterservername": {
+        "url": "http://127.0.0.1:8080/sse",
+        "headers": {
+            "Authorization": "Bearer mysecrettoken"
+        }
+    },
+}
+```
-```bash
-jupyter lab build --minimize=False
+If you have multiple servers configured but you would like to disable some for a while, you can do so by using the `disabled` key. `servername2` will be diabled and not available in `@mcp` chat participant.
+```json
+"mcpServers": {
+    "servername1": {
+        "command": "",
+        "args": [],
+    },
+    "servername2": {
+        "command": "",
+        "args": [],
+        "disabled": true
+    },
+}
 ```
-### Development uninstall
+#### Grouping MCP servers
+When you integrate multiple MCP servers to NBI, all of their tools will be available under the same chat participant `@mcp`. However, this may not be ideal in many situations. You may want to group certain servers and their tools based on their functionality. NBI lets you do that easily by configuring MCP chat participants. You can list the servers for each custom participant. If there are any unassigned MCP servers, then they will be used the default `@mcp` chat participant.
+Below is an example of creating a custom MCP participant. This configuration results in two chat participants `@mcp-fs` with `filesytem` MC server tools and `@mcp` with `servername1` and `servername1` MCP server tools.
+```json
+{
+    "chat_model": {
+        ...
+    },
+    ...<other configuration>,
+    "mcp": {
+        "mcpServers": {
+            "filesystem": {
+                "command": "npx",
+                "args": [
+                    "-y",
+                    "@modelcontextprotocol/server-filesystem",
+                    "/Users/mbektas/mcp-test"
+                ]
+            },
+            "servername1": {
+                "command": "",
+                "args": [],
+            },
+            "servername2": {
+                "command": "",
+                "args": [],
+                "disabled": true
+            }
+        },
+        "participants": {
+            "fs": {
+                "name": "MCP - File system",
+                "servers": ["filesystem"]
+            }
+        }
+    }
+}
+```
-```bash
-# Server extension must be manually disabled in develop mode
-jupyter server extension disable notebook_intelligence
-pip uninstall notebook_intelligence
+#### Using NBI tools within MCP chat participants
+NBI allows you to access built-in tools from an MCP participant. You can do that by adding the list of built in NBI tools to your MCP participant configuration. The built-in tools available to MCP are `create_new_notebook`, `add_markdown_cell_to_notebook`, `add_code_cell_to_notebook`. Below is an example that integrates all these tools to MCP participant `@mcp-fs`.
+```json
+"participants": {
+    "fs": {
+        "name": "MCP - File system",
+        "servers": ["filesystem"],
+        "nbiTools": [
+            "create_new_notebook",
+            "add_markdown_cell_to_notebook",
+            "add_code_cell_to_notebook"
+        ]
+    }
+}
 ```
-In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
-command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
-folder is located. Then you can remove the symlink named `@notebook-intelligence/notebook-intelligence` within that folder.
+This chat participant will allow you to run example prompts like below.
-### Packaging the extension
+```
+@mcp-fs list the directories I have access to.
+```
-See [RELEASE](RELEASE.md)
+```
+@mcp-fs add a code cell which demonstrates ipywidgets Button to this notebook.
+```
-### Resources I used as reference
+### Developer documentation
-- [Copilot Internals blog post](https://thakkarparth007.github.io/copilot-explorer/posts/copilot-internals.html)
-- [B00TK1D/copilot-api for GitHub auth and inline completions](https://github.com/B00TK1D/copilot-api)
+For building locally and contributing see the [developer documentatation](CONTRIBUTING.md).

package/lib/api.js CHANGED Viewed

@@ -56,6 +56,16 @@ class NBIAPI {
         this._webSocket.onmessage = msg => {
             this._messageReceived.emit(msg.data);
         };
+        this._webSocket.onerror = msg => {
+            console.error(`Websocket error: ${msg}. Closing...`);
+            this._webSocket.close();
+        };
+        this._webSocket.onclose = msg => {
+            console.log(`Websocket is closed: ${msg.reason}. Reconnecting...`);
+            setTimeout(() => {
+                NBIAPI.initializeWebsocket();
+            }, 1000);
+        };
     }
     static getLoginStatus() {
         return this._loginStatus;

package/lib/chat-sidebar.js CHANGED Viewed

@@ -149,11 +149,11 @@ function ChatResponse(props) {
         const notebookPath = event.target.dataset['ref'];
         props.openFile(notebookPath);
     };
-    const markFormConfirmed = (messageId) => {
-        answeredForms.set(messageId, 'confirmed');
+    const markFormConfirmed = (contentId) => {
+        answeredForms.set(contentId, 'confirmed');
     };
-    const markFormCanceled = (messageId) => {
-        answeredForms.set(messageId, 'canceled');
+    const markFormCanceled = (contentId) => {
+        answeredForms.set(contentId, 'canceled');
     };
     const runCommand = (commandId, args) => {
         props.getApp().commands.execute(commandId, args);
@@ -258,15 +258,18 @@ function ChatResponse(props) {
                                 React.createElement("div", { className: "chat-reasoning-content-text" },
                                     React.createElement(MarkdownRenderer, { key: `key-${index}`, getApp: props.getApp, getActiveDocumentInfo: props.getActiveDocumentInfo }, item.reasoningContent)))),
                             React.createElement(MarkdownRenderer, { key: `key-${index}`, getApp: props.getApp, getActiveDocumentInfo: props.getActiveDocumentInfo }, item.content)));
+                    case ResponseStreamDataType.Image:
+                        return (React.createElement("div", { className: "chat-response-img", key: `key-${index}` },
+                            React.createElement("img", { src: item.content })));
                     case ResponseStreamDataType.HTMLFrame:
                         return (React.createElement(ChatResponseHTMLFrame, { index: index, source: item.content.source, height: item.content.height }));
                     case ResponseStreamDataType.Button:
-                        return (React.createElement("div", { className: "chat-response-button" },
-                            React.createElement("button", { key: `key-${index}`, className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: () => runCommand(item.content.commandId, item.content.args) },
+                        return (React.createElement("div", { className: "chat-response-button", key: `key-${index}` },
+                            React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: () => runCommand(item.content.commandId, item.content.args) },
                                 React.createElement("div", { className: "jp-Dialog-buttonLabel" }, item.content.title))));
                     case ResponseStreamDataType.Anchor:
-                        return (React.createElement("div", { className: "chat-response-anchor" },
-                            React.createElement("a", { key: `key-${index}`, href: item.content.uri, target: "_blank" }, item.content.title)));
+                        return (React.createElement("div", { className: "chat-response-anchor", key: `key-${index}` },
+                            React.createElement("a", { href: item.content.uri, target: "_blank" }, item.content.title)));
                     case ResponseStreamDataType.Progress:
                         // show only if no more message available
                         return index === groupedContents.length - 1 ? (React.createElement("div", { key: `key-${index}` },
@@ -426,7 +429,7 @@ function SidebarComponent(props) {
                 from: 'user',
                 contents: [
                     {
-                        id: lastMessageId.current,
+                        id: UUID.uuid4(),
                         type: ResponseStreamDataType.Markdown,
                         content: prompt,
                         created: new Date()
@@ -491,7 +494,7 @@ function SidebarComponent(props) {
                     if (delta['nbiContent']) {
                         const nbiContent = delta['nbiContent'];
                         contents.push({
-                            id: response.id,
+                            id: UUID.uuid4(),
                             type: nbiContent.type,
                             content: nbiContent.content,
                             created: new Date(response.created)
@@ -504,7 +507,7 @@ function SidebarComponent(props) {
                             return;
                         }
                         contents.push({
-                            id: response.id,
+                            id: UUID.uuid4(),
                             type: ResponseStreamDataType.MarkdownPart,
                             content: responseMessage,
                             created: new Date(response.created)
@@ -826,14 +829,14 @@ function SidebarComponent(props) {
     }, [ghLoginStatus]);
     return (React.createElement("div", { className: "sidebar" },
         React.createElement("div", { className: "sidebar-header" },
-            React.createElement("div", { className: "sidebar-title" }, "Copilot Chat")),
+            React.createElement("div", { className: "sidebar-title" }, "Notebook Intelligence")),
         !chatEnabled && !ghLoginRequired && (React.createElement("div", { className: "sidebar-login-info" },
             "Chat is disabled as you don't have a model configured.",
             React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: handleConfigurationClick },
                 React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Configure models")))),
         ghLoginRequired && (React.createElement("div", { className: "sidebar-login-info" },
             React.createElement("div", null, "You are not logged in to GitHub Copilot. Please login now to activate chat."),
-            React.createElement("div", null,
+            React.createElement("div", { className: "sidebar-login-buttons" },
                 React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: handleLoginClick },
                     React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Login to GitHub Copilot")),
                 React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: handleConfigurationClick },

package/lib/index.js CHANGED Viewed

@@ -160,7 +160,9 @@ class ActiveDocumentWatcher {
         }
         else {
             const dw = activeWidget;
-            return (_b = (_a = dw === null || dw === void 0 ? void 0 : dw.context) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.toString();
+            const content = (_b = (_a = dw === null || dw === void 0 ? void 0 : dw.context) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.toString();
+            const maxContext = 0.5 * MAX_TOKENS;
+            return content.substring(0, maxContext);
         }
     }
     static getCurrentCellContents() {
@@ -417,7 +419,7 @@ const plugin = {
         };
         const panel = new Panel();
         panel.id = 'notebook-intelligence-tab';
-        panel.title.caption = 'Copilot Chat';
+        panel.title.caption = 'Notebook Intelligence';
         const sidebarIcon = new LabIcon({
             name: 'ui-components:palette',
             svgstr: sparklesSvgstr

package/lib/tokens.d.ts CHANGED Viewed

@@ -31,6 +31,7 @@ export declare enum ResponseStreamDataType {
     LLMRaw = "llm-raw",
     Markdown = "markdown",
     MarkdownPart = "markdown-part",
+    Image = "image",
     HTMLFrame = "html-frame",
     Button = "button",
     Anchor = "anchor",

package/lib/tokens.js CHANGED Viewed

@@ -22,6 +22,7 @@ export var ResponseStreamDataType;
     ResponseStreamDataType["LLMRaw"] = "llm-raw";
     ResponseStreamDataType["Markdown"] = "markdown";
     ResponseStreamDataType["MarkdownPart"] = "markdown-part";
+    ResponseStreamDataType["Image"] = "image";
     ResponseStreamDataType["HTMLFrame"] = "html-frame";
     ResponseStreamDataType["Button"] = "button";
     ResponseStreamDataType["Anchor"] = "anchor";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@notebook-intelligence/notebook-intelligence",
-    "version": "1.2.5",
+    "version": "1.3.0",
     "description": "AI coding assistant for JupyterLab",
     "keywords": [
         "AI",

package/src/api.ts CHANGED Viewed

@@ -96,6 +96,18 @@ export class NBIAPI {
     this._webSocket.onmessage = msg => {
       this._messageReceived.emit(msg.data);
     };
+    this._webSocket.onerror = msg => {
+      console.error(`Websocket error: ${msg}. Closing...`);
+      this._webSocket.close();
+    };
+    this._webSocket.onclose = msg => {
+      console.log(`Websocket is closed: ${msg.reason}. Reconnecting...`);
+      setTimeout(() => {
+        NBIAPI.initializeWebsocket();
+      }, 1000);
+    };
   }
   static getLoginStatus(): GitHubCopilotLoginStatus {

package/src/chat-sidebar.tsx CHANGED Viewed

@@ -312,11 +312,11 @@ function ChatResponse(props: any) {
     props.openFile(notebookPath);
   };
-  const markFormConfirmed = (messageId: string) => {
-    answeredForms.set(messageId, 'confirmed');
+  const markFormConfirmed = (contentId: string) => {
+    answeredForms.set(contentId, 'confirmed');
   };
-  const markFormCanceled = (messageId: string) => {
-    answeredForms.set(messageId, 'canceled');
+  const markFormCanceled = (contentId: string) => {
+    answeredForms.set(contentId, 'canceled');
   };
   const runCommand = (commandId: string, args: any) => {
@@ -477,6 +477,12 @@ function ChatResponse(props: any) {
                   </MarkdownRenderer>
                 </>
               );
+            case ResponseStreamDataType.Image:
+              return (
+                <div className="chat-response-img" key={`key-${index}`}>
+                  <img src={item.content} />
+                </div>
+              );
             case ResponseStreamDataType.HTMLFrame:
               return (
                 <ChatResponseHTMLFrame
@@ -487,9 +493,8 @@ function ChatResponse(props: any) {
               );
             case ResponseStreamDataType.Button:
               return (
-                <div className="chat-response-button">
+                <div className="chat-response-button" key={`key-${index}`}>
                   <button
-                    key={`key-${index}`}
                     className="jp-Dialog-button jp-mod-accept jp-mod-styled"
                     onClick={() =>
                       runCommand(item.content.commandId, item.content.args)
@@ -503,12 +508,8 @@ function ChatResponse(props: any) {
               );
             case ResponseStreamDataType.Anchor:
               return (
-                <div className="chat-response-anchor">
-                  <a
-                    key={`key-${index}`}
-                    href={item.content.uri}
-                    target="_blank"
-                  >
+                <div className="chat-response-anchor" key={`key-${index}`}>
+                  <a href={item.content.uri} target="_blank">
                     {item.content.title}
                   </a>
                 </div>
@@ -761,7 +762,7 @@ function SidebarComponent(props: any) {
         from: 'user',
         contents: [
           {
-            id: lastMessageId.current,
+            id: UUID.uuid4(),
             type: ResponseStreamDataType.Markdown,
             content: prompt,
             created: new Date()
@@ -839,7 +840,7 @@ function SidebarComponent(props: any) {
             if (delta['nbiContent']) {
               const nbiContent = delta['nbiContent'];
               contents.push({
-                id: response.id,
+                id: UUID.uuid4(),
                 type: nbiContent.type,
                 content: nbiContent.content,
                 created: new Date(response.created)
@@ -851,7 +852,7 @@ function SidebarComponent(props: any) {
                 return;
               }
               contents.push({
-                id: response.id,
+                id: UUID.uuid4(),
                 type: ResponseStreamDataType.MarkdownPart,
                 content: responseMessage,
                 created: new Date(response.created)
@@ -1253,7 +1254,7 @@ function SidebarComponent(props: any) {
   return (
     <div className="sidebar">
       <div className="sidebar-header">
-        <div className="sidebar-title">Copilot Chat</div>
+        <div className="sidebar-title">Notebook Intelligence</div>
       </div>
       {!chatEnabled && !ghLoginRequired && (
         <div className="sidebar-login-info">
@@ -1272,7 +1273,7 @@ function SidebarComponent(props: any) {
             You are not logged in to GitHub Copilot. Please login now to
             activate chat.
           </div>
-          <div>
+          <div className="sidebar-login-buttons">
             <button
               className="jp-Dialog-button jp-mod-accept jp-mod-styled"
               onClick={handleLoginClick}

package/src/index.ts CHANGED Viewed

@@ -250,7 +250,9 @@ class ActiveDocumentWatcher {
       }
     } else {
       const dw = activeWidget as DocumentWidget;
-      return dw?.context?.model?.toString();
+      const content = dw?.context?.model?.toString();
+      const maxContext = 0.5 * MAX_TOKENS;
+      return content.substring(0, maxContext);
     }
   }
@@ -602,7 +604,7 @@ const plugin: JupyterFrontEndPlugin<INotebookIntelligence> = {
     const panel = new Panel();
     panel.id = 'notebook-intelligence-tab';
-    panel.title.caption = 'Copilot Chat';
+    panel.title.caption = 'Notebook Intelligence';
     const sidebarIcon = new LabIcon({
       name: 'ui-components:palette',
       svgstr: sparklesSvgstr

package/src/tokens.ts CHANGED Viewed

@@ -38,6 +38,7 @@ export enum ResponseStreamDataType {
   LLMRaw = 'llm-raw',
   Markdown = 'markdown',
   MarkdownPart = 'markdown-part',
+  Image = 'image',
   HTMLFrame = 'html-frame',
   Button = 'button',
   Anchor = 'anchor',

package/style/base.css CHANGED Viewed

@@ -146,6 +146,10 @@ pre:has(.code-block-header) {
   height: 18px;
 }
+.chat-response-img img {
+  max-width: 100%;
+}
 .chat-message-from-icon-default.dark img {
   filter: invert(100%);
 }
@@ -224,6 +228,17 @@ pre:has(.code-block-header) {
   text-decoration: underline;
 }
+.sidebar-login-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.sidebar-login-buttons .jp-Dialog-button.jp-mod-styled {
+  margin-right: 0;
+}
 .sidebar-greeting {
   padding: 5px;
   font-size: 14px;
@@ -266,6 +281,13 @@ pre:has(.code-block-header) {
   line-height: 20px;
 }
+.chat-confirmation-form button {
+  height: 24px;
+  line-height: 24px;
+  padding: 0 6px;
+  margin-top: 2px;
+}
 .user-input-autocomplete {
   display: flex;
   background-color: var(--jp-layout-color2);