@jupyterlite/ai 0.8.0 → 0.9.0-a0

package/lib/completion/completion-provider.js

@@ -0,0 +1,209 @@
+import { NotebookPanel } from '@jupyterlab/notebook';
+import { generateText } from 'ai';
+import { createCompletionModel } from '../providers/models';
+/**
+ * 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`;
+/**
+ * The generic completion provider to register to the completion provider manager.
+ */
+export class AICompletionProvider {
+    /**
+     * Construct a new completion provider.
+     */
+    constructor(options) {
+        this._settingsModel = options.settingsModel;
+        this._completionProviderRegistry = options.completionProviderRegistry;
+        this._settingsModel.stateChanged.connect(() => {
+            this._updateModel();
+        });
+        this._updateModel();
+    }
+    /**
+     * The unique identifier of the provider.
+     */
+    identifier = '@jupyterlite/ai:completer';
+    /**
+     * Get the current completer name based on settings.
+     */
+    get name() {
+        const activeProvider = this._settingsModel.getCompleterProvider();
+        return activeProvider ? `${activeProvider.provider}-completer` : 'none';
+    }
+    /**
+     * Get the system prompt for the completion.
+     */
+    get systemPrompt() {
+        return DEFAULT_COMPLETION_SYSTEM_PROMPT;
+    }
+    /**
+     * Fetch completion items based on the request and context.
+     */
+    async fetch(request, context) {
+        if (!this._model) {
+            return { items: [] };
+        }
+        const { text, offset: cursorOffset } = request;
+        const prompt = text.slice(0, cursorOffset);
+        const suffix = text.slice(cursorOffset);
+        // Get current provider settings
+        const activeProvider = this._settingsModel.getCompleterProvider();
+        if (!activeProvider) {
+            return { items: [] };
+        }
+        const provider = activeProvider.provider;
+        const providerConfig = this._getProviderCompletionConfig(provider);
+        try {
+            let completionPrompt;
+            // Check if we're in a notebook or file and handle context accordingly
+            if (context.widget instanceof NotebookPanel) {
+                // Extract notebook context with surrounding cells
+                const contextString = this._extractNotebookContext(context, request);
+                completionPrompt = contextString;
+            }
+            else {
+                // For files, use simpler approach
+                completionPrompt = prompt.trim();
+                if (providerConfig.customPromptFormat && suffix.trim()) {
+                    completionPrompt = providerConfig.customPromptFormat(prompt, suffix);
+                }
+            }
+            const { text: completion } = await generateText({
+                model: this._model,
+                prompt: completionPrompt,
+                system: this.systemPrompt,
+                temperature: providerConfig.temperature || 0.3
+            });
+            // Clean up provider-specific artifacts if cleanup function is provided
+            let cleanCompletion = completion;
+            if (providerConfig.cleanupCompletion) {
+                cleanCompletion = providerConfig.cleanupCompletion(completion);
+            }
+            const items = [
+                {
+                    insertText: cleanCompletion,
+                    filterText: providerConfig.useFilterText
+                        ? prompt.substring(completionPrompt.length)
+                        : undefined
+                }
+            ];
+            return { items };
+        }
+        catch (error) {
+            console.error(`Error fetching completions from ${provider}:`, error);
+            return { items: [] };
+        }
+    }
+    /**
+     * Update the language model based on current settings.
+     */
+    _updateModel() {
+        const activeProvider = this._settingsModel.getCompleterProvider();
+        if (!activeProvider) {
+            this._model = null;
+            return;
+        }
+        const provider = activeProvider.provider;
+        const model = activeProvider.model;
+        const apiKey = this._settingsModel.getApiKey(activeProvider.id);
+        try {
+            this._model = createCompletionModel({
+                provider,
+                model,
+                apiKey
+            }, this._completionProviderRegistry);
+        }
+        catch (error) {
+            console.error(`Error creating model for ${provider}:`, error);
+            this._model = null;
+        }
+    }
+    /**
+     * Extract context from notebook cells
+     */
+    _extractNotebookContext(context, request) {
+        const { text, offset: cursorOffset } = request;
+        let codeBeforeCursor = text.slice(0, cursorOffset);
+        let codeAfterCursor = text.slice(cursorOffset);
+        const notebookPanel = context.widget;
+        const notebook = notebookPanel.content;
+        const currentCellIndex = notebook.activeCellIndex;
+        const cells = notebook.widgets;
+        // For notebooks, include context from surrounding cells
+        const cellsAbove = [];
+        const cellsBelow = [];
+        // Get content from cells above current cell
+        for (let i = 0; i < currentCellIndex; i++) {
+            const cell = cells[i];
+            if (cell.model.type === 'code') {
+                const source = cell.model.sharedModel.source;
+                if (source.trim()) {
+                    cellsAbove.push(source.trim());
+                }
+            }
+        }
+        // Get content from cells below current cell
+        for (let i = currentCellIndex + 1; i < cells.length; i++) {
+            const cell = cells[i];
+            if (cell.model.type === 'code') {
+                const source = cell.model.sharedModel.source;
+                if (source.trim()) {
+                    cellsBelow.push(source.trim());
+                }
+            }
+        }
+        // Include cells above in the code before cursor
+        if (cellsAbove.length > 0) {
+            const cellsAboveText = cellsAbove
+                .map((cell, index) => `# Cell ${index + 1}:\n${cell}`)
+                .join('\n\n');
+            codeBeforeCursor = `${cellsAboveText}\n\n# Current cell:\n${codeBeforeCursor}`;
+        }
+        // Include cells below in the code after cursor
+        if (cellsBelow.length > 0) {
+            const cellsBelowText = cellsBelow
+                .map((cell, index) => `# Cell ${index + 1}:\n${cell}`)
+                .join('\n\n');
+            codeAfterCursor = `${codeAfterCursor}\n\n# Cells below:\n${cellsBelowText}`;
+        }
+        const parts = [];
+        // Add code before cursor
+        if (codeBeforeCursor) {
+            parts.push('# Code before cursor:');
+            parts.push(codeBeforeCursor);
+        }
+        // Add completion instruction
+        parts.push('# Complete the code at cursor position');
+        // Add code after cursor
+        if (codeAfterCursor) {
+            parts.push('# Code after cursor:');
+            parts.push(codeAfterCursor);
+        }
+        return parts.length > 1 ? parts.join('\n\n') + '\n\n' : '';
+    }
+    /**
+     * Get provider-specific completion configuration from registry
+     */
+    _getProviderCompletionConfig(provider) {
+        const providerInfo = this._completionProviderRegistry?.getProviderInfo(provider);
+        const completionConfig = providerInfo?.customSettings?.completionConfig;
+        // Return provider config or default config
+        return (completionConfig || {
+            temperature: 0.3,
+            supportsFillInMiddle: false,
+            useFilterText: false
+        });
+    }
+    _settingsModel;
+    _completionProviderRegistry;
+    _model = null;
+}

