@notebook-intelligence/notebook-intelligence 1.3.2 → 1.3.4

package/README.md

@@ -11,10 +11,16 @@ See blog posts for features and usage.
 
 ### Code generation with inline chat
 
+Use the sparkle icon on cell toolbar or the keyboard shortcuts to show the inline chat popover.
+
+Keyboard shortcuts: `Ctrl + G` / `Cmd + G` is the shortcut to show the inline chat popover and `Ctrl + Enter` / `Cmd + Enter` is the shortcut to accept the suggestion. Clicking `Escape` key closes the popover.
+
 ![Generate code](media/generate-code.gif)
 
 ### Auto-complete
 
+Auto-complete suggestions are shown as you type. Clicking `Tab` key accepts the suggestion. NBI provides auto-complete suggestions in code cells and Python file editors.
+
 <img src="media/inline-completion.gif" alt="Auto-complete" width=700 />
 
 ### Chat interface
@@ -45,19 +51,21 @@ for the frontend extension.
 
 ### 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.
+Notebook Intelligence can remember your GitHub Copilot login so that you don't need to re-login after a JupyterLab or system restart. Please be aware of the security implications of using this feature.
 
-To let Notebook Intelligence remember your GitHub access token after you logged in:
+> [!CAUTION]
+> If you configure NBI to remember your GitHub Copilot login, it will encrypt the token and store into a data file at `~/.jupyter/nbi-data.json`. You should never share this file with others as they can access your tokens.
+> Even though the token is encrypted, it is done so by using a default password and that's why it can be decrypted by others. In order to prevent that you can specify a custom password using the environment variable `NBI_GH_ACCESS_TOKEN_PASSWORD`.
 
 ```bash
-jupyter lab --NotebookIntelligence.github_access_token=remember
+NBI_GH_ACCESS_TOKEN_PASSWORD=my_custom_password
 ```
 
-Once you set it to remember, it will continue to remember even if you skip `--NotebookIntelligence.github_access_token` at following launches. In order to forget the GitHub access token stored:
+To let Notebook Intelligence remember your GitHub access token, go to Notebook Intelligence Settings dialog and check the option `Remember my GitHub Copilot access token` as shown below.
 
-```bash
-jupyter lab --NotebookIntelligence.github_access_token=forget
-```
+<img src="media/remember-gh-access-token.png" alt="Remember access token" width=500 />
+
+If your stored access token fails to login (due to expiration or other reasons), you will be prompted to relogin on the UI.
 
 ### Configuration files
 

package/lib/api.d.ts

