Support localization for Nav components (#688)

* init localization * Update defaul to en * Fix merge issue and import path. * Set default to en * Change jsx to tsx * Update the password max length string. * Remove languageContext as using the recoil instead. * Add localization to component endpoints pages * Revert default to en after testing. * Update LoginForm.tsx * Fix translation. * Make lint happy * Merge (#1) * Create deploy.yml * Add localization support for endpoint pages components (#667) * init localization * Update defaul to en * Fix merge issue and import path. * Set default to en * Change jsx to tsx * Update the password max length string. * Remove languageContext as using the recoil instead. * Add localization to component endpoints pages * Revert default to en after testing. * Update LoginForm.tsx * Fix translation. * Make lint happy * Add a restart to melisearch in docker-compose.yml (#684) * Oauth fixes for Cognito (#686) * Add a restart to melisearch in docker-compose.yml * Oauth fixes for Cognito * Use the username or email for full name from oath if not provided --------- Co-authored-by: Donavan <snark@hey.com> * Italian localization support for endpoint (#687) --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com> Co-authored-by: Donavan Stanley <donavan.stanley@gmail.com> Co-authored-by: Donavan <snark@hey.com> Co-authored-by: Marco Beretta <81851188+Berry-13@users.noreply.github.com> * Translate Nav pages * Fix npm test --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com> Co-authored-by: Donavan Stanley <donavan.stanley@gmail.com> Co-authored-by: Donavan <snark@hey.com> Co-authored-by: Marco Beretta <81851188+Berry-13@users.noreply.github.com>
danny-avila · Jul 24, 2023 · 1e49b7e · 1e49b7e
1 parent 3b865fb
commit 1e49b7e
Show file tree

Hide file tree

Showing 22 changed files with 346 additions and 130 deletions.
diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
@@ -55,13 +55,15 @@ function Registration() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
       <div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
-        <h1 className="mb-4 text-center text-3xl font-semibold">Create your account</h1>
+        <h1 className="mb-4 text-center text-3xl font-semibold">
+          {localize(lang, 'com_auth_create_account')}
+        </h1>
         {error && (
           <div
             className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
             role="alert"
           >
-            There was an error attempting to register your account. Please try again. {errorMessage}
+            {localize(lang, 'com_auth_error_create')} {errorMessage}
           </div>
         )}
         <form

diff --git a/client/src/components/Endpoints/EditPresetDialog.jsx b/client/src/components/Endpoints/EditPresetDialog.jsx
@@ -169,7 +169,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTemplate
-        title={`${title || 'Edit Preset'} - ${preset?.title}`}
+        title={`${title || localize(lang, 'com_endpoint_edit_preset')} - ${preset?.title}`}
         className="h-[675px] max-w-full sm:max-w-4xl "
         main={
           <div className="flex w-full flex-col items-center gap-2 md:h-[475px]">

diff --git a/client/src/components/Endpoints/EndpointOptionsDialog.jsx b/client/src/components/Endpoints/EndpointOptionsDialog.jsx
@@ -48,7 +48,7 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogTemplate
-          title={`${title || 'View Options'} - ${endpointName}`}
+          title={`${title || localize(lang, 'com_endpoint_view_options')} - ${endpointName}`}
           className="max-w-full sm:max-w-4xl"
           main={
             <div className="flex w-full flex-col items-center gap-2">

diff --git a/client/src/components/Endpoints/Plugins/AgentSettings.jsx b/client/src/components/Endpoints/Plugins/AgentSettings.jsx
@@ -46,7 +46,7 @@ function Settings(props) {
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
             <SelectDropDown
-              title="Agent Model (Recommended: GPT-3.5)"
+              title={localize(lang, 'com_endpoint_agent_model')}
               value={model}
               setValue={setModel}
               availableValues={models}
@@ -102,7 +102,10 @@ function Settings(props) {
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
                 <Label htmlFor="temp-int" className="text-left text-sm font-medium">
-                  {localize(lang, 'com_endpoint_temperature')} <small className="opacity-40">({localize(lang, 'com_endpoint_default')}: 0)</small>
+                  {localize(lang, 'com_endpoint_temperature')}{' '}
+                  <small className="opacity-40">
+                    ({localize(lang, 'com_endpoint_default')}: 0)
+                  </small>
                 </Label>
                 <InputNumber
                   id="temp-int"

diff --git a/client/src/components/Endpoints/Plugins/OptionHover.jsx b/client/src/components/Endpoints/Plugins/OptionHover.jsx
@@ -1,20 +1,20 @@
 import { HoverCardPortal, HoverCardContent } from '~/components';
+import { useRecoilValue } from 'recoil';
+import store from '~/store';
+import { localize } from '~/localization/Translation';
 
 const types = {
-  temp: 'Higher values = more random, while lower values = more focused and deterministic. We recommend altering this or Top P but not both.',
-  func: 'Enable use of Plugins as OpenAI Functions',
-  skip: 'Enable skipping the completion step, which reviews the final answer and generated steps',
-  max: 'The max tokens to generate. The total length of input tokens and generated tokens is limited by the model\'s context length.',
-  topp: 'An alternative to sampling with temperature, called nucleus sampling, where the model considers the results of the tokens with top_p probability mass. So 0.1 means only the tokens comprising the top 10% probability mass are considered. We recommend altering this or temperature but not both.',
-  freq: 'Number between -2.0 and 2.0. Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model\'s likelihood to repeat the same line verbatim.',
-  pres: 'Number between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model\'s likelihood to talk about new topics.',
+  temp: 'com_endpoint_openai_temp',
+  func: 'com_endpoint_func_hover',
+  skip: 'com_endpoint_skip_hover',
+  max: 'com_endpoint_openai_max',
+  topp: 'com_endpoint_openai_topp',
+  freq: 'com_endpoint_openai_freq',
+  pres: 'com_endpoint_openai_pres',
 };
 
 function OptionHover({ type, side }) {
-  // const options = {};
-  // if (type === 'pres') {
-  //   options.sideOffset = 45;
-  // }
+  const lang = useRecoilValue(store.lang);
 
   return (
     <HoverCardPortal>
@@ -24,7 +24,7 @@ function OptionHover({ type, side }) {
         // {...options}
       >
         <div className="space-y-2">
-          <p className="text-sm text-gray-600 dark:text-gray-300">{types[type]}</p>
+          <p className="text-sm text-gray-600 dark:text-gray-300">{localize(lang, types[type])}</p>
         </div>
       </HoverCardContent>
     </HoverCardPortal>

diff --git a/client/src/components/Endpoints/Plugins/Settings.jsx b/client/src/components/Endpoints/Plugins/Settings.jsx
@@ -55,7 +55,7 @@ function Settings(props) {
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
             <SelectDropDown
-              title="Completion Model (Recommended: GPT-4)"
+              title={localize(lang, 'com_endpoint_completion_model')}
               value={model}
               setValue={setModel}
               availableValues={models}
@@ -71,7 +71,10 @@ function Settings(props) {
             <div className="grid w-full items-center gap-2">
               <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
                 {localize(lang, 'com_endpoint_custom_name')}{' '}
-                <small className="opacity-40">({localize(lang, 'com_endpoint_default_empty')} | {localize(lang, 'com_endpoint_disabled_with_tools')})</small>
+                <small className="opacity-40">
+                  ({localize(lang, 'com_endpoint_default_empty')} |{' '}
+                  {localize(lang, 'com_endpoint_disabled_with_tools')})
+                </small>
               </Label>
               <Input
                 id="chatGptLabel"
@@ -81,7 +84,7 @@ function Settings(props) {
                 placeholder={
                   toolsSelected
                     ? localize(lang, 'com_endpoint_disabled_with_tools_placeholder')
-                    : localize(lang, 'com_endpoint_plug_set_custom_name_for_gpt_placeholder')
+                    : localize(lang, 'com_endpoint_openai_custom_name_placeholder')
                 }
                 className={cn(
                   defaultTextProps,
@@ -92,7 +95,10 @@ function Settings(props) {
             <div className="grid w-full items-center gap-2">
               <Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
                 {localize(lang, 'com_endpoint_prompt_prefix')}{' '}
-                <small className="opacity-40">({localize(lang, 'com_endpoint_default_empty')} | {localize(lang, 'com_endpoint_disabled_with_tools')})</small>
+                <small className="opacity-40">
+                  ({localize(lang, 'com_endpoint_default_empty')} |{' '}
+                  {localize(lang, 'com_endpoint_disabled_with_tools')})
+                </small>
               </Label>
               <TextareaAutosize
                 id="promptPrefix"
@@ -102,7 +108,10 @@ function Settings(props) {
                 placeholder={
                   toolsSelected
                     ? localize(lang, 'com_endpoint_disabled_with_tools_placeholder')
-                    : localize(lang, 'com_endpoint_plug_set_custom_instructions_for_gpt_placeholder')
+                    : localize(
+                      lang,
+                      'com_endpoint_plug_set_custom_instructions_for_gpt_placeholder',
+                    )
                 }
                 className={cn(
                   defaultTextProps,
@@ -117,7 +126,10 @@ function Settings(props) {
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
                 <Label htmlFor="temp-int" className="text-left text-sm font-medium">
-                  Temperature <small className="opacity-40">{'(default: 0.8)'}</small>
+                  {localize(lang, 'com_endpoint_temperature')}{' '}
+                  <small className="opacity-40">
+                    ({localize(lang, 'com_endpoint_default_with_num', 0.8)})
+                  </small>
                 </Label>
                 <InputNumber
                   id="temp-int"
@@ -154,7 +166,10 @@ function Settings(props) {
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
                 <Label htmlFor="top-p-int" className="text-left text-sm font-medium">
-                  {localize(lang, 'com_endpoint_top_p')} <small className="opacity-40">({localize(lang, 'com_endpoint_default_with_num', 1)})</small>
+                  {localize(lang, 'com_endpoint_top_p')}{' '}
+                  <small className="opacity-40">
+                    ({localize(lang, 'com_endpoint_default_with_num', 1)})
+                  </small>
                 </Label>
                 <InputNumber
                   id="top-p-int"
@@ -192,7 +207,10 @@ function Settings(props) {
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
                 <Label htmlFor="freq-penalty-int" className="text-left text-sm font-medium">
-                  {localize(lang, 'com_endpoint_frequency_penalty')} <small className="opacity-40">({localize(lang, 'com_endpoint_default_with_num', 0)})</small>
+                  {localize(lang, 'com_endpoint_frequency_penalty')}{' '}
+                  <small className="opacity-40">
+                    ({localize(lang, 'com_endpoint_default_with_num', 0)})
+                  </small>
                 </Label>
                 <InputNumber
                   id="freq-penalty-int"
@@ -230,7 +248,10 @@ function Settings(props) {
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
                 <Label htmlFor="pres-penalty-int" className="text-left text-sm font-medium">
-                  {localize(lang, 'com_endpoint_presence_penalty')} <small className="opacity-40">({localize(lang, 'com_endpoint_default_with_num', 0)})</small>
+                  {localize(lang, 'com_endpoint_presence_penalty')}{' '}
+                  <small className="opacity-40">
+                    ({localize(lang, 'com_endpoint_default_with_num', 0)})
+                  </small>
                 </Label>
                 <InputNumber
                   id="pres-penalty-int"

diff --git a/client/src/components/Endpoints/SaveAsPresetDialog.jsx b/client/src/components/Endpoints/SaveAsPresetDialog.jsx
@@ -28,14 +28,14 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
   };
 
   useEffect(() => {
-    setTitle(preset?.title || 'My Preset');
+    setTitle(preset?.title || localize(lang, 'com_endpoint_my_preset'));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTemplate
-        title="Save As Preset"
+        title={localize(lang, 'com_endpoint_save_as_preset')}
         main={
           <div className="grid w-full items-center gap-2">
             <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">

diff --git a/client/src/components/Nav/ClearConvos.tsx b/client/src/components/Nav/ClearConvos.tsx
@@ -3,12 +3,15 @@ import { Dialog, DialogTemplate } from '../ui/';
 import { ClearChatsButton } from './SettingsTabs/';
 import { useClearConversationsMutation } from '@librechat/data-provider';
 import store from '~/store';
+import { useRecoilValue } from 'recoil';
+import { localize } from '~/localization/Translation';
 
 const ClearConvos = ({ open, onOpenChange }) => {
   const { newConversation } = store.useConversation();
   const { refreshConversations } = store.useConversations();
   const clearConvosMutation = useClearConversationsMutation();
   const [confirmClear, setConfirmClear] = useState(false);
+  const lang = useRecoilValue(store.lang);
 
   const clearConvos = useCallback(() => {
     if (confirmClear) {
@@ -30,8 +33,8 @@ const ClearConvos = ({ open, onOpenChange }) => {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTemplate
-        title="Clear conversations"
-        description="Are you sure you want to clear all conversations? This is irreversible."
+        title={localize(lang, 'com_nav_clear_conversation')}
+        description={localize(lang, 'com_nav_clear_conversation_confirm_message')}
         leftButtons={
           <ClearChatsButton showText={false} confirmClear={confirmClear} onClick={clearConvos} />
         }

diff --git a/client/src/components/Nav/ExportConversation/ExportModel.jsx b/client/src/components/Nav/ExportConversation/ExportModel.jsx
@@ -17,6 +17,7 @@ import { useScreenshot } from '~/utils/screenshotContext';
 
 import store from '~/store';
 import cleanupPreset from '~/utils/cleanupPreset.js';
+import { localize } from '~/localization/Translation';
 
 export default function ExportModel({ open, onOpenChange }) {
   const { captureScreenshot } = useScreenshot();
@@ -32,6 +33,8 @@ export default function ExportModel({ open, onOpenChange }) {
   const messagesTree = useRecoilValue(store.messagesTree) || [];
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
 
+  const lang = useRecoilValue(store.lang);
+
   const getSiblingIdx = useRecoilCallback(
     ({ snapshot }) =>
       async (messageId) =>
@@ -349,13 +352,13 @@ export default function ExportModel({ open, onOpenChange }) {
             <div className="grid w-full gap-6 sm:grid-cols-2">
               <div className="col-span-1 flex flex-col items-start justify-start gap-2">
                 <Label htmlFor="filename" className="text-left text-sm font-medium">
-                  Filename
+                  {localize(lang, 'com_nav_export_filename')}
                 </Label>
                 <Input
                   id="filename"
                   value={filename}
                   onChange={(e) => setFileName(filenamify(e.target.value || ''))}
-                  placeholder="Set the filename"
+                  placeholder={localize(lang, 'com_nav_export_filename_placeholder')}
                   className={cn(
                     defaultTextProps,
                     'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
@@ -364,7 +367,7 @@ export default function ExportModel({ open, onOpenChange }) {
               </div>
               <div className="col-span-1 flex flex-col items-start justify-start gap-2">
                 <Label htmlFor="type" className="text-left text-sm font-medium">
-                  Type
+                  {localize(lang, 'com_nav_export_type')}
                 </Label>
                 <Dropdown
                   id="type"
@@ -383,7 +386,7 @@ export default function ExportModel({ open, onOpenChange }) {
               <div className="col-span-1 flex flex-col items-start justify-start gap-2">
                 <div className="grid w-full items-center gap-2">
                   <Label htmlFor="includeOptions" className="text-left text-sm font-medium">
-                    Include endpoint options
+                    {localize(lang, 'com_nav_export_include_endpoint_options')}
                   </Label>
                   <div className="flex h-[40px] w-full items-center space-x-3">
                     <Checkbox
@@ -397,14 +400,16 @@ export default function ExportModel({ open, onOpenChange }) {
                       htmlFor="includeOptions"
                       className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
                     >
-                      {exportOptionsSupport ? 'Enabled' : 'Not Supported'}
+                      {exportOptionsSupport
+                        ? localize(lang, 'com_nav_enabled')
+                        : localize(lang, 'com_nav_not_supported')}
                     </label>
                   </div>
                 </div>
               </div>
               <div className="grid w-full items-center gap-2">
                 <Label htmlFor="exportBranches" className="text-left text-sm font-medium">
-                  Export all message branches
+                  {localize(lang, 'com_nav_export_all_message_branches')}
                 </Label>
                 <div className="flex h-[40px] w-full items-center space-x-3">
                   <Checkbox
@@ -418,14 +423,16 @@ export default function ExportModel({ open, onOpenChange }) {
                     htmlFor="exportBranches"
                     className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
                   >
-                    {exportBranchesSupport ? 'Enabled' : 'Not Supported'}
+                    {exportBranchesSupport
+                      ? localize(lang, 'com_nav_enabled')
+                      : localize(lang, 'com_nav_not_supported')}
                   </label>
                 </div>
               </div>
               {type === 'json' ? (
                 <div className="grid w-full items-center gap-2">
                   <Label htmlFor="recursive" className="text-left text-sm font-medium">
-                    Recursive or sequential?
+                    {localize(lang, 'com_nav_export_recursive_or_sequential')}
                   </Label>
                   <div className="flex h-[40px] w-full items-center space-x-3">
                     <Checkbox
@@ -438,7 +445,7 @@ export default function ExportModel({ open, onOpenChange }) {
                       htmlFor="recursive"
                       className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
                     >
-                      Recursive
+                      {localize(lang, 'com_nav_export_recursive')}
                     </label>
                   </div>
                 </div>
@@ -452,7 +459,7 @@ export default function ExportModel({ open, onOpenChange }) {
               onClick={exportConversation}
               className="dark:hover:gray-400 border-gray-700 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800"
             >
-              Export
+              {localize(lang, 'com_endpoint_export')}
             </DialogButton>
           </>
         }

diff --git a/client/src/components/Nav/ExportConversation/index.jsx b/client/src/components/Nav/ExportConversation/index.jsx
@@ -6,9 +6,11 @@ import { cn } from '~/utils/';
 import ExportModel from './ExportModel';
 
 import store from '~/store';
+import { localize } from '~/localization/Translation';
 
 const ExportConversation = forwardRef(() => {
   const [open, setOpen] = useState(false);
+  const lang = useRecoilValue(store.lang);
 
   const conversation = useRecoilValue(store.conversation) || {};
 
@@ -33,7 +35,7 @@ const ExportConversation = forwardRef(() => {
         onClick={clickHandler}
       >
         <Download size={16} />
-        Export conversation
+        {localize(lang, 'com_nav_export_conversation')}
       </button>
 
       <ExportModel open={open} onOpenChange={setOpen} />

diff --git a/client/src/components/Nav/Logout.jsx b/client/src/components/Nav/Logout.jsx
@@ -1,9 +1,13 @@
 import { forwardRef } from 'react';
 import LogOutIcon from '../svg/LogOutIcon';
 import { useAuthContext } from '~/hooks/AuthContext';
+import { useRecoilValue } from 'recoil';
+import store from '~/store';
+import { localize } from '~/localization/Translation';
 
 const Logout = forwardRef(() => {
   const { user, logout } = useAuthContext();
+  const lang = useRecoilValue(store.lang);
 
   const handleLogout = () => {
     logout();
@@ -16,8 +20,8 @@ const Logout = forwardRef(() => {
       onClick={handleLogout}
     >
       <LogOutIcon />
-      {user?.username || 'USER'}
-      <small>Log out</small>
+      {user?.username || localize(lang, 'com_nav_user')}
+      <small>{localize(lang, 'com_nav_log_out')}</small>
     </button>
   );
 });