package/lib/completion/index.d.ts

@@ -0,0 +1 @@
+export * from './completion-provider';

package/lib/completion/index.js

@@ -0,0 +1 @@
+export * from './completion-provider';

package/lib/components/clear-button.d.ts

@@ -0,0 +1,18 @@
+import { InputToolbarRegistry } from '@jupyter/chat';
+/**
+ * Properties of the clear button.
+ */
+export interface IClearButtonProps extends InputToolbarRegistry.IToolbarItemProps {
+    /**
+     * The function to clear messages.
+     */
+    clearMessages: () => void;
+}
+/**
+ * The clear button component.
+ */
+export declare function ClearButton(props: IClearButtonProps): JSX.Element;
+/**
+ * Factory returning the clear button toolbar item.
+ */
+export declare function clearItem(): InputToolbarRegistry.IToolbarItem;

package/lib/components/clear-button.js

@@ -0,0 +1,31 @@
+import { TooltippedButton } from '@jupyter/chat';
+import ClearIcon from '@mui/icons-material/Clear';
+import React from 'react';
+/**
+ * The clear button component.
+ */
+export function ClearButton(props) {
+    const tooltip = 'Clear chat';
+    return (React.createElement(TooltippedButton, { onClick: props.clearMessages, tooltip: tooltip, buttonProps: {
+            size: 'small',
+            variant: 'outlined',
+            color: 'secondary',
+            title: tooltip
+        } },
+        React.createElement(ClearIcon, null)));
+}
+/**
+ * Factory returning the clear button toolbar item.
+ */
+export function clearItem() {
+    return {
+        element: (props) => {
+            const { model } = props;
+            const clearMessages = () => model.chatContext.clearMessages();
+            const clearProps = { ...props, clearMessages };
+            return ClearButton(clearProps);
+        },
+        position: 0,
+        hidden: false
+    };
+}

