@jupyterlite/ai 0.14.0 → 0.16.0

package/style/base.css

@@ -88,164 +88,6 @@
   border-bottom: none;
 }
 
-/* Modern Tool Call Card Styling */
-.jp-ai-tool-call {
-  margin: 8px 0;
-  border: 1px solid var(--jp-border-color1);
-  border-radius: 6px;
-  background: var(--jp-layout-color0);
-  box-shadow: var(--jp-elevation-z2);
-  transition: all 0.2s ease;
-  overflow: hidden;
-}
-
-.jp-ai-tool-call:hover {
-  border-color: var(--jp-border-color2);
-  box-shadow: var(--jp-elevation-z4);
-}
-
-/* Tool Header - clickable summary */
-.jp-ai-tool-header {
-  display: flex;
-  align-items: center;
-  padding: 4px 8px;
-  background: var(--jp-layout-color1);
-  cursor: pointer;
-  user-select: none;
-  gap: 8px;
-  transition: background-color 0.2s ease;
-}
-
-.jp-ai-tool-header:hover {
-  background: var(--jp-layout-color2);
-}
-
-.jp-ai-tool-header::marker {
-  content: '';
-}
-
-.jp-ai-tool-header::before {
-  content: '';
-  width: 0;
-  height: 0;
-  border-left: 5px solid var(--jp-ui-font-color2);
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  transition: transform 0.2s ease;
-}
-
-.jp-ai-tool-call[open] .jp-ai-tool-header::before {
-  transform: rotate(90deg);
-}
-
-.jp-ai-tool-icon {
-  font-size: 14px;
-  opacity: 0.8;
-}
-
-.jp-ai-tool-title {
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size1);
-  font-weight: 500;
-  color: var(--jp-ui-font-color1);
-  flex: 1;
-}
-
-.jp-ai-tool-summary {
-  font-weight: 400;
-  opacity: 0.7;
-  font-size: var(--jp-ui-font-size0);
-}
-
-.jp-ai-tool-summary::before {
-  content: ' ';
-  white-space: pre;
-}
-
-.jp-ai-tool-status {
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 500;
-  padding: 2px 6px;
-  border-radius: 3px;
-}
-
-.jp-ai-tool-status-pending {
-  background: rgb(var(--jp-warn-color1-rgb) / 15%);
-  color: var(--jp-warn-color1);
-}
-
-.jp-ai-tool-status-completed {
-  background: rgb(var(--jp-success-color1-rgb) / 15%);
-  color: var(--jp-success-color1);
-}
-
-.jp-ai-tool-status-error {
-  background: rgb(var(--jp-error-color1-rgb) / 15%);
-  color: var(--jp-error-color1);
-}
-
-.jp-ai-tool-status-approval {
-  background: rgb(var(--jp-warn-color1-rgb) / 15%);
-  color: var(--jp-warn-color1);
-}
-
-/* Tool Body */
-.jp-ai-tool-body {
-  padding: 8px 12px 12px;
-}
-
-.jp-ai-tool-section {
-  margin-bottom: 8px;
-}
-
-.jp-ai-tool-section:last-child {
-  margin-bottom: 0;
-}
-
-.jp-ai-tool-label {
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 600;
-  color: var(--jp-ui-font-color2);
-  margin-bottom: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.jp-ai-tool-code {
-  background: var(--jp-layout-color2);
-  border: 1px solid var(--jp-border-color1);
-  border-radius: 4px;
-  padding: 8px;
-  margin: 0;
-  font-family: var(--jp-code-font-family);
-  font-size: var(--jp-code-font-size);
-  line-height: 1.4;
-  overflow: auto auto;
-  max-height: 200px;
-}
-
-.jp-ai-tool-code code {
-  background: none;
-  padding: 0;
-  border: none;
-  font-family: inherit;
-  font-size: inherit;
-}
-
-/* State-specific styling */
-.jp-ai-tool-pending {
-  border-left: 4px solid var(--jp-warn-color1);
-}
-
-.jp-ai-tool-completed {
-  border-left: 4px solid var(--jp-success-color1);
-}
-
-.jp-ai-tool-error {
-  border-left: 4px solid var(--jp-error-color1);
-}
-
 .jp-AIChatToolbar {
   display: flex;
   flex-shrink: 0;
@@ -267,53 +109,33 @@
   padding: 0 0.4em;
 }
 
-/* Tool Approval Button Styles */
-.jp-ai-tool-approval-buttons,
-.jp-ai-group-approval-buttons {
+/* Save button */
+.jp-ai-SaveButton {
   display: flex;
-  gap: 8px;
-  margin-top: 12px;
-  justify-content: flex-end;
-}
-
-.jp-ai-approval-btn {
-  padding: 6px 12px;
-  border: none;
+  align-items: center;
+  background-color: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color1);
   border-radius: 4px;
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size0);
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 70px;
-  display: inline-block;
-}
-
-.jp-ai-approval-approve {
-  background: var(--jp-success-color1);
-  color: var(--jp-ui-inverse-font-color1);
+  padding: 4px;
 }
 
