feat(share) translate

frontend/src/conversation/ConversationTile.tsx

@@ -13,6 +13,7 @@ import threeDots from '../assets/three-dots.svg';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { ActiveState } from '../models/misc';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
+import { useTranslation } from 'react-i18next';
 interface ConversationProps {
   name: string;
   id: string;
@@ -40,6 +41,7 @@ export default function ConversationTile({
   const [deleteModalState, setDeleteModalState] =
     useState<ActiveState>('INACTIVE');
   const menuRef = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation();
   useEffect(() => {
     setConversationsName(conversation.name);
   }, [conversation.name]);
@@ -159,7 +161,7 @@ export default function ConversationTile({
                   className="cursor-pointer hover:opacity-50"
                   id={`img-${conversation.id}`}
                 />
-                <span>Share</span>
+                <span>{t('convTile.share')}</span>
               </button>
               <button
                 onClick={(event) => {
@@ -175,7 +177,7 @@ export default function ConversationTile({
                   className="cursor-pointer hover:opacity-50"
                   id={`img-${conversation.id}`}
                 />
-                <span>Rename</span>
+                <span>{t('convTile.rename')}</span>
               </button>
               <button
                 onClick={(event) => {
@@ -191,18 +193,18 @@ export default function ConversationTile({
                   height={24}
                   className="cursor-pointer hover:opacity-50"
                 />
-                <span>Delete</span>
+                <span>{t('convTile.delete')}</span>
               </button>
             </div>
           )}
         </div>
       )}
       <ConfirmationModal
-        message={`Are you sure you want to delete this conversation?`}
+        message={t('convTile.deleteWarning')}
         modalState={deleteModalState}
         setModalState={setDeleteModalState}
         handleSubmit={() => onDeleteConversation(conversation.id)}
-        submitLabel="Delete"
+        submitLabel={t('convTile.delete')}
       />
       {isShareModalOpen && conversationId && (
         <ShareConversationModal

frontend/src/conversation/SharedConversation.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { Query } from './conversationModels';
+import { useTranslation } from 'react-i18next';
 import ConversationBubble from './ConversationBubble';
 import { Fragment } from 'react';
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
@@ -12,7 +13,7 @@ const SharedConversation = () => {
   const [queries, setQueries] = useState<Query[]>([]);
   const [title, setTitle] = useState('');
   const [date, setDate] = useState('');
-
+  const { t } = useTranslation();
   function formatISODate(isoDateStr: string) {
     const date = new Date(isoDateStr);
 
@@ -97,7 +98,7 @@ const SharedConversation = () => {
                   {title}
                 </h1>
                 <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
-                  Created with{' '}
+                  {t('sharedConv.subtitle')}{' '}
                   <a href="/" className="text-[#007DFF]">
                     DocsGPT
                   </a>
@@ -131,11 +132,10 @@ const SharedConversation = () => {
             onClick={() => navigate('/')}
             className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe"
           >
-            Get Started with DocsGPT
+            {t('sharedConv.button')}
           </button>
           <span className="hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
-            This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
-            questions.
+            {t('sharedConv.meta')}
           </span>
         </div>
       </div>

frontend/src/locale/en.json

@@ -103,6 +103,22 @@
     "deleteConv": {
       "confirm": "Are you sure you want to delete all the conversations?",
       "delete": "Delete"
+    },
+    "shareConv": {
+      "label": "Create a public page to share",
+      "note": "Source document, personal information and further conversation will remain private",
+      "create": "Create"
     }
+  },
+  "sharedConv": {
+    "subtitle": "Created with",
+    "button": "Get Started with DocsGPT",
+    "meta": "This is a chatbot that uses the GPT-3, Faiss and LangChain to answer questions."
+  },
+  "convTile": {
+    "share": "Share",
+    "delete": "Delete",
+    "rename": "Rename",
+    "deleteWarning": "Are you sure you want to delete this conversation?"
   }
 }

frontend/src/locale/es.json

@@ -103,6 +103,22 @@
     "deleteConv": {
       "confirm": "¿Está seguro de que desea eliminar todas las conversaciones?",
       "delete": "Eliminar"
+    },
+    "shareConv": {
+      "label": "Crear una página pública para compartir",
+      "note": "El documento original, la información personal y las conversaciones posteriores permanecerán privadas",
+      "create": "Crear"
     }
+  },
+  "sharedConv": {
+    "subtitle": "Creado con",
+    "button": "Comienza con DocsGPT",
+    "meta": "Este es un chatbot que utiliza GPT-3, Faiss y LangChain para responder preguntas."
+  },
+  "convTile": {
+    "share": "Compartir",
+    "delete": "Eliminar",
+    "rename": "Renombrar",
+    "deleteWarning": "¿Está seguro de que desea eliminar esta conversación?"
   }
 }

frontend/src/locale/jp.json

@@ -103,6 +103,22 @@
     "deleteConv": {
       "confirm": "すべての会話を削除してもよろしいですか?",
       "delete": "削除"
+    },
+    "shareConv": {
+      "label": "共有ページを作成して共有する",
+      "note": "ソースドキュメント、個人情報、および以降の会話は非公開のままになります",
+      "create": "作成"
     }
+  },
+  "sharedConv": {
+    "subtitle": "作成者",
+    "button": "DocsGPT を始める",
+    "meta": "GPT-3、Faiss、および LangChain を使用して質問に答えるチャットボットです"
+  },
+  "convTile": {
+    "share": "共有",
+    "delete": "削除",
+    "rename": "名前変更",
+    "deleteWarning": "この会話を削除してもよろしいですか？"
   }
 }

frontend/src/locale/zh.json

@@ -103,6 +103,22 @@
     "deleteConv": {
       "confirm": "您确定要删除所有对话吗？",
       "delete": "删除"
+    },
+    "shareConv": {
+      "label": "创建用于分享的公共页面",
+      "note": "源文档、个人信息和后续对话将保持私密",
+      "create": "创建"
     }
+  },
+  "sharedConv": {
+    "subtitle": "使用创建",
+    "button": "开始使用 DocsGPT",
+    "meta": "这是一个使用 GPT-3、Faiss 和 LangChain 来回答问题的聊天机器人。"
+  },
+  "convTile": {
+    "share": "分享",
+    "delete": "删除",
+    "rename": "重命名",
+    "deleteWarning": "您确定要删除此对话吗？"
   }
 }

frontend/src/modals/ShareConversationModal.tsx

@@ -51,11 +51,8 @@ export const ShareConversationModal = ({
           <img className="filter dark:invert" src={Exit} />
         </button>
         <div className="flex flex-col gap-2">
-          <h2 className="text-xl font-medium">Create a public page to share</h2>
-          <p className="text-sm">
-            Source document, personal information and further conversation will
-            remain private
-          </p>
+          <h2 className="text-xl font-medium">{t('modals.shareConv.label')}</h2>
+          <p className="text-sm">{t('modals.shareConv.note')}</p>
           <div className="flex items-baseline justify-between gap-2">
             <span className="no-scrollbar w-full overflow-x-auto whitespace-nowrap rounded-full border-2 p-3 shadow-inner">{`${domain}/share/${
               identifier ?? '....'
@@ -76,7 +73,7 @@ export const ShareConversationModal = ({
                   shareCoversationPublicly(false);
                 }}
               >
-                Create
+                {t('modals.shareConv.create')}
                 {status === 'loading' && (
                   <img
                     src={Spinner}