package/lib/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './clear-button';
+export * from './stop-button';
+export * from './tool-select';

package/lib/components/index.js

@@ -0,0 +1,3 @@
+export * from './clear-button';
+export * from './stop-button';
+export * from './tool-select';

package/lib/components/model-select.d.ts

@@ -0,0 +1,19 @@
+import { InputToolbarRegistry } from '@jupyter/chat';
+import { AISettingsModel } from '../models/settings-model';
+/**
+ * Properties for the model select component.
+ */
+export interface IModelSelectProps extends InputToolbarRegistry.IToolbarItemProps {
+    /**
+     * The settings model to get available models and current selection from.
+     */
+    settingsModel: AISettingsModel;
+}
+/**
+ * The model select component for choosing AI models.
+ */
+export declare function ModelSelect(props: IModelSelectProps): JSX.Element;
+/**
+ * Factory function returning the toolbar item for model selection.
+ */
+export declare function createModelSelectItem(settingsModel: AISettingsModel): InputToolbarRegistry.IToolbarItem;

package/lib/components/model-select.js

@@ -0,0 +1,154 @@
+import { TooltippedButton } from '@jupyter/chat';
+import CheckIcon from '@mui/icons-material/Check';
+import { Menu, MenuItem, Typography } from '@mui/material';
+import React, { useCallback, useEffect, useState } from 'react';
+const SELECT_ITEM_CLASS = 'labai-model-select-item';
+/**
+ * The model select component for choosing AI models.
+ */
+export function ModelSelect(props) {
+    const { settingsModel } = props;
+    const [currentProvider, setCurrentProvider] = useState('');
+    const [currentModel, setCurrentModel] = useState('');
+    const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+    // Get configured providers from settings model
+    const configuredProviders = settingsModel.providers;
+    const openMenu = useCallback((el) => {
+        setMenuAnchorEl(el);
+        setMenuOpen(true);
+    }, []);
+    const closeMenu = useCallback(() => {
+        setMenuOpen(false);
+    }, []);
+    const selectModel = useCallback(async (providerId) => {
+        // Set the active provider using the provider ID
+        await settingsModel.setActiveProvider(providerId);
+        closeMenu();
+        // Provider selected successfully
+    }, [settingsModel, closeMenu]);
+    // Update current selection when settings model changes
+    useEffect(() => {
+        const updateCurrentSelection = () => {
+            const activeProvider = settingsModel.getActiveProvider();
+            if (activeProvider) {
+                setCurrentProvider(activeProvider.id);
+                setCurrentModel(activeProvider.model);
+            }
+        };
+        updateCurrentSelection();
+        settingsModel.stateChanged.connect(updateCurrentSelection);
+        return () => {
+            settingsModel.stateChanged.disconnect(updateCurrentSelection);
+        };
+    }, [settingsModel]);
+    // Get current provider label for display
+    const activeProvider = settingsModel.getActiveProvider();
+    const currentProviderLabel = activeProvider?.name || currentProvider;
+    // Use all configured providers (they're already validated when added)
+    const availableProviders = configuredProviders;
+    // Get available model combinations from configured providers
+    const availableModels = availableProviders.map(provider => ({
+        provider: provider.id,
+        providerLabel: provider.name,
+        model: provider.model,
+        isSelected: provider.id === currentProvider && provider.model === currentModel
+    }));
+    // Show a message if no providers are configured
+    if (availableModels.length === 0) {
+        return (React.createElement(TooltippedButton, { onClick: () => { }, tooltip: "No providers configured. Please go to AI Settings to add a provider.", buttonProps: {
+                size: 'small',
+                variant: 'outlined',
+                color: 'warning',
+                disabled: true,
+                title: 'No Providers Available'
+            }, sx: {
+                minWidth: 'auto',
+                display: 'flex',
+                alignItems: 'center',
+                height: '29px'
+            } },
+            React.createElement(Typography, { variant: "caption", sx: { fontSize: '0.7rem', fontWeight: 500 } }, "No Providers")));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TooltippedButton, { onClick: e => {
+                openMenu(e.currentTarget);
+            }, tooltip: `Current Model: ${currentProviderLabel} - ${currentModel}`, buttonProps: {
+                size: 'small',
+                variant: 'contained',
+                color: 'primary',
+                title: 'Select AI Model',
+                onKeyDown: e => {
+                    if (e.key !== 'Enter' && e.key !== ' ') {
+                        return;
+                    }
+                    openMenu(e.currentTarget);
+                    // Stop propagation to prevent sending message
+                    e.stopPropagation();
+                }
+            }, sx: {
+                minWidth: 'auto',
+                display: 'flex',
+                alignItems: 'center',
+                height: '29px'
+            } },
+            React.createElement(Typography, { variant: "caption", sx: { fontSize: '0.7rem', fontWeight: 500, textTransform: 'none' } }, currentProviderLabel)),
+        React.createElement(Menu, { open: menuOpen, onClose: closeMenu, anchorEl: menuAnchorEl, anchorOrigin: {
+                vertical: 'top',
+                horizontal: 'right'
+            }, transformOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right'
+            }, sx: {
+                '& .MuiPaper-root': {
+                    maxHeight: '300px',
+                    overflowY: 'auto'
+                },
+                '& .MuiMenuItem-root': {
+                    padding: '0.5em',
+                    paddingRight: '2em',
+                    minWidth: '200px'
+                }
+            } }, availableModels.map(({ provider, providerLabel, isSelected }) => (React.createElement(MenuItem, { key: provider, className: SELECT_ITEM_CLASS, onClick: async (e) => {
+                await selectModel(provider);
+                // Prevent sending message on model selection
+                e.stopPropagation();
+            }, sx: {
+                backgroundColor: isSelected
+                    ? 'var(--jp-brand-color3, rgba(33, 150, 243, 0.1))'
+                    : 'transparent',
+                '&:hover': {
+                    backgroundColor: isSelected
+                        ? 'var(--jp-brand-color3, rgba(33, 150, 243, 0.15))'
+                        : 'var(--jp-layout-color1)'
+                },
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px'
+            } },
+            isSelected ? (React.createElement(CheckIcon, { sx: {
+                    color: 'var(--jp-brand-color1, #2196F3)',
+                    fontSize: 16
+                } })) : (React.createElement("div", { style: { width: '16px' } })),
+            React.createElement(Typography, { variant: "body2", component: "div", sx: {
+                    fontWeight: isSelected ? 600 : 400,
+                    color: isSelected
+                        ? 'var(--jp-brand-color1, #2196F3)'
+                        : 'inherit'
+                } }, providerLabel)))))));
+}
+/**
+ * Factory function returning the toolbar item for model selection.
+ */
+export function createModelSelectItem(settingsModel) {
+    return {
+        element: (props) => {
+            const modelSelectProps = {
+                ...props,
+                settingsModel
+            };
+            return React.createElement(ModelSelect, { ...modelSelectProps });
+        },
+        position: 0.5
+    };
+}