-.jp-ai-approval-approve:hover:not(:disabled) {
-  background: var(--jp-success-color0);
-  transform: translateY(-1px);
-  box-shadow: var(--jp-elevation-z4);
+.jp-ai-SaveButton.lm-mod-toggled {
+  box-shadow: inset 0 0 2px 2px var(--neutral-fill-strong-active);
 }
 
-.jp-ai-approval-reject {
-  background: var(--jp-error-color1);
-  color: var(--jp-ui-inverse-font-color1);
+.jp-ai-SaveButton .jp-ToolbarButtonComponent {
+  margin: unset;
+  height: 18px;
 }
 
-.jp-ai-approval-reject:hover:not(:disabled) {
-  background: var(--jp-error-color0);
-  transform: translateY(-1px);
-  box-shadow: var(--jp-elevation-z4);
+.jp-ai-SaveButton .jp-ai-AutoSaveButton {
+  min-width: unset;
+  width: 18px;
 }
 
-.jp-ai-approval-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+.jp-ai-SaveButton .jp-ai-AutoSaveButton svg {
+  width: 12px;
+  height: 12px;
 }
 
 .jp-MainAreaWidget

package/lib/approval-buttons.d.ts

@@ -1,49 +0,0 @@
-import { ChatWidget } from '@jupyter/chat';
-import { IDisposable } from '@lumino/disposable';
-import type { AgentManager } from './agent';
-/**
- * Handles click events for approval buttons in the chat panel.
- */
-export declare class ApprovalButtons implements IDisposable {
-    constructor(options: ApprovalButtons.IOptions);
-    get isDisposed(): boolean;
-    /**
-     * Dispose of the resources held by the object.
-     */
-    dispose(): void;
-    /**
-     * Handles click events using event delegation.
-     * Detects clicks on approval buttons and calls the appropriate handler.
-     */
-    private _handleClick;
-    /**
-     * Handles approval/rejection of a tool call.
-     */
-    private _handleApproval;
-    /**
-     * 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 _extractApprovalId;
-    private _chatPanel;
-    private _isDisposed;
-    private _agentManager;
-}
-/**
- * Namespace for ApprovalButtons statics.
- */
-export declare namespace ApprovalButtons {
-    /**
-     * The options for the constructor of the approval buttons.
-     */
-    interface IOptions {
-        /**
-         * The chat panel widget to wrap.
-         */
-        chatPanel: ChatWidget;
-        /**
-         * The agent manager for handling approvals.
-         */
-        agentManager: AgentManager;
-    }
-}

package/lib/approval-buttons.js

@@ -1,79 +0,0 @@
-/**
- * Handles click events for approval buttons in the chat panel.
- */
-export class ApprovalButtons {
-    constructor(options) {
-        this._chatPanel = options.chatPanel;
-        this._agentManager = options.agentManager;
-        this._chatPanel.node.addEventListener('click', this._handleClick);
-    }
-    get isDisposed() {
-        return this._isDisposed;
-    }
-    /**
-     * Dispose of the resources held by the object.
-     */
-    dispose() {
-        if (this._isDisposed) {
-            return;
-        }
-        this._isDisposed = true;
-        this._chatPanel.node.removeEventListener('click', this._handleClick);
-        this._chatPanel = null;
-    }
-    /**
-     * Handles click events using event delegation.
-     * Detects clicks on approval buttons and calls the appropriate handler.
-     */
-    _handleClick = (event) => {
-        const target = event.target;
-        // Check if the click target is an approval button
-        if (!target.classList.contains('jp-ai-approval-btn')) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        const isApprove = target.classList.contains('jp-ai-approval-approve');
-        this._handleApproval(target, isApprove);
-    };
-    /**
-     * Handles approval/rejection of a tool call.
-     */
-    _handleApproval(target, isApprove) {
-        const container = target.closest('.jp-ai-tool-approval-buttons');
-        if (!container) {
-            return;
-        }
-        // 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;
-        }
-        // Disable buttons to prevent double-clicks
-        const buttons = container.querySelectorAll('button');
-        buttons.forEach(btn => btn.setAttribute('disabled', 'true'));
-        if (isApprove) {
-            this._agentManager.approveToolCall(approvalId);
-        }
-        else {
-            this._agentManager.rejectToolCall(approvalId);
-        }
-    }
-    /**
-     * Extracts the approval ID from an element's class list.
-     * The ID is encoded in a class name like "jp-ai-approval-id--{id}".
-     */
-    _extractApprovalId(element) {
-        const prefix = 'jp-ai-approval-id--';
-        for (const className of element.classList) {
-            if (className.startsWith(prefix)) {
-                return className.slice(prefix.length);
-            }
-        }
-        return null;
-    }
-    _chatPanel;
-    _isDisposed = false;
-    _agentManager;
-}

package/lib/components/token-usage-display.js

@@ -1,72 +0,0 @@
-import { ReactWidget, UseSignal } from '@jupyterlab/ui-components';
-import React from 'react';
-/**
- * React component that displays token usage information.
- * Shows input/output token counts with up/down arrows.
- * Only renders when token usage display is enabled in settings.
- */
-export const TokenUsageDisplay = ({ tokenUsageChanged, settingsModel, initialTokenUsage, translator: trans }) => {
-    return (React.createElement(UseSignal, { signal: settingsModel.stateChanged, initialArgs: undefined }, () => {
-        const config = settingsModel.config;
-        if (!config.showTokenUsage) {
-            return null;
-        }
-        return (React.createElement(UseSignal, { signal: tokenUsageChanged, initialArgs: initialTokenUsage }, (_, tokenUsage) => {
-            if (!tokenUsage) {
-                return null;
-            }
-            const total = tokenUsage.inputTokens + tokenUsage.outputTokens;
-            if (total === 0) {
-                return null;
-            }
-            return (React.createElement("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px',
-                    fontSize: '12px',
-                    color: 'var(--jp-ui-font-color2)',
-                    padding: '4px 8px',
-                    backgroundColor: 'var(--jp-layout-color1)',
-                    border: '1px solid var(--jp-border-color1)',
-                    borderRadius: '4px',
-                    whiteSpace: 'nowrap'
-                }, title: trans.__('Token Usage - Sent: %1, Received: %2, Total: %3', tokenUsage.inputTokens.toLocaleString(), tokenUsage.outputTokens.toLocaleString(), total.toLocaleString()) },
-                React.createElement("span", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '2px'
-                    } },
-                    React.createElement("span", null, "\u2191"),
-                    React.createElement("span", null, tokenUsage.inputTokens.toLocaleString())),
-                React.createElement("span", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '2px'
-                    } },
-                    React.createElement("span", null, "\u2193"),
-                    React.createElement("span", null, tokenUsage.outputTokens.toLocaleString()))));
-        }));
-    }));
-};
-/**
- * JupyterLab widget wrapper for the TokenUsageDisplay component.
- * Extends ReactWidget to integrate with the JupyterLab widget system.
- */
-export class TokenUsageWidget extends ReactWidget {
-    /**
-     * Creates a new TokenUsageWidget instance.
-     * @param options - Configuration options containing required models
-     */
-    constructor(options) {
-        super();
-        this._options = options;
-    }
-    /**
-     * Renders the React component within the widget.
-     * @returns The TokenUsageDisplay React element
-     */
-    render() {
-        return React.createElement(TokenUsageDisplay, { ...this._options });
-    }
-    _options;
-}

