@notebook-intelligence/notebook-intelligence 2.2.5 → 2.2.6

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:
@@ -1142,7 +1145,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.6",
     "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,
@@ -1740,8 +1744,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}