package/lib/components/stop-button.d.ts

@@ -9,10 +9,10 @@ export interface IStopButtonProps extends InputToolbarRegistry.IToolbarItemProps
     stopStreaming: () => void;
 }
 /**
- * The stop button.
+ * The stop button component.
  */
 export declare function StopButton(props: IStopButtonProps): JSX.Element;
 /**
- * factory returning the toolbar item.
+ * Factory returning the stop button toolbar item.
  */
-export declare function stopItem(stopStreaming: () => void): InputToolbarRegistry.IToolbarItem;
+export declare function stopItem(): InputToolbarRegistry.IToolbarItem;

package/lib/components/stop-button.js

@@ -1,32 +1,31 @@
-/*
- * Copyright (c) Jupyter Development Team.
- * Distributed under the terms of the Modified BSD License.
- */
+import { TooltippedButton } from '@jupyter/chat';
 import StopIcon from '@mui/icons-material/Stop';
 import React from 'react';
-import { TooltippedButton } from '@jupyter/chat';
 /**
- * The stop button.
+ * The stop button component.
  */
 export function StopButton(props) {
     const tooltip = 'Stop streaming';
     return (React.createElement(TooltippedButton, { onClick: props.stopStreaming, tooltip: tooltip, buttonProps: {
             size: 'small',
             variant: 'contained',
+            color: 'error',
             title: tooltip
         } },
         React.createElement(StopIcon, null)));
 }
 /**
- * factory returning the toolbar item.
+ * Factory returning the stop button toolbar item.
  */
