feat: Add More Translation Text & Minor UI Fixes (#861)

* config token translation

* more translation and fix

* fix conflict

* fix(DialogTemplate) bug with the spec.tsx, localize hooks need to be in a recoil root

* small clean up

* fix(NewTopic) in endpoint

* fix(RecoilRoot)

* test(DialogTemplate.spec) used data-testid

* fix(DialogTemplate)

* some cleanup

---------

Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>

client/src/components/Messages/Content/EditMessage.tsx

@@ -4,6 +4,7 @@ import { useUpdateMessageMutation } from 'librechat-data-provider';
 import type { TEditProps } from '~/common';
 import store from '~/store';
 import Container from './Container';
+import { useLocalize } from '~/hooks';
 
 const EditMessage = ({
   text,
@@ -18,6 +19,7 @@ const EditMessage = ({
   const textEditor = useRef<HTMLDivElement | null>(null);
   const { conversationId, parentMessageId, messageId } = message;
   const updateMessageMutation = useUpdateMessageMutation(conversationId ?? '');
+  const localize = useLocalize();
 
   const resubmitMessage = () => {
     const text = textEditor?.current?.innerText ?? '';
@@ -91,17 +93,17 @@ const EditMessage = ({
           disabled={isSubmitting}
           onClick={resubmitMessage}
         >
-          Save & Submit
+          {localize('com_ui_save')} {'&'} {localize('com_ui_submit')}
         </button>
         <button
           className="btn btn-secondary relative mr-2"
           disabled={isSubmitting}
           onClick={updateMessage}
         >
-          Save
+          {localize('com_ui_save')}
         </button>
         <button className="btn btn-neutral relative" onClick={() => enterEdit(true)}>
-          Cancel
+          {localize('com_ui_cancel')}
         </button>
       </div>
     </Container>

client/src/components/Messages/HoverButtons.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { TConversation, TMessage } from 'librechat-data-provider';
 import { Clipboard, CheckMark, EditIcon, RegenerateIcon, ContinueIcon } from '~/components/svg';
-import { useGenerations } from '~/hooks';
+import { useGenerations, useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 type THoverButtons = {
@@ -25,6 +25,7 @@ export default function HoverButtons({
   regenerate,
   handleContinue,
 }: THoverButtons) {
+  const localize = useLocalize();
   const { endpoint } = conversation ?? {};
   const [isCopied, setIsCopied] = useState(false);
   const { hideEditButton, regenerateEnabled, continueSupported } = useGenerations({
@@ -57,7 +58,7 @@ export default function HoverButtons({
         )}
         onClick={onEdit}
         type="button"
-        title="edit"
+        title={localize('com_ui_edit')}
         disabled={hideEditButton}
       >
         <EditIcon />
@@ -69,7 +70,9 @@ export default function HoverButtons({
         )}
         onClick={() => copyToClipboard(setIsCopied)}
         type="button"
-        title={isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}
+        title={
+          isCopied ? localize('com_ui_copied_to_clipboard') : localize('com_ui_copy_to_clipboard')
+        }
       >
         {isCopied ? <CheckMark /> : <Clipboard />}
       </button>
@@ -78,7 +81,7 @@ export default function HoverButtons({
           className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
           onClick={regenerate}
           type="button"
-          title="regenerate"
+          title={localize('com_ui_regenerate')}
         >
           <RegenerateIcon className="hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
         </button>
@@ -88,7 +91,7 @@ export default function HoverButtons({
           className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible "
           onClick={handleContinue}
           type="button"
-          title="continue"
+          title={localize('com_ui_continue')}
         >
           <ContinueIcon className="h-4 w-4 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
         </button>

client/src/components/Messages/MessageHeader.tsx

@@ -4,6 +4,7 @@ import type { TPreset } from 'librechat-data-provider';
 import { Plugin } from '~/components/svg';
 import EndpointOptionsDialog from '../Endpoints/EndpointOptionsDialog';
 import { cn, alternateName } from '~/utils/';
+import { useLocalize } from '~/hooks';
 
 import store from '~/store';
 
@@ -11,6 +12,7 @@ const MessageHeader = ({ isSearchView = false }) => {
   const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
   const conversation = useRecoilValue(store.conversation);
   const searchQuery = useRecoilValue(store.searchQuery);
+  const localize = useLocalize();
 
   if (!conversation) {
     return null;
@@ -31,7 +33,7 @@ const MessageHeader = ({ isSearchView = false }) => {
         beta
       </span>
       <span className="px-1">•</span> */}
-      Model: {model}
+      {localize('com_ui_model')}: {model}
     </>
   );