feat: i18n

Add simplified Chinese translation

app.vue

@@ -1,11 +1,12 @@
 <script setup>
+const { $i18n } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
 const colorMode = useColorMode()
 const drawer = ref(null)
 const themes = ref([
-  { title: 'Light', value: 'light' },
+  { title: $i18n.t('lightMode'), value: 'light' },
-  { title: 'Dark', value: 'dark' },
+  { title: $i18n.t('darkMode'), value: 'dark' },
-  { title: 'System', value: 'system'}
+  { title: $i18n.t('followSystem'), value: 'system'}
 ])
 const setTheme = (theme) => {
   colorMode.preference = theme
@@ -14,14 +15,10 @@ const feedback = () => {
   window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
 }
 
-const { locale, locales } = useI18n()
+const { locale, locales, setLocale } = useI18n()
 const setLang = (lang) => {
-  locale.value = lang
+  setLocale(lang)
 }
-console.log('------------')
-console.log(locale.value)
-console.log(useBrowserLocale())
-console.log(navigator.languages)
 </script>
 
 <template>
@@ -31,7 +28,6 @@ console.log(navigator.languages)
     <v-navigation-drawer
         v-model="drawer"
     >
-      {{ $t('hello') }}
       <v-list>
         <ModelDialog/>
       </v-list>
@@ -48,7 +44,7 @@ console.log(navigator.languages)
                   v-bind="props"
                   rounded="xl"
                   :prepend-icon="$colorMode.value === 'light' ? 'light_mode' : 'dark_mode'"
-                  title="Theme mode"
+                  :title="$t('themeMode')"
               ></v-list-item>
             </template>
             <v-list
@@ -64,33 +60,12 @@ console.log(navigator.languages)
             </v-list>
           </v-menu>
 
-          <v-menu
+          <SettingsLanguages/>
-          >
-            <template v-slot:activator="{ props }">
-              <v-list-item
-                  v-bind="props"
-                  rounded="xl"
-                  prepend-icon="language"
-                  title="Language"
-              ></v-list-item>
-            </template>
-            <v-list
-                bg-color="white"
-            >
-              <v-list-item
-                  v-for="locale in locales"
-                  :key="locale.code"
-                  @click="setLang(locale.code)"
-              >
-                <v-list-item-title>{{ locale.name }}</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
 
           <v-list-item
               rounded="xl"
               prepend-icon="help_outline"
-              title="Feedback"
+              :title="$t('feedback')"
               @click="feedback"
           ></v-list-item>
         </v-list>
@@ -120,7 +95,7 @@ console.log(navigator.languages)
           <v-list-item
               @click="feedback"
           >
-            <v-list-item-title>Feedback</v-list-item-title>
+            <v-list-item-title>{{ $t('feedback') }}</v-list-item-title>
           </v-list-item>
         </v-list>
       </v-menu>

components/ApiKeyDialog.vue

@@ -10,17 +10,17 @@
           prepend-icon="vpn_key"
           color="primary"
       >
-        Set OpenAI Api Key
+        {{ $t('setApiKey') }}
       </v-list-item>
     </template>
     <v-card>
       <v-card-title>
-        <span class="text-h5">OpenAI Api Key</span>
+        <span class="text-h5">{{ $t('openAIApiKey') }}</span>
       </v-card-title>
       <v-divider></v-divider>
       <v-card-text>
         <div>
-          Get a key:
+          {{ $t('getAKey') }}:
           <a target="_blank" href="https://platform.openai.com/account/api-keys">https://platform.openai.com/account/api-keys</a>
         </div>
         <div

components/ModelDialog.vue

@@ -17,12 +17,12 @@
     </template>
     <v-card>
       <v-card-title>
-        <span class="text-h5">OpenAI Models</span>
+        <span class="text-h5">{{ $t('openAIModels') }}</span>
       </v-card-title>
       <v-divider></v-divider>
       <v-card-text>
         <div>
-          About the models:
+          {{ $t('aboutTheModels') }}:
           <a target="_blank" href="https://platform.openai.com/docs/models/overview">https://platform.openai.com/docs/models/overview</a>
         </div>
         <div
@@ -77,7 +77,7 @@
             color="primary"
             @click="save"
         >
-          Save & Close
+          {{ $t('saveAndClose') }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -85,6 +85,7 @@
 </template>
 
 <script setup>
+const { $i18n } = useNuxtApp()
 const dialog = ref(false)
 const models = useModels()
 const currentModel = useCurrentModel()
@@ -110,7 +111,7 @@ const removeModel = (index) => {
 }
 const save = async () => {
   if (!currentModel.value) {
-    showWarning('Please select at least one model.')
+    showWarning($i18n.t('pleaseSelectAtLeastOneModelDot'))
     return
   }
   setModels(models.value)

components/MsgEditor.vue

@@ -1,8 +1,8 @@
 <template>
   <v-textarea
       v-model="message"
-      label="Write a message..."
+      :label="$t('writeAMessage')"
-      placeholder="Write a message..."
+      :placeholder="$t('writeAMessage') + '...'"
       rows="1"
       :auto-grow="autoGrow"
       :disabled="disabled"
@@ -33,7 +33,7 @@ export default {
   },
   computed: {
     hint() {
-      return isMobile() ? "" : "Press Enter to send your message or Shift+Enter to add a new line.";
+      return isMobile() ? "" : "Press Enter to send your message or Shift+Enter to add a new line";
     },
   },
   watch: {

components/Welcome.vue

@@ -3,11 +3,11 @@
     <v-row>
       <v-col cols="12">
         <div class="text-center">
-          <h2 class="text-h2">Welcome to <span class="text-primary">{{ runtimeConfig.public.appName }}</span></h2>
+          <h2 class="text-h2">{{ $t('welcomeTo') }} <span class="text-primary">{{ runtimeConfig.public.appName }}</span></h2>
           <p class="text-caption mt-5">
-            {{ runtimeConfig.public.appName }} is an unofficial client for ChatGPT, but uses the official OpenAI API.
+            {{ runtimeConfig.public.appName }} {{ $t('welcomeScreen.introduction1') }}
             <br>
-            You will need an OpenAI API Key before you can use this client.
+            {{ $t('welcomeScreen.introduction2') }}
           </p>
         </div>
       </v-col>
@@ -23,7 +23,7 @@
               <v-col>
                 <div class="d-flex flex-column align-center">
                   <v-icon icon="sunny"></v-icon>
-                  <h3 class="text-h6">Examples</h3>
+                  <h3 class="text-h6">{{ $t('welcomeScreen.examples.title') }}</h3>
                 </div>
               </v-col>
             </v-row>
@@ -37,7 +37,7 @@
               <v-col>
                 <div class="d-flex flex-column align-center">
                   <v-icon icon="bolt"></v-icon>
-                  <h3 class="text-h6">Capabilities</h3>
+                  <h3 class="text-h6">{{ $t('welcomeScreen.capabilities.title') }}</h3>
                 </div>
               </v-col>
             </v-row>
@@ -51,7 +51,7 @@
               <v-col>
                 <div class="d-flex flex-column align-center">
                   <v-icon icon="warning_amber"></v-icon>
-                  <h3 class="text-h6">Limitations</h3>
+                  <h3 class="text-h6">{{ $t('welcomeScreen.limitations.title') }}</h3>
                 </div>
               </v-col>
             </v-row>
@@ -65,19 +65,20 @@
 
 <script setup>
 const runtimeConfig = useRuntimeConfig()
+const { $i18n } = useNuxtApp()
 const examples = ref([
-    '"Explain quantum computing in simple terms"',
+  $i18n.t('welcomeScreen.examples.item1'),
-    '"Got any creative ideas for a 10 year old’s birthday?"',
+  $i18n.t('welcomeScreen.examples.item2'),
-    '"How do I make an HTTP request in Javascript?"'
+  $i18n.t('welcomeScreen.examples.item3')
 ])
 const capabilities = ref([
-    'Remembers what user said earlier in the conversation',
+  $i18n.t('welcomeScreen.capabilities.item1'),
-    'Allows user to provide follow-up corrections',
+  $i18n.t('welcomeScreen.capabilities.item2'),
-    'Trained to decline inappropriate requests'
+  $i18n.t('welcomeScreen.capabilities.item3')
 ])
 const limitations = ref([
-    'May occasionally generate incorrect information',
+  $i18n.t('welcomeScreen.limitations.item1'),
-    'May occasionally produce harmful instructions or biased content',
+  $i18n.t('welcomeScreen.limitations.item2'),
-    'Limited knowledge of world and events after 2021'
+  $i18n.t('welcomeScreen.limitations.item3')
 ])
 </script>

components/settings/Languages.vue

@@ -0,0 +1,86 @@
+<template>
+  <v-dialog
+      v-model="dialog"
+      fullscreen
+      :scrim="false"
+      transition="dialog-bottom-transition"
+  >
+    <template v-slot:activator="{ props }">
+      <v-list-item
+          v-bind="props"
+          rounded="xl"
+          prepend-icon="language"
+          :title="$t('language')"
+      ></v-list-item>
+    </template>
+    <v-card>
+      <v-toolbar
+          dark
+          color="primary"
+      >
+        <v-btn
+            icon
+            dark
+            @click="dialog = false"
+        >
+          <v-icon>close</v-icon>
+        </v-btn>
+        <v-toolbar-title>{{ $t('language') }}</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <!--          <v-toolbar-items>-->
+        <!--            <v-btn-->
+        <!--                variant="text"-->
+        <!--                @click="dialog = false"-->
+        <!--            >-->
+        <!--              Save-->
+        <!--            </v-btn>-->
+        <!--          </v-toolbar-items>-->
+      </v-toolbar>
+      <v-list
+      >
+        <!--          <v-list-item-->
+        <!--              title="Use device language"-->
+        <!--              :append-icon="usingDeviceLanguage() ? 'radio_button_checked' : 'radio_button_unchecked'"-->
+        <!--              @click="useDeviceLanguage"-->
+        <!--          >-->
+        <!--          </v-list-item>-->
+        <v-list-item
+            v-for="l in locales"
+            :key="l.code"
+            :title="l.name"
+            :append-icon="radioIcon(l.code)"
+            @click="updateLocale(l.code)"
+        >
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+const dialog = ref(false)
+const { locale, locales, setLocale } = useI18n()
+const { $i18n } = useNuxtApp()
+
+// const usingDeviceLanguage = () => {
+//   return ($i18n.getLocaleCookie() === undefined || $i18n.getLocaleCookie() === 'undefined')
+// }
+
+const updateLocale = (lang) => {
+  setLocale(lang)
+}
+
+const radioIcon = (code) => {
+  return code === locale.value ? 'radio_button_checked' : 'radio_button_unchecked'
+}
+
+// const useDeviceLanguage = () => {
+//   setLocale($i18n.getBrowserLocale())
+//   $i18n.setLocaleCookie(undefined)
+// }
+
+</script>
+
+<style scoped>
+
+</style>

lang/en-US.json

@@ -1,3 +1,45 @@
 {
-  "hello": "Hello"
+  "welcomeTo": "Welcome to",
+  "language": "Language",
+  "setApiKey": "Set API Key",
+  "setOpenAIApiKey": "Set OpenAI API Key",
+  "openAIApiKey": "OpenAI API Key",
+  "getAKey": "Get a key",
+  "openAIModels": "OpenAI Models",
+  "aboutTheModels": "About the models",
+  "saveAndClose": "Save & Close",
+  "pleaseSelectAtLeastOneModelDot": "Please select at least one model.",
+  "writeAMessage": "Write a message",
+  "pressEnterToSendYourMessageOrShiftEnterToAddANewLine": "Press Enter to send your message or Shift+Enter to add a new line",
+  "lightMode": "Light Mode",
+  "darkMode": "Dark Mode",
+  "followSystem": "Follow system",
+  "themeMode": "Theme Mode",
+  "feedback": "Feedback",
+  "roles": {
+    "me": "Me",
+    "ai": "AI"
+  },
+  "welcomeScreen": {
+    "introduction1": "is an unofficial client for ChatGPT, but uses the official OpenAI API.",
+    "introduction2": "You will need an OpenAI API Key before you can use this client.",
+    "examples": {
+      "title": "Examples",
+      "item1": "\"Explain quantum computing in simple terms\"",
+      "item2": "\"Got any creative ideas for a 10 year old’s birthday?\"",
+      "item3": "\"How do I make an HTTP request in Javascript?\""
+    },
+    "capabilities": {
+      "title": "Capabilities",
+      "item1": "Remembers what user said earlier in the conversation",
+      "item2": "Allows user to provide follow-up corrections",
+      "item3": "Trained to decline inappropriate requests"
+    },
+    "limitations": {
+      "title": "Limitations",
+      "item1": "May occasionally generate incorrect information",
+      "item2": "May occasionally produce harmful instructions or biased content",
+      "item3": "Limited knowledge of world and events after 2021"
+    }
+  }
 }

lang/zh-CN.json

@@ -1,3 +1,45 @@
 {
-  "hello": "你好"
+  "welcomeTo": "欢迎来到",
+  "language": "语言",
+  "setApiKey": "设置API密钥",
+  "setOpenAIApiKey": "设置OpenAI的API密钥",
+  "openAIApiKey": "OpenAI的API密钥",
+  "getAKey": "获取钥匙",
+  "openAIModels": "OpenAI模型",
+  "aboutTheModels": "关于模型",
+  "saveAndClose": "保存并关闭",
+  "pleaseSelectAtLeastOneModelDot": "请至少选择一个模型",
+  "writeAMessage": "输入信息",
+  "pressEnterToSendYourMessageOrShiftEnterToAddANewLine": "按回车键发送您的信息，或按Shift+Enter键添加新行",
+  "lightMode": "明亮模式",
+  "darkMode": "暗色模式",
+  "followSystem": "跟随系统",
+  "themeMode": "主题模式",
+  "feedback": "反馈",
+  "roles": {
+    "me": "我",
+    "ai": "AI"
+  },
+  "welcomeScreen": {
+    "introduction1": "是一个非官方的ChatGPT客户端，但使用OpenAI的官方API",
+    "introduction2": "在使用本客户端之前，您需要一个OpenAI API密钥。",
+    "examples": {
+      "title": "例子",
+      "item1": "\"用简单的语言解释量子计算\"",
+      "item2": "\"为10岁的孩子过生日，有什么创造性的想法吗？\"",
+      "item3": "\"我如何在Javascript中进行HTTP请求？\""
+    },
+    "capabilities": {
+      "title": "能力",
+      "item1": "记得用户在谈话中早先说过的话",
+      "item2": "允许用户提供后续更正",
+      "item3": "经过培训，可以拒绝不适当的请求"
+    },
+    "limitations": {
+      "title": "局限",
+      "item1": "偶尔可能会产生不正确的信息",
+      "item2": "可能偶尔会产生有害的指示或有偏见的内容",
+      "item3": "对2021年以后的世界和事件了解有限"
+    }
+  }
 }

pages/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
 
+const { $i18n } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
 const currentModel = useCurrentModel()
 const openaiApiKey = useApiKey()
@@ -135,7 +136,7 @@ createNewConversation()
         :variant="conversation.from === 'ai' ? 'tonal' : 'text'"
     >
       <v-container>
-        <v-card-text class="text-caption text-disabled">{{ conversation.from }}</v-card-text>
+        <v-card-text class="text-caption text-disabled">{{ $t(`roles.${conversation.from}`) }}</v-card-text>
         <v-card-text>
           <MsgContent :content="conversation.message" />
         </v-card-text>
@@ -158,7 +159,7 @@ createNewConversation()
     </div>
 
     <div class="px-4 py-2 text-disabled text-caption font-weight-light text-center w-100">
-      © {{ new Date().getFullYear() }} — {{ runtimeConfig.public.appName }}
+      © {{ new Date().getFullYear() }} {{ runtimeConfig.public.appName }}
     </div>
   </v-footer>
   <v-snackbar