From 9eccfde3619b90f4b8ed4e1b562979196a50beb9 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 23 May 2023 11:23:05 +0800
Subject: [PATCH 01/20] update actions

---
 .github/workflows/build_docker.yml | 2 +-
 .github/workflows/ci.yml           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/build_docker.yml b/.github/workflows/build_docker.yml
index d4b1bb52..b7533067 100644
--- a/.github/workflows/build_docker.yml
+++ b/.github/workflows/build_docker.yml
@@ -2,7 +2,7 @@ name: build_docker
 
 on:
   push:
-    branches: [main]
+    branches: [master]
   release:
     types: [created] # 表示在创建新的 Release 时触发
 
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 24f58aec..71d05025 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -3,11 +3,11 @@ name: CI
 on:
   push:
     branches:
-      - main
+      - master
 
   pull_request:
     branches:
-      - main
+      - master
 
 jobs:
   lint:

From 48306044a4816a80cb211cf917b545cf1086bdda Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Fri, 11 Aug 2023 16:33:16 +0800
Subject: [PATCH 02/20] chore(gitignore): update ignored files

---
 .gitignore | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 0fedcce5..4cf36a71 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,7 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
+package-lock.json
 node_modules
 .DS_Store
 dist
@@ -30,4 +30,4 @@ coverage
 
 # Environment variables files
 /service/.env
-/docker-compose/nginx/html
\ No newline at end of file
+/docker-compose/nginx/html

From d8276a754fff04ca8df2ac78d34b30e2117df142 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 29 Aug 2023 15:22:08 +0800
Subject: [PATCH 03/20] feat(*): add chat record

---
 service/src/index.ts                          |  41 +++-
 service/src/storage/mongo.ts                  |  74 ++++++-
 src/api/index.ts                              |  11 +-
 src/components/common/Setting/Audit.vue       |   3 +-
 src/components/common/Setting/ChatRecord.vue  | 158 +++++++++++++++
 .../common/Setting/Message/Avatar.vue         |  20 ++
 .../common/Setting/Message/Text.vue           | 117 +++++++++++
 .../common/Setting/Message/index.vue          | 187 ++++++++++++++++++
 .../common/Setting/Message/style.less         |  75 +++++++
 src/components/common/Setting/index.vue       |  36 ++--
 src/locales/en-US.ts                          |   1 +
 src/locales/ko-KR.ts                          |   1 +
 src/locales/zh-CN.ts                          |   1 +
 src/locales/zh-TW.ts                          |   1 +
 14 files changed, 704 insertions(+), 22 deletions(-)
 create mode 100644 src/components/common/Setting/ChatRecord.vue
 create mode 100644 src/components/common/Setting/Message/Avatar.vue
 create mode 100644 src/components/common/Setting/Message/Text.vue
 create mode 100644 src/components/common/Setting/Message/index.vue
 create mode 100644 src/components/common/Setting/Message/style.less

diff --git a/service/src/index.ts b/service/src/index.ts
index 3c316ebd..1b591a31 100644
--- a/service/src/index.ts
+++ b/service/src/index.ts
@@ -21,6 +21,7 @@ import {
   getChat,
   getChatRoom,
   getChatRooms,
+  getChatRoomsCount,
   getChats,
   getUser,
   getUserById,
@@ -87,6 +88,42 @@ router.get('/chatrooms', auth, async (req, res) => {
   }
 })
 