@@ -17,6 +17,7 @@ export declare class NBIConfig {
     get chatModel(): any;
     get inlineCompletionModel(): any;
     get usingGitHubCopilotModel(): boolean;
+    get storeGitHubAccessToken(): boolean;
     capabilities: any;
     chatParticipants: IChatParticipant[];
     changed: Signal<this, void>;

package/lib/api.js

@@ -39,6 +39,9 @@ export class NBIConfig {
         return (this.chatModel.provider === GITHUB_COPILOT_PROVIDER_ID ||
             this.inlineCompletionModel.provider === GITHUB_COPILOT_PROVIDER_ID);
     }
+    get storeGitHubAccessToken() {
+        return this.capabilities.store_github_access_token === true;
+    }
 }
 class NBIAPI {
     static async initialize() {

package/lib/chat-sidebar.js

@@ -9,7 +9,7 @@ import { MarkdownRenderer } from './markdown-renderer';
 import copySvgstr from '../style/icons/copy.svg';
 import copilotSvgstr from '../style/icons/copilot.svg';
 import copilotWarningSvgstr from '../style/icons/copilot-warning.svg';
-import { VscSend, VscStopCircle, VscEye, VscEyeClosed, VscTriangleRight, VscTriangleDown } from 'react-icons/vsc';
+import { VscSend, VscStopCircle, VscEye, VscEyeClosed, VscTriangleRight, VscTriangleDown, VscWarning } from 'react-icons/vsc';
 import { extractLLMGeneratedCode, isDarkTheme } from './utils';
 const OPENAI_COMPATIBLE_CHAT_MODEL_ID = 'openai-compatible-chat-model';
 const LITELLM_COMPATIBLE_CHAT_MODEL_ID = 'litellm-compatible-chat-model';
@@ -1123,7 +1123,7 @@ function ConfigurationDialogBodyComponent(props) {
     const [chatModels, setChatModels] = useState([]);
     const [inlineCompletionModels, setInlineCompletionModels] = useState([]);
     const handleSaveClick = async () => {
-        await NBIAPI.setConfig({
+        const config = {
             chat_model: {
                 provider: chatModelProvider,
                 model: chatModel,
@@ -1134,7 +1134,12 @@ function ConfigurationDialogBodyComponent(props) {
                 model: inlineCompletionModel,
                 properties: inlineCompletionModelProperties
             }
-        });
+        };
+        if (chatModelProvider === 'github-copilot' ||
+            inlineCompletionModelProvider === 'github-copilot') {
+            config.store_github_access_token = storeGitHubAccessToken;
+        }
+        await NBIAPI.setConfig(config);
         props.onSave();
     };
     const handleRefreshOllamaModelListClick = async () => {
@@ -1147,6 +1152,7 @@ function ConfigurationDialogBodyComponent(props) {
     const [chatModelProperties, setChatModelProperties] = useState([]);
     const [inlineCompletionModelProperties, setInlineCompletionModelProperties] = useState([]);
     const [inlineCompletionModel, setInlineCompletionModel] = useState(nbiConfig.inlineCompletionModel.model);
+    const [storeGitHubAccessToken, setStoreGitHubAccessToken] = useState(nbiConfig.storeGitHubAccessToken);
     const updateModelOptionsForProvider = (providerId, modelType) => {
         if (modelType === 'chat') {
             setChatModelProvider(providerId);
@@ -1275,7 +1281,23 @@ function ConfigurationDialogBodyComponent(props) {
                                 property.name,
                                 " ",
                                 property.optional ? '(optional)' : ''),
-                            React.createElement("input", { name: "inline-completion-model-id-input", placeholder: property.description, className: "jp-mod-styled", spellCheck: false, value: property.value, onChange: event => onModelPropertyChange('inline-completion', property.id, event.target.value) }))))))))),
+                            React.createElement("input", { name: "inline-completion-model-id-input", placeholder: property.description, className: "jp-mod-styled", spellCheck: false, value: property.value, onChange: event => onModelPropertyChange('inline-completion', property.id, event.target.value) })))))))),
+            (chatModelProvider === 'github-copilot' ||
+                inlineCompletionModelProvider === 'github-copilot') && (React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header access-token-config-header" },
+                    "GitHub Copilot login",
+                    ' ',
+                    React.createElement("a", { href: "https://github.com/notebook-intelligence/notebook-intelligence/blob/main/README.md#remembering-github-copilot-login", target: "_blank" },
+                        ' ',
+                        React.createElement(VscWarning, { className: "access-token-warning", title: "Click to learn more about security implications" }))),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("label", null,
+                                React.createElement("input", { type: "checkbox", checked: storeGitHubAccessToken, onChange: event => {
+                                        setStoreGitHubAccessToken(event.target.checked);
+                                    } }),
+                                "Remember my GitHub Copilot access token"))))))),
         React.createElement("div", { className: "config-dialog-footer" },
             React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: handleSaveClick },
                 React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Save")))));

package/lib/index.js

@@ -759,7 +759,19 @@ const plugin = {
                     return editorRect;
                 }
                 const yOffset = 30;
-                const rect = new DOMRect(editorRect.left, coords.top - yOffset, editorRect.right - editorRect.left, coords.bottom - coords.top);
+                const diffViewHeight = 300;
+                let top = coords.top - yOffset;
+                const height = coords.bottom - coords.top;
+                // adjust top to fit in file editor rect
+                if (!isCodeCell) {
+                    if (top + height + diffViewHeight > editorRect.bottom) {
+                        top = editorRect.bottom - height - diffViewHeight;
+                        if (top < editorRect.top) {
+                            top = editorRect.top;
+                        }
+                    }
+                }
+                const rect = new DOMRect(editorRect.left, top, editorRect.right - editorRect.left, height);
                 return rect;
             };
             const rect = getRectAtCursor();

package/package.json

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

package/src/api.ts

@@ -56,6 +56,10 @@ export class NBIConfig {
     );
   }
 
