@notebook-intelligence/notebook-intelligence 3.0.0 → 4.0.0

package/lib/tokens.js

@@ -18,6 +18,7 @@ export var BackendMessageType;
     BackendMessageType["RunUICommand"] = "run-ui-command";
     BackendMessageType["GitHubCopilotLoginStatusChange"] = "github-copilot-login-status-change";
     BackendMessageType["MCPServerStatusChange"] = "mcp-server-status-change";
+    BackendMessageType["ClaudeCodeStatusChange"] = "claude-code-status-change";
 })(BackendMessageType || (BackendMessageType = {}));
 export var ResponseStreamDataType;
 (function (ResponseStreamDataType) {
@@ -30,6 +31,7 @@ export var ResponseStreamDataType;
     ResponseStreamDataType["Anchor"] = "anchor";
     ResponseStreamDataType["Progress"] = "progress";
     ResponseStreamDataType["Confirmation"] = "confirmation";
+    ResponseStreamDataType["AskUserQuestion"] = "ask-user-question";
 })(ResponseStreamDataType || (ResponseStreamDataType = {}));
 export var ContextType;
 (function (ContextType) {
@@ -58,6 +60,7 @@ export var BuiltinToolsetType;
     BuiltinToolsetType["CommandExecute"] = "nbi-command-execute";
 })(BuiltinToolsetType || (BuiltinToolsetType = {}));
 export const GITHUB_COPILOT_PROVIDER_ID = 'github-copilot';
