Localize user facing strings (#380)

* Localize user facing strings

* address review comments

Co-Authored-By: Nicolas Brichet <brichet@users.noreply.github.com>

---------

Co-authored-by: Nicolas Brichet <brichet@users.noreply.github.com>

Author: jtpio

packages/jupyter-chat/package.json

@@ -56,6 +56,7 @@
     "@jupyterlab/fileeditor": "^4.2.0",
     "@jupyterlab/notebook": "^4.2.0",
     "@jupyterlab/rendermime": "^4.2.0",
+    "@jupyterlab/translation": "^4.2.0",
     "@jupyterlab/ui-components": "^4.2.0",
     "@lumino/algorithm": "^2.0.0",
     "@lumino/commands": "^2.0.0",

packages/jupyter-chat/src/components/attachments.tsx

@@ -10,7 +10,7 @@ import { PathExt } from '@jupyterlab/coreutils';
 import { UUID } from '@lumino/coreutils';
 
 import { TooltippedIconButton } from './mui-extras';
-import { useChatContext } from '../context';
+import { useChatContext, useTranslator } from '../context';
 import { IAttachment } from '../types';
 
 const ATTACHMENT_CLASS = 'jp-chat-attachment';
@@ -87,7 +87,7 @@ export type AttachmentProps = AttachmentsProps & {
  * The Attachment component.
  */
 export function AttachmentPreview(props: AttachmentProps): JSX.Element {
-  const remove_tooltip = 'Remove attachment';
+  const trans = useTranslator();
   const { attachmentOpenerRegistry } = useChatContext();
   const isClickable = !!attachmentOpenerRegistry?.get(props.attachment.type);
 
@@ -133,7 +133,7 @@ export function AttachmentPreview(props: AttachmentProps): JSX.Element {
       </Tooltip>
       {props.onRemove && (
         <TooltippedIconButton
-          tooltip={remove_tooltip}
+          tooltip={trans.__('Remove attachment')}
           onClick={() => props.onRemove!(props.attachment)}
           className={REMOVE_BUTTON_CLASS}
           inputToolbar={false}

packages/jupyter-chat/src/components/chat.tsx

@@ -5,6 +5,7 @@
 
 import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ITranslator } from '@jupyterlab/translation';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton } from '@mui/material';
@@ -181,6 +182,10 @@ export namespace Chat {
      * The area where the chat is displayed.
      */
     area?: ChatArea;
+    /**
+     * The translator for internationalization.
+     */
+    translator?: ITranslator;
   }
 
   /**

packages/jupyter-chat/src/components/code-blocks/code-toolbar.tsx

@@ -9,6 +9,7 @@ import React, { useEffect, useState } from 'react';
 
 import { CopyButton } from './copy-button';
 import { TooltippedIconButton } from '../mui-extras';
+import { useTranslator } from '../../context';
 import { IActiveCellManager } from '../../active-cell-manager';
 import { replaceCellIcon } from '../../icons';
 import { IChatModel } from '../../model';
@@ -110,9 +111,10 @@ type ToolbarButtonProps = {
 };
 
 function InsertAboveButton(props: ToolbarButtonProps) {
+  const trans = useTranslator();
   const tooltip = props.activeCellAvailable
-    ? 'Insert above active cell'
-    : 'Insert above active cell (no active cell)';
+    ? trans.__('Insert above active cell')
+    : trans.__('Insert above active cell (no active cell)');
 
   return (
     <TooltippedIconButton
@@ -128,9 +130,10 @@ function InsertAboveButton(props: ToolbarButtonProps) {
 }
 
 function InsertBelowButton(props: ToolbarButtonProps) {
+  const trans = useTranslator();
   const tooltip = props.activeCellAvailable
-    ? 'Insert below active cell'
-    : 'Insert below active cell (no active cell)';
+    ? trans.__('Insert below active cell')
+    : trans.__('Insert below active cell (no active cell)');
 
   return (
     <TooltippedIconButton
@@ -146,11 +149,15 @@ function InsertBelowButton(props: ToolbarButtonProps) {
 }
 
 function ReplaceButton(props: ToolbarButtonProps) {
+  const trans = useTranslator();
   const tooltip = props.selectionExists
-    ? `Replace selection (${props.selectionWatcher?.selection?.numLines} line(s))`
+    ? trans.__(
+        'Replace selection (%1 line(s))',
+        props.selectionWatcher?.selection?.numLines ?? 0
+      )
     : props.activeCellAvailable
-      ? 'Replace selection (active cell)'
-      : 'Replace selection (no selection)';
+      ? trans.__('Replace selection (active cell)')
+      : trans.__('Replace selection (no selection)');
 
   const disabled = !props.activeCellAvailable && !props.selectionExists;
 

packages/jupyter-chat/src/components/code-blocks/copy-button.tsx

@@ -7,6 +7,7 @@ import { copyIcon } from '@jupyterlab/ui-components';
 import React, { useState, useCallback, useRef } from 'react';
 
 import { TooltippedIconButton } from '../mui-extras';
+import { useTranslator } from '../../context';
 
 enum CopyStatus {
   None,
@@ -15,19 +16,13 @@ enum CopyStatus {
   Disabled
 }
 
-const COPYBTN_TEXT_BY_STATUS: Record<CopyStatus, string> = {
-  [CopyStatus.None]: 'Copy to clipboard',
-  [CopyStatus.Copying]: 'Copying…',
-  [CopyStatus.Copied]: 'Copied!',
-  [CopyStatus.Disabled]: 'Copy to clipboard disabled in insecure context'
-};
-
 type CopyButtonProps = {
   value: string;
   className?: string;
 };
 
 export function CopyButton(props: CopyButtonProps): JSX.Element {
+  const trans = useTranslator();
   const isCopyDisabled = navigator.clipboard === undefined;
   const [copyStatus, setCopyStatus] = useState<CopyStatus>(
     isCopyDisabled ? CopyStatus.Disabled : CopyStatus.None
@@ -58,6 +53,15 @@ export function CopyButton(props: CopyButtonProps): JSX.Element {
     );
   }, [copyStatus, props.value]);
 
+  const COPYBTN_TEXT_BY_STATUS: Record<CopyStatus, string> = {
+    [CopyStatus.None]: trans.__('Copy to clipboard'),
+    [CopyStatus.Copying]: trans.__('Copying…'),
+    [CopyStatus.Copied]: trans.__('Copied!'),
+    [CopyStatus.Disabled]: trans.__(
+      'Copy to clipboard disabled in insecure context'
+    )
+  };
+
   const tooltip = COPYBTN_TEXT_BY_STATUS[copyStatus];
 
   return (
@@ -67,7 +71,7 @@ export function CopyButton(props: CopyButtonProps): JSX.Element {
       tooltip={tooltip}
       placement="top"
       onClick={copy}
-      aria-label="Copy to clipboard"
+      aria-label={trans.__('Copy to clipboard')}
       inputToolbar={false}
     >
       <copyIcon.react height="16px" width="16px" />

packages/jupyter-chat/src/components/input/buttons/attach-button.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 
 const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';
 
@@ -19,7 +20,8 @@ export function AttachButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
   const { model } = props;
-  const tooltip = 'Add attachment';
+  const trans = useTranslator();
+  const tooltip = trans.__('Add attachment');
 
   if (!model.documentManager || !model.addAttachment) {
     return <></>;
@@ -31,7 +33,7 @@ export function AttachButton(
     }
     try {
       const files = await FileDialog.getOpenFiles({
-        title: 'Select files to attach',
+        title: trans.__('Select files to attach'),
         manager: model.documentManager
       });
       if (files.value) {

packages/jupyter-chat/src/components/input/buttons/cancel-button.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 
@@ -17,10 +18,12 @@ const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 export function CancelButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
+  const trans = useTranslator();
+
   if (!props.model.cancel) {
     return <></>;
   }
-  const tooltip = 'Cancel editing';
+  const tooltip = trans.__('Cancel editing');
   return (
     <TooltippedIconButton
       onClick={props.model.cancel}

packages/jupyter-chat/src/components/input/buttons/save-edit-button.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 
 const SAVE_EDIT_BUTTON_CLASS = 'jp-chat-save-edit-button';
 
@@ -18,14 +19,15 @@ export function SaveEditButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
   const { model, chatCommandRegistry, edit } = props;
+  const trans = useTranslator();
 
   // Don't show this button when not in edit mode
   if (!edit) {
     return <></>;
   }
 
   const [disabled, setDisabled] = useState(false);
-  const tooltip = 'Save edits';
+  const tooltip = trans.__('Save edits');
 
   useEffect(() => {
     const inputChanged = () => {

packages/jupyter-chat/src/components/input/buttons/send-button.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 import { IInputModel, InputModel } from '../../../input-model';
 
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
@@ -19,6 +20,7 @@ export function SendButton(
   props: InputToolbarRegistry.IToolbarItemProps
 ): JSX.Element {
   const { model, chatCommandRegistry, edit } = props;
+  const trans = useTranslator();
 
   // Don't show this button when in edit mode
   if (edit) {
@@ -42,8 +44,8 @@ export function SendButton(
     const configChanged = (_: IInputModel, config: InputModel.IConfig) => {
       setTooltip(
         (config.sendWithShiftEnter ?? false)
-          ? 'Send message (SHIFT+ENTER)'
-          : 'Send message (ENTER)'
+          ? trans.__('Send message (SHIFT+ENTER)')
+          : trans.__('Send message (ENTER)')
       );
     };
     model.configChanged.connect(configChanged);

packages/jupyter-chat/src/components/input/buttons/stop-button.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
 import { TooltippedIconButton } from '../../mui-extras';
+import { useTranslator } from '../../../context';
 
 const STOP_BUTTON_CLASS = 'jp-chat-stop-button';
 
@@ -19,7 +20,8 @@ export function StopButton(
 ): JSX.Element {
   const { chatModel } = props;
   const [disabled, setDisabled] = useState(true);
-  const tooltip = 'Stop generating';
+  const trans = useTranslator();
+  const tooltip = trans.__('Stop generating');
 
   useEffect(() => {
     if (!chatModel) {