package/src/approval-buttons.ts

@@ -1,115 +0,0 @@
-import { ChatWidget } from '@jupyter/chat';
-import { IDisposable } from '@lumino/disposable';
-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._agentManager = options.agentManager;
-
-    this._chatPanel.node.addEventListener('click', this._handleClick);
-  }
-
-  get isDisposed(): boolean {
-    return this._isDisposed;
-  }
-
-  /**
-   * Dispose of the resources held by the object.
-   */
-  dispose(): void {
-    if (this._isDisposed) {
-      return;
-    }
-    this._isDisposed = true;
-
-    this._chatPanel.node.removeEventListener('click', this._handleClick);
-    this._chatPanel = null!;
-  }
-
-  /**
-   * Handles click events using event delegation.
-   * Detects clicks on approval buttons and calls the appropriate handler.
-   */
-  private _handleClick = (event: Event): void => {
-    const target = event.target as HTMLElement;
-
-    // Check if the click target is an approval button
-    if (!target.classList.contains('jp-ai-approval-btn')) {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    const isApprove = target.classList.contains('jp-ai-approval-approve');
-    this._handleApproval(target, isApprove);
-  };
-
-  /**
-   * Handles approval/rejection of a tool call.
-   */
-  private _handleApproval(target: HTMLElement, isApprove: boolean): void {
-    const container = target.closest('.jp-ai-tool-approval-buttons');
-    if (!container) {
-      return;
-    }
-
-    // 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;
-    }
-
-    // Disable buttons to prevent double-clicks
-    const buttons = container.querySelectorAll('button');
-    buttons.forEach(btn => btn.setAttribute('disabled', 'true'));
-
-    if (isApprove) {
-      this._agentManager.approveToolCall(approvalId);
-    } else {
-      this._agentManager.rejectToolCall(approvalId);
-    }
-  }
-
-  /**
-   * 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 _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);
-      }
-    }
-    return null;
-  }
-
-  private _chatPanel: ChatWidget;
-  private _isDisposed: boolean = false;
-  private _agentManager: AgentManager;
-}
-
-/**
- * Namespace for ApprovalButtons statics.
- */
-export namespace ApprovalButtons {
-  /**
-   * 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/components/token-usage-display.tsx

@@ -1,138 +0,0 @@
-import { ReactWidget, UseSignal } from '@jupyterlab/ui-components';
-import type { TranslationBundle } from '@jupyterlab/translation';
-import React from 'react';
-import { ISignal } from '@lumino/signaling';
-import { AISettingsModel } from '../models/settings-model';
-import { ITokenUsage } from '../tokens';
-
-/**
- * Props for the TokenUsageDisplay component.
- */
-export interface ITokenUsageDisplayProps {
-  /**
-   * The token usage changed signal
-   */
-  tokenUsageChanged: ISignal<any, ITokenUsage>;
-
-  /**
-   * The settings model instance for configuration options
-   */
-  settingsModel: AISettingsModel;
-
-  /**
-   * Initial token usage.
-   */
-  initialTokenUsage?: ITokenUsage;
-
-  /**
-   * The application language translator.
-   */
-  translator: TranslationBundle;
-}
-
-/**
- * React component that displays token usage information.
- * Shows input/output token counts with up/down arrows.
- * Only renders when token usage display is enabled in settings.
- */
-export const TokenUsageDisplay: React.FC<ITokenUsageDisplayProps> = ({
-  tokenUsageChanged,
-  settingsModel,
-  initialTokenUsage,
-  translator: trans
-}) => {
-  return (
-    <UseSignal signal={settingsModel.stateChanged} initialArgs={undefined}>
-      {() => {
-        const config = settingsModel.config;
-        if (!config.showTokenUsage) {
-          return null;
-        }
-
-        return (
-          <UseSignal signal={tokenUsageChanged} initialArgs={initialTokenUsage}>
-            {(_, tokenUsage: ITokenUsage | null | undefined) => {
-              if (!tokenUsage) {
-                return null;
-              }
-
-              const total = tokenUsage.inputTokens + tokenUsage.outputTokens;
-              if (total === 0) {
-                return null;
-              }
-
-              return (
-                <div
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px',
-                    fontSize: '12px',
-                    color: 'var(--jp-ui-font-color2)',
-                    padding: '4px 8px',
-                    backgroundColor: 'var(--jp-layout-color1)',
-                    border: '1px solid var(--jp-border-color1)',
-                    borderRadius: '4px',
-                    whiteSpace: 'nowrap'
-                  }}
-                  title={trans.__(
-                    'Token Usage - Sent: %1, Received: %2, Total: %3',
-                    tokenUsage.inputTokens.toLocaleString(),
-                    tokenUsage.outputTokens.toLocaleString(),
-                    total.toLocaleString()
-                  )}
-                >
-                  <span
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '2px'
-                    }}
-                  >
-                    <span>↑</span>
-                    <span>{tokenUsage.inputTokens.toLocaleString()}</span>
-                  </span>
-                  <span
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '2px'
-                    }}
-                  >
-                    <span>↓</span>
-                    <span>{tokenUsage.outputTokens.toLocaleString()}</span>
-                  </span>
-                </div>
-              );
-            }}
-          </UseSignal>
-        );
-      }}
-    </UseSignal>
-  );
-};
-
-/**
- * JupyterLab widget wrapper for the TokenUsageDisplay component.
- * Extends ReactWidget to integrate with the JupyterLab widget system.
- */
-export class TokenUsageWidget extends ReactWidget {
-  /**
-   * Creates a new TokenUsageWidget instance.
-   * @param options - Configuration options containing required models
-   */
-  constructor(options: ITokenUsageDisplayProps) {
-    super();
-    this._options = options;
-  }
-
-  /**
-   * Renders the React component within the widget.
-   * @returns The TokenUsageDisplay React element
-   */
-  protected render(): React.ReactElement {
-    return <TokenUsageDisplay {...this._options} />;
-  }
-
-  private _options: ITokenUsageDisplayProps;
-}