@jupyterlite/ai 0.9.1 → 0.11.0

package/src/completion/completion-provider.ts

@@ -5,8 +5,7 @@ import {
   IInlineCompletionProvider
 } from '@jupyterlab/completer';
 import { NotebookPanel } from '@jupyterlab/notebook';
-import { LanguageModelV2 } from '@ai-sdk/provider';
-import { generateText } from 'ai';
+import { generateText, type LanguageModel } from 'ai';
 import { ISecretsManager } from 'jupyter-secrets-manager';
 
 import { AISettingsModel } from '../models/settings-model';
@@ -293,7 +292,7 @@ export class AICompletionProvider implements IInlineCompletionProvider {
 
   private _settingsModel: AISettingsModel;
   private _providerRegistry?: IProviderRegistry;
-  private _model: LanguageModelV2 | null = null;
+  private _model: LanguageModel | null = null;
   private _secretsManager?: ISecretsManager;
 }
 

package/src/components/clear-button.tsx

@@ -1,5 +1,7 @@
 import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat';
 
+import type { TranslationBundle } from '@jupyterlab/translation';
+
 import ClearIcon from '@mui/icons-material/Clear';
 
 import React from 'react';
@@ -15,22 +17,26 @@ export interface IClearButtonProps
    * The function to clear messages.
    */
   clearMessages: () => void;
