@jupyterlite/ai 0.9.1 → 0.10.0

package/src/approval-buttons.ts

@@ -1,17 +1,16 @@
 import { ChatWidget } from '@jupyter/chat';
 import { IDisposable } from '@lumino/disposable';
-import { AIChatModel } from './chat-model';
+import type { AgentManager } from './agent';
 
+/**
+ * Handles click events for approval buttons in the chat panel.
+ */
 export class ApprovalButtons implements IDisposable {
   constructor(options: ApprovalButtons.IOptions) {
     this._chatPanel = options.chatPanel;
-    this._chatModel = this._chatPanel.model as AIChatModel;
-
-    // Set up approval button event handling
-    this._setupApprovalHandlers();
+    this._agentManager = options.agentManager;
 
-    // Set up message processing for approval buttons
-    this._setupMessageProcessing();
+    this._chatPanel.node.addEventListener('click', this._handleClick);
   }
 
   get isDisposed(): boolean {
@@ -27,435 +26,90 @@ export class ApprovalButtons implements IDisposable {
     }
     this._isDisposed = true;
 
-    // Stop the mutation observer.
-    if (this._mutationObserver) {
-      this._mutationObserver.disconnect();
-      this._mutationObserver = undefined;
-    }
-
-    // Remove all listener on existing buttons.
-    const existingButtons = this._chatPanel.node.querySelectorAll(
-      '.jp-ai-approval-btn'
-    );
-    existingButtons.forEach(button => {
-      button.removeEventListener('click', this._handleButtonClick);
-    });
-
-    const existingGroupButtons = this._chatPanel.node.querySelectorAll(
-      '.jp-ai-group-approval-buttons button'
-    );
-    existingGroupButtons.forEach(button => {
-      button.removeEventListener('click', this._handleGroupedButtonClick);
-    });
-
-    // Clean the references.
-    this._chatModel = null!;
+    this._chatPanel.node.removeEventListener('click', this._handleClick);
     this._chatPanel = null!;
   }
 
   /**
-   * Sets up event handlers for existing approval buttons in the chat panel.
-   */
-  private _setupApprovalHandlers() {
-    // This method will be called to add handlers to existing buttons
-    // New buttons get handlers added in _processApprovalButtons
-    const existingButtons = this._chatPanel.node.querySelectorAll(
-      '.jp-ai-approval-btn'
-    );
-    existingButtons.forEach(button => {
-      this._addButtonHandler(button as HTMLButtonElement);
-    });
-  }
-
-  /**
-   * Adds click event handler to an approval button.
-   *
-   * @param button - The button element to add handler to
-   */
-  private _addButtonHandler(button: HTMLButtonElement) {
-    // Remove any existing listeners to avoid duplicates
-    button.removeEventListener('click', this._handleButtonClick);
-    button.addEventListener('click', this._handleButtonClick);
-  }
-
-  /**
-   * Handles click events for individual approval buttons.
-   *
-   * @param event - The click event
+   * Handles click events using event delegation.
+   * Detects clicks on approval buttons and calls the appropriate handler.
    */
-  private _handleButtonClick = async (event: Event) => {
+  private _handleClick = (event: Event): void => {
     const target = event.target as HTMLElement;
-    event.preventDefault();
-    event.stopPropagation();
-
-    const buttonsContainer = target.closest('.jp-ai-tool-approval-buttons');
-    if (!buttonsContainer) {
-      return;
-    }
 
-    const interruptionId = buttonsContainer.getAttribute(
-      'data-interruption-id'
-    );
-    if (!interruptionId) {
+    // Check if the click target is an approval button
+    if (!target.classList.contains('jp-ai-approval-btn')) {
       return;
     }
 
-    // Get message ID for updating the tool call box
-    const messageId = buttonsContainer.getAttribute('data-message-id');
+    event.preventDefault();
+    event.stopPropagation();
 
-    // Hide buttons immediately and show status
     const isApprove = target.classList.contains('jp-ai-approval-approve');
-    this._showApprovalStatus(buttonsContainer, isApprove);
-
-    if (isApprove) {
-      // Execute approval with message ID for updating the tool call box
-      await this._chatModel.approveToolCall(
-        interruptionId,
-        messageId || undefined
-      );
-    } else if (target.classList.contains('jp-ai-approval-reject')) {
-      // Execute rejection with message ID for updating the tool call box
-      await this._chatModel.rejectToolCall(
-        interruptionId,
-        messageId || undefined
-      );
-    }
+    this._handleApproval(target, isApprove);
   };
 
   /**
-   * Adds click event handler to a grouped approval button.
-   *
-   * @param button - The button element to add handler to
-   */
-  private _addGroupedButtonHandler(button: HTMLButtonElement) {
-    // Remove any existing listeners to avoid duplicates
-    button.removeEventListener('click', this._handleGroupedButtonClick);
-    button.addEventListener('click', this._handleGroupedButtonClick);
-  }
-
-  /**
-   * Handles click events for grouped approval buttons.
-   *
-   * @param event - The click event
+   * Handles approval/rejection of a tool call.
    */
-  private _handleGroupedButtonClick = async (event: Event) => {
-    const target = event.target as HTMLElement;
-    event.preventDefault();
-    event.stopPropagation();
-
-    const buttonsContainer = target.closest('.jp-ai-group-approval-buttons');
-    if (!buttonsContainer) {
+  private _handleApproval(target: HTMLElement, isApprove: boolean): void {
+    const container = target.closest('.jp-ai-tool-approval-buttons');
+    if (!container) {
       return;
     }
 
-    const groupId = buttonsContainer.getAttribute('data-group-id');
-    const interruptionIdsStr = buttonsContainer.getAttribute(
-      'data-interruption-ids'
-    );
-    if (!groupId || !interruptionIdsStr) {
+    // Extract approval ID from class name (encoded as jp-ai-approval-id--{id})
+    const approvalId = this._extractApprovalId(container);
+    if (!approvalId) {
+      console.warn('No approval ID found for button');
       return;
     }
 
-    const interruptionIds = interruptionIdsStr.split(',');
-    const messageId = buttonsContainer.getAttribute('data-message-id');
-
-    // Hide buttons immediately and show status
-    const isApprove = target.classList.contains('jp-ai-group-approve-all');
-    this._showGroupApprovalStatus(buttonsContainer, isApprove);
+    // Disable buttons to prevent double-clicks
+    const buttons = container.querySelectorAll('button');
+    buttons.forEach(btn => btn.setAttribute('disabled', 'true'));
 
     if (isApprove) {
-      // Execute grouped approval
-      await this._chatModel.approveGroupedToolCalls(
-        groupId,
-        interruptionIds,
-        messageId || undefined
-      );
-    } else if (target.classList.contains('jp-ai-group-reject-all')) {
-      // Execute grouped rejection
-      await this._chatModel.rejectGroupedToolCalls(
-        groupId,
-        interruptionIds,
-        messageId || undefined
-      );
+      this._agentManager.approveToolCall(approvalId);
+    } else {
+      this._agentManager.rejectToolCall(approvalId);
     }
-  };
-
-  /**
-   * Shows approval status by replacing buttons with status indicator.
-   *
-   * @param buttonsContainer - The container element holding the buttons
-   * @param isApprove - Whether the action was approval or rejection
-   */
-  private _showApprovalStatus(
-    buttonsContainer: Element,
-    isApprove: boolean
-  ): void {
-    // Clear the container and add status indicator
-    buttonsContainer.innerHTML = '';
-
-    const statusDiv = document.createElement('div');
-    statusDiv.className = `jp-ai-approval-status ${isApprove ? 'jp-ai-approval-status-approved' : 'jp-ai-approval-status-rejected'}`;
-
-    const icon = document.createElement('span');
-    icon.className = 'jp-ai-approval-icon';
-    icon.textContent = isApprove ? '✅' : '❌';
-
-    const text = document.createElement('span');
-    text.textContent = isApprove ? 'Tools approved' : 'Tools rejected';
-
-    statusDiv.appendChild(icon);
-    statusDiv.appendChild(text);
-    buttonsContainer.appendChild(statusDiv);
   }
 
   /**
-   * Shows group approval status by replacing buttons with status indicator.
-   *
-   * @param buttonsContainer - The container element holding the buttons
-   * @param isApprove - Whether the action was approval or rejection
-   * @param toolCount - The number of tools that were approved/rejected
+   * Extracts the approval ID from an element's class list.
+   * The ID is encoded in a class name like "jp-ai-approval-id--{id}".
    */
-  private _showGroupApprovalStatus(
-    buttonsContainer: Element,
-    isApprove: boolean
-  ): void {
-    // Clear the container and add status indicator
-    buttonsContainer.innerHTML = '';
-
-    const statusDiv = document.createElement('div');
-    statusDiv.className = `jp-ai-group-approval-status ${isApprove ? 'jp-ai-group-approval-status-approved' : 'jp-ai-group-approval-status-rejected'}`;
-
-    const icon = document.createElement('span');
-    icon.className = 'jp-ai-approval-icon';
-    icon.textContent = isApprove ? '✅' : '❌';
-
-    const text = document.createElement('span');
-    text.textContent = isApprove ? 'Tools approved' : 'Tools rejected';
-
-    statusDiv.appendChild(icon);
-    statusDiv.appendChild(text);
-    buttonsContainer.appendChild(statusDiv);
-  }
-
-  /**
-   * Sets up mutation observer to watch for new messages and process approval buttons.
-   */
-  private _setupMessageProcessing() {
-    // Use a MutationObserver to watch for new messages and process approval buttons
-    this._mutationObserver = new MutationObserver(mutations => {
-      if (this._isDisposed) {
-        return;
-      }
-      mutations.forEach(mutation => {
-        mutation.addedNodes.forEach(node => {
-          if (node.nodeType === Node.ELEMENT_NODE) {
-            const element = node as Element;
-            this._processApprovalButtons(element);
-          }
-        });
-      });
-    });
-
-    this._mutationObserver.observe(this._chatPanel.node, {
-      childList: true,
-      subtree: true
-    });
-  }
-
-  /**
-   * Processes text nodes to replace approval button placeholders with actual button elements.
-   *
-   * @param element - The element to search for approval button placeholders
-   */
-  private _processApprovalButtons(element: Element) {
-    // Find all text nodes that contain approval buttons and replace them with actual buttons
-    const walker = document.createTreeWalker(
-      element,
-      NodeFilter.SHOW_TEXT,
-      null
-    );
-
-    const textNodes: Text[] = [];
-    let node;
-    while ((node = walker.nextNode())) {
-      textNodes.push(node as Text);
-    }
-
-    textNodes.forEach(textNode => {
-      const text = textNode.textContent || '';
-
-      // Handle single tool approval buttons [APPROVAL_BUTTONS:id]
-      const singleMatch = text.match(/\[APPROVAL_BUTTONS:([^\]]+)\]/);
-      if (singleMatch) {
-        this._createSingleApprovalButtons(textNode, singleMatch[1]);
-        return;
+  private _extractApprovalId(element: Element): string | null {
+    const prefix = 'jp-ai-approval-id--';
+    for (const className of element.classList) {
+      if (className.startsWith(prefix)) {
+        return className.slice(prefix.length);
       }
-
-      // Handle grouped tool approval buttons [GROUP_APPROVAL_BUTTONS:groupId:id1,id2,id3]
-      const groupMatch = text.match(
-        /\[GROUP_APPROVAL_BUTTONS:([^:]+):([^\]]+)\]/
-      );
-      if (groupMatch) {
-        this._createGroupedApprovalButtons(
-          textNode,
-          groupMatch[1],
-          groupMatch[2]
-        );
-        return;
-      }
-    });
-  }
-
-  /**
-   * Creates an approval button element with appropriate styling and classes.
-   *
-   * @param text - The button text
-   * @param isApprove - Whether this is an approve or reject button
-   * @param additionalClasses - Additional CSS classes to add
-   * @returns The created button element
-   */
-  private _createApprovalButton(
-    text: string,
-    isApprove: boolean,
-    additionalClasses: string = ''
-  ): HTMLButtonElement {
-    const button = document.createElement('button');
-    const baseClass = isApprove
-      ? 'jp-ai-approval-approve'
-      : 'jp-ai-approval-reject';
-    button.className = `jp-ai-approval-btn ${baseClass}${additionalClasses ? ' ' + additionalClasses : ''}`;
-    button.textContent = text;
-    return button;
-  }
-
-  /**
-   * Creates and inserts approval buttons for a single tool call.
-   *
-   * @param textNode - The text node to replace with buttons
-   * @param interruptionId - The interruption ID for the tool call
-   */
-  private _createSingleApprovalButtons(textNode: Text, interruptionId: string) {
-    // Create approval buttons for single tool
-    const buttonContainer = document.createElement('div');
-    buttonContainer.className = 'jp-ai-tool-approval-buttons';
-    buttonContainer.setAttribute('data-interruption-id', interruptionId);
-
-    // Try to find the message ID from the closest message container
-    const messageId = this._findMessageId(textNode);
-    if (messageId) {
-      buttonContainer.setAttribute('data-message-id', messageId);
-    }
-
-    const approveBtn = this._createApprovalButton('Approve', true);
-    const rejectBtn = this._createApprovalButton('Reject', false);
-
-    // Add click handlers directly to the buttons
-    this._addButtonHandler(approveBtn);
-    this._addButtonHandler(rejectBtn);
-
-    buttonContainer.appendChild(approveBtn);
-    buttonContainer.appendChild(rejectBtn);
-
-    // Replace the text node with the button container
-    const parent = textNode.parentNode;
-    if (parent) {
-      parent.replaceChild(buttonContainer, textNode);
-    }
-  }
-
-  /**
-   * Creates and inserts approval buttons for grouped tool calls.
-   *
-   * @param textNode - The text node to replace with buttons
-   * @param groupId - The group ID for the tool calls
-   * @param interruptionIds - Comma-separated interruption IDs
-   */
-  private _createGroupedApprovalButtons(
-    textNode: Text,
-    groupId: string,
-    interruptionIds: string
-  ) {
-    // Create approval buttons for grouped tools
-    const buttonContainer = document.createElement('div');
-    buttonContainer.className = 'jp-ai-group-approval-buttons';
-    buttonContainer.setAttribute('data-group-id', groupId);
-    buttonContainer.setAttribute('data-interruption-ids', interruptionIds);
-
-    // Try to find the message ID from the closest message container
-    const messageId = this._findMessageId(textNode);
-    if (messageId) {
-      buttonContainer.setAttribute('data-message-id', messageId);
-    }
-
-    const approveBtn = this._createApprovalButton(
-      'Approve',
-      true,
-      'jp-ai-group-approve-all'
-    );
-    const rejectBtn = this._createApprovalButton(
-      'Reject',
-      false,
-      'jp-ai-group-reject-all'
-    );
-
-    // Add click handlers for grouped approvals
-    this._addGroupedButtonHandler(approveBtn);
-    this._addGroupedButtonHandler(rejectBtn);
-
-    buttonContainer.appendChild(approveBtn);
-    buttonContainer.appendChild(rejectBtn);
-
-    // Replace the text node with the button container
-    const parent = textNode.parentNode;
-    if (parent) {
-      parent.replaceChild(buttonContainer, textNode);
-    }
-  }
-
-  /**
-   * Finds the message ID by traversing up the DOM tree from a text node.
-   *
-   * @param textNode - The text node to start searching from
-   * @returns The message ID if found, null otherwise
-   */
-  private _findMessageId(textNode: Text): string | null {
-    let messageElement = textNode.parentNode;
-    while (messageElement && messageElement !== document.body) {
-      if (messageElement.nodeType === Node.ELEMENT_NODE) {
-        const element = messageElement as Element;
-        // Look for common message container attributes or classes
-        const messageId =
-          element.getAttribute('data-message-id') ||
-          element.getAttribute('id') ||
-          element
-            .querySelector('[data-message-id]')
-            ?.getAttribute('data-message-id');
-        if (messageId) {
-          return messageId;
-        }
-      }
-      messageElement = messageElement.parentNode;
     }
     return null;
   }
 
   private _chatPanel: ChatWidget;
-  private _chatModel: AIChatModel;
   private _isDisposed: boolean = false;
-  private _mutationObserver?: MutationObserver;
+  private _agentManager: AgentManager;
 }
 
 /**
- * Namespace for ChatWrapperWidget statics.
+ * Namespace for ApprovalButtons statics.
  */
 export namespace ApprovalButtons {
   /**
-   * The options for the constructor of the chat wrapper widget.
+   * The options for the constructor of the approval buttons.
    */
   export interface IOptions {
     /**
      * The chat panel widget to wrap.
      */
     chatPanel: ChatWidget;
+    /**
+     * The agent manager for handling approvals.
+     */
+    agentManager: AgentManager;
   }
 }

package/src/chat-model-registry.ts

@@ -1,4 +1,5 @@
 import { ActiveCellManager } from '@jupyter/chat';
+import { TranslationBundle } from '@jupyterlab/translation';
 import { AgentManagerFactory } from './agent';
 import { AIChatModel } from './chat-model';
 import { AISettingsModel } from './models/settings-model';
@@ -22,6 +23,7 @@ export class ChatModelRegistry implements IChatModelRegistry {
     this._toolRegistry = options.toolRegistry;
     this._providerRegistry = options.providerRegistry;
     this._activeCellManager = options.activeCellManager;
+    this._trans = options.trans;
   }
 
   createModel(
@@ -44,7 +46,8 @@ export class ChatModelRegistry implements IChatModelRegistry {
       settingsModel: this._settingsModel,
       agentManager,
       activeCellManager: this._activeCellManager,
-      documentManager: this._docManager
+      documentManager: this._docManager,
+      trans: this._trans
     });
 
     // Set the name of the chat if not provided.
@@ -97,6 +100,7 @@ export class ChatModelRegistry implements IChatModelRegistry {
   private _toolRegistry?: IToolRegistry;
   private _providerRegistry?: IProviderRegistry;
   private _activeCellManager?: ActiveCellManager;
+  private _trans: TranslationBundle;
 }
 
 export namespace ChatModelRegistry {
@@ -125,5 +129,9 @@ export namespace ChatModelRegistry {
      * The active cell manager.
      */
     activeCellManager: ActiveCellManager | undefined;
+    /**
+     * The application language translation bundle.
+     */
+    trans: TranslationBundle;
   }
 }