fix: simplify translation files (#1760)

* fix: simplify translation files * fix: using translation path
Chainlit · Jan 20, 2025 · 0e8749f · 0e8749f
1 parent 396a5bd
commit 0e8749f
Show file tree

Hide file tree

Showing 37 changed files with 2,272 additions and 3,030 deletions.
diff --git a/backend/chainlit/translations/bn.json b/backend/chainlit/translations/bn.json
diff --git a/backend/chainlit/translations/en-US.json b/backend/chainlit/translations/en-US.json
diff --git a/backend/chainlit/translations/gu.json b/backend/chainlit/translations/gu.json
diff --git a/backend/chainlit/translations/he-IL.json b/backend/chainlit/translations/he-IL.json
diff --git a/backend/chainlit/translations/hi.json b/backend/chainlit/translations/hi.json
diff --git a/backend/chainlit/translations/ja.json b/backend/chainlit/translations/ja.json
diff --git a/backend/chainlit/translations/kn.json b/backend/chainlit/translations/kn.json
diff --git a/backend/chainlit/translations/ml.json b/backend/chainlit/translations/ml.json
diff --git a/backend/chainlit/translations/mr.json b/backend/chainlit/translations/mr.json
diff --git a/backend/chainlit/translations/nl-NL.json b/backend/chainlit/translations/nl-NL.json
diff --git a/backend/chainlit/translations/ta.json b/backend/chainlit/translations/ta.json
diff --git a/backend/chainlit/translations/te.json b/backend/chainlit/translations/te.json
diff --git a/backend/chainlit/translations/zh-CN.json b/backend/chainlit/translations/zh-CN.json
diff --git a/frontend/src/components/ChatSettings/index.tsx b/frontend/src/components/ChatSettings/index.tsx
@@ -68,7 +68,7 @@ export default function ChatSettingsModal() {
       >
         <DialogHeader>
           <DialogTitle>
-            <Translator path="components.organisms.chat.settings.settingsPanel" />
+            <Translator path="chat.settings.title" />
           </DialogTitle>
         </DialogHeader>
         <div className="flex flex-col flex-grow overflow-y-auto gap-6">
@@ -86,14 +86,14 @@ export default function ChatSettingsModal() {
         </div>
         <DialogFooter>
           <Button variant="outline" onClick={handleReset}>
-            <Translator path="components.organisms.chat.settings.reset" />
+            <Translator path="common.actions.reset" />
           </Button>
           <div className="flex-1" />
           <Button variant="ghost" onClick={handleClose}>
-            <Translator path="components.organisms.chat.settings.cancel" />
+            <Translator path="common.actions.cancel" />
           </Button>
           <Button onClick={handleConfirm} id="confirm" autoFocus>
-            <Translator path="components.organisms.chat.settings.confirm" />
+            <Translator path="common.actions.confirm" />
           </Button>
         </DialogFooter>
       </DialogContent>

diff --git a/frontend/src/components/CopyButton.tsx b/frontend/src/components/CopyButton.tsx
@@ -57,13 +57,7 @@ const CopyButton = ({ content, className }: Props) => {
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          <p>
-            {copied
-              ? t('components.organisms.chat.Messages.copyButton.copied')
-              : t(
-                  'components.organisms.chat.Messages.copyButton.copyToClipboard'
-                )}
-          </p>
+          <p>{copied ? t('actions.copy.success') : t('actions.copy.button')}</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

diff --git a/frontend/src/components/LeftSidebar/Search.tsx b/frontend/src/components/LeftSidebar/Search.tsx
@@ -100,7 +100,7 @@ export default function SearchChats() {
           </TooltipTrigger>
           <TooltipContent>
             <div className="flex flex-col items-center">
-              <Translator path="components.organisms.threadHistory.sidebar.filters.SearchBar.search" />
+              <Translator path="threadHistory.sidebar.filters.search" />
               <Kbd>Cmd+k</Kbd>
             </div>
           </TooltipContent>

diff --git a/frontend/src/components/LeftSidebar/ThreadList.tsx b/frontend/src/components/LeftSidebar/ThreadList.tsx
@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { map, size } from 'lodash';
 import { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { toast } from 'sonner';
@@ -63,6 +64,7 @@ export function ThreadList({
   isFetching,
   isLoadingMore
 }: ThreadListProps) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const { idToResume } = useChatSession();
   const { clear } = useChatInteract();
@@ -92,7 +94,7 @@ export function ThreadList({
   if (!threadHistory || size(threadHistory?.timeGroupedThreads) === 0) {
     return (
       <Alert variant="info" className="m-3">
-        <Translator path="components.organisms.threadHistory.sidebar.ThreadList.noThreads" />
+        <Translator path="threadHistory.sidebar.empty" />
       </Alert>
     );
   }
@@ -102,7 +104,7 @@ export function ThreadList({
 
     toast.promise(apiClient.deleteThread(threadIdToDelete), {
       loading: (
-        <Translator path="components.organisms.threadHistory.sidebar.DeleteThreadButton.deletingChat" />
+        <Translator path="threadHistory.thread.actions.delete.inProgress" />
       ),
       success: () => {
         if (
@@ -119,7 +121,7 @@ export function ThreadList({
           threads: prev?.threads?.filter((t) => t.id !== threadIdToDelete)
         }));
         return (
-          <Translator path="components.organisms.threadHistory.sidebar.DeleteThreadButton.chatDeleted" />
+          <Translator path="threadHistory.thread.actions.delete.success" />
         );
       },
       error: (err) => {
@@ -137,7 +139,7 @@ export function ThreadList({
 
     toast.promise(apiClient.renameThread(threadIdToRename, threadNewName), {
       loading: (
-        <Translator path="components.organisms.threadHistory.sidebar.ThreadList.RenameThreadButton.renamingThread" />
+        <Translator path="threadHistory.thread.actions.rename.inProgress" />
       ),
       success: () => {
         setThreadNewName(undefined);
@@ -159,9 +161,11 @@ export function ThreadList({
           }
           return next;
         });
-        return <div>
-          <Translator path="components.organisms.threadHistory.sidebar.ThreadList.RenameThreadButton.threadRenamed" />
-        </div>;
+        return (
+          <div>
+            <Translator path="threadHistory.thread.actions.rename.success" />
+          </div>
+        );
       },
       error: (err) => {
         if (err instanceof ClientError) {
@@ -175,10 +179,16 @@ export function ThreadList({
 
   const getTimeGroupLabel = (group: string) => {
     const labels = {
-      Today: <Translator path="components.organisms.threadHistory.sidebar.ThreadList.today" />,
-      Yesterday: <Translator path="components.organisms.threadHistory.sidebar.ThreadList.yesterday" />,
-      'Previous 7 days': <Translator path="components.organisms.threadHistory.sidebar.ThreadList.previous7days" />,
-      'Previous 30 days': <Translator path="components.organisms.threadHistory.sidebar.ThreadList.previous30days" />
+      Today: <Translator path="threadHistory.sidebar.timeframes.today" />,
+      Yesterday: (
+        <Translator path="threadHistory.sidebar.timeframes.yesterday" />
+      ),
+      'Previous 7 days': (
+        <Translator path="threadHistory.sidebar.timeframes.previous7days" />
+      ),
+      'Previous 30 days': (
+        <Translator path="threadHistory.sidebar.timeframes.previous30days" />
+      )
     };
     return labels[group as keyof typeof labels] || group;
   };
@@ -192,18 +202,18 @@ export function ThreadList({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>
-              <Translator path="components.organisms.threadHistory.sidebar.ThreadList.DeleteDialog.title" />
+              <Translator path="threadHistory.thread.actions.delete.title" />
             </AlertDialogTitle>
             <AlertDialogDescription>
-              <Translator path="components.organisms.threadHistory.sidebar.ThreadList.DeleteDialog.description" />
+              <Translator path="threadHistory.thread.actions.delete.description" />
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter className="flex-row gap-2 sm:gap-0">
             <AlertDialogCancel className="mt-0">
-              <Translator path="components.organisms.threadHistory.sidebar.ThreadList.DeleteDialog.cancel" />
+              <Translator path="common.actions.cancel" />
             </AlertDialogCancel>
             <AlertDialogAction onClick={handleDeleteThread}>
-              <Translator path="components.organisms.threadHistory.sidebar.ThreadList.DeleteDialog.confirm" />
+              <Translator path="common.actions.confirm" />
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -215,15 +225,15 @@ export function ThreadList({
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
-              <Translator path="components.organisms.threadHistory.sidebar.ThreadList.RenameDialog.title" />
+              <Translator path="threadHistory.thread.actions.rename.title" />
             </DialogTitle>
             <DialogDescription>
-              <Translator path="components.organisms.threadHistory.sidebar.ThreadList.RenameDialog.description" />
+              <Translator path="threadHistory.thread.actions.rename.description" />
             </DialogDescription>
           </DialogHeader>
           <div className="my-6">
             <Label htmlFor="name" className="text-right">
-              <Translator path="components.organisms.threadHistory.sidebar.ThreadList.RenameDialog.nameLabel" />
+              <Translator path="threadHistory.thread.actions.rename.form.name.label" />
             </Label>
             <Input
               id="name"
@@ -232,7 +242,9 @@ export function ThreadList({
               onChange={(e) => {
                 setThreadNewName(e.target.value);
               }}
-              placeholder="Enter new name"
+              placeholder={t(
+                'threadHistory.thread.actions.rename.form.name.placeholder'
+              )}
               autoFocus
             />
           </div>
@@ -242,10 +254,10 @@ export function ThreadList({
               variant="outline"
               onClick={() => setThreadIdToRename(undefined)}
             >
-              <Translator path="components.organisms.threadHistory.sidebar.ThreadList.RenameDialog.cancel" />
+              <Translator path="common.actions.cancel" />
             </Button>
             <Button type="button" onClick={handleRenameThread}>
-              <Translator path="components.organisms.threadHistory.sidebar.ThreadList.RenameDialog.confirm" />
+              <Translator path="common.actions.confirm" />
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -267,7 +279,9 @@ export function ThreadList({
                         isActive={isSelected}
                         className="relative truncate h-9 group/thread"
                       >
-                        {thread.name || (<Translator path="components.organisms.threadHistory.sidebar.ThreadList.untitledConversation" />)}
+                        {thread.name || (
+                          <Translator path="threadHistory.thread.untitled" />
+                        )}
                         <div
                           className={cn(
                             'absolute w-10 bottom-0 top-0 right-0 bg-gradient-to-l from-[hsl(var(--sidebar-background))] to-transparent'

diff --git a/frontend/src/components/LoginForm.tsx b/frontend/src/components/LoginForm.tsx
@@ -80,15 +80,15 @@ export function LoginForm({
     >
       <div className="flex flex-col items-center gap-2 text-center">
         <h1 className="text-2xl font-bold">
-          <Translator path="components.molecules.auth.authLogin.title" />
+          <Translator path="auth.login.title" />
         </h1>
       </div>
 
       {errorState && (
         <Alert variant="error">
           {t([
-            `components.molecules.auth.authLogin.error.${errorState.toLowerCase()}`,
-            `components.molecules.auth.authLogin.error.default`
+            `auth.login.errors.${errorState.toLowerCase()}`,
+            `auth.login.errors.default`
           ])}
         </Alert>
       )}
@@ -98,16 +98,14 @@ export function LoginForm({
           <>
             <div className="grid gap-2">
               <Label htmlFor="email">
-                <Translator path="components.molecules.auth.authLogin.form.email" />
+                <Translator path="auth.login.form.email.label" />
               </Label>
               <Input
                 id="email"
                 autoFocus
                 placeholder="me@example.com"
                 {...register('email', {
-                  required: t(
-                    'components.molecules.auth.authLogin.form.emailRequired'
-                  )
+                  required: t('auth.login.form.email.required')
                 })}
                 className={cn(
                   touchedFields.email && errors.email && 'border-destructive'
@@ -123,17 +121,15 @@ export function LoginForm({
             <div className="grid gap-2">
               <div className="flex items-center justify-between">
                 <Label htmlFor="password">
-                  <Translator path="components.molecules.auth.authLogin.form.password" />
+                  <Translator path="auth.login.form.password.label" />
                 </Label>
               </div>
               <div className="relative">
                 <Input
                   id="password"
                   type={showPassword ? 'text' : 'password'}
                   {...register('password', {
-                    required: t(
-                      'components.molecules.auth.authLogin.form.passwordRequired'
-                    )
+                    required: t('auth.login.form.password.required')
                   })}
                   className={cn(
                     touchedFields.password &&
@@ -163,15 +159,15 @@ export function LoginForm({
             </div>
 
             <Button type="submit" className="w-full" disabled={loading}>
-              <Translator path="components.molecules.auth.authLogin.form.continue" />
+              <Translator path="auth.login.form.actions.signin" />
             </Button>
           </>
         )}
 
         {onPasswordSignIn && oAuthReady ? (
           <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
             <span className="relative z-10 bg-background px-2 text-muted-foreground">
-              <Translator path="components.molecules.auth.authLogin.form.or" />
+              <Translator path="auth.login.form.alternativeText.or" />
             </span>
           </div>
         ) : null}

diff --git a/frontend/src/components/ProviderButton.tsx b/frontend/src/components/ProviderButton.tsx
@@ -69,7 +69,7 @@ const ProviderButton = ({
   return (
     <Button type="button" variant="outline" onClick={onClick}>
       {renderProviderIcon(provider.toLowerCase())}
-      {t('components.molecules.auth.providerButton.continue', {
+      {t('auth.provider.continue', {
         provider: getProviderName(provider)
       })}
     </Button>

diff --git a/frontend/src/components/ReadOnlyThread.tsx b/frontend/src/components/ReadOnlyThread.tsx
@@ -93,7 +93,7 @@ const ReadOnlyThread = ({ id }: Props) => {
   const onFeedbackDeleted = useCallback(
     async (message: IStep, onSuccess: () => void, feedbackId: string) => {
       toast.promise(apiClient.deleteFeedback(feedbackId), {
-        loading: t('components.organisms.chat.Messages.index.updating'),
+        loading: t('chat.messages.feedback.status.updating'),
         success: () => {
           setSteps((prev) =>
             prev.map((step) => {
@@ -108,7 +108,7 @@ const ReadOnlyThread = ({ id }: Props) => {
           );
 
           onSuccess();
-          return t('components.organisms.chat.Messages.index.feedbackUpdated');
+          return t('chat.messages.feedback.status.updated');
         },
         error: (err) => {
           return <span>{err.message}</span>;

diff --git a/frontend/src/components/WaterMark.tsx b/frontend/src/components/WaterMark.tsx
@@ -23,7 +23,7 @@ export default function WaterMark() {
       }}
     >
       <div className="text-xs text-muted-foreground">
-        <Translator path="components.organisms.chat.inputBox.waterMark.text" />
+        <Translator path="chat.watermark" />
       </div>
       <Logo
         style={{

diff --git a/frontend/src/components/chat/MessageComposer/SubmitButton.tsx b/frontend/src/components/chat/MessageComposer/SubmitButton.tsx
@@ -44,7 +44,7 @@ export default function SubmitButton({
           </TooltipTrigger>
           <TooltipContent>
             <p>
-              <Translator path="components.organisms.chat.inputBox.SubmitButton.stopTask" />
+              <Translator path="chat.input.actions.stop" />
             </p>
           </TooltipContent>
         </Tooltip>
@@ -63,7 +63,7 @@ export default function SubmitButton({
           </TooltipTrigger>
           <TooltipContent>
             <p>
-              <Translator path="components.organisms.chat.inputBox.SubmitButton.sendMessage" />
+              <Translator path="chat.input.actions.send" />
             </p>
           </TooltipContent>
         </Tooltip>

diff --git a/frontend/src/components/chat/MessageComposer/UploadButton.tsx b/frontend/src/components/chat/MessageComposer/UploadButton.tsx
@@ -1,5 +1,6 @@
 import { FileSpec, useConfig } from '@chainlit/react-client';
 
+import { Translator } from '@/components/i18n';
 import { PaperClip } from '@/components/icons/PaperClip';
 import { Button } from '@/components/ui/button';
 import {
@@ -60,7 +61,9 @@ export const UploadButton = ({
           </span>
         </TooltipTrigger>
         <TooltipContent>
-          <p>Attach files</p>
+          <p>
+            <Translator path="chat.input.actions.attachFiles" />
+          </p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

diff --git a/frontend/src/components/chat/MessageComposer/VoiceButton.tsx b/frontend/src/components/chat/MessageComposer/VoiceButton.tsx
@@ -78,13 +78,13 @@ const VoiceButton = ({ disabled }: Props) => {
               <Translator
                 path={
                   audioConnection === 'on'
-                    ? 'components.organisms.chat.inputBox.speechButton.stop'
+                    ? 'chat.speech.stop'
                     : audioConnection === 'off'
-                    ? 'components.organisms.chat.inputBox.speechButton.start'
-                    : 'components.organisms.chat.inputBox.speechButton.loading'
+                    ? 'chat.speech.start'
+                    : 'chat.speech.connecting'
                 }
                 suffix=" (P)"
-              />{' '}
+              />
             </p>
           </TooltipContent>
         </Tooltip>

diff --git a/frontend/src/components/chat/MessageComposer/index.tsx b/frontend/src/components/chat/MessageComposer/index.tsx
@@ -156,7 +156,7 @@ export default function MessageComposer({
         onChange={setValue}
         onPaste={onPaste}
         onEnter={submit}
-        placeholder={t('components.organisms.chat.inputBox.input.placeholder')}
+        placeholder={t('chat.input.placeholder')}
       />
       <div className="flex items-center justify-between">
         <div className="flex items-center -ml-1.5">