+function formatTimestamp(timestamp: number) {
+  const date = new Date(timestamp)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+router.get('/chatrooms-count', auth, async (req, res) => {
+  try {
+    const userId = req.query.userId as string
+    const page = +req.query.page
+    const size = +req.query.size
+    const rooms = await getChatRoomsCount(userId, page, size)
+    const result = []
+    rooms.data.forEach((r) => {
+      result.push({
+        uuid: r.roomId,
+        title: r.title,
+        userId: r.userId,
+        lastTime: formatTimestamp(r.dateTime),
+        chatCount: r.chatCount,
+      })
+    })
+    res.send({ status: 'Success', message: null, data: { data: result, total: rooms.total } })
+  }
+  catch (error) {
+    console.error(error)
+    res.send({ status: 'Fail', message: 'Load error', data: [] })
+  }
+})
+
 router.post('/room-create', auth, async (req, res) => {
   try {
     const userId = req.headers.userId as string
@@ -183,13 +220,13 @@ router.get('/chat-history', auth, async (req, res) => {
     const userId = req.headers.userId as string
     const roomId = +req.query.roomId
     const lastId = req.query.lastId as string
+    const all = req.query.all as string
     if (!roomId || !await existsChatRoom(userId, roomId)) {
       res.send({ status: 'Success', message: null, data: [] })
       // res.send({ status: 'Fail', message: 'Unknow room', data: null })
       return
     }
-    const chats = await getChats(roomId, !isNotEmptyString(lastId) ? null : parseInt(lastId))
-
+    const chats = await getChats(roomId, !isNotEmptyString(lastId) ? null : parseInt(lastId), all)
     const result = []
     chats.forEach((c) => {
       if (c.status !== Status.InversionDeleted) {
diff --git a/service/src/storage/mongo.ts b/service/src/storage/mongo.ts
index 12ec6f72..f842f9a7 100644
--- a/service/src/storage/mongo.ts
+++ b/service/src/storage/mongo.ts
@@ -138,6 +138,71 @@ export async function getChatRooms(userId: string) {
   return rooms
 }
 
+export async function getChatRoomsCount(userId: string, page: number, size: number) {
+  let total = 0
+  const skip = (page - 1) * size
+  const limit = size
+  const agg = []
+  if (userId !== null && userId !== undefined && userId.trim().length !== 0) {
+    agg.push({
+      $match: {
+        userId,
+      },
+    })
+    total = await roomCol.countDocuments({ userId })
+  }
+  else {
+    total = await roomCol.countDocuments()
+  }
+  const agg2 = [
+    {
+      $lookup: {
+        from: 'chat',
+        localField: 'roomId',
+        foreignField: 'roomId',
+        as: 'chat',
+      },
+    }, {
+      $unwind: {
+        path: '$chat',
+        preserveNullAndEmptyArrays: true,
+      },
+    }, {
+      $group: {
+        _id: '$_id',
+        userId: {
+          $first: '$userId',
+        },
+        title: {
+          $first: '$title',
+        },
+        roomId: {
+          $first: '$roomId',
+        },
+        dateTime: {
+          $last: '$chat.dateTime',
+        },
+        chatCount: {
+          $sum: 1,
+        },
+      },
+    }, {
+      $sort: {
+        dateTime: -1,
+      },
+    }, {
+      $skip: skip,
+    }, {
+      $limit: limit,
+    },
+  ]
+  Array.prototype.push.apply(agg, agg2)
+
+  const cursor = roomCol.aggregate(agg)
+  const data = await cursor.toArray()
+  return { total, data }
+}
+
 export async function getChatRoom(userId: string, roomId: number) {
   return await roomCol.findOne({ userId, roomId, status: { $ne: Status.Deleted } }) as ChatRoom
 }
@@ -152,10 +217,15 @@ export async function deleteAllChatRooms(userId: string) {
   await chatCol.updateMany({ userId, status: Status.Normal }, { $set: { status: Status.Deleted } })
 }
 
-export async function getChats(roomId: number, lastId?: number) {
+export async function getChats(roomId: number, lastId?: number, all?: string) {
   if (!lastId)
     lastId = new Date().getTime()
-  const query = { roomId, uuid: { $lt: lastId }, status: { $ne: Status.Deleted } }
+  let query = {}
+  if (all === null || all === undefined || all.trim().length === 0)
+    query = { roomId, uuid: { $lt: lastId }, status: { $ne: Status.Deleted } }
+  else
+    query = { roomId, uuid: { $lt: lastId } }
+
   const limit = 20
   const cursor = await chatCol.find(query).sort({ dateTime: -1 }).limit(limit)
   const chats = []
diff --git a/src/api/index.ts b/src/api/index.ts
index 3c76a0f1..37df9c97 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -150,6 +150,13 @@ export function fetchGetChatRooms<T = any>() {
   })
 }
 
+export function fetchGetChatRoomsCount<T = any>(page: number, size: number, userId: string) {
+  return get<T>({
+    url: '/chatrooms-count',
+    data: { page, size, userId },
+  })
+}
+
 export function fetchCreateChatRoom<T = any>(title: string, roomId: number) {
   return post<T>({
     url: '/room-create',
@@ -185,9 +192,9 @@ export function fetchDeleteChatRoom<T = any>(roomId: number) {
   })
 }
 
-export function fetchGetChatHistory<T = any>(roomId: number, lastId?: number) {
+export function fetchGetChatHistory<T = any>(roomId: number, lastId?: number, all?: string) {
   return get<T>({
-    url: `/chat-history?roomId=${roomId}&lastId=${lastId}`,
+    url: `/chat-history?roomId=${roomId}&lastId=${lastId}&all=${all}`,
   })
 }
 
diff --git a/src/components/common/Setting/Audit.vue b/src/components/common/Setting/Audit.vue
index b093919b..09c48371 100644
--- a/src/components/common/Setting/Audit.vue
+++ b/src/components/common/Setting/Audit.vue
@@ -1,8 +1,7 @@
 <script setup lang='ts'>
 import { onMounted, ref } from 'vue'
 import { NButton, NInput, NSelect, NSpin, NSwitch, useMessage } from 'naive-ui'
-import type { AuditConfig, ConfigState } from './model'
-import { TextAuditServiceProvider } from './model'
+import type { AuditConfig, ConfigState, TextAuditServiceProvider } from './model'
 import { fetchChatConfig, fetchTestAudit, fetchUpdateAudit } from '@/api'
 import { t } from '@/locales'
 
diff --git a/src/components/common/Setting/ChatRecord.vue b/src/components/common/Setting/ChatRecord.vue
new file mode 100644
index 00000000..76691fc3
--- /dev/null
+++ b/src/components/common/Setting/ChatRecord.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { NButton, NDataTable, NModal, NScrollbar, NSelect, NSpace } from 'naive-ui'
+import { h, onMounted, reactive, ref } from 'vue'
+import Message from './Message/index.vue'
+import { fetchGetChatHistory, fetchGetChatRoomsCount, fetchGetUsers } from '@/api'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
+
+const show = ref(false)
+const { isMobile } = useBasicLayout()
+const dataSources = ref([])
+const selectUserId = ref('')
+const userOptions = ref([{ label: 'all', value: '' }])
+const loading = ref(false)
+const chatRooms = ref([])
+const columns = [{
+  title: 'Last Time',
+  key: 'lastTime',
+  width: 50,
+},
+{
+  title: 'Title',
+  key: 'title',
+  width: 50,
+},
+{
+  title: 'Chat Count',
+  key: 'chatCount',
+  width: 50,
+},
+{
+  title: 'Action',
+  key: 'uuid',
+  width: 50,
+  render(row: any) {
+    const actions: any[] = []
+    actions.push(h(
+      NButton,
+      {
+        size: 'small',
+        type: 'primary',
+        style: {
+          marginRight: '6px',
+        },
+        onClick: () => {
+          show.value = true
+          dataSources.value.length = 0
+          fetchGetChatHistory(row.uuid, undefined, 'all').then((res: any) => {
+            dataSources.value = res.data
+          })
+        },
+      },
+      { default: () => 'view' },
+    ))
+    return actions
+  },
+}]
+const pagination = reactive ({
+  page: 1,
+  pageSize: 25,
+  pageCount: 1,
+  itemCount: 1,
+  prefix({ itemCount }: { itemCount: number | undefined }) {
+    return `Total is ${itemCount}.`
+  },
+  showSizePicker: true,
+  pageSizes: [25, 50, 100],
+  onChange: (page: number) => {
+    pagination.page = page
+    handleGetChatRoomsCount(pagination.page)
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    pagination.pageSize = pageSize
+    pagination.page = 1
+    handleGetChatRoomsCount(pagination.page)
+  },
+})
+
+async function handleSelectUser(value: string) {
+  await handleGetChatRoomsCount(pagination.page)
+}
+
+function handleGetUsers(page: number, size: number) {
+  fetchGetUsers(page, size).then((res: any) => {
+    res.data.users.forEach((d: any) => {
+      userOptions.value.push({
+        label: d.name,
+        value: d._id,
+      })
+    })
+  })
+}
+
+async function handleGetChatRoomsCount(page: number) {
+  if (loading.value)
+    return
+  chatRooms.value.length = 0
+  loading.value = true
+  const size = pagination.pageSize
+  const data = (await fetchGetChatRoomsCount(page, size, selectUserId.value)).data
+  data.data.forEach((d: never) => {
+    chatRooms.value.push(d)
+  })
+  pagination.page = page
+  pagination.pageCount = data.total / size + (data.total % size === 0 ? 0 : 1)
+  pagination.itemCount = data.total
+  loading.value = false
+}
+onMounted(async () => {
+  await handleGetChatRoomsCount(pagination.page)
+  handleGetUsers(1, 100)
+})
+</script>
+
+<template>
+  <div class="p-4 space-y-5 min-h-[200px]">
+    <div class="space-y-6">
+      <NSelect
+        v-model:value="selectUserId"
+        style="width: 250px"
+        :options="userOptions"
+        @update:value="handleSelectUser"
+      />
+      <NSpace vertical :size="12">
+        <NDataTable
+          ref="table"
+          remote
+          :loading="loading"
+          :row-key="(rowData) => rowData._id"
+          :columns="columns"
+          :data="chatRooms"
+          :pagination="pagination"
+          :max-height="444"
+          striped
+          @update:page="handleGetChatRoomsCount"
+        />
+      </NSpace>
+    </div>
+    <NModal v-model:show="show" preset="card" :style="{ width: !isMobile ? '80%' : '100%' }">
+      <NScrollbar style="max-height: 80vh;padding: 0 15px;">
+        <Message
+          v-for="(item, index) of dataSources"
+          :key="index"
+          :date-time="item.dateTime"
+          :text="item.text"
+          :inversion="item.inversion"
+          :response-count="item.responseCount"
+          :usage="item && item.usage || undefined"
+          :error="item.error"
+          :loading="item.loading"
+        />
+      </NScrollbar>
+    </NModal>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/common/Setting/Message/Avatar.vue b/src/components/common/Setting/Message/Avatar.vue
new file mode 100644
index 00000000..fb2454df
--- /dev/null
+++ b/src/components/common/Setting/Message/Avatar.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { NAvatar } from 'naive-ui'
+import defaultAvatar from '@/assets/avatar.jpg'
+
+interface Props {
+  image?: boolean
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <template v-if="image">
+    <NAvatar round :src="defaultAvatar" />
+  </template>
+  <span v-else class="text-[28px] dark:text-white">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" width="1em" height="1em">
+      <path d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z" fill="currentColor" />
+    </svg>
+  </span>
+</template>
diff --git a/src/components/common/Setting/Message/Text.vue b/src/components/common/Setting/Message/Text.vue
new file mode 100644
index 00000000..25c3b7ad
--- /dev/null
+++ b/src/components/common/Setting/Message/Text.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue'
+import MarkdownIt from 'markdown-it'
+import mdKatex from '@traptitech/markdown-it-katex'
+import mila from 'markdown-it-link-attributes'
+import hljs from 'highlight.js'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { t } from '@/locales'
+import { copyToClip } from '@/utils/copy'
+
+interface Props {
+  inversion?: boolean
+  error?: boolean
+  text?: string
+  loading?: boolean
+  asRawText?: boolean
+}
+
+const props = defineProps<Props>()
+
+const { isMobile } = useBasicLayout()
+
+const textRef = ref<HTMLElement>()
+
+const mdi = new MarkdownIt({
+  html: false,
+  linkify: true,
+  highlight(code, language) {
+    const validLang = !!(language && hljs.getLanguage(language))
+    if (validLang) {
+      const lang = language ?? ''
+      return highlightBlock(hljs.highlight(code, { language: lang }).value, lang)
+    }
+    return highlightBlock(hljs.highlightAuto(code).value, '')
+  },
+})
+
+mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } })
+mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
+
+const wrapClass = computed(() => {
+  return [
+    'text-wrap',
+    'min-w-[20px]',
+    'rounded-md',
+    isMobile.value ? 'p-2' : 'px-3 py-2',
+    props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
+    props.inversion ? 'dark:bg-[#a1dc95]' : 'dark:bg-[#1e1e20]',
+    props.inversion ? 'message-request' : 'message-reply',
+    { 'text-red-500': props.error },
+  ]
+})
+
+const text = computed(() => {
+  const value = props.text ?? ''
+  if (!props.asRawText)
+    return mdi.render(value)
+  return value
+})
+
+function highlightBlock(str: string, lang?: string) {
+  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 ${lang}">${str}</code></pre>`
+}
+
+function addCopyEvents() {
+  if (textRef.value) {
+    const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy')
+    copyBtn.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const code = btn.parentElement?.nextElementSibling?.textContent
+        if (code) {
+          copyToClip(code).then(() => {
+            btn.textContent = '复制成功'
+            setTimeout(() => {
+              btn.textContent = '复制代码'
+            }, 1000)
+          })
+        }
+      })
+    })
+  }
+}
+function removeCopyEvents() {
+  if (textRef.value) {
+    const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy')
+    copyBtn.forEach((btn) => {
+      btn.removeEventListener('click', () => { })
+    })
+  }
+}
+onMounted(() => {
+  addCopyEvents()
+})
+onUpdated(() => {
+  addCopyEvents()
+})
+onUnmounted(() => {
+  removeCopyEvents()
+})
+</script>
+
+<template>
+  <div class="text-black" :class="wrapClass">
+    <div ref="textRef" class="leading-relaxed break-words">
+      <div v-if="!inversion" class="flex items-end">
+        <div v-if="!asRawText" class="w-full markdown-body" v-html="text" />
+        <div v-else class="w-full whitespace-pre-wrap" v-text="text" />
+        <span v-if="loading" class="dark:text-white w-[4px] h-[20px] block animate-blink" />
+      </div>
+      <div v-else class="whitespace-pre-wrap" v-text="text" />
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+@import url(./style.less);
+</style>
diff --git a/src/components/common/Setting/Message/index.vue b/src/components/common/Setting/Message/index.vue
new file mode 100644
index 00000000..2048ff1c
--- /dev/null
+++ b/src/components/common/Setting/Message/index.vue
@@ -0,0 +1,187 @@
+<script setup lang='ts'>
+import { computed, ref } from 'vue'
+import { NButton, NButtonGroup, NPopover, NSpace, useMessage } from 'naive-ui'
+import AvatarComponent from './Avatar.vue'
+import TextComponent from './Text.vue'
+import { useIconRender } from '@/hooks/useIconRender'
+import { t } from '@/locales'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { copyToClip } from '@/utils/copy'
+
+interface Props {
+  dateTime?: string
+  text?: string
+  inversion?: boolean
+  error?: boolean
+  loading?: boolean
+  responseCount?: number
+  usage?: {
+    completion_tokens: number
+    prompt_tokens: number
+    total_tokens: number
+    estimated: boolean
+  }
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+interface Emit {
+  (ev: 'regenerate'): void
+  (ev: 'delete'): void
+  (ev: 'responseHistory', historyIndex: number): void
+}
+
+const { isMobile } = useBasicLayout()
+
+const { iconRender } = useIconRender()
+
+const message = useMessage()
+
+const textRef = ref<HTMLElement>()
+
+const asRawText = ref(props.inversion)
+
+const messageRef = ref<HTMLElement>()
+
+const indexRef = ref<number>(0)
+indexRef.value = props.responseCount ?? 0
+
+const url_openai_token = 'https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them'
+
+const options = computed(() => {
+  const common = [
+    {
+      label: t('chat.copy'),
+      key: 'copyText',
+      icon: iconRender({ icon: 'ri:file-copy-2-line' }),
+    },
+    {
+      label: t('common.delete'),
+      key: 'delete',
+      icon: iconRender({ icon: 'ri:delete-bin-line' }),
+    },
+  ]
+
+  if (!props.inversion) {
+    common.unshift({
+      label: asRawText.value ? t('chat.preview') : t('chat.showRawText'),
+      key: 'toggleRenderType',
+      icon: iconRender({ icon: asRawText.value ? 'ic:outline-code-off' : 'ic:outline-code' }),
+    })
+  }
+
+  return common
+})
+
+function handleSelect(key: 'copyText' | 'delete' | 'toggleRenderType') {
+  switch (key) {
+    case 'copyText':
+      handleCopy()
+      return
+    case 'toggleRenderType':
+      asRawText.value = !asRawText.value
+      return
+    case 'delete':
+      emit('delete')
+  }
+}
+
+function handleRegenerate() {
+  messageRef.value?.scrollIntoView()
+  emit('regenerate')
+}
+
+async function handleCopy() {
+  try {
+    await copyToClip(props.text || '')
+    message.success('复制成功')
+  }
+  catch {
+    message.error('复制失败')
+  }
+}
+
+async function handlePreviousResponse(next: number) {
+  if (indexRef.value + next < 1 || indexRef.value + next > props.responseCount!)
+    return
+  indexRef.value += next
+  emit('responseHistory', indexRef.value - 1)
+}
+</script>
+
+<template>
+  <div
+    ref="messageRef"
+    class="flex w-full mb-6 overflow-hidden"
+    :class="[{ 'flex-row-reverse': inversion }]"
+  >
+    <div
+      class="flex items-center justify-center flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
+      :class="[inversion ? 'ml-2' : 'mr-2']"
+    >
+      <AvatarComponent :image="inversion" />
+    </div>
+    <div class="overflow-hidden text-sm " :class="[inversion ? 'items-end' : 'items-start']">
+      <p v-if="inversion" class="text-xs text-[#b4bbc4]" :class="[inversion ? 'text-right' : 'text-left']">
+        {{ new Date(dateTime as string).toLocaleString() }}
+      </p>
+      <p v-else class="text-xs text-[#b4bbc4]" :class="[inversion ? 'text-right' : 'text-left']">
+        <NSpace>
+          {{ new Date(dateTime as string).toLocaleString() }}
+          <NButtonGroup v-if="!inversion && responseCount && responseCount > 1">
+            <NButton
+              style="cursor: pointer;"
+              size="tiny" quaternary
+              :disabled="indexRef === 1"
+              @click="handlePreviousResponse(-1)"
+            >
+              <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="-3 3 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6" /></svg>
+            </NButton>
+            <span class="text-xs text-[#b4bbc4]"> {{ indexRef }} / {{ responseCount }}</span>
+            <NButton
+              style="cursor: pointer;"
+              size="tiny" quaternary
+              :disabled="indexRef === responseCount"
+              @click="handlePreviousResponse(1)"
+            >
+              <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="3 3 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6" /></svg>
+            </NButton>
+          </NButtonGroup>
+          <template v-if="usage">
+            <NPopover trigger="hover">
+              <template #trigger>
+                <span>
+                  <span>[</span>
+                  <span>{{ usage.estimated ? '~' : '' }}</span>
+                  <span>{{ usage.prompt_tokens }}+{{ usage.completion_tokens }}={{ usage.total_tokens }}</span>
+                  <span>]</span>
+                </span>
+              </template>
+              <span class="text-xs">
+                {{ usage.estimated ? t('chat.usageEstimate') : '' }}
+                {{ t('chat.usagePrompt') }} {{ usage.prompt_tokens }}
+                + {{ t('chat.usageResponse') }} {{ usage.completion_tokens }}
+                = {{ t('chat.usageTotal') }}<a :href="url_openai_token" target="_blank">(?)</a>
+                {{ usage.total_tokens }}
+              </span>
+            </NPopover>
+          </template>
+        </NSpace>
+      </p>
+      <div
+        class="flex items-end gap-1 mt-2"
+        :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
+      >
+        <TextComponent
+          ref="textRef"
+          :inversion="inversion"
+          :error="error"
+          :text="text"
+          :loading="loading"
+          :as-raw-text="asRawText"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/common/Setting/Message/style.less b/src/components/common/Setting/Message/style.less
new file mode 100644
index 00000000..0b2bbf8c
--- /dev/null
+++ b/src/components/common/Setting/Message/style.less
@@ -0,0 +1,75 @@
+.markdown-body {
+	background-color: transparent;
+	font-size: 14px;
+
+	p {
+		white-space: pre-wrap;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	pre code,
+	pre tt {
+		line-height: 1.65;
+	}
+
+	.highlight pre,
+	pre {
+		background-color: #fff;
+	}
+
+	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 {
+
+	.message-reply {
+		.whitespace-pre-wrap {
+			white-space: pre-wrap;
+			color: var(--n-text-color);
+		}
+	}
+
+	.highlight pre,
+	pre {
+		background-color: #282c34;
+	}
+}
diff --git a/src/components/common/Setting/index.vue b/src/components/common/Setting/index.vue
index c97ec9ce..2d802f80 100644
--- a/src/components/common/Setting/index.vue
+++ b/src/components/common/Setting/index.vue
@@ -13,6 +13,7 @@ import Key from './Keys.vue'
 import { SvgIcon } from '@/components/common'
 import { useAuthStore, useUserStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
+import ChatRecord from '@/components/common/Setting/ChatRecord.vue'
 
 const props = defineProps<Props>()
 
@@ -82,6 +83,27 @@ const show = computed({
           </template>
           <About />
         </NTabPane>
+        <NTabPane v-if="userStore.userInfo.root" name="ChatRecord" tab="ChatRecord">
+          <template #tab>
+            <SvgIcon class="text-lg" icon="ic:outline-chat" />
+            <span class="ml-2">{{ $t('setting.chatRecord') }}</span>
+          </template>
+          <ChatRecord />
+        </NTabPane>
+        <NTabPane v-if="userStore.userInfo.root" name="UserConfig" tab="UserConfig">
+          <template #tab>
+            <SvgIcon class="text-lg" icon="ri-user-5-line" />
+            <span class="ml-2">{{ $t('setting.userConfig') }}</span>
+          </template>
+          <User />
+        </NTabPane>
+        <NTabPane v-if="userStore.userInfo.root" name="KeysConfig" tab="KeysConfig">
+          <template #tab>
+            <SvgIcon class="text-lg" icon="ri-key-2-line" />
+            <span class="ml-2">{{ $t('setting.keysConfig') }}</span>
+          </template>
+          <Key />
+        </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="SiteConfig" tab="SiteConfig">
           <template #tab>
             <SvgIcon class="text-lg" icon="ri:settings-line" />
@@ -103,20 +125,6 @@ const show = computed({
           </template>
           <Audit />
         </NTabPane>
-        <NTabPane v-if="userStore.userInfo.root" name="UserConfig" tab="UserConfig">
-          <template #tab>
-            <SvgIcon class="text-lg" icon="ri-user-5-line" />
-            <span class="ml-2">{{ $t('setting.userConfig') }}</span>
-          </template>
-          <User />
-        </NTabPane>
-        <NTabPane v-if="userStore.userInfo.root" name="KeysConfig" tab="KeysConfig">
-          <template #tab>
-            <SvgIcon class="text-lg" icon="ri-key-2-line" />
-            <span class="ml-2">{{ $t('setting.keysConfig') }}</span>
-          </template>
-          <Key />
-        </NTabPane>
       </NTabs>
     </div>
   </NModal>
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index d7e7d7d6..2f8bf1ec 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -77,6 +77,7 @@ export default {
     advanced: 'Advanced',
     statistics: 'Statistics',
     config: 'Base Config',
+    chatRecord: 'Chat History',
     siteConfig: 'Site Config',
     mailConfig: 'Mail Config',
     auditConfig: 'Audit Config',
diff --git a/src/locales/ko-KR.ts b/src/locales/ko-KR.ts
index 9bae20e0..fcf5001f 100644
--- a/src/locales/ko-KR.ts
+++ b/src/locales/ko-KR.ts
@@ -77,6 +77,7 @@ export default {
     advanced: '고급',
     config: '기본 구성',
     statistics: '통계학',
+    chatRecord: '채팅 기록',
     siteConfig: '사이트 구성',
     mailConfig: '메일 구성',
     auditConfig: '감사 구성',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 0eb570dc..328390a3 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -77,6 +77,7 @@ export default {
     advanced: '高级',
     statistics: '统计',
     config: '基本配置',
+    chatRecord: '聊天记录',
     siteConfig: '网站配置',
     mailConfig: '邮箱配置',
     auditConfig: '敏感词审核',
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
index 2a4051ca..ae388263 100644
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -77,6 +77,7 @@ export default {
     advanced: '高級',
     statistics: '統計',
     config: '基本設定',
+    chatRecord: '聊天紀錄',
     siteConfig: '网站配置',
     mailConfig: '邮箱配置',
     auditConfig: '敏感词审核',

From 7414dc578876664882eeb6a32027634a9db07f49 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 29 Aug 2023 15:49:48 +0800
Subject: [PATCH 04/20] refactor: add chat record

---
 src/components/common/Setting/ChatRecord.vue  |  4 +-
 .../common/Setting/Message/index.vue          | 66 +------------------
 2 files changed, 4 insertions(+), 66 deletions(-)

diff --git a/src/components/common/Setting/ChatRecord.vue b/src/components/common/Setting/ChatRecord.vue
index 76691fc3..f46cc041 100644
--- a/src/components/common/Setting/ChatRecord.vue
+++ b/src/components/common/Setting/ChatRecord.vue
@@ -45,7 +45,7 @@ const columns = [{
           show.value = true
           dataSources.value.length = 0
           fetchGetChatHistory(row.uuid, undefined, 'all').then((res: any) => {
-            dataSources.value = res.data
+            dataSources.value = res.data as Chat.Chat[]
           })
         },
       },
@@ -75,7 +75,7 @@ const pagination = reactive ({
   },
 })
 
-async function handleSelectUser(value: string) {
+async function handleSelectUser() {
   await handleGetChatRoomsCount(pagination.page)
 }
 
diff --git a/src/components/common/Setting/Message/index.vue b/src/components/common/Setting/Message/index.vue
index 2048ff1c..97533878 100644
--- a/src/components/common/Setting/Message/index.vue
+++ b/src/components/common/Setting/Message/index.vue
@@ -1,12 +1,9 @@
 <script setup lang='ts'>
-import { computed, ref } from 'vue'
-import { NButton, NButtonGroup, NPopover, NSpace, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { NButton, NButtonGroup, NPopover, NSpace } from 'naive-ui'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
-import { useIconRender } from '@/hooks/useIconRender'
 import { t } from '@/locales'
-import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { copyToClip } from '@/utils/copy'
 
 interface Props {
   dateTime?: string
@@ -32,12 +29,6 @@ interface Emit {
   (ev: 'responseHistory', historyIndex: number): void
 }
 
-const { isMobile } = useBasicLayout()
-
-const { iconRender } = useIconRender()
-
-const message = useMessage()
-
 const textRef = ref<HTMLElement>()
 
 const asRawText = ref(props.inversion)
@@ -49,59 +40,6 @@ indexRef.value = props.responseCount ?? 0
 
 const url_openai_token = 'https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them'
 
-const options = computed(() => {
-  const common = [
-    {
-      label: t('chat.copy'),
-      key: 'copyText',
-      icon: iconRender({ icon: 'ri:file-copy-2-line' }),
-    },
-    {
-      label: t('common.delete'),
-      key: 'delete',
-      icon: iconRender({ icon: 'ri:delete-bin-line' }),
-    },
-  ]
-
-  if (!props.inversion) {
-    common.unshift({
-      label: asRawText.value ? t('chat.preview') : t('chat.showRawText'),
-      key: 'toggleRenderType',
-      icon: iconRender({ icon: asRawText.value ? 'ic:outline-code-off' : 'ic:outline-code' }),
-    })
-  }
-
-  return common
-})
-
-function handleSelect(key: 'copyText' | 'delete' | 'toggleRenderType') {
-  switch (key) {
-    case 'copyText':
-      handleCopy()
-      return
-    case 'toggleRenderType':
-      asRawText.value = !asRawText.value
-      return
-    case 'delete':
-      emit('delete')
-  }
-}
-
-function handleRegenerate() {
-  messageRef.value?.scrollIntoView()
-  emit('regenerate')
-}
-
-async function handleCopy() {
-  try {
-    await copyToClip(props.text || '')
-    message.success('复制成功')
-  }
-  catch {
-    message.error('复制失败')
-  }
-}
-
 async function handlePreviousResponse(next: number) {
   if (indexRef.value + next < 1 || indexRef.value + next > props.responseCount!)
     return

From 7c0d42e98f78fd7d6ea017b9cd90547badaa369f Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 29 Aug 2023 16:00:00 +0800
Subject: [PATCH 05/20] refactor: add chat record

---
 src/components/common/Setting/ChatRecord.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Setting/ChatRecord.vue b/src/components/common/Setting/ChatRecord.vue
index f46cc041..829358a6 100644
--- a/src/components/common/Setting/ChatRecord.vue
+++ b/src/components/common/Setting/ChatRecord.vue
@@ -5,6 +5,22 @@ import Message from './Message/index.vue'
 import { fetchGetChatHistory, fetchGetChatRoomsCount, fetchGetUsers } from '@/api'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 
+interface historyChat {
+  uuid?: number
+  dateTime: string
+  text: string
+  inversion?: boolean
+  responseCount?: number
+  error?: boolean
+  loading?: boolean
+  usage?: {
+    completion_tokens: number
+    prompt_tokens: number
+    total_tokens: number
+    estimated: boolean
+  }
+}
+
 const show = ref(false)
 const { isMobile } = useBasicLayout()
 const dataSources = ref([])
@@ -45,7 +61,7 @@ const columns = [{
           show.value = true
           dataSources.value.length = 0
           fetchGetChatHistory(row.uuid, undefined, 'all').then((res: any) => {
-            dataSources.value = res.data as Chat.Chat[]
+            dataSources.value = res.data as historyChat[]
           })
         },
       },

From 23e7d2edb7b90a7b470ad74a5c744af4c301ee3a Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 29 Aug 2023 16:06:22 +0800
Subject: [PATCH 06/20] refactor: add chat record

---
 src/components/common/Setting/ChatRecord.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/Setting/ChatRecord.vue b/src/components/common/Setting/ChatRecord.vue
index 829358a6..aef28a67 100644
--- a/src/components/common/Setting/ChatRecord.vue
+++ b/src/components/common/Setting/ChatRecord.vue
@@ -5,7 +5,7 @@ import Message from './Message/index.vue'
 import { fetchGetChatHistory, fetchGetChatRoomsCount, fetchGetUsers } from '@/api'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 
-interface historyChat {
+interface HistoryChat {
   uuid?: number
   dateTime: string
   text: string
@@ -23,7 +23,7 @@ interface historyChat {
 
 const show = ref(false)
 const { isMobile } = useBasicLayout()
-const dataSources = ref([])
+const dataSources = ref<HistoryChat[]>([])
 const selectUserId = ref('')
 const userOptions = ref([{ label: 'all', value: '' }])
 const loading = ref(false)
@@ -61,7 +61,7 @@ const columns = [{
           show.value = true
           dataSources.value.length = 0
           fetchGetChatHistory(row.uuid, undefined, 'all').then((res: any) => {
-            dataSources.value = res.data as historyChat[]
+            dataSources.value = res.data as HistoryChat[]
           })
         },
       },

From 38e03f13da7658ba77f0d55e4f65373b9af5ae6a Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 29 Aug 2023 17:27:08 +0800
Subject: [PATCH 07/20] perf: chat record

---
 service/src/index.ts                         | 25 +++++++++++++++++++-
 service/src/storage/mongo.ts                 |  4 ++--
 src/components/common/Setting/ChatRecord.vue |  3 +++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/service/src/index.ts b/service/src/index.ts
index 1b591a31..6dd6e623 100644
--- a/service/src/index.ts
+++ b/service/src/index.ts
@@ -221,11 +221,34 @@ router.get('/chat-history', auth, async (req, res) => {
     const roomId = +req.query.roomId
     const lastId = req.query.lastId as string
     const all = req.query.all as string
-    if (!roomId || !await existsChatRoom(userId, roomId)) {
+    if ((!roomId || !await existsChatRoom(userId, roomId)) && (all === null || all === 'undefined' || all === undefined || all.trim().length === 0)) {
       res.send({ status: 'Success', message: null, data: [] })
       // res.send({ status: 'Fail', message: 'Unknow room', data: null })
       return
     }
+
+    if (all !== null && all !== 'undefined' && all !== undefined && all.trim().length !== 0) {
+      const config = await getCacheConfig()
+      if (config.siteConfig.loginEnabled) {
+        try {
+          const token = req.header('Authorization').replace('Bearer ', '')
+          const info = jwt.verify(token, config.siteConfig.loginSalt.trim())
+          req.headers.userId = info.userId
+          const user = await getUserById(info.userId)
+          if (user == null || user.status !== Status.Normal || !user.roles.includes(UserRole.Admin)) {
+            res.send({ status: 'Fail', message: '无权限 | No permission.', data: null })
+            return
+          }
+        }
+        catch (error) {
+          res.send({ status: 'Unauthorized', message: error.message ?? 'Please authenticate.', data: null })
+        }
+      }
+      else {
+        res.send({ status: 'Fail', message: '无权限 | No permission.', data: null })
+      }
+    }
+
     const chats = await getChats(roomId, !isNotEmptyString(lastId) ? null : parseInt(lastId), all)
     const result = []
     chats.forEach((c) => {
diff --git a/service/src/storage/mongo.ts b/service/src/storage/mongo.ts
index f842f9a7..3e525f9d 100644
--- a/service/src/storage/mongo.ts
+++ b/service/src/storage/mongo.ts
@@ -143,7 +143,7 @@ export async function getChatRoomsCount(userId: string, page: number, size: numb
   const skip = (page - 1) * size
   const limit = size
   const agg = []
-  if (userId !== null && userId !== undefined && userId.trim().length !== 0) {
+  if (userId !== null && userId !== 'undefined' && userId !== undefined && userId.trim().length !== 0) {
     agg.push({
       $match: {
         userId,
@@ -221,7 +221,7 @@ export async function getChats(roomId: number, lastId?: number, all?: string) {
   if (!lastId)
     lastId = new Date().getTime()
   let query = {}
-  if (all === null || all === undefined || all.trim().length === 0)
+  if (all === null || all === 'undefined' || all === undefined || all.trim().length === 0)
     query = { roomId, uuid: { $lt: lastId }, status: { $ne: Status.Deleted } }
   else
     query = { roomId, uuid: { $lt: lastId } }
diff --git a/src/components/common/Setting/ChatRecord.vue b/src/components/common/Setting/ChatRecord.vue
index aef28a67..a3d1cd92 100644
--- a/src/components/common/Setting/ChatRecord.vue
+++ b/src/components/common/Setting/ChatRecord.vue
@@ -37,6 +37,9 @@ const columns = [{
   title: 'Title',
   key: 'title',
   width: 50,
+  ellipsis: {
+    tooltip: true,
+  },
 },
 {
   title: 'Chat Count',

From 92a7b616eeb860340aa3599df65a3ada8224585c Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 31 Aug 2023 13:04:02 +0800
Subject: [PATCH 08/20] perf: chat record

---
 service/src/index.ts                         |  1 +
 service/src/storage/mongo.ts                 | 24 +++++++++++++++++++-
 src/components/common/Setting/ChatRecord.vue | 16 +++++++++----
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/service/src/index.ts b/service/src/index.ts
index 6dd6e623..f79fbd95 100644
--- a/service/src/index.ts
+++ b/service/src/index.ts
@@ -112,6 +112,7 @@ router.get('/chatrooms-count', auth, async (req, res) => {
         uuid: r.roomId,
         title: r.title,
         userId: r.userId,
+        name: r.username,
         lastTime: formatTimestamp(r.dateTime),
         chatCount: r.chatCount,
       })
diff --git a/service/src/storage/mongo.ts b/service/src/storage/mongo.ts
index 3e525f9d..e54827e8 100644
--- a/service/src/storage/mongo.ts
+++ b/service/src/storage/mongo.ts
@@ -165,7 +165,26 @@ export async function getChatRoomsCount(userId: string, page: number, size: numb
     }, {
       $unwind: {
         path: '$chat',
-        preserveNullAndEmptyArrays: true,
+        preserveNullAndEmptyArrays: false,
+      },
+    }, {
+      $addFields: {
+        title: '$chat.prompt',
+        user_ObjectId: {
+          $toObjectId: '$userId',
+        },
+      },
+    }, {
+      $lookup: {
+        from: 'user',
+        localField: 'user_ObjectId',
+        foreignField: '_id',
+        as: 'user',
+      },
+    }, {
+      $unwind: {
+        path: '$user',
+        preserveNullAndEmptyArrays: false,
       },
     }, {
       $group: {
@@ -179,6 +198,9 @@ export async function getChatRoomsCount(userId: string, page: number, size: numb
         roomId: {
           $first: '$roomId',
         },
+        username: {
+          $first: '$user.name',
+        },
         dateTime: {
           $last: '$chat.dateTime',
         },
diff --git a/src/components/common/Setting/ChatRecord.vue b/src/components/common/Setting/ChatRecord.vue
index a3d1cd92..0c126e2b 100644
--- a/src/components/common/Setting/ChatRecord.vue
+++ b/src/components/common/Setting/ChatRecord.vue
@@ -31,12 +31,20 @@ const chatRooms = ref([])
 const columns = [{
   title: 'Last Time',
   key: 'lastTime',
-  width: 50,
+  width: 35,
+},
+{
+  title: 'username',
+  key: 'name',
+  width: 30,
+  ellipsis: {
+    tooltip: true,
+  },
 },
 {
   title: 'Title',
   key: 'title',
-  width: 50,
+  width: 100,
   ellipsis: {
     tooltip: true,
   },
@@ -44,12 +52,12 @@ const columns = [{
 {
   title: 'Chat Count',
   key: 'chatCount',
-  width: 50,
+  width: 20,
 },
 {
   title: 'Action',
   key: 'uuid',
-  width: 50,
+  width: 20,
   render(row: any) {
     const actions: any[] = []
     actions.push(h(

From 6e2811f1f7b6367f46e858e0f6d5a71ba880c5b4 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 31 Aug 2023 14:05:38 +0800
Subject: [PATCH 09/20] perf: remove Shift+Enter line breaks from text copied
 to the clipboard

---
 src/utils/copy.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/utils/copy.ts b/src/utils/copy.ts
index 6fd32d8b..56bc47a3 100644
--- a/src/utils/copy.ts
+++ b/src/utils/copy.ts
@@ -3,13 +3,14 @@ export function copyToClip(text: string) {
     try {
       const input: HTMLTextAreaElement = document.createElement('textarea')
       input.setAttribute('readonly', 'readonly')
-      input.value = text
+      const tempText = text.replace(/\s+$/g, '')
+      input.value = tempText
       document.body.appendChild(input)
       input.select()
       if (document.execCommand('copy'))
         document.execCommand('copy')
       document.body.removeChild(input)
-      resolve(text)
+      resolve(tempText)
     }
     catch (error) {
       reject(error)

From 485df4d233dff233f8f95e3e427e3910bc19d14a Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 31 Aug 2023 14:19:13 +0800
Subject: [PATCH 10/20] perf: chat record

---
 service/src/storage/mongo.ts                 |  4 ++
 src/components/common/Setting/ChatRecord.vue | 44 +++++++++++++-------
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/service/src/storage/mongo.ts b/service/src/storage/mongo.ts
index e54827e8..2226622e 100644
--- a/service/src/storage/mongo.ts
+++ b/service/src/storage/mongo.ts
@@ -186,6 +186,10 @@ export async function getChatRoomsCount(userId: string, page: number, size: numb
         path: '$user',
         preserveNullAndEmptyArrays: false,
       },
+    }, {
+      $sort: {
+        'chat.dateTime': -1,
+      },
     }, {
       $group: {
         _id: '$_id',
diff --git a/src/components/common/Setting/ChatRecord.vue b/src/components/common/Setting/ChatRecord.vue
index 0c126e2b..6e2f3043 100644
--- a/src/components/common/Setting/ChatRecord.vue
+++ b/src/components/common/Setting/ChatRecord.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { NButton, NDataTable, NModal, NScrollbar, NSelect, NSpace } from 'naive-ui'
+import { NButton, NDataTable, NModal, NScrollbar, NSelect, NSpace, NSpin } from 'naive-ui'
 import { h, onMounted, reactive, ref } from 'vue'
 import Message from './Message/index.vue'
 import { fetchGetChatHistory, fetchGetChatRoomsCount, fetchGetUsers } from '@/api'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { SvgIcon } from '@/components/common'
 
 interface HistoryChat {
   uuid?: number
@@ -27,6 +28,7 @@ const dataSources = ref<HistoryChat[]>([])
 const selectUserId = ref('')
 const userOptions = ref([{ label: 'all', value: '' }])
 const loading = ref(false)
+const chatLoading = ref(false)
 const chatRooms = ref([])
 const columns = [{
   title: 'Last Time',
@@ -71,8 +73,10 @@ const columns = [{
         onClick: () => {
           show.value = true
           dataSources.value.length = 0
+          chatLoading.value = true
           fetchGetChatHistory(row.uuid, undefined, 'all').then((res: any) => {
             dataSources.value = res.data as HistoryChat[]
+            chatLoading.value = false
           })
         },
       },
@@ -163,19 +167,31 @@ onMounted(async () => {
       </NSpace>
     </div>
     <NModal v-model:show="show" preset="card" :style="{ width: !isMobile ? '80%' : '100%' }">
-      <NScrollbar style="max-height: 80vh;padding: 0 15px;">
-        <Message
-          v-for="(item, index) of dataSources"
-          :key="index"
-          :date-time="item.dateTime"
-          :text="item.text"
-          :inversion="item.inversion"
-          :response-count="item.responseCount"
-          :usage="item && item.usage || undefined"
-          :error="item.error"
-          :loading="item.loading"
-        />
-      </NScrollbar>
+      <NSpin :show="chatLoading">
+        <template v-if="!dataSources.length">
+          <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
+            <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
+            <span>Aha~</span>
+          </div>
+        </template>
+        <template v-else>
+          <div>
+            <NScrollbar style="max-height: 80vh;padding: 0 15px;">
+              <Message
+                v-for="(item, index) of dataSources"
+                :key="index"
+                :date-time="item.dateTime"
+                :text="item.text"
+                :inversion="item.inversion"
+                :response-count="item.responseCount"
+                :usage="item && item.usage || undefined"
+                :error="item.error"
+                :loading="item.loading"
+              />
+            </NScrollbar>
+          </div>
+        </template>
+      </NSpin>
     </NModal>
   </div>
 </template>

From 5809f2245be085ebe930b6b6de994b4f726c6f39 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 31 Aug 2023 18:27:18 +0800
Subject: [PATCH 11/20] feat: the prompt word store is saved to the database

---
 service/src/index.ts                        |  52 ++++++++-
 service/src/storage/model.ts                |  12 +++
 service/src/storage/mongo.ts                |  31 +++++-
 src/api/index.ts                            |  23 +++-
 src/components/common/PromptStore/index.vue | 112 ++++++++++++++------
 src/components/common/Setting/model.ts      |  10 ++
 6 files changed, 203 insertions(+), 37 deletions(-)

diff --git a/service/src/index.ts b/service/src/index.ts
index f79fbd95..6a0270a7 100644
--- a/service/src/index.ts
+++ b/service/src/index.ts
@@ -8,7 +8,7 @@ import type { ChatMessage } from './chatgpt'
 import { abortChatProcess, chatConfig, chatReplyProcess, containsSensitiveWords, initAuditService } from './chatgpt'
 import { auth, getUserId } from './middleware/auth'
 import { clearApiKeyCache, clearConfigCache, getApiKeys, getCacheApiKeys, getCacheConfig, getOriginConfig } from './storage/config'
-import type { AuditConfig, CHATMODEL, ChatInfo, ChatOptions, Config, KeyConfig, MailConfig, SiteConfig, UserConfig, UserInfo } from './storage/model'
+import type { AuditConfig, CHATMODEL, ChatInfo, ChatOptions, Config, KeyConfig, MailConfig, SiteConfig, UserConfig, UserInfo, UserPrompt } from './storage/model'
 import { Status, UsageResponse, UserRole, chatModelOptions } from './storage/model'
 import {
   clearChat,
@@ -17,6 +17,7 @@ import {
   deleteAllChatRooms,
   deleteChat,
   deleteChatRoom,
+  deleteUserPrompt,
   existsChatRoom,
   getChat,
   getChatRoom,
@@ -25,6 +26,7 @@ import {
   getChats,
   getUser,
   getUserById,
+  getUserPromptList,
   getUserStatisticsByDay,
   getUsers,
   insertChat,
@@ -42,6 +44,7 @@ import {
   updateUserPassword,
   updateUserStatus,
   upsertKey,
+  upsertUserPrompt,
   verifyUser,
 } from './storage/mongo'
 import { authLimiter, limiter } from './middleware/limiter'
@@ -1045,6 +1048,53 @@ router.post('/statistics/by-day', auth, async (req, res) => {
   }
 })
 
+router.get('/prompt-list', auth, async (req, res) => {
+  try {
+    const userId = req.headers.userId as string
+    const page = +req.query.page
+    const size = +req.query.size
+    const prompts = await getUserPromptList(userId, page, size)
+    const result = []
+    prompts.data.forEach((p) => {
+      result.push({
+        _id: p._id,
+        title: p.title,
+        value: p.value,
+      })
+    })
+    res.send({ status: 'Success', message: null, data: { data: result, total: prompts.total } })
+  }
+  catch (error) {
+    res.send({ status: 'Fail', message: error.message, data: null })
+  }
+})
+
+router.post('/prompt-upsert', auth, async (req, res) => {
+  try {
+    const userId = req.headers.userId as string
+    const userPrompt = req.body as UserPrompt
+    if (userPrompt._id !== undefined)
+      userPrompt._id = new ObjectId(userPrompt._id)
+    userPrompt.userId = userId
+    await upsertUserPrompt(userPrompt)
+    res.send({ status: 'Success', message: '成功 | Successfully' })
+  }
+  catch (error) {
+    res.send({ status: 'Fail', message: error.message, data: null })
+  }
+})
+
+router.post('/prompt-delete', auth, async (req, res) => {
+  try {
+    const { id } = req.body as { id: string }
+    await deleteUserPrompt(id)
+    res.send({ status: 'Success', message: '成功 | Successfully' })
+  }
+  catch (error) {
+    res.send({ status: 'Fail', message: error.message, data: null })
+  }
+})
+
 app.use('', router)
 app.use('/api', router)
 
diff --git a/service/src/storage/model.ts b/service/src/storage/model.ts
index f19934de..83f8c9d0 100644
--- a/service/src/storage/model.ts
+++ b/service/src/storage/model.ts
@@ -244,4 +244,16 @@ export class KeyConfig {
   }
 }
 
+export class UserPrompt {
+  _id: ObjectId
+  userId: string
+  title: string
+  value: string
+  constructor(userId: string, title: string, value: string) {
+    this.userId = userId
+    this.title = title
+    this.value = value
+  }
+}
+
 export type APIMODEL = 'ChatGPTAPI' | 'ChatGPTUnofficialProxyAPI'
diff --git a/service/src/storage/mongo.ts b/service/src/storage/mongo.ts
index 2226622e..081d065e 100644
--- a/service/src/storage/mongo.ts
+++ b/service/src/storage/mongo.ts
@@ -1,9 +1,9 @@
-import { MongoClient, ObjectId } from 'mongodb'
-import * as dotenv from 'dotenv'
 import dayjs from 'dayjs'
+import * as dotenv from 'dotenv'
+import { MongoClient, ObjectId } from 'mongodb'
 import { md5 } from '../utils/security'
+import type { CHATMODEL, ChatOptions, Config, KeyConfig, UsageResponse, UserPrompt } from './model'
 import { ChatInfo, ChatRoom, ChatUsage, Status, UserConfig, UserInfo, UserRole } from './model'
-import type { CHATMODEL, ChatOptions, Config, KeyConfig, UsageResponse } from './model'
 
 dotenv.config()
 
@@ -17,6 +17,7 @@ const userCol = client.db(dbName).collection('user')
 const configCol = client.db(dbName).collection('config')
 const usageCol = client.db(dbName).collection('chat_usage')
 const keyCol = client.db(dbName).collection('key_config')
+const userPromptCol = client.db(dbName).collection('user_prompt')
 
 /**
  * 插入聊天信息
@@ -487,3 +488,27 @@ export async function upsertKey(key: KeyConfig): Promise<KeyConfig> {
 export async function updateApiKeyStatus(id: string, status: Status) {
   return await keyCol.updateOne({ _id: new ObjectId(id) }, { $set: { status } })
 }
+
+export async function upsertUserPrompt(userPrompt: UserPrompt): Promise<UserPrompt> {
+  if (userPrompt._id === undefined)
+    await userPromptCol.insertOne(userPrompt)
+  else
+    await userPromptCol.replaceOne({ _id: userPrompt._id }, userPrompt, { upsert: true })
+  return userPrompt
+}
+export async function getUserPromptList(userId: string, page: number, size: number): Promise<{ data: UserPrompt[]; total: number }> {
+  const query = { userId }
+  const total = await userPromptCol.countDocuments(query)
+  const cursor = userPromptCol.find(query).sort({ _id: -1 })
+  const data = []
+  const skip = (page - 1) * size
+  const pagedCursor = cursor.skip(skip).limit(size)
+
+  await pagedCursor.forEach(doc => data.push(doc))
+  return { data, total }
+}
+
+export async function deleteUserPrompt(id: string) {
+  const query = { _id: new ObjectId(id) }
+  await userPromptCol.deleteOne(query)
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 37df9c97..8673e5b2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,6 +1,6 @@
 import type { AxiosProgressEvent, GenericAbortSignal } from 'axios'
 import { get, post } from '@/utils/request'
-import type { AuditConfig, CHATMODEL, ConfigState, KeyConfig, MailConfig, SiteConfig, Status, UserInfo } from '@/components/common/Setting/model'
+import type { AuditConfig, CHATMODEL, ConfigState, KeyConfig, MailConfig, SiteConfig, Status, UserInfo, UserPrompt } from '@/components/common/Setting/model'
 import { useAuthStore, useSettingStore } from '@/store'
 
 export function fetchChatConfig<T = any>() {
@@ -288,3 +288,24 @@ export function fetchUpsertApiKey<T = any>(keyConfig: KeyConfig) {
     data: keyConfig,
   })
 }
+
+export function fetchUserPromptList<T = any>(page: number, size: number) {
+  return get<T>({
+    url: '/prompt-list',
+    data: { page, size },
+  })
+}
+
+export function fetchUpsertUserPrompt<T = any>(userPrompt: UserPrompt) {
+  return post<T>({
+    url: '/prompt-upsert',
+    data: userPrompt,
+  })
+}
+
+export function fetchDeleteUserPrompt<T = any>(id: string) {
+  return post<T>({
+    url: '/prompt-delete',
+    data: { id },
+  })
+}
diff --git a/src/components/common/PromptStore/index.vue b/src/components/common/PromptStore/index.vue
index 93bbe5a8..66e055e2 100644
--- a/src/components/common/PromptStore/index.vue
+++ b/src/components/common/PromptStore/index.vue
@@ -1,17 +1,19 @@
 <script setup lang='ts'>
 import type { DataTableColumns } from 'naive-ui'
-import { computed, h, ref, watch } from 'vue'
+import { computed, h, onMounted, reactive, ref, watch } from 'vue'
 import { NButton, NCard, NDataTable, NDivider, NInput, NList, NListItem, NModal, NPopconfirm, NSpace, NTabPane, NTabs, NThing, useMessage } from 'naive-ui'
 import PromptRecommend from '../../../assets/recommend.json'
 import { SvgIcon } from '..'
-import { usePromptStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { t } from '@/locales'
+import { UserPrompt } from '@/components/common/Setting/model'
+import { fetchDeleteUserPrompt, fetchUpsertUserPrompt, fetchUserPromptList } from '@/api'
 
 interface DataProps {
+  _id?: string
   renderKey: string
   renderValue: string
-  key: string
+  title: string
   value: string
 }
 
@@ -33,7 +35,7 @@ const show = computed({
   get: () => props.visible,
   set: (visible: boolean) => emit('update:visible', visible),
 })
-
+const loading = ref(false)
 const showModal = ref(false)
 
 const importLoading = ref(false)
@@ -44,11 +46,9 @@ const searchValue = ref<string>('')
 // 移动端自适应相关
 const { isMobile } = useBasicLayout()
 
-const promptStore = usePromptStore()
-
 // Prompt在线导入推荐List,根据部署者喜好进行修改(assets/recommend.json)
 const promptRecommendList = PromptRecommend
-const promptList = ref<any>(promptStore.promptList)
+const promptList = ref<UserPrompt[]>([])
 
 // 用于添加修改的临时prompt参数
 const tempPromptKey = ref('')
@@ -61,14 +61,14 @@ const modalMode = ref('')
 const tempModifiedItem = ref<any>({})
 
 // 添加修改导入都使用一个Modal, 临时修改内容占用tempPromptKey,切换状态前先将内容都清楚
-const changeShowModal = (mode: 'add' | 'modify' | 'local_import', selected = { key: '', value: '' }) => {
+const changeShowModal = (mode: 'add' | 'modify' | 'local_import', selected = { title: '', value: '' }) => {
   if (mode === 'add') {
     tempPromptKey.value = ''
     tempPromptValue.value = ''
   }
   else if (mode === 'modify') {
     tempModifiedItem.value = { ...selected }
-    tempPromptKey.value = selected.key
+    tempPromptKey.value = selected.title
     tempPromptValue.value = selected.value
   }
   else if (mode === 'local_import') {
@@ -90,9 +90,9 @@ const setDownloadURL = (url: string) => {
 const inputStatus = computed (() => tempPromptKey.value.trim().length < 1 || tempPromptValue.value.trim().length < 1)
 
 // Prompt模板相关操作
-const addPromptTemplate = () => {
+async function addPromptTemplate() {
   for (const i of promptList.value) {
-    if (i.key === tempPromptKey.value) {
+    if (i.title === tempPromptKey.value) {
       message.error(t('store.addRepeatTitleTips'))
       return
     }
@@ -101,17 +101,19 @@ const addPromptTemplate = () => {
       return
     }
   }
-  promptList.value.unshift({ key: tempPromptKey.value, value: tempPromptValue.value } as never)
+  const userPrompt = new UserPrompt(tempPromptKey.value, tempPromptValue.value)
+  await fetchUpsertUserPrompt(userPrompt)
+  promptList.value.unshift({ title: tempPromptKey.value, value: tempPromptValue.value } as never)
   message.success(t('common.addSuccess'))
   changeShowModal('add')
 }
 
-const modifyPromptTemplate = () => {
+const modifyPromptTemplate = async () => {
   let index = 0
 
   // 通过临时索引把待修改项摘出来
   for (const i of promptList.value) {
-    if (i.key === tempModifiedItem.value.key && i.value === tempModifiedItem.value.value)
+    if (i.title === tempModifiedItem.value.title && i.value === tempModifiedItem.value.value)
       break
     index = index + 1
   }
@@ -120,24 +122,29 @@ const modifyPromptTemplate = () => {
 
   // 搜索有冲突的部分
   for (const i of tempList) {
-    if (i.key === tempPromptKey.value) {
+    if (i.title === tempPromptKey.value) {
       message.error(t('store.editRepeatTitleTips'))
       return
     }
     if (i.value === tempPromptValue.value) {
-      message.error(t('store.editRepeatContentTips', { msg: i.key }))
+      message.error(t('store.editRepeatContentTips', { msg: i.title }))
       return
     }
   }
-
-  promptList.value = [{ key: tempPromptKey.value, value: tempPromptValue.value }, ...tempList] as never
+  const userPrompt = new UserPrompt(tempPromptKey.value, tempPromptValue.value)
+  userPrompt._id = tempModifiedItem.value._id
+  await fetchUpsertUserPrompt(userPrompt)
+  promptList.value = [{ title: tempPromptKey.value, value: tempPromptValue.value }, ...tempList] as never
   message.success(t('common.editSuccess'))
   changeShowModal('modify')
 }
 
-const deletePromptTemplate = (row: { key: string; value: string }) => {
+async function deletePromptTemplate(row: { _id: string; title: string; value: string }) {
+  loading.value = true
+  await fetchDeleteUserPrompt(row._id)
+  loading.value = false
   promptList.value = [
-    ...promptList.value.filter((item: { key: string; value: string }) => item.key !== row.key),
+    ...promptList.value.filter((item: UserPrompt) => item._id !== row._id),
   ] as never
   message.success(t('common.deleteSuccess'))
 }
@@ -172,7 +179,7 @@ const importPromptTemplate = (from = 'online') => {
         throw new Error(t('store.importError'))
       let safe = true
       for (const j of promptList.value) {
-        if (j.key === i[key]) {
+        if (j.title === i[key]) {
           message.warning(t('store.importRepeatTitle', { msg: i[key] }))
           safe = false
           break
@@ -241,22 +248,43 @@ const downloadPromptTemplate = async () => {
 // 移动端自适应相关
 const renderTemplate = () => {
   const [keyLimit, valueLimit] = isMobile.value ? [10, 30] : [15, 50]
-
-  return promptList.value.map((item: { key: string; value: string }) => {
+  return promptList.value.map((item: UserPrompt) => {
     return {
-      renderKey: item.key.length <= keyLimit ? item.key : `${item.key.substring(0, keyLimit)}...`,
+      renderKey: item.title.length <= keyLimit ? item.title : `${item.title.substring(0, keyLimit)}...`,
       renderValue: item.value.length <= valueLimit ? item.value : `${item.value.substring(0, valueLimit)}...`,
-      key: item.key,
+      title: item.title,
       value: item.value,
+      _id: item._id,
     }
   })
 }
 
-const pagination = computed(() => {
-  const [pageSize, pageSlot] = isMobile.value ? [6, 5] : [7, 15]
-  return {
-    pageSize, pageSlot,
-  }
+// const pagination = computed(() => {
+//   const [pageSize, pageSlot] = isMobile.value ? [6, 5] : [7, 15]
+//   return {
+//     pageSize, pageSlot,
+//   }
+// })
+
+const pagination = reactive ({
+  page: 1,
+  pageSize: 25,
+  pageCount: 1,
+  itemCount: 1,
+  prefix({ itemCount }: { itemCount: number | undefined }) {
+    return `Total is ${itemCount}.`
+  },
+  showSizePicker: true,
+  pageSizes: [25, 50, 100],
+  onChange: (page: number) => {
+    pagination.page = page
+    handleGetUserPromptList(pagination.page)
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    pagination.pageSize = pageSize
+    pagination.page = 1
+    handleGetUserPromptList(pagination.page)
+  },
 })
 
 // table相关
@@ -309,11 +337,30 @@ const columns = createColumns()
 watch(
   () => promptList,
   () => {
-    promptStore.updatePromptList(promptList.value)
   },
   { deep: true },
 )
 
+async function handleGetUserPromptList(page: number) {
+  if (loading.value)
+    return
+  promptList.value.length = 0
+  loading.value = true
+  const size = pagination.pageSize
+  const data = (await fetchUserPromptList(page, size)).data
+  data.data.forEach((d: UserPrompt) => {
+    promptList.value.push(d)
+  })
+  pagination.page = page
+  pagination.pageCount = data.total / size + (data.total % size === 0 ? 0 : 1)
+  pagination.itemCount = data.total
+  loading.value = false
+}
+
+onMounted(async () => {
+  await handleGetUserPromptList(pagination.page)
+})
+
 const dataSource = computed(() => {
   const data = renderTemplate()
   const value = searchValue.value
@@ -376,6 +423,7 @@ const dataSource = computed(() => {
             :data="dataSource"
             :pagination="pagination"
             :bordered="false"
+            :loading="loading"
           />
           <NList v-if="isMobile" style="max-height: 400px; overflow-y: auto;">
             <NListItem v-for="(item, index) of dataSource" :key="index">
@@ -413,7 +461,7 @@ const dataSource = computed(() => {
           <div class="max-h-[360px] overflow-y-auto space-y-4">
             <NCard
               v-for="info in promptRecommendList"
-              :key="info.key" :title="info.key"
+              :key="info.title" :title="info.title"
               :bordered="true"
               embedded
             >
diff --git a/src/components/common/Setting/model.ts b/src/components/common/Setting/model.ts
index 05ae98de..caa11fe9 100644
--- a/src/components/common/Setting/model.ts
+++ b/src/components/common/Setting/model.ts
@@ -102,6 +102,16 @@ export class KeyConfig {
   }
 }
 
+export class UserPrompt {
+  _id?: string
+  title: string
+  value: string
+  constructor(title: string, value: string) {
+    this.title = title
+    this.value = value
+  }
+}
+
 export type APIMODEL = 'ChatGPTAPI' | 'ChatGPTUnofficialProxyAPI' | undefined
 
 export const apiModelOptions = ['ChatGPTAPI', 'ChatGPTUnofficialProxyAPI'].map((model: string) => {

From 154df7b47e0fd9a1ec9ad44b848d813d7dae7cf9 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 31 Aug 2023 18:42:28 +0800
Subject: [PATCH 12/20] perf: the prompt word

---
 src/assets/recommend.json                   | 4 ++--
 src/components/common/PromptStore/index.vue | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/assets/recommend.json b/src/assets/recommend.json
index 384a9406..8f29eb70 100644
--- a/src/assets/recommend.json
+++ b/src/assets/recommend.json
@@ -1,12 +1,12 @@
 [
   {
-    "key": "awesome-chatgpt-prompts-zh",
+    "title": "awesome-chatgpt-prompts-zh",
     "desc": "ChatGPT 中文调教指南",
     "downloadUrl": "https://raw.githubusercontent.com/PlexPt/awesome-chatgpt-prompts-zh/main/prompts-zh.json",
     "url": "https://github.com/PlexPt/awesome-chatgpt-prompts-zh"
   },
   {
-    "key": "awesome-chatgpt-prompts-zh-TW",
+    "title": "awesome-chatgpt-prompts-zh-TW",
     "desc": "ChatGPT 中文調教指南 (透過 OpenAI / OpenCC 協助，從簡體中文轉換為繁體中文的版本)",
     "downloadUrl": "https://raw.githubusercontent.com/PlexPt/awesome-chatgpt-prompts-zh/main/prompts-zh-TW.json",
     "url": "https://github.com/PlexPt/awesome-chatgpt-prompts-zh"
diff --git a/src/components/common/PromptStore/index.vue b/src/components/common/PromptStore/index.vue
index 66e055e2..ff7e6457 100644
--- a/src/components/common/PromptStore/index.vue
+++ b/src/components/common/PromptStore/index.vue
@@ -61,7 +61,7 @@ const modalMode = ref('')
 const tempModifiedItem = ref<any>({})
 
 // 添加修改导入都使用一个Modal, 临时修改内容占用tempPromptKey,切换状态前先将内容都清楚
-const changeShowModal = (mode: 'add' | 'modify' | 'local_import', selected = { title: '', value: '' }) => {
+const changeShowModal = (mode: 'add' | 'modify' | 'local_import', selected: DataProps) => {
   if (mode === 'add') {
     tempPromptKey.value = ''
     tempPromptValue.value = ''
@@ -139,7 +139,10 @@ const modifyPromptTemplate = async () => {
   changeShowModal('modify')
 }
 
-async function deletePromptTemplate(row: { _id: string; title: string; value: string }) {
+async function deletePromptTemplate(row: DataProps) {
+  if (row._id === undefined)
+    return
+
   loading.value = true
   await fetchDeleteUserPrompt(row._id)
   loading.value = false

From aa5a3d32d16d2557923c7f017d1597a357fe17eb Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 31 Aug 2023 18:46:57 +0800
Subject: [PATCH 13/20] perf: the prompt word

---
 src/components/common/PromptStore/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/PromptStore/index.vue b/src/components/common/PromptStore/index.vue
index ff7e6457..8528f2f6 100644
--- a/src/components/common/PromptStore/index.vue
+++ b/src/components/common/PromptStore/index.vue
@@ -61,12 +61,12 @@ const modalMode = ref('')
 const tempModifiedItem = ref<any>({})
 
 // 添加修改导入都使用一个Modal, 临时修改内容占用tempPromptKey,切换状态前先将内容都清楚
-const changeShowModal = (mode: 'add' | 'modify' | 'local_import', selected: DataProps) => {
+const changeShowModal = (mode: 'add' | 'modify' | 'local_import', selected?: DataProps) => {
   if (mode === 'add') {
     tempPromptKey.value = ''
     tempPromptValue.value = ''
   }
-  else if (mode === 'modify') {
+  else if (mode === 'modify' && selected !== undefined) {
     tempModifiedItem.value = { ...selected }
     tempPromptKey.value = selected.title
     tempPromptValue.value = selected.value

From 09badfd4ae4c135d8f1e3f6c7854b6dd3e8dbc37 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Fri, 1 Sep 2023 19:27:04 +0800
Subject: [PATCH 14/20] feat: persistent prompts

---
 service/src/index.ts                        |  35 ++++-
 service/src/storage/mongo.ts                |  59 +++++----
 src/api/index.ts                            |  16 ++-
 src/components/common/PromptStore/index.vue | 138 ++++++++++++--------
 src/views/chat/index.vue                    |   4 +-
 5 files changed, 159 insertions(+), 93 deletions(-)

diff --git a/service/src/index.ts b/service/src/index.ts
index 6a0270a7..0aec77f9 100644
--- a/service/src/index.ts
+++ b/service/src/index.ts
@@ -12,6 +12,7 @@ import type { AuditConfig, CHATMODEL, ChatInfo, ChatOptions, Config, KeyConfig,
 import { Status, UsageResponse, UserRole, chatModelOptions } from './storage/model'
 import {
   clearChat,
+  clearUserPrompt,
   createChatRoom,
   createUser,
   deleteAllChatRooms,
@@ -29,6 +30,7 @@ import {
   getUserPromptList,
   getUserStatisticsByDay,
   getUsers,
+  importUserPrompt,
   insertChat,
   insertChatUsage,
   renameChatRoom,
@@ -1051,9 +1053,7 @@ router.post('/statistics/by-day', auth, async (req, res) => {
 router.get('/prompt-list', auth, async (req, res) => {
   try {
     const userId = req.headers.userId as string
-    const page = +req.query.page
-    const size = +req.query.size
-    const prompts = await getUserPromptList(userId, page, size)
+    const prompts = await getUserPromptList(userId)
     const result = []
     prompts.data.forEach((p) => {
       result.push({
@@ -1095,6 +1095,35 @@ router.post('/prompt-delete', auth, async (req, res) => {
   }
 })
 
+router.post('/prompt-clear', auth, async (req, res) => {
+  try {
+    const userId = req.headers.userId as string
+    await clearUserPrompt(userId)
+    res.send({ status: 'Success', message: '成功 | Successfully' })
+  }
+  catch (error) {
+    res.send({ status: 'Fail', message: error.message, data: null })
+  }
+})
+
+router.post('/prompt-import', auth, async (req, res) => {
+  try {
+    const userId = req.headers.userId as string
+    const userPrompt = req.body as UserPrompt[]
+    const updatedUserPrompt = userPrompt.map((prompt) => {
+      return {
+        ...prompt,
+        userId,
+      }
+    })
+    await importUserPrompt(updatedUserPrompt)
+    res.send({ status: 'Success', message: '成功 | Successfully' })
+  }
+  catch (error) {
+    res.send({ status: 'Fail', message: error.message, data: null })
+  }
+})
+
 app.use('', router)
 app.use('/api', router)
 
diff --git a/service/src/storage/mongo.ts b/service/src/storage/mongo.ts
index 081d065e..d5c47861 100644
--- a/service/src/storage/mongo.ts
+++ b/service/src/storage/mongo.ts
@@ -163,11 +163,6 @@ export async function getChatRoomsCount(userId: string, page: number, size: numb
         foreignField: 'roomId',
         as: 'chat',
       },
-    }, {
-      $unwind: {
-        path: '$chat',
-        preserveNullAndEmptyArrays: false,
-      },
     }, {
       $addFields: {
         title: '$chat.prompt',
@@ -192,26 +187,28 @@ export async function getChatRoomsCount(userId: string, page: number, size: numb
         'chat.dateTime': -1,
       },
     }, {
-      $group: {
-        _id: '$_id',
-        userId: {
-          $first: '$userId',
-        },
-        title: {
-          $first: '$title',
-        },
-        roomId: {
-          $first: '$roomId',
-        },
-        username: {
-          $first: '$user.name',
-        },
-        dateTime: {
-          $last: '$chat.dateTime',
-        },
+      $addFields: {
         chatCount: {
-          $sum: 1,
+          $size: '$chat',
         },
+        chat: {
+          $arrayElemAt: [
+            {
+              $slice: [
+                '$chat', -1,
+              ],
+            }, 0,
+          ],
+        },
+      },
+    }, {
+      $project: {
+        userId: 1,
+        title: '$chat.prompt',
+        username: '$user.name',
+        roomId: 1,
+        chatCount: 1,
+        dateTime: '$chat.dateTime',
       },
     }, {
       $sort: {
@@ -496,15 +493,12 @@ export async function upsertUserPrompt(userPrompt: UserPrompt): Promise<UserProm
     await userPromptCol.replaceOne({ _id: userPrompt._id }, userPrompt, { upsert: true })
   return userPrompt
 }
-export async function getUserPromptList(userId: string, page: number, size: number): Promise<{ data: UserPrompt[]; total: number }> {
+export async function getUserPromptList(userId: string): Promise<{ data: UserPrompt[]; total: number }> {
   const query = { userId }
   const total = await userPromptCol.countDocuments(query)
   const cursor = userPromptCol.find(query).sort({ _id: -1 })
   const data = []
-  const skip = (page - 1) * size
-  const pagedCursor = cursor.skip(skip).limit(size)
-
-  await pagedCursor.forEach(doc => data.push(doc))
+  await cursor.forEach(doc => data.push(doc))
   return { data, total }
 }
 
@@ -512,3 +506,12 @@ export async function deleteUserPrompt(id: string) {
   const query = { _id: new ObjectId(id) }
   await userPromptCol.deleteOne(query)
 }
+
+export async function clearUserPrompt(userId: string) {
+  const query = { userId }
+  await userPromptCol.deleteMany(query)
+}
+
+export async function importUserPrompt(userPromptList: UserPrompt[]) {
+  await userPromptCol.insertMany(userPromptList)
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 8673e5b2..965ae6fe 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -289,10 +289,9 @@ export function fetchUpsertApiKey<T = any>(keyConfig: KeyConfig) {
   })
 }
 
-export function fetchUserPromptList<T = any>(page: number, size: number) {
+export function fetchUserPromptList<T = any>() {
   return get<T>({
     url: '/prompt-list',
-    data: { page, size },
   })
 }
 
@@ -309,3 +308,16 @@ export function fetchDeleteUserPrompt<T = any>(id: string) {
     data: { id },
   })
 }
+
+export function fetchClearUserPrompt<T = any>() {
+  return post<T>({
+    url: '/prompt-clear',
+  })
+}
+
+export function fetchImportUserPrompt<T = any>(dataProps: never[]) {
+  return post<T>({
+    url: '/prompt-import',
+    data: dataProps,
+  })
+}
diff --git a/src/components/common/PromptStore/index.vue b/src/components/common/PromptStore/index.vue
index 8528f2f6..bd912d10 100644
--- a/src/components/common/PromptStore/index.vue
+++ b/src/components/common/PromptStore/index.vue
@@ -1,13 +1,14 @@
 <script setup lang='ts'>
 import type { DataTableColumns } from 'naive-ui'
-import { computed, h, onMounted, reactive, ref, watch } from 'vue'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { NButton, NCard, NDataTable, NDivider, NInput, NList, NListItem, NModal, NPopconfirm, NSpace, NTabPane, NTabs, NThing, useMessage } from 'naive-ui'
 import PromptRecommend from '../../../assets/recommend.json'
 import { SvgIcon } from '..'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { t } from '@/locales'
+import { fetchClearUserPrompt, fetchDeleteUserPrompt, fetchImportUserPrompt, fetchUpsertUserPrompt, fetchUserPromptList } from '@/api'
 import { UserPrompt } from '@/components/common/Setting/model'
-import { fetchDeleteUserPrompt, fetchUpsertUserPrompt, fetchUserPromptList } from '@/api'
+import { useAuthStoreWithout, usePromptStore } from '@/store'
 
 interface DataProps {
   _id?: string
@@ -43,12 +44,41 @@ const exportLoading = ref(false)
 
 const searchValue = ref<string>('')
 
+const authStore = useAuthStoreWithout()
+
+const promptStore = usePromptStore()
+
+// const dataSource = ref<DataProps[]>([])
+
+// const pagination = reactive ({
+//   page: 1,
+//   pageSize: 25,
+//   pageCount: 1,
+//   itemCount: 1,
+//   prefix({ itemCount }: { itemCount: number | undefined }) {
+//     return `Total is ${itemCount}.`
+//   },
+//   showSizePicker: true,
+//   pageSizes: [25, 50, 100],
+//   onChange: (page: number) => {
+//     pagination.page = page
+//     handleGetUserPromptList(pagination.page)
+//   },
+//   onUpdatePageSize: (pageSize: number) => {
+//     pagination.pageSize = pageSize
+//     pagination.page = 1
+//     handleGetUserPromptList(pagination.page)
+//   },
+// })
+
 // 移动端自适应相关
 const { isMobile } = useBasicLayout()
 
 // Prompt在线导入推荐List,根据部署者喜好进行修改(assets/recommend.json)
 const promptRecommendList = PromptRecommend
-const promptList = ref<UserPrompt[]>([])
+// const promptList = ref<UserPrompt[]>([])
+
+const promptList = ref<any>(promptStore.promptList)
 
 // 用于添加修改的临时prompt参数
 const tempPromptKey = ref('')
@@ -152,23 +182,28 @@ async function deletePromptTemplate(row: DataProps) {
   message.success(t('common.deleteSuccess'))
 }
 
-const clearPromptTemplate = () => {
+const clearPromptTemplate = async () => {
+  await fetchClearUserPrompt()
   promptList.value = []
   message.success(t('common.clearSuccess'))
 }
 
-const importPromptTemplate = (from = 'online') => {
+const importPromptTemplate = async (from = 'online') => {
   try {
     const jsonData = JSON.parse(tempPromptValue.value)
-    let key = ''
+    let title = ''
     let value = ''
     // 可以扩展加入更多模板字典的key
     if ('key' in jsonData[0]) {
-      key = 'key'
+      title = 'key'
+      value = 'value'
+    }
+    else if ('title' in jsonData[0]) {
+      title = 'title'
       value = 'value'
     }
     else if ('act' in jsonData[0]) {
-      key = 'act'
+      title = 'act'
       value = 'prompt'
     }
     else {
@@ -176,26 +211,32 @@ const importPromptTemplate = (from = 'online') => {
       message.warning('prompt key not supported.')
       throw new Error('prompt key not supported.')
     }
-
+    const newPromptList: DataProps[] = []
     for (const i of jsonData) {
-      if (!(key in i) || !(value in i))
+      if (!(title in i) || !(value in i))
         throw new Error(t('store.importError'))
       let safe = true
       for (const j of promptList.value) {
-        if (j.title === i[key]) {
-          message.warning(t('store.importRepeatTitle', { msg: i[key] }))
+        if (j.title === i[title]) {
+          message.warning(t('store.importRepeatTitle', { msg: i[title] }))
           safe = false
           break
         }
         if (j.value === i[value]) {
-          message.warning(t('store.importRepeatContent', { msg: i[key] }))
+          message.warning(t('store.importRepeatContent', { msg: i[title] }))
           safe = false
           break
         }
       }
       if (safe)
-        promptList.value.unshift({ key: i[key], value: i[value] } as never)
+        newPromptList.unshift({ title: i[title], value: i[value] } as never)
     }
+    await fetchImportUserPrompt(newPromptList as never)
+
+    newPromptList.forEach((p: UserPrompt) => {
+      promptList.value.unshift(p)
+    })
+
     message.success(t('common.importSuccess'))
   }
   catch {
@@ -236,7 +277,7 @@ const downloadPromptTemplate = async () => {
       })
       tempPromptValue.value = JSON.stringify(newJsonData)
     }
-    importPromptTemplate()
+    await importPromptTemplate()
     downloadURL.value = ''
   }
   catch {
@@ -262,32 +303,11 @@ const renderTemplate = () => {
   })
 }
 
-// const pagination = computed(() => {
-//   const [pageSize, pageSlot] = isMobile.value ? [6, 5] : [7, 15]
-//   return {
-//     pageSize, pageSlot,
-//   }
-// })
-
-const pagination = reactive ({
-  page: 1,
-  pageSize: 25,
-  pageCount: 1,
-  itemCount: 1,
-  prefix({ itemCount }: { itemCount: number | undefined }) {
-    return `Total is ${itemCount}.`
-  },
-  showSizePicker: true,
-  pageSizes: [25, 50, 100],
-  onChange: (page: number) => {
-    pagination.page = page
-    handleGetUserPromptList(pagination.page)
-  },
-  onUpdatePageSize: (pageSize: number) => {
-    pagination.pageSize = pageSize
-    pagination.page = 1
-    handleGetUserPromptList(pagination.page)
-  },
+const pagination = computed(() => {
+  const [pageSize, pageSlot] = isMobile.value ? [6, 5] : [7, 15]
+  return {
+    pageSize, pageSlot,
+  }
 })
 
 // table相关
@@ -340,28 +360,18 @@ const columns = createColumns()
 watch(
   () => promptList,
   () => {
+    promptStore.updatePromptList(promptList.value)
   },
   { deep: true },
 )
 
-async function handleGetUserPromptList(page: number) {
-  if (loading.value)
-    return
-  promptList.value.length = 0
-  loading.value = true
-  const size = pagination.pageSize
-  const data = (await fetchUserPromptList(page, size)).data
-  data.data.forEach((d: UserPrompt) => {
-    promptList.value.push(d)
-  })
-  pagination.page = page
-  pagination.pageCount = data.total / size + (data.total % size === 0 ? 0 : 1)
-  pagination.itemCount = data.total
-  loading.value = false
-}
-
 onMounted(async () => {
-  await handleGetUserPromptList(pagination.page)
+  if (!!authStore.session?.auth && !authStore.token)
+    return
+  if (promptStore.getPromptList().promptList.length === 0) {
+    await handleGetUserPromptList()
+    promptStore.updatePromptList(promptList.value)
+  }
 })
 
 const dataSource = computed(() => {
@@ -374,6 +384,17 @@ const dataSource = computed(() => {
   }
   return data
 })
+
+async function handleGetUserPromptList() {
+  if (loading.value)
+    return
+  loading.value = true
+  const data = (await fetchUserPromptList()).data
+  data.data.forEach((d: UserPrompt) => {
+    promptList.value.push(d)
+  })
+  loading.value = false
+}
 </script>
 
 <template>
@@ -421,6 +442,7 @@ const dataSource = computed(() => {
           </div>
           <NDataTable
             v-if="!isMobile"
+            remote
             :max-height="400"
             :columns="columns"
             :data="dataSource"
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index b621dd21..6544e373 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -543,7 +543,7 @@ async function handleToggleUsingContext() {
 // 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
 const searchOptions = computed(() => {
   if (prompt.value.startsWith('/')) {
-    return promptTemplate.value.filter((item: { key: string }) => item.key.toLowerCase().includes(prompt.value.substring(1).toLowerCase())).map((obj: { value: any }) => {
+    return promptTemplate.value.filter((item: { title: string }) => item.title.toLowerCase().includes(prompt.value.substring(1).toLowerCase())).map((obj: { value: any }) => {
       return {
         label: obj.value,
         value: obj.value,
@@ -559,7 +559,7 @@ const searchOptions = computed(() => {
 const renderOption = (option: { label: string }) => {
   for (const i of promptTemplate.value) {
     if (i.value === option.label)
-      return [i.key]
+      return [i.title]
   }
   return []
 }

From 263a1b0d8b846e7a1d59249bd5c29497c999ac56 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 10 Oct 2023 21:13:15 -0500
Subject: [PATCH 15/20] Update README.md

---
 README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 60332e96..a820deb9 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,8 @@
 [✓] 用户管理
 
 [✓] 多 Key 随机
+
+[✓] 持久化提示词
 </br>
 
 ## 截图
@@ -228,14 +230,14 @@ http://localhost:3002/
 
 #### Docker compose
 
-[Hub 地址](https://hub.docker.com/repository/docker/kerwin1202/chatgpt-web/general)
+[Hub 地址](https://hub.docker.com/r/jmal/chatgpt-web)
 
 ```yml
 version: '3'
 
 services:
   app:
-    image: kerwin1202/chatgpt-web # 总是使用latest,更新时重新pull该tag镜像即可
+    image: jmal/chatgpt-web # 总是使用latest,更新时重新pull该tag镜像即可
     container_name: chatgptweb
     restart: unless-stopped
     ports:

From e52b43b7c5c0bddf8552b87bf5df1fafeb505481 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Wed, 18 Oct 2023 15:43:21 +0800
Subject: [PATCH 16/20] fix: the typewriter animation

---
 service/src/storage/model.ts                 |  6 +-
 src/components/common/Setting/model.ts       |  2 +-
 src/views/chat/components/Message/Text.vue   |  3 +-
 src/views/chat/components/Message/style.less | 60 ++++++++++++++++++++
 4 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/service/src/storage/model.ts b/service/src/storage/model.ts
index 83f8c9d0..53075c08 100644
--- a/service/src/storage/model.ts
+++ b/service/src/storage/model.ts
@@ -54,14 +54,14 @@ export class UserConfig {
 
 // https://platform.openai.com/docs/models/overview
 // 除此之外，gpt-4-0314、gpt-4-32k-0314、gpt-3.5-turbo-0301 模型将在 9 月 13 日被弃用。
-export type CHATMODEL = 'gpt-3.5-turbo' | 'gpt-3.5-turbo-0301' | 'gpt-3.5-turbo-0613' | 'gpt-3.5-turbo-16k' | 'gpt-3.5-turbo-16k-0613' | 'gpt-4' | 'gpt-4-0314' | 'gpt-4-32k' | 'gpt-4-32k-0314' | 'gpt-4-0613' | 'gpt-4-32k-0613' | 'text-davinci-002-render-sha-mobile' | 'text-embedding-ada-002' | 'gpt-4-mobile' | 'gpt-4-browsing'
+export type CHATMODEL = 'gpt-3.5-turbo' | 'gpt-3.5-turbo-0301' | 'gpt-3.5-turbo-0613' | 'gpt-3.5-turbo-16k' | 'gpt-3.5-turbo-16k-0613' | 'gpt-4' | 'gpt-4-0314' | 'gpt-4-32k' | 'gpt-4-32k-0314' | 'gpt-4-0613' | 'gpt-4-32k-0613' | 'text-davinci-002-render-sha-mobile' | 'text-embedding-ada-002' | 'gpt-4-mobile' | 'gpt-4-browsing' | 'gpt-4-dalle'
 
 export const CHATMODELS: CHATMODEL[] = [
-  'gpt-3.5-turbo', 'gpt-3.5-turbo-0301', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613', 'gpt-4', 'gpt-4-0314', 'gpt-4-32k', 'gpt-4-32k-0314', 'gpt-4-0613', 'gpt-4-32k-0613', 'text-davinci-002-render-sha-mobile', 'text-embedding-ada-002', 'gpt-4-mobile', 'gpt-4-browsing',
+  'gpt-3.5-turbo', 'gpt-3.5-turbo-0301', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613', 'gpt-4', 'gpt-4-0314', 'gpt-4-32k', 'gpt-4-32k-0314', 'gpt-4-0613', 'gpt-4-32k-0613', 'text-davinci-002-render-sha-mobile', 'text-embedding-ada-002', 'gpt-4-mobile', 'gpt-4-browsing', 'gpt-4-dalle',
 ]
 
 export const chatModelOptions = [
-  'gpt-3.5-turbo', 'gpt-3.5-turbo-0301', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613', 'gpt-4', 'gpt-4-0314', 'gpt-4-32k', 'gpt-4-32k-0314', 'gpt-4-0613', 'gpt-4-32k-0613', 'text-davinci-002-render-sha-mobile', 'text-embedding-ada-002', 'gpt-4-mobile', 'gpt-4-browsing',
+  'gpt-3.5-turbo', 'gpt-3.5-turbo-0301', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613', 'gpt-4', 'gpt-4-0314', 'gpt-4-32k', 'gpt-4-32k-0314', 'gpt-4-0613', 'gpt-4-32k-0613', 'text-davinci-002-render-sha-mobile', 'text-embedding-ada-002', 'gpt-4-mobile', 'gpt-4-browsing', 'gpt-4-dalle',
 ].map((model: string) => {
   let label = model
   if (model === 'text-davinci-002-render-sha-mobile')
diff --git a/src/components/common/Setting/model.ts b/src/components/common/Setting/model.ts
index caa11fe9..7387c63e 100644
--- a/src/components/common/Setting/model.ts
+++ b/src/components/common/Setting/model.ts
@@ -16,7 +16,7 @@ export class ConfigState {
 }
 
 // https://platform.openai.com/docs/models/overview
-export type CHATMODEL = 'gpt-3.5-turbo' | 'gpt-3.5-turbo-0301' | 'gpt-3.5-turbo-0613' | 'gpt-3.5-turbo-16k' | 'gpt-3.5-turbo-16k-0613' | 'gpt-4' | 'gpt-4-0314' | 'gpt-4-32k' | 'gpt-4-32k-0314' | 'gpt-4-0613' | 'gpt-4-32k-0613' | 'text-davinci-002-render-sha-mobile' | 'text-embedding-ada-002' | 'gpt-4-mobile' | 'gpt-4-browsing'
+export type CHATMODEL = 'gpt-3.5-turbo' | 'gpt-3.5-turbo-0301' | 'gpt-3.5-turbo-0613' | 'gpt-3.5-turbo-16k' | 'gpt-3.5-turbo-16k-0613' | 'gpt-4' | 'gpt-4-0314' | 'gpt-4-32k' | 'gpt-4-32k-0314' | 'gpt-4-0613' | 'gpt-4-32k-0613' | 'text-davinci-002-render-sha-mobile' | 'text-embedding-ada-002' | 'gpt-4-mobile' | 'gpt-4-browsing' | 'gpt-4-dalle'
 
 export class UserConfig {
   chatModel?: CHATMODEL
diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
index 25c3b7ad..3c4b1467 100644
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -103,9 +103,8 @@ onUnmounted(() => {
   <div class="text-black" :class="wrapClass">
     <div ref="textRef" class="leading-relaxed break-words">
       <div v-if="!inversion" class="flex items-end">
-        <div v-if="!asRawText" class="w-full markdown-body" v-html="text" />
+        <div v-if="!asRawText" class="markdown-body" :class="{ 'markdown-body-generate': loading }" v-html="text" />
         <div v-else class="w-full whitespace-pre-wrap" v-text="text" />
-        <span v-if="loading" class="dark:text-white w-[4px] h-[20px] block animate-blink" />
       </div>
       <div v-else class="whitespace-pre-wrap" v-text="text" />
     </div>
diff --git a/src/views/chat/components/Message/style.less b/src/views/chat/components/Message/style.less
index 0b2bbf8c..3b523677 100644
--- a/src/views/chat/components/Message/style.less
+++ b/src/views/chat/components/Message/style.less
@@ -57,10 +57,60 @@
 		}
 	}
 
+
+	&.markdown-body-generate>dd:last-child:after,
+	&.markdown-body-generate>dl:last-child:after,
+	&.markdown-body-generate>dt:last-child:after,
+	&.markdown-body-generate>h1:last-child:after,
+	&.markdown-body-generate>h2:last-child:after,
+	&.markdown-body-generate>h3:last-child:after,
+	&.markdown-body-generate>h4:last-child:after,
+	&.markdown-body-generate>h5:last-child:after,
+	&.markdown-body-generate>h6:last-child:after,
+	&.markdown-body-generate>li:last-child:after,
+	&.markdown-body-generate>ol:last-child li:last-child:after,
+	&.markdown-body-generate>p:last-child:after,
+	&.markdown-body-generate>pre:last-child code:after,
+	&.markdown-body-generate>td:last-child:after,
+	&.markdown-body-generate>ul:last-child li:last-child:after {
+		animation: blink 1s steps(5, start) infinite;
+		color: #000;
+		content: '_';
+		font-weight: 700;
+		margin-left: 3px;
+		vertical-align: baseline;
+	}
+
+	@keyframes blink {
+		to {
+			visibility: hidden;
+		}
+	}
 }
 
 html.dark {
 
+	.markdown-body {
+
+		&.markdown-body-generate>dd:last-child:after,
+		&.markdown-body-generate>dl:last-child:after,
+		&.markdown-body-generate>dt:last-child:after,
+		&.markdown-body-generate>h1:last-child:after,
+		&.markdown-body-generate>h2:last-child:after,
+		&.markdown-body-generate>h3:last-child:after,
+		&.markdown-body-generate>h4:last-child:after,
+		&.markdown-body-generate>h5:last-child:after,
+		&.markdown-body-generate>h6:last-child:after,
+		&.markdown-body-generate>li:last-child:after,
+		&.markdown-body-generate>ol:last-child li:last-child:after,
+		&.markdown-body-generate>p:last-child:after,
+		&.markdown-body-generate>pre:last-child code:after,
+		&.markdown-body-generate>td:last-child:after,
+		&.markdown-body-generate>ul:last-child li:last-child:after {
+			color: #65a665;
+		}
+	}
+
 	.message-reply {
 		.whitespace-pre-wrap {
 			white-space: pre-wrap;
@@ -73,3 +123,13 @@ html.dark {
 		background-color: #282c34;
 	}
 }
+
+@media screen and (max-width: 533px) {
+	.markdown-body .code-block-wrapper {
+		padding: unset;
+
+		code {
+			padding: 24px 16px 16px 16px;
+		}
+	}
+}

From ecf6d4e969353499c43ef1f8d2c25a1d70428818 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 13 Nov 2023 09:16:00 +0800
Subject: [PATCH 17/20] fix: the typewriter animation

---
 README.en.md                                  |   2 +-
 README.md                                     |   2 +-
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  42 ++-
 service/package.json                          |   1 +
 service/pnpm-lock.yaml                        |  26 +-
 service/src/chatgpt/index.ts                  |  42 +--
 service/src/storage/mongo.ts                  |  24 +-
 service/src/types.ts                          |  13 +
 .../utils/templates/mail.admin.template.html  | 253 ++++++++---------
 .../utils/templates/mail.notice.template.html | 255 ++++++++----------
 .../mail.resetpassword.template.html          | 254 ++++++++---------
 .../src/utils/templates/mail.template.html    | 255 ++++++++----------
 src/components/common/HoverButton/Button.vue  |   3 +-
 src/components/common/Setting/Password.vue    |  90 +++++++
 src/components/common/Setting/TwoFA.vue       | 141 ++++++++++
 src/components/common/Setting/User.vue        |  47 +++-
 src/components/common/Setting/index.vue       |  16 ++
 src/locales/en-US.ts                          |  26 ++
 src/locales/ko-KR.ts                          |  26 ++
 src/locales/zh-CN.ts                          |  26 ++
 src/locales/zh-TW.ts                          |  26 ++
 src/views/chat/components/Header/index.vue    |   5 +-
 src/views/chat/index.vue                      |   5 +-
 src/views/chat/layout/Permission.vue          |  14 +-
 25 files changed, 1002 insertions(+), 593 deletions(-)
 create mode 100644 src/components/common/Setting/Password.vue
 create mode 100644 src/components/common/Setting/TwoFA.vue

diff --git a/README.en.md b/README.en.md
index cbe7631e..8fd55558 100644
--- a/README.en.md
+++ b/README.en.md
@@ -9,7 +9,7 @@
 ## Introduction
 > **This project is forked from [Chanzhaoyu/chatgpt-web](https://github.com/Chanzhaoyu/chatgpt-web), some unique features have been added:**
 
-[✓] Register & Login & Reset Password
+[✓] Register & Login & Reset Password & 2FA
 
 [✓] Sync chat history 
 
diff --git a/README.md b/README.md
index a820deb9..223bfdaa 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 ## 说明
 > **此项目 Fork 自 [Chanzhaoyu/chatgpt-web](https://github.com/Chanzhaoyu/chatgpt-web), 新增了部分特色功能:**
 
-[✓] 注册&登录&重置密码
+[✓] 注册 & 登录 & 重置密码 & 2FA
 
 [✓] 同步历史会话
 
diff --git a/package.json b/package.json
index 5f55a7fe..fab7ed56 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "markdown-it": "^13.0.1",
     "naive-ui": "^2.34.3",
     "pinia": "^2.0.33",
+    "qrcode.vue": "^3.4.1",
     "vue": "^3.2.47",
     "vue-chartjs": "^5.2.0",
     "vue-i18n": "^9.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 02820bae..56a33ff5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,6 +34,9 @@ dependencies:
   pinia:
     specifier: ^2.0.33
     version: 2.0.33(typescript@4.9.5)(vue@3.2.47)
+  qrcode.vue:
+    specifier: ^3.4.1
+    version: 3.4.1(vue@3.2.47)
   vue:
     specifier: ^3.2.47
     version: 3.2.47
@@ -116,7 +119,7 @@ devDependencies:
     version: 4.3.0
   tailwindcss:
     specifier: ^3.2.7
-    version: 3.2.7(postcss@8.4.21)(ts-node@10.9.1)
+    version: 3.2.7(postcss@8.4.21)
   typescript:
     specifier: ~4.9.5
     version: 4.9.5
@@ -125,7 +128,7 @@ devDependencies:
     version: 4.2.0(@types/node@18.14.6)(less@4.1.3)
   vite-plugin-pwa:
     specifier: ^0.14.4
-    version: 0.14.4(vite@4.2.0)(workbox-build@6.5.4)(workbox-window@6.5.4)
+    version: 0.14.4(vite@4.2.0)
   vue-tsc:
     specifier: ^1.2.0
     version: 1.2.0(typescript@4.9.5)
@@ -564,6 +567,7 @@ packages:
   /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.21.0):
     resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -579,6 +583,7 @@ packages:
   /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.21.0):
     resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -592,6 +597,7 @@ packages:
   /@babel/plugin-proposal-class-static-block@7.21.0(@babel/core@7.21.0):
     resolution: {integrity: sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-static-block instead.
     peerDependencies:
       '@babel/core': ^7.12.0
     dependencies:
@@ -606,6 +612,7 @@ packages:
   /@babel/plugin-proposal-dynamic-import@7.18.6(@babel/core@7.21.0):
     resolution: {integrity: sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-dynamic-import instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -617,6 +624,7 @@ packages:
   /@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.21.0):
     resolution: {integrity: sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -628,6 +636,7 @@ packages:
   /@babel/plugin-proposal-json-strings@7.18.6(@babel/core@7.21.0):
     resolution: {integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-json-strings instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -639,6 +648,7 @@ packages:
   /@babel/plugin-proposal-logical-assignment-operators@7.20.7(@babel/core@7.21.0):
     resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -650,6 +660,7 @@ packages:
   /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.21.0):
     resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -661,6 +672,7 @@ packages:
   /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.21.0):
     resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -672,6 +684,7 @@ packages:
   /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.21.0):
     resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -686,6 +699,7 @@ packages:
   /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.21.0):
     resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -697,6 +711,7 @@ packages:
   /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.21.0):
     resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -709,6 +724,7 @@ packages:
   /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.21.0):
     resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -722,6 +738,7 @@ packages:
   /@babel/plugin-proposal-private-property-in-object@7.21.0(@babel/core@7.21.0):
     resolution: {integrity: sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==}
     engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -737,6 +754,7 @@ packages:
   /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.21.0):
     resolution: {integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==}
     engines: {node: '>=4'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
@@ -5514,7 +5532,7 @@ packages:
       postcss: 8.4.21
     dev: true
 
-  /postcss-load-config@3.1.4(postcss@8.4.21)(ts-node@10.9.1):
+  /postcss-load-config@3.1.4(postcss@8.4.21):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
     peerDependencies:
@@ -5528,7 +5546,6 @@ packages:
     dependencies:
       lilconfig: 2.1.0
       postcss: 8.4.21
-      ts-node: 10.9.1(@types/node@18.14.6)(typescript@4.9.5)
       yaml: 1.10.2
     dev: true
 
@@ -5596,6 +5613,14 @@ packages:
     engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
     dev: true
 
+  /qrcode.vue@3.4.1(vue@3.2.47):
+    resolution: {integrity: sha512-wq/zHsifH4FJ1GXQi8/wNxD1KfQkckIpjK1KPTc/qwYU5/Bkd4me0w4xZSg6EXk6xLBkVDE0zxVagewv5EMAVA==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -6164,7 +6189,7 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /tailwindcss@3.2.7(postcss@8.4.21)(ts-node@10.9.1):
+  /tailwindcss@3.2.7(postcss@8.4.21):
     resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==}
     engines: {node: '>=12.13.0'}
     hasBin: true
@@ -6188,7 +6213,7 @@ packages:
       postcss: 8.4.21
       postcss-import: 14.1.0(postcss@8.4.21)
       postcss-js: 4.0.1(postcss@8.4.21)
-      postcss-load-config: 3.1.4(postcss@8.4.21)(ts-node@10.9.1)
+      postcss-load-config: 3.1.4(postcss@8.4.21)
       postcss-nested: 6.0.0(postcss@8.4.21)
       postcss-selector-parser: 6.0.11
       postcss-value-parser: 4.2.0
@@ -6489,12 +6514,10 @@ packages:
       vue: 3.2.47
     dev: false
 
-  /vite-plugin-pwa@0.14.4(vite@4.2.0)(workbox-build@6.5.4)(workbox-window@6.5.4):
+  /vite-plugin-pwa@0.14.4(vite@4.2.0):
     resolution: {integrity: sha512-M7Ct0so8OlouMkTWgXnl8W1xU95glITSKIe7qswZf1tniAstO2idElGCnsrTJ5NPNSx1XqfTCOUj8j94S6FD7Q==}
     peerDependencies:
       vite: ^3.1.0 || ^4.0.0
-      workbox-build: ^6.5.4
-      workbox-window: ^6.5.4
     dependencies:
       '@rollup/plugin-replace': 5.0.2(rollup@3.18.0)
       debug: 4.3.4
@@ -6505,6 +6528,7 @@ packages:
       workbox-build: 6.5.4
       workbox-window: 6.5.4
     transitivePeerDependencies:
+      - '@types/babel__core'
       - supports-color
     dev: true
 
diff --git a/service/package.json b/service/package.json
index d2f0d19e..a09c4b08 100644
--- a/service/package.json
+++ b/service/package.json
@@ -49,6 +49,7 @@
     "eslint": "^8.35.0",
     "jsonwebtoken": "^9.0.0",
     "rimraf": "^4.3.0",
+    "speakeasy": "^2.0.0",
     "tsup": "^6.6.3",
     "typescript": "^4.9.5"
   }
diff --git a/service/pnpm-lock.yaml b/service/pnpm-lock.yaml
index 2b005890..91719c9d 100644
--- a/service/pnpm-lock.yaml
+++ b/service/pnpm-lock.yaml
@@ -45,7 +45,7 @@ dependencies:
     version: 6.9.1
   request-ip:
     specifier: ^3.3.0
-    version: registry.npmmirror.com/request-ip@3.3.0
+    version: 3.3.0
   socks-proxy-agent:
     specifier: ^7.0.0
     version: 7.0.0
@@ -72,6 +72,9 @@ devDependencies:
   rimraf:
     specifier: ^4.3.0
     version: 4.3.0
+  speakeasy:
+    specifier: ^2.0.0
+    version: 2.0.0
   tsup:
     specifier: ^6.6.3
     version: 6.6.3(typescript@4.9.5)
@@ -858,6 +861,10 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
+  /base32.js@0.0.1:
+    resolution: {integrity: sha512-EGHIRiegFa62/SsA1J+Xs2tIzludPdzM064N9wjbiEgHnGnJ1V0WEpA4pEwCYT5nDvZk3ubf0shqaCS7k6xeUQ==}
+    dev: true
+
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
@@ -3242,6 +3249,10 @@ packages:
       jsesc: 0.5.0
     dev: true
 
+  /request-ip@3.3.0:
+    resolution: {integrity: sha512-cA6Xh6e0fDBBBwH77SLJaJPBmD3nWVAcF9/XAcsrIHdjhFzFiB5aNQFytdjCGPezU3ROwrR11IddKAM08vohxA==, registry: https://registry.npm.taobao.org/}
+    dev: false
+
   /require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
@@ -3476,6 +3487,13 @@ packages:
   /spdx-license-ids@3.0.12:
     resolution: {integrity: sha512-rr+VVSXtRhO4OHbXUiAF7xW3Bo9DuuF6C5jH+q/x15j2jniycgKbxU09Hr0WqlSLUs4i4ltHGXqTe7VHclYWyA==}
 
+  /speakeasy@2.0.0:
+    resolution: {integrity: sha512-lW2A2s5LKi8rwu77ewisuUOtlCydF/hmQSOJjpTqTj1gZLkNgTaYnyvfxy2WBr4T/h+9c4g8HIITfj83OkFQFw==}
+    engines: {node: '>= 0.10.0'}
+    dependencies:
+      base32.js: 0.0.1
+    dev: true
+
   /statuses@2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
@@ -3924,9 +3942,3 @@ packages:
     resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
     engines: {node: '>=12.20'}
     dev: false
-
-  registry.npmmirror.com/request-ip@3.3.0:
-    resolution: {integrity: sha512-cA6Xh6e0fDBBBwH77SLJaJPBmD3nWVAcF9/XAcsrIHdjhFzFiB5aNQFytdjCGPezU3ROwrR11IddKAM08vohxA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/request-ip/-/request-ip-3.3.0.tgz}
-    name: request-ip
-    version: 3.3.0
-    dev: false
diff --git a/service/src/chatgpt/index.ts b/service/src/chatgpt/index.ts
index d6f65f91..20ecc02e 100644
--- a/service/src/chatgpt/index.ts
+++ b/service/src/chatgpt/index.ts
@@ -5,9 +5,10 @@ import { ChatGPTAPI, ChatGPTUnofficialProxyAPI } from 'chatgpt'
 import { SocksProxyAgent } from 'socks-proxy-agent'
 import httpsProxyAgent from 'https-proxy-agent'
 import fetch from 'node-fetch'
-import type { AuditConfig, CHATMODEL, KeyConfig, UserInfo } from 'src/storage/model'
 import jwt_decode from 'jwt-decode'
 import dayjs from 'dayjs'
+import type { AuditConfig, CHATMODEL, KeyConfig, UserInfo } from '../storage/model'
+import { Status } from '../storage/model'
 import type { TextAuditService } from '../utils/textAudit'
 import { textAuditServices } from '../utils/textAudit'
 import { getCacheApiKeys, getCacheConfig, getOriginConfig } from '../storage/config'
@@ -346,22 +347,33 @@ async function getMessageById(id: string): Promise<ChatMessage | undefined> {
   const chatInfo = await getChatByMessageId(isPrompt ? id.substring(7) : id)
 
   if (chatInfo) {
-    if (isPrompt) { // prompt
-      return {
-        id,
-        conversationId: chatInfo.options.conversationId,
-        parentMessageId: chatInfo.options.parentMessageId,
-        role: 'user',
-        text: chatInfo.prompt,
-      }
+    const parentMessageId = isPrompt
+      ? chatInfo.options.parentMessageId
+      : `prompt_${id}` // parent message is the prompt
+
+    if (chatInfo.status !== Status.Normal) { // jumps over deleted messages
+      return parentMessageId
+        ? getMessageById(parentMessageId)
+        : undefined
     }
     else {
-      return { // completion
-        id,
-        conversationId: chatInfo.options.conversationId,
-        parentMessageId: `prompt_${id}`, // parent message is the prompt
-        role: 'assistant',
-        text: chatInfo.response,
+      if (isPrompt) { // prompt
+        return {
+          id,
+          conversationId: chatInfo.options.conversationId,
+          parentMessageId,
+          role: 'user',
+          text: chatInfo.prompt,
+        }
+      }
+      else {
+        return { // completion
+          id,
+          conversationId: chatInfo.options.conversationId,
+          parentMessageId,
+          role: 'assistant',
+          text: chatInfo.response,
+        }
       }
     }
   }
diff --git a/service/src/storage/mongo.ts b/service/src/storage/mongo.ts
index d5c47861..cc0ce0e0 100644
--- a/service/src/storage/mongo.ts
+++ b/service/src/storage/mongo.ts
@@ -295,12 +295,13 @@ export async function deleteChat(roomId: number, uuid: number, inversion: boolea
   await chatCol.updateOne(query, update)
 }
 
-export async function createUser(email: string, password: string, roles?: UserRole[]): Promise<UserInfo> {
+export async function createUser(email: string, password: string, roles?: UserRole[], remark?: string): Promise<UserInfo> {
   email = email.toLowerCase()
   const userInfo = new UserInfo(email, password)
   if (roles && roles.includes(UserRole.Admin))
     userInfo.status = Status.Normal
   userInfo.roles = roles
+  userInfo.remark = remark
   await userCol.insertOne(userInfo)
   return userInfo
 }
@@ -315,11 +316,26 @@ export async function updateUserChatModel(userId: string, chatModel: CHATMODEL)
     , { $set: { 'config.chatModel': chatModel } })
 }
 
+export async function updateUser2FA(userId: string, secretKey: string) {
+  return userCol.updateOne({ _id: new ObjectId(userId) }
+    , { $set: { secretKey, updateTime: new Date().toLocaleString() } })
+}
+
+export async function disableUser2FA(userId: string) {
+  return userCol.updateOne({ _id: new ObjectId(userId) }
+    , { $set: { secretKey: null, updateTime: new Date().toLocaleString() } })
+}
+
 export async function updateUserPassword(userId: string, password: string) {
   return userCol.updateOne({ _id: new ObjectId(userId) }
     , { $set: { password, updateTime: new Date().toLocaleString() } })
 }
 
+export async function updateUserPasswordWithVerifyOld(userId: string, oldPassword: string, newPassword: string) {
+  return userCol.updateOne({ _id: new ObjectId(userId), password: oldPassword }
+    , { $set: { password: newPassword, updateTime: new Date().toLocaleString() } })
+}
+
 export async function getUser(email: string): Promise<UserInfo> {
   email = email.toLowerCase()
   const userInfo = await userCol.findOne({ email }) as UserInfo
@@ -371,15 +387,15 @@ export async function updateUserStatus(userId: string, status: Status) {
   return await userCol.updateOne({ _id: new ObjectId(userId) }, { $set: { status, verifyTime: new Date().toLocaleString() } })
 }
 
-export async function updateUser(userId: string, roles: UserRole[], password: string) {
+export async function updateUser(userId: string, roles: UserRole[], password: string, remark?: string) {
   const user = await getUserById(userId)
   const query = { _id: new ObjectId(userId) }
   if (user.password !== password && user.password) {
     const newPassword = md5(password)
-    return await userCol.updateOne(query, { $set: { roles, verifyTime: new Date().toLocaleString(), password: newPassword } })
+    return await userCol.updateOne(query, { $set: { roles, verifyTime: new Date().toLocaleString(), password: newPassword, remark } })
   }
   else {
-    return await userCol.updateOne(query, { $set: { roles, verifyTime: new Date().toLocaleString() } })
+    return await userCol.updateOne(query, { $set: { roles, verifyTime: new Date().toLocaleString(), remark } })
   }
 }
 
diff --git a/service/src/types.ts b/service/src/types.ts
index 67c34df6..1181db99 100644
--- a/service/src/types.ts
+++ b/service/src/types.ts
@@ -55,3 +55,16 @@ export interface JWT {
   'azp': string
   'scope': string
 }
+
+export class TwoFAConfig {
+  enaled: boolean
+  userName: string
+  secretKey: string
+  otpauthUrl: string
+  constructor() {
+    this.enaled = false
+    this.userName = ''
+    this.secretKey = ''
+    this.otpauthUrl = ''
+  }
+}
diff --git a/service/src/utils/templates/mail.admin.template.html b/service/src/utils/templates/mail.admin.template.html
index 5ef0b273..e6524777 100644
--- a/service/src/utils/templates/mail.admin.template.html
+++ b/service/src/utils/templates/mail.admin.template.html
@@ -1,139 +1,124 @@
 <html>
-  <head> </head>
-  <body>
-    <div class="page flex-col">
-      <div class="box_3 flex-col" style="
-        display: flex;
-        position: relative;
-        width: 100%;
-        height: 206px;
-        background: #ef859d2e;
-        top: 0;
-        left: 0;
-        justify-content: center;
-      ">
-        <div class="section_1 flex-col" style="
-        background-image: url(&quot;https://ghproxy.com/https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg&quot;);
-        position: absolute;
-        width: 152px;
-        height: 152px;
-        display: flex;
-        top: 130px;
-        background-size: cover;
-        border-radius: 50%;
-        margin: 10px;
-      "></div>
-      </div>
-      <div class="box_4 flex-col" style="
-        margin-top: 92px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      ">
-        <div class="text-group_5 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin: 0 20px;
-      ">
-          <span class="text_1" style="
-        font-size: 26px;
-        font-family: PingFang-SC-Bold, PingFang-SC;
-        font-weight: bold;
-        color: #000000;
-        line-height: 37px;
-        text-align: center;
-        ">
-            <target="_blank" style="text-decoration: none; color: #0088cc;">${SITE_TITLE}</a> 账号申请
-          </span>
+	<head> </head>
 
-          <div class="box_2 flex-row" style="
-        margin: 0 20px;
-        min-height: 128px;
-        background: #F7F7F7;
-        border-radius: 12px;
-        margin-top: 34px;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 32px 16px;
-        width: calc(100% - 40px);
-      ">
+	<body
+		style="
+			font-family: -apple-system, 'microsoft yahei', sans-serif;
+			font-size: 16px;
+			text-align: center;
+		"
+	>
+		<div
+			class="main-wrapper"
+			style="display: flex; flex-flow: column nowrap; justify-content: center"
+		>
+			<!-- top area start -->
+			<div class="header-wrapper" style="height: 10em; background: #fcc">
+				<div
+					class="avatar"
+					style="
+						background-color: #eee;
+						background-image: url('https://ghproxy.com/https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg');
+						width: 10em;
+						height: 10em;
+						margin: 5em auto 0;
+						background-size: cover;
+						border-radius: 50%;
+						border: 0.25em solid white;
+					"
+				></div>
+			</div>
+			<div
+				class="article-title"
+				style="
+					margin: 6em auto 0;
+					font-weight: bold;
+					line-height: 2;
+					text-align: center;
+					color: #06f;
+				"
+			>
+				${SITE_TITLE} 账号申请
+			</div>
+			<!-- top area end -->
 
-            <div class="text-wrapper_4 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        margin-left: 30px;
-        margin-bottom: 16px;
-      ">
-              <hr>
-              <span class="text_3" style=" font-family: Arial, sans-serif; font-size: 16px; color: #333;">
-                <h1 style="color: #0088cc;">
-                  账号申请邮箱：${TO_MAIL}，账号开通链接为（12小时内有效）：
-              </span>
-            </div>
-            <hr style="
-          display: flex;
-          position: relative;
-          border: 1px dashed #ef859d2e;
-          box-sizing: content-box;
-          height: 0px;
-          overflow: visible;
-          width: 100%;
-      ">
-            <div class="text-wrapper_4 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        margin-left: 30px;
-      ">
-              <hr>
-              </h1>
-              <p style="margin-top: 20px;">
-                请点击以下按钮进行开通：
-                <span class="text_4" style="
-      margin-top: 6px;
-      margin-right: 22px;
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #000000;
-      line-height: 22px;
-      "></span>
-            </div>
+			<!-- content area start -->
+			<div
+				class="content-wrapper"
+				style="
+					width: 100%;
+					padding: 2em;
+					box-sizing: border-box;
+					overflow: hidden;
+				"
+			>
+				<div
+					class="content gray-box"
+					style="
+						min-height: 8em;
+						background: #8881;
+						border-radius: 2em;
+						margin-top: 2em;
+						padding: 2em;
+						box-sizing: border-box;
+					"
+				>
+					<div style="text-align: center; color: #06f; font-size: 1.5em">
+            账号申请邮箱：${TO_MAIL}，这是您的账号开通链接 (12小时内有效)
+					</div>
 
-            <a target="_blank" class="text-wrapper_2 flex-col" style="
-        min-width: 106px;
-        height: 38px;
-        background: #ef859d38;
-        border-radius: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-decoration: none;
-        margin: auto;
-        margin-top: 32px;
-      " href="${VERIFY_URL}">
-              <span class="text_5" style="
-        color: #DB214B;
-      ">点我开通</span>
-            </a>
-          </div>
-          <div class="text-group_6 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-top: 34px;
-      ">
-            <span class="text_6" style="
-        height: 17px;
-        font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #00000045;
-        line-height: 17px;
-      ">此邮件由服务器自动发出，直接回复无效。</span>
-          </div>
-        </div>
-      </div>
-  </body>
+					<hr style="border: 1px dashed #fcc; margin: 2em 0" />
+
+					<div style="text-align: center">
+						<div>请点击以下按钮进行开通</div>
+
+						<div
+							style="
+								display: inline-block;
+								height: 3em;
+								line-height: 3em;
+								min-width: 8em;
+								background: #fcc;
+								color: #c33;
+								border-radius: 3em;
+								margin: 2em auto;
+							"
+						>
+							<a
+								target="_blank"
+								style="color: #c33; text-decoration: none; padding: 0 1.5em"
+								href="${VERIFY_URL}"
+							>
+								点我开通
+							</a>
+						</div>
+					</div>
+
+					<hr style="border: 1px dashed #fcc; margin: 2em 0" />
+
+					<div style="color: #888; font-size: 0.8em">
+						<div>或者复制链接，并去浏览器打开</div>
+						<div style="font-family: monospace">
+							<a
+								href="${VERIFY_URL}"
+								style="
+									text-decoration: none;
+									color: #888;
+									font-family: monospace;
+								"
+								>${VERIFY_URL}</a
+							>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- content area end -->
+
+			<!-- footer start -->
+			<div class="footer" style="margin: 2rem; color: #999; font-size: 0.8em">
+				此邮件由服务器自动发出，直接回复无效。
+			</div>
+			<!-- footer end -->
+		</div>
+	</body>
 </html>
diff --git a/service/src/utils/templates/mail.notice.template.html b/service/src/utils/templates/mail.notice.template.html
index 6ca7154a..b2493b48 100644
--- a/service/src/utils/templates/mail.notice.template.html
+++ b/service/src/utils/templates/mail.notice.template.html
@@ -1,141 +1,124 @@
 <html>
-  <head> </head>
-  <body>
-    <div class="page flex-col">
-      <div class="box_3 flex-col" style="
-        display: flex;
-        position: relative;
-        width: 100%;
-        height: 206px;
-        background: #ef859d2e;
-        top: 0;
-        left: 0;
-        justify-content: center;
-      ">
-        <div class="section_1 flex-col" style="
-        background-image: url(&quot;https://ghproxy.com/https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg&quot;);
-        position: absolute;
-        width: 152px;
-        height: 152px;
-        display: flex;
-        top: 130px;
-        background-size: cover;
-        border-radius: 50%;
-        margin: 10px;
-      "></div>
-      </div>
-      <div class="box_4 flex-col" style="
-        margin-top: 92px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      ">
-        <div class="text-group_5 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin: 0 20px;
-      ">
-          <span class="text_1" style="
-        font-size: 26px;
-        font-family: PingFang-SC-Bold, PingFang-SC;
-        font-weight: bold;
-        color: #000000;
-        line-height: 37px;
-        text-align: center;
-        ">
-            <target="_blank" style="text-decoration: none; color: #0088cc;">${SITE_TITLE}</a> 账号开通
-          </span>
+	<head> </head>
 
-          <div class="box_2 flex-row" style="
-        margin: 0 20px;
-        min-height: 128px;
-        background: #F7F7F7;
-        border-radius: 12px;
-        margin-top: 34px;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 32px 16px;
-        width: calc(100% - 40px);
-      ">
+	<body
+		style="
+			font-family: -apple-system, 'microsoft yahei', sans-serif;
+			font-size: 16px;
+			text-align: center;
+		"
+	>
+		<div
+			class="main-wrapper"
+			style="display: flex; flex-flow: column nowrap; justify-content: center"
+		>
+			<!-- top area start -->
+			<div class="header-wrapper" style="height: 10em; background: #fcc">
+				<div
+					class="avatar"
+					style="
+						background-color: #eee;
+						background-image: url('https://ghproxy.com/https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg');
+						width: 10em;
+						height: 10em;
+						margin: 5em auto 0;
+						background-size: cover;
+						border-radius: 50%;
+						border: 0.25em solid white;
+					"
+				></div>
+			</div>
+			<div
+				class="article-title"
+				style="
+					margin: 6em auto 0;
+					font-weight: bold;
+					line-height: 2;
+					text-align: center;
+					color: #06f;
+				"
+			>
+				${SITE_TITLE} 账号开通
+			</div>
+			<!-- top area end -->
 
-            <div class="text-wrapper_4 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        margin-left: 30px;
-        margin-bottom: 16px;
-      ">
-              <hr>
-              <span class="text_3" style=" font-family: Arial, sans-serif; font-size: 16px; color: #333;">
-                <h1 style="color: #0088cc;">
-                  感谢您使用
-                  <a target="_blank" style="text-decoration: none; color: #0088cc;">${SITE_TITLE}</a>，
-									您的邮箱账号已开通：
-              </span>
-            </div>
-            <hr style="
-          display: flex;
-          position: relative;
-          border: 1px dashed #ef859d2e;
-          box-sizing: content-box;
-          height: 0px;
-          overflow: visible;
-          width: 100%;
-      ">
-            <div class="text-wrapper_4 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        margin-left: 30px;
-      ">
-              <hr>
-              </h1>
-              <p style="margin-top: 20px;">
-                请点击以下按钮进行登录：
-                <span class="text_4" style="
-      margin-top: 6px;
-      margin-right: 22px;
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #000000;
-      line-height: 22px;
-      "></span>
-            </div>
+			<!-- content area start -->
+			<div
+				class="content-wrapper"
+				style="
+					width: 100%;
+					padding: 2em;
+					box-sizing: border-box;
+					overflow: hidden;
+				"
+			>
+				<div
+					class="content gray-box"
+					style="
+						min-height: 8em;
+						background: #8881;
+						border-radius: 2em;
+						margin-top: 2em;
+						padding: 2em;
+						box-sizing: border-box;
+					"
+				>
+					<div style="text-align: center; color: #06f; font-size: 1.5em">
+						感谢您使用 ${SITE_TITLE}， 您的邮箱账号已开通
+					</div>
 
-            <a target="_blank" class="text-wrapper_2 flex-col" style="
-        min-width: 106px;
-        height: 38px;
-        background: #ef859d38;
-        border-radius: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-decoration: none;
-        margin: auto;
-        margin-top: 32px;
-      " href="${SITE_DOMAIN}">
-              <span class="text_5" style="
-        color: #DB214B;
-      ">点我登录</span>
-            </a>
-          </div>
-          <div class="text-group_6 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-top: 34px;
-      ">
-            <span class="text_6" style="
-        height: 17px;
-        font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #00000045;
-        line-height: 17px;
-      ">此邮件由服务器自动发出，直接回复无效。</span>
-          </div>
-        </div>
-      </div>
-  </body>
+					<hr style="border: 1px dashed #fcc; margin: 2em 0" />
+
+					<div style="text-align: center">
+						<div>请点击以下按钮进行登陆</div>
+
+						<div
+							style="
+								display: inline-block;
+								height: 3em;
+								line-height: 3em;
+								min-width: 8em;
+								background: #fcc;
+								color: #c33;
+								border-radius: 3em;
+								margin: 2em auto;
+							"
+						>
+							<a
+								target="_blank"
+								style="color: #c33; text-decoration: none; padding: 0 1.5em"
+								href="${SITE_DOMAIN}"
+							>
+								点我登陆
+							</a>
+						</div>
+					</div>
+
+					<hr style="border: 1px dashed #fcc; margin: 2em 0" />
+
+					<div style="color: #888; font-size: 0.8em">
+						<div>或者复制链接，并去浏览器打开</div>
+						<div style="font-family: monospace">
+							<a
+								href="${SITE_DOMAIN}"
+								style="
+									text-decoration: none;
+									color: #888;
+									font-family: monospace;
+								"
+								>${SITE_DOMAIN}</a
+							>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- content area end -->
+
+			<!-- footer start -->
+			<div class="footer" style="margin: 2rem; color: #999; font-size: 0.8em">
+				此邮件由服务器自动发出，直接回复无效。
+			</div>
+			<!-- footer end -->
+		</div>
+	</body>
 </html>
diff --git a/service/src/utils/templates/mail.resetpassword.template.html b/service/src/utils/templates/mail.resetpassword.template.html
index f658f787..a4eb1a89 100644
--- a/service/src/utils/templates/mail.resetpassword.template.html
+++ b/service/src/utils/templates/mail.resetpassword.template.html
@@ -1,144 +1,124 @@
 <html>
+	<head> </head>
 
-<head> </head>
+	<body
+		style="
+			font-family: -apple-system, 'microsoft yahei', sans-serif;
+			font-size: 16px;
+			text-align: center;
+		"
+	>
+		<div
+			class="main-wrapper"
+			style="display: flex; flex-flow: column nowrap; justify-content: center"
+		>
+			<!-- top area start -->
+			<div class="header-wrapper" style="height: 10em; background: #fcc">
+				<div
+					class="avatar"
+					style="
+						background-color: #eee;
+						background-image: url('https://ghproxy.com/https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg');
+						width: 10em;
+						height: 10em;
+						margin: 5em auto 0;
+						background-size: cover;
+						border-radius: 50%;
+						border: 0.25em solid white;
+					"
+				></div>
+			</div>
+			<div
+				class="article-title"
+				style="
+					margin: 6em auto 0;
+					font-weight: bold;
+					line-height: 2;
+					text-align: center;
+					color: #06f;
+				"
+			>
+				${SITE_TITLE} 重置密码
+			</div>
+			<!-- top area end -->
 
-<body>
-  <div class="page flex-col">
-    <div class="box_3 flex-col" style="
-        display: flex;
-        position: relative;
-        width: 100%;
-        height: 206px;
-        background: #ef859d2e;
-        top: 0;
-        left: 0;
-        justify-content: center;
-      ">
-      <div class="section_1 flex-col" style="
-        background-image: url(&quot;https://ghproxy.com/https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg&quot;);
-        position: absolute;
-        width: 152px;
-        height: 152px;
-        display: flex;
-        top: 130px;
-        background-size: cover;
-        border-radius: 50%;
-        margin: 10px;
-      "></div>
-    </div>
-    <div class="box_4 flex-col" style="
-        margin-top: 92px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      ">
-      <div class="text-group_5 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin: 0 20px;
-      ">
-        <span class="text_1" style="
-        font-size: 26px;
-        font-family: PingFang-SC-Bold, PingFang-SC;
-        font-weight: bold;
-        color: #000000;
-        line-height: 37px;
-        text-align: center;
-        ">
-          <target="_blank" style="text-decoration: none; color: #0088cc;">${SITE_TITLE}</a> 重置密码
-        </span>
+			<!-- content area start -->
+			<div
+				class="content-wrapper"
+				style="
+					width: 100%;
+					padding: 2em;
+					box-sizing: border-box;
+					overflow: hidden;
+				"
+			>
+				<div
+					class="content gray-box"
+					style="
+						min-height: 8em;
+						background: #8881;
+						border-radius: 2em;
+						margin-top: 2em;
+						padding: 2em;
+						box-sizing: border-box;
+					"
+				>
+					<div style="text-align: center; color: #06f; font-size: 1.5em">
+						感谢您使用 ${SITE_TITLE}， 这是您的重置密码链接 (12小时内有效)
+					</div>
 
-        <div class="box_2 flex-row" style="
-        margin: 0 20px;
-        min-height: 128px;
-        background: #F7F7F7;
-        border-radius: 12px;
-        margin-top: 34px;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 32px 16px;
-        width: calc(100% - 40px);
-      ">
+					<hr style="border: 1px dashed #fcc; margin: 2em 0" />
 
-          <div class="text-wrapper_4 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        margin-left: 30px;
-        margin-bottom: 16px;
-      ">
-            <hr>
-            <span class="text_3" style=" font-family: Arial, sans-serif; font-size: 16px; color: #333;">
-              <h1 style="color: #0088cc;">
-                感谢您使用
-                <a target="_blank" style="text-decoration: none; color: #0088cc;">${SITE_TITLE}</a>，
-                您的重置密码链接为（12小时内有效）：
-            </span>
-          </div>
-          <hr style="
-          display: flex;
-          position: relative;
-          border: 1px dashed #ef859d2e;
-          box-sizing: content-box;
-          height: 0px;
-          overflow: visible;
-          width: 100%;
-      ">
-          <div class="text-wrapper_4 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        margin-left: 30px;
-      ">
-            <hr>
-            </h1>
-            <p style="margin-top: 20px;">
-              请点击以下按钮进行重置密码：
-              <span class="text_4" style="
-      margin-top: 6px;
-      margin-right: 22px;
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #000000;
-      line-height: 22px;
-      "></span>
-          </div>
+					<div style="text-align: center">
+						<div>请点击以下按钮进行重置密码</div>
 
-          <a target="_blank" class="text-wrapper_2 flex-col" style="
-        min-width: 106px;
-        height: 38px;
-        background: #ef859d38;
-        border-radius: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-decoration: none;
-        margin: auto;
-        margin-top: 32px;
-      " href="${VERIFY_URL}">
-            <span class="text_5" style="
-        color: #DB214B;
-      ">重置密码</span>
-          </a>
-        </div>
-        <div class="text-group_6 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-top: 34px;
-      ">
-          <span class="text_6" style="
-        height: 17px;
-        font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #00000045;
-        line-height: 17px;
-      ">此邮件由服务器自动发出，直接回复无效。</span>
-        </div>
-      </div>
-    </div>
-</body>
+						<div
+							style="
+								display: inline-block;
+								height: 3em;
+								line-height: 3em;
+								min-width: 8em;
+								background: #fcc;
+								color: #c33;
+								border-radius: 3em;
+								margin: 2em auto;
+							"
+						>
+							<a
+								target="_blank"
+								style="color: #c33; text-decoration: none; padding: 0 1.5em"
+								href="${VERIFY_URL}"
+							>
+								重置密码
+							</a>
+						</div>
+					</div>
 
-</html>
\ No newline at end of file
+					<hr style="border: 1px dashed #fcc; margin: 2em 0" />
+
+					<div style="color: #888; font-size: 0.8em">
+						<div>或者复制链接，并去浏览器打开</div>
+						<div style="font-family: monospace">
+							<a
+								href="${VERIFY_URL}"
+								style="
+									text-decoration: none;
+									color: #888;
+									font-family: monospace;
+								"
+								>${VERIFY_URL}</a
+							>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- content area end -->
+
+			<!-- footer start -->
+			<div class="footer" style="margin: 2rem; color: #999; font-size: 0.8em">
+				此邮件由服务器自动发出，直接回复无效。
+			</div>
+			<!-- footer end -->
+		</div>
+	</body>
+</html>
diff --git a/service/src/utils/templates/mail.template.html b/service/src/utils/templates/mail.template.html
index dc656818..8cf4e271 100644
--- a/service/src/utils/templates/mail.template.html
+++ b/service/src/utils/templates/mail.template.html
@@ -1,141 +1,124 @@
 <html>
-  <head> </head>
-  <body>
-    <div class="page flex-col">
-      <div class="box_3 flex-col" style="
-        display: flex;
-        position: relative;
-        width: 100%;
-        height: 206px;
-        background: #ef859d2e;
-        top: 0;
-        left: 0;
-        justify-content: center;
-      ">
-        <div class="section_1 flex-col" style="
-        background-image: url(&quot;https://ghproxy.com/https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg&quot;);
-        position: absolute;
-        width: 152px;
-        height: 152px;
-        display: flex;
-        top: 130px;
-        background-size: cover;
-        border-radius: 50%;
-        margin: 10px;
-      "></div>
-      </div>
-      <div class="box_4 flex-col" style="
-        margin-top: 92px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      ">
-        <div class="text-group_5 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin: 0 20px;
-      ">
-          <span class="text_1" style="
-        font-size: 26px;
-        font-family: PingFang-SC-Bold, PingFang-SC;
-        font-weight: bold;
-        color: #000000;
-        line-height: 37px;
-        text-align: center;
-        ">
-            <target="_blank" style="text-decoration: none; color: #0088cc;">${SITE_TITLE}</a> 账号验证
-          </span>
+	<head> </head>
 
-          <div class="box_2 flex-row" style="
-        margin: 0 20px;
-        min-height: 128px;
-        background: #F7F7F7;
-        border-radius: 12px;
-        margin-top: 34px;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 32px 16px;
-        width: calc(100% - 40px);
-      ">
+	<body
+		style="
+			font-family: -apple-system, 'microsoft yahei', sans-serif;
+			font-size: 16px;
+			text-align: center;
+		"
+	>
+		<div
+			class="main-wrapper"
+			style="display: flex; flex-flow: column nowrap; justify-content: center"
+		>
+			<!-- top area start -->
+			<div class="header-wrapper" style="height: 10em; background: #fcc">
+				<div
+					class="avatar"
+					style="
+						background-color: #eee;
+						background-image: url('https://ghproxy.com/https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg');
+						width: 10em;
+						height: 10em;
+						margin: 5em auto 0;
+						background-size: cover;
+						border-radius: 50%;
+						border: 0.25em solid white;
+					"
+				></div>
+			</div>
+			<div
+				class="article-title"
+				style="
+					margin: 6em auto 0;
+					font-weight: bold;
+					line-height: 2;
+					text-align: center;
+					color: #06f;
+				"
+			>
+				${SITE_TITLE} 账号验证
+			</div>
+			<!-- top area end -->
 
-            <div class="text-wrapper_4 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        margin-left: 30px;
-        margin-bottom: 16px;
-      ">
-              <hr>
-              <span class="text_3" style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">
-                <h1 style="color: #0088cc;">
-                  感谢您使用
-                  <a target="_blank" style="text-decoration: none; color: #0088cc;">${SITE_TITLE}</a>，
-                    您的邮箱验证链接为（12小时内有效）：
-              </span>
-            </div>
-            <hr style="
-          display: flex;
-          position: relative;
-          border: 1px dashed #ef859d2e;
-          box-sizing: content-box;
-          height: 0px;
-          overflow: visible;
-          width: 100%;
-      ">
-            <div class="text-wrapper_4 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        margin-left: 30px;
-      ">
-              <hr>
-              </h1>
-              <p style="margin-top: 20px;">
-                请点击以下按钮进行验证：
-                <span class="text_4" style="
-      margin-top: 6px;
-      margin-right: 22px;
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #000000;
-      line-height: 22px;
-      "></span>
-            </div>
+			<!-- content area start -->
+			<div
+				class="content-wrapper"
+				style="
+					width: 100%;
+					padding: 2em;
+					box-sizing: border-box;
+					overflow: hidden;
+				"
+			>
+				<div
+					class="content gray-box"
+					style="
+						min-height: 8em;
+						background: #8881;
+						border-radius: 2em;
+						margin-top: 2em;
+						padding: 2em;
+						box-sizing: border-box;
+					"
+				>
+					<div style="text-align: center; color: #06f; font-size: 1.5em">
+						感谢您使用 ${SITE_TITLE}， 这是您的邮箱验证链接 (12小时内有效)
+					</div>
 
-            <a target="_blank" class="text-wrapper_2 flex-col" style="
-        min-width: 106px;
-        height: 38px;
-        background: #ef859d38;
-        border-radius: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-decoration: none;
-        margin: auto;
-        margin-top: 32px;
-      " href="${VERIFY_URL}">
-              <span class="text_5" style="
-        color: #DB214B;
-      ">点我验证</span>
-            </a>
-          </div>
-          <div class="text-group_6 flex-col justify-between" style="
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-top: 34px;
-      ">
-            <span class="text_6" style="
-        height: 17px;
-        font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #00000045;
-        line-height: 17px;
-      ">此邮件由服务器自动发出，直接回复无效。</span>
-          </div>
-        </div>
-      </div>
-  </body>
+					<hr style="border: 1px dashed #fcc; margin: 2em 0" />
+
+					<div style="text-align: center">
+						<div>请点击以下按钮进行验证</div>
+
+						<div
+							style="
+								display: inline-block;
+								height: 3em;
+								line-height: 3em;
+								min-width: 8em;
+								background: #fcc;
+								color: #c33;
+								border-radius: 3em;
+								margin: 2em auto;
+							"
+						>
+							<a
+								target="_blank"
+								style="color: #c33; text-decoration: none; padding: 0 1.5em"
+								href="${VERIFY_URL}"
+							>
+								点我验证
+							</a>
+						</div>
+					</div>
+
+					<hr style="border: 1px dashed #fcc; margin: 2em 0" />
+
+					<div style="color: #888; font-size: 0.8em">
+						<div>或者复制链接，并去浏览器打开</div>
+						<div style="font-family: monospace">
+							<a
+								href="${VERIFY_URL}"
+								style="
+									text-decoration: none;
+									color: #888;
+									font-family: monospace;
+								"
+								>${VERIFY_URL}</a
+							>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- content area end -->
+
+			<!-- footer start -->
+			<div class="footer" style="margin: 2rem; color: #999; font-size: 0.8em">
+				此邮件由服务器自动发出，直接回复无效。
+			</div>
+			<!-- footer end -->
+		</div>
+	</body>
 </html>
diff --git a/src/components/common/HoverButton/Button.vue b/src/components/common/HoverButton/Button.vue
index a5228b03..40aa8fd8 100644
--- a/src/components/common/HoverButton/Button.vue
+++ b/src/components/common/HoverButton/Button.vue
@@ -12,7 +12,8 @@ function handleClick() {
 
 <template>
   <button
-    class="flex items-center justify-center w-10 h-10 transition rounded-full hover:bg-neutral-100 dark:hover:bg-[#414755]"
+    class="flex items-center justify-center h-10 transition hover:bg-neutral-100 dark:hover:bg-[#414755]"
+    style="flex-flow:row nowrap;min-width:2.5em;padding:.5em;border-radius:.5em;"
     @click="handleClick"
   >
     <slot />
diff --git a/src/components/common/Setting/Password.vue b/src/components/common/Setting/Password.vue
new file mode 100644
index 00000000..99dd2e24
--- /dev/null
+++ b/src/components/common/Setting/Password.vue
@@ -0,0 +1,90 @@
+<script setup lang='ts'>
+import { onMounted, ref } from 'vue'
+import { NButton, NInput, NSpin, useMessage } from 'naive-ui'
+import { UserPassword } from './model'
+import { fetchUpdateUserPassword } from '@/api'
+import { t } from '@/locales'
+
+const ms = useMessage()
+
+const loading = ref(false)
+const saving = ref(false)
+
+const config = ref<UserPassword>()
+
+async function updatePassword() {
+  saving.value = true
+  try {
+    if (!config.value)
+      throw new Error(t('common.invalid'))
+    if (config.value.newPassword !== config.value.confirmPassword)
+      throw new Error(t('setting.validatePasswordStartWith'))
+    if (config.value.oldPassword === config.value.newPassword)
+      throw new Error(t('setting.passwodSame'))
+    await fetchUpdateUserPassword(config.value as UserPassword)
+    ms.success(t('common.success'))
+  }
+  catch (error: any) {
+    ms.error(error.message)
+  }
+  saving.value = false
+}
+
+onMounted(() => {
+  config.value = new UserPassword()
+})
+</script>
+
+<template>
+  <NSpin :show="loading">
+    <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]">{{ $t('setting.oldPassword') }}</span>
+          <div class="w-[200px]">
+            <NInput
+              type="password"
+              :value="config && config.oldPassword"
+              :placeholder="$t('setting.oldPassword')"
+              @input="(val) => { if (config) config.oldPassword = val }"
+            />
+          </div>
+        </div>
+        <div class="flex items-center space-x-4">
+          <span class="flex-shrink-0 w-[100px]">{{ $t('setting.newPassword') }}</span>
+          <div class="w-[200px]">
+            <NInput
+              type="password"
+              :value="config && config.newPassword"
+              :placeholder="$t('setting.newPassword')"
+              @input="(val) => { if (config) config.newPassword = val }"
+            />
+          </div>
+        </div>
+        <div class="flex items-center space-x-4">
+          <span class="flex-shrink-0 w-[100px]">{{ $t('setting.confirmNewPassword') }}</span>
+          <div class="w-[200px]">
+            <NInput
+              type="password"
+              :value="config && config.confirmPassword"
+              :disabled="!config || !config.newPassword"
+              :placeholder="$t('setting.confirmNewPassword')"
+              @input="(val) => { if (config) config.confirmPassword = val }"
+            />
+          </div>
+        </div>
+        <div class="flex items-center space-x-4">
+          <span class="flex-shrink-0 w-[100px]" />
+          <div class="flex flex-wrap items-center gap-4">
+            <NButton
+              :loading="saving" type="primary" :disabled="!config || !config.newPassword || !config.confirmPassword || !config.oldPassword || config.confirmPassword !== config.newPassword || config.newPassword.length < 6"
+              @click="updatePassword()"
+            >
+              {{ $t('common.save') }}
+            </NButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </NSpin>
+</template>
diff --git a/src/components/common/Setting/TwoFA.vue b/src/components/common/Setting/TwoFA.vue
new file mode 100644
index 00000000..b3853459
--- /dev/null
+++ b/src/components/common/Setting/TwoFA.vue
@@ -0,0 +1,141 @@
+<script setup lang='ts'>
+import { onMounted, ref } from 'vue'
+import { NButton, NDivider, NInput, NSpin, NStep, NSteps, useMessage } from 'naive-ui'
+import QrcodeVue from 'qrcode.vue'
+import type { TwoFAConfig } from './model'
+import { fetchDisableUser2FA, fetchGetUser2FA, fetchVerifyUser2FA } from '@/api'
+import { t } from '@/locales'
+
+const ms = useMessage()
+
+const loading = ref(false)
+const saving = ref(false)
+
+const config = ref<TwoFAConfig>()
+
+async function fetchConfig() {
+  try {
+    loading.value = true
+    const { data } = await fetchGetUser2FA<TwoFAConfig>()
+    config.value = data
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+async function update2FAInfo() {
+  saving.value = true
+  try {
+    if (!config.value)
+      throw new Error(t('common.invalid'))
+    const result = await fetchVerifyUser2FA(config.value.secretKey, config.value.testCode)
+    await fetchConfig()
+    ms.success(result.message as string)
+  }
+  catch (error: any) {
+    ms.error(error.message)
+  }
+  saving.value = false
+}
+
+async function disable2FA() {
+  saving.value = true
+  try {
+    if (!config.value)
+      throw new Error(t('common.invalid'))
+    const result = await fetchDisableUser2FA(config.value.testCode)
+    await fetchConfig()
+    ms.success(result.message as string)
+  }
+  catch (error: any) {
+    ms.error(error.message)
+  }
+  saving.value = false
+}
+
+onMounted(() => {
+  fetchConfig()
+})
+</script>
+
+<template>
+  <NSpin :show="loading">
+    <div class="p-4 space-y-5 min-h-[200px]">
+      <div class="space-y-6">
+        <div class="flex items-center space-x-4">
+          <div class="flex-1">
+            {{ $t('setting.info2FA') }}
+            <br> {{ $t('setting.status2FA') }} ：
+            <span v-if="!config || !config.enaled" style="color: red;">{{ $t('setting.status2FAClosed') }}</span>
+            <span v-if="config && config.enaled" style="color: rgb(22, 183, 65);">{{ $t('setting.status2FAOpened') }}</span>
+          </div>
+        </div>
+        <div v-if="config && config.enaled" class="flex items-center space-x-4">
+          <div class="w-[200px]">
+            <NInput
+              :value="config && config.testCode"
+              placeholder="6-digit dynamic code"
+              @input="(val) => { if (config) config.testCode = val }"
+            />
+          </div>
+        </div>
+        <div v-if="config && config.enaled" class="flex items-center space-x-4">
+          <div class="flex flex-wrap items-center gap-4">
+            <NButton
+              :loading="saving" type="warning" @click="disable2FA()"
+            >
+              {{ $t('setting.disable2FA') }}
+            </NButton>
+          </div>
+        </div>
+        <NDivider v-if="!config || !config.enaled" />
+        <div v-if="!config || !config.enaled" class="flex items-center space-x-4">
+          <div class="flex-1">
+            <NSteps vertical>
+              <NStep
+                :title="$t('setting.info2FAStep1')"
+                :description="$t('setting.info2FAStep1Desc')"
+              />
+              <NStep
+                :title="$t('setting.info2FAStep2')"
+              >
+                {{ $t('setting.info2FAStep2Desc') }}
+                <br><br>
+                <QrcodeVue :value="config?.otpauthUrl" :size="150" level="H" />
+                <br>{{ $t('setting.info2FAStep2Tip') }}：<br> {{ $t('setting.info2FAStep2TipAccount') }} ：{{ config?.userName }}<br> {{ $t('setting.info2FAStep2TipSecret') }} ：{{ config?.secretKey }}
+              </NStep>
+              <NStep
+                :title="$t('setting.info2FAStep3')"
+              >
+                {{ $t('setting.info2FAStep3Desc') }}
+                <br>
+                <div class="flex items-center space-x-4">
+                  <div class="w-[200px]">
+                    <NInput
+                      :value="config && config.testCode"
+                      placeholder=""
+                      @input="(val) => { if (config) config.testCode = val }"
+                    /><br><br>
+                    <NButton
+                      :loading="saving" type="primary" :disabled="!config || !config.testCode || config.testCode.length !== 6"
+                      @click="update2FAInfo()"
+                    >
+                      {{ $t('setting.enable2FA') }}
+                    </NButton>
+                  </div>
+                </div>
+                <br>{{ $t('setting.info2FAStep3Tip1') }}
+                <br>{{ $t('setting.info2FAStep3Tip2') }}
+                <br>{{ $t('setting.info2FAStep3Tip3') }}
+              </NStep>
+            </NSteps>
+          </div>
+        </div>
+        <div v-if="!config || !config.enaled" class="flex items-center space-x-4">
+          <div class="flex flex-wrap items-center gap-4" />
+        </div>
+      </div>
+    </div>
+  </NSpin>
+</template>
diff --git a/src/components/common/Setting/User.vue b/src/components/common/Setting/User.vue
index 110d3085..ebce04ca 100644
--- a/src/components/common/Setting/User.vue
+++ b/src/components/common/Setting/User.vue
@@ -2,7 +2,7 @@
 import { h, onMounted, reactive, ref } from 'vue'
 import { NButton, NDataTable, NInput, NModal, NSelect, NSpace, NTag, useDialog, useMessage } from 'naive-ui'
 import { Status, UserInfo, UserRole, userRoleOptions } from './model'
-import { fetchGetUsers, fetchUpdateUser, fetchUpdateUserStatus } from '@/api'
+import { fetchDisableUser2FAByAdmin, fetchGetUsers, fetchUpdateUser, fetchUpdateUserStatus } from '@/api'
 import { t } from '@/locales'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 
@@ -27,12 +27,12 @@ const columns = [
   {
     title: 'Register Time',
     key: 'createTime',
-    width: 220,
+    width: 200,
   },
   {
     title: 'Verify Time',
     key: 'verifyTime',
-    width: 220,
+    width: 200,
   },
   {
     title: 'Roles',
@@ -60,11 +60,16 @@ const columns = [
   {
     title: 'Status',
     key: 'status',
-    width: 200,
+    width: 80,
     render(row: any) {
       return Status[row.status]
     },
   },
+  {
+    title: 'Remark',
+    key: 'remark',
+    width: 220,
+  },
   {
     title: 'Action',
     key: '_id',
@@ -108,6 +113,17 @@ const columns = [
           { default: () => t('chat.verifiedUser') },
         ))
       }
+      if (row.secretKey) {
+        actions.push(h(
+          NButton,
+          {
+            size: 'small',
+            type: 'warning',
+            onClick: () => handleDisable2FA(row._id),
+          },
+          { default: () => t('chat.disable2FA') },
+        ))
+      }
       return actions
     },
   },
@@ -170,6 +186,20 @@ async function handleUpdateUserStatus(userId: string, status: Status) {
   }
 }
 
+async function handleDisable2FA(userId: string) {
+  dialog.warning({
+    title: t('chat.disable2FA'),
+    content: t('chat.disable2FAConfirm'),
+    positiveText: t('common.yes'),
+    negativeText: t('common.no'),
+    onPositiveClick: async () => {
+      const result = await fetchDisableUser2FAByAdmin(userId)
+      ms.success(result.message as string)
+      await handleGetUsers(pagination.page)
+    },
+  })
+}
+
 function handleNewUser() {
   userRef.value = new UserInfo([UserRole.User])
   show.value = true
@@ -259,6 +289,15 @@ onMounted(async () => {
             />
           </div>
         </div>
+        <div class="flex items-center space-x-4">
+          <span class="flex-shrink-0 w-[100px]">{{ $t('setting.remark') }}</span>
+          <div class="flex-1">
+            <NInput
+              v-model:value="userRef.remark" type="textarea"
+              :autosize="{ minRows: 1, maxRows: 2 }" placeholder=""
+            />
+          </div>
+        </div>
         <div class="flex items-center space-x-4">
           <span class="flex-shrink-0 w-[100px]" />
           <NButton type="primary" :loading="handleSaving" @click="handleUpdateUser()">
diff --git a/src/components/common/Setting/index.vue b/src/components/common/Setting/index.vue
index 2d802f80..f162dfaa 100644
--- a/src/components/common/Setting/index.vue
+++ b/src/components/common/Setting/index.vue
@@ -10,6 +10,8 @@ import Mail from './Mail.vue'
 import Audit from './Audit.vue'
 import User from './User.vue'
 import Key from './Keys.vue'
+import Password from './Password.vue'
+import TwoFA from './TwoFA.vue'
 import { SvgIcon } from '@/components/common'
 import { useAuthStore, useUserStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
@@ -58,6 +60,20 @@ const show = computed({
             <General />
           </div>
         </NTabPane>
+        <NTabPane name="PasswordConfig" tab="PasswordConfig">
+          <template #tab>
+            <SvgIcon class="text-lg" icon="ri-key-2-line" />
+            <span class="ml-2">{{ $t('setting.passwordConfig') }}</span>
+          </template>
+          <Password />
+        </NTabPane>
+        <NTabPane name="TwoFAConfig" tab="TwoFAConfig">
+          <template #tab>
+            <SvgIcon class="text-lg" icon="ri-key-2-line" />
+            <span class="ml-2">{{ $t('setting.twoFAConfig') }}</span>
+          </template>
+          <TwoFA />
+        </NTabPane>
         <NTabPane v-if="isChatGPTAPI" name="Advanced" tab="Advanced">
           <template #tab>
             <SvgIcon class="text-lg" icon="ri:equalizer-line" />
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index 2f8bf1ec..966938b5 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -36,6 +36,7 @@ export default {
     resetPassword: 'Reset Password',
     resetPasswordMail: 'Send Reset Password Mail',
     auditTip: 'Sensitive words do not take effect on Admin.',
+    twoFA: 'Two-step verification',
   },
   chat: {
     newChatButton: 'New Chat',
@@ -70,6 +71,8 @@ export default {
     deleteKey: 'Delete Key',
     editKeyButton: 'Edit Key',
     deleteKeyConfirm: 'Are you sure to delete this key?',
+    disable2FA: 'Disable 2FA',
+    disable2FAConfirm: 'Are you sure to disable 2FA for this user?',
   },
   setting: {
     setting: 'Setting',
@@ -142,6 +145,29 @@ export default {
     remark: 'Remark',
     email: 'Email',
     password: 'Password',
+    passwordConfig: 'Password',
+    oldPassword: 'Old Password',
+    newPassword: 'New Password',
+    confirmNewPassword: 'Confirm Password',
+    twoFAConfig: '2FA',
+    disable2FA: 'Disable 2FA',
+    enable2FA: 'Enable 2FA',
+    info2FA: 'Two-step verification is an additional authentication step that enhances the security of your login experience. After enabling two-step verification, every time you log in to your account, the system will prompt you to enter a dynamic verification code.',
+    status2FA: 'Current status',
+    status2FAClosed: 'Closed',
+    status2FAOpened: 'Opened',
+    info2FAStep1: 'Install the Authenticator App',
+    info2FAStep1Desc: 'Install the authentication app, for example: Google Authenticator、Microsoft Authenticator、Authy',
+    info2FAStep2: 'Generate verification code for configuration.',
+    info2FAStep2Desc: 'Open the Authenticator App and click "Scan QR Code" to scan the QR code.',
+    info2FAStep2Tip: 'Note: The authenticator cannot scan the verification code? Please manually add the following account.',
+    info2FAStep2TipAccount: 'Account',
+    info2FAStep2TipSecret: 'Secret',
+    info2FAStep3: 'Verify and enable',
+    info2FAStep3Desc: 'Please enter the 6-digit dynamic verification code generated by the authentication app to enable two-step verification.',
+    info2FAStep3Tip1: 'Note: How to turn off two-step verification?',
+    info2FAStep3Tip2: '1. After logging in, use the two-step verification on the Two-Step Verification page to disable it.',
+    info2FAStep3Tip3: '2. Contact the administrator to disable two-step verification.',
   },
   store: {
     siderButton: 'Prompt Store',
diff --git a/src/locales/ko-KR.ts b/src/locales/ko-KR.ts
index fcf5001f..1319f787 100644
--- a/src/locales/ko-KR.ts
+++ b/src/locales/ko-KR.ts
@@ -36,6 +36,7 @@ export default {
     resetPassword: '암호를 재설정',
     resetPasswordMail: '비밀번호 재설정 메일 보내기',
     auditTip: 'Sensitive words do not take effect on Admin.',
+    twoFA: 'Two-step verification',
   },
   chat: {
     newChatButton: '새 채팅',
@@ -70,6 +71,8 @@ export default {
     deleteKey: 'Delete Key',
     editKeyButton: 'Edit Key',
     deleteKeyConfirm: 'Are you sure to delete this key?',
+    disable2FA: 'Disable 2FA',
+    disable2FAConfirm: 'Are you sure to disable 2FA for this user?',
   },
   setting: {
     setting: '설정',
@@ -140,6 +143,29 @@ export default {
     remark: 'Remark',
     email: 'Email',
     password: 'Password',
+    passwordConfig: 'Password',
+    oldPassword: 'Old Password',
+    newPassword: 'New Password',
+    confirmNewPassword: 'Confirm Password',
+    twoFAConfig: '2FA',
+    disable2FA: 'Disable 2FA',
+    enable2FA: 'Enable 2FA',
+    info2FA: 'Two-step verification is an additional authentication step that enhances the security of your login experience. After enabling two-step verification, every time you log in to your account, the system will prompt you to enter a dynamic verification code.',
+    status2FA: 'Current status',
+    status2FAClosed: 'Closed',
+    status2FAOpened: 'Opened',
+    info2FAStep1: 'Install the Authenticator App',
+    info2FAStep1Desc: 'Install the authentication app, for example: Google Authenticator、Microsoft Authenticator、Authy',
+    info2FAStep2: 'Generate verification code for configuration.',
+    info2FAStep2Desc: 'Open the Authenticator App and click "Scan QR Code" to scan the QR code.',
+    info2FAStep2Tip: 'Note: The authenticator cannot scan the verification code? Please manually add the following account.',
+    info2FAStep2TipAccount: 'Account',
+    info2FAStep2TipSecret: 'Secret',
+    info2FAStep3: 'Verify and enable',
+    info2FAStep3Desc: 'Please enter the 6-digit dynamic verification code generated by the authentication app to enable two-step verification.',
+    info2FAStep3Tip1: 'Note: How to turn off two-step verification?',
+    info2FAStep3Tip2: '1. After logging in, use the two-step verification on the Two-Step Verification page to disable it.',
+    info2FAStep3Tip3: '2. Contact the administrator to disable two-step verification.',
   },
   store: {
     siderButton: '프롬프트 스토어',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 328390a3..dda3df49 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -36,6 +36,7 @@ export default {
     resetPassword: '重置密码',
     resetPasswordMail: '发送重置密码邮件',
     auditTip: '敏感词对管理员不生效',
+    twoFA: '两步验证',
   },
   chat: {
     newChatButton: '新建聊天',
@@ -70,6 +71,8 @@ export default {
     deleteKey: '删除 Key',
     editKeyButton: '编辑 Key',
     deleteKeyConfirm: '你确定要删除这个 key 吗?',
+    disable2FA: '禁用 2FA',
+    disable2FAConfirm: '您确定要为此用户禁用两步验证吗？?',
   },
   setting: {
     setting: '设置',
@@ -142,6 +145,29 @@ export default {
     remark: '备注',
     email: '电子邮箱',
     password: '密码',
+    passwordConfig: '密码',
+    oldPassword: '旧密码',
+    newPassword: '新密码',
+    confirmNewPassword: '确认密码',
+    twoFAConfig: '两步验证',
+    disable2FA: '禁用 2FA',
+    enable2FA: '开启 2FA',
+    info2FA: '两步验证是一个额外的验证步骤，可让您的登录体验更加安全。开启两步验证后，每次您要登录到您的帐户时，系统均提示您输入动态验证码。',
+    status2FA: '当前状态',
+    status2FAClosed: '关闭',
+    status2FAOpened: '已开启',
+    info2FAStep1: '安装身份验证器App',
+    info2FAStep1Desc: '安装身份验证器App，例如Google Authenticator、Microsoft Authenticator、Authy等',
+    info2FAStep2: '配置生成验证码',
+    info2FAStep2Desc: '打开身份验证器 App，点击「扫描二维码」扫描二维码。',
+    info2FAStep2Tip: '注意： 身份验证器不能扫描验证码？ 手动添加以下账户',
+    info2FAStep2TipAccount: '账户',
+    info2FAStep2TipSecret: '密钥',
+    info2FAStep3: '验证并开启',
+    info2FAStep3Desc: '请输入身份验证器 App 生成的 6 位动态验证码，开启两步验证。',
+    info2FAStep3Tip1: '注意：如何关闭两步验证？',
+    info2FAStep3Tip2: '1. 登录后，在 两步验证 页面使用两步验证码关闭。',
+    info2FAStep3Tip3: '2. 联系管理员来关闭两步验证。',
   },
   store: {
     siderButton: '提示词商店',
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
index ae388263..4ee4d4a4 100644
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -36,6 +36,7 @@ export default {
     resetPassword: '重置密码',
     resetPasswordMail: '發送重置密碼郵件',
     auditTip: '敏感詞對管理員不生效',
+    twoFA: '两步验证',
   },
   chat: {
     newChatButton: '新建對話',
@@ -70,6 +71,8 @@ export default {
     deleteKey: '刪除 Key',
     editKeyButton: '編輯 Key',
     deleteKeyConfirm: '你確定要刪除這個 key 嗎?',
+    disable2FA: '禁用 2FA',
+    disable2FAConfirm: '您确定要为此用户禁用两步验证吗？?',
   },
   setting: {
     setting: '設定',
@@ -142,6 +145,29 @@ export default {
     remark: '備註',
     email: '電子郵箱',
     password: '密碼',
+    passwordConfig: '密码',
+    oldPassword: '旧密码',
+    newPassword: '新密码',
+    confirmNewPassword: '确认密码',
+    twoFAConfig: '两步验证',
+    disable2FA: '禁用 2FA',
+    enable2FA: '开启 2FA',
+    info2FA: '两步验证是一个额外的验证步骤，可让您的登录体验更加安全。开启两步验证后，每次您要登录到您的帐户时，系统均提示您输入动态验证码。',
+    status2FA: '当前状态',
+    status2FAClosed: '关闭',
+    status2FAOpened: '已开启',
+    info2FAStep1: '安装身份验证器App',
+    info2FAStep1Desc: '安装身份验证器App，例如Google Authenticator、Microsoft Authenticator、Authy等',
+    info2FAStep2: '配置生成验证码',
+    info2FAStep2Desc: '打开身份验证器 App，点击「扫描二维码」扫描二维码。',
+    info2FAStep2Tip: '注意： 身份验证器不能扫描验证码？ 手动添加以下账户',
+    info2FAStep2TipAccount: '账户',
+    info2FAStep2TipSecret: '密钥',
+    info2FAStep3: '验证并开启',
+    info2FAStep3Desc: '请输入身份验证器 App 生成的 6 位动态验证码，开启两步验证。',
+    info2FAStep3Tip1: '注意：如何关闭两步验证？',
+    info2FAStep3Tip2: '1. 登录后，在 两步验证 页面使用两步验证码关闭。',
+    info2FAStep3Tip3: '2. 联系管理员来关闭两步验证。',
   },
   store: {
     siderButton: '提示詞商店',
diff --git a/src/views/chat/components/Header/index.vue b/src/views/chat/components/Header/index.vue
index 3239bdc4..ceb463e8 100644
--- a/src/views/chat/components/Header/index.vue
+++ b/src/views/chat/components/Header/index.vue
@@ -74,10 +74,11 @@ function handleShowPrompt() {
             <IconPrompt class="w-[20px] m-auto" />
           </span>
         </HoverButton>
-        <HoverButton @click="toggleUsingContext">
-          <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
+        <HoverButton :tooltip="usingContext ? '点击停止包含上下文' : '点击开启包含上下文'" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }" @click="toggleUsingContext">
+          <span class="text-xl">
             <SvgIcon icon="ri:chat-history-line" />
           </span>
+          <span style="margin-left:.25em">{{ usingContext ? '包含上下文' : '不含上下文' }}</span>
         </HoverButton>
         <HoverButton @click="handleExport">
           <span class="text-xl text-[#4f555e] dark:text-white">
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 6544e373..4d151ea0 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -683,10 +683,11 @@ onUnmounted(() => {
                 <IconPrompt class="w-[20px] m-auto" />
               </span>
             </HoverButton>
-            <HoverButton v-if="!isMobile" @click="handleToggleUsingContext">
-              <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
+            <HoverButton v-if="!isMobile" :tooltip="usingContext ? '点击停止包含上下文' : '点击开启包含上下文'" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }" @click="handleToggleUsingContext">
+              <span class="text-xl">
                 <SvgIcon icon="ri:chat-history-line" />
               </span>
+              <span style="margin-left:.25em">{{ usingContext ? '包含上下文' : '不含上下文' }}</span>
             </HoverButton>
             <NSelect
               style="width: 250px"
diff --git a/src/views/chat/layout/Permission.vue b/src/views/chat/layout/Permission.vue
index 0f023549..d13e5ba1 100644
--- a/src/views/chat/layout/Permission.vue
+++ b/src/views/chat/layout/Permission.vue
@@ -32,6 +32,8 @@ const loading = ref(false)
 const username = ref('')
 const password = ref('')
 const sign = ref('')
+const token = ref('')
+const need2FA = ref(false)
 
 const disabled = computed(() => !username.value.trim() || !password.value.trim() || loading.value)
 
@@ -112,15 +114,19 @@ function handlePress(event: KeyboardEvent) {
 async function handleLogin() {
   const name = username.value.trim()
   const pwd = password.value.trim()
-
   if (!name || !pwd)
     return
 
   try {
     loading.value = true
-    const result = await fetchLogin(name, pwd)
+    const result = await fetchLogin(name, pwd, token.value)
+    if (result.data.need2FA) {
+      need2FA.value = true
+      ms.warning(result.message as string)
+      return
+    }
     await authStore.setToken(result.data.token)
-    ms.success('success')
+    ms.success(result.message as string)
     window.location.reload()
   }
   catch (error: any) {
@@ -213,7 +219,7 @@ async function handleResetPassword() {
           <NTabPane name="login" :tab="$t('common.login')">
             <NInput v-model:value="username" type="text" :placeholder="$t('common.email')" class="mb-2" />
             <NInput v-model:value="password" type="password" :placeholder="$t('common.password')" class="mb-2" @keypress="handlePress" />
-
+            <NInput v-if="need2FA" v-model:value="token" type="text" :placeholder="$t('common.twoFA')" class="mb-2" @keypress="handlePress" />
             <NButton block type="primary" :disabled="disabled" :loading="loading" @click="handleLogin">
               {{ $t('common.login') }}
             </NButton>

From 30028913e916a0c71c70a686e8c91bdf8cbf7096 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Wed, 20 Dec 2023 11:51:28 +0800
Subject: [PATCH 18/20] fix: fix the max tokens for gpt-4-turbo 128K

---
 service/src/chatgpt/index.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/service/src/chatgpt/index.ts b/service/src/chatgpt/index.ts
index 20ecc02e..6772ca65 100644
--- a/service/src/chatgpt/index.ts
+++ b/service/src/chatgpt/index.ts
@@ -55,6 +55,12 @@ export async function initApi(key: KeyConfig, chatModel: CHATMODEL) {
     // The token limit includes the token count from both the message array sent and the model response.
     // 'gpt-35-turbo' has a limit of 4096 tokens, 'gpt-4' and 'gpt-4-32k' have limits of 8192 and 32768 tokens respectively.
 
+    // Check if the model type is GPT-4-turbo
+    if (model.toLowerCase().includes('1106-preview')) {
+      // If it's a '1106-preview' model, set the maxModelTokens to 131072
+      options.maxModelTokens = 131072
+      options.maxResponseTokens = 32768
+    }
     // Check if the model type includes '16k'
     if (model.toLowerCase().includes('16k')) {
       // If it's a '16k' model, set the maxModelTokens to 16384 and maxResponseTokens to 4096

From 6800e3881476fda321c3210507caece8c73d2ea4 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 21 Dec 2023 12:08:47 +0800
Subject: [PATCH 19/20] feat: add custom system role

---
 service/src/chatgpt/index.ts              | 23 +++++++++----
 service/src/index.ts                      | 10 ++++--
 service/src/storage/model.ts              |  4 +++
 service/src/storage/mongo.ts              |  2 +-
 src/api/index.ts                          |  4 +--
 src/components/common/Setting/General.vue | 39 +++++++++++++++++++++--
 src/locales/en-US.ts                      |  1 +
 src/locales/ko-KR.ts                      |  1 +
 src/locales/zh-CN.ts                      |  1 +
 src/locales/zh-TW.ts                      |  1 +
 src/store/modules/settings/helper.ts      |  2 +-
 src/store/modules/user/helper.ts          |  8 +++++
 src/store/modules/user/index.ts           |  2 +-
 13 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/service/src/chatgpt/index.ts b/service/src/chatgpt/index.ts
index 6772ca65..4750484e 100644
--- a/service/src/chatgpt/index.ts
+++ b/service/src/chatgpt/index.ts
@@ -15,7 +15,7 @@ import { getCacheApiKeys, getCacheConfig, getOriginConfig } from '../storage/con
 import { sendResponse } from '../utils'
 import { hasAnyRole, isNotEmptyString } from '../utils/is'
 import type { ChatContext, ChatGPTUnofficialProxyAPIOptions, JWT, ModelConfig } from '../types'
-import { getChatByMessageId, updateRoomAccountId, updateRoomChatModel } from '../storage/mongo'
+import { getChatByMessageId, getUserById, updateRoomAccountId, updateRoomChatModel } from '../storage/mongo'
 import type { RequestOptions } from './types'
 
 const { HttpsProxyAgent } = httpsProxyAgent
@@ -109,7 +109,7 @@ async function chatReplyProcess(options: RequestOptions) {
   const key = await getRandomApiKey(options.user, options.user.config.chatModel, options.room.accountId)
   const userId = options.user._id.toString()
   const messageId = options.messageId
-  if (key == null || key === undefined)
+  if (key == null)
     throw new Error('没有可用的配置。请再试一次 | No available configuration. Please try again.')
 
   if (key.keyModel === 'ChatGPTUnofficialProxyAPI') {
@@ -123,18 +123,29 @@ async function chatReplyProcess(options: RequestOptions) {
 
   updateRoomChatModel(userId, options.room.roomId, model)
 
-  const { message, lastContext, process, systemMessage, temperature, top_p } = options
+  const { message, lastContext, process, systemMessage } = options
 
   try {
     const timeoutMs = (await getCacheConfig()).timeoutMs
     let options: SendMessageOptions = { timeoutMs }
 
+    const user = await getUserById(userId)
     if (key.keyModel === 'ChatGPTAPI') {
-      if (isNotEmptyString(systemMessage))
+      if (isNotEmptyString(systemMessage)) {
         options.systemMessage = systemMessage
-      options.completionParams = { model, temperature, top_p }
-    }
+      }
+      else {
+        if (isNotEmptyString(user.systemRole))
+          options.systemMessage = user.systemRole
+        else
+          options.systemMessage = '你是一个大型语言模型。请仔细按照用户的指示进行操作。使用中文并且使用Markdown格式进行回复。'
+      }
 
+      const temperature: number = user.temperature ?? 0.8
+      const top_p: number = user.top_p ?? 0.9
+      const presence_penalty: number = user.presencePenalty ?? 0.6
+      options.completionParams = { model, temperature, top_p, presence_penalty }
+    }
     if (lastContext != null) {
       if (key.keyModel === 'ChatGPTAPI')
         options.parentMessageId = lastContext.parentMessageId
diff --git a/service/src/index.ts b/service/src/index.ts
index 458fe177..e30b8ad5 100644
--- a/service/src/index.ts
+++ b/service/src/index.ts
@@ -645,12 +645,16 @@ router.post('/session', async (req, res) => {
       key: string
       value: string
     }[] = []
-    let userInfo: { name: string; description: string; avatar: string; userId: string; root: boolean; roles: UserRole[]; config: UserConfig }
+    let userInfo: { name: string; description: string; temperature: number; top_p: number; presencePenalty: number; avatar: string; systemRole: string; userId: string; root: boolean; roles: UserRole[]; config: UserConfig }
     if (userId != null) {
       const user = await getUserById(userId)
       userInfo = {
         name: user.name,
         description: user.description,
+        temperature: user.temperature,
+        top_p: user.top_p,
+        presencePenalty: user.presencePenalty,
+        systemRole: user.systemRole,
         avatar: user.avatar,
         userId: user._id.toString(),
         root: user.roles.includes(UserRole.Admin),
@@ -790,13 +794,13 @@ router.post('/user-reset-password', authLimiter, async (req, res) => {
 
 router.post('/user-info', auth, async (req, res) => {
   try {
-    const { name, avatar, description } = req.body as UserInfo
+    const { name, avatar, description, temperature, top_p, presencePenalty, systemRole } = req.body as UserInfo
     const userId = req.headers.userId.toString()
 
     const user = await getUserById(userId)
     if (user == null || user.status !== Status.Normal)
       throw new Error('用户不存在 | User does not exist.')
-    await updateUserInfo(userId, { name, avatar, description } as UserInfo)
+    await updateUserInfo(userId, { name, avatar, description, temperature, top_p, presencePenalty, systemRole } as UserInfo)
     res.send({ status: 'Success', message: '更新成功 | Update successfully' })
   }
   catch (error) {
diff --git a/service/src/storage/model.ts b/service/src/storage/model.ts
index de2ba348..c8a6e603 100644
--- a/service/src/storage/model.ts
+++ b/service/src/storage/model.ts
@@ -26,6 +26,10 @@ export enum UserRole {
 export class UserInfo {
   _id: ObjectId
   name: string
+  temperature: number
+  top_p: number
+  presencePenalty: number
+  systemRole: string
   email: string
   password: string
   status: Status
diff --git a/service/src/storage/mongo.ts b/service/src/storage/mongo.ts
index cc0ce0e0..07106d27 100644
--- a/service/src/storage/mongo.ts
+++ b/service/src/storage/mongo.ts
@@ -308,7 +308,7 @@ export async function createUser(email: string, password: string, roles?: UserRo
 
 export async function updateUserInfo(userId: string, user: UserInfo) {
   return userCol.updateOne({ _id: new ObjectId(userId) }
-    , { $set: { name: user.name, description: user.description, avatar: user.avatar } })
+    , { $set: { name: user.name, description: user.description, avatar: user.avatar, temperature: user.temperature, top_p: user.top_p, presencePenalty: user.presencePenalty, systemRole: user.systemRole } })
 }
 
 export async function updateUserChatModel(userId: string, chatModel: CHATMODEL) {
diff --git a/src/api/index.ts b/src/api/index.ts
index a912eca0..6f7526ac 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -109,10 +109,10 @@ export function fetchRegister<T = any>(username: string, password: string) {
   })
 }
 
-export function fetchUpdateUserInfo<T = any>(name: string, avatar: string, description: string) {
+export function fetchUpdateUserInfo<T = any>(name: string, avatar: string, description: string, temperature: number, top_p: number, presencePenalty: number, systemRole: string) {
   return post<T>({
     url: '/user-info',
-    data: { name, avatar, description },
+    data: { name, avatar, description, temperature, top_p, presencePenalty, systemRole },
   })
 }
 
diff --git a/src/components/common/Setting/General.vue b/src/components/common/Setting/General.vue
index d2abeca5..aa0d823a 100644
--- a/src/components/common/Setting/General.vue
+++ b/src/components/common/Setting/General.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { NButton, NInput, NPopconfirm, NSelect, useMessage } from 'naive-ui'
+import { NButton, NInput, NPopconfirm, NSelect, NSlider, useMessage } from 'naive-ui'
 import type { Language, Theme } from '@/store/modules/app/helper'
 import { SvgIcon } from '@/components/common'
 import { useAppStore, useUserStore } from '@/store'
@@ -23,6 +23,14 @@ const userInfo = computed(() => userStore.userInfo)
 
 const avatar = ref(userInfo.value.avatar ?? '')
 
+const systemRole = ref(userInfo.value.systemRole ?? '')
+
+const temperature = ref(userInfo.value.temperature ?? 0.8)
+
+const top_p = ref(userInfo.value.top_p ?? 0.9)
+
+const presencePenalty = ref(userInfo.value.presencePenalty ?? 0.6)
+
 const name = ref(userInfo.value.name ?? '')
 
 const description = ref(userInfo.value.description ?? '')
@@ -138,6 +146,33 @@ function handleImportButtonClick(): void {
           <NInput v-model:value="avatar" placeholder="" />
         </div>
       </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.systemRole') }}</span>
+        <div class="flex-1">
+          <NInput v-model:value="systemRole" type="textarea" placeholder="你是一个大型语言模型。请仔细按照用户的指示进行操作。使用中文并且使用Markdown格式进行回复。" />
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">temperature</span>
+        <div class="flex-1">
+          <div>{{ temperature }}</div>
+          <NSlider v-model:value="temperature" :step="0.01" :max="1" :min="0.1" style="width: 50%" />
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">top_p</span>
+        <div class="flex-1">
+          <div>{{ top_p }}</div>
+          <NSlider v-model:value="top_p" :step="0.01" :max="1" :min="0.1" style="width: 50%" />
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">presence_penalty</span>
+        <div class="flex-1">
+          <div>{{ presencePenalty }}</div>
+          <NSlider v-model:value="presencePenalty" :step="0.1" :max="2" :min="-2" style="width: 50%" />
+        </div>
+      </div>
       <div
         class="flex items-center space-x-4"
         :class="isMobile && 'items-start'"
@@ -202,7 +237,7 @@ function handleImportButtonClick(): void {
       </div>
       <div class="flex items-center space-x-4">
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.saveUserInfo') }}</span>
-        <NButton type="primary" @click="updateUserInfo({ avatar, name, description })">
+        <NButton type="primary" @click="updateUserInfo({ avatar, systemRole, temperature, top_p, presencePenalty, name, description })">
           {{ $t('common.save') }}
         </NButton>
       </div>
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index 966938b5..b771b6be 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -85,6 +85,7 @@ export default {
     mailConfig: 'Mail Config',
     auditConfig: 'Audit Config',
     avatarLink: 'Avatar Link',
+    systemRole: 'system role',
     name: 'Name',
     description: 'Description',
     temperature: 'Temperature',
diff --git a/src/locales/ko-KR.ts b/src/locales/ko-KR.ts
index 1319f787..99abdc70 100644
--- a/src/locales/ko-KR.ts
+++ b/src/locales/ko-KR.ts
@@ -85,6 +85,7 @@ export default {
     mailConfig: '메일 구성',
     auditConfig: '감사 구성',
     avatarLink: '아바타 링크',
+    systemRole: '시스템 역할',
     name: '이름',
     description: '설명',
     saveUserInfo: '사용자 정보 저장',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index dda3df49..f54ad117 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -85,6 +85,7 @@ export default {
     mailConfig: '邮箱配置',
     auditConfig: '敏感词审核',
     avatarLink: '头像链接',
+    systemRole: '系统角色',
     name: '名称',
     description: '描述',
     role: '角色设定',
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
index 4ee4d4a4..7ceb0ea7 100644
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -85,6 +85,7 @@ export default {
     mailConfig: '邮箱配置',
     auditConfig: '敏感词审核',
     avatarLink: '頭貼連結',
+    systemRole: '系統角色',
     name: '名稱',
     description: '描述',
     role: '角色設定',
diff --git a/src/store/modules/settings/helper.ts b/src/store/modules/settings/helper.ts
index 0533392f..6002d6da 100644
--- a/src/store/modules/settings/helper.ts
+++ b/src/store/modules/settings/helper.ts
@@ -12,7 +12,7 @@ export function defaultSetting(): SettingsState {
   return {
     systemMessage: 'You are ChatGPT, a large language model trained by OpenAI. Follow the user\'s instructions carefully. Respond using markdown.',
     temperature: 0.8,
-    top_p: 1,
+    top_p: 0.9,
   }
 }
 
diff --git a/src/store/modules/user/helper.ts b/src/store/modules/user/helper.ts
index 9bd2dcf1..9d74128b 100644
--- a/src/store/modules/user/helper.ts
+++ b/src/store/modules/user/helper.ts
@@ -7,6 +7,10 @@ const LOCAL_NAME = 'userStorage'
 export interface UserInfo {
   avatar: string
   name: string
+  systemRole: string
+  temperature: number
+  top_p: number
+  presencePenalty: number
   description: string
   root: boolean
   config: UserConfig
@@ -21,6 +25,10 @@ export function defaultSetting(): UserState {
   return {
     userInfo: {
       avatar: '',
+      systemRole: '',
+      temperature: 0.8,
+      top_p: 0.9,
+      presencePenalty: 0.6,
       name: '',
       description: '',
       root: false,
diff --git a/src/store/modules/user/index.ts b/src/store/modules/user/index.ts
index bc45a971..5bd4c5bf 100644
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@@ -10,7 +10,7 @@ export const useUserStore = defineStore('user-store', {
       this.userInfo = { ...this.userInfo, ...userInfo }
       this.recordState()
       if (update)
-        await fetchUpdateUserInfo(userInfo.name ?? '', userInfo.avatar ?? '', userInfo.description ?? '')
+        await fetchUpdateUserInfo(userInfo.name ?? '', userInfo.avatar ?? '', userInfo.description ?? '', userInfo.temperature ?? 0.8, userInfo.top_p ?? 0.9, userInfo.presencePenalty ?? 0.6, userInfo.systemRole ?? '')
     },
 
     resetUserInfo() {

From 3d20329753ec05a7448861fade32fd9fbdb93e13 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 21 Dec 2023 13:53:48 +0800
Subject: [PATCH 20/20] feat: add GeminiPro option

---
 service/src/storage/model.ts           | 6 +++---
 src/components/common/Setting/model.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/service/src/storage/model.ts b/service/src/storage/model.ts
index c8a6e603..e083936f 100644
--- a/service/src/storage/model.ts
+++ b/service/src/storage/model.ts
@@ -61,14 +61,14 @@ export class UserConfig {
 
 // https://platform.openai.com/docs/models/overview
 // 除此之外，gpt-4-0314、gpt-4-32k-0314、gpt-3.5-turbo-0301 模型将在 9 月 13 日被弃用。
-export type CHATMODEL = 'gpt-3.5-turbo' | 'gpt-3.5-turbo-0301' | 'gpt-3.5-turbo-0613' | 'gpt-3.5-turbo-16k' | 'gpt-3.5-turbo-16k-0613' | 'gpt-4' | 'gpt-4-0314' | 'gpt-4-32k' | 'gpt-4-32k-0314' | 'gpt-4-0613' | 'gpt-4-32k-0613' | 'text-davinci-002-render-sha-mobile' | 'text-embedding-ada-002' | 'gpt-4-mobile' | 'gpt-4-browsing' | 'gpt-4-1106-preview' | 'gpt-4-vision-preview'
+export type CHATMODEL = 'gpt-3.5-turbo' | 'gpt-3.5-turbo-0301' | 'gpt-3.5-turbo-0613' | 'gpt-3.5-turbo-16k' | 'gpt-3.5-turbo-16k-0613' | 'gpt-4' | 'gpt-4-0314' | 'gpt-4-32k' | 'gpt-4-32k-0314' | 'gpt-4-0613' | 'gpt-4-32k-0613' | 'text-davinci-002-render-sha-mobile' | 'text-embedding-ada-002' | 'gpt-4-mobile' | 'gpt-4-browsing' | 'gpt-4-1106-preview' | 'gpt-4-vision-preview' | 'GeminiPro'
 
 export const CHATMODELS: CHATMODEL[] = [
-  'gpt-3.5-turbo', 'gpt-3.5-turbo-0301', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613', 'gpt-4', 'gpt-4-0314', 'gpt-4-32k', 'gpt-4-32k-0314', 'gpt-4-0613', 'gpt-4-32k-0613', 'text-davinci-002-render-sha-mobile', 'text-embedding-ada-002', 'gpt-4-mobile', 'gpt-4-browsing', 'gpt-4-1106-preview', 'gpt-4-vision-preview',
+  'gpt-3.5-turbo', 'gpt-3.5-turbo-0301', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613', 'gpt-4', 'gpt-4-0314', 'gpt-4-32k', 'gpt-4-32k-0314', 'gpt-4-0613', 'gpt-4-32k-0613', 'text-davinci-002-render-sha-mobile', 'text-embedding-ada-002', 'gpt-4-mobile', 'gpt-4-browsing', 'gpt-4-1106-preview', 'gpt-4-vision-preview', 'GeminiPro',
 ]
 
 export const chatModelOptions = [
-  'gpt-3.5-turbo', 'gpt-3.5-turbo-0301', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613', 'gpt-4', 'gpt-4-0314', 'gpt-4-32k', 'gpt-4-32k-0314', 'gpt-4-0613', 'gpt-4-32k-0613', 'text-davinci-002-render-sha-mobile', 'text-embedding-ada-002', 'gpt-4-mobile', 'gpt-4-browsing', 'gpt-4-1106-preview', 'gpt-4-vision-preview',
+  'gpt-3.5-turbo', 'gpt-3.5-turbo-0301', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613', 'gpt-4', 'gpt-4-0314', 'gpt-4-32k', 'gpt-4-32k-0314', 'gpt-4-0613', 'gpt-4-32k-0613', 'text-davinci-002-render-sha-mobile', 'text-embedding-ada-002', 'gpt-4-mobile', 'gpt-4-browsing', 'gpt-4-1106-preview', 'gpt-4-vision-preview', 'GeminiPro',
 ].map((model: string) => {
   let label = model
   if (model === 'text-davinci-002-render-sha-mobile')
diff --git a/src/components/common/Setting/model.ts b/src/components/common/Setting/model.ts
index d56dd40c..d4dbf485 100644
--- a/src/components/common/Setting/model.ts
+++ b/src/components/common/Setting/model.ts
@@ -16,7 +16,7 @@ export class ConfigState {
 }
 
 // https://platform.openai.com/docs/models/overview
-export type CHATMODEL = 'gpt-3.5-turbo' | 'gpt-3.5-turbo-0301' | 'gpt-3.5-turbo-0613' | 'gpt-3.5-turbo-16k' | 'gpt-3.5-turbo-16k-0613' | 'gpt-4' | 'gpt-4-0314' | 'gpt-4-32k' | 'gpt-4-32k-0314' | 'gpt-4-0613' | 'gpt-4-32k-0613' | 'text-davinci-002-render-sha-mobile' | 'text-embedding-ada-002' | 'gpt-4-mobile' | 'gpt-4-browsing' | 'gpt-4-1106-preview' | 'gpt-4-vision-preview'
+export type CHATMODEL = 'gpt-3.5-turbo' | 'gpt-3.5-turbo-0301' | 'gpt-3.5-turbo-0613' | 'gpt-3.5-turbo-16k' | 'gpt-3.5-turbo-16k-0613' | 'gpt-4' | 'gpt-4-0314' | 'gpt-4-32k' | 'gpt-4-32k-0314' | 'gpt-4-0613' | 'gpt-4-32k-0613' | 'text-davinci-002-render-sha-mobile' | 'text-embedding-ada-002' | 'gpt-4-mobile' | 'gpt-4-browsing' | 'gpt-4-1106-preview' | 'gpt-4-vision-preview' | 'GeminiPro'
 
 export class UserConfig {
   chatModel?: CHATMODEL