+  get storeGitHubAccessToken(): boolean {
+    return this.capabilities.store_github_access_token === true;
+  }
+
   capabilities: any = {};
   chatParticipants: IChatParticipant[] = [];
 

package/src/chat-sidebar.tsx

@@ -41,7 +41,8 @@ import {
   VscEye,
   VscEyeClosed,
   VscTriangleRight,
-  VscTriangleDown
+  VscTriangleDown,
+  VscWarning
 } from 'react-icons/vsc';
 import { extractLLMGeneratedCode, isDarkTheme } from './utils';
 
@@ -1823,7 +1824,7 @@ function ConfigurationDialogBodyComponent(props: any) {
   const [inlineCompletionModels, setInlineCompletionModels] = useState([]);
 
   const handleSaveClick = async () => {
-    await NBIAPI.setConfig({
+    const config: any = {
       chat_model: {
         provider: chatModelProvider,
         model: chatModel,
@@ -1834,7 +1835,16 @@ function ConfigurationDialogBodyComponent(props: any) {
         model: inlineCompletionModel,
         properties: inlineCompletionModelProperties
       }
-    });
+    };
+
+    if (
+      chatModelProvider === 'github-copilot' ||
+      inlineCompletionModelProvider === 'github-copilot'
+    ) {
+      config.store_github_access_token = storeGitHubAccessToken;
+    }
+
+    await NBIAPI.setConfig(config);
 
     props.onSave();
   };
@@ -1856,6 +1866,9 @@ function ConfigurationDialogBodyComponent(props: any) {
   const [inlineCompletionModel, setInlineCompletionModel] = useState(
     nbiConfig.inlineCompletionModel.model
   );
+  const [storeGitHubAccessToken, setStoreGitHubAccessToken] = useState(
+    nbiConfig.storeGitHubAccessToken
+  );
 
   const updateModelOptionsForProvider = (
     providerId: string,
@@ -2161,6 +2174,41 @@ function ConfigurationDialogBodyComponent(props: any) {
             </div>
           </div>
         </div>
+
+        {(chatModelProvider === 'github-copilot' ||
+          inlineCompletionModelProvider === 'github-copilot') && (
+          <div className="model-config-section">
+            <div className="model-config-section-header access-token-config-header">
+              GitHub Copilot login{' '}
+              <a
+                href="https://github.com/notebook-intelligence/notebook-intelligence/blob/main/README.md#remembering-github-copilot-login"
+                target="_blank"
+              >
+                {' '}
+                <VscWarning
+                  className="access-token-warning"
+                  title="Click to learn more about security implications"
+                />
+              </a>
+            </div>
+            <div className="model-config-section-body">
+              <div className="model-config-section-row">
+                <div className="model-config-section-column">
+                  <label>
+                    <input
+                      type="checkbox"
+                      checked={storeGitHubAccessToken}
+                      onChange={event => {
+                        setStoreGitHubAccessToken(event.target.checked);
+                      }}
+                    />
+                    Remember my GitHub Copilot access token
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
 
       <div className="config-dialog-footer">

package/src/index.ts

@@ -1018,12 +1018,28 @@ const plugin: JupyterFrontEndPlugin<INotebookIntelligence> = {
           return editorRect;
         }
         const yOffset = 30;
+        const diffViewHeight = 300;
+
+        let top = coords.top - yOffset;
+        const height = coords.bottom - coords.top;
+
+        // adjust top to fit in file editor rect
+        if (!isCodeCell) {
+          if (top + height + diffViewHeight > editorRect.bottom) {
+            top = editorRect.bottom - height - diffViewHeight;
+            if (top < editorRect.top) {
+              top = editorRect.top;
+            }
+          }
+        }
+
         const rect: DOMRect = new DOMRect(
           editorRect.left,
-          coords.top - yOffset,
+          top,
           editorRect.right - editorRect.left,
-          coords.bottom - coords.top
+          height
         );
+
         return rect;
       };
 

package/style/base.css

@@ -614,3 +614,15 @@ body[data-jp-theme-light='false'] .inline-popover {
 .chat-reasoning-content.expanded .collapsed-icon {
   display: none;
 }
+
+.access-token-config-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+svg.access-token-warning {
+  color: var(--jp-warn-color0);
+  width: 18px;
+  height: 18px;
+}