feat: version 2.9.1 (#207)

* feat: i18n

* chore: format

* feat: 补充遗漏翻译

* chore: update deps

* feat: 复制代码块[#196][#197]

* chore: version 2.9.1

.vscode/settings.json

@@ -45,5 +45,14 @@
     "VITE",
     "vueuse",
     "Zhao"
-  ]
+  ],
+  "i18n-ally.enabledParsers": [
+    "ts"
+  ],
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.keepFulfilled": true,
+  "i18n-ally.localesPaths": [
+    "src/locales"
+  ],
+  "i18n-ally.keystyle": "nested"
 }

CHANGELOG.md

@@ -1,3 +1,19 @@
+## v2.9.1
+
+`2023-03-02`
+
+### Feature
+- 代码块添加当前代码语言显示和复制功能[#197][#196]
+- 完善多语言，现在可以切换中英文显示
+
+## Enhancement
+- 由[Zo3i](https://github.com/Chanzhaoyu/chatgpt-web/pull/187) 完善 `docker-compose` 部署文档
+
+### BugFix
+- 由 [ottocsb](https://github.com/Chanzhaoyu/chatgpt-web/pull/200) 修复头像修改不同步的问题
+## Other
+- 更新依赖至最新
+- 修改 `README` 内容
 ## v2.9.0
 
 `2023-03-02`

README.md

@@ -69,9 +69,9 @@ API_REVERSE_PROXY=
 
 [✓] 对代码等消息类型的格式化美化处理
 
-[✗] 界面多语言
+[✓] 界面多语言
 
-[✗] 界面主题
+[✓] 界面主题
 
 [✗] More...
 
@@ -174,7 +174,7 @@ version: '3'
 
 services:
   app:
-    image: chenzhaoyu94/chatgpt-web # 总是使用latest,更新时重新pull该tag镜像即可
+    image: chenzhaoyu94/chatgpt-web # 总是使用 latest ,更新时重新 pull 该 tag 镜像即可
     ports:
       - 3002:3002
     environment:

docker-compose/docker-compose.yml

@@ -18,9 +18,9 @@ services:
     build: nginx
     image: chatgpt/nginx
     ports:
-      - "80:80"
+      - '80:80'
     expose:
-      - "80"
+      - '80'
     volumes:
       - ./nginx/html/:/etc/nginx/html/
     links:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-web",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "private": false,
   "description": "ChatGPT Web",
   "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
@@ -27,34 +27,34 @@
     "highlight.js": "^11.7.0",
     "marked": "^4.2.12",
     "naive-ui": "^2.34.3",
-    "pinia": "^2.0.30",
+    "pinia": "^2.0.32",
     "vue": "^3.2.47",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.35.2",
+    "@antfu/eslint-config": "^0.35.3",
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
     "@iconify/vue": "^4.1.0",
     "@types/crypto-js": "^4.1.1",
     "@types/marked": "^4.0.8",
-    "@types/node": "^18.14.0",
+    "@types/node": "^18.14.4",
-    "@types/web-bluetooth": "^0.0.16",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
-    "axios": "^1.3.3",
+    "axios": "^1.3.4",
     "crypto-js": "^4.1.1",
-    "eslint": "^8.34.0",
+    "eslint": "^8.35.0",
     "husky": "^8.0.3",
     "less": "^4.1.3",
     "lint-staged": "^13.1.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
-    "rimraf": "^4.1.2",
+    "rimraf": "^4.1.3",
     "tailwindcss": "^3.2.7",
     "typescript": "~4.9.5",
-    "vite": "^4.1.2",
+    "vite": "^4.1.4",
-    "vue-tsc": "^1.1.4"
+    "vue-tsc": "^1.2.0"
   },
   "lint-staged": {
     "*.{ts,tsx,vue}": [

service/package.json

@@ -24,7 +24,7 @@
     "common:cleanup": "rimraf node_modules && rimraf pnpm-lock.yaml"
   },
   "dependencies": {
-    "chatgpt": "^5.0.1",
+    "chatgpt": "^5.0.4",
     "dotenv": "^16.0.3",
     "esno": "^0.16.3",
     "express": "^4.18.2",
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.35.3",
     "@types/express": "^4.17.17",
-    "@types/node": "^18.14.3",
+    "@types/node": "^18.14.4",
     "eslint": "^8.35.0",
     "rimraf": "^4.1.3",
     "tsup": "^6.6.3",

service/pnpm-lock.yaml

@@ -3,8 +3,8 @@ lockfileVersion: 5.4
 specifiers:
   '@antfu/eslint-config': ^0.35.3
   '@types/express': ^4.17.17
-  '@types/node': ^18.14.3
+  '@types/node': ^18.14.4
-  chatgpt: ^5.0.1
+  chatgpt: ^5.0.4
   dotenv: ^16.0.3
   eslint: ^8.35.0
   esno: ^0.16.3
@@ -17,7 +17,7 @@ specifiers:
   typescript: ^4.9.5
 
 dependencies:
-  chatgpt: 5.0.1
+  chatgpt: 5.0.4
   dotenv: 16.0.3
   esno: 0.16.3
   express: 4.18.2
@@ -28,7 +28,7 @@ dependencies:
 devDependencies:
   '@antfu/eslint-config': 0.35.3_ycpbpc6yetojsgtrx3mwntkhsu
   '@types/express': 4.17.17
-  '@types/node': 18.14.3
+  '@types/node': 18.14.4
   eslint: 8.35.0
   rimraf: 4.1.3
   tsup: 6.6.3_typescript@4.9.5
@@ -428,19 +428,19 @@ packages:
     resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
     dependencies:
       '@types/connect': 3.4.35
-      '@types/node': 18.14.3
+      '@types/node': 18.14.4
     dev: true
 
   /@types/connect/3.4.35:
     resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
     dependencies:
-      '@types/node': 18.14.3
+      '@types/node': 18.14.4
     dev: true
 
   /@types/express-serve-static-core/4.17.33:
     resolution: {integrity: sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==}
     dependencies:
-      '@types/node': 18.14.3
+      '@types/node': 18.14.4
       '@types/qs': 6.9.7
       '@types/range-parser': 1.2.4
     dev: true
@@ -472,8 +472,8 @@ packages:
     resolution: {integrity: sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==}
     dev: true
 
-  /@types/node/18.14.3:
+  /@types/node/18.14.4:
-    resolution: {integrity: sha512-1y36CC5iL5CMyKALzwX9cwwxcWIxvIBe3gzs4GrXWXEQ8klQnCZ2U/WDGiNrXHmQcUhnaun17XG9TEIDlGj2RA==}
+    resolution: {integrity: sha512-VhCw7I7qO2X49+jaKcAUwi3rR+hbxT5VcYF493+Z5kMLI0DL568b7JI4IDJaxWFH0D/xwmGJNoXisyX+w7GH/g==}
     dev: true
 
   /@types/normalize-package-data/2.4.1:
@@ -495,7 +495,7 @@ packages:
     resolution: {integrity: sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==}
     dependencies:
       '@types/mime': 3.0.1
-      '@types/node': 18.14.3
+      '@types/node': 18.14.4
     dev: true
 
   /@types/unist/2.0.6:
@@ -896,8 +896,8 @@ packages:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
     dev: true
 
-  /chatgpt/5.0.1:
+  /chatgpt/5.0.4:
-    resolution: {integrity: sha512-Wy+/2XL0FobiJFaQ6N5WnhRCnOwrUJCpoVCn67qqhiWrM1QW6lgmpvtDDKKDyvj7D1MLMjc2xB/kK8aT27mL/w==}
+    resolution: {integrity: sha512-qkppO2IDYDJC1eaXfqupXdZcOPNqtBkToRcvr9CAGM1rdsKfBDpWLTx4Y6OMNH02sgWu48aJB//0lO1M17K58w==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:

src/components/common/Setting/About.vue

@@ -47,16 +47,16 @@ onMounted(() => {
           >
             Github
           </a>
-          免费，并且没有任何形式分付费行为！
+          ，免费且基于 MIT 协议，没有任何形式的付费行为！
         </p>
         <p>
           如果你觉得此项目对你有帮助，请在 Github 帮我点个 Star 或者给予一点赞助，谢谢！
         </p>
       </div>
-      <p>API方式：{{ config?.apiModel ?? '-' }}</p>
+      <p>{{ $t("setting.api") }}：{{ config?.apiModel ?? '-' }}</p>
-      <p>反向代理：{{ config?.reverseProxy ?? '-' }}</p>
+      <p>{{ $t("setting.reverseProxy") }}：{{ config?.reverseProxy ?? '-' }}</p>
-      <p>超时时间：{{ config?.timeoutMs ?? '-' }}</p>
+      <p>{{ $t("setting.timeout") }}：{{ config?.timeoutMs ?? '-' }}</p>
-      <p>Socks代理：{{ config?.socksProxy ?? '-' }}</p>
+      <p>{{ $t("setting.socks") }}：{{ config?.socksProxy ?? '-' }}</p>
     </div>
   </NSpin>
 </template>

src/components/common/Setting/General.vue

@@ -5,6 +5,7 @@ import type { Language, Theme } from '@/store/modules/app/helper'
 import { SvgIcon } from '@/components/common'
 import { useAppStore, useUserStore } from '@/store'
 import type { UserInfo } from '@/store/modules/user/helper'
+import { t } from '@/locales'
 
 interface Emit {
   (event: 'update'): void
@@ -61,12 +62,12 @@ const languageOptions: { label: string; key: Language; value: Language }[] = [
 
 function updateUserInfo(options: Partial<UserInfo>) {
   userStore.updateUserInfo(options)
-  ms.success('Update success')
+  ms.success(t('common.success'))
 }
 
 function handleReset() {
   userStore.resetUserInfo()
-  ms.success('Reset success')
+  ms.success(t('common.success'))
   emit('update')
 }
 </script>
@@ -75,40 +76,40 @@ function handleReset() {
   <div class="p-4 space-y-5 min-h-[200px]">
     <div class="space-y-6">
       <div class="flex items-center space-x-4">
-        <span class="flex-shrink-0 w-[100px]">Avatar Link</span>
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.avatarLink') }}</span>
         <div class="flex-1">
           <NInput v-model:value="avatar" placeholder="" />
         </div>
         <NButton size="tiny" text type="primary" @click="updateUserInfo({ avatar })">
-          Save
+          {{ $t('common.save') }}
         </NButton>
       </div>
       <div class="flex items-center space-x-4">
-        <span class="flex-shrink-0 w-[100px]">Name</span>
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.name') }}</span>
         <div class="w-[200px]">
           <NInput v-model:value="name" placeholder="" />
         </div>
         <NButton size="tiny" text type="primary" @click="updateUserInfo({ name })">
-          Save
+          {{ $t('common.save') }}
         </NButton>
       </div>
       <div class="flex items-center space-x-4">
-        <span class="flex-shrink-0 w-[100px]">Description</span>
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.description') }}</span>
         <div class="flex-1">
           <NInput v-model:value="description" placeholder="" />
         </div>
         <NButton size="tiny" text type="primary" @click="updateUserInfo({ description })">
-          Save
+          {{ $t('common.save') }}
         </NButton>
       </div>
       <div class="flex items-center space-x-4">
-        <span class="flex-shrink-0 w-[100px]">Reset UserInfo</span>
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.resetUserInfo') }}</span>
         <NButton text type="primary" @click="handleReset">
-          Reset
+          {{ $t('common.reset') }}
         </NButton>
       </div>
       <div class="flex items-center space-x-4">
-        <span class="flex-shrink-0 w-[100px]">Theme</span>
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.theme') }}</span>
         <div class="flex items-center space-x-4">
           <template v-for="item of themeOptions" :key="item.key">
             <a
@@ -124,7 +125,7 @@ function handleReset() {
         </div>
       </div>
       <div class="flex items-center space-x-4">
-        <span class="flex-shrink-0 w-[100px]">Language</span>
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.language') }}</span>
         <div class="flex items-center space-x-4">
           <template v-for="item of languageOptions" :key="item.key">
             <a

src/components/common/Setting/index.vue

@@ -5,6 +5,10 @@ import General from './General.vue'
 import About from './About.vue'
 import { SvgIcon } from '@/components/common'
 
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
 interface Props {
   visible: boolean
 }
@@ -13,10 +17,6 @@ interface Emit {
   (e: 'update:visible', visible: boolean): void
 }
 
-const props = defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
 const active = ref('General')
 
 const reload = ref(false)
@@ -39,13 +39,13 @@ function handleReload() {
 </script>
 
 <template>
-  <NModal v-model:show="show">
+  <NModal v-model:show="show" :auto-focus="false">
     <NCard role="dialog" aria-modal="true" :bordered="false" style="width: 100%; max-width: 640px">
       <NTabs v-model:value="active" type="line" animated>
         <NTabPane name="General" tab="General">
           <template #tab>
             <SvgIcon class="text-lg" icon="ri:file-user-line" />
-            <span class="ml-2">General</span>
+            <span class="ml-2">{{ $t('setting.general') }}</span>
           </template>
           <div class="min-h-[100px]">
             <General v-if="!reload" @update="handleReload" />
@@ -54,7 +54,7 @@ function handleReload() {
         <NTabPane name="Config" tab="Config">
           <template #tab>
             <SvgIcon class="text-lg" icon="ri:list-settings-line" />
-            <span class="ml-2">Config</span>
+            <span class="ml-2">{{ $t('setting.config') }}</span>
           </template>
           <About />
         </NTabPane>

src/hooks/useLanguage.ts

@@ -1,15 +1,23 @@
 import { computed } from 'vue'
 import { enUS, zhCN } from 'naive-ui'
 import { useAppStore } from '@/store'
+import { setLocale } from '@/locales'
 
 export function useLanguage() {
   const appStore = useAppStore()
 
   const language = computed(() => {
-    if (appStore.language === 'zh-CN')
+    switch (appStore.language) {
-      return zhCN
+      case 'en-US':
-    else
+        setLocale('en-US')
-      return enUS
+        return enUS
+      case 'zh-CN':
+        setLocale('zh-CN')
+        return zhCN
+      default:
+        setLocale('zh-CN')
+        return enUS
+    }
   })
 
   return { language }

src/locales/en-US.ts

@@ -0,0 +1,41 @@
+export default {
+  common: {
+    delete: 'Delete',
+    save: 'Save',
+    reset: 'Reset',
+    yes: 'Yes',
+    no: 'No',
+    noData: 'No Data',
+    wrong: 'Something went wrong, please try again later.',
+    success: 'Success',
+    failed: 'Failed',
+  },
+  chat: {
+    placeholder: 'Ask me anything...(Shift + Enter = line break)',
+    placeholderMobile: 'Ask me anything...',
+    copy: 'Copy',
+    copied: 'Copied',
+    copyCode: 'Copy Code',
+    clearChat: 'Clear Chat',
+    clearChatConfirm: 'Are you sure to clear this chat?',
+    deleteMessage: 'Delete Message',
+    deleteMessageConfirm: 'Are you sure to delete this message?',
+    deleteHistoryConfirm: 'Are you sure to clear this history?',
+  },
+  setting: {
+    setting: 'Setting',
+    general: 'General',
+    config: 'Config',
+    avatarLink: 'Avatar Link',
+    name: 'Name',
+    description: 'Description',
+    resetUserInfo: 'Reset UserInfo',
+    theme: 'Theme',
+    language: 'Language',
+    api: 'API',
+    reverseProxy: 'Reverse Proxy',
+    timeout: 'Timeout',
+    socks: 'Socks',
+  },
+
+}

src/locales/index.ts

@@ -0,0 +1,34 @@
+import type { App } from 'vue'
+import { createI18n } from 'vue-i18n'
+import en from './en-US'
+import cn from './zh-CN'
+import { useAppStoreWithOut } from '@/store/modules/app'
+import type { Language } from '@/store/modules/app/helper'
+
+const appStore = useAppStoreWithOut()
+
+const defaultLocale = appStore.language || 'zh-CN'
+
+const i18n = createI18n({
+  locale: defaultLocale,
+  fallbackLocale: 'en-US',
+  allowComposition: true,
+  messages: {
+    'en-US': en,
+    'zh-CN': cn,
+  },
+})
+
+export function t(key: string) {
+  return i18n.global.t(key)
+}
+
+export function setLocale(locale: Language) {
+  i18n.global.locale = locale
+}
+
+export function setupI18n(app: App) {
+  app.use(i18n)
+}
+
+export default i18n

src/locales/zh-CN.ts

@@ -0,0 +1,41 @@
+export default {
+  common: {
+    delete: '删除',
+    save: '保存',
+    reset: '重置',
+    yes: '是',
+    no: '否',
+    noData: '暂无数据',
+    wrong: '好像出错了，请稍后再试。',
+    success: '操作成功',
+    failed: '操作失败',
+  },
+  chat: {
+    placeholder: '来说点什么...（Shift + Enter = 换行）',
+    placeholderMobile: '来说点什么...',
+    copy: '复制',
+    copied: '复制成功',
+    copyCode: '复制代码',
+    clearChat: '清空会话',
+    clearChatConfirm: '是否清空会话?',
+    deleteMessage: '删除消息',
+    deleteMessageConfirm: '是否删除此消息?',
+    deleteHistoryConfirm: '确定删除此记录?',
+  },
+  setting: {
+    setting: '设置',
+    general: '总览',
+    config: '配置',
+    avatarLink: '头像链接',
+    name: '名称',
+    description: '描述',
+    resetUserInfo: '重置用户信息',
+    theme: '主题',
+    language: '语言',
+    api: 'API',
+    reverseProxy: '反向代理',
+    timeout: '超时',
+    socks: 'Socks',
+  },
+
+}

src/main.ts

@@ -1,9 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { setupDirectives } from './directives'
-import { setupAssets } from '@/plugins'
+import { setupI18n } from './locales'
-import { setupStore } from '@/store'
+import { setupAssets } from './plugins'
-import { setupRouter } from '@/router'
+import { setupStore } from './store'
+import { setupRouter } from './router'
 
 async function bootstrap() {
   const app = createApp(App)
@@ -13,6 +14,8 @@ async function bootstrap() {
 
   setupDirectives(app)
 
+  setupI18n(app)
+
   await setupRouter(app)
 
   app.mount('#app')

src/store/index.ts

@@ -1,8 +1,9 @@
 import type { App } from 'vue'
 import { createPinia } from 'pinia'
 
+export const store = createPinia()
+
 export function setupStore(app: App) {
-  const store = createPinia()
   app.use(store)
 }
 

src/store/modules/app/index.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import type { AppState, Language, Theme } from './helper'
 import { getLocalSetting, setLocalSetting } from './helper'
+import { store } from '@/store'
 
 export const useAppStore = defineStore('app-store', {
   state: (): AppState => getLocalSetting(),
@@ -27,3 +28,7 @@ export const useAppStore = defineStore('app-store', {
     },
   },
 })
+
+export function useAppStoreWithOut() {
+  return useAppStore(store)
+}

src/views/chat/components/Message/Text.vue

@@ -4,6 +4,7 @@ import { marked } from 'marked'
 import hljs from 'highlight.js'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { encodeHTML } from '@/utils/format'
+import { t } from '@/locales'
 
 interface Props {
   inversion?: boolean
@@ -26,8 +27,10 @@ renderer.html = (html) => {
 
 renderer.code = (code, language) => {
   const validLang = !!(language && hljs.getLanguage(language))
-  if (validLang)
+  if (validLang) {
-    return `<pre><code class="hljs ${language}">${hljs.highlight(language, code).value}</code></pre>`
+    const lang = language ?? ''
+    return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${t('chat.copyCode')}</span></div><code class="hljs code-block-body ${language}">${hljs.highlight(lang, code).value}</code></pre>`
+  }
   return `<pre style="background: none">${hljs.highlightAuto(code).value}</pre>`
 }
 

src/views/chat/components/Message/index.vue

@@ -1,11 +1,12 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
-import { NDropdown, useMessage } from 'naive-ui'
+import { NDropdown } from 'naive-ui'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
 import { SvgIcon } from '@/components/common'
 import { copyText } from '@/utils/format'
 import { useIconRender } from '@/hooks/useIconRender'
+import { t } from '@/locales'
 
 interface Props {
   dateTime?: string
@@ -24,25 +25,18 @@ const props = defineProps<Props>()
 
 const emit = defineEmits<Emit>()
 
-const ms = useMessage()
-
 const { iconRender } = useIconRender()
 
 const textRef = ref<HTMLElement>()
 
 const options = [
   {
-    label: 'Copy Raw',
+    label: t('chat.copy'),
-    key: 'copyRaw',
+    key: 'copyText',
     icon: iconRender({ icon: 'ri:file-copy-2-line' }),
   },
   {
-    label: 'Copy Text',
+    label: t('common.delete'),
-    key: 'copyText',
-    icon: iconRender({ icon: 'ri:file-copy-line' }),
-  },
-  {
-    label: 'Delete',
     key: 'delete',
     icon: iconRender({ icon: 'ri:delete-bin-line' }),
   },
@@ -50,15 +44,8 @@ const options = [
 
 function handleSelect(key: 'copyRaw' | 'copyText' | 'delete') {
   switch (key) {
-    case 'copyRaw':
-      if (textRef.value && (textRef.value as any).textRef) {
-        copyText({ text: (textRef.value as any).textRef.innerText })
-        ms.success('Copied Raw')
-      }
-      return
     case 'copyText':
-      copyText({ text: props.text ?? '', origin: false })
+      copyText({ text: props.text ?? '' })
-      ms.success('Copied Text')
       return
     case 'delete':
       emit('delete')

src/views/chat/components/Message/style.less

@@ -24,9 +24,37 @@
 		background-color: #fff;
 	}
 
-	code.hljs{
+	code.hljs {
 		padding: 0;
 	}
+
+	.code-block {
+		&-wrapper {
+			position: relative;
+			padding-top: 24px;
+		}
+
+		&-header {
+			position: absolute;
+			top: 5px;
+			right: 0;
+			width: 100%;
+			padding: 0 1rem;
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			color: #b3b3b3;
+
+			&__copy{
+				cursor: pointer;
+				margin-left: 0.5rem;
+				user-select: none;
+				&:hover {
+					color: #65a665;
+				}
+			}
+		}
+	}
 }
 
 html.dark {

src/views/chat/hooks/useCopyCode.ts

@@ -0,0 +1,18 @@
+import { onMounted } from 'vue'
+
+export function useCopyCode() {
+  function copyCodeBlock() {
+    const codeBlockWrapper = document.querySelectorAll('.code-block-wrapper')
+    codeBlockWrapper.forEach((wrapper) => {
+      const copyBtn = wrapper.querySelector('.code-block-header__copy')
+      const codeBlock = wrapper.querySelector('.code-block-body')
+      if (copyBtn && codeBlock) {
+        copyBtn.addEventListener('click', () => {
+          navigator.clipboard.writeText(codeBlock.textContent ?? '')
+        })
+      }
+    })
+  }
+
+  onMounted(() => copyCodeBlock())
+}

src/views/chat/index.vue

@@ -1,23 +1,25 @@
 <script setup lang='ts'>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { NButton, NInput, useDialog, useMessage } from 'naive-ui'
+import { NButton, NInput, useDialog } from 'naive-ui'
 import { Message } from './components'
 import { useScroll } from './hooks/useScroll'
 import { useChat } from './hooks/useChat'
+import { useCopyCode } from './hooks/useCopyCode'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useChatStore } from '@/store'
 import { fetchChatAPIProcess } from '@/api'
+import { t } from '@/locales'
 
 let controller = new AbortController()
 
 const route = useRoute()
 const dialog = useDialog()
-const ms = useMessage()
 
 const chatStore = useChatStore()
 
+useCopyCode()
 const { isMobile } = useBasicLayout()
 const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
 const { scrollRef, scrollToBottom } = useScroll()
@@ -118,7 +120,7 @@ async function onConversation() {
     })
   }
   catch (error: any) {
-    const errorMessage = error?.message ?? 'Something went wrong, please try again later.'
+    const errorMessage = error?.message ?? t('common.wrong')
 
     if (error.message === 'canceled') {
       updateChatSome(
@@ -245,7 +247,7 @@ async function onRegenerate(index: number) {
       return
     }
 
-    const errorMessage = error?.message ?? 'Something went wrong, please try again later.'
+    const errorMessage = error?.message ?? t('common.wrong')
 
     updateChat(
       +uuid,
@@ -271,13 +273,12 @@ function handleDelete(index: number) {
     return
 
   dialog.warning({
-    title: 'Delete Message',
+    title: t('chat.deleteMessage'),
-    content: 'Are you sure to delete this message?',
+    content: t('chat.deleteMessageConfirm'),
-    positiveText: 'Yes',
+    positiveText: t('common.yes'),
-    negativeText: 'No',
+    negativeText: t('common.no'),
     onPositiveClick: () => {
       chatStore.deleteChatByUuid(+uuid, index)
-      ms.success('Message deleted successfully.')
     },
   })
 }
@@ -287,10 +288,10 @@ function handleClear() {
     return
 
   dialog.warning({
-    title: 'Clear Chat',
+    title: t('chat.clearChat'),
-    content: 'Are you sure to clear this chat?',
+    content: t('chat.clearChatConfirm'),
-    positiveText: 'Yes',
+    positiveText: t('common.yes'),
-    negativeText: 'No',
+    negativeText: t('common.no'),
     onPositiveClick: () => {
       chatStore.clearChatByUuid(+uuid)
     },
@@ -315,8 +316,8 @@ function handleStop() {
 
 const placeholder = computed(() => {
   if (isMobile.value)
-    return 'Ask me anything...'
+    return t('chat.placeholderMobile')
-  return 'Ask me anything... (Shift + Enter = line break)'
+  return t('chat.placeholder')
 })
 
 const buttonDisabled = computed(() => {

src/views/chat/layout/sider/Footer.vue

@@ -11,7 +11,7 @@ const show = ref(false)
   <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t dark:border-neutral-800">
     <UserAvatar />
 
-    <HoverButton tooltip="Setting" @click="show = true">
+    <HoverButton :tooltip="$t('setting.setting')" @click="show = true">
       <span class="text-xl text-[#4f555e] dark:text-white">
         <SvgIcon icon="ri:settings-4-line" />
       </span>

src/views/chat/layout/sider/List.vue

@@ -49,7 +49,7 @@ function isActive(uuid: number) {
       <template v-if="!dataSources.length">
         <div class="flex flex-col items-center mt-4 text-center text-neutral-300">
           <SvgIcon icon="ri:inbox-line" class="mb-2 text-3xl" />
-          <span>No history</span>
+          <span>{{ $t('common.noData') }}</span>
         </div>
       </template>
       <template v-else>
@@ -87,7 +87,7 @@ function isActive(uuid: number) {
                       <SvgIcon icon="ri:delete-bin-line" />
                     </button>
                   </template>
-                  Are you sure to clear this history?
+                  {{ $t('chat.deleteHistoryConfirm') }}
                 </NPopconfirm>
               </template>
             </div>

tsconfig.json

@@ -13,10 +13,11 @@
     "noUnusedLocals": true,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["vite/client", "node", "naive-ui/volar", "web-bluetooth"]
+    "types": ["vite/client", "node", "naive-ui/volar"]
   },
   "exclude": ["node_modules", "dist", "service"]
 }