-export function stopItem(stopStreaming) {
+export function stopItem() {
     return {
         element: (props) => {
+            const { model } = props;
+            const stopStreaming = () => model.chatContext.stopStreaming();
             const stopProps = { ...props, stopStreaming };
             return StopButton(stopProps);
         },
         position: 50,
-        hidden: true /* hidden by default */
+        hidden: true // Hidden by default, shown when streaming
     };
 }

package/lib/components/token-usage-display.d.ts

@@ -0,0 +1,45 @@
+import { ReactWidget } from '@jupyterlab/ui-components';
+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;
+}
+/**
+ * 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 declare const TokenUsageDisplay: React.FC<ITokenUsageDisplayProps>;
+/**
+ * JupyterLab widget wrapper for the TokenUsageDisplay component.
+ * Extends ReactWidget to integrate with the JupyterLab widget system.
+ */
+export declare class TokenUsageWidget extends ReactWidget {
+    /**
+     * Creates a new TokenUsageWidget instance.
+     * @param options - Configuration options containing required models
+     */
+    constructor(options: {
+        tokenUsageChanged: ISignal<any, ITokenUsage>;
+        settingsModel: AISettingsModel;
+    });
+    /**
+     * Renders the React component within the widget.
+     * @returns The TokenUsageDisplay React element
+     */
+    protected render(): React.ReactElement;
+    private _tokenUsageChanged;
+    private _settingsModel;
+}

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

@@ -0,0 +1,74 @@
+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 }) => {
+    return (React.createElement(UseSignal, { signal: settingsModel.stateChanged, initialArgs: undefined }, () => {
+        const config = settingsModel.config;
+        if (!config.showTokenUsage) {
+            return null;
+        }
+        return (React.createElement(UseSignal, { signal: tokenUsageChanged }, (_, 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: `Token Usage - Sent: ${tokenUsage.inputTokens.toLocaleString()}, Received: ${tokenUsage.outputTokens.toLocaleString()}, Total: ${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._tokenUsageChanged = options.tokenUsageChanged;
+        this._settingsModel = options.settingsModel;
+    }
+    /**
+     * Renders the React component within the widget.
+     * @returns The TokenUsageDisplay React element
+     */
+    render() {
+        return (React.createElement(TokenUsageDisplay, { tokenUsageChanged: this._tokenUsageChanged, settingsModel: this._settingsModel }));
+    }
+    _tokenUsageChanged;
+    _settingsModel;
+}

package/lib/components/tool-select.d.ts

@@ -0,0 +1,27 @@
+import { InputToolbarRegistry } from '@jupyter/chat';
+import { IToolRegistry } from '../tokens';
+/**
+ * Properties for the tool select component.
+ */
+export interface IToolSelectProps extends InputToolbarRegistry.IToolbarItemProps {
+    /**
+     * The tool registry to get available tools from.
+     */
+    toolRegistry: IToolRegistry;
+    /**
+     * Whether tools are enabled.
+     */
+    toolsEnabled: boolean;
+    /**
+     * Function to handle tool selection changes.
+     */
+    onToolSelectionChange: (selectedToolNames: string[]) => void;
+}
+/**
+ * The tool select component for choosing AI tools.
+ */
+export declare function ToolSelect(props: IToolSelectProps): JSX.Element;
+/**
+ * Factory function returning the toolbar item for tool selection.
+ */
+export declare function createToolSelectItem(toolRegistry: IToolRegistry, toolsEnabled?: boolean): InputToolbarRegistry.IToolbarItem;