@jupyterlite/ai 0.9.1 → 0.11.0

package/src/widgets/provider-config-dialog.tsx

@@ -25,6 +25,7 @@ import {
   TextField,
   Typography
 } from '@mui/material';
+import type { TranslationBundle } from '@jupyterlab/translation';
 import React from 'react';
 import { IProviderConfig, IProviderParameters } from '../models/settings-model';
 import type { IProviderRegistry } from '../tokens';
@@ -47,6 +48,7 @@ interface IProviderConfigDialogProps {
     provider: string,
     fieldName: string
   ) => Promise<void>;
+  trans: TranslationBundle;
 }
 
 export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
@@ -56,7 +58,8 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
   initialConfig,
   mode,
   providerRegistry,
-  handleSecretField
+  handleSecretField,
+  trans
 }) => {
   const apiKeyRef = React.useRef<HTMLInputElement>();
   const [name, setName] = React.useState(initialConfig?.name || '');
@@ -158,25 +161,29 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
   return (
     <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
       <DialogTitle>
-        {mode === 'add' ? 'Add New Provider' : 'Edit Provider'}
+        {mode === 'add'
+          ? trans.__('Add New Provider')
+          : trans.__('Edit Provider')}
       </DialogTitle>
       <DialogContent>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
           <TextField
             fullWidth
-            label="Provider Name"
+            label={trans.__('Provider Name')}
             value={name}
             onChange={e => setName(e.target.value)}
-            placeholder="e.g., My Anthropic Config, Work Provider"
-            helperText="A friendly name to identify this provider configuration"
+            placeholder={trans.__('e.g., My Anthropic Config, Work Provider')}
+            helperText={trans.__(
+              'A friendly name to identify this provider configuration'
+            )}
             required
           />
 
           <FormControl fullWidth required>
-            <InputLabel>Provider Type</InputLabel>
+            <InputLabel>{trans.__('Provider Type')}</InputLabel>
             <Select
               value={provider}
-              label="Provider Type"
+              label={trans.__('Provider Type')}
               onChange={e =>
                 setProvider(e.target.value as IProviderConfig['provider'])
               }
@@ -189,7 +196,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                       {option.apiKeyRequirement === 'required' && (
                         <Chip
                           size="small"
-                          label="API Key"
+                          label={trans.__('API Key')}
                           color="default"
                           variant="outlined"
                         />
@@ -209,19 +216,19 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
           {selectedProvider?.allowCustomModel ? (
             <TextField
               fullWidth
-              label="Model"
+              label={trans.__('Model')}
               value={model}
               onChange={e => setModel(e.target.value)}
-              placeholder="Enter model name"
-              helperText="Enter any compatible model name"
+              placeholder={trans.__('Enter model name')}
+              helperText={trans.__('Enter any compatible model name')}
               required
             />
           ) : (
             <FormControl fullWidth required>
-              <InputLabel>Model</InputLabel>
+              <InputLabel>{trans.__('Model')}</InputLabel>
               <Select
                 value={model}
-                label="Model"
+                label={trans.__('Model')}
                 onChange={e => setModel(e.target.value)}
               >
                 {selectedProvider?.models.map(modelOption => (
@@ -230,18 +237,18 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                       <Typography variant="body1">{modelOption}</Typography>
                       <Typography variant="caption" color="text.secondary">
                         {modelOption.includes('sonnet')
-                          ? 'Balanced performance'
+                          ? trans.__('Balanced performance')
                           : modelOption.includes('opus')
-                            ? 'Advanced reasoning'
+                            ? trans.__('Advanced reasoning')
                             : modelOption.includes('haiku')
-                              ? 'Fast and lightweight'
+                              ? trans.__('Fast and lightweight')
                               : modelOption.includes('large')
-                                ? 'Most capable model'
+                                ? trans.__('Most capable model')
                                 : modelOption.includes('small')
-                                  ? 'Fast and efficient'
+                                  ? trans.__('Fast and efficient')
                                   : modelOption.includes('codestral')
-                                    ? 'Code-specialized'
-                                    : 'General purpose'}
+                                    ? trans.__('Code-specialized')
+                                    : trans.__('General purpose')}
                       </Typography>
                     </Box>
                   </MenuItem>
@@ -257,13 +264,13 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                 inputRef={apiKeyRef}
                 label={
                   selectedProvider?.apiKeyRequirement === 'required'
-                    ? 'API Key'
-                    : 'API Key (Optional)'
+                    ? trans.__('API Key')
+                    : trans.__('API Key (Optional)')
                 }
                 type={showApiKey ? 'text' : 'password'}
                 value={apiKey}
                 onChange={e => setApiKey(e.target.value)}
-                placeholder="Enter your API key..."
+                placeholder={trans.__('Enter your API key...')}
                 required={selectedProvider?.apiKeyRequirement === 'required'}
                 InputProps={{
                   endAdornment: (
@@ -315,7 +322,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                 <TextField
                   {...params}
                   fullWidth
-                  label="Base URL"
+                  label={trans.__('Base URL')}
                   placeholder="https://api.example.com/v1"
                   onChange={e => setBaseURL(e.target.value)}
                 />
@@ -339,14 +346,17 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
           >
             <AccordionSummary expandIcon={<ExpandMore />}>
               <Typography variant="subtitle1" fontWeight="medium">
-                Advanced Settings
+                {trans.__('Advanced Settings')}
               </Typography>
             </AccordionSummary>
             <AccordionDetails sx={{ bgcolor: 'transparent' }}>
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                 <Box>
                   <Typography gutterBottom>
-                    Temperature: {parameters.temperature ?? 'Default'}
+                    {trans.__(
+                      'Temperature: %1',
+                      parameters.temperature ?? trans.__('Default')
+                    )}
                   </Typography>
                   <Slider
                     value={parameters.temperature ?? DEFAULT_TEMPERATURE}
@@ -362,32 +372,33 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                     valueLabelDisplay="auto"
                   />
                   <Typography variant="caption" color="text.secondary">
-                    Temperature for the model (lower values are more
-                    deterministic)
+                    {trans.__(
+                      'Temperature for the model (lower values are more deterministic)'
+                    )}
                   </Typography>
                 </Box>
 
                 <TextField
                   fullWidth
-                  label="Max Tokens (Optional)"
+                  label={trans.__('Max Tokens (Optional)')}
                   type="number"
-                  value={parameters.maxTokens ?? ''}
+                  value={parameters.maxOutputTokens ?? ''}
                   onChange={e =>
                     setParameters({
                       ...parameters,
-                      maxTokens: e.target.value
+                      maxOutputTokens: e.target.value
                         ? Number(e.target.value)
                         : undefined
                     })
                   }
-                  placeholder="Leave empty for provider default"
-                  helperText="Maximum length of AI responses"
+                  placeholder={trans.__('Leave empty for provider default')}
+                  helperText={trans.__('Maximum length of AI responses')}
                   inputProps={{ min: 1 }}
                 />
 
                 <TextField
                   fullWidth
-                  label="Max Turns (Optional)"
+                  label={trans.__('Max Turns (Optional)')}
                   type="number"
                   value={parameters.maxTurns ?? ''}
                   onChange={e =>
@@ -398,8 +409,10 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                         : undefined
                     })
                   }
-                  placeholder={`Default: ${DEFAULT_MAX_TURNS}`}
-                  helperText="Maximum number of tool execution turns"
+                  placeholder={trans.__('Default: %1', DEFAULT_MAX_TURNS)}
+                  helperText={trans.__(
+                    'Maximum number of tool execution turns'
+                  )}
                   inputProps={{ min: 1, max: 100 }}
                 />
 
@@ -408,7 +421,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                   color="text.secondary"
                   sx={{ mt: 2, mb: 1 }}
                 >
-                  Completion Options
+                  {trans.__('Completion Options')}
                 </Typography>
 
                 <FormControlLabel
@@ -423,7 +436,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                       }
                     />
                   }
-                  label="Fill-in-the-middle support"
+                  label={trans.__('Fill-in-the-middle support')}
                 />
 
                 <FormControlLabel
@@ -438,7 +451,7 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
                       }
                     />
                   }
-                  label="Use filter text"
+                  label={trans.__('Use filter text')}
                 />
               </Box>
             </AccordionDetails>
@@ -446,9 +459,9 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={onClose}>{trans.__('Cancel')}</Button>
         <Button onClick={handleSave} variant="contained" disabled={!isValid}>
-          {mode === 'add' ? 'Add Provider' : 'Save Changes'}
+          {mode === 'add' ? trans.__('Add Provider') : trans.__('Save Changes')}
         </Button>
       </DialogActions>
     </Dialog>

package/style/base.css

@@ -74,7 +74,7 @@
 /* Enhanced tool select menu styles */
 .jp-AIToolSelect-menu {
   max-width: 300px;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  box-shadow: var(--jp-elevation-z6);
   border: 1px solid var(--jp-border-color2);
 }
 
@@ -94,14 +94,14 @@
   border: 1px solid var(--jp-border-color1);
   border-radius: 6px;
   background: var(--jp-layout-color0);
-  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
+  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: 0 2px 6px rgb(0 0 0 / 12%);
+  box-shadow: var(--jp-elevation-z4);
 }
 
 /* Tool Header - clickable summary */
@@ -151,6 +151,17 @@
   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;
@@ -173,6 +184,11 @@
   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;
@@ -251,40 +267,7 @@
   padding: 0 0.4em;
 }
 
-/* Tool Approval UI Styles */
-.jp-ai-tool-approval {
-  margin: 8px 0;
-  border: 2px solid var(--jp-warn-color1);
-  border-radius: 8px;
-  background: var(--jp-layout-color0);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
-  overflow: hidden;
-}
-
-.jp-ai-tool-approval-header {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  background: rgb(var(--jp-warn-color1-rgb) / 8%);
-  gap: 12px;
-}
-
-.jp-ai-tool-approval-header .jp-ai-tool-icon {
-  font-size: 16px;
-}
-
-.jp-ai-tool-approval-header .jp-ai-tool-title {
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size1);
-  font-weight: 600;
-  color: var(--jp-warn-color1);
-  flex: 1;
-}
-
-.jp-ai-tool-approval-body {
-  padding: 16px;
-}
-
+/* Tool Approval Button Styles */
 .jp-ai-tool-approval-buttons,
 .jp-ai-group-approval-buttons {
   display: flex;
@@ -308,24 +291,24 @@
 
 .jp-ai-approval-approve {
   background: var(--jp-success-color1);
-  color: white;
+  color: var(--jp-ui-inverse-font-color1);
 }
 
 .jp-ai-approval-approve:hover:not(:disabled) {
   background: var(--jp-success-color0);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
+  box-shadow: var(--jp-elevation-z4);
 }
 
 .jp-ai-approval-reject {
   background: var(--jp-error-color1);
-  color: white;
+  color: var(--jp-ui-inverse-font-color1);
 }
 
 .jp-ai-approval-reject:hover:not(:disabled) {
   background: var(--jp-error-color0);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
+  box-shadow: var(--jp-elevation-z4);
 }
 
 .jp-ai-approval-btn:disabled {
@@ -333,38 +316,6 @@
   opacity: 0.5;
 }
 
-/* Unified Approval Status Styles for both single and grouped tools */
-.jp-ai-approval-status,
-.jp-ai-group-approval-status {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-family: var(--jp-ui-font-family);
-  font-size: var(--jp-ui-font-size1);
-  font-weight: 500;
-}
-
-.jp-ai-approval-status-approved,
-.jp-ai-group-approval-status-approved {
-  background: rgb(var(--jp-success-color1-rgb) / 15%);
-  color: var(--jp-success-color1);
-  border: 1px solid rgb(var(--jp-success-color1-rgb) / 30%);
-}
-
-.jp-ai-approval-status-rejected,
-.jp-ai-group-approval-status-rejected {
-  background: rgb(var(--jp-error-color1-rgb) / 15%);
-  color: var(--jp-error-color1);
-  border: 1px solid rgb(var(--jp-error-color1-rgb) / 30%);
-}
-
-.jp-ai-approval-icon {
-  font-size: 16px;
-}
-
 .jp-MainAreaWidget
   .jp-ToolbarButtonComponent[data-command='@jupyterlite/ai:move-chat']
   svg {

package/lib/mcp/browser.d.ts

@@ -1,68 +0,0 @@
-/**
- * Browser-compatible MCP Server implementation
- *
- * This is a custom implementation that works around the limitation in
- * @openai/agents where MCPServerStreamableHttp doesn't work in browsers
- */
-interface MCPServer {
-    cacheToolsList: boolean;
-    toolFilter?: any;
-    connect(): Promise<void>;
-    readonly name: string;
-    close(): Promise<void>;
-    listTools(): Promise<MCPTool[]>;
-    callTool(toolName: string, args: Record<string, unknown> | null): Promise<CallToolResultContent>;
-    invalidateToolsCache(): Promise<void>;
-}
-interface MCPTool {
-    name: string;
-    description?: string;
-    inputSchema: {
-        type: 'object';
-        properties: Record<string, any>;
-        required: string[];
-        additionalProperties: boolean;
-    };
-}
-type CallToolResultContent = Array<{
-    type: string;
-    text: string;
-}>;
-interface MCPServerStreamableHttpOptions {
-    url: string;
-    cacheToolsList?: boolean;
-    clientSessionTimeoutSeconds?: number;
-    name?: string;
-    logger?: any;
-    toolFilter?: any;
-    timeout?: number;
-    authProvider?: any;
-    requestInit?: any;
-    fetch?: any;
-    reconnectionOptions?: any;
-    sessionId?: string;
-}
-/**
- * Browser-compatible MCP Server implementation that works around limitations
- * in @openai/agents where MCPServerStreamableHttp doesn't work in browsers.
- *
- * This class provides a streamable HTTP client transport for MCP (Model Context Protocol)
- * servers that can be used in browser environments.
- */
-export declare class BrowserMCPServerStreamableHttp implements MCPServer {
-    readonly name: string;
-    readonly cacheToolsList: boolean;
-    readonly toolFilter: any;
-    constructor(options: MCPServerStreamableHttpOptions);
-    connect(): Promise<void>;
-    close(): Promise<void>;
-    listTools(): Promise<MCPTool[]>;
-    callTool(toolName: string, args: Record<string, unknown> | null): Promise<CallToolResultContent>;
-    invalidateToolsCache(): Promise<void>;
-    private _session;
-    private _toolsList;
-    private _cacheDirty;
-    private _transport;
-    private _options;
-}
-export {};

package/lib/mcp/browser.js

@@ -1,138 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-/**
- * Browser-compatible MCP Server implementation
- *
- * This is a custom implementation that works around the limitation in
- * @openai/agents where MCPServerStreamableHttp doesn't work in browsers
- */
-/**
- * Browser-compatible MCP Server implementation that works around limitations
- * in @openai/agents where MCPServerStreamableHttp doesn't work in browsers.
- *
- * This class provides a streamable HTTP client transport for MCP (Model Context Protocol)
- * servers that can be used in browser environments.
- */
-export class BrowserMCPServerStreamableHttp {
-    name;
-    cacheToolsList;
-    toolFilter = undefined;
-    constructor(options) {
-        this._options = options;
-        this.name = options.name || `browser-mcp-server: ${options.url}`;
-        this.cacheToolsList = options.cacheToolsList ?? false;
-    }
-    async connect() {
-        try {
-            // Dynamic import to handle cases where MCP SDK isn't available
-            const { StreamableHTTPClientTransport } = await import('@modelcontextprotocol/sdk/client/streamableHttp.js');
-            const { Client } = await import('@modelcontextprotocol/sdk/client/index.js');
-            // Merge CORS-enabled requestInit with user options
-            const corsRequestInit = {
-                mode: 'cors',
-                credentials: 'omit',
-                ...this._options.requestInit
-            };
-            this._transport = new StreamableHTTPClientTransport(new URL(this._options.url), {
-                authProvider: this._options.authProvider,
-                requestInit: corsRequestInit,
-                fetch: this._options.fetch || fetch,
-                reconnectionOptions: this._options.reconnectionOptions,
-                sessionId: this._options.sessionId
-            });
-            this._session = new Client({
-                name: this.name,
-                version: '1.0.0'
-            });
-            await this._session.connect(this._transport);
-        }
-        catch (error) {
-            console.error('Error initializing MCP server:', error);
-            await this.close();
-            throw error;
-        }
-    }
-    async close() {
-        if (this._session) {
-            try {
-                await this._session.close();
-            }
-            catch (error) {
-                console.error('Error closing MCP server session:', error);
-            }
-            this._session = null;
-        }
-        if (this._transport) {
-            try {
-                await this._transport.close();
-            }
-            catch (error) {
-                console.error('Error closing MCP server transport:', error);
-            }
-            this._transport = null;
-        }
-    }
-    async listTools() {
-        if (!this._session) {
-            throw new Error('Server not initialized. Call connect() first.');
-        }
-        if (this.cacheToolsList &&
-            !this._cacheDirty &&
-            this._toolsList.length > 0) {
-            return this._toolsList;
-        }
-        try {
-            const { ListToolsResultSchema } = await import('@modelcontextprotocol/sdk/types.js');
-            const response = await this._session.listTools();
-            const parsedResponse = ListToolsResultSchema.parse(response);
-            // Map to openai/agents MCPTool type
-            this._toolsList = parsedResponse.tools.map((tool) => ({
-                name: tool.name,
-                description: tool.description,
-                inputSchema: {
-                    type: 'object',
-                    properties: tool.inputSchema?.properties || {},
-                    required: tool.inputSchema?.required || [],
-                    additionalProperties: tool.inputSchema?.additionalProperties ?? false
-                }
-            }));
-            this._cacheDirty = false;
-            return this._toolsList;
-        }
-        catch (error) {
-            console.error(`Error listing tools from ${this.name}:`, error);
-            throw error;
-        }
-    }
-    async callTool(toolName, args) {
-        if (!this._session) {
-            throw new Error('Server not initialized. Call connect() first.');
-        }
-        try {
-            const { CallToolResultSchema } = await import('@modelcontextprotocol/sdk/types.js');
-            const response = await this._session.callTool({
-                name: toolName,
-                arguments: args ?? {}
-            }, undefined, {
-                timeout: this._options.timeout ?? 30000
-            });
-            // Parse and validate using MCP SDK schema
-            const parsed = CallToolResultSchema.parse(response);
-            const result = parsed.content;
-            // Return the content array as expected by openai/agents
-            // CallToolResultContent is { type: string; text: string }[]
-            return result;
-        }
-        catch (error) {
-            console.error(`Error calling tool ${toolName}:`, error);
-            throw error;
-        }
-    }
-    async invalidateToolsCache() {
-        this._cacheDirty = true;
-    }
-    _session = null;
-    _toolsList = [];
-    _cacheDirty = true;
-    _transport = null;
-    _options;
-}

package/lib/tools/file.d.ts

@@ -1,36 +0,0 @@
-import { CommandRegistry } from '@lumino/commands';
-import { IDocumentManager } from '@jupyterlab/docmanager';
-import { IEditorTracker } from '@jupyterlab/fileeditor';
-import { IDiffManager, ITool } from '../tokens';
-/**
- * Create a tool for creating new files of various types
- */
-export declare function createNewFileTool(docManager: IDocumentManager): ITool;
-/**
- * Create a tool for opening files
- */
-export declare function createOpenFileTool(docManager: IDocumentManager): ITool;
-/**
- * Create a tool for deleting files
- */
-export declare function createDeleteFileTool(docManager: IDocumentManager): ITool;
-/**
- * Create a tool for renaming files
- */
-export declare function createRenameFileTool(docManager: IDocumentManager): ITool;
-/**
- * Create a tool for copying files
- */
-export declare function createCopyFileTool(docManager: IDocumentManager): ITool;
-/**
- * Create a tool for navigating to directories in the file browser
- */
-export declare function createNavigateToDirectoryTool(commands: CommandRegistry): ITool;
-/**
- * Create a tool for getting file information and content
- */
-export declare function createGetFileInfoTool(docManager: IDocumentManager, editorTracker?: IEditorTracker): ITool;
-/**
- * Create a tool for setting the content of a file
- */
-export declare function createSetFileContentTool(docManager: IDocumentManager, diffManager?: IDiffManager): ITool;