@jupyterlite/ai 0.8.0 → 0.9.0-a0

package/lib/components/tool-select.js

@@ -0,0 +1,130 @@
+import { TooltippedButton } from '@jupyter/chat';
+import BuildIcon from '@mui/icons-material/Build';
+import CheckIcon from '@mui/icons-material/Check';
+import { Menu, MenuItem, Tooltip, Typography } from '@mui/material';
+import React, { useCallback, useEffect, useState } from 'react';
+const SELECT_ITEM_CLASS = 'jp-AIToolSelect-item';
+/**
+ * The tool select component for choosing AI tools.
+ */
+export function ToolSelect(props) {
+    const { toolRegistry, onToolSelectionChange, toolsEnabled } = props;
+    const [selectedToolNames, setSelectedToolNames] = useState([]);
+    const [tools, setTools] = useState(toolRegistry?.namedTools || []);
+    const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const openMenu = useCallback((el) => {
+        setMenuAnchorEl(el);
+        setMenuOpen(true);
+    }, []);
+    const closeMenu = useCallback(() => {
+        setMenuOpen(false);
+    }, []);
+    const toggleTool = useCallback((toolName) => {
+        const currentToolNames = [...selectedToolNames];
+        const index = currentToolNames.indexOf(toolName);
+        if (index !== -1) {
+            // Remove tool
+            currentToolNames.splice(index, 1);
+        }
+        else {
+            // Add tool
+            currentToolNames.push(toolName);
+        }
+        setSelectedToolNames(currentToolNames);
+        onToolSelectionChange(currentToolNames);
+    }, [selectedToolNames, onToolSelectionChange]);
+    // Update tools when registry changes
+    useEffect(() => {
+        const updateTools = () => {
+            const newTools = toolRegistry?.namedTools || [];
+            setTools(newTools);
+        };
+        if (toolRegistry) {
+            updateTools();
+            toolRegistry.toolsChanged.connect(updateTools);
+            return () => {
+                toolRegistry.toolsChanged.disconnect(updateTools);
+            };
+        }
+    }, [toolRegistry]);
+    // Initialize selected tools to all tools by default
+    useEffect(() => {
+        if (tools.length > 0 && selectedToolNames.length === 0) {
+            const defaultToolNames = tools.map(tool => tool.name);
+            setSelectedToolNames(defaultToolNames);
+            onToolSelectionChange(defaultToolNames);
+        }
+    }, [tools, selectedToolNames.length, onToolSelectionChange]);
+    // Don't render if tools are disabled or no tools available
+    if (!toolsEnabled || tools.length === 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TooltippedButton, { onClick: e => {
+                openMenu(e.currentTarget);
+            }, tooltip: `Tools (${selectedToolNames.length}/${tools.length} selected)`, buttonProps: {
+                size: 'small',
+                variant: selectedToolNames.length > 0 ? 'contained' : 'outlined',
+                color: 'primary',
+                title: 'Select AI Tools',
+                onKeyDown: e => {
+                    if (e.key !== 'Enter' && e.key !== ' ') {
+                        return;
+                    }
+                    openMenu(e.currentTarget);
+                    // Stop propagation to prevent sending message
+                    e.stopPropagation();
+                }
+            }, sx: selectedToolNames.length === 0
+                ? { backgroundColor: 'var(--jp-layout-color3)' }
+                : {} },
+            React.createElement(BuildIcon, null)),
+        React.createElement(Menu, { open: menuOpen, onClose: closeMenu, anchorEl: menuAnchorEl, anchorOrigin: {
+                vertical: 'top',
+                horizontal: 'right'
+            }, transformOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right'
+            }, sx: {
+                '& .MuiMenuItem-root': {
+                    padding: '0.5em',
+                    paddingRight: '2em'
+                }
+            } }, tools.map(namedTool => (React.createElement(Tooltip, { key: namedTool.name, title: namedTool.tool.description || namedTool.name, placement: "left" },
+            React.createElement(MenuItem, { className: SELECT_ITEM_CLASS, onClick: e => {
+                    toggleTool(namedTool.name);
+                    // Prevent sending message on tool selection
+                    e.stopPropagation();
+                } },
+                selectedToolNames.includes(namedTool.name) ? (React.createElement(CheckIcon, { sx: {
+                        marginRight: '8px',
+                        color: 'var(--jp-brand-color1, #2196F3)'
+                    } })) : (React.createElement("div", { style: { width: '24px', marginRight: '8px' } })),
+                React.createElement(Typography, { variant: "body2" }, namedTool.name))))))));
+}
+/**
+ * Factory function returning the toolbar item for tool selection.
+ */
+export function createToolSelectItem(toolRegistry, toolsEnabled = true) {
+    return {
+        element: (props) => {
+            const onToolSelectionChange = (tools) => {
+                const chatContext = props.model
+                    .chatContext;
+                if (!chatContext.agentManager) {
+                    return;
+                }
+                chatContext.agentManager.setSelectedTools(tools);
+            };
+            const toolSelectProps = {
+                ...props,
+                toolRegistry,
+                onToolSelectionChange,
+                toolsEnabled
+            };
+            return React.createElement(ToolSelect, { ...toolSelectProps });
+        },
+        position: 1
+    };
+}

