@jupyterlite/ai 0.9.0-a3 → 0.9.0

package/src/chat-model.ts

@@ -24,6 +24,8 @@ import { AISettingsModel } from './models/settings-model';
 
 import { ITokenUsage } from './tokens';
 
+import * as nbformat from '@jupyterlab/nbformat';
+
 /**
  * AI Chat Model implementation that provides chat functionality with OpenAI agents,
  * tool integration, and MCP server support.
@@ -138,7 +140,7 @@ export class AIChatModel extends AbstractChatModel {
       time: Date.now() / 1000,
       type: 'msg',
       raw_time: false,
-      attachments: this.input.attachments
+      attachments: [...this.input.attachments]
     };
     this.messageAdded(userMessage);
 
@@ -163,6 +165,9 @@ export class AIChatModel extends AbstractChatModel {
         const attachmentContents = await this._processAttachments(
           this.input.attachments
         );
+        // Clear attachments right after  processing
+        this.input.clearAttachments();
+
         if (attachmentContents.length > 0) {
           enhancedMessage +=
             '\n\n--- Attached Files ---\n' + attachmentContents.join('\n\n');
@@ -172,8 +177,6 @@ export class AIChatModel extends AbstractChatModel {
       this.updateWriters([{ user: this._getAIUser() }]);
 
       await this._agentManager.generateResponse(enhancedMessage);
-      // Clear attachments after processing
-      this.input.clearAttachments();
     } catch (error) {
       const errorMessage: IChatMessage = {
         body: `Error generating AI response: ${(error as Error).message}`,
@@ -279,10 +282,7 @@ export class AIChatModel extends AbstractChatModel {
    */
   private _onSettingsChanged(): void {
     const config = this._settingsModel.config;
-    this.config = {
-      ...config,
-      enableCodeToolbar: true
-    };
+    this.config = { ...config, enableCodeToolbar: true };
     // Agent manager handles agent recreation automatically via its own settings listener
   }
 
