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>
2026-01-06 10:38:50 +01:00 · 2023-09-04 15:23:26 +02:00 · 2023-09-04 15:23:26 +02:00 · ac8b898495
commit ac8b898495
parent 28230d9305
28 changed files with 333 additions and 206 deletions
--- a/client/src/components/Input/EndpointMenu/EndpointMenu.jsx
+++ b/client/src/components/Input/EndpointMenu/EndpointMenu.jsx
@ -165,7 +165,7 @@ export default function NewConversationMenu() {
            }
          >
            {icon}
-            <span className="max-w-0 overflow-hidden whitespace-nowrap px-0 text-slate-600 transition-all group-hover:max-w-[80px] group-hover:px-2 group-data-[state=open]:max-w-[80px] group-data-[state=open]:px-2 dark:text-slate-300">
+            <span className="max-w-0 overflow-hidden whitespace-nowrap px-0 text-slate-600 transition-all group-data-[state=open]:max-w-[80px] group-data-[state=open]:px-2 dark:text-slate-300">
              {localize('com_endpoint_new_topic')}
            </span>
          </Button>
@ -209,7 +209,7 @@ export default function NewConversationMenu() {
              onClick={() => setShowPresets((prev) => !prev)}
            >
              {showPresets ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
-              {localize('com_endpoint_examples')}
+              {localize('com_endpoint_presets')}
            </span>
            <FileUpload onFileSelected={onFileSelected} />
            <Dialog>
@ -223,18 +223,19 @@ export default function NewConversationMenu() {
                  className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-red-700 hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-red-400 dark:hover:bg-gray-800 dark:hover:text-red-400"
                > */}
                  <Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
-                  {localize('com_endpoint_clear_all')}
+                  {localize('com_ui_clear')} {localize('com_ui_all')}
                  {/* </Button> */}
                </label>
              </DialogTrigger>
              <DialogTemplate
-                title="Clear presets"
-                description="Are you sure you want to clear all presets? This is irreversible."
+                title={`${localize('com_ui_clear')} ${localize('com_endpoint_presets')}`}
+                description={localize('com_endpoint_presets_clear_warning')}
                selection={{
                  selectHandler: clearAllPresets,
                  selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
-                  selectText: 'Clear',
+                  selectText: localize('com_ui_clear'),
                }}
+                className="max-w-[500px]"
              />
            </Dialog>
          </DropdownMenuLabel>
--- a/client/src/components/Input/EndpointMenu/FileUpload.tsx
+++ b/client/src/components/Input/EndpointMenu/FileUpload.tsx
@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { FileUp } from 'lucide-react';
 import { cn } from '~/utils/';
+import { useLocalize } from '~/hooks';

 type FileUploadProps = {
  onFileSelected: (event: React.ChangeEvent<HTMLInputElement>) => void;
@ -23,6 +24,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
 }) => {
  const [statusColor, setStatusColor] = useState<string>('text-gray-600');
  const [status, setStatus] = useState<null | string>(null);
+  const localize = useLocalize();

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const file = event.target.files?.[0];
@ -59,7 +61,11 @@ const FileUpload: React.FC<FileUploadProps> = ({
    >
      <FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
      <span className="flex text-xs ">
-        {!status ? text || 'Import' : status === 'success' ? successText : invalidText}
+        {!status
+          ? text || localize('com_endpoint_import')
+          : status === localize('com_ui_succes')
+            ? successText
+            : invalidText}
      </span>
      <input
        id={`file-upload-${id}`}
--- a/client/src/components/Input/SetTokenDialog/GoogleConfig.tsx
+++ b/client/src/components/Input/SetTokenDialog/GoogleConfig.tsx
@ -1,14 +1,16 @@
 import React from 'react';
 import FileUpload from '../EndpointMenu/FileUpload';
+import { useLocalize } from '~/hooks';

 const GoogleConfig = ({ setToken }: { setToken: React.Dispatch<React.SetStateAction<string>> }) => {
+  const localize = useLocalize();
  return (
    <FileUpload
      id="googleKey"
      className="w-full"
-      text="Import Service Account JSON Key"
-      successText="Successfully Imported Service Account JSON Key"
-      invalidText="Invalid Service Account JSON Key, Did you import the correct file?"
+      text={localize('com_endpoint_config_token_import_json_key')}
+      successText={localize('com_endpoint_config_token_import_json_key_succesful')}
+      invalidText={localize('com_endpoint_config_token_import_json_key_invalid')}
      validator={(credentials) => {
        if (!credentials) {
          return false;
--- a/client/src/components/Input/SetTokenDialog/HelpText.tsx
+++ b/client/src/components/Input/SetTokenDialog/HelpText.tsx
@ -1,10 +1,12 @@
 import React from 'react';
+import { useLocalize } from '~/hooks';

 function HelpText({ endpoint }: { endpoint: string }) {
+  const localize = useLocalize();
  const textMap = {
    bingAI: (
      <small className="break-all text-gray-600">
-        {'To get your Access token for Bing, login to '}
+        {localize('com_endpoint_config_token_get_edge_key')}{' '}
        <a
          target="_blank"
          href="https://www.bing.com"
@ -13,22 +15,22 @@ function HelpText({ endpoint }: { endpoint: string }) {
        >
          https://www.bing.com
        </a>
-        {`. Use dev tools or an extension while logged into the site to copy the content of the _U cookie.
-      If this fails, follow these `}
+        {'. '}
+        {localize('com_endpoint_config_token_get_edge_key_dev_tool')}{' '}
        <a
          target="_blank"
          href="https://github.com/waylaidwanderer/node-chatgpt-api/issues/378#issuecomment-1559868368"
          rel="noreferrer"
          className="text-blue-600 underline"
        >
-          instructions
-        </a>
-        {' to provide the full cookie strings.'}
+          {localize('com_endpoint_config_token_edge_instructions')}
+        </a>{' '}
+        {localize('com_endpoint_config_token_edge_full_token_string')}
      </small>
    ),
    chatGPTBrowser: (
      <small className="break-all text-gray-600">
-        {'To get your Access token For ChatGPT \'Free Version\', login to '}
+        {localize('com_endpoint_config_token_chatgpt')}{' '}
        <a
          target="_blank"
          href="https://chat.openai.com"
@ -37,7 +39,8 @@ function HelpText({ endpoint }: { endpoint: string }) {
        >
          https://chat.openai.com
        </a>
-        , then visit{' '}
+        {', '}
+        {localize('com_endpoint_config_token_chatgpt_then_visit')}{' '}
        <a
          target="_blank"
          href="https://chat.openai.com/api/auth/session"
@ -46,31 +49,32 @@ function HelpText({ endpoint }: { endpoint: string }) {
        >
          https://chat.openai.com/api/auth/session
        </a>
-        . Copy access token.
+        {'. '}
+        {localize('com_endpoint_config_token_chatgpt_copy_token')}
      </small>
    ),
    google: (
      <small className="break-all text-gray-600">
-        You need to{' '}
+        {localize('com_endpoint_config_token_google_need_to')}{' '}
        <a
          target="_blank"
          href="https://console.cloud.google.com/vertex-ai"
          rel="noreferrer"
          className="text-blue-600 underline"
        >
-          Enable Vertex AI
+          {localize('com_endpoint_config_token_google_vertex_ai')}
        </a>{' '}
-        API on Google Cloud, then{' '}
+        {localize('com_endpoint_config_token_google_vertex_api')}{' '}
        <a
          target="_blank"
          href="https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create?walkthrough_id=iam--create-service-account#step_index=1"
          rel="noreferrer"
          className="text-blue-600 underline"
        >
-          Create a Service Account
+          {localize('com_endpoint_config_token_google_service_account')}
        </a>
-        {`. Make sure to click 'Create and Continue' to give at least the 'Vertex AI User' role.
-      Lastly, create a JSON key to import here.`}
+        {'. '}
+        {localize('com_endpoint_config_token_google_vertex_api_role')}
      </small>
    ),
  };
--- a/client/src/components/Input/SetTokenDialog/InputWithLabel.tsx
+++ b/client/src/components/Input/SetTokenDialog/InputWithLabel.tsx
@ -1,6 +1,7 @@
 import React, { ChangeEvent, FC } from 'react';
 import { Input, Label } from '~/components';
 import { cn, defaultTextPropsLabel, removeFocusOutlines } from '~/utils/';
+import { useLocalize } from '~/hooks';

 interface InputWithLabelProps {
  value: string;
@ -10,6 +11,7 @@ interface InputWithLabelProps {
 }

 const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, id }) => {
+  const localize = useLocalize();
  return (
    <>
      <Label htmlFor={id} className="text-left text-sm font-medium">
@ -21,7 +23,7 @@ const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, id })
        id={id}
        value={value || ''}
        onChange={onChange}
-        placeholder={`Enter ${label}`}
+        placeholder={`${localize('com_ui_enter')} ${label}`}
        className={cn(
          defaultTextPropsLabel,
          'flex h-10 max-h-10 w-full resize-none px-3 py-2',
--- a/client/src/components/Input/SetTokenDialog/OtherConfig.tsx
+++ b/client/src/components/Input/SetTokenDialog/OtherConfig.tsx
@ -1,5 +1,6 @@
 import React from 'react';
 import InputWithLabel from './InputWithLabel';
+import { useLocalize } from '~/hooks';

 type ConfigProps = {
  token: string;
@ -7,12 +8,13 @@ type ConfigProps = {
 };

 const OtherConfig = ({ token, setToken }: ConfigProps) => {
+  const localize = useLocalize();
  return (
    <InputWithLabel
      id={'chatGPTLabel'}
      value={token || ''}
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setToken(e.target.value || '')}
-      label={'Token Name'}
+      label={localize('com_endpoint_config_token_name')}
    />
  );
 };
--- a/client/src/components/Input/SetTokenDialog/SetTokenDialog.tsx
+++ b/client/src/components/Input/SetTokenDialog/SetTokenDialog.tsx
@ -7,8 +7,10 @@ import { Dialog } from '~/components/ui';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { alternateName } from '~/utils';
 import store from '~/store';
+import { useLocalize } from '~/hooks';

 const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
+  const localize = useLocalize();
  const [token, setToken] = useState('');
  const { saveToken } = store.useToken(endpoint);

@ -30,21 +32,21 @@ const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogTemplate
-        title={`Set Token for ${alternateName[endpoint] ?? endpoint}`}
+        title={`${localize('com_endpoint_config_token_for')} ${
+          alternateName[endpoint] ?? endpoint
+        }`}
        className="w-full max-w-[650px] sm:w-3/4 md:w-3/4 lg:w-3/4"
        main={
          <div className="grid w-full items-center gap-2">
            <EndpointComponent token={token} setToken={setToken} endpoint={endpoint} />
-            <small className="text-red-600">
-              Your token will be sent to the server, but not saved.
-            </small>
+            <small className="text-red-600">{localize('com_endpoint_config_token_server')}</small>
            <HelpText endpoint={endpoint} />
          </div>
        }
        selection={{
          selectHandler: submit,
          selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
-          selectText: 'Submit',
+          selectText: localize('com_ui_submit'),
        }}
      />
    </Dialog>
--- a/client/src/components/Input/SubmitButton.jsx
+++ b/client/src/components/Input/SubmitButton.jsx
@ -3,6 +3,7 @@ import { StopGeneratingIcon } from '~/components';
 import { Settings } from 'lucide-react';
 import { SetTokenDialog } from './SetTokenDialog';
 import store from '~/store';
+import { useLocalize } from '~/hooks';

 export default function SubmitButton({
  endpoint,
@ -17,6 +18,7 @@ export default function SubmitButton({

  const isTokenProvided = endpointsConfig?.[endpoint]?.userProvide ? !!getToken() : true;
  const endpointsToHideSetTokens = new Set(['openAI', 'azureOpenAI', 'bingAI']);
+  const localize = useLocalize();

  const clickHandler = (e) => {
    e.preventDefault();
@ -50,7 +52,7 @@ export default function SubmitButton({
          <div className="flex items-center justify-center rounded-md text-xs group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
            <div className="m-0 mr-0 flex items-center justify-center rounded-md p-2 sm:p-2">
              <Settings className="mr-1 inline-block h-auto w-[18px]" />
-              Set Token First
+              {localize('com_endpoint_config_token_name_placeholder')}
            </div>
          </div>
        </button>