package/lib/icons.d.ts

@@ -1,2 +1,4 @@
 import { LabIcon } from '@jupyterlab/ui-components';
-export declare const jupyternautLiteIcon: LabIcon;
+export declare const labaiIcon: LabIcon;
+export declare const jupyternautIcon: LabIcon;
+export declare const AI_AVATAR: string;

package/lib/icons.js

@@ -1,15 +1,12 @@
-/*
- * Copyright (c) Jupyter Development Team.
- * Distributed under the terms of the Modified BSD License.
- */
 import { LabIcon } from '@jupyterlab/ui-components';
-/**
- * This icon is based on the jupyternaut icon from Jupyter AI:
- * https://github.com/jupyterlab/jupyter-ai/blob/main/packages/jupyter-ai/style/icons/jupyternaut.svg
- * With a small tweak for the colors to match the JupyterLite icon.
- */
-import jupyternautLiteSvg from '../style/icons/jupyternaut-lite.svg';
-export const jupyternautLiteIcon = new LabIcon({
-    name: '@jupyterlite/ai:jupyternaut-lite',
-    svgstr: jupyternautLiteSvg
+import labaiIconSvg from '../style/icons/jupyternaut-lite.svg';
+export const labaiIcon = new LabIcon({
+    name: '@jupyterlite/ai:icon',
+    svgstr: labaiIconSvg
 });
+export const jupyternautIcon = new LabIcon({
+    name: '@jupyterlite/ai:jupyternaut',
+    svgstr: labaiIconSvg
+});
+const AI_AVATAR_BASE64 = btoa(jupyternautIcon.svgstr);
+export const AI_AVATAR = `data:image/svg+xml;base64,${AI_AVATAR_BASE64}`;

package/lib/index.d.ts

@@ -1,7 +1,6 @@
-import { IChatCommandRegistry } from '@jupyter/chat';
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
-import { IAIProviderRegistry } from './tokens';
-declare const _default: (JupyterFrontEndPlugin<void> | JupyterFrontEndPlugin<IChatCommandRegistry> | JupyterFrontEndPlugin<IAIProviderRegistry>)[];
+import { IChatProviderRegistry, ICompletionProviderRegistry, IToolRegistry } from './tokens';
+import { AISettingsModel } from './models/settings-model';
+declare const _default: (JupyterFrontEndPlugin<IChatProviderRegistry> | JupyterFrontEndPlugin<ICompletionProviderRegistry> | JupyterFrontEndPlugin<void> | JupyterFrontEndPlugin<AISettingsModel> | JupyterFrontEndPlugin<IToolRegistry>)[];
 export default _default;
-export { IAIProviderRegistry } from './tokens';
-export * from './base-completer';
+export * from './tokens';