@@ -383,7 +383,7 @@ export class AIChatModel extends AbstractChatModel {
 <div class="jp-ai-tool-body">
 <div class="jp-ai-tool-section">
 <div class="jp-ai-tool-label">Input</div>
-<pre class="jp-ai-tool-code"><code>${JSON.stringify(event.data.input, null, 2)}</code></pre>
+<pre class="jp-ai-tool-code"><code>${event.data.input}</code></pre>
 </div>
 </div>
 </details>`,
@@ -481,7 +481,7 @@ export class AIChatModel extends AbstractChatModel {
 <div class="jp-ai-tool-body">
 <div class="jp-ai-tool-section">
 <div class="jp-ai-tool-label">${assistantName} wants to execute this tool. Do you approve?</div>
-<pre class="jp-ai-tool-code"><code>${JSON.stringify(event.data.toolInput, null, 2)}</code></pre>
+<pre class="jp-ai-tool-code"><code>${event.data.toolInput}</code></pre>
 </div>
 [APPROVAL_BUTTONS:${event.data.interruptionId}]
 </div>
@@ -504,7 +504,9 @@ export class AIChatModel extends AbstractChatModel {
 
 ${assistantName} wants to execute this tool. Do you approve?
 
-${JSON.stringify(event.data.toolInput, null, 2)}
+\`\`\`json
+${event.data.toolInput}
+\`\`\`
 
 [APPROVAL_BUTTONS:${event.data.interruptionId}]`,
       sender: this._getAIUser(),
@@ -531,7 +533,7 @@ ${JSON.stringify(event.data.toolInput, null, 2)}
     const toolsList = event.data.approvals
       .map(
         (info, index) =>
-          `**${index + 1}. ${info.toolName}**\n${JSON.stringify(info.toolInput, null, 2)}\n`
+          `**${index + 1}. ${info.toolName}**\n\`\`\`json\n${info.toolInput}\n\`\`\`\n`
       )
       .join('\n\n');
 
@@ -582,14 +584,22 @@ ${toolsList}
 
     for (const attachment of attachments) {
       try {
-        const fileContent = await this._readFileAttachment(attachment);
-        if (fileContent) {
-          // Get file extension for syntax highlighting
-          const fileExtension = PathExt.extname(attachment.value).toLowerCase();
-          const language = fileExtension === '.ipynb' ? 'json' : '';
-          contents.push(
-            `**File: ${attachment.value}**\n\`\`\`${language}\n${fileContent}\n\`\`\``
-          );
+        if (attachment.type === 'notebook' && attachment.cells?.length) {
+          const cellContents = await this._readNotebookCells(attachment);
+          if (cellContents) {
+            contents.push(cellContents);
+          }
+        } else {
+          const fileContent = await this._readFileAttachment(attachment);
+          if (fileContent) {
+            const fileExtension = PathExt.extname(
+              attachment.value
+            ).toLowerCase();
+            const language = fileExtension === '.ipynb' ? 'json' : '';
+            contents.push(
+              `**File: ${attachment.value}**\n\`\`\`${language}\n${fileContent}\n\`\`\``
+            );
+          }
         }
       } catch (error) {
         console.warn(`Failed to read attachment ${attachment.value}:`, error);
@@ -600,6 +610,159 @@ ${toolsList}
     return contents;
   }
 
+  /**
+   * Reads the content of a notebook cell.
+   * @param attachment The notebook attachment to read
+   * @returns Cell content as string or null if unable to read
+   */
+  private async _readNotebookCells(
+    attachment: IAttachment
+  ): Promise<string | null> {
+    if (attachment.type !== 'notebook' || !attachment.cells) {
+      return null;
+    }
+
+    try {
+      const model = await this.input.documentManager?.services.contents.get(
+        attachment.value
+      );
+      if (!model || model.type !== 'notebook') {
+        return null;
+      }
+
+      const kernelLang =
+        model.content?.metadata?.language_info?.name ||
+        model.content?.metadata?.kernelspec?.language ||
+        'text';
+
+      const selectedCells = attachment.cells
+        .map(cellInfo => {
+          const cell = model.content.cells.find(
+            (c: any) => c.id === cellInfo.id
+          );
+          if (!cell) {
+            return null;
+          }
+
+          const code = cell.source || '';
+          const cellType = cell.cell_type;
+          const lang = cellType === 'code' ? kernelLang : cellType;
+
+          const DISPLAY_PRIORITY = [
+            'application/vnd.jupyter.widget-view+json',
+            'application/javascript',
+            'text/html',
+            'image/svg+xml',
+            'image/png',
+            'image/jpeg',
+            'text/markdown',
+            'text/latex',
+            'text/plain'
+          ];
+
+          function extractDisplay(data: any): string {
+            for (const mime of DISPLAY_PRIORITY) {
+              if (!(mime in data)) {
+                continue;
+              }
+
+              const value = data[mime];
+              if (!value) {
+                continue;
+              }
+
+              switch (mime) {
+                case 'application/vnd.jupyter.widget-view+json':
+                  return `Widget: ${(value as any).model_id ?? 'unknown model'}`;
+
+                case 'image/png':
+                  return `![image](data:image/png;base64,${value.slice(0, 100)}...)`;
+
+                case 'image/jpeg':
+                  return `![image](data:image/jpeg;base64,${value.slice(0, 100)}...)`;
+
+                case 'image/svg+xml':
+                  return String(value).slice(0, 500) + '...\n[svg truncated]';
+
+                case 'text/html':
+                  return (
+                    String(value).slice(0, 1000) +
+                    (String(value).length > 1000 ? '\n...[truncated]' : '')
+                  );
+
+                case 'text/markdown':
+                case 'text/latex':
+                case 'text/plain': {
+                  let text = Array.isArray(value)
+                    ? value.join('')
+                    : String(value);
+                  if (text.length > 2000) {
+                    text = text.slice(0, 2000) + '\n...[truncated]';
+                  }
+                  return text;
+                }
+
+                default:
+                  return JSON.stringify(value).slice(0, 2000);
+              }
+            }
+
+            return JSON.stringify(data).slice(0, 2000);
+          }
+
+          let outputs = '';
+          if (cellType === 'code' && Array.isArray(cell.outputs)) {
+            outputs = cell.outputs
+              .map((output: nbformat.IOutput) => {
+                if (output.output_type === 'stream') {
+                  return (output as nbformat.IStream).text;
+                } else if (output.output_type === 'error') {
+                  const err = output as nbformat.IError;
+                  return `${err.ename}: ${err.evalue}\n${(err.traceback || []).join('\n')}`;
+                } else if (
+                  output.output_type === 'execute_result' ||
+                  output.output_type === 'display_data'
+                ) {
+                  const data = (output as nbformat.IDisplayData).data;
+                  if (!data) {
+                    return '';
+                  }
+                  try {
+                    return extractDisplay(data);
+                  } catch (e) {
+                    console.error('Cannot extract cell output', e);
+                    return '';
+                  }
+                }
+                return '';
+              })
+              .filter(Boolean)
+              .join('\n---\n');
+
+            if (outputs.length > 2000) {
+              outputs = outputs.slice(0, 2000) + '\n...[truncated]';
+            }
+          }
+
+          return (
+            `**Cell [${cellInfo.id}] (${cellType}):**\n` +
+            `\`\`\`${lang}\n${code}\n\`\`\`` +
+            (outputs ? `\n**Outputs:**\n\`\`\`text\n${outputs}\n\`\`\`` : '')
+          );
+        })
+        .filter(Boolean)
+        .join('\n\n');
+
+      return `**Notebook: ${attachment.value}**\n${selectedCells}`;
+    } catch (error) {
+      console.warn(
+        `Failed to read notebook cells from ${attachment.value}:`,
+        error
+      );
+      return null;
+    }
+  }
+
   /**
    * Reads the content of a file attachment.
    * @param attachment The file attachment to read

package/src/completion/completion-provider.ts

@@ -33,19 +33,6 @@ export interface IProviderCompletionConfig {
   useFilterText?: boolean;
 }
 
-/**
- * Default system prompt for code completion
- */
-const DEFAULT_COMPLETION_SYSTEM_PROMPT = `You are an AI code completion assistant. Complete the given code fragment with appropriate code.
-Rules:
-- Return only the completion text, no explanations or comments
-- Do not include code block markers (\`\`\` or similar)
-- Make completions contextually relevant to the surrounding code and notebook context
-- Follow the language-specific conventions and style guidelines for the detected programming language
-- Keep completions concise but functional
-- Do not repeat the existing code that comes before the cursor
-- Use variables, imports, functions, and other definitions from previous notebook cells when relevant`;
-
 /**
  * Default temperature for code completion (lower than chat for more deterministic results)
  */
@@ -86,7 +73,7 @@ export class AICompletionProvider implements IInlineCompletionProvider {
    * Get the system prompt for the completion.
    */
   get systemPrompt(): string {
-    return DEFAULT_COMPLETION_SYSTEM_PROMPT;
+    return this._settingsModel.config.completionSystemPrompt;
   }
 
   /**

package/src/components/completion-status.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { AISettingsModel } from '../models/settings-model';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { jupyternautIcon } from '../icons';
+
+const COMPLETION_STATUS_CLASS = 'jp-ai-completion-status';
+const COMPLETION_DISABLED_CLASS = 'jp-ai-completion-disabled';
+
+/**
+ * The completion status props.
+ */
+interface ICompletionStatusProps {
+  /**
+   * The settings model.
+   */
+  settingsModel: AISettingsModel;
+}
+
+/**
+ * The completion status component.
+ */
+function CompletionStatus(props: ICompletionStatusProps): JSX.Element {
+  const [disabled, setDisabled] = useState<boolean>(true);
+  const [title, setTitle] = useState<string>('');
+
+  /**
+   * Handle changes in the settings.
+   */
+  useEffect(() => {
+    const stateChanged = (model: AISettingsModel) => {
+      if (model.config.useSameProviderForChatAndCompleter) {
+        setDisabled(false);
+        setTitle(`Completion using ${model.getDefaultProvider()?.model}`);
+      } else if (model.config.activeCompleterProvider) {
+        setDisabled(false);
+        setTitle(
+          `Completion using ${model.getProvider(model.config.activeCompleterProvider)?.model}`
+        );
+      } else {
+        setDisabled(true);
+        setTitle('No completion');
+      }
+    };
+
+    props.settingsModel.stateChanged.connect(stateChanged);
+
+    stateChanged(props.settingsModel);
+    return () => {
+      props.settingsModel.stateChanged.disconnect(stateChanged);
+    };
+  }, [props.settingsModel]);
+
+  return (
+    <jupyternautIcon.react
+      className={disabled ? COMPLETION_DISABLED_CLASS : ''}
+      top={'2px'}
+      width={'16px'}
+      stylesheet={'statusBar'}
+      title={title}
+    />
+  );
+}
+
+/**
+ * The completion status widget that will be added to the status bar.
+ */
+export class CompletionStatusWidget extends ReactWidget {
+  constructor(options: ICompletionStatusProps) {
+    super();
+    this.addClass(COMPLETION_STATUS_CLASS);
+    this._props = options;
+  }
+
+  render(): JSX.Element {
+    return <CompletionStatus {...this._props} />;
+  }
+
+  private _props: ICompletionStatusProps;
+}

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './clear-button';
+export * from './completion-status';
 export * from './model-select';
 export * from './stop-button';
 export * from './token-usage-display';

package/src/components/model-select.tsx

@@ -5,8 +5,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { AIChatModel } from '../chat-model';
 import { AISettingsModel } from '../models/settings-model';
 
-const SELECT_ITEM_CLASS = 'labai-model-select-item';
-
 /**
  * Properties for the model select component.
  */
@@ -187,7 +185,6 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element {
         {availableModels.map(({ provider, providerLabel, isSelected }) => (
           <MenuItem
             key={provider}
-            className={SELECT_ITEM_CLASS}
             onClick={async e => {
               await selectModel(provider);
               // Prevent sending message on model selection

package/src/diff-manager.ts

@@ -0,0 +1,81 @@
+import { CommandRegistry } from '@lumino/commands';
+import { AISettingsModel } from './models/settings-model';
+import {
+  IDiffManager,
+  IShowCellDiffParams,
+  IShowFileDiffParams
+} from './tokens';
+
+/**
+ * Command IDs for unified cell diffs
+ */
+const UNIFIED_DIFF_COMMAND_ID = 'jupyterlab-diff:unified-cell-diff';
+
+/**
+ * Command IDs for split cell diffs
+ */
+const SPLIT_DIFF_COMMAND_ID = 'jupyterlab-diff:split-cell-diff';
+
+/**
+ * Command ID for unified file diffs
+ */
+const UNIFIED_FILE_DIFF_COMMAND_ID = 'jupyterlab-diff:unified-file-diff';
+
+/**
+ * Implementation of the diff manager
+ */
+export class DiffManager implements IDiffManager {
+  /**
+   * Construct a new DiffManager
+   */
+  constructor(options: {
+    commands: CommandRegistry;
+    settingsModel: AISettingsModel;
+  }) {
+    this._commands = options.commands;
+    this._settingsModel = options.settingsModel;
+  }
+
+  /**
+   * Show diff between original and modified cell content
+   */
+  async showCellDiff(params: IShowCellDiffParams): Promise<void> {
+    if (!this._settingsModel.config.showCellDiff) {
+      return;
+    }
+
+    const showDiffCommandId =
+      this._settingsModel.config.diffDisplayMode === 'unified'
+        ? UNIFIED_DIFF_COMMAND_ID
+        : SPLIT_DIFF_COMMAND_ID;
+
+    await this._commands.execute(showDiffCommandId, {
+      originalSource: params.original,
+      newSource: params.modified,
+      cellId: params.cellId,
+      showActionButtons: params.showActionButtons ?? true,
+      openDiff: params.openDiff ?? true,
+      notebookPath: params.notebookPath
+    });
+  }
+
+  /**
+   * Show diff between original and modified file content
+   */
+  async showFileDiff(params: IShowFileDiffParams): Promise<void> {
+    if (!this._settingsModel.config.showFileDiff) {
+      return;
+    }
+
+    // File diffs only support unified view
+    await this._commands.execute(UNIFIED_FILE_DIFF_COMMAND_ID, {
+      originalSource: params.original,
+      newSource: params.modified,
+      filePath: params.filePath,
+      showActionButtons: params.showActionButtons ?? true
+    });
+  }
+
+  private _commands: CommandRegistry;
+  private _settingsModel: AISettingsModel;
+}

package/src/icons.ts

@@ -1,15 +1,10 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 
-import labaiIconSvg from '../style/icons/jupyternaut-lite.svg';
-
-export const labaiIcon = new LabIcon({
-  name: '@jupyterlite/ai:icon',
-  svgstr: labaiIconSvg
-});
+import jupyternautSvg from '../style/icons/jupyternaut-lite.svg';
 
 export const jupyternautIcon = new LabIcon({
   name: '@jupyterlite/ai:jupyternaut',
-  svgstr: labaiIconSvg
+  svgstr: jupyternautSvg
 });
 
 const AI_AVATAR_BASE64 = btoa(jupyternautIcon.svgstr);