') const newAnswer = new ConversationItemData( 'answer', - '
Waiting for response...
', + `${t('Waiting for response...')}
`, ) setConversationItemData([...conversationItemData, newQuestion, newAnswer]) setIsReady(false) diff --git a/src/components/ConversationItem/index.jsx b/src/components/ConversationItem/index.jsx index 7bfd5bd..384f237 100644 --- a/src/components/ConversationItem/index.jsx +++ b/src/components/ConversationItem/index.jsx @@ -4,8 +4,10 @@ import { ChevronDownIcon, LinkExternalIcon, XCircleIcon } from '@primer/octicons import CopyButton from '../CopyButton' import PropTypes from 'prop-types' import MarkdownRender from '../MarkdownRender/markdown.jsx' +import { useTranslation } from 'react-i18next' export function ConversationItem({ type, content, session, done, port }) { + const { t } = useTranslation() const [collapsed, setCollapsed] = useState(false) switch (type) { @@ -13,15 +15,23 @@ export function ConversationItem({ type, content, session, done, port }) { return (
-
content} size={14} />
{!collapsed ? (
- setCollapsed(true)}>
+ setCollapsed(true)}
+ >
You:
+{t('You:')}
- {session && session.aiName ? `${session.aiName}:` : 'Loading...'} + {session && session.aiName ? `${t(session.aiName)}:` : t('Loading...')}
{!done && (
@@ -46,7 +56,7 @@ export function ConversationItem({ type, content, session, done, port }) {
port.postMessage({ stop: true })
}}
>
- Stop
+ {t('Stop')}
)}
{done && session && session.conversationId && (
@@ -57,7 +67,7 @@ export function ConversationItem({ type, content, session, done, port }) {
)}
{session && session.conversationId && (
content} size={14} />}
{!collapsed ? (
- setCollapsed(true)}>
+ setCollapsed(true)}
+ >
-
content} size={14} />
{!collapsed ? (
- setCollapsed(true)}>
+ setCollapsed(true)}
+ >
Error:
+{t('Error:')}
-
+
{
const p = getClientPosition(props.container)
props.container.style.position = 'fixed'
diff --git a/src/components/InputBox/index.jsx b/src/components/InputBox/index.jsx
index 79b5fdc..b49c791 100644
--- a/src/components/InputBox/index.jsx
+++ b/src/components/InputBox/index.jsx
@@ -1,8 +1,10 @@
import { useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import { updateRefHeight } from '../../utils'
+import { useTranslation } from 'react-i18next'
export function InputBox({ onSubmit, enabled }) {
+ const { t } = useTranslation()
const [value, setValue] = useState('')
const inputRef = useRef(null)
@@ -28,8 +30,8 @@ export function InputBox({ onSubmit, enabled }) {
className="interact-input"
placeholder={
enabled
- ? 'Type your question here\nEnter to send, shift + enter to break line'
- : 'Wait for the answer to finish and then continue here'
+ ? t('Type your question here\nEnter to send, shift + enter to break line')
+ : t('Wait for the answer to finish and then continue here')
}
value={value}
onChange={(e) => setValue(e.target.value)}
diff --git a/src/config/index.mjs b/src/config/index.mjs
index 30cbd0d..383090e 100644
--- a/src/config/index.mjs
+++ b/src/config/index.mjs
@@ -63,7 +63,7 @@ export const defaultConfig = {
apiKey: '',
/** @type {keyof ModelMode}*/
modelMode: 'balanced',
- preferredLanguage: navigator.language.substring(0, 2),
+ preferredLanguage: getNavigatorLanguage(),
insertAtTop: isMobile(),
lockWhenAnswer: false,
customModelApiUrl: 'http://localhost:8000/chat/completions',
@@ -98,7 +98,7 @@ export const defaultConfig = {
// unchangeable
- userLanguage: navigator.language.substring(0, 2),
+ userLanguage: getNavigatorLanguage(),
selectionTools: [
'translate',
'translateBidi',
@@ -132,6 +132,12 @@ export const defaultConfig = {
],
}
+export function getNavigatorLanguage() {
+ const l = navigator.language.toLowerCase()
+ if (['zh-hk', 'zh-mo', 'zh-tw', 'zh-cht', 'zh-hant'].includes(l)) return 'zhHant'
+ return navigator.language.substring(0, 2)
+}
+
export function isUsingApiKey(config) {
return (
gptApiModelKeys.includes(config.modelName) || chatgptApiModelKeys.includes(config.modelName)
@@ -146,6 +152,12 @@ export function isUsingCustomModel(config) {
return customApiModelKeys.includes(config.modelName)
}
+export async function getPreferredLanguageKey() {
+ const config = await getUserConfig()
+ if (config.preferredLanguage === 'auto') return config.userLanguage
+ return config.preferredLanguage
+}
+
/**
* get user config from local storage
* @returns {Promise}
diff --git a/src/config/language.mjs b/src/config/language.mjs
index 8e9d03c..f39e053 100644
--- a/src/config/language.mjs
+++ b/src/config/language.mjs
@@ -2,6 +2,11 @@ import { languages } from 'countries-list'
import { defaultConfig, getUserConfig } from './index.mjs'
export const languageList = { auto: { name: 'Auto', native: 'Auto' }, ...languages }
+languageList.zh.name = 'Chinese (Simplified)'
+languageList.zh.native = '简体中文'
+languageList.zhHant = { ...languageList.zh }
+languageList.zhHant.name = 'Chinese (Traditional)'
+languageList.zhHant.native = '正體中文'
export async function getUserLanguage() {
return languageList[defaultConfig.userLanguage].name
diff --git a/src/content-script/index.jsx b/src/content-script/index.jsx
index 4204611..09c6356 100644
--- a/src/content-script/index.jsx
+++ b/src/content-script/index.jsx
@@ -5,7 +5,12 @@ import DecisionCard from '../components/DecisionCard'
import { config as siteConfig } from './site-adapters'
import { config as toolsConfig } from './selection-tools'
import { config as menuConfig } from './menu-tools'
-import { clearOldAccessToken, getUserConfig, setAccessToken } from '../config/index.mjs'
+import {
+ clearOldAccessToken,
+ getPreferredLanguageKey,
+ getUserConfig,
+ setAccessToken,
+} from '../config/index.mjs'
import {
createElementAtPosition,
cropText,
@@ -17,6 +22,8 @@ import {
import FloatingToolbar from '../components/FloatingToolbar'
import Browser from 'webextension-polyfill'
import { getPreferredLanguage } from '../config/language.mjs'
+import '../_locales/i18n'
+import { changeLanguage } from 'i18next'
/**
* @param {SiteConfig} siteConfig
@@ -287,6 +294,17 @@ let userConfig
async function run() {
userConfig = await getUserConfig()
+ await getPreferredLanguageKey().then((lang) => {
+ changeLanguage(lang)
+ })
+ Browser.runtime.onMessage.addListener(async (message) => {
+ console.log(message)
+ if (message.type === 'CHANGE_LANG') {
+ const data = message.data
+ changeLanguage(data.lang)
+ }
+ })
+
if (isSafari()) await prepareForSafari()
prepareForSelectionTools()
prepareForSelectionToolsTouch()
diff --git a/src/popup/Popup.jsx b/src/popup/Popup.jsx
index e61a40b..f13d60a 100644
--- a/src/popup/Popup.jsx
+++ b/src/popup/Popup.jsx
@@ -2,6 +2,7 @@ import '@picocss/pico'
import { useEffect, useState } from 'react'
import {
defaultConfig,
+ getPreferredLanguageKey,
getUserConfig,
isUsingApiKey,
isUsingCustomModel,
@@ -24,8 +25,10 @@ import bugmeacoffee from './donation/bugmeacoffee.png'
import { useWindowTheme } from '../hooks/use-window-theme.mjs'
import { languageList } from '../config/language.mjs'
import { isFirefox, isSafari } from '../utils/index.mjs'
+import { useTranslation } from 'react-i18next'
function GeneralPart({ config, updateConfig }) {
+ const { t, i18n } = useTranslation()
const [balance, setBalance] = useState(null)
const getBalance = async () => {
@@ -41,7 +44,7 @@ function GeneralPart({ config, updateConfig }) {
return (
<>
@@ -227,10 +250,12 @@ GeneralPart.propTypes = { } function AdvancedPart({ config, updateConfig }) { + const { t } = useTranslation() + return ( <>
))} @@ -383,6 +411,8 @@ SiteAdapters.propTypes = { } function Donation() { + const { t } = useTranslation() + return ( @@ -403,15 +433,17 @@ function Donation() { // eslint-disable-next-line react/prop-types function Footer({ currentVersion, latestVersion }) { + const { t } = useTranslation() + return (
@@ -227,10 +250,12 @@ GeneralPart.propTypes = { } function AdvancedPart({ config, updateConfig }) { + const { t } = useTranslation() + return ( <>
))} @@ -383,6 +411,8 @@ SiteAdapters.propTypes = { } function Donation() { + const { t } = useTranslation() + return ( @@ -403,15 +433,17 @@ function Donation() { // eslint-disable-next-line react/prop-types function Footer({ currentVersion, latestVersion }) { + const { t } = useTranslation() + return (
- Current Version: {currentVersion}{' '}
+ {`${t('Current Version')}: ${currentVersion} `}
{currentVersion === latestVersion ? (
- '(Latest)'
+ `(${t('Latest')})`
) : (
<>
- (Latest:{' '}
+ ({`${t('Latest')}: `}
- Help | Changelog
+ {t('Help | Changelog ')}
@@ -438,6 +470,7 @@ function Footer({ currentVersion, latestVersion }) {
}
function Popup() {
+ const { t, i18n } = useTranslation()
const [config, setConfig] = useState(defaultConfig)
const [currentVersion, setCurrentVersion] = useState('')
const [latestVersion, setLatestVersion] = useState('')
@@ -449,6 +482,9 @@ function Popup() {
}
useEffect(() => {
+ getPreferredLanguageKey().then((lang) => {
+ i18n.changeLanguage(lang)
+ })
getUserConfig().then((config) => {
setConfig(config)
setCurrentVersion(Browser.runtime.getManifest().version.replace('v', ''))
@@ -469,11 +505,11 @@ function Popup() {