Localize user facing strings (#238)

* Localize user facing strings

* Apply suggestions from code review

Co-authored-by: Nicolas Brichet <[email protected]>

* fix typings

---------

Co-authored-by: Nicolas Brichet <[email protected]>

Author: jtpio

src/approval-buttons.ts

@@ -1,11 +1,13 @@
 import { ChatWidget } from '@jupyter/chat';
 import { IDisposable } from '@lumino/disposable';
+import type { TranslationBundle } from '@jupyterlab/translation';
 import { AIChatModel } from './chat-model';
 
 export class ApprovalButtons implements IDisposable {
   constructor(options: ApprovalButtons.IOptions) {
     this._chatPanel = options.chatPanel;
     this._chatModel = this._chatPanel.model as AIChatModel;
+    this._trans = options.trans;
 
     // Set up approval button event handling
     this._setupApprovalHandlers();
@@ -201,7 +203,9 @@ export class ApprovalButtons implements IDisposable {
     icon.textContent = isApprove ? '✅' : '❌';
 
     const text = document.createElement('span');
-    text.textContent = isApprove ? 'Tools approved' : 'Tools rejected';
+    text.textContent = isApprove
+      ? this._trans.__('Tools approved')
+      : this._trans.__('Tools rejected');
 
     statusDiv.appendChild(icon);
     statusDiv.appendChild(text);
@@ -230,7 +234,9 @@ export class ApprovalButtons implements IDisposable {
     icon.textContent = isApprove ? '✅' : '❌';
 
     const text = document.createElement('span');
-    text.textContent = isApprove ? 'Tools approved' : 'Tools rejected';
+    text.textContent = isApprove
+      ? this._trans.__('Tools approved')
+      : this._trans.__('Tools rejected');
 
     statusDiv.appendChild(icon);
     statusDiv.appendChild(text);
@@ -346,8 +352,14 @@ export class ApprovalButtons implements IDisposable {
       buttonContainer.setAttribute('data-message-id', messageId);
     }
 
-    const approveBtn = this._createApprovalButton('Approve', true);
-    const rejectBtn = this._createApprovalButton('Reject', false);
+    const approveBtn = this._createApprovalButton(
+      this._trans.__('Approve'),
+      true
+    );
+    const rejectBtn = this._createApprovalButton(
+      this._trans.__('Reject'),
+      false
+    );
 
     // Add click handlers directly to the buttons
     this._addButtonHandler(approveBtn);
@@ -388,12 +400,12 @@ export class ApprovalButtons implements IDisposable {
     }
 
     const approveBtn = this._createApprovalButton(
-      'Approve',
+      this._trans.__('Approve'),
       true,
       'jp-ai-group-approve-all'
     );
     const rejectBtn = this._createApprovalButton(
-      'Reject',
+      this._trans.__('Reject'),
       false,
       'jp-ai-group-reject-all'
     );
@@ -443,6 +455,7 @@ export class ApprovalButtons implements IDisposable {
   private _chatModel: AIChatModel;
   private _isDisposed: boolean = false;
   private _mutationObserver?: MutationObserver;
+  private _trans: TranslationBundle;
 }
 
 /**
@@ -457,5 +470,9 @@ export namespace ApprovalButtons {
      * The chat panel widget to wrap.
      */
     chatPanel: ChatWidget;
+    /**
+     * The application language translation bundle.
+     */
+    trans: TranslationBundle;
   }
 }

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,13 +17,18 @@ 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}
@@ -41,13 +48,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,

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

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,13 +102,15 @@ 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',
@@ -116,7 +123,7 @@ export function ModelSelect(props: IModelSelectProps): JSX.Element {
           variant="caption"
           sx={{ fontSize: '0.7rem', fontWeight: 500 }}
         >
-          No Providers
+          {trans.__('No Providers')}
         </Typography>
       </TooltippedButton>
     );
@@ -128,12 +135,16 @@ 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;
@@ -237,7 +248,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 +259,8 @@ export function createModelSelectItem(
       }
       const modelSelectProps: IModelSelectProps = {
         ...props,
-        settingsModel
+        settingsModel,
+        translator
       };
       return <ModelSelect {...modelSelectProps} />;
     },

src/components/stop-button.tsx

@@ -1,5 +1,7 @@
 import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat';
 
+import type { TranslationBundle } from '@jupyterlab/translation';
+
 import StopIcon from '@mui/icons-material/Stop';
 
 import React from 'react';
@@ -15,13 +17,18 @@ 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
       onClick={props.stopStreaming}
@@ -41,13 +48,19 @@ export function StopButton(props: IStopButtonProps): JSX.Element {
 /**
  * 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,

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={{