feat: Add i18n support for Chinese language (#142)

* feat: Add i18n support for Chinese language

* fix: locale not working in Docker environment
This commit is contained in:
Jungley
2023-03-25 23:42:48 +08:00
committed by GitHub
parent 932853f1ba
commit 92eab6c634
26 changed files with 320 additions and 40 deletions
+4 -1
View File
@@ -1,13 +1,16 @@
import "@/styles/globals.css";
import { appWithTranslation } from "next-i18next";
import type { AppProps } from "next/app";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export default function App({ Component, pageProps }: AppProps<{}>) {
function App({ Component, pageProps }: AppProps<{}>) {
return (
<main className={inter.className}>
<Component {...pageProps} />
</main>
);
}
export default appWithTranslation(App);
+11 -3
View File
@@ -1,8 +1,16 @@
import { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript, DocumentProps } from 'next/document'
import i18nextConfig from '../next-i18next.config'
export default function Document() {
type Props = DocumentProps & {
// add custom document props
}
export default function Document(props: Props) {
const currentLocale =
props.__NEXT_DATA__.locale ??
i18nextConfig.i18n.defaultLocale
return (
<Html lang="en">
<Html lang={currentLocale}>
<Head>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-title" content="Chatbot UI"></meta>
+12 -3
View File
@@ -11,12 +11,15 @@ import { IconArrowBarLeft, IconArrowBarRight } from "@tabler/icons-react";
import { GetServerSideProps } from "next";
import Head from "next/head";
import { useEffect, useRef, useState } from "react";
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from "next-i18next";
interface HomeProps {
serverSideApiKeyIsSet: boolean;
}
const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
const { t } = useTranslation('chat')
const [folders, setFolders] = useState<ChatFolder[]>([]);
const [conversations, setConversations] = useState<Conversation[]>([]);
const [selectedConversation, setSelectedConversation] = useState<Conversation>();
@@ -282,7 +285,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
const newConversation: Conversation = {
id: lastConversation ? lastConversation.id + 1 : 1,
name: `Conversation ${lastConversation ? lastConversation.id + 1 : 1}`,
name: `${t('Conversation')} ${lastConversation ? lastConversation.id + 1 : 1}`,
messages: [],
model: OpenAIModels[OpenAIModelID.GPT_3_5],
prompt: DEFAULT_SYSTEM_PROMPT,
@@ -532,10 +535,16 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
};
export default Home;
export const getServerSideProps: GetServerSideProps = async () => {
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
return {
props: {
serverSideApiKeyIsSet: !!process.env.OPENAI_API_KEY
serverSideApiKeyIsSet: !!process.env.OPENAI_API_KEY,
...(await serverSideTranslations(locale ?? 'en', [
'common',
'chat',
'sidebar',
'markdown',
])),
}
};
};