From d1981967b24413bb775bf3950dc06d8021911ede Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 7 Jan 2025 20:28:59 +0530
Subject: [PATCH] (fix:locales) sync conversation

---
 .../src/conversation/ConversationBubble.tsx   | 36 ++++++++++++-------
 frontend/src/locale/en.json                   | 16 +++++++++
 frontend/src/locale/jp.json                   | 34 +++++++++++++++++-
 frontend/src/locale/zh-TW.json                |  2 +-
 frontend/src/settings/index.tsx               |  4 +--
 5 files changed, 75 insertions(+), 17 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index d88b249e6..e410b7c57 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -8,6 +8,7 @@ import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
+import { useTranslation } from 'react-i18next';
 
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 import Dislike from '../assets/dislike.svg?react';
@@ -62,6 +63,7 @@ const ConversationBubble = forwardRef<
   },
   ref,
 ) {
+  const { t } = useTranslation();
   // const bubbleRef = useRef<HTMLDivElement | null>(null);
   const chunks = useSelector(selectChunks);
   const selectedDocs = useSelector(selectSelectedDocs);
@@ -113,13 +115,13 @@ const ConversationBubble = forwardRef<
           {isEditClicked && (
             <div ref={editableQueryRef} className="w-[75%] flex flex-col">
               <textarea
-                placeholder="Type the updated query..."
+                placeholder={t('conversation.edit.placeholder')}
                 onChange={(e) => {
                   setEditInputBox(e.target.value);
                 }}
                 rows={1}
                 value={editInputBox}
-                className="ml-2 mr-12 text-[15px] resize-y h-12 min-h-max rounded-3xl p-3  no-scrollbar leading-relaxed dark:border-[0.5px] dark:border-white dark:bg-raisin-black dark:text-white px-[18px] border-[1.5px] border-black"
+                className="ml-2 mr-12 text-[15px] resize-y h-12 min-h-max rounded-3xl p-3 no-scrollbar leading-relaxed dark:border-[0.5px] dark:border-white dark:bg-raisin-black dark:text-white px-[18px] border-[1.5px] border-black"
               />
               <div
                 className={`flex flex-row-reverse justify-end gap-1 mt-3 text-sm font-medium`}
@@ -185,12 +187,14 @@ const ConversationBubble = forwardRef<
                 avatar={
                   <img
                     src={Sources}
-                    alt="Sources"
+                    alt={t('conversation.sources.title')}
                     className="h-full w-full object-fill"
                   />
                 }
               />
-              <p className="text-base font-semibold">Sources</p>
+              <p className="text-base font-semibold">
+                {t('conversation.sources.title')}
+              </p>
             </div>
             <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
               {Array.from({ length: 4 }).map((_, index) => (
@@ -217,12 +221,14 @@ const ConversationBubble = forwardRef<
                   avatar={
                     <img
                       src={Sources}
-                      alt="Sources"
+                      alt={t('conversation.sources.title')}
                       className="h-full w-full object-fill"
                     />
                   }
                 />
-                <p className="text-base font-semibold">Sources</p>
+                <p className="text-base font-semibold">
+                  {t('conversation.sources.title')}
+                </p>
               </div>
               <div className="fade-in ml-3 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
                 <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
@@ -289,9 +295,11 @@ const ConversationBubble = forwardRef<
                       className="flex h-28 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
                       onClick={() => setIsSidebarOpen(true)}
                     >
-                      <p className="ellipsis-text h-22 text-xs">{`View ${
-                        sources?.length ? sources.length - 3 : 0
-                      } more`}</p>
+                      <p className="ellipsis-text h-22 text-xs">
+                        {t('conversation.sources.view_more', {
+                          count: sources?.length ? sources.length - 3 : 0,
+                        })}
+                      </p>
                     </div>
                   )}
                 </div>
@@ -306,12 +314,14 @@ const ConversationBubble = forwardRef<
               avatar={
                 <img
                   src={DocsGPT3}
-                  alt="DocsGPT"
+                  alt={t('conversation.answer')}
                   className="h-full w-full object-cover"
                 />
               }
             />
-            <p className="text-base font-semibold">Answer</p>
+            <p className="text-base font-semibold">
+              {t('conversation.answer')}
+            </p>
           </div>
           <div
             className={`fade-in-bubble ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
@@ -419,7 +429,7 @@ const ConversationBubble = forwardRef<
             ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
           >
             <div>
-              <SpeakButton text={message} /> {/* Add SpeakButton here */}
+              <SpeakButton text={message} />
             </div>
           </div>
           {type === 'ERROR' && (
@@ -557,7 +567,7 @@ function AllSources(sources: AllSourcesProps) {
               {source.source && source.source !== 'local' ? (
                 <img
                   src={Link}
-                  alt="Link"
+                  alt={'Link'}
                   className="h-3 w-3 cursor-pointer object-fill"
                   onClick={() =>
                     window.open(source.source, '_blank', 'noopener, noreferrer')
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 730b6d3d4..070deba6e 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -160,5 +160,21 @@
     "delete": "Delete",
     "rename": "Rename",
     "deleteWarning": "Are you sure you want to delete this conversation?"
+  },
+  "conversation": {
+    "copy": "Copy",
+    "copied": "Copied",
+    "speak": "Speak",
+    "answer": "Answer",
+    "edit": {
+      "placeholder": "Type the updated query..."
+    },
+    "sources": {
+      "title": "Sources",
+      "text": "Source Text",
+      "link": "Source Link",
+      "view_more": "{{count}} more sources"
+    },
+    "retry": "Retry"
   }
 }
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index 29343a55f..a9052055e 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -58,7 +58,19 @@
       "date": "ベクトル日付",
       "type": "タイプ",
       "tokenUsage": "トークン使用量",
-      "noData": "既存のドキュメントはありません"
+      "noData": "既存のドキュメントはありません",
+      "searchPlaceholder": "検索...",
+      "addNew": "新規追加",
+      "addNewTitle": "新規ドキュメントを追加",
+      "preLoaded": "プリロード済み",
+      "private": "プライベート",
+      "sync": "同期",
+      "syncFrequency": {
+        "never": "なし",
+        "daily": "毎日",
+        "weekly": "毎週",
+        "monthly": "��月"
+      }
     },
     "apiKeys": {
       "label": "チャットボット",
@@ -148,5 +160,25 @@
     "delete": "削除",
     "rename": "名前変更",
     "deleteWarning": "この会話を削除してもよろしいですか？"
+  },
+  "conversation": {
+    "copy": "コピー",
+    "copied": "コピーしました",
+    "speak": "スピーク",
+    "feedback": {
+      "like": "いいね",
+      "dislike": "よくない"
+    },
+    "answer": "回答",
+    "edit": {
+      "placeholder": "更新されたクエリを入力してください..."
+    },
+    "sources": {
+      "title": "ソース",
+      "text": "ソーステキスト",
+      "link": "ソースリンク",
+      "view_more": "さらに{{count}}個のソース"
+    },
+    "retry": "再試行"
   }
 }
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index 952a4df1e..f3e185724 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -76,7 +76,7 @@
       "filterByChatbot": "按聊天機器人篩選",
       "none": "無",
       "selectChatbotPlaceholder": "選擇聊天機器人",
-      "apiGeneratedConversations": "API生成/聊天機器人對話"      
+      "apiGeneratedConversations": "API生成/聊天機器人對話"
     },
     "tools": {
       "label": "工具"
diff --git a/frontend/src/settings/index.tsx b/frontend/src/settings/index.tsx
index 89f29a29c..918e4d151 100644
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -91,8 +91,8 @@ export default function Settings() {
       case 'Widgets':
         return (
           <Widgets
-            widgetScreenshot={widgetScreenshot} // Add this line
-            onWidgetScreenshotChange={updateWidgetScreenshot} // Add this line
+            widgetScreenshot={widgetScreenshot}
+            onWidgetScreenshotChange={updateWidgetScreenshot}
           />
         );
       case t('settings.apiKeys.label'):