+  /**
+   * The application language translator.
+   */
+  translator: TranslationBundle;
 }
 
 /**
  * The clear button component.
  */
 export function ClearButton(props: IClearButtonProps): JSX.Element {
-  const tooltip = 'Clear chat';
+  const { translator: trans } = props;
+  const tooltip = trans.__('Clear chat');
   return (
     <TooltippedButton
       onClick={props.clearMessages}
       tooltip={tooltip}
       buttonProps={{
-        size: 'small',
+        title: tooltip,
         variant: 'outlined',
-        color: 'secondary',
-        title: tooltip
+        color: 'secondary'
       }}
     >
       <ClearIcon />
@@ -41,13 +47,19 @@ export function ClearButton(props: IClearButtonProps): JSX.Element {
 /**
  * Factory returning the clear button toolbar item.
  */
-export function clearItem(): InputToolbarRegistry.IToolbarItem {
+export function clearItem(
+  translator: TranslationBundle
+): InputToolbarRegistry.IToolbarItem {
   return {
     element: (props: InputToolbarRegistry.IToolbarItemProps) => {
       const { model } = props;
       const clearMessages = () =>
         (model.chatContext as AIChatModel.IAIChatContext).clearMessages();
-      const clearProps: IClearButtonProps = { ...props, clearMessages };
+      const clearProps: IClearButtonProps = {
+        ...props,
+        clearMessages,
+        translator
+      };
       return ClearButton(clearProps);
     },
     position: 0,

package/src/components/completion-status.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { AISettingsModel } from '../models/settings-model';
 import { ReactWidget } from '@jupyterlab/ui-components';
+import type { TranslationBundle } from '@jupyterlab/translation';
 import { jupyternautIcon } from '../icons';
 
 const COMPLETION_STATUS_CLASS = 'jp-ai-completion-status';
@@ -14,12 +15,17 @@ interface ICompletionStatusProps {
    * The settings model.
    */
   settingsModel: AISettingsModel;
+  /**
+   * The application language translator.
+   */
+  translator: TranslationBundle;
 }
 
 /**
  * The completion status component.
  */
 function CompletionStatus(props: ICompletionStatusProps): JSX.Element {
+  const { translator: trans } = props;
   const [disabled, setDisabled] = useState<boolean>(true);
   const [title, setTitle] = useState<string>('');
 
@@ -30,15 +36,23 @@ function CompletionStatus(props: ICompletionStatusProps): JSX.Element {
     const stateChanged = (model: AISettingsModel) => {
       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}`
+          trans.__(
+            'Completion using %1',
+            model.getProvider(model.config.activeCompleterProvider)?.model ?? ''
+          )
         );
       } else {
         setDisabled(true);
-        setTitle('No completion');
+        setTitle(trans.__('No completion'));
       }
     };
 
@@ -48,7 +62,7 @@ function CompletionStatus(props: ICompletionStatusProps): JSX.Element {
     return () => {
       props.settingsModel.stateChanged.disconnect(stateChanged);
     };
-  }, [props.settingsModel]);
+  }, [props.settingsModel, trans]);
 
   return (
     <jupyternautIcon.react

package/src/components/model-select.tsx

@@ -1,4 +1,5 @@
 import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat';
+import type { TranslationBundle } from '@jupyterlab/translation';
 import CheckIcon from '@mui/icons-material/Check';
 import { Menu, MenuItem, Typography } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -14,13 +15,17 @@ export interface IModelSelectProps
    * 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.
  */
 export function ModelSelect(props: IModelSelectProps): JSX.Element {
-  const { settingsModel, model } = props;
+  const { settingsModel, model, translator: trans } = props;
   const agentManager = (model.chatContext as AIChatModel.IAIChatContext)
     .agentManager;
 
@@ -97,26 +102,27 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element {
     return (
       <TooltippedButton
         onClick={() => {}}
-        tooltip="No providers configured. Please go to AI Settings to add a provider."
+        tooltip={trans.__(
+          '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'
+          title: trans.__('No Providers Available')
         }}
         sx={{
           minWidth: 'auto',
+          width: 'unset',
           display: 'flex',
-          alignItems: 'center',
-          height: '29px'
+          alignItems: 'center'
         }}
       >
         <Typography
           variant="caption"
           sx={{ fontSize: '0.7rem', fontWeight: 500 }}
         >
-          No Providers
+          {trans.__('No Providers')}
         </Typography>
       </TooltippedButton>
     );
@@ -128,12 +134,13 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element {
         onClick={e => {
           openMenu(e.currentTarget);
         }}
-        tooltip={`Current Model: ${currentProviderLabel} - ${currentModel}`}
+        tooltip={trans.__(
+          'Current Model: %1 - %2',
+          currentProviderLabel,
+          currentModel
+        )}
         buttonProps={{
-          size: 'small',
-          variant: 'contained',
-          color: 'primary',
-          title: 'Select AI Model',
+          title: trans.__('Select AI Model'),
           onKeyDown: e => {
             if (e.key !== 'Enter' && e.key !== ' ') {
               return;
@@ -145,9 +152,9 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element {
         }}
         sx={{
           minWidth: 'auto',
+          width: 'unset',
           display: 'flex',
-          alignItems: 'center',
-          height: '29px'
+          alignItems: 'center'
         }}
       >
         <Typography
@@ -237,7 +244,8 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element {
  * Factory function returning the toolbar item for model selection.
  */
 export function createModelSelectItem(
-  settingsModel: AISettingsModel
+  settingsModel: AISettingsModel,
+  translator: TranslationBundle
 ): InputToolbarRegistry.IToolbarItem {
   return {
     element: (props: InputToolbarRegistry.IToolbarItemProps) => {
@@ -247,7 +255,8 @@ export function createModelSelectItem(
       }
       const modelSelectProps: IModelSelectProps = {
         ...props,
-        settingsModel
+        settingsModel,
+        translator
       };
       return <ModelSelect {...modelSelectProps} />;
     },

package/src/components/stop-button.tsx

@@ -1,4 +1,6 @@
-import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat';
+import { InputToolbarRegistry, TooltippedIconButton } from '@jupyter/chat';
+
+import type { TranslationBundle } from '@jupyterlab/translation';
 
 import StopIcon from '@mui/icons-material/Stop';
 
@@ -15,39 +17,50 @@ export interface IStopButtonProps
    * The function to stop streaming.
    */
   stopStreaming: () => void;
+  /**
+   * The application language translator.
+   */
+  translator: TranslationBundle;
 }
 
 /**
  * The stop button component.
  */
 export function StopButton(props: IStopButtonProps): JSX.Element {
-  const tooltip = 'Stop streaming';
+  const { translator: trans } = props;
+  const tooltip = trans.__('Stop streaming');
   return (
-    <TooltippedButton
+    <TooltippedIconButton
       onClick={props.stopStreaming}
       tooltip={tooltip}
       buttonProps={{
-        size: 'small',
-        variant: 'contained',
-        color: 'error',
         title: tooltip
       }}
+      sx={{
+        backgroundColor: 'var(--mui-palette-error-main, #d32f2f);'
+      }}
     >
       <StopIcon />
-    </TooltippedButton>
+    </TooltippedIconButton>
   );
 }
 
 /**
  * Factory returning the stop button toolbar item.
  */
-export function stopItem(): InputToolbarRegistry.IToolbarItem {
+export function stopItem(
+  translator: TranslationBundle
+): InputToolbarRegistry.IToolbarItem {
   return {
     element: (props: InputToolbarRegistry.IToolbarItemProps) => {
       const { model } = props;
       const stopStreaming = () =>
         (model.chatContext as AIChatModel.IAIChatContext).stopStreaming();
-      const stopProps: IStopButtonProps = { ...props, stopStreaming };
+      const stopProps: IStopButtonProps = {
+        ...props,
+        stopStreaming,
+        translator
+      };
       return StopButton(stopProps);
     },
     position: 50,

package/src/components/token-usage-display.tsx

@@ -1,4 +1,5 @@
 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';
@@ -22,6 +23,11 @@ export interface ITokenUsageDisplayProps {
    * Initial token usage.
    */
   initialTokenUsage?: ITokenUsage;
+
+  /**
+   * The application language translator.
+   */
+  translator: TranslationBundle;
 }
 
 /**
@@ -32,7 +38,8 @@ export interface ITokenUsageDisplayProps {
 export const TokenUsageDisplay: React.FC<ITokenUsageDisplayProps> = ({
   tokenUsageChanged,
   settingsModel,
-  initialTokenUsage
+  initialTokenUsage,
+  translator: trans
 }) => {
   return (
     <UseSignal signal={settingsModel.stateChanged} initialArgs={undefined}>
@@ -68,7 +75,12 @@ export const TokenUsageDisplay: React.FC<ITokenUsageDisplayProps> = ({
                     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()
+                  )}
                 >
                   <span
                     style={{

package/src/components/tool-select.tsx

@@ -1,5 +1,7 @@
 import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat';
 
+import type { TranslationBundle } from '@jupyterlab/translation';
+
 import BuildIcon from '@mui/icons-material/Build';
 
 import CheckIcon from '@mui/icons-material/Check';
@@ -32,13 +34,23 @@ export interface IToolSelectProps
    * Function to handle tool selection changes.
    */
   onToolSelectionChange: (selectedToolNames: string[]) => void;
+
+  /**
+   * The application language translator.
+   */
+  translator: TranslationBundle;
 }
 
 /**
  * The tool select component for choosing AI tools.
  */
 export function ToolSelect(props: IToolSelectProps): JSX.Element {
-  const { toolRegistry, onToolSelectionChange, toolsEnabled } = props;
+  const {
+    toolRegistry,
+    onToolSelectionChange,
+    toolsEnabled,
+    translator: trans
+  } = props;
 
   const [selectedToolNames, setSelectedToolNames] = useState<string[]>([]);
   const [tools, setTools] = useState<INamedTool[]>(
@@ -111,12 +123,16 @@ export function ToolSelect(props: IToolSelectProps): JSX.Element {
         onClick={e => {
           openMenu(e.currentTarget);
         }}
-        tooltip={`Tools (${selectedToolNames.length}/${tools.length} selected)`}
+        tooltip={trans.__(
+          'Tools (%1/%2 selected)',
+          selectedToolNames.length.toString(),
+          tools.length.toString()
+        )}
         buttonProps={{
-          size: 'small',
-          variant: selectedToolNames.length > 0 ? 'contained' : 'outlined',
-          color: 'primary',
-          title: 'Select AI Tools',
+          ...(selectedToolNames.length === 0 && {
+            variant: 'outlined'
+          }),
+          title: trans.__('Select AI Tools'),
           onKeyDown: e => {
             if (e.key !== 'Enter' && e.key !== ' ') {
               return;
@@ -132,7 +148,7 @@ export function ToolSelect(props: IToolSelectProps): JSX.Element {
             : {}
         }
       >
-        <BuildIcon />
+        <BuildIcon sx={{ fontSize: 'small' }} />
       </TooltippedButton>
 
       <Menu
@@ -192,7 +208,8 @@ export function ToolSelect(props: IToolSelectProps): JSX.Element {
  */
 export function createToolSelectItem(
   toolRegistry: IToolRegistry,
-  toolsEnabled: boolean = true
+  toolsEnabled: boolean = true,
+  translator: TranslationBundle
 ): InputToolbarRegistry.IToolbarItem {
   return {
     element: (props: InputToolbarRegistry.IToolbarItemProps) => {
@@ -209,7 +226,8 @@ export function createToolSelectItem(
         ...props,
         toolRegistry,
         onToolSelectionChange,
-        toolsEnabled
+        toolsEnabled,
+        translator
       };
       return <ToolSelect {...toolSelectProps} />;
     },