+export const CLAUDE_CODE_CHAT_PARTICIPANT_ID = 'claude-code';
 export var TelemetryEventType;
 (function (TelemetryEventType) {
     TelemetryEventType["InlineCompletionRequest"] = "inline-completion-request";

package/package.json

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

package/src/api.ts

@@ -28,6 +28,17 @@ export interface IDeviceVerificationInfo {
   userCode: string;
 }
 
+export enum ClaudeModelType {
+  Default = '',
+  ClaudeOpus45 = 'claude-opus-4-5',
+  ClaudeHaiku45 = 'claude-haiku-4-5'
+}
+
+export enum ClaudeToolType {
+  ClaudeCodeTools = 'claude-code:built-in-tools',
+  JupyterUITools = 'nbi:built-in-jupyter-ui-tools'
+}
+
 export class NBIConfig {
   get userHomeDir(): string {
     return this.capabilities.user_home_dir;
@@ -98,6 +109,14 @@ export class NBIConfig {
     return this.capabilities.mcp_server_settings;
   }
 
+  get claudeSettings(): any {
+    return this.capabilities.claude_settings;
+  }
+
+  get isInClaudeCodeMode(): boolean {
+    return this.claudeSettings.enabled === true;
+  }
+
   capabilities: any = {};
   chatParticipants: IChatParticipant[] = [];
 
@@ -124,7 +143,10 @@ export class NBIAPI {
 
     this._messageReceived.connect((_, msg) => {
       msg = JSON.parse(msg);
-      if (msg.type === BackendMessageType.MCPServerStatusChange) {
+      if (
+        msg.type === BackendMessageType.MCPServerStatusChange ||
+        msg.type === BackendMessageType.ClaudeCodeStatusChange
+      ) {
         this.fetchCapabilities();
       } else if (
         msg.type === BackendMessageType.GitHubCopilotLoginStatusChange
@@ -178,20 +200,26 @@ export class NBIAPI {
   }
 
   static getChatEnabled() {
-    return this.config.chatModel.provider === GITHUB_COPILOT_PROVIDER_ID
-      ? !this.getGHLoginRequired()
-      : this.config.llmProviders.find(
-          provider => provider.id === this.config.chatModel.provider
-        );
+    return (
+      this.config.isInClaudeCodeMode ||
+      (this.config.chatModel.provider === GITHUB_COPILOT_PROVIDER_ID
+        ? !this.getGHLoginRequired()
+        : this.config.llmProviders.find(
+            provider => provider.id === this.config.chatModel.provider
+          ))
+    );
   }
 
   static getInlineCompletionEnabled() {
-    return this.config.inlineCompletionModel.provider ===
-      GITHUB_COPILOT_PROVIDER_ID
-      ? !this.getGHLoginRequired()
-      : this.config.llmProviders.find(
-          provider => provider.id === this.config.inlineCompletionModel.provider
-        );
+    return (
+      this.config.isInClaudeCodeMode ||
+      (this.config.inlineCompletionModel.provider === GITHUB_COPILOT_PROVIDER_ID
+        ? !this.getGHLoginRequired()
+        : this.config.llmProviders.find(
+            provider =>
+              provider.id === this.config.inlineCompletionModel.provider
+          ))
+    );
   }
 
   static async loginToGitHub() {

package/src/chat-sidebar.tsx

@@ -19,6 +19,7 @@ import { NBIAPI, GitHubCopilotLoginStatus } from './api';
 import {
   BackendMessageType,
   BuiltinToolsetType,
+  CLAUDE_CODE_CHAT_PARTICIPANT_ID,
   ContextType,
   IActiveDocumentInfo,
   ICellContents,
@@ -54,6 +55,8 @@ import {
 import { extractLLMGeneratedCode, isDarkTheme } from './utils';
 import { CheckBoxItem } from './components/checkbox';
 import { mcpServerSettingsToEnabledState } from './components/mcp-util';
+import claudeSvg from '../style/claude.svg';
+import { AskUserQuestion } from './components/ask-user-question';
 
 export enum RunChatCompletionType {
   Chat,
@@ -449,6 +452,8 @@ function ChatResponse(props: any) {
       : `Output (${Math.floor(item.reasoningTime)} s)`;
   };
 
+  const chatParticipantId = msg.participant?.id || 'default';
+
   return (
     <div
       className={`chat-message chat-message-${msg.from}`}
@@ -458,7 +463,7 @@ function ChatResponse(props: any) {
         <div className="chat-message-from">
           {msg.participant?.iconPath && (
             <div
-              className={`chat-message-from-icon ${msg.participant?.id === 'default' ? 'chat-message-from-icon-default' : ''} ${isDarkTheme() ? 'dark' : ''}`}
+              className={`chat-message-from-icon chat-message-from-icon-${chatParticipantId} ${isDarkTheme() ? 'dark' : ''}`}
             >
               <img src={msg.participant.iconPath} />
             </div>
@@ -624,6 +629,44 @@ function ChatResponse(props: any) {
                   </button>
                 </div>
               );
+            case ResponseStreamDataType.AskUserQuestion:
+              return answeredForms.get(item.id) ===
+                'confirmed' ? null : answeredForms.get(item.id) ===
+                'canceled' ? (
+                <div>&#10006; Canceled</div>
+              ) : (
+                <div
+                  className="chat-confirmation-form ask-user-question"
+                  key={`key-${index}`}
+                >
+                  <AskUserQuestion
+                    userQuestions={item}
+                    onSubmit={(selectedAnswers: any) => {
+                      markFormConfirmed(item.id);
+                      runCommand('notebook-intelligence:chat-user-input', {
+                        id: item.content.identifier.id,
+                        data: {
+                          callback_id: item.content.identifier.callback_id,
+                          data: {
+                            confirmed: true,
+                            selectedAnswers
+                          }
+                        }
+                      });
+                    }}
+                    onCancel={() => {
+                      markFormCanceled(item.id);
+                      runCommand('notebook-intelligence:chat-user-input', {
+                        id: item.content.identifier.id,
+                        data: {
+                          callback_id: item.content.identifier.callback_id,
+                          data: { confirmed: false }
+                        }
+                      });
+                    }}
+                  />
+                </div>
+              );
           }
           return null;
         })}
@@ -655,7 +698,7 @@ async function submitCompletionRequest(
         request.content,
         request.language || 'python',
         request.currentDirectory || '',
-        request.filename || 'Untitled.ipynb',
+        request.filename || '',
         request.additionalContext || [],
         request.chatMode,
         request.toolSelections || {},
@@ -671,7 +714,7 @@ async function submitCompletionRequest(
         request.content,
         request.language || 'python',
         request.currentDirectory || '',
-        request.filename || 'Untitled.ipynb',
+        request.filename || '',
         [],
         'ask',
         {},
@@ -686,7 +729,7 @@ async function submitCompletionRequest(
         request.suffix || '',
         request.existingCode || '',
         request.language || 'python',
-        request.filename || 'Untitled.ipynb',
+        request.filename || '',
         responseEmitter
       );
   }
@@ -1168,23 +1211,36 @@ function SidebarComponent(props: any) {
 
   useEffect(() => {
     const prefixes: string[] = [];
-    prefixes.push('/clear');
-
-    if (chatMode === 'ask') {
-      const chatParticipants = NBIAPI.config.chatParticipants;
-      for (const participant of chatParticipants) {
-        const id = participant.id;
-        const commands = participant.commands;
-        const participantPrefix = id === 'default' ? '' : `@${id}`;
-        if (participantPrefix !== '') {
-          prefixes.push(participantPrefix);
-        }
-        const commandPrefix =
-          participantPrefix === '' ? '' : `${participantPrefix} `;
+
+    if (NBIAPI.config.isInClaudeCodeMode) {
+      const claudeChatParticipant = NBIAPI.config.chatParticipants.find(
+        participant => participant.id === CLAUDE_CODE_CHAT_PARTICIPANT_ID
+      );
+      if (claudeChatParticipant) {
+        const commands = claudeChatParticipant.commands;
         for (const command of commands) {
-          prefixes.push(`${commandPrefix}/${command}`);
+          prefixes.push(`/${command}`);
         }
       }
+    } else {
+      if (chatMode === 'ask') {
+        const chatParticipants = NBIAPI.config.chatParticipants;
+        for (const participant of chatParticipants) {
+          const id = participant.id;
+          const commands = participant.commands;
+          const participantPrefix = id === 'default' ? '' : `@${id}`;
+          if (participantPrefix !== '') {
+            prefixes.push(participantPrefix);
+          }
+          const commandPrefix =
+            participantPrefix === '' ? '' : `${participantPrefix} `;
+          for (const command of commands) {
+            prefixes.push(`${commandPrefix}/${command}`);
+          }
+        }
+      } else {
+        prefixes.push('/clear');
+      }
     }
 
     const mcpServers = NBIAPI.config.toolConfig.mcpServers;
@@ -1968,24 +2024,26 @@ function SidebarComponent(props: any) {
             )}
             <div style={{ flexGrow: 1 }}></div>
             <div className="chat-mode-widgets-container">
-              <div>
-                <select
-                  className="chat-mode-select"
-                  title="Chat mode"
-                  value={chatMode}
-                  onChange={event => {
-                    if (event.target.value === 'ask') {
-                      setToolSelections(toolSelectionsEmpty);
-                    }
-                    setShowModeTools(false);
-                    setChatMode(event.target.value);
-                  }}
-                >
-                  <option value="ask">Ask</option>
-                  <option value="agent">Agent</option>
-                </select>
-              </div>
-              {chatMode !== 'ask' && (
+              {!NBIAPI.config.isInClaudeCodeMode && (
+                <div>
+                  <select
+                    className="chat-mode-select"
+                    title="Chat mode"
+                    value={chatMode}
+                    onChange={event => {
+                      if (event.target.value === 'ask') {
+                        setToolSelections(toolSelectionsEmpty);
+                      }
+                      setShowModeTools(false);
+                      setChatMode(event.target.value);
+                    }}
+                  >
+                    <option value="ask">Ask</option>
+                    <option value="agent">Agent</option>
+                  </select>
+                </div>
+              )}
+              {chatMode !== 'ask' && !NBIAPI.config.isInClaudeCodeMode && (
                 <div
                   className={`user-input-footer-button tools-button ${unsafeToolSelected ? 'tools-button-warning' : selectedToolCount > 0 ? 'tools-button-active' : ''}`}
                   onClick={() => handleChatToolsButtonClick()}
@@ -1999,6 +2057,13 @@ function SidebarComponent(props: any) {
                   {selectedToolCount > 0 && <>{selectedToolCount}</>}
                 </div>
               )}
+              {NBIAPI.config.isInClaudeCodeMode && (
+                <span
+                  title="Claude mode"
+                  className="claude-icon"
+                  dangerouslySetInnerHTML={{ __html: claudeSvg }}
+                ></span>
+              )}
             </div>
             <div>
               <button
@@ -2351,7 +2416,7 @@ function InlinePromptComponent(props: any) {
         type: RunChatCompletionType.GenerateCode,
         content: prompt,
         language: props.language || 'python',
-        filename: props.filename || 'Untitled.ipynb',
+        filename: props.filename || '',
         prefix: props.prefix,
         suffix: props.suffix,
         existingCode: props.existingCode,

package/src/components/ask-user-question.tsx

@@ -0,0 +1,101 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+import React, { useState } from 'react';
+
+export function AskUserQuestion(props: any) {
+  const userQuestions = props.userQuestions.content;
+  const [selectedAnswers, setSelectedAnswers] = useState<{
+    [key: string]: string[];
+  }>({});
+
+  const onOptionSelected = (question: any, option: any) => {
+    if (question.multiSelect) {
+      if (selectedAnswers[question.question]?.includes(option.label)) {
+        setSelectedAnswers({
+          ...selectedAnswers,
+          [question.question]: (
+            selectedAnswers[question.question] ?? []
+          ).filter((o: any) => o !== option.label)
+        });
+      } else {
+        setSelectedAnswers({
+          ...selectedAnswers,
+          [question.question]: [
+            ...(selectedAnswers[question.question] ?? []),
+            option.label
+          ]
+        });
+      }
+    } else {
+      setSelectedAnswers({
+        ...selectedAnswers,
+        [question.question]: [option.label]
+      });
+    }
+  };
+
+  return (
+    <>
+      {userQuestions.title ? (
+        <div>
+          <b>{userQuestions.title}</b>
+        </div>
+      ) : null}
+      {userQuestions.message ? <div>{userQuestions.message}</div> : null}
+      {userQuestions.questions.map((question: any) => (
+        <div className="ask-user-question-container" key={question.question}>
+          <form className="ask-user-question-form">
+            <div className="ask-user-question-question">
+              {question.question}
+            </div>
+            <div className="ask-user-question-header">{question.header}</div>
+            <div className="ask-user-question-options">
+              {question.options.map((option: any) => (
+                <div className="ask-user-question-option" key={option.label}>
+                  <div>
+                    <input
+                      id={option.label}
+                      type="checkbox"
+                      checked={
+                        selectedAnswers[question.question]?.includes(
+                          option.label
+                        ) ?? false
+                      }
+                      onChange={() => onOptionSelected(question, option)}
+                    />
+                    <label htmlFor={option.label}>{option.label}</label>
+                  </div>
+                  <div className="ask-user-question-option-description">
+                    {option.description}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </form>
+        </div>
+      ))}
+      <div className="ask-user-question-footer">
+        <button
+          className="jp-Dialog-button jp-mod-accept jp-mod-styled"
+          onClick={() => {
+            props.onSubmit(selectedAnswers);
+          }}
+        >
+          <div className="jp-Dialog-buttonLabel">
+            {userQuestions.submitLabel}
+          </div>
+        </button>
+        <button
+          className="jp-Dialog-button jp-mod-reject jp-mod-styled"
+          onClick={() => {
+            props.onCancel();
+          }}
+        >
+          <div className="jp-Dialog-buttonLabel">
+            {userQuestions.cancelLabel}
+          </div>
+        </button>
+      </div>
+    </>
+  );
+}

package/src/components/checkbox.tsx

@@ -6,20 +6,31 @@ import { MdOutlineCheckBoxOutlineBlank, MdCheckBox } from 'react-icons/md';
 
 export function CheckBoxItem(props: any) {
   const indent = props.indent || 0;
+  const disabled = props.disabled || false;
 
   return (
     <div
       className={`checkbox-item checkbox-item-indent-${indent} ${props.header ? 'checkbox-item-header' : ''}`}
       title={props.tooltip || props.title || ''}
-      onClick={event => props.onClick(event)}
+      onClick={event => {
+        if (!disabled) {
+          props.onClick(event);
+        }
+      }}
     >
       <div className="checkbox-item-toggle">
         {props.checked ? (
-          <MdCheckBox className="checkbox-icon" />
+          <MdCheckBox
+            className="checkbox-icon"
+            style={{ opacity: disabled ? 0.5 : 1 }}
+          />
         ) : (
-          <MdOutlineCheckBoxOutlineBlank className="checkbox-icon" />
+          <MdOutlineCheckBoxOutlineBlank
+            className="checkbox-icon"
+            style={{ opacity: disabled ? 0.5 : 1 }}
+          />
         )}
-        {props.label}
+        <span style={{ opacity: disabled ? 0.5 : 1 }}>{props.label}</span>
       </div>
       {props.title && (
         <div className="checkbox-item-description">{props.title}</div>