@notebook-intelligence/notebook-intelligence 2.2.5 → 2.2.7

package/lib/chat-sidebar.js

@@ -1,11 +1,12 @@
 // Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
 import { UUID } from '@lumino/coreutils';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 import { NBIAPI, GitHubCopilotLoginStatus } from './api';
 import { BackendMessageType, BuiltinToolsetType, ContextType, GITHUB_COPILOT_PROVIDER_ID, RequestDataType, ResponseStreamDataType, TelemetryEventType } from './tokens';
-import { MarkdownRenderer } from './markdown-renderer';
+import { MarkdownRenderer as OriginalMarkdownRenderer } from './markdown-renderer';
+const MarkdownRenderer = memo(OriginalMarkdownRenderer);
 import copySvgstr from '../style/icons/copy.svg';
 import copilotSvgstr from '../style/icons/copilot.svg';
 import copilotWarningSvgstr from '../style/icons/copilot-warning.svg';
@@ -141,6 +142,7 @@ function ChatResponseHTMLFrame(props) {
     return (React.createElement("div", { className: "chat-response-html-frame", key: `key-${props.index}` },
         React.createElement("iframe", { className: "chat-response-html-frame-iframe", height: props.height, sandbox: "allow-scripts", src: iframSrc })));
 }
+// Memoize ChatResponse for performance
 function ChatResponse(props) {
     var _a, _b, _c;
     const [renderCount, setRenderCount] = useState(0);
@@ -302,6 +304,7 @@ function ChatResponse(props) {
             }),
             msg.notebookLink && (React.createElement("a", { className: "copilot-generated-notebook-link", "data-ref": msg.notebookLink, onClick: openNotebook }, "open notebook")))));
 }
+const MemoizedChatResponse = memo(ChatResponse);
 async function submitCompletionRequest(request, responseEmitter) {
     switch (request.type) {
         case RunChatCompletionType.Chat:
@@ -372,6 +375,8 @@ function SidebarComponent(props) {
     };
     const [toolSelections, setToolSelections] = useState(toolSelectionsInitial);
     const [hasExtensionTools, setHasExtensionTools] = useState(false);
+    const [lastScrollTime, setLastScrollTime] = useState(0);
+    const [scrollPending, setScrollPending] = useState(false);
     NBIAPI.configChanged.connect(() => {
         setToolConfig(NBIAPI.config.toolConfig);
     });
@@ -960,9 +965,24 @@ function SidebarComponent(props) {
             }
         }
     };
+    // Throttle scrollMessagesToBottom to only scroll every 500ms
+    const SCROLL_THROTTLE_TIME = 1000;
     const scrollMessagesToBottom = () => {
         var _a;
-        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+        const now = Date.now();
+        if (now - lastScrollTime >= SCROLL_THROTTLE_TIME) {
+            (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+            setLastScrollTime(now);
+        }
+        else if (!scrollPending) {
+            setScrollPending(true);
+            setTimeout(() => {
+                var _a;
+                (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+                setLastScrollTime(Date.now());
+                setScrollPending(false);
+            }, SCROLL_THROTTLE_TIME - (now - lastScrollTime));
+        }
     };
     const handleConfigurationClick = async () => {
         props
@@ -1142,7 +1162,7 @@ function SidebarComponent(props) {
         chatEnabled &&
             (chatMessages.length === 0 ? (React.createElement("div", { className: "sidebar-messages" },
                 React.createElement("div", { className: "sidebar-greeting" }, "Welcome! How can I assist you today?"))) : (React.createElement("div", { className: "sidebar-messages" },
-                chatMessages.map((msg, index) => (React.createElement(ChatResponse, { key: `key-${index}`, message: msg, openFile: props.openFile, getApp: props.getApp, getActiveDocumentInfo: props.getActiveDocumentInfo, showGenerating: index === chatMessages.length - 1 &&
+                chatMessages.map((msg, index) => (React.createElement(MemoizedChatResponse, { key: msg.id, message: msg, openFile: props.openFile, getApp: props.getApp, getActiveDocumentInfo: props.getActiveDocumentInfo, showGenerating: index === chatMessages.length - 1 &&
                         msg.from === 'copilot' &&
                         copilotRequestInProgress }))),
                 React.createElement("div", { ref: messagesEndRef })))),

package/package.json

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

package/src/chat-sidebar.tsx

@@ -7,7 +7,8 @@ import React, {
   useEffect,
   useMemo,
   useRef,
-  useState
+  useState,
+  memo
 } from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
 import { UUID } from '@lumino/coreutils';
@@ -32,7 +33,8 @@ import {
   TelemetryEventType
 } from './tokens';
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import { MarkdownRenderer } from './markdown-renderer';
+import { MarkdownRenderer as OriginalMarkdownRenderer } from './markdown-renderer';
+const MarkdownRenderer = memo(OriginalMarkdownRenderer);
 
 import copySvgstr from '../style/icons/copy.svg';
 import copilotSvgstr from '../style/icons/copilot.svg';
@@ -314,6 +316,7 @@ function ChatResponseHTMLFrame(props: any) {
   );
 }
 
+// Memoize ChatResponse for performance
 function ChatResponse(props: any) {
   const [renderCount, setRenderCount] = useState(0);
   const msg: IChatMessage = props.message;
@@ -599,6 +602,7 @@ function ChatResponse(props: any) {
     </div>
   );
 }
+const MemoizedChatResponse = memo(ChatResponse);
 
 async function submitCompletionRequest(
   request: IRunChatCompletionRequest,
@@ -726,6 +730,8 @@ function SidebarComponent(props: any) {
   };
   const [toolSelections, setToolSelections] = useState(toolSelectionsInitial);
   const [hasExtensionTools, setHasExtensionTools] = useState(false);
+  const [lastScrollTime, setLastScrollTime] = useState(0);
+  const [scrollPending, setScrollPending] = useState(false);
 
   NBIAPI.configChanged.connect(() => {
     setToolConfig(NBIAPI.config.toolConfig);
@@ -1475,8 +1481,24 @@ function SidebarComponent(props: any) {
     }
   };
 
+  // Throttle scrollMessagesToBottom to only scroll every 500ms
+  const SCROLL_THROTTLE_TIME = 1000;
   const scrollMessagesToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    const now = Date.now();
+    if (now - lastScrollTime >= SCROLL_THROTTLE_TIME) {
+      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+      setLastScrollTime(now);
+    } else if (!scrollPending) {
+      setScrollPending(true);
+      setTimeout(
+        () => {
+          messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+          setLastScrollTime(Date.now());
+          setScrollPending(false);
+        },
+        SCROLL_THROTTLE_TIME - (now - lastScrollTime)
+      );
+    }
   };
 
   const handleConfigurationClick = async () => {
@@ -1740,8 +1762,8 @@ function SidebarComponent(props: any) {
         ) : (
           <div className="sidebar-messages">
             {chatMessages.map((msg, index) => (
-              <ChatResponse
-                key={`key-${index}`}
+              <MemoizedChatResponse
+                key={msg.id}
                 message={msg}
                 openFile={props.openFile}
                 getApp={props.getApp}