@jupyterlite/ai 0.9.1 → 0.11.0

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

@@ -1,4 +1,5 @@
 import { InputToolbarRegistry } from '@jupyter/chat';
+import type { TranslationBundle } from '@jupyterlab/translation';
 /**
  * Properties of the clear button.
  */
@@ -7,6 +8,10 @@ export interface IClearButtonProps extends InputToolbarRegistry.IToolbarItemProp
      * The function to clear messages.
      */
     clearMessages: () => void;
+    /**
+     * The application language translator.
+     */
+    translator: TranslationBundle;
 }
 /**
  * The clear button component.
@@ -15,4 +20,4 @@ export declare function ClearButton(props: IClearButtonProps): JSX.Element;
 /**
  * Factory returning the clear button toolbar item.
  */
-export declare function clearItem(): InputToolbarRegistry.IToolbarItem;
+export declare function clearItem(translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;

package/lib/components/clear-button.js

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

package/lib/components/completion-status.d.ts

@@ -1,5 +1,6 @@
 import { AISettingsModel } from '../models/settings-model';
 import { ReactWidget } from '@jupyterlab/ui-components';
+import type { TranslationBundle } from '@jupyterlab/translation';
 /**
  * The completion status props.
  */
@@ -8,6 +9,10 @@ interface ICompletionStatusProps {
      * The settings model.
      */
     settingsModel: AISettingsModel;
+    /**
+     * The application language translator.
+     */
+    translator: TranslationBundle;
 }
 /**
  * The completion status widget that will be added to the status bar.

package/lib/components/completion-status.js

@@ -7,6 +7,7 @@ const COMPLETION_DISABLED_CLASS = 'jp-ai-completion-disabled';
  * The completion status component.
  */
 function CompletionStatus(props) {
+    const { translator: trans } = props;
     const [disabled, setDisabled] = useState(true);
     const [title, setTitle] = useState('');
     /**
@@ -16,15 +17,15 @@ function CompletionStatus(props) {
         const stateChanged = (model) => {
             if (model.config.useSameProviderForChatAndCompleter) {
                 setDisabled(false);
-                setTitle(`Completion using ${model.getDefaultProvider()?.model}`);
+                setTitle(trans.__('Completion using %1', model.getDefaultProvider()?.model ?? ''));
             }
             else if (model.config.activeCompleterProvider) {
                 setDisabled(false);
-                setTitle(`Completion using ${model.getProvider(model.config.activeCompleterProvider)?.model}`);
+                setTitle(trans.__('Completion using %1', model.getProvider(model.config.activeCompleterProvider)?.model ?? ''));
             }
             else {
                 setDisabled(true);
-                setTitle('No completion');
+                setTitle(trans.__('No completion'));
             }
         };
         props.settingsModel.stateChanged.connect(stateChanged);
@@ -32,7 +33,7 @@ function CompletionStatus(props) {
         return () => {
             props.settingsModel.stateChanged.disconnect(stateChanged);
         };
-    }, [props.settingsModel]);
+    }, [props.settingsModel, trans]);
     return (React.createElement(jupyternautIcon.react, { className: disabled ? COMPLETION_DISABLED_CLASS : '', top: '2px', width: '16px', stylesheet: 'statusBar', title: title }));
 }
 /**

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

@@ -1,4 +1,5 @@
 import { InputToolbarRegistry } from '@jupyter/chat';
+import type { TranslationBundle } from '@jupyterlab/translation';
 import { AISettingsModel } from '../models/settings-model';
 /**
  * Properties for the model select component.
@@ -8,6 +9,10 @@ export interface IModelSelectProps extends InputToolbarRegistry.IToolbarItemProp
      * The settings model to get available models and current selection from.
      */
     settingsModel: AISettingsModel;
+    /**
+     * The application language translator.
+     */
+    translator: TranslationBundle;
 }
 /**
  * The model select component for choosing AI models.
@@ -16,4 +21,4 @@ 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;
+export declare function createModelSelectItem(settingsModel: AISettingsModel, translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;

package/lib/components/model-select.js

@@ -6,7 +6,7 @@ import React, { useCallback, useEffect, useState } from 'react';
  * The model select component for choosing AI models.
  */
 export function ModelSelect(props) {
-    const { settingsModel, model } = props;
+    const { settingsModel, model, translator: trans } = props;
     const agentManager = model.chatContext
         .agentManager;
     const [currentProvider, setCurrentProvider] = useState(agentManager.activeProvider ?? '');
@@ -60,28 +60,24 @@ export function ModelSelect(props) {
     }));
     // 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',
+        return (React.createElement(TooltippedButton, { onClick: () => { }, tooltip: trans.__('No providers configured. Please go to AI Settings to add a provider.'), buttonProps: {
                 variant: 'outlined',
                 color: 'warning',
                 disabled: true,
-                title: 'No Providers Available'
+                title: trans.__('No Providers Available')
             }, sx: {
                 minWidth: 'auto',
+                width: 'unset',
                 display: 'flex',
-                alignItems: 'center',
-                height: '29px'
+                alignItems: 'center'
             } },
-            React.createElement(Typography, { variant: "caption", sx: { fontSize: '0.7rem', fontWeight: 500 } }, "No Providers")));
+            React.createElement(Typography, { variant: "caption", sx: { fontSize: '0.7rem', fontWeight: 500 } }, trans.__('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',
+            }, tooltip: trans.__('Current Model: %1 - %2', currentProviderLabel, currentModel), buttonProps: {
+                title: trans.__('Select AI Model'),
                 onKeyDown: e => {
                     if (e.key !== 'Enter' && e.key !== ' ') {
                         return;
@@ -92,9 +88,9 @@ export function ModelSelect(props) {
                 }
             }, sx: {
                 minWidth: 'auto',
+                width: 'unset',
                 display: 'flex',
-                alignItems: 'center',
-                height: '29px'
+                alignItems: 'center'
             } },
             React.createElement(Typography, { variant: "caption", sx: { fontSize: '0.7rem', fontWeight: 500, textTransform: 'none' } }, currentProviderLabel)),
         React.createElement(Menu, { open: menuOpen, onClose: closeMenu, anchorEl: menuAnchorEl, anchorOrigin: {
@@ -144,7 +140,7 @@ export function ModelSelect(props) {
 /**
  * Factory function returning the toolbar item for model selection.
  */
-export function createModelSelectItem(settingsModel) {
+export function createModelSelectItem(settingsModel, translator) {
     return {
         element: (props) => {
             const chatContext = props.model.chatContext;
@@ -153,7 +149,8 @@ export function createModelSelectItem(settingsModel) {
             }
             const modelSelectProps = {
                 ...props,
-                settingsModel
+                settingsModel,
+                translator
             };
             return React.createElement(ModelSelect, { ...modelSelectProps });
         },

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

@@ -1,4 +1,5 @@
 import { InputToolbarRegistry } from '@jupyter/chat';
+import type { TranslationBundle } from '@jupyterlab/translation';
 /**
  * Properties of the stop button.
  */
@@ -7,6 +8,10 @@ export interface IStopButtonProps extends InputToolbarRegistry.IToolbarItemProps
      * The function to stop streaming.
      */
     stopStreaming: () => void;
+    /**
+     * The application language translator.
+     */
+    translator: TranslationBundle;
 }
 /**
  * The stop button component.
@@ -15,4 +20,4 @@ export declare function StopButton(props: IStopButtonProps): JSX.Element;
 /**
  * Factory returning the stop button toolbar item.
  */
-export declare function stopItem(): InputToolbarRegistry.IToolbarItem;
+export declare function stopItem(translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;

package/lib/components/stop-button.js

@@ -1,28 +1,32 @@
-import { TooltippedButton } from '@jupyter/chat';
+import { TooltippedIconButton } from '@jupyter/chat';
 import StopIcon from '@mui/icons-material/Stop';
 import React from 'react';
 /**
  * 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',
+    const { translator: trans } = props;
+    const tooltip = trans.__('Stop streaming');
+    return (React.createElement(TooltippedIconButton, { onClick: props.stopStreaming, tooltip: tooltip, buttonProps: {
             title: tooltip
+        }, sx: {
+            backgroundColor: 'var(--mui-palette-error-main, #d32f2f);'
         } },
         React.createElement(StopIcon, null)));
 }
 /**
  * Factory returning the stop button toolbar item.
  */
-export function stopItem() {
+export function stopItem(translator) {
     return {
         element: (props) => {
             const { model } = props;
             const stopStreaming = () => model.chatContext.stopStreaming();
-            const stopProps = { ...props, stopStreaming };
+            const stopProps = {
+                ...props,
+                stopStreaming,
+                translator
+            };
             return StopButton(stopProps);
         },
         position: 50,

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

@@ -1,4 +1,5 @@
 import { ReactWidget } 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';
@@ -19,6 +20,10 @@ export interface ITokenUsageDisplayProps {
      * Initial token usage.
      */
     initialTokenUsage?: ITokenUsage;
+    /**
+     * The application language translator.
+     */
+    translator: TranslationBundle;
 }
 /**
  * React component that displays token usage information.

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

@@ -5,7 +5,7 @@ import React from 'react';
  * 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 }) => {
+export const TokenUsageDisplay = ({ tokenUsageChanged, settingsModel, initialTokenUsage, translator: trans }) => {
     return (React.createElement(UseSignal, { signal: settingsModel.stateChanged, initialArgs: undefined }, () => {
         const config = settingsModel.config;
         if (!config.showTokenUsage) {
@@ -30,7 +30,7 @@ export const TokenUsageDisplay = ({ tokenUsageChanged, settingsModel, initialTok
                     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()}` },
+                }, 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',

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

@@ -1,4 +1,5 @@
 import { InputToolbarRegistry } from '@jupyter/chat';
+import type { TranslationBundle } from '@jupyterlab/translation';
 import { IToolRegistry } from '../tokens';
 /**
  * Properties for the tool select component.
@@ -16,6 +17,10 @@ export interface IToolSelectProps extends InputToolbarRegistry.IToolbarItemProps
      * Function to handle tool selection changes.
      */
     onToolSelectionChange: (selectedToolNames: string[]) => void;
+    /**
+     * The application language translator.
+     */
+    translator: TranslationBundle;
 }
 /**
  * The tool select component for choosing AI tools.
@@ -24,4 +29,4 @@ 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;
+export declare function createToolSelectItem(toolRegistry: IToolRegistry, toolsEnabled: boolean | undefined, translator: TranslationBundle): InputToolbarRegistry.IToolbarItem;

package/lib/components/tool-select.js

@@ -8,7 +8,7 @@ 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 { toolRegistry, onToolSelectionChange, toolsEnabled, translator: trans } = props;
     const [selectedToolNames, setSelectedToolNames] = useState([]);
     const [tools, setTools] = useState(toolRegistry?.namedTools || []);
     const [menuAnchorEl, setMenuAnchorEl] = useState(null);
@@ -63,11 +63,11 @@ export function ToolSelect(props) {
     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',
+            }, tooltip: trans.__('Tools (%1/%2 selected)', selectedToolNames.length.toString(), tools.length.toString()), buttonProps: {
+                ...(selectedToolNames.length === 0 && {
+                    variant: 'outlined'
+                }),
+                title: trans.__('Select AI Tools'),
                 onKeyDown: e => {
                     if (e.key !== 'Enter' && e.key !== ' ') {
                         return;
@@ -79,7 +79,7 @@ export function ToolSelect(props) {
             }, sx: selectedToolNames.length === 0
                 ? { backgroundColor: 'var(--jp-layout-color3)' }
                 : {} },
-            React.createElement(BuildIcon, null)),
+            React.createElement(BuildIcon, { sx: { fontSize: 'small' } })),
         React.createElement(Menu, { open: menuOpen, onClose: closeMenu, anchorEl: menuAnchorEl, anchorOrigin: {
                 vertical: 'top',
                 horizontal: 'right'
@@ -106,7 +106,7 @@ export function ToolSelect(props) {
 /**
  * Factory function returning the toolbar item for tool selection.
  */
-export function createToolSelectItem(toolRegistry, toolsEnabled = true) {
+export function createToolSelectItem(toolRegistry, toolsEnabled = true, translator) {
     return {
         element: (props) => {
             const onToolSelectionChange = (tools) => {
@@ -121,7 +121,8 @@ export function createToolSelectItem(toolRegistry, toolsEnabled = true) {
                 ...props,
                 toolRegistry,
                 onToolSelectionChange,
-                toolsEnabled
+                toolsEnabled,
+                translator
             };
             return React.createElement(ToolSelect, { ...toolSelectProps });
         },

package/lib/index.d.ts

@@ -6,3 +6,4 @@ import { AISettingsModel } from './models/settings-model';
 declare const _default: (JupyterFrontEndPlugin<IProviderRegistry> | JupyterFrontEndPlugin<void> | JupyterFrontEndPlugin<IChatModelRegistry> | JupyterFrontEndPlugin<AgentManagerFactory> | JupyterFrontEndPlugin<AISettingsModel> | JupyterFrontEndPlugin<IDiffManager> | JupyterFrontEndPlugin<IToolRegistry> | JupyterFrontEndPlugin<IInputToolbarRegistryFactory>)[];
 export default _default;
 export * from './tokens';
+export * from './icons';