feat: add for i18n

package.json

@@ -63,6 +63,7 @@
     "@tiptap/suggestion": "^2.1.12",
     "ai": "^2.2.25",
     "handlebars": "^4.7.8",
+    "i18next": "^23.7.6",
     "markdown-it": "^13.0.2",
     "next": "latest",
     "openai": "^4.20.0",
@@ -71,6 +72,7 @@
     "prosemirror-view": "^1.32.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "^13.5.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "tippy.js": "^6.3.7"
   },

src/components/editor/sidebar.tsx

@@ -1,20 +1,23 @@
 import React from 'react'
 import * as Accordion from '@radix-ui/react-accordion'
 import { ChevronDownIcon } from '@radix-ui/react-icons'
+import { useTranslation } from "react-i18next";
 
 export const Sidebar: React.FC<any> = ({ editor }) => {
+	const { t, i18n } = useTranslation();
+
 	return <aside className={'fixed top-0 right-0 z-40 w-128 h-screen'} aria-label="Sidebar">
 		<div className={'h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800'}>
-			<Accordion.Root className={'AccordionRoot'} type="multiple" defaultValue={['item-1', 'item-2', 'item-3', 'item-4']}>
+			<Accordion.Root className={'AccordionRoot'} type="multiple" defaultValue={['item-1', 'item-2', 'item-3']}>
 				<Accordion.Item className={'AccordionItem'} value="item-6">
-					<AccordionTrigger>Custom Related Resource Link</AccordionTrigger>
+					<AccordionTrigger>{t('Custom Related Resource Link')}</AccordionTrigger>
 					<AccordionContent>
 						<input className={'w-full bg-white'}/>
 					</AccordionContent>
 				</Accordion.Item>
 
 				<Accordion.Item className={'AccordionItem'} value="item-5">
-					<AccordionTrigger>PreContext</AccordionTrigger>
+					<AccordionTrigger>{t('Article Context')}</AccordionTrigger>
 					<AccordionContent>
 						<textarea
 							className={'w-full'}
@@ -24,30 +27,30 @@ export const Sidebar: React.FC<any> = ({ editor }) => {
 				</Accordion.Item>
 
 				<Accordion.Item className={'AccordionItem'} value="item-1">
-					<AccordionTrigger>Grammarly</AccordionTrigger>
+					<AccordionTrigger>{t('Grammarly')}</AccordionTrigger>
 					<AccordionContent>
 						TODO: use some model to check grammar
 					</AccordionContent>
 				</Accordion.Item>
 
 				<Accordion.Item className={'AccordionItem'} value="item-2">
-					<AccordionTrigger>Text Prediction</AccordionTrigger>
+					<AccordionTrigger>{t('Text Prediction')}</AccordionTrigger>
 					<AccordionContent>
 						TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to predict text
 					</AccordionContent>
 				</Accordion.Item>
 
 				<Accordion.Item className={'AccordionItem'} value="item-3">
-					<AccordionTrigger>Similarity</AccordionTrigger>
+					<AccordionTrigger>{t('Text Similarity')}</AccordionTrigger>
 					<Accordion.Content className={'AccordionContent'}>
 						<div className={'AccordionContentText'}>
 							TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to calculate similarity
 						</div>
 					</Accordion.Content>
 				</Accordion.Item>
 
-				<Accordion.Item className={'AccordionItem'} value="item-3">
-					<AccordionTrigger>Web Search</AccordionTrigger>
+				<Accordion.Item className={'AccordionItem'} value="item-4">
+					<AccordionTrigger>{t('Web Search')}</AccordionTrigger>
 					<Accordion.Content className={'AccordionContent'}>
 						<div className={'AccordionContentText'}>
 							TODO

src/i18n/i18n.js

@@ -0,0 +1,43 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+const resources = {
+  en: {
+    translation: {
+      'Custom Related Resource Link': 'Custom Related Resource Link',
+      'Article Context': 'Article Context',
+      'Grammarly': 'Grammarly',
+      'Text Prediction': 'Text Prediction',
+      'Text Similarity': 'Text Similarity',
+      'Web Search': 'Web Search',
+    }
+  },
+  zh: {
+    translation: {
+      'Custom Related Resource Link': '自定义相关资源链接',
+      'Article Context': '文章背景',
+      'Grammarly': '语法检查',
+      'Text Prediction': '文本预测',
+      'Text Similarity': '文本相似度',
+      'Web Search': '网页搜索',
+    }
+  }
+}
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    // lng: 'zh', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    }
+  })
+
+export default i18n

src/pages/index.tsx

@@ -3,6 +3,7 @@ import Head from 'next/head'
 import styles from '../../styles/Home.module.css'
 import LiveEditor from '@/components/editor/live-editor'
 import { Settings } from '@/components/settings'
+import '@/i18n/i18n';
 
 export default function Home() {
   return (