feat(attachment): Support message attachments

feat(editor): Add a file upload component.
feat(editor): Encapsulate the tools in the editor toolbar as independent components.
2023-04-19 23:28:48 +08:00 · 2023-04-19 18:11:07 +08:00 · 2023-04-19 16:52:41 +08:00 · 2023-04-19 08:05:04 +08:00 · 2023-04-19 07:50:36 +08:00 · 2023-04-18 23:10:09 +08:00
68 changed files with 5397 additions and 2030 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,4 +1,6 @@
 node_modules
-database.sqlite
+dist
 .idea
+.output
+.nuxt
 .env
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: https://www.buymeacoffee.com/WongSaang
--- a/.github/workflows/docker-image-static.yml
+++ b/.github/workflows/docker-image-static.yml
@@ -0,0 +1,36 @@
+name: Docker Image CI - static
+
+on:
+  release:
+    types: [published]
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    -
+      name: Checkout
+      uses: actions/checkout@v3
+    - 
+      name: Set up QEMU
+      uses: docker/setup-qemu-action@v2
+    - 
+      name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+    - 
+      name: Login to Docker Hub
+      uses: docker/login-action@v2
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
+    -
+      name: Build and push
+      uses: docker/build-push-action@v4
+      with:
+        context: .
+        file: static.Dockerfile
+        push: true
+        tags: wongsaang/chatgpt-ui-client:latest-static,wongsaang/chatgpt-ui-client:${{ github.ref_name }}-static
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -0,0 +1,38 @@
+name: docs
+
+on:
+  push:
+    branches: [main, docs]
+    paths:
+      - 'docs/**'
+      - '.github/workflows/docs.yml'
+  workflow_dispatch:
+
+jobs:
+  docs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup yarn
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build VuePress site
+        run: yarn docs:build
+
+      - name: Deploy to GitHub Pages
+        uses: crazy-max/ghaction-github-pages@v2
+        with:
+          target_branch: gh-pages
+          build_dir: docs/.vuepress/dist
+        env:
+          GITHUB_TOKEN: ${{ secrets.ACTION_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,5 @@ node_modules
 .env
 .idea
 dist
-database.sqlite
+.temp
+.cache
--- a/16
+++ b/16
@@ -4,19 +4,23 @@ WORKDIR /app

 COPY package.json yarn.lock ./

-RUN yarn install
+RUN yarn install && yarn cache clean

 COPY . .

-RUN yarn generate
+RUN yarn build


-FROM nginx:alpine
+FROM node:18-alpine3.16
+
+ENV NITRO_PORT=80

 WORKDIR /app

-COPY --from=builder /app/.output/public .
+COPY --from=builder /app/.output/ .

-COPY nginx.conf /etc/nginx/templates/default.conf.template
+EXPOSE 80

-EXPOSE 80
+# TODO: You can use NITRO_PRESET=node_cluster in order to leverage multi-process performance using Node.js cluster module. https://nuxt.com/docs/getting-started/deployment
+
+ENTRYPOINT ["node", "server/index.mjs"]
--- a/README.md
+++ b/README.md
@@ -2,197 +2,14 @@
 <h1>ChatGPT UI</h1>
 </div>

-[English](./README.md) | [中文](./docs/zh/README.md)
+A ChatGPT web client that supports multiple users, multiple languages, and multiple database connections for persistent data storage.
+
+The server of this project：[https://github.com/WongSaang/chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server)
+
+## Documentation
+- [English](https://wongsaang.github.io/chatgpt-ui/)
+- [中文](https://wongsaang.github.io/chatgpt-ui/zh/)

-A ChatGPT web client that supports multiple users, multiple database connections for persistent data storage, supports i18n. Provides Docker images and quick deployment scripts.

 https://user-images.githubusercontent.com/46235412/227156264-ca17ab17-999b-414f-ab06-3f75b5235bfe.mp4

-
-## 📢Updates
-
-<details open>
-<summary><strong>2023-03-27</strong></summary>
-🚀 Support gpt-4 model. You can select the model in the "Model Parameters" of the front-end. 
-The GPT-4 model requires whitelist access from OpenAI.
-</details>
-
-<details open>
-<summary><strong>2023-03-23</strong></summary>
-Added web search capability to generate more relevant and up-to-date answers from ChatGPT!
-This feature is off by default, you can turn it on in `Chat->Settings` in the admin panel, there is a record `open_web_search` in Settings, set its value to True.
-
-</details>
-
-<details open>
-<summary><strong>2023-03-15</strong></summary>
-
-Add "open_registration" setting option in the admin panel to control whether user registration is enabled. You can log in to the admin panel and find this setting option under `Chat->Setting`. The default value of this setting is `True` (allow user registration). If you do not need it, please change it to `False`.
-
-
-</details>
-
-<details>
-<summary><strong>2023-03-04</strong></summary>
-
-**Update to the latest official chat model**  `gpt-3.5-turbo`
-
-**🎉🎉🎉Provide a shell script that can be used to quickly deploy the service to server** [Quick start](#one-click-depolyment)
-
-</details>
-
-<details>
-
-<summary><strong>2023-02-24</strong></summary>
-Version 2 is a major update that separates the backend functionality as an independent project, hosted at [chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server). 
-
-If you still wish to use the old version, please visit the [v1 branch](https://github.com/WongSaang/chatgpt-ui/tree/v1).
-
-</details>
-
-## Version 2 introduces the following new features:
-
- 😉 Separation of the frontend and backend, with the backend now using the Python-based Django framework.
- 😘 User authentication, supporting multiple users.
- 😀 Ability to store data in an external database (defaulting to Sqlite).
- 😎 Session persistence, allowing the API to answer questions based on your context.
-
-## 🚀 One-click deployment <a name="one-click-depolyment"></a>
-
-Note: This script has only been tested on Ubuntu Server 22.04 LTS.
-
-```bash
-bash <(curl -Ls https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/deployment.sh)
-```
-
-> If you have a domain name, you can point it to the server's IP address using DNS resolution. Of course, using the server's IP address directly is also possible. 
-> During the script's execution, you will be prompted to enter a domain name. If you do not have a domain name, you can enter the server's IP address directly.
-
-### After the deployment is complete
-
-Access `http(s)://your.domain:9000/admin` / IP `http(s)://123.123.123.123:9000/admin` to log in to the administration panel.
-
-Default superuser: `admin`
-
-Default password: `password`
-
-Before you can start chatting, you need to add an OpenAI API key. In the Settings model, add a record with the name `openai_api_key` and the value as your API key.
-
-Now you can access the web client at `http(s)://your.domain` or `http://123.123.123.123` to start chatting.
-
-🎉🎉🎉 Enjoy it!
-
-## Quick start with Docker Compose
-
-### Run services
-
-Below is a docker-compose.yml template:
-
-```yaml
-version: '3'
-services:
-  client:
-    image: wongsaang/chatgpt-ui-client:latest
-    environment:
-      - SERVER_DOMAIN=http://backend-web-server
-    depends_on:
-      - backend-web-server
-    ports:
-      - '80:80'
-    networks:
-      - chatgpt_ui_network
-  backend-wsgi-server:
-    image: wongsaang/chatgpt-ui-wsgi-server:latest
-    environment:
-      - APP_DOMAIN=${APP_DOMAIN:-localhost:9000} # CSRF whitelist，Add the address of your chatgpt-ui-web-server here, default is localhost:9000
-      - SERVER_WORKERS=3 # Number of gunicorn workers, default is 3
-      #- DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt # If this parameter is not set, the built-in Sqlite will be used by default. It should be noted that if you do not connect to an external database, the data will be lost after the container is destroyed.
-      #- OPENAI_API_PROXY=https://openai.proxy.com/v1 # Proxy for https://api.openai.com/v1
-      - DJANGO_SUPERUSER_USERNAME=admin # default superuser name
-      - DJANGO_SUPERUSER_PASSWORD=password # default superuser password
-      - DJANGO_SUPERUSER_EMAIL=admin@example.com # default superuser email
-      - ACCOUNT_EMAIL_VERIFICATION=none # Determines the e-mail verification method during signup – choose one of "none", "optional", or "mandatory". Default is "optional". If you don't need to verify the email, you can set it to "none".
-      # If you want to use the email verification function, you need to configure the following parameters
-    #      - EMAIL_HOST=SMTP server address
-    #      - EMAIL_PORT=SMTP server port
-    #      - EMAIL_HOST_USER=
-    #      - EMAIL_HOST_PASSWORD=
-    #      - EMAIL_USE_TLS=True
-    #      - EMAIL_FROM=no-reply@example.com  #Default sender email address
-    ports:
-      - '8000:8000'
-    networks:
-      - chatgpt_ui_network
-  backend-web-server:
-    image: wongsaang/chatgpt-ui-web-server:latest
-    environment:
-      - BACKEND_URL=http://backend-wsgi-server:8000
-    ports:
-      - '9000:80'
-    depends_on:
-      - backend-wsgi-server
-    networks:
-      - chatgpt_ui_network
-
-networks:
-  chatgpt_ui_network:
-    driver: bridge
-```
-
-### DB_URL schema
-
-| Engine               | URL                                              |
-|----------------------|--------------------------------------------------|
-| PostgreSQL           | ``postgres://USER:PASSWORD@HOST:PORT/NAME``      |
-| MySQL                | ``mysql://USER:PASSWORD@HOST:PORT/NAME``         |
-| SQLite               | ``sqlite:///PATH``                               |
-
-
-### Set API key
-
-Access `http(s)://your.domain:9000/admin` / IP `http(s)://123.123.123.123:9000/admin` to log in to the administration panel.
-
-Default superuser: `admin`
-
-Default password: `password`
-
-Before you can start chatting, you need to add an OpenAI API key. In the Settings model, add a record with the name `openai_api_key` and the value as your API key.
-
-Now you can access the web client at `http(s)://your.domain` or `http://123.123.123.123` to start chatting.
-
-## Donation
-
-> If it is helpful to you, it is also helping me. 
-
-If you want to support me, Buy me a coffee ❤️ [https://www.buymeacoffee.com/WongSaang](https://www.buymeacoffee.com/WongSaang)
-
-<p align="center">
-  <img height="150" src="https://github.com/WongSaang/chatgpt-ui/blob/main/demos/bmc_qr.png?raw=true"/>
-</p>
-
-## Development
-
-### Setup
-
-Make sure to install the dependencies:
-
-```bash
-# yarn
-yarn install
-```
-
-### Development Server
-
-Start the development server on http://localhost:3000
-
-```bash
-yarn dev
-```
-
-### Production
-
-Build the application for production:
-
-```bash
-yarn build
-```
--- a/app.vue
+++ b/app.vue
@@ -1,8 +1,6 @@
 <template>
-  <div>
+  <NuxtLayout>
    <NuxtLoadingIndicator />
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
--- a/components/Conversation.vue
+++ b/components/Conversation.vue
@@ -1,13 +1,14 @@
 <script setup>
 import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
-import {addConversation} from "../utils/helper";
+import {useEnableWebSearch, useFrugalMode} from "~/composables/states";

-const { $i18n, $auth } = useNuxtApp()
+const { $i18n, $settings } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
 const currentModel = useCurrentModel()
 const openaiApiKey = useApiKey()
 const fetchingResponse = ref(false)
 const messageQueue = []
+const attachment = ref(null)
 let isProcessingQueue = false

 const props = defineProps({
@@ -51,10 +52,16 @@ const abortFetch = () => {
  }
  fetchingResponse.value = false
 }
+
+const enableWebSearch = useEnableWebSearch()
+
+const frugalMode = useFrugalMode()
+
 const fetchReply = async (message) => {
  ctrl = new AbortController()

  let webSearchParams = {}
+
  if (enableWebSearch.value) {
    webSearchParams['web_search'] = {
      ua: navigator.userAgent,
@@ -63,9 +70,10 @@ const fetchReply = async (message) => {
  }

  const data = Object.assign({}, currentModel.value, {
-    openaiApiKey: enableCustomApiKey.value ? openaiApiKey.value : null,
+    openaiApiKey: $settings.open_api_key_setting === 'True' ? openaiApiKey.value : null,
    message: message,
-    conversationId: props.conversation.id
+    conversationId: props.conversation.id,
+    frugalMode: $settings.open_frugal_mode_control === 'True' && frugalMode.value
  }, webSearchParams)

  try {
@@ -77,6 +85,7 @@ const fetchReply = async (message) => {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
+      openWhenHidden: true,
      onopen(response) {
        if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
          return;
@@ -108,12 +117,12 @@ const fetchReply = async (message) => {
        }

        if (event === 'done') {
-          if (props.conversation.id === null) {
+          abortFetch()
+          props.conversation.messages[props.conversation.messages.length - 1].id = data.messageId
+          if (!props.conversation.id) {
            props.conversation.id = data.conversationId
            genTitle(props.conversation.id)
          }
-          props.conversation.messages[props.conversation.messages.length - 1].id = data.messageId
-          abortFetch()
          return;
        }

@@ -138,21 +147,25 @@ const scrollChatWindow = () => {
  grab.value.scrollIntoView({behavior: 'smooth'})
 }

-const checkOrAddConversation = () => {
-  if (props.conversation.messages.length === 0) {
-    props.conversation.messages.push({id: null, is_bot: true, message: ''})
-  }
-}
-
 const send = (message) => {
  fetchingResponse.value = true
  if (props.conversation.messages.length === 0) {
    addConversation(props.conversation)
  }
-  props.conversation.messages.push({message: message})
-  fetchReply(message)
+  let newMessage = {
+    id: null,
+    is_bot: false,
+    message: message
+  }
+  if (attachment.value) {
+    newMessage.attachments = [attachment.value]
+    attachment.value = null
+  }
+  props.conversation.messages.push(newMessage)
+  fetchReply(newMessage)
  scrollChatWindow()
 }
+
 const stop = () => {
  abortFetch()
 }
@@ -173,75 +186,87 @@ const deleteMessage = (index) => {
  props.conversation.messages.splice(index, 1)
 }

-const showWebSearchToggle = ref(false)
-const enableWebSearch = ref(false)
-const enableCustomApiKey = ref(false)
+const updateAttachment = (file) => {
+  attachment.value = file
+}

-const settings = useSettings()
-
-watchEffect(() => {
-  if (settings.value) {
-    const settingsValue = toRaw(settings.value)
-    showWebSearchToggle.value = settingsValue.open_web_search && settingsValue.open_web_search === 'True'
-    enableCustomApiKey.value = settingsValue.open_api_key_setting && settingsValue.open_api_key_setting === 'True'
-  }
+onNuxtReady(() => {
+  currentModel.value = getCurrentModel()
 })

 </script>

 <template>
-  <div
-      v-if="conversation.loadingMessages"
-      class="text-center"
-  >
-    <v-progress-circular
-        indeterminate
-        color="primary"
-    ></v-progress-circular>
-  </div>
-  <div v-else>
+  <div v-if="conversation">
    <div
-        v-if="conversation.messages.length > 0"
-        ref="chatWindow"
+        v-if="conversation.loadingMessages"
+        class="text-center"
    >
-      <v-container>
-        <v-row>
-          <v-col
-              v-for="(message, index) in conversation.messages" :key="index"
-              cols="12"
-          >
-            <div
-                class="d-flex align-center"
-                :class="message.is_bot ? 'justify-start' : 'justify-end'"
-            >
-              <MessageActions
-                  v-if="!message.is_bot"
-                  :message="message"
-                  :message-index="index"
-                  :use-prompt="usePrompt"
-                  :delete-message="deleteMessage"
-              />
-              <MsgContent :message="message" />
-              <MessageActions
-                  v-if="message.is_bot"
-                  :message="message"
-                  :message-index="index"
-                  :use-prompt="usePrompt"
-                  :delete-message="deleteMessage"
-              />
-            </div>
-          </v-col>
-        </v-row>
-      </v-container>
-
-      <div ref="grab" class="w-100" style="height: 200px;"></div>
+      <v-progress-circular
+          indeterminate
+          color="primary"
+      ></v-progress-circular>
+    </div>
+    <div v-else>
+      <div
+          v-if="conversation.messages"
+          ref="chatWindow"
+      >
+        <v-container>
+          <v-row>
+            <v-col
+                v-for="(message, index) in conversation.messages" :key="index"
+                cols="12"
+            >
+              <div
+                  class="d-flex align-center"
+                  :class="message.is_bot ? 'justify-start' : 'justify-end'"
+              >
+                <MessageActions
+                    v-if="!message.is_bot"
+                    :message="message"
+                    :message-index="index"
+                    :use-prompt="usePrompt"
+                    :delete-message="deleteMessage"
+                />
+                <MsgContent :message="message" />
+                <MessageActions
+                    v-if="message.is_bot"
+                    :message="message"
+                    :message-index="index"
+                    :use-prompt="usePrompt"
+                    :delete-message="deleteMessage"
+                />
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+
+        <div ref="grab" class="w-100" style="height: 200px;"></div>
+      </div>
    </div>
-    <Welcome v-if="conversation.id === null && conversation.messages.length === 0" />
  </div>


-  <v-footer app>
+  <v-footer
+      app
+      class="footer"
+  >
    <div class="px-md-16 w-100 d-flex flex-column">
+      <div
+          v-if="attachment"
+          class="mb-2"
+      >
+        <v-chip
+            closable
+            color="teal"
+            label
+            @click:close="attachment = null"
+        >
+          <v-icon start icon="attach_file"></v-icon>
+          {{ attachment.original_name }}
+        </v-chip>
+      </div>
      <div class="d-flex align-center">
        <v-btn
            v-show="fetchingResponse"
@@ -256,15 +281,10 @@ watchEffect(() => {
          density="comfortable"
          color="transparent"
      >
-        <Prompt v-show="!fetchingResponse" :use-prompt="usePrompt" />
-        <v-switch
-            v-if="showWebSearchToggle"
-            v-model="enableWebSearch"
-            hide-details
-            color="primary"
-            :label="$t('webSearch')"
-        ></v-switch>
-        <v-spacer></v-spacer>
+        <Prompt :use-prompt="usePrompt" />
+        <EditorToolsUploadFile :update-attachment="updateAttachment" />
+        <EditorToolsWebSearch v-if="$settings.open_web_search === 'True'" />
+        <EditorToolsFrugalMode v-if="$settings.open_frugal_mode_control === 'True'" />
      </v-toolbar>
    </div>
  </v-footer>
@@ -286,4 +306,10 @@ watchEffect(() => {
    </template>
  </v-snackbar>

-</template>
+</template>
+
+<style scoped>
+  .footer {
+    width: 100%;
+  }
+</style>
--- a/components/ModelParameters.client.vue
+++ b/components/ModelParameters.client.vue
@@ -8,10 +8,13 @@ const availableModels = [
 ]
 const currentModelDefault = ref(MODELS[currentModel.value.name])

-watch(currentModel, (newVal, oldVal) => {
-  currentModelDefault.value = MODELS[newVal.name]
-  saveCurrentModel(newVal)
-}, { deep: true })
+onNuxtReady(() => {
+  currentModel.value = getCurrentModel()
+  watch(currentModel, (newVal, oldVal) => {
+    currentModelDefault.value = MODELS[newVal.name]
+    saveCurrentModel(newVal)
+  }, { deep: true })
+})

 </script>

@@ -53,7 +56,7 @@ watch(currentModel, (newVal, oldVal) => {
            <div class="d-flex justify-space-between align-center">
              <v-list-subheader>{{ $t('temperature') }}</v-list-subheader>
              <v-text-field
-                  v-model="currentModel.temperature"
+                  v-model.number="currentModel.temperature"
                  hide-details
                  single-line
                  density="compact"
@@ -82,7 +85,7 @@ watch(currentModel, (newVal, oldVal) => {
            <div class="d-flex justify-space-between align-center">
              <v-list-subheader>{{ $t('maxTokens') }}</v-list-subheader>
              <v-text-field
-                  v-model="currentModel.max_tokens"
+                  v-model.number="currentModel.max_tokens"
                  hide-details
                  single-line
                  density="compact"
@@ -93,6 +96,9 @@ watch(currentModel, (newVal, oldVal) => {
                  class="flex-grow-0"
              ></v-text-field>
            </div>
+            <div class="text-caption">
+              {{ $t('maxTokenTips1') }} <b>{{ currentModelDefault.total_tokens }}</b> {{ $t('maxTokenTips2') }}
+            </div>
          </v-col>
          <v-col cols="12">
            <v-slider
@@ -111,7 +117,7 @@ watch(currentModel, (newVal, oldVal) => {
            <div class="d-flex justify-space-between align-center">
              <v-list-subheader>{{ $t('topP') }}</v-list-subheader>
              <v-text-field
-                  v-model="currentModel.top_p"
+                  v-model.number="currentModel.top_p"
                  hide-details
                  single-line
                  density="compact"
@@ -138,7 +144,7 @@ watch(currentModel, (newVal, oldVal) => {
            <div class="d-flex justify-space-between align-center">
              <v-list-subheader>{{ $t('frequencyPenalty') }}</v-list-subheader>
              <v-text-field
-                  v-model="currentModel.frequency_penalty"
+                  v-model.number="currentModel.frequency_penalty"
                  hide-details
                  single-line
                  density="compact"
@@ -164,7 +170,7 @@ watch(currentModel, (newVal, oldVal) => {
            <div class="d-flex justify-space-between align-center">
              <v-list-subheader>{{ $t('presencePenalty') }}</v-list-subheader>
              <v-text-field
-                  v-model="currentModel.presence_penalty"
+                  v-model.number="currentModel.presence_penalty"
                  hide-details
                  single-line
                  density="compact"
--- a/components/MsgContent.vue
+++ b/components/MsgContent.vue
@@ -2,6 +2,7 @@
 import hljs from "highlight.js"
 import MarkdownIt from 'markdown-it'
 import copy from 'copy-to-clipboard'
+import mathjax3 from 'markdown-it-mathjax3'


 const md = new MarkdownIt({
@@ -11,6 +12,7 @@ const md = new MarkdownIt({
    return `<pre class="hljs-code-container my-3"><div class="hljs-code-header d-flex align-center justify-space-between bg-grey-darken-3 pa-1"><span class="pl-2 text-caption">${language}</span><button class="hljs-copy-button" data-copied="false">Copy</button></div><code class="hljs language-${language}">${hljs.highlight(code, { language: language, ignoreIllegals: true }).value}</code></pre>`
  },
 })
+md.use(mathjax3)

 const props = defineProps({
  message: {
@@ -23,8 +25,10 @@ const contentHtml = ref('')

 const contentElm = ref(null)

-watchEffect(() => {
+watchEffect(async () => {
  contentHtml.value = props.message.message ? md.render(props.message.message) : ''
+  await nextTick()
+  bindCopyCodeToButtons()
 })

 const bindCopyCodeToButtons = () => {
@@ -52,10 +56,6 @@ onMounted(() => {
  bindCopyCodeToButtons()
 })

-onUpdated(() => {
-  bindCopyCodeToButtons()
-})
-
 </script>

 <template>
@@ -69,10 +69,50 @@ onUpdated(() => {
        v-html="contentHtml"
        class="chat-msg-content pa-3"
    ></div>
+    <template
+        v-if="message.attachments && message.attachments.length > 0"
+    >
+      <v-divider class="mx-4"></v-divider>
+      <v-card-text class="d-flex justify-space-between">
+        <v-chip
+            label
+        >
+          <v-icon start icon="attach_file"></v-icon>
+          {{ message.attachments[0].original_name }}
+        </v-chip>
+      </v-card-text>
+    </template>
  </v-card>
 </template>

 <style>
+.chat-msg-content {
+  font-size: 0.875rem !important;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+.chat-msg-content p,
+.chat-msg-content table,
+.chat-msg-content ul,
+.chat-msg-content ol,
+.chat-msg-content h1,
+.chat-msg-content h2,
+.chat-msg-content h3,
+.chat-msg-content h4,
+.chat-msg-content h5,
+.chat-msg-content h6 {
+  margin-bottom: 1rem;
+}
+.chat-msg-content table {
+  width: 100%;
+  border-collapse: collapse;
+  border-radius: .5rem;
+}
+.chat-msg-content table th,
+.chat-msg-content table td {
+  padding: .5rem 1rem;
+  border: 1px solid gray;
+}
 .chat-msg-content ol, .chat-msg-content ul {
  padding-left: 2em;
 }
@@ -91,4 +131,10 @@ onUpdated(() => {
 .hljs-copy-button:active{border-color:#ffffff66}
 .hljs-copy-button[data-copied="true"]{text-indent:0;width:auto;background-image:none}
@media(prefers-reduced-motion){.hljs-copy-button{transition:none}}
+
+/*MathJax*/
+.MathJax svg {
+  max-width: 100%;
+  overflow: auto;
+}
 </style>
--- a/components/MsgEditor.vue
+++ b/components/MsgEditor.vue
@@ -48,8 +48,11 @@ const send = () => {
  message.value = ""
 }

+const textArea = ref()
+
 const usePrompt = (prompt) => {
  message.value = prompt
+  textArea.value.focus()
 }

 const clickSendBtn = () => {
@@ -73,6 +76,7 @@ defineExpose({
      class="flex-grow-1 d-flex align-center justify-space-between"
  >
    <v-textarea
+        ref="textArea"
        v-model="message"
        :label="$t('writeAMessage')"
        :placeholder="hint"
--- a/components/NavigationDrawer.vue
+++ b/components/NavigationDrawer.vue
@@ -0,0 +1,341 @@
+<script setup>
+import { useDisplay } from 'vuetify'
+import {useDrawer} from "../composables/states";
+
+const route = useRoute()
+const { $i18n, $settings } = useNuxtApp()
+const colorMode = useColorMode()
+const {mdAndUp} = useDisplay()
+const drawerPermanent = computed(() => {
+  return mdAndUp.value
+})
+const user = useUser()
+
+const themes = ref([
+  { title: $i18n.t('lightMode'), value: 'light' },
+  { title: $i18n.t('darkMode'), value: 'dark' },
+  { title: $i18n.t('followSystem'), value: 'system'}
+])
+const setTheme = (theme) => {
+  colorMode.preference = theme
+}
+const feedback = () => {
+  window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
+}
+
+const { locale, locales, setLocale } = useI18n()
+const setLang = (lang) => {
+  setLocale(lang)
+}
+
+const conversations = useConversations()
+
+const editingConversation = ref(null)
+const deletingConversationIndex = ref(null)
+
+const editConversation = (index) => {
+  editingConversation.value = conversations.value[index]
+}
+
+const updateConversation = async (index) => {
+  editingConversation.value.updating = true
+  const { data, error } = await useAuthFetch(`/api/chat/conversations/${editingConversation.value.id}/`, {
+    method: 'PUT',
+    body: JSON.stringify({
+      topic: editingConversation.value.topic
+    })
+  })
+  if (!error.value) {
+    conversations.value[index] = editingConversation.value
+  }
+  editingConversation.value = null
+}
+
+const deleteConversation = async (index) => {
+  deletingConversationIndex.value = index
+  const { data, error } = await useAuthFetch(`/api/chat/conversations/${conversations.value[index].id}/`, {
+    method: 'DELETE'
+  })
+  deletingConversationIndex.value = null
+  if (!error.value) {
+    const deletingConversation = conversations.value[index]
+    conversations.value.splice(index, 1)
+    if (route.params.id && parseInt(route.params.id) === deletingConversation.id) {
+      await navigateTo('/')
+    }
+  }
+}
+
+const clearConversations = async () => {
+  deletingConversations.value = true
+  const { data, error } = await useAuthFetch(`/api/chat/conversations/delete_all`, {
+    method: 'DELETE'
+  })
+  if (!error.value) {
+    loadConversations()
+    clearConfirmDialog.value = false
+  }
+  deletingConversations.value = false
+}
+
+const clearConfirmDialog = ref(false)
+const deletingConversations = ref(false)
+const loadingConversations = ref(false)
+
+const loadConversations = async () => {
+  loadingConversations.value = true
+  conversations.value = await getConversations()
+  loadingConversations.value = false
+}
+
+const signOut = async () => {
+  const { data, error } = await useFetch('/api/account/logout/', {
+    method: 'POST'
+  })
+  if (!error.value) {
+    await logout()
+  }
+}
+
+onNuxtReady(async () => {
+  loadConversations()
+})
+
+const drawer = useDrawer()
+
+</script>
+
+<template>
+  <v-navigation-drawer
+      v-model="drawer"
+      :permanent="drawerPermanent"
+      width="300"
+  >
+    <template
+        v-slot:prepend
+        v-if="user"
+    >
+      <v-list>
+        <v-list-item
+            :title="user.username"
+            :subtitle="user.email"
+        >
+          <template v-slot:prepend>
+            <v-icon
+                icon="face"
+                size="x-large"
+            ></v-icon>
+          </template>
+          <template v-slot:append>
+            <v-menu>
+              <template v-slot:activator="{ props }">
+                <v-btn
+                    v-bind="props"
+                    size="small"
+                    variant="text"
+                    icon="expand_more"
+                ></v-btn>
+              </template>
+              <v-list>
+                <v-list-item
+                    :title="$t('resetPassword')"
+                    to="/account/resetPassword"
+                >
+                </v-list-item>
+                <v-list-item
+                    :title="$t('signOut')"
+                    @click="signOut"
+                >
+                </v-list-item>
+              </v-list>
+            </v-menu>
+
+          </template>
+        </v-list-item>
+      </v-list>
+
+      <v-divider></v-divider>
+    </template>
+
+    <div class="px-2">
+      <v-list>
+        <v-list-item v-show="loadingConversations">
+          <v-list-item-title class="d-flex justify-center">
+            <v-progress-circular indeterminate></v-progress-circular>
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+
+      <v-list>
+        <template
+            v-for="(conversation, cIdx) in conversations"
+            :key="conversation.id"
+        >
+          <v-list-item
+              active-color="primary"
+              rounded="xl"
+              v-if="editingConversation && editingConversation.id === conversation.id"
+          >
+            <v-text-field
+                v-model="editingConversation.topic"
+                :loading="editingConversation.updating"
+                variant="underlined"
+                append-icon="done"
+                hide-details
+                density="compact"
+                autofocus
+                @keyup.enter="updateConversation(cIdx)"
+                @click:append="updateConversation(cIdx)"
+            ></v-text-field>
+          </v-list-item>
+          <v-hover
+              v-if="!editingConversation || editingConversation.id !== conversation.id"
+              v-slot="{ isHovering, props }"
+          >
+            <v-list-item
+                rounded="xl"
+                active-color="primary"
+                :to="conversation.id ? `/${conversation.id}` : '/'"
+                v-bind="props"
+            >
+              <v-list-item-title>{{ (conversation.topic && conversation.topic !== '') ? conversation.topic : $t('defaultConversationTitle') }}</v-list-item-title>
+              <template v-slot:append>
+                <div
+                    v-show="isHovering && conversation.id"
+                >
+                  <v-btn
+                      icon="edit"
+                      size="small"
+                      variant="text"
+                      @click.prevent="editConversation(cIdx)"
+                  >
+                  </v-btn>
+                  <v-btn
+                      icon="delete"
+                      size="small"
+                      variant="text"
+                      :loading="deletingConversationIndex === cIdx"
+                      @click.prevent="deleteConversation(cIdx)"
+                  >
+                  </v-btn>
+                </div>
+              </template>
+            </v-list-item>
+          </v-hover>
+        </template>
+      </v-list>
+    </div>
+
+    <template v-slot:append>
+      <div class="px-1">
+        <v-divider></v-divider>
+        <v-list>
+
+          <v-dialog
+              v-model="clearConfirmDialog"
+              persistent
+          >
+            <template v-slot:activator="{ props }">
+              <v-list-item
+                  v-bind="props"
+                  rounded="xl"
+                  prepend-icon="delete_forever"
+                  :title="$t('clearConversations')"
+              ></v-list-item>
+            </template>
+            <v-card>
+              <v-card-title class="text-h5">
+                Are you sure you want to delete all conversations?
+              </v-card-title>
+              <v-card-text>This will be a permanent deletion and cannot be retrieved once deleted. Please proceed with caution.</v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    color="green-darken-1"
+                    variant="text"
+                    @click="clearConfirmDialog = false"
+                    class="text-none"
+                >
+                  Cancel deletion
+                </v-btn>
+                <v-btn
+                    color="green-darken-1"
+                    variant="text"
+                    @click="clearConversations"
+                    class="text-none"
+                    :loading="deletingConversations"
+                >
+                  Confirm deletion
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+
+          <ApiKeyDialog
+              v-if="$settings.open_api_key_setting === 'True'"
+          />
+
+          <ModelParameters/>
+
+          <v-menu
+          >
+            <template v-slot:activator="{ props }">
+              <v-list-item
+                  v-bind="props"
+                  rounded="xl"
+                  :title="$t('themeMode')"
+              >
+                <template
+                    v-slot:prepend
+                >
+                  <v-icon
+                      v-show="$colorMode.value === 'light'"
+                      icon="light_mode"
+                  ></v-icon>
+                  <v-icon
+                      v-show="$colorMode.value !== 'light'"
+                      icon="dark_mode"
+                  ></v-icon>
+                </template>
+              </v-list-item>
+            </template>
+            <v-list
+                bg-color="white"
+            >
+              <v-list-item
+                  v-for="(theme, idx) in themes"
+                  :key="idx"
+                  @click="setTheme(theme.value)"
+              >
+                <v-list-item-title>{{ theme.title }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+
+          <SettingsLanguages/>
+
+          <v-list-item
+              rounded="xl"
+              prepend-icon="help_outline"
+              :title="$t('feedback')"
+              @click="feedback"
+          ></v-list-item>
+
+        </v-list>
+      </div>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<style>
+.v-navigation-drawer__content::-webkit-scrollbar {
+  width: 0;
+}
+.v-navigation-drawer__content:hover::-webkit-scrollbar {
+  width: 6px;
+}
+.v-navigation-drawer__content:hover::-webkit-scrollbar-thumb {
+  background-color: #999;
+  border-radius: 3px;
+}
+</style>
--- a/components/Prompt.vue
+++ b/components/Prompt.vue
@@ -86,7 +86,7 @@ const selectPrompt = (prompt) => {
  menu.value = false
 }

-onMounted( () => {
+onNuxtReady( () => {
  loadPrompts()
 })
 </script>
--- a/components/Welcome.vue
+++ b/components/Welcome.vue
@@ -4,10 +4,9 @@
      <v-col cols="12">
        <div class="text-center">
          <h2 class="text-h2">{{ $t('welcomeTo') }} <span class="text-primary">{{ runtimeConfig.public.appName }}</span></h2>
-          <p class="text-caption mt-5">
+          <p class="text-caption my-5">
            {{ runtimeConfig.public.appName }} {{ $t('welcomeScreen.introduction1') }}
            <br>
-            {{ $t('welcomeScreen.introduction2') }}
          </p>
        </div>
      </v-col>
--- a/components/editorTools/FrugalMode.vue
+++ b/components/editorTools/FrugalMode.vue
@@ -0,0 +1,53 @@
+<script setup>
+import {useFrugalMode} from "~/composables/states";
+
+const menu = ref(false)
+const frugalMode = useFrugalMode()
+</script>
+
+<template>
+  <v-menu
+      v-model="menu"
+      :close-on-content-click="false"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          v-bind="props"
+          icon
+      >
+        <v-icon
+            icon="network_wifi_2_bar"
+            :color="frugalMode ? '' : 'grey'"
+        ></v-icon>
+      </v-btn>
+    </template>
+
+    <v-container>
+      <v-card
+          min-width="300"
+          max-width="500"
+      >
+        <v-card-title>
+          <span class="headline">{{ $t('frugalMode') }}</span>
+        </v-card-title>
+
+        <v-divider></v-divider>
+
+        <v-card-text>
+          <p>{{ $t('frugalModeTip') }}</p>
+          <v-switch
+              v-model="frugalMode"
+              inline
+              hide-details
+              color="primary"
+              :label="$t('frugalMode')"
+          ></v-switch>
+        </v-card-text>
+      </v-card>
+    </v-container>
+  </v-menu>
+</template>
+
+<style scoped>
+
+</style>
--- a/components/editorTools/UploadFile.vue
+++ b/components/editorTools/UploadFile.vue
@@ -0,0 +1,99 @@
+<script setup>
+const { $i18n } = useNuxtApp()
+const dialog = ref(false)
+const uploading = ref(false)
+const file = ref(null)
+const errorMsg = ref('')
+
+const props = defineProps({
+  updateAttachment: {
+    type: Function,
+    required: true
+  }
+})
+
+const fileChanged = () => {
+  errorMsg.value = ''
+}
+
+const upload = async () => {
+  if (file.value.files.length < 1){
+    return;
+  }
+  const fileObj = file.value.files[0]
+  uploading.value = true
+  const formData = new FormData()
+  formData.append('file', fileObj)
+  const { data, error } = await useAuthFetch('/api/chat/upload/', {
+    method: 'POST',
+    body: formData,
+  })
+  if (error.value) {
+    errorMsg.value = $i18n.t('Failed to upload file')
+  } else {
+    dialog.value = false
+    props.updateAttachment(data.value.attachment)
+  }
+  uploading.value = false
+}
+
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialog"
+      width="auto"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          v-bind="props"
+          icon
+      >
+        <v-icon
+            icon="description"
+        ></v-icon>
+      </v-btn>
+    </template>
+
+    <v-card
+    >
+      <v-card-title>
+        <span class="headline">{{ $t('Insert file') }}</span>
+      </v-card-title>
+
+      <v-divider></v-divider>
+
+      <v-card-text>
+        {{ $t('Currently, only PDF files are supported.') }}
+      </v-card-text>
+
+      <v-card-text>
+        <v-file-input
+            ref="file"
+            show-size
+            accept=".pdf"
+            clearable
+            :loading="uploading"
+            :disabled="uploading"
+            :label="$t('Please select a PDF file')"
+            :error-messages="errorMsg"
+            @change="fileChanged"
+        ></v-file-input>
+        <div
+            class="d-flex justify-center"
+        >
+          <v-btn
+              color="primary"
+              :loading="uploading"
+              @click="upload"
+          >{{ $t('Insert') }}</v-btn>
+        </div>
+
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>
--- a/components/editorTools/WebSearch.vue
+++ b/components/editorTools/WebSearch.vue
@@ -0,0 +1,53 @@
+<script setup>
+import {useEnableWebSearch} from "~/composables/states";
+
+const menu = ref(false)
+const enableWebSearch = useEnableWebSearch()
+
+</script>
+
+<template>
+  <v-menu
+      v-model="menu"
+      :close-on-content-click="false"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          v-bind="props"
+          icon
+      >
+        <v-icon
+            icon="travel_explore"
+            :color="enableWebSearch ? '' : 'grey'"
+        ></v-icon>
+      </v-btn>
+    </template>
+
+    <v-container>
+      <v-card
+          min-width="300"
+          max-width="500"
+      >
+        <v-card-title>
+          <span class="headline">{{ $t('webSearch') }}</span>
+        </v-card-title>
+
+        <v-divider></v-divider>
+
+        <v-card-text>
+          <v-switch
+              v-model="enableWebSearch"
+              inline
+              hide-details
+              color="primary"
+              :label="$t('webSearch')"
+          ></v-switch>
+        </v-card-text>
+      </v-card>
+    </v-container>
+  </v-menu>
+</template>
+
+<style scoped>
+
+</style>
--- a/composables/fetch.js
+++ b/composables/fetch.js
@@ -0,0 +1,18 @@
+export const useMyFetch = (url, options = {}) => {
+    let defaultOptions = {
+        headers: {
+            Accept: 'application/json'
+        }
+    }
+    if (process.server) {
+        defaultOptions.baseURL = process.env.SERVER_DOMAIN
+    }
+    return useFetch(url, Object.assign(defaultOptions, options))
+}
+export const useAuthFetch = async (url, options = {}) => {
+    const res = await useMyFetch(url, options)
+    if (res.error.value && res.error.value.status === 401) {
+        await logout()
+    }
+    return res
+}
--- a/composables/states.js
+++ b/composables/states.js
@@ -5,8 +5,12 @@ export const useCurrentModel = () => useState('currentModel', () => getCurrentMo

 export const useApiKey = () => useState('apiKey', () => getStoredApiKey())

-export const useConversation = () => useState('conversation', () => getDefaultConversationData())
-
 export const useConversations = () => useState('conversations', () => [])

-export const useSettings = () => useState('settings', () => {})
+export const useUser = () => useState('user', () => null)
+
+export const useDrawer = () => useState('drawer', () => false)
+
+export const useEnableWebSearch = () => useState('enableWebSearch', () => false)
+
+export const useFrugalMode = () => useState('frugalMode', () => true)
--- a/composables/useAuthFetch.js
+++ b/composables/useAuthFetch.js
@@ -1,9 +0,0 @@
-export const useAuthFetch = async (url, options = {}) => {
-    const { $auth } = useNuxtApp()
-
-    const res = await useFetch(url, options)
-    if (res.error.value && res.error.value.status === 401) {
-        await $auth.logout()
-    }
-    return res
-}
--- a/deployment.sh
+++ b/deployment.sh
@@ -24,6 +24,13 @@ if [ -z "$WSGI_PORT" ]; then
  WSGI_PORT="8000"
 fi

+read -p "If you want to connect to a database, please enter the database URL [default: none]: " DATABASE_URL
+
+if [ -z "$DATABASE_URL" ]; then
+  DATABASE_URL="sqlite:///db.sqlite3"
+fi
+
+
 if [[ $(which docker) ]]; then
    echo "Docker is already installed"
 else
@@ -63,8 +70,12 @@ echo "Downloading configuration files..."

 sudo curl -L "https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/docker-compose.yml" -o docker-compose.yml

+echo "Pulling images..."
+
+sudo docker-compose pull
+
 echo "Starting services..."

-sudo APP_DOMAIN="${APP_DOMAIN}:${SERVER_PORT}" CLIENT_PORT=${CLIENT_PORT} SERVER_PORT=${SERVER_PORT} WSGI_PORT=${WSGI_PORT}  docker-compose up --pull always -d
+sudo APP_DOMAIN="${APP_DOMAIN}:${SERVER_PORT}" CLIENT_PORT=${CLIENT_PORT} SERVER_PORT=${SERVER_PORT} WSGI_PORT=${WSGI_PORT} DB_URL=${DATABASE_URL}  docker-compose up -d

 echo "Done"
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -4,13 +4,14 @@ services:
    platform: linux/x86_64
    build: .
    environment:
-      SERVER_DOMAIN: http://web-server
+      SERVER_DOMAIN: ${SERVER_DOMAIN:-http://web-server}
+      NUXT_PUBLIC_TYPEWRITER: false
    ports:
-      - '${CLIENT_PORT:-8080}:80'
+      - '${CLIENT_PORT:-80}:80'
    networks:
      - chatgpt_network
    restart: always

 networks:
  chatgpt_network:
-    external: True
+    driver: bridge
--- a/docker-compose.test.yml
+++ b/docker-compose.test.yml
@@ -0,0 +1,16 @@
+version: '3'
+services:
+  client:
+    platform: linux/x86_64
+    build: .
+    environment:
+      SERVER_DOMAIN: ${SERVER_DOMAIN:-http://web-server}
+    ports:
+      - '${CLIENT_PORT:-80}:80'
+    networks:
+      - chatgpt_network
+    restart: always
+
+networks:
+  chatgpt_network:
+    driver: bridge
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,6 +5,10 @@ services:
    image: wongsaang/chatgpt-ui-client:latest
    environment:
      - SERVER_DOMAIN=http://backend-web-server
+      - DEFAULT_LOCALE=en
+#      - NUXT_PUBLIC_APP_NAME='ChatGPT UI' # The name of the application
+#      - NUXT_PUBLIC_TYPEWRITER=true # Whether to enable the typewriter effect, default false
+#      - NUXT_PUBLIC_TYPEWRITER_DELAY=50 # The delay time of the typewriter effect, default 50ms
    depends_on:
      - backend-web-server
    ports:
@@ -16,9 +20,11 @@ services:
    platform: linux/x86_64
    image: wongsaang/chatgpt-ui-wsgi-server:latest
    environment:
+      - DEBUG=${DEBUG:-False} # Whether to enable debug mode, default False
      - APP_DOMAIN=${APP_DOMAIN:-localhost:9000}
      - SERVER_WORKERS=3 # The number of worker processes for handling requests.
-      #      - DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt # If this parameter is not set, the built-in Sqlite will be used by default. It should be noted that if you do not connect to an external database, the data will be lost after the container is destroyed.
+      - WORKER_TIMEOUT=180 # Workers silent for more than this many seconds are killed and restarted. default 180s
+      - DB_URL=${DB_URL:-sqlite:///db.sqlite3} # If this parameter is not set, the built-in Sqlite will be used by default. It should be noted that if you do not connect to an external database, the data will be lost after the container is destroyed.
      - DJANGO_SUPERUSER_USERNAME=admin # default superuser name
      - DJANGO_SUPERUSER_PASSWORD=password # default superuser password
      - DJANGO_SUPERUSER_EMAIL=admin@example.com # default superuser email
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -0,0 +1,56 @@
+import { defineUserConfig, defaultTheme } from 'vuepress'
+import {
+    navbarEn,
+    navbarZh,
+    sidebarEn,
+    sidebarZh,
+  } from './configs/index.js'
+
+export default defineUserConfig({
+  title: 'ChatGPT UI',
+  description: 'A ChatGPT web client',
+  base: '/chatgpt-ui/',
+  locales: {
+    // 键名是该语言所属的子路径
+    // 作为特例，默认语言可以使用 '/' 作为其路径。
+    '/': {
+      lang: 'en-US',
+      description: 'A ChatGPT web client',
+    },
+    '/zh/': {
+      lang: 'zh-CN',
+      description: '一个 ChatGPT 的 Web 客户端',
+    },
+  },
+  theme: defaultTheme({
+    locales: {
+      '/': {
+        // navbar
+        navbar: navbarEn,
+        // sidebar
+        sidebar: sidebarEn,
+      },
+      '/zh/': {
+        // navbar
+        navbar: navbarZh,
+        selectLanguageName: '简体中文',
+        selectLanguageText: '选择语言',
+        selectLanguageAriaLabel: '选择语言',
+        // sidebar
+        sidebar: sidebarZh,
+        // 404 page
+        notFound: [
+            '这里什么都没有',
+            '我们怎么到这来了？',
+            '这是一个 404 页面',
+            '看起来我们进入了错误的链接',
+        ],
+        backToHome: '返回首页',
+        // a11y
+        openInNewWindow: '在新窗口打开',
+        toggleColorMode: '切换颜色模式',
+        toggleSidebar: '切换侧边栏',
+      },
+    },
+  }),
+})
--- a/docs/.vuepress/configs/index.ts
+++ b/docs/.vuepress/configs/index.ts
@@ -0,0 +1,2 @@
+export * from './navbar/index.js'
+export * from './sidebar/index.js'
--- a/docs/.vuepress/configs/navbar/en.ts
+++ b/docs/.vuepress/configs/navbar/en.ts
@@ -0,0 +1,12 @@
+import type { NavbarConfig } from '@vuepress/theme-default'
+
+export const navbarEn: NavbarConfig = [
+  {
+    text: 'Guide',
+    link: '/',
+  },
+  {
+    text: 'Changelog',
+    link: 'https://github.com/WongSaang/chatgpt-ui/releases'
+  }
+]
--- a/docs/.vuepress/configs/navbar/index.ts
+++ b/docs/.vuepress/configs/navbar/index.ts
@@ -0,0 +1,2 @@
+export * from './en.js'
+export * from './zh.js'
--- a/docs/.vuepress/configs/navbar/zh.ts
+++ b/docs/.vuepress/configs/navbar/zh.ts
@@ -0,0 +1,12 @@
+import type { NavbarConfig } from '@vuepress/theme-default'
+
+export const navbarZh: NavbarConfig = [
+  {
+    text: '指南',
+    link: '/zh/',
+  },
+  {
+    text: '更新日志',
+    link: 'https://github.com/WongSaang/chatgpt-ui/releases',
+  }
+]
--- a/docs/.vuepress/configs/sidebar/en.ts
+++ b/docs/.vuepress/configs/sidebar/en.ts
@@ -0,0 +1,17 @@
+import type { SidebarConfig } from '@vuepress/theme-default'
+
+export const sidebarEn: SidebarConfig = {
+  '/': [
+    {
+      text: 'Guide',
+      children: [
+        '/README.md',
+        '/guide/quick-start.md',
+        '/guide/configuration.md',
+        '/guide/problems.md',
+        '/guide/development.md',
+        '/guide/buymeacoffee.md',
+      ],
+    },
+  ]
+}
--- a/docs/.vuepress/configs/sidebar/index.ts
+++ b/docs/.vuepress/configs/sidebar/index.ts
@@ -0,0 +1,2 @@
+export * from './en.js'
+export * from './zh.js'
--- a/docs/.vuepress/configs/sidebar/zh.ts
+++ b/docs/.vuepress/configs/sidebar/zh.ts
@@ -0,0 +1,17 @@
+import type { SidebarConfig } from '@vuepress/theme-default'
+
+export const sidebarZh: SidebarConfig = {
+  '/zh/': [
+    {
+      text: '指南',
+      children: [
+        '/zh/README.md',
+        '/zh/guide/quick-start.md',
+        '/zh/guide/configuration.md',
+        '/zh/guide/problems.md',
+        '/zh/guide/development.md',
+        '/zh/guide/buymeacoffee.md',
+      ],
+    },
+  ]
+}
--- a/docs/.vuepress/public/images/bmc_qr.png
+++ b/docs/.vuepress/public/images/bmc_qr.png
--- a/docs/README.md
+++ b/docs/README.md
@@ -0,0 +1,43 @@
+
+# Introduction
+
+ChatGPT UI is an unofficial ChatGPT web client. It supports multiple users, multiple languages, and multiple database connections for persistent data storage, such as Mysql, PostgreSQL, and Sqlite.
+
+This project consists of two parts, the client-side and the server-side:
+
+- Client-side, based on [Nuxt](https://nuxt.com/), project address: [https://github.com/WongSaang/chatgpt-ui](https://github.com/WongSaang/chatgpt-ui)
+- Server-side, based on [Django](https://djangoproject.com/), project address: [https://github.com/WongSaang/chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server)
+
+
+## Features
+
+### Client-side
+- User system, supporting user registration, login, password modification, and more.
+- Multi-language user interface, supporting multiple languages.
+- Persistent data storage, supporting Mysql, PostgreSQL, and Sqlite databases.
+- Asynchronous conversation, supporting multiple conversations simultaneously.
+- Management of historical conversations.
+- Continuous chat, allowing ChatGPT clients to answer questions based on their historical chat records, resulting in better answers.
+- Web search capability, allowing ChatGPT to retrieve the latest information.
+- Convenient tools, supporting one-click message and code block copying, as well as message editing.
+- Common command management, allowing users to store and edit their own common commands.
+- PWA, supporting installation to the desktop.
+- User Token Usage Statistics.
+- Supports configuring multiple API Keys.
+
+### Server-side
+- The server-side has an administrative panel.
+- User management.
+- Conversation and message management.
+- Common configurations.
+
+
+## Original Intention
+
+Since using ChatGPT, it has become a good helper in work. Unfortunately, as we all know, it cannot be accessed in some places. But fortunately, OpenAI has opened up its API, so I started to write a user interface for myself.
+
+> Nothing is difficult if you put your heart into it.
+
+Later, several friends asked me how to use ChatGPT because they didn't have the technical skills. So I started to develop a multi-user system, which can not only be used by myself but also help my family and friends around me.
+
+After the project was open-sourced, many people raised issues and some even submitted PRs, and the project has developed to its current state. I also learned a lot during this process, as I have always believed that helping others is also helping oneself.
--- a/docs/guide/buymeacoffee.md
+++ b/docs/guide/buymeacoffee.md
@@ -0,0 +1,7 @@
+# Donation
+
+> If this project is helpful to you, it is also helping me.
+
+If you want to support me, Buy me a coffee ❤️ [https://www.buymeacoffee.com/WongSaang](https://www.buymeacoffee.com/WongSaang)
+
+![Buy Me A Coffee](/images/bmc_qr.png)
--- a/docs/guide/configuration.md
+++ b/docs/guide/configuration.md
@@ -0,0 +1,84 @@
+# Configuration Reference
+
+## Database
+
+By default, the backend uses the built-in Sqlite to store data. If an external database is not connected, the data will be lost after the container is destroyed.
+
+The `chatgpt-ui-wsgi-server` image provides the environment variable `DB_URL` to configure the connection to an external database. The following table shows the link format of the `DB_URL`.
+
+| DB                | LINK                                             |
+|----------------------|--------------------------------------------------|
+| PostgreSQL           | postgres://USER:PASSWORD@HOST:PORT/DATABASE_NAME |
+| MySQL                | mysql://USER:PASSWORD@HOST:PORT/DATABASE_NAME    |
+| SQLite               | sqlite:///PATH                                   |
+
+For example, if I am using PostgreSQL, the configuration is as follows:
+
+```
+backend-wsgi-server:
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
+    environment:
+      - DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt
+```
+
+## Email verification
+
+If you open the user registration feature and need to send email activation links to users, you need to configure the following environment variables in the `wsgi-server` service:
+
+| Parameters                  | Description                                             | Default |
+|----------------------|--------------------------------------------------|-----|
+| ACCOUNT_EMAIL_VERIFICATION | E-mail authentication method, optional value: none, optional, mandatory | optional |
+| EMAIL_HOST                 | SMTP server address    |  smtp.mailgun.org    |
+| EMAIL_PORT                 | SMTP server port  |   587       |
+| EMAIL_HOST_USER            | User name             |    -         |
+| EMAIL_HOST_PASSWORD        | Password              |     -     |
+| EMAIL_USE_TLS              | Whether to encrypt    |   True       |
+| EMAIL_FROM                 | From email            |     webmaster@localhost  |
+
+## API Proxy
+
+If you are unable to request the OpenAI API address due to network restrictions, you can configure a proxy in the `wsgi-server` service. You will need to search for how to set up a proxy server on your own.
+
+For example:
+
+```
+backend-wsgi-server:
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
+    environment:
+      - OPENAI_API_PROXY=https://openai.proxy.com/v1
+```
+
+## Backend CSRF whitelist
+
+If you encounter `CSRF verification failed` while accessing the management background, your `APP_DOMAIN` may not be configured correctly. Under the `wsgi-server` service, there is an environment variable `wsgi-server`. Its value should be the address and port of `backend-web-server`, default: `localhost:9000`.
+
+Suppose I have resolved the domain name `chagpt.com` to the server, and my `backend-web-server` service is bound to port 9000. The correct configuration is as follows:
+
+```
+backend-wsgi-server:
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
+    environment:
+      - APP_DOMAIN=chagpt.com:9000
+```
+
+## Client Configuration
+
+| Parameter             | Description                                 | Default Value              |
+|-----------------------|---------------------------------------------|----------------------------|
+| SERVER_DOMAIN         | Server Address                              | http://backend-web-server |
+| DEFAULT_LOCALE         | Default Language                           | en                        |
+| NUXT_PUBLIC_APP_NAME  | Application Name                            | ChatGPT UI                 |
+| NUXT_PUBLIC_TYPEWRITER| Enable Typewriter Effect [true/false]       | true                       |
+| NUXT_PUBLIC_TYPEWRITER_DELAY | Typewriter Effect Delay in milliseconds | 50                         |
+
+## User Registration Control
+
+After deployment, there is an `open_registration` setting under `Chat->Settings` in the admin panel to control whether user registration is allowed. The default value is `True` (allowing user registration). If not needed, please change it to `False`.
+
+## Web Search Function Control
+
+This feature is disabled by default. You can enable it in the admin panel under `Chat->Settings`. There is a setting called `open_web_search`, set its value to `True`.
+
+## Frugal Mode Control
+
+This feature is enabled by default. You can disable it in the `Chat->Settings` section of the management backend. There is a setting called `open_frugal_mode_control` in Settings. Set its value to `False`.
--- a/docs/guide/development.md
+++ b/docs/guide/development.md
@@ -0,0 +1,62 @@
+# Development Guide
+
+## Front-end
+
+Required skills: [Vue](https://vuejs.org/), [Nuxt](https://nuxt.com/)
+
+Project address: [https://github.com/WongSaang/chatgpt-ui](https://github.com/WongSaang/chatgpt-ui)
+
+### Environment Setup
+Install the latest stable version of node.js. If you need to package it as a docker image, you also need to install docker.
+
+### Install dependencies
+
+```
+yarn install
+```
+
+### Start development server
+
+```
+yarn dev
+```
+
+### Build
+
+```
+yarn build
+```
+
+### Package as a docker image
+
+```
+docker build -t image-name:latest .
+```
+
+
+## Back-end
+
+Required skills: [Python](https://www.python.org/), [Django](https://djangoproject.com/)
+
+Project address: [https://github.com/WongSaang/chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server)
+
+### Environment Setup
+Install Python, pip/pipenv. If you need to package it as a docker image, you also need to install docker.
+
+### Install dependencies
+
+```
+pip install -r requirements.txt
+```
+
+### Start development server
+
+```
+python manage.py runserver
+```
+
+### Package as a docker image
+
+```
+docker build -t image-name:latest .
+```
--- a/docs/guide/problems.md
+++ b/docs/guide/problems.md
@@ -0,0 +1,13 @@
+# Encountering Issues
+
+## Searching for Issues
+
+If you encounter any issues while using the project, you can search for related keywords on the project's [Issues](https://github.com/WongSaang/chatgpt-ui/issues) page to see if others have faced similar issues and if there are any solutions available.
+
+## Submitting an Issue
+
+If you cannot find a solution, you can communicate with the project maintainers by submitting an issue. [Submit an Issue](https://github.com/WongSaang/chatgpt-ui/issues/new)
+
+**Note**
+
+The title should be clear and concise, and the description should provide as much detail as possible about the issue or suggestion. If possible, it is best to provide reproducible steps and screenshots.
--- a/docs/guide/quick-start.md
+++ b/docs/guide/quick-start.md
@@ -0,0 +1,117 @@
+# Quick Start
+
+This project provides related docker images for deployment on a VPS or your local computer. Please note that if your network is unable to request the OpenAI API address, you need to configure a proxy. If you want to make it available to other users, it's best to have a domain name and resolve it to the server.
+
+You also need an OpenAI API Key, and there are multiple ways to obtain it online, please search for it yourself.
+
+## Deploying
+
+### Quickly deploy script
+
+**Note: This script has only been verified on Ubuntu Server 22.04 LTS.**
+
+```
+bash <(curl -Ls https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/deployment.sh)
+```
+
+### Docker Compose
+
+
+#### Prepare docker-compose.yml
+
+The project provides a sample `docker-compose.yml`. If you want to customize the configuration, please refer to the [configuration reference](/en/guide/configuration) section.
+
+You can download the `docker-compose.yml` template to your local machine or server by clicking on the link below:
+
+[https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/docker-compose.yml](https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/docker-compose.yml)
+
+You can also manually create the `docker-compose.yml` file and copy the following content into the file:
+
+```
+version: '3'
+services:
+  client:
+    platform: linux/x86_64
+    image: wongsaang/chatgpt-ui-client:latest
+    environment:
+      - SERVER_DOMAIN=http://backend-web-server
+      - DEFAULT_LOCALE=en
+#      - NUXT_PUBLIC_APP_NAME='ChatGPT UI' # The name of the application
+#      - NUXT_PUBLIC_TYPEWRITER=true # Whether to enable the typewriter effect, default false
+#      - NUXT_PUBLIC_TYPEWRITER_DELAY=50 # The delay time of the typewriter effect, default 50ms
+    depends_on:
+      - backend-web-server
+    ports:
+      - '${CLIENT_PORT:-80}:80'
+    networks:
+      - chatgpt_ui_network
+    restart: always
+  backend-wsgi-server:
+    platform: linux/x86_64
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
+    environment:
+      - APP_DOMAIN=${APP_DOMAIN:-localhost:9000}
+      - SERVER_WORKERS=3 # The number of worker processes for handling requests.
+      #      - DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt # If this parameter is not set, the built-in Sqlite will be used by default. It should be noted that if you do not connect to an external database, the data will be lost after the container is destroyed.
+      - DJANGO_SUPERUSER_USERNAME=admin # default superuser name
+      - DJANGO_SUPERUSER_PASSWORD=password # default superuser password
+      - DJANGO_SUPERUSER_EMAIL=admin@example.com # default superuser email
+      - ACCOUNT_EMAIL_VERIFICATION=${ACCOUNT_EMAIL_VERIFICATION:-none} # Determines the e-mail verification method during signup – choose one of "none", "optional", or "mandatory". Default is "optional". If you don't need to verify the email, you can set it to "none".
+      # If you want to use the email verification function, you need to configure the following parameters
+#      - EMAIL_HOST=SMTP server address
+#      - EMAIL_PORT=SMTP server port
+#      - EMAIL_HOST_USER=
+#      - EMAIL_HOST_PASSWORD=
+#      - EMAIL_USE_TLS=True
+#      - EMAIL_FROM=no-reply@example.com  #Default sender email address
+    ports:
+      - '${WSGI_PORT:-8000}:8000'
+    networks:
+      - chatgpt_ui_network
+    restart: always
+  backend-web-server:
+    platform: linux/x86_64
+    image: wongsaang/chatgpt-ui-web-server:latest
+    environment:
+      - BACKEND_URL=http://backend-wsgi-server:8000
+    ports:
+      - '${SERVER_PORT:-9000}:80'
+    depends_on:
+      - backend-wsgi-server
+    networks:
+      - chatgpt_ui_network
+    restart: always
+
+networks:
+  chatgpt_ui_network:
+    driver: bridge
+```
+
+#### Starting the Service
+
+After modifying the configuration as needed, you can start the service by running the following command:
+
+```
+docker-compose up --pull always -d
+```
+
+This command is used to start the services specified in the Docker Compose configuration. The specific meanings of the parameters are as follows:
+
+- `up`: start the services specified in the Docker Compose configuration.
+- `--pull always`: before starting the service each time, the latest version of the image will be pulled from the Docker image repository. This ensures that the image used is always up to date.
+- `-d`: run the service in the background. If this parameter is not added, the service will run in the current terminal window until the user manually stops it.
+
+## After Deployment
+
+Access the management panel at `http(s)://your.domain:9000/admin` or `http(s)://123.123.123.123:9000/admin` using the default superuser account:
+
+- username: **admin**
+- password: **password**
+
+~~Before starting a chat, you need to add an OpenAI API key. In the management panel, in the "Settings" section, there is a record named `openai_api_key`. Set the value to your API key.~~
+
+In the latest version, a separate API Key management has been added to the admin panel, located under "Provider/Api keys". You can add multiple API Keys here, and the backend program will track the usage of each key's token and balance the usage based on token usage. **To enable this feature, you need to delete the previous "openai_api_key" setting.**
+
+Now you can access the client at `http(s)://your.domain` or `http://123.123.123.123` to start chatting.
+
+🎉🎉🎉 Have fun!
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -1,194 +1,42 @@
-<div align="center">
-<h1>ChatGPT UI</h1>
-</div>
+# 介绍

-[English](../../README.md) | [中文](./docs/zh/README.md)
+ChatGPT UI 是一个非官方的 ChatGPT Web 客户端。它支持多用户，多语言，多种数据库连接进行数据持久化存储，例如：Mysql、PostgreSQL 和 Sqlite 等。

-ChatGPT Web 客户端，支持多用户，支持 Mysql、PostgreSQL 等多种数据库连接进行数据持久化存储，支持多语言。提供 Docker 镜像和快速部署脚本。
+本项目项目包括客户端和服务端两部分。

-https://user-images.githubusercontent.com/46235412/227156264-ca17ab17-999b-414f-ab06-3f75b5235bfe.mp4
+- 客户端，基于 [Nuxt](https://nuxt.com/)，项目地址：[https://github.com/WongSaang/chatgpt-ui](https://github.com/WongSaang/chatgpt-ui)
+- 服务端，基于 [Django](https://djangoproject.com/)，项目地址：[https://github.com/WongSaang/chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server)


-## 📢 更新
+## 功能与特性

-<details open>
-<summary><strong>2023-03-27</strong></summary>
-🚀 支持 gpt-4 模型。你可以在前端的“模型参数”中选择模型，gpt-4 模型需要通过 openai 的白名单才能使用。
-</details>
+### 客户端
+- 用户系统，支持用户注册、登录、修改密码等。
+- 用户界面多语言，支持多种语言。
+- 数据持久化，支持 Mysql、PostgreSQL 和 Sqlite 等数据库。
+- 异步对话，支持多个对话同时进行。
+- 历史对话管理。
+- 持续聊天，让 ChatGPT 客户历史聊天记录回答问题，得出更好的答案。
+- 网页搜索能力，让 ChatGPT 获取最新信息。
+- 便捷的工具，支持一键复制消息和代码块，以及重新编辑消息等。
+- 常用指令管理，用户可存储和编辑自己的常用指令。
+- PWA，支持安装到桌面。
+- 用户 Token 使用量统计
+- 支持配置多个 API Key

-<details open>
-<summary><strong>2023-03-23</strong></summary>
-增加网页搜索能力，使得 ChatGPT 生成的回答更与时俱进！
-该功能默认处于关闭状态，你可以在管理后台的 `Chat->Settings` 中开启它，在 Settings 中有一个 `open_web_search` 的记录，把它的值设置为 True。
-</details>
-
-<details open>
-<summary><strong>2023-03-15</strong></summary>
-
-在管理后台增加 `open_registration` 设置项，用于控制是否开放用户注册。你可以登录管理后台，在 `Chat->Setting` 中看到这个设置项，默认是 `True` (允许用户注册)，如果不需要，请改成 `False`。
-
-</details>
-
-<details>
-<summary><strong>2023-03-04</strong></summary>
-
-**使用最新的官方聊天模型**  `gpt-3.5-turbo`
-
-**🎉🎉🎉 提供一个 shell 脚本，用于快速部署到服务器** [使用方法](#one-click-depolyment)
-
-</details>
-
-<details>
-
-<summary><strong>2023-02-24</strong></summary>
-V2 是一个重要的更新，将后端功能分离为一个独立的项目，托管在 [chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server), 该项目使用基于 Python 的 Django 框架。 
-
-如果您仍然希望使用旧版本，请访问 [v1 branch](https://github.com/WongSaang/chatgpt-ui/tree/v1) （不推荐，不再更新）.
-
-</details>
-
-## V2 的功能特性:
-
- 😉 前后端分离，后端使用基于 Python 的 Django 框架。
- 😘 用户身份验证，支持多个用户。
- 😀 能够将数据存储在外部数据库中，支持 Mysql、PostgreSQL 等数据库（默认为 Sqlite）。
- 😎 持续对话，让AI根据上下文回答问题。
+### 服务端
+- 服务端拥有一个管理面板
+- 用户管理
+- 对话和消息管理
+- 常用配置


-## 🚀 一行命令部署到服务器 <a name="one-click-depolyment"></a>
+## 初衷

-注意：此脚本仅在 Ubuntu Server 22.04 LTS 上验证过。
+自从使用 ChatGPT ，它已经成为工作中的好帮手。可惜的是，就像大家知道的，它在有些地方无法访问。但好在 OpenAI 开放了 API，于是我开始为自己写用户界面。

-```bash
-bash <(curl -Ls https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/deployment.sh)
-```
+> 世上无难事，只怕有心人。

-> 如果您拥有一个域名，可以使用 DNS 解析将其指向服务器的 IP 地址。当然，直接使用服务器的 IP 地址也是可以的。
-> 在脚本执行期间，会提示您输入域名。如果您没有域名，可以直接输入服务器的 IP 地址。
+后来，有多位朋友询问我怎么样才能使用 ChatGPT，因为他们没有技术能力。于是我又着手于多用户系统的开发，这样除了自己用，还能帮助到身边的亲朋好友。

-### 部署完成之后
-
-访问 `http(s)://your.domain:9000/admin` / IP `http(s)://123.123.123.123:9000/admin` 登录管理面板。
-
-默认超级用户: `admin`
-
-默认密码: `password`
-
-在可以开始聊天之前，您需要添加一个 OpenAI 的 API 密钥。在管理面板的设置模型中，添加一个名称为 openai_api_key 的记录，将值设置为您的 API 密钥。
-
-现在可以访问客户端地址 `http(s)://your.domain` / `http://123.123.123.123` 开始聊天。
-
-🎉🎉🎉 享受吧！
-
-## 通过 Docker Compose 快速开始
-
-以下是一个 docker-compose.yml 模板，您可以使用它来快速启动服务。
-
-```yaml
-version: '3'
-services:
-  client:
-    image: wongsaang/chatgpt-ui-client:latest
-    environment:
-      - SERVER_DOMAIN=http://backend-web-server
-    depends_on:
-      - backend-web-server
-    ports:
-      - '80:80'
-    networks:
-      - chatgpt_ui_network
-  backend-wsgi-server:
-    image: wongsaang/chatgpt-ui-wsgi-server:latest
-    environment:
-      - APP_DOMAIN=${APP_DOMAIN:-localhost:9000} # CSRF 白名单，在这里设置为 chatgpt-ui-web-server 的地址+端口, 默认： localhost:9000
-      - SERVER_WORKERS=3 # gunicorn 的工作进程数，默认为 3
-      #- DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt # 连接外部数据库，如果不设置这个参数，则默认使用内置的 Sqlite。需要注意的是，如果不连接外部数据库，数据将在容器销毁后丢失。链接格式请看下面的 DB_URL 格式对照表
-      #- OPENAI_API_PROXY=https://openai.proxy.com/v1 # https://api.openai.com/v1 的代理地址
-      - DJANGO_SUPERUSER_USERNAME=admin # 默认超级用户
-      - DJANGO_SUPERUSER_PASSWORD=password # 默认超级用户的密码
-      - DJANGO_SUPERUSER_EMAIL=admin@example.com # 默认超级用户邮箱
-      - ACCOUNT_EMAIL_VERIFICATION=none # 邮箱验证方式，可选值： none, optional, mandatory. 默认为 optional。如果你不需要验证用户的邮箱，可以设置为 none。
-      # 如果您想使用电子邮件验证功能，需要配置以下参数：
-    #      - EMAIL_HOST=SMTP server address
-    #      - EMAIL_PORT=SMTP server port
-    #      - EMAIL_HOST_USER=
-    #      - EMAIL_HOST_PASSWORD=
-    #      - EMAIL_USE_TLS=True
-    #      - EMAIL_FROM=no-reply@example.com  #默认发件邮箱地址
-    ports:
-      - '8000:8000'
-    networks:
-      - chatgpt_ui_network
-  backend-web-server:
-    image: wongsaang/chatgpt-ui-web-server:latest
-    environment:
-      - BACKEND_URL=http://backend-wsgi-server:8000
-    ports:
-      - '9000:80'
-    depends_on:
-      - backend-wsgi-server
-    networks:
-      - chatgpt_ui_network
-
-networks:
-  chatgpt_ui_network:
-    driver: bridge
-```
-
-### DB_URL 格式对照表
-
-| 数据库                | 链接                                              |
-|----------------------|--------------------------------------------------|
-| PostgreSQL           | ``postgres://USER:PASSWORD@HOST:PORT/NAME``      |
-| MySQL                | ``mysql://USER:PASSWORD@HOST:PORT/NAME``         |
-| SQLite               | ``sqlite:///PATH``                               |
-
-### 设置 API 密钥
-
-访问 `http(s)://your.domain:9000/admin` / IP `http(s)://123.123.123.123:9000/admin` 登录管理面板。
-
-默认超级用户: `admin`
-
-默认密码: `password`
-
-在可以开始聊天之前，您需要添加一个 OpenAI 的 API 密钥。在管理面板的设置模型中，添加一个名称为 openai_api_key 的记录，将值设置为您的 API 密钥。
-
-现在可以访问客户端地址 `http(s)://your.domain` / `http://123.123.123.123` 开始聊天。
-
-
-## 续杯咖啡
-
-> 如果对您有帮助，也是在帮助我自己.
-
-如果你想支持我，给我续杯咖啡吧 ❤️ [https://www.buymeacoffee.com/WongSaang](https://www.buymeacoffee.com/WongSaang)
-
-<p align="center">
-  <img height="150" src="https://github.com/WongSaang/chatgpt-ui/blob/main/demos/bmc_qr.png?raw=true"/>
-</p>
-
-## Development
-
-### Setup
-
-Make sure to install the dependencies:
-
-```bash
-# yarn
-yarn install
-```
-
-### Development Server
-
-Start the development server on http://localhost:3000
-
-```bash
-yarn dev
-```
-
-### Production
-
-Build the application for production:
-
-```bash
-yarn build
-```
+项目开源后，有很多人提了 issue，也有人提了 PR，项目就发展到如今的样子。我在这个过程中也学到了很多，正如我一直坚信的，帮助他人也是帮助自己。
--- a/docs/zh/guide/buymeacoffee.md
+++ b/docs/zh/guide/buymeacoffee.md
@@ -0,0 +1,7 @@
+# 续杯咖啡
+
+> 如果这个项目对您有帮助，这也是在帮助我自己。
+
+如果你想支持我，给我续杯咖啡吧 ❤️ [https://www.buymeacoffee.com/WongSaang](https://www.buymeacoffee.com/WongSaang)
+
+![Buy Me A Coffee](/images/bmc_qr.png)
--- a/docs/zh/guide/configuration.md
+++ b/docs/zh/guide/configuration.md
@@ -0,0 +1,85 @@
+# 配置参考
+
+## 数据库
+
+后端默认使用内置的 Sqlite 来存储数据，如果不连接外部数据库，数据将在容器销毁后丢失。
+
+`chatgpt-ui-wsgi-server` 镜像提供环境变量 `DB_URL` 来配置与外部数据库的连接，以下是 `DB_URL` 的链接格式对照表。
+
+| 数据库                | 链接                                             |
+|----------------------|--------------------------------------------------|
+| PostgreSQL           | postgres://USER:PASSWORD@HOST:PORT/DATABASE_NAME |
+| MySQL                | mysql://USER:PASSWORD@HOST:PORT/DATABASE_NAME    |
+| SQLite               | sqlite:///PATH                                   |
+
+例如我使用 PostgreSQL，则配置如下：
+
+```
+backend-wsgi-server:
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
+    environment:
+      - DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt
+```
+
+## 邮箱验证
+
+如果你开放用户注册功能，并需要向用户发送邮箱激活链接，需要在 `wsgi-server` 服务中配置以下环境变量：
+
+| 参数                  | 说明                                             | 默认值 |
+|----------------------|--------------------------------------------------|-----|
+| ACCOUNT_EMAIL_VERIFICATION | 邮箱验证方式，可选值： none, optional, mandatory | optional |
+| EMAIL_HOST                 | SMTP 服务器地址    |  smtp.mailgun.org    |
+| EMAIL_PORT                 | SMTP 服务器端口号  |   587       |
+| EMAIL_HOST_USER            | 用户名             |    -         |
+| EMAIL_HOST_PASSWORD        | 密码              |     -     |
+| EMAIL_USE_TLS              | 是否加密           |   True       |
+| EMAIL_FROM                 | 发件邮箱            |     webmaster@localhost  |
+
+## API 代理
+
+如果您的网络无法请求 OpenAI 的 API 地址，您可以在 `wsgi-server` 服务中配置代理，如何搭建代理服务，需要您自行搜索。
+
+例如：
+
+```
+backend-wsgi-server:
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
+    environment:
+      - OPENAI_API_PROXY=https://openai.proxy.com/v1 # 注意，域名后面需要带上 v1
+```
+
+## 后端 CSRF 白名单
+
+如果你在访问管理后台的时候遇到 `CSRF verification failed`，可能你的 `APP_DOMAIN` 没有配置对。在 `wsgi-server` 服务下有个环境变量 `wsgi-server`。 它的值应该是 `backend-web-server` 的地址+端口, 默认： `localhost:9000`。
+
+假如我把 `chagpt.com` 这个域名解析到了服务器，并且我的 `backend-web-server` 服务绑定了 9000 这个端口。正确的配置如下：
+
+```
+backend-wsgi-server:
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
+    environment:
+      - APP_DOMAIN=chagpt.com:9000
+```
+
+## 客户端配置
+
+| 参数                  | 说明                                      | 默认值                    |
+|----------------------|-------------------------------------------|---------------------------|
+| SERVER_DOMAIN                     | 服务端地址                    | http://backend-web-server |
+| DEFAULT_LOCALE                    | 默认语言                      | en                        |
+| NUXT_PUBLIC_APP_NAME              | 应用名称                      |  ChatGPT UI               |
+| NUXT_PUBLIC_TYPEWRITER            | 是否开启 打字机 效果[true/false]|  true                    |
+| NUXT_PUBLIC_TYPEWRITER_DELAY      | 打字机效果的延迟时间，单位：毫秒|  50                       |
+
+
+## 用户注册控制
+
+部署完整后，在管理后台的 `Chat->Setting` 下面有 `open_registration` 设置项，用于控制是否开放用户注册。默认是 `True` (允许用户注册)，如果不需要，请改成 `False`。
+
+## 网页搜索功能控制
+
+该功能默认处于关闭状态，你可以在管理后台的 `Chat->Settings` 中开启它，在 Settings 中有一个 `open_web_search` 的设置项，把它的值设置为 `True`。
+
+## 节俭模式控制
+
+该功能默认处于开启状态，你可以在管理后台的 `Chat->Settings` 中关闭它，在 Settings 中有一个 `open_frugal_mode_control` 的设置项，把它的值设置为 `False`。
--- a/docs/zh/guide/development.md
+++ b/docs/zh/guide/development.md
@@ -0,0 +1,62 @@
+# 开发指南
+
+## 前端
+
+所需技能：[Vue](https://vuejs.org/)、[Nuxt](https://nuxt.com/)
+
+项目地址：[https://github.com/WongSaang/chatgpt-ui](https://github.com/WongSaang/chatgpt-ui)
+
+### 环境准备
+安装最新稳定版 node.js，如果需要打包成 docker 镜像，还需要安装 docker。
+
+### 安装依赖
+
+```
+yarn install
+```
+
+### 启动开发服务
+
+```
+yarn dev
+```
+
+### 构建
+
+```
+yarn build
+```
+
+### 打包成 docker 镜像
+
+```
+docker build -t image-name:latest .
+```
+
+
+## 后端
+
+所需技能：[Python](https://www.python.org/)、[Django](https://djangoproject.com/)
+
+项目地址：[https://github.com/WongSaang/chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server)
+
+### 环境准备
+安装Python、pip/pipenv，如果需要打包成 docker 镜像，还需要安装 docker。
+
+### 安装依赖
+
+```
+pip install -r requirements.txt
+```
+
+### 启动开发服务
+
+```
+python manage.py runserver
+```
+
+### 打包成 docker 镜像
+
+```
+docker build -t image-name:latest .
+```
--- a/docs/zh/guide/problems.md
+++ b/docs/zh/guide/problems.md
@@ -0,0 +1,13 @@
+# 遇到问题
+
+## 搜索问题
+
+当你在使用项目时，如果遇到了问题，可以在项目的 [Issues](https://github.com/WongSaang/chatgpt-ui/issues) 页面搜索相关的关键词，看看其他人是否遇到过相同的问题以及解决方案。
+
+## 提 issue
+
+如果没有找到解决方案，可以通过提交 Issue 来与项目维护者交流。[提交Issue](https://github.com/WongSaang/chatgpt-ui/issues/new)
+
+**注意**
+
+标题应该简单明了，描述应该尽可能详细地描述问题或者建议。如果可能，最好提供复现步骤和截图。
--- a/docs/zh/guide/quick-start.md
+++ b/docs/zh/guide/quick-start.md
@@ -0,0 +1,117 @@
+# 快速开始
+
+本项目提供了相关的 docker 镜像，你需要一个 vps 来部署，当然你也可以在本地的电脑上部署。需要注意的是，如果你的网络无法请求 OpenAI 的 API 地址，您需要配置代理。如果你想开放给其他用户使用，最好还需要一个域名，并将域名解析到服务器。
+
+您还需要一个 OpenAI 的API Key，网上有获取多种方案，请自行搜索。
+
+## 部署
+
+### 快速部署脚本
+
+*对于技术知识了解不多的选手，如果你看不懂下面的内容，可以看我之前写的博客文章[《一行命令部署自己的ChatGPT客户端》](https://wongsnotes.com/p/deploying-your-own-chatgpt-client-with-one-line-of-command/)*
+
+**注意：此脚本目前仅在 Ubuntu Server 22.04 LTS 上验证过。**
+
+
+```
+bash <(curl -Ls https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/deployment.sh)
+```
+
+### Docker Compose
+
+
+#### 准备 docker-compose.yml
+
+项目中提供了一个 `docker-compose.yml` 示例，如果你想自定义配置，请看 [配置参考](/zh/guide/configuration) 部分。
+
+你可以通过下方链接下载 `docker-compose.yml` 模板到本地或服务器：
+
+[https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/docker-compose.yml](https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/docker-compose.yml)
+
+也可以手动创建 `docker-compose.yml` 文件，然后复制下面的内容到文件中：
+
+```
+version: '3'
+services:
+  client:
+    image: wongsaang/chatgpt-ui-client:latest
+    environment:
+      - SERVER_DOMAIN=http://backend-web-server
+      - DEFAULT_LOCALE=zh
+    #      - NUXT_PUBLIC_APP_NAME='ChatGPT UI' # APP 名称
+    #      - NUXT_PUBLIC_TYPEWRITER=true # 是否开启 打字机 效果
+    #      - NUXT_PUBLIC_TYPEWRITER_DELAY=50 # 打字机效果的延迟时间，单位：毫秒，默认：50
+    depends_on:
+      - backend-web-server
+    ports:
+      - '80:80'
+    networks:
+      - chatgpt_ui_network
+  backend-wsgi-server:
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
+    environment:
+      - APP_DOMAIN=${APP_DOMAIN:-localhost:9000} # CSRF 白名单，在这里设置为 chatgpt-ui-web-server 的地址+端口, 默认： localhost:9000
+      - SERVER_WORKERS=3 # gunicorn 的工作进程数，默认为 3
+      #- DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt # 连接外部数据库，如果不设置这个参数，则默认使用内置的 Sqlite。需要注意的是，如果不连接外部数据库，数据将在容器销毁后丢失。链接格式请看下面的 DB_URL 格式对照表
+      #- OPENAI_API_PROXY=https://openai.proxy.com/v1 # https://api.openai.com/v1 的代理地址
+      - DJANGO_SUPERUSER_USERNAME=admin # 默认超级用户
+      - DJANGO_SUPERUSER_PASSWORD=password # 默认超级用户的密码
+      - DJANGO_SUPERUSER_EMAIL=admin@example.com # 默认超级用户邮箱
+      - ACCOUNT_EMAIL_VERIFICATION=none # 邮箱验证方式，可选值： none, optional, mandatory. 默认为 optional。如果你不需要验证用户的邮箱，可以设置为 none。
+      # 如果您想使用电子邮件验证功能，需要配置以下参数：
+    #      - EMAIL_HOST=SMTP server address
+    #      - EMAIL_PORT=SMTP server port
+    #      - EMAIL_HOST_USER=
+    #      - EMAIL_HOST_PASSWORD=
+    #      - EMAIL_USE_TLS=True
+    #      - EMAIL_FROM=no-reply@example.com  #默认发件邮箱地址
+    ports:
+      - '8000:8000'
+    networks:
+      - chatgpt_ui_network
+  backend-web-server:
+    image: wongsaang/chatgpt-ui-web-server:latest
+    environment:
+      - BACKEND_URL=http://backend-wsgi-server:8000
+    ports:
+      - '9000:80'
+    depends_on:
+      - backend-wsgi-server
+    networks:
+      - chatgpt_ui_network
+
+networks:
+  chatgpt_ui_network:
+    driver: bridge
+```
+
+#### 启动服务
+
+你可以自行修改配置后，运行下面的命令来启动服务。
+
+```
+docker-compose up --pull always -d
+```
+
+这个命令用于启动 Docker Compose 配置中的服务。具体的参数含义如下：
+
+- `up`：启动 Docker Compose 配置中的服务。
+- `--pull always`：每次启动服务前，都会从 Docker 镜像仓库中拉取最新版本的镜像。这样可以确保使用的镜像始终是最新的。
+- `-d`：在后台运行服务。如果不加这个参数，服务会在当前终端窗口中运行，直到用户手动停止服务。
+
+
+## 部署完成之后
+
+访问 `http(s)://your.domain:9000/admin` 或 IP `http(s)://123.123.123.123:9000/admin` 登录管理面板。
+
+默认超级用户: **admin**
+
+默认密码: **password**
+
+~~在可以开始聊天之前，您需要添加一个 OpenAI 的 API 密钥。在管理面板的设置模型中，有一个名称为 `openai_api_key` 的记录，将值设置为您的 API 密钥。~~
+
+在最新版本中，管理面板增加了一个独立的 API Key 的管理，位于管理面板的 `Provider/ Api keys`。你可以在这里添加多个 API Key，后端程序会统计每个 Key 的 token 使用量，并根据 token 使用量来平衡使用 Key。**想要这个功能生效，需要删除之前的`openai_api_key`设置**
+
+现在可以访问客户端地址 `http(s)://your.domain` 或 IP `http://123.123.123.123` 开始聊天。
+
+🎉🎉🎉 祝开心！
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -1,4 +1,21 @@
 {
+  "signIn":"Sign In",
+  "signUp":"Sign Up",
+  "username":"User Name",
+  "password":"Password",
+  "Username is required":"Username is required",
+  "Password is required":"Password is required",
+  "Create your account":"Create your account",
+  "createAccount":"Create Account",
+  "email":"E-mail",
+  "Sign in instead":"Sign in instead",
+  "Please enter your username":"Please enter your username",
+  "Username must be at least 4 characters":"Username must be at least 4 characters",
+  "Please enter your e-mail address":"Please enter your e-mail address",
+  "E-mail address must be valid":"E-mail address must be valid",
+  "Please enter your password":"Please enter your password",
+  "Password must be at least 8 characters":"Password must be at least 8 characters",
+  "Please confirm your password":"Please confirm your password",
  "welcomeTo": "Welcome to",
  "language": "Language",
  "setApiKey": "Set API Key",
@@ -50,6 +67,10 @@
  "webSearch": "Web Search",
  "webSearchDefaultPrompt": "Web search results:\n\n[web_results]\nCurrent date: [current_date]\n\nInstructions: Using the provided web search results, write a comprehensive reply to the given query. Make sure to cite results using [[number](URL)] notation after the reference. If the provided search results refer to multiple subjects with the same name, write separate answers for each subject.\nQuery: [query]",
  "genTitlePrompt": "Generate a short title for the following content, no more than 10 words. \n\nContent: ",
+  "maxTokenTips1": "The maximum context length of the current model is",
+  "maxTokenTips2": "token, which includes the length of the prompt and the length of the generated text. The `Max Tokens` here refers to the length of the generated text. Therefore, you should leave some space for your prompt and not set it too large or to the maximum.",
+  "frugalMode": "Frugal mode",
+  "frugalModeTip": "Activate frugal mode, the client will not send historical messages to ChatGPT, which can save token consumption. If you want ChatGPT to understand the context of the conversation, please turn off frugal mode.",
  "welcomeScreen": {
    "introduction1": "is an unofficial client for ChatGPT, but uses the official OpenAI API.",
    "introduction2": "You will need an OpenAI API Key before you can use this client.",
--- a/lang/fr-FR.json
+++ b/lang/fr-FR.json
@@ -0,0 +1,96 @@
+{
+  "signIn":"Se connecter",
+  "signUp":"S'inscrire",
+  "username":"Nom d'utilisateur",
+  "password":"Mot de passe",
+  "Username is required":"Nom d'utilisateur requis",
+  "Password is required":"Mot de passe requis",
+  "Create your account":"Créer votre compte",
+  "createAccount":"Créer un compte",
+  "email":"E-mail",
+  "Sign in instead":"S'identifier à la place",
+  "Please enter your username":"Veuillez saisir votre nom d'utilisateur",
+  "Username must be at least 4 characters":"Le nom d'utilisateur doit comporter au moins 4 caractères",
+  "Please enter your e-mail address":"Veuillez saisir votre adresse e-mail",
+  "E-mail address must be valid":"L'adresse e-mail doit être valide",
+  "Please enter your password":"Veuillez saisir votre mot de passe",
+  "Password must be at least 8 characters":"Le mot de passe doit comporter au moins 8 caractères",
+  "Please confirm your password":"Veuillez confirmer votre mot de passe",
+  "welcomeTo": "Bienvenue à",
+  "language": "Langue",
+  "setApiKey": "Définir la clé API",
+  "setOpenAIApiKey": "Définir la clé API OpenAI",
+  "openAIApiKey": "Clé API OpenAI",
+  "getAKey": "Obtenir une clé",
+  "openAIModels": "Modèles OpenAI",
+  "aboutTheModels": "À propos des modèles",
+  "saveAndClose": "Enregistrer et fermer",
+  "pleaseSelectAtLeastOneModelDot": "Veuillez sélectionner au moins un modèle.",
+  "writeAMessage": "Écrire un message",
+  "frequentlyPrompts": "Prompts fréquents",
+  "addPrompt": "Ajouter un prompt",
+  "titlePrompt": "Titre",
+  "addNewPrompt": "Ajouter un nouveau prompt",
+  "pressEnterToSendYourMessageOrShiftEnterToAddANewLine": "Appuyez sur Entrée pour envoyer votre message ou sur Maj+Entrée pour ajouter une nouvelle ligne",
+  "lightMode": "Mode clair",
+  "darkMode": "Mode sombre",
+  "followSystem": "Suivre le système",
+  "themeMode": "Mode thème",
+  "feedback": "Commentaires",
+  "newConversation": "Nouvelle conversation",
+  "defaultConversationTitle": "Sans titre",
+  "clearConversations": "Effacer les conversations",
+  "modelParameters": "Paramètres du modèle",
+  "model": "Modèle",
+  "temperature": "Température",
+  "topP": "Top P",
+  "frequencyPenalty": "Pénalité de fréquence",
+  "presencePenalty": "Pénalité de présence",
+  "maxTokens": "Nombre maximal de jetons",
+  "roles": {
+    "me": "Moi",
+    "ai": "IA"
+  },
+  "edit": "Modifier",
+  "copy": "Copier",
+  "copied": "Copié",
+  "delete": "Supprimer",
+  "signOut": "Déconnexion",
+  "resetPassword": "Réinitialiser le mot de passe",
+  "submit": "Soumettre",
+  "agree": "Accepter",
+  "newPassword": "Nouveau mot de passe",
+  "currentPassword": "Mot de passe actuel",
+  "confirmPassword": "Confirmer le mot de passe",
+  "yourPasswordHasBeenReset": "Votre mot de passe a été réinitialisé",
+  "nowYouNeedToSignInAgain": "Vous devez maintenant vous reconnecter",
+  "webSearch": "Recherche Web",
+  "webSearchDefaultPrompt": "Résultats de la recherche Web : \n\n[résultats_web]\nDate actuelle : [date_actuelle]\n\nInstructions : Utilisez les résultats de la recherche Web fournis pour rédiger une réponse complète à la question donnée. Assurez-vous de citer les résultats en utilisant la notation [nombre] après la référence. Si les résultats de recherche fournis font référence à plusieurs sujets avec le même nom, rédigez des réponses distinctes pour chaque sujet. \nQuestion : [question]",
+  "genTitlePrompt": "Générer un titre court pour le contenu suivant, pas plus de 10 mots. \n\nContenu : ",
+  "maxTokenTips1": "La longueur maximale du contexte pour le modèle actuel est de",
+  "maxTokenTips2": "jeton, ce qui inclut la longueur du prompt et la longueur du texte généré. Le paramètre Max Tokens ici fait référence à la longueur du texte généré. Vous devriez donc laisser de l'espace pour votre prompt et ne pas le régler trop grand ou à la limite maximale.",
+  "frugalMode": "Mode éco",
+  "frugalModeTip": "Activez le mode frugal, le client n'enverra pas les messages historiques à ChatGPT, ce qui peut économiser la consommation de jetons. Si vous souhaitez que ChatGPT comprenne le contexte de la conversation, veuillez désactiver le mode frugal.",
+  "welcomeScreen": {
+    "introduction1": "est un client non officiel pour ChatGPT, mais utilise l'API officielle d'OpenAI.",
+    "introduction2": "Vous aurez besoin d'une clé API OpenAI avant de pouvoir utiliser ce client.",
+    "examples": {
+      "title": "Exemples",
+      "item1": "\"Expliquez l'informatique quantique en termes simples\"",
+      "item2": "\"Avez-vous des idées créatives pour l'anniversaire d'un enfant de 10 ans?\"",
+      "item3": "\"Comment faire une requête HTTP en JavaScript?\""
+    },
+    "capabilities": {
+      "title": "Fonctionnalités",
+      "item1": "Se souvient de ce que l'utilisateur a dit précédemment dans la conversation",
+      "item2": "Permet à l'utilisateur de fournir des corrections de suivi",
+      "item3": "Entraîné à refuser les demandes inappropriées"
+    },
+    "limitations": {
+      "title": "Limitations",
+      "item1": "Peut occasionnellement générer des informations incorrectes",
+      "item2": "Peut occasionnellement produire des instructions dangereuses ou du contenu biaisé",
+      "item3": "Connaissance limitée du monde et des événements après 2021"
+    }
+  }
+}
--- a/lang/ru-RU.json
+++ b/lang/ru-RU.json
@@ -1,4 +1,21 @@
 {
+  "signIn":"Sign In",
+  "signUp":"Sign Up",
+  "username":"User Name",
+  "password":"Password",
+  "Username is required":"Username is required",
+  "Password is required":"Password is required",
+  "Create your account":"Create your account",
+  "createAccount":"Create Account",
+  "email":"E-mail",
+  "Sign in instead":"Sign in instead",
+  "Please enter your username":"Please enter your username",
+  "Username must be at least 4 characters":"Username must be at least 4 characters",
+  "Please enter your e-mail address":"Please enter your e-mail address",
+  "E-mail address must be valid":"E-mail address must be valid",
+  "Please enter your password":"Please enter your password",
+  "Password must be at least 8 characters":"Password must be at least 8 characters",
+  "Please confirm your password":"Please confirm your password",
  "welcomeTo": "Добро пожаловать в",
  "language": "Язык",
  "setApiKey": "Установить ключ API",
@@ -50,6 +67,10 @@
  "webSearch": "Поиск в интернете",
  "webSearchDefaultPrompt": "Результаты веб-поиска:\n\n[web_results]\nТекущая дата: [current_date]\n\nИнструкции: Используя предоставленные результаты веб-поиска, напишите развернутый ответ на заданный запрос. Обязательно цитируйте результаты, используя обозначение [[number](URL)] после ссылки. Если предоставленные результаты поиска относятся к нескольким темам с одинаковым названием, напишите отдельные ответы для каждой темы.\nЗапрос: [query]",
  "genTitlePrompt": "Придумайте короткий заголовок для следующего содержания, не более 10 слов. \n\nСодержание: ",
+  "maxTokenTips1": "The maximum context length of the current model is",
+  "maxTokenTips2": "token, which includes the length of the prompt and the length of the generated text. The `Max Tokens` here refers to the length of the generated text. Therefore, you should leave some space for your prompt and not set it too large or to the maximum.",
+  "frugalMode": "Frugal mode",
+  "frugalModeTip": "Activate frugal mode, the client will not send historical messages to ChatGPT, which can save token consumption. If you want ChatGPT to understand the context of the conversation, please turn off frugal mode.",
  "welcomeScreen": {
    "introduction1": "является неофициальным клиентом для ChatGPT, но использует официальный API OpenAI.",
    "introduction2": "Вам понадобится ключ API OpenAI, прежде чем вы сможете использовать этот клиент.",
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@@ -1,7 +1,32 @@
 {
+  "invitation code":"邀请码",
+  "Please enter your code":"请填写邀请码",
+  "signIn":"登录",
+  "signUp":"注册",
+  "username":"用户名",
+  "password":"密码",
+  "Username is required":"请填写用户名",
+  "Password is required":"请填写密码",
+  "Create your account":"创建你的账号",
+  "createAccount":"创建账号",
+  "email":"邮箱",
+  "Sign in instead":"返回登录",
+  "Please enter your username":"请输入你的用户名",
+  "Username must be at least 4 characters":"用户名至少四个字符",
+  "Please enter your e-mail address":"请输入你的电子邮箱",
+  "E-mail address must be valid":"电子邮箱地址格式不正确",
+  "Please enter your password":"请输入你的密码",
+  "Password must be at least 8 characters":"密码至少八个字符",
+  "Please confirm your password":"请输入确认密码",
+  "Something went wrong. Please try again.":"网络错误请稍后重试",
+  "This password is too common.":"密码过于简单",
+  "This password is entirely numeric.":"密码不能全是数字",
+  "Your registration is successful":"恭喜你，注册成功！",
+  "You can now":"现在你可以",
+  "to your account.":"你的账号了。",
  "welcomeTo": "欢迎来到",
  "language": "语言",
-  "setApiKey": "设置API密钥",
+  "setApiKey": "API 密钥",
  "setOpenAIApiKey": "设置OpenAI的API密钥",
  "openAIApiKey": "OpenAI的API密钥",
  "getAKey": "获取钥匙",
@@ -50,6 +75,10 @@
  "webSearch": "网页搜索",
  "webSearchDefaultPrompt": "网络搜索结果：\n\n[web_results]\n当前日期：[current_date]\n\n说明：使用提供的网络搜索结果，对给定的查询写出全面的回复。确保在引用参考文献后使用 [[number](URL)] 符号进行引用结果. 如果提供的搜索结果涉及到多个具有相同名称的主题，请针对每个主题编写单独的答案。\n查询：[query]",
  "genTitlePrompt": "为以下内容生成一个不超过10个字的简短标题。 \n\n内容: ",
+  "maxTokenTips1": "当前模型的最大上下文长度为",
+  "maxTokenTips2": "个 token，它包括了指令的长度和生成的文本长度。此处的最大 token 数量是指生成的文本长度。所以您应该为您的指令预留一些空间，不宜设置过大或拉满。",
+  "frugalMode": "节俭模式",
+  "frugalModeTip": "开启节俭模式，客户端不会把历史消息发送给ChatGPT，可以节省 token 的消耗。如果你想让 ChatGPT 了解对话的上下文，请关闭节俭模式。",
  "welcomeScreen": {
    "introduction1": "是一个非官方的ChatGPT客户端，但使用OpenAI的官方API",
    "introduction2": "在使用本客户端之前，您需要一个OpenAI API密钥。",
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,372 +1,8 @@
-<script setup>
-import {useDisplay} from "vuetify";
-
-const { $i18n, $auth } = useNuxtApp()
-const runtimeConfig = useRuntimeConfig()
-const colorMode = useColorMode()
-const drawer = ref(null)
-const themes = ref([
-  { title: $i18n.t('lightMode'), value: 'light' },
-  { title: $i18n.t('darkMode'), value: 'dark' },
-  { title: $i18n.t('followSystem'), value: 'system'}
-])
-const setTheme = (theme) => {
-  colorMode.preference = theme
-}
-const feedback = () => {
-  window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
-}
-
-const { locale, locales, setLocale } = useI18n()
-const setLang = (lang) => {
-  setLocale(lang)
-}
-
-const conversations = useConversations()
-const currentConversation = useConversation()
-
-const editingConversation = ref(null)
-const deletingConversationIndex = ref(null)
-
-const editConversation = (index) => {
-  editingConversation.value = conversations.value[index]
-}
-
-const updateConversation = async (index) => {
-  editingConversation.value.updating = true
-  const { data, error } = await useAuthFetch(`/api/chat/conversations/${editingConversation.value.id}/`, {
-    method: 'PUT',
-    body: JSON.stringify({
-      topic: editingConversation.value.topic
-    })
-  })
-  if (!error.value) {
-    conversations.value[index] = editingConversation.value
-  }
-  editingConversation.value = null
-}
-
-const deleteConversation = async (index) => {
-  deletingConversationIndex.value = index
-  const { data, error } = await useAuthFetch(`/api/chat/conversations/${conversations.value[index].id}/`, {
-    method: 'DELETE'
-  })
-  deletingConversationIndex.value = null
-  if (!error.value) {
-    if (conversations.value[index].id === currentConversation.value.id) {
-      createNewConversation()
-    }
-    conversations.value.splice(index, 1)
-  }
-}
-
-const clearConversations = async () => {
-  deletingConversations.value = true
-  const { data, error } = await useAuthFetch(`/api/chat/conversations/delete_all`, {
-    method: 'DELETE'
-  })
-  if (!error.value) {
-    loadConversations()
-    clearConfirmDialog.value = false
-  }
-  deletingConversations.value = false
-}
-
-const clearConfirmDialog = ref(false)
-const deletingConversations = ref(false)
-const loadingConversations = ref(false)
-
-const loadConversations = async () => {
-  loadingConversations.value = true
-  conversations.value = await getConversations()
-  loadingConversations.value = false
-}
-
-const {mdAndUp} = useDisplay()
-
-
-const drawerPermanent = computed(() => {
-  return mdAndUp.value
-})
-
-const signOut = async () => {
-  const { data, error } = await useFetch('/api/account/logout/', {
-    method: 'POST'
-  })
-  if (!error.value) {
-    await $auth.logout()
-  }
-}
-
-const settings = useSettings()
-const showApiKeySetting = ref(false)
-watchEffect(() => {
-  if (settings.value) {
-    const settingsValue = toRaw(settings.value)
-    showApiKeySetting.value = settingsValue.open_api_key_setting && settingsValue.open_api_key_setting === 'True'
-  }
-})
-
-onMounted(async () => {
-  loadConversations()
-  loadSettings()
-})
-
-</script>
-
 <template>
  <v-app
      :theme="$colorMode.value"
  >
-    <v-navigation-drawer
-        v-model="drawer"
-        :permanent="drawerPermanent"
-        width="300"
-    >
-      <template
-          v-slot:prepend
-      >
-        <v-list>
-          <v-list-item
-              :title="$auth.user.username"
-              :subtitle="$auth.user.email"
-          >
-            <template v-slot:prepend>
-              <v-icon
-                  icon="face"
-                  size="x-large"
-              ></v-icon>
-            </template>
-            <template v-slot:append>
-              <v-menu>
-                <template v-slot:activator="{ props }">
-                  <v-btn
-                      v-bind="props"
-                      size="small"
-                      variant="text"
-                      icon="expand_more"
-                  ></v-btn>
-                </template>
-                <v-list>
-                  <v-list-item
-                      :title="$t('resetPassword')"
-                      to="/account/resetPassword"
-                  >
-                  </v-list-item>
-                  <v-list-item
-                      :title="$t('signOut')"
-                      @click="signOut"
-                  >
-                  </v-list-item>
-                </v-list>
-              </v-menu>
-
-            </template>
-          </v-list-item>
-        </v-list>
-
-        <v-divider></v-divider>
-      </template>
-
-      <div class="px-2">
-        <v-list>
-          <v-list-item v-show="loadingConversations">
-            <v-list-item-title class="d-flex justify-center">
-              <v-progress-circular indeterminate></v-progress-circular>
-            </v-list-item-title>
-          </v-list-item>
-        </v-list>
-
-        <v-list>
-          <template
-              v-for="(conversation, cIdx) in conversations"
-              :key="conversation.id"
-          >
-            <v-list-item
-                active-color="primary"
-                rounded="xl"
-                v-if="editingConversation && editingConversation.id === conversation.id"
-            >
-              <v-text-field
-                  v-model="editingConversation.topic"
-                  :loading="editingConversation.updating"
-                  variant="underlined"
-                  append-icon="done"
-                  hide-details
-                  density="compact"
-                  autofocus
-                  @keyup.enter="updateConversation(cIdx)"
-                  @click:append="updateConversation(cIdx)"
-              ></v-text-field>
-            </v-list-item>
-            <v-hover
-                v-if="!editingConversation || editingConversation.id !== conversation.id"
-                v-slot="{ isHovering, props }"
-            >
-              <v-list-item
-                  rounded="xl"
-                  active-color="primary"
-                  :to="conversation.id ? `/${conversation.id}` : undefined"
-                  v-bind="props"
-              >
-                <v-list-item-title>{{ conversation.topic !== "" ? conversation.topic : $t('defaultConversationTitle') }}</v-list-item-title>
-                <template v-slot:append>
-                  <div
-                      v-show="isHovering && conversation.id"
-                  >
-                    <v-btn
-                        icon="edit"
-                        size="small"
-                        variant="text"
-                        @click.prevent="editConversation(cIdx)"
-                    >
-                    </v-btn>
-                    <v-btn
-                        icon="delete"
-                        size="small"
-                        variant="text"
-                        :loading="deletingConversationIndex === cIdx"
-                        @click.prevent="deleteConversation(cIdx)"
-                    >
-                    </v-btn>
-                  </div>
-                </template>
-              </v-list-item>
-            </v-hover>
-          </template>
-        </v-list>
-      </div>
-
-      <template v-slot:append>
-        <div class="px-1">
-          <v-divider></v-divider>
-          <v-list>
-
-            <v-dialog
-                v-model="clearConfirmDialog"
-                persistent
-            >
-              <template v-slot:activator="{ props }">
-                <v-list-item
-                    v-bind="props"
-                    rounded="xl"
-                    prepend-icon="delete_forever"
-                    :title="$t('clearConversations')"
-                ></v-list-item>
-              </template>
-              <v-card>
-                <v-card-title class="text-h5">
-                  Are you sure you want to delete all conversations?
-                </v-card-title>
-                <v-card-text>This will be a permanent deletion and cannot be retrieved once deleted. Please proceed with caution.</v-card-text>
-                <v-card-actions>
-                  <v-spacer></v-spacer>
-                  <v-btn
-                      color="green-darken-1"
-                      variant="text"
-                      @click="clearConfirmDialog = false"
-                      class="text-none"
-                  >
-                    Cancel deletion
-                  </v-btn>
-                  <v-btn
-                      color="green-darken-1"
-                      variant="text"
-                      @click="clearConversations"
-                      class="text-none"
-                      :loading="deletingConversations"
-                  >
-                    Confirm deletion
-                  </v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-dialog>
-
-            <ApiKeyDialog
-                v-if="showApiKeySetting"
-            />
-
-            <ModelParameters/>
-
-            <v-menu
-            >
-              <template v-slot:activator="{ props }">
-                <v-list-item
-                    v-bind="props"
-                    rounded="xl"
-                    :prepend-icon="$colorMode.value === 'light' ? 'light_mode' : 'dark_mode'"
-                    :title="$t('themeMode')"
-                ></v-list-item>
-              </template>
-              <v-list
-                  bg-color="white"
-              >
-                <v-list-item
-                    v-for="(theme, idx) in themes"
-                    :key="idx"
-                    @click="setTheme(theme.value)"
-                >
-                  <v-list-item-title>{{ theme.title }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-
-            <SettingsLanguages/>
-
-            <v-list-item
-                rounded="xl"
-                prepend-icon="help_outline"
-                :title="$t('feedback')"
-                @click="feedback"
-            ></v-list-item>
-
-          </v-list>
-        </div>
-      </template>
-    </v-navigation-drawer>
-
-    <v-app-bar
-        class=""
-    >
-      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
-
-      <v-toolbar-title>{{ currentConversation.id ? currentConversation.topic : runtimeConfig.public.appName }}</v-toolbar-title>
-
-      <v-spacer></v-spacer>
-
-      <v-btn
-          :title="$t('newConversation')"
-          icon="add"
-          @click="createNewConversation"
-          class="d-md-none"
-      ></v-btn>
-      <v-btn
-          variant="outlined"
-          class="text-none d-none d-md-block"
-          @click="createNewConversation"
-      >
-        {{ $t('newConversation') }}
-      </v-btn>
-
-    </v-app-bar>
-
-    <v-main>
-      <NuxtPage/>
-    </v-main>
-
+    <NavigationDrawer />
+    <slot />
  </v-app>
-</template>
-
-<style>
-.v-navigation-drawer__content::-webkit-scrollbar {
-  width: 0;
-}
-.v-navigation-drawer__content:hover::-webkit-scrollbar {
-  width: 6px;
-}
-.v-navigation-drawer__content:hover::-webkit-scrollbar-thumb {
-  background-color: #999;
-  border-radius: 3px;
-}
-
-</style>
+</template>
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -0,0 +1,18 @@
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+    const user = useUser()
+    const signInPath = '/account/signin'
+    if (!user.value && to.path !== signInPath) {
+        const { error, data} = await fetchUser()
+        if (error.value) {
+            return navigateTo({
+                path: signInPath,
+                query: {
+                    callback: encodeURIComponent(to.fullPath)
+                }
+            })
+        } else {
+            setUser(data.value)
+        }
+    }
+})
--- a/nginx.conf
+++ b/nginx.conf
@@ -2,9 +2,9 @@ server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
+    root   /app;

    location / {
-        root   /app;
        index  index.html;

        try_files $uri $uri/ /index.html;
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,9 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 const appName = process.env.NUXT_PUBLIC_APP_NAME ?? 'ChatGPT UI'
-
 export default defineNuxtConfig({
-    dev: false,
-    ssr: false,
+    debug: process.env.NODE_ENV !== 'production',
+    ssr: process.env.SSR !== 'false',
    app: {
        head: {
            title: appName,
@@ -28,7 +27,7 @@ export default defineNuxtConfig({
    modules: [
        '@kevinmarrec/nuxt-pwa',
        '@nuxtjs/color-mode',
-        '@nuxtjs/i18n',
+        '@nuxtjs/i18n'
    ],
    pwa: {
        manifest: {
@@ -60,23 +59,19 @@ export default defineNuxtConfig({
                iso: 'ru-RU',
                name: 'Русский',
                file: 'ru-RU.json',
+            },
+            {
+                code: 'fr',
+                iso: 'fr-FR',
+                name: 'Français',
+                file: 'fr-FR.json',
            }
        ],
        lazy: true,
        langDir: 'lang',
-        defaultLocale: 'en',
+        defaultLocale: process.env.DEFAULT_LOCALE || 'en',
        vueI18n: {
            fallbackLocale: 'en',
        },
-    },
-    nitro: {
-        devProxy: {
-            "/api": {
-                target: process.env.NUXT_DEV_SERVER ?? 'http://localhost:8000/api',
-                prependPath: true,
-                changeOrigin: true,
-            }
-
-        }
-    },
+    }
 })
--- a/package.json
+++ b/package.json
@@ -5,21 +5,27 @@
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
  },
  "devDependencies": {
    "@kevinmarrec/nuxt-pwa": "^0.17.0",
+    "@nuxt/devtools": "^0.4.0",
    "@nuxtjs/color-mode": "^3.2.0",
    "@nuxtjs/i18n": "^8.0.0-beta.9",
    "material-design-icons-iconfont": "^6.7.0",
-    "nuxt": "^3.2.0"
+    "nuxt": "^3.4.0",
+    "vuepress": "^2.0.0-beta.61"
  },
  "dependencies": {
    "@microsoft/fetch-event-source": "^2.0.1",
    "copy-to-clipboard": "^3.3.3",
    "highlight.js": "^11.7.0",
+    "http-proxy-middleware": "3.0.0-beta.1",
    "is-mobile": "^3.1.1",
    "markdown-it": "^13.0.1",
+    "markdown-it-mathjax3": "^4.3.2",
    "nanoid": "^4.0.1",
    "vuetify": "^3.0.6"
  },
--- a/pages/account/onboarding.vue
+++ b/pages/account/onboarding.vue
@@ -7,6 +7,7 @@ const route = useRoute()
 const sending = ref(false)
 const resent = ref(false)
 const errorMsg = ref(null)
+const user = useUser()
 const resendEmail = async () => {
  errorMsg.value = null
  sending.value = true
@@ -46,15 +47,15 @@ onNuxtReady(() => {
          >
            <div class="text-center">
              <div v-if="route.query.email_verification_required && route.query.email_verification_required === 'none'">
-                <h2 class="text-h4">Your registration is successful</h2>
+                <h2 class="text-h4">{{$t('Your registration is successful')}}</h2>
                <p class="mt-5">
-                  You can now <NuxtLink to="/account/signin">login</NuxtLink> to your account.
+                  {{$t('You can now')}} <NuxtLink to="/account/signin">{{$t('signIn')}}</NuxtLink> {{$t('to your account.')}}
                </p>
              </div>
              <div v-else>
                <h2 class="text-h4">Verify your email</h2>
                <p class="mt-5">
-                  We've sent a verification email to <strong>{{ $auth.user.email }}</strong>. <br>
+                  We've sent a verification email to <strong>{{ user.email }}</strong>. <br>
                  Please check your inbox and click the link to verify your email address.
                </p>
                <p v-if="errorMsg"
--- a/pages/account/resetPassword.vue
+++ b/pages/account/resetPassword.vue
@@ -24,7 +24,6 @@ const fieldErrors = ref({
  new_password1: '',
  new_password2: '',
 })
-const { $auth } = useNuxtApp()
 const errorMsg = ref(null)
 const resetForm = ref(null)
 const valid = ref(true)
@@ -37,7 +36,7 @@ const signOut = async () => {
    method: 'POST'
  })
  if (!error.value) {
-    await $auth.logout()
+    await logout()
  }
 }

--- a/pages/account/signin.vue
+++ b/pages/account/signin.vue
@@ -3,6 +3,7 @@
      style="height: 100vh"
  >
    <v-container>
+      <SettingsLanguages/>
      <v-row>
        <v-col
            sm="9"
@@ -14,20 +15,20 @@
              class="mt-15"
              elevation="0"
          >
-            <div class="text-center text-h4">Sign in</div>
+            <div class="text-center text-h4">{{$t('signIn')}}</div>
            <v-card-text>
              <v-form ref="signInForm">
                <v-text-field
                    v-model="formData.username"
                    :rules="formRules.username"
-                    label="User name"
+                    :label="$t('username')"
                    variant="underlined"
                    clearable
                ></v-text-field>
                <v-text-field
                    v-model="formData.password"
                    :rules="formRules.password"
-                    label="Password"
+                    :label="$t('password')"
                    variant="underlined"
                    @keyup.enter="submit"
                    clearable
@@ -35,7 +36,6 @@
                    :append-inner-icon="passwordInputType === 'password' ? 'visibility' : 'visibility_off'"
                    @click:append-inner="passwordInputType = passwordInputType === 'password' ? 'text' : 'password'"
                ></v-text-field>
-
              </v-form>

              <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
@@ -47,14 +47,14 @@
                    @click="navigateTo('/account/signup')"
                    variant="text"
                    color="primary"
-                >Create account</v-btn>
+                >{{$t('createAccount')}}</v-btn>

                <v-btn
                    color="primary"
                    :loading="submitting"
                    @click="submit"
                    size="large"
-                >Submit</v-btn>
+                >{{$t('signIn')}}</v-btn>
              </div>

            </v-card-text>
@@ -67,6 +67,8 @@
 </template>

 <script setup>
+import {useUser} from "~/composables/states";
+const { $i18n } = useNuxtApp()
 definePageMeta({
  layout: 'vuetify-app'
 })
@@ -76,16 +78,14 @@ const formData = ref({
 })
 const formRules = ref({
  username: [
-      v => !!v || 'Username is required'
+      v => !!v || $i18n.t('Username is required')
  ],
  password: [
-      v => !!v || 'Password is required'
+      v => !!v || $i18n.t('Password is required')
  ]
 })
-const { $auth } = useNuxtApp()
 const errorMsg = ref(null)
 const signInForm = ref(null)
-const valid = ref(true)
 const submitting = ref(false)
 const route = useRoute()
 const passwordInputType = ref('password')
@@ -99,6 +99,7 @@ const submit = async () => {
      method: 'POST',
      body: JSON.stringify(formData.value)
    })
+    submitting.value = false
    if (error.value) {
      if (error.value.status === 400) {
        if (error.value.data.non_field_errors) {
@@ -108,10 +109,10 @@ const submit = async () => {
        errorMsg.value = 'Something went wrong. Please try again.'
      }
    } else {
-      $auth.setUser(data.value.user)
-      navigateTo(route.query.callback || '/')
+      setUser(data.value.user)
+      const callback = route.query.callback ? decodeURIComponent(route.query.callback) : '/'
+      await navigateTo(callback)
    }
-    submitting.value = false
  }
 }

--- a/pages/account/signup.vue
+++ b/pages/account/signup.vue
@@ -1,15 +1,15 @@
 <script setup>
+const { $i18n } = useNuxtApp()
 definePageMeta({
  layout: 'vuetify-app'
 })

-const { $auth } = useNuxtApp()
-
 const formData = ref({
  username: '',
  email: '',
  password1: '',
  password2: '',
+  code:'',
 })

 const fieldErrors = ref({
@@ -17,26 +17,30 @@ const fieldErrors = ref({
  email: '',
  password1: '',
  password2: '',
+  code:'',
 })

 const formRules = ref({
  username: [
-    v => !!v || 'Please enter your username',
-    v => v.length >= 4 || 'Username must be at least 4 characters'
+    v => !!v || $i18n.t('Please enter your username'),
+    v => v.length >= 4 || $i18n.t('Username must be at least 4 characters')
  ],
  email: [
-    v => !!v || 'Please enter your e-mail address',
-    v => /.+@.+\..+/.test(v) || 'E-mail address must be valid'
+    v => !!v || $i18n.t('Please enter your e-mail address'),
+    v => /.+@.+\..+/.test(v) || $i18n.t('E-mail address must be valid')
  ],
  password1: [
-    v => !!v || 'Please enter your password',
-    v => v.length >= 8 || 'Password must be at least 8 characters'
+    v => !!v || $i18n.t('Please enter your password'),
+    v => v.length >= 8 || $i18n.t('Password must be at least 8 characters')
  ],
  password2: [
-    v => !!v || 'Please confirm your password',
-    v => v.length >= 8 || 'Password must be at least 8 characters',
-    v => v === formData.value.password1 || 'Confirm password must match password'
-  ]
+    v => !!v || $i18n.t('Please confirm your password'),
+    v => v.length >= 8 || $i18n.t('Password must be at least 8 characters'),
+    v => v === formData.value.password1 || $i18n.t('Confirm password must match password')
+  ],
+  code: [
+    v => !!v || $i18n.t('Please enter your code'),
+  ],
 })

 const submitting = ref(false)
@@ -60,21 +64,21 @@ const submit = async () => {
      if (error.value.status === 400) {
        for (const key in formData.value) {
          if (error.value.data[key]) {
-            fieldErrors.value[key] = error.value.data[key][0]
+            fieldErrors.value[key] = $i18n.t(error.value.data[key][0])
          }
        }
        if (error.value.data.non_field_errors) {
-          errorMsg.value = error.value.data.non_field_errors[0]
+          errorMsg.value = $i18n.t(error.value.data.non_field_errors[0])
        }
      } else {
        if (error.value.data.detail) {
-          errorMsg.value = error.value.data.detail
+          errorMsg.value = $i18n.t(error.value.data.detail)
        } else {
          errorMsg.value = 'Something went wrong. Please try again.'
        }
      }
    } else {
-      $auth.setUser(data.value.user)
+      setUser(data.value.user)
      navigateTo('/account/onboarding?email_verification_required='+data.value.email_verification_required)
    }

@@ -103,14 +107,14 @@ const handleFieldUpdate = (field) => {
              class="mt-15"
              elevation="0"
          >
-            <div class="text-center text-h4">Create your account</div>
+            <div class="text-center text-h4">{{$t('Create your account')}}</div>
            <v-card-text>
              <v-form ref="signUpForm" class="mt-5">
                <v-text-field
                    v-model="formData.username"
                    :rules="formRules.username"
                    :error-messages="fieldErrors.username"
-                    label="User name"
+                    :label="$t('username')"
                    variant="underlined"
                    @update:modelValue="handleFieldUpdate('username')"
                    clearable
@@ -120,7 +124,7 @@ const handleFieldUpdate = (field) => {
                    v-model="formData.email"
                    :rules="formRules.email"
                    :error-messages="fieldErrors.email"
-                    label="Email"
+                    :label="$t('email')"
                    variant="underlined"
                    @update:modelValue="handleFieldUpdate('email')"
                    clearable
@@ -130,7 +134,7 @@ const handleFieldUpdate = (field) => {
                    v-model="formData.password1"
                    :rules="formRules.password1"
                    :error-messages="fieldErrors.password1"
-                    label="Password"
+                    :label="$t('password')"
                    variant="underlined"
                    @update:modelValue="handleFieldUpdate('password1')"
                    clearable
@@ -140,12 +144,21 @@ const handleFieldUpdate = (field) => {
                    v-model="formData.password2"
                    :rules="formRules.password2"
                    :error-messages="fieldErrors.password2"
-                    label="Confirm password"
+                    :label="$t('confirmPassword')"
                    variant="underlined"
                    @update:modelValue="handleFieldUpdate('password2')"
                    clearable
                ></v-text-field>

+<!--                <v-text-field-->
+<!--                    v-model="formData.code"-->
+<!--                    :rules="formRules.code"-->
+<!--                    :label="$t('invitation code')"-->
+<!--                    variant="underlined"-->
+<!--                    @keyup.enter="submit"-->
+<!--                    clearable-->
+<!--                ></v-text-field>-->
+
              </v-form>

              <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
@@ -157,14 +170,14 @@ const handleFieldUpdate = (field) => {
                    @click="navigateTo('/account/signin')"
                    variant="text"
                    color="primary"
-                >Sign in instead</v-btn>
+                >{{$t('Sign in instead')}}</v-btn>

                <v-btn
                    size="large"
                    color="primary"
                    :loading="submitting"
                    @click="submit"
-                >Submit</v-btn>
+                >{{$t('signUp')}}</v-btn>
              </div>

            </v-card-text>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,8 +4,11 @@ definePageMeta({
  path: '/:id?',
  keepalive: true
 })
+
+const { $i18n } = useNuxtApp()
+const runtimeConfig = useRuntimeConfig()
+const drawer = useDrawer()
 const route = useRoute()
-const currentConversation = useConversation()
 const conversation = ref(getDefaultConversationData())

 const loadConversation = async () => {
@@ -22,20 +25,67 @@ const loadMessage = async () => {
  }
 }

-onActivated(async () => {
+const createNewConversation = () => {
+  if (route.path !== '/') {
+    return navigateTo('/?new')
+  }
+  conversation.value = Object.assign(getDefaultConversationData(), {
+    topic: $i18n.t('newConversation')
+  })
+}
+
+
+onMounted(async () => {
  if (route.params.id) {
    conversation.value.loadingMessages = true
    await loadConversation()
    await loadMessage()
    conversation.value.loadingMessages = false
-  } else {
-    conversation.value = getDefaultConversationData()
  }
-  currentConversation.value = Object.assign({}, conversation.value)
+})
+
+
+const navTitle = computed(() => {
+  if (conversation.value && conversation.value.topic !== null) {
+    return conversation.value.topic === '' ? $i18n.t('defaultConversationTitle') : conversation.value.topic
+  }
+  return runtimeConfig.public.appName
+})
+
+onActivated(async () => {
+  if (route.path === '/' && route.query.new !== undefined) {
+    createNewConversation()
+  }
 })

 </script>

 <template>
+  <v-app-bar>
+    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+    <v-toolbar-title>{{ navTitle }}</v-toolbar-title>
+
+    <v-spacer></v-spacer>
+
+    <v-btn
+        :title="$t('newConversation')"
+        icon="add"
+        @click="createNewConversation"
+        class="d-md-none"
+    ></v-btn>
+    <v-btn
+        variant="outlined"
+        class="text-none d-none d-md-block"
+        @click="createNewConversation"
+    >
+      {{ $t('newConversation') }}
+    </v-btn>
+
+  </v-app-bar>
+
+  <v-main>
+    <Welcome v-if="!route.params.id && conversation.messages.length === 0" />
    <Conversation :conversation="conversation" />
+  </v-main>
 </template>
--- a/plugins/auth.js
+++ b/plugins/auth.js
@@ -1,71 +0,0 @@
-
-const AUTH_ROUTE = {
-    home: '/',
-    login: '/account/signin',
-}
-
-const ENDPOINTS = {
-    login: {
-        url: '/api/account/login/'
-    },
-    user: {
-        url: '/api/account/user/'
-    }
-}
-
-
-export default defineNuxtPlugin(() => {
-
-    class Auth {
-        constructor() {
-            this.loginIn = useState('loginIn', () => false)
-            this.user = useState('user')
-        }
-
-        async logout () {
-            this.loginIn.value = false
-            this.user.value = null
-            await this.redirectToLogin()
-        }
-
-        setUser (user) {
-            this.user = user
-            this.loginIn.value = true
-        }
-
-        async fetchUser () {
-            const { data, error } = await useFetch(ENDPOINTS.user.url, {
-                // withCredentials: true
-            })
-            if (!error.value) {
-                this.setUser(data.value)
-                return null
-            }
-            return error
-        }
-
-        async redirectToLogin (callback) {
-            return await navigateTo(
-                AUTH_ROUTE.login + '?callback=' + encodeURIComponent(callback || AUTH_ROUTE.home)
-            )
-        }
-
-    }
-
-    const auth = new Auth()
-
-    addRouteMiddleware('auth', async (to, from) => {
-        if (!auth.loginIn.value) {
-            const error = await auth.fetchUser()
-            if (error) {
-                return await auth.redirectToLogin(to.fullPath)
-            }
-        }
-    })
-
-    return {
-        provide: {
-            auth
-        }
-    }
-})
--- a/plugins/initApiKey.js
+++ b/plugins/initApiKey.js
@@ -0,0 +1,6 @@
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.hook('app:created', async () => {
+        const apiKey = useApiKey()
+        apiKey.value = getStoredApiKey()
+    })
+})
--- a/plugins/settings.js
+++ b/plugins/settings.js
@@ -0,0 +1,24 @@
+const transformData = (list) => {
+    const result = {};
+    for (let i = 0; i < list.length; i++) {
+        const item = list[i];
+        result[item.name] = item.value;
+    }
+    return result;
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.hook('app:created', async () => {
+        let settings = {}
+
+        const { data, error } = await useAuthFetch('/api/chat/settings/', {
+            method: 'GET',
+        })
+
+        if (!error.value) {
+            settings = transformData(data.value)
+        }
+
+        nuxtApp.provide('settings', settings)
+    })
+})
--- a/server/middleware/apiProxy.ts
+++ b/server/middleware/apiProxy.ts
@@ -0,0 +1,14 @@
+import { createProxyMiddleware } from 'http-proxy-middleware'
+export default defineEventHandler(async (event) => {
+    await new Promise((resolve, reject) => {
+        createProxyMiddleware({
+            target: process.env.SERVER_DOMAIN,
+            pathFilter: '/api',
+        })(event.node.req, event.node.res, (err) => {
+            if (err)
+                reject(err)
+            else
+                resolve(true)
+        })
+    })
+})
--- a/static.Dockerfile
+++ b/static.Dockerfile
@@ -0,0 +1,22 @@
+FROM node:18-alpine3.16 as builder
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+
+RUN yarn install
+
+COPY . .
+
+RUN rm -r server && SSR=false yarn generate
+
+
+FROM nginx:1.22-alpine
+
+WORKDIR /app
+
+COPY --from=builder /app/.output/public .
+
+COPY nginx.conf /etc/nginx/templates/default.conf.template
+
+EXPOSE 80
--- a/utils/helper.js
+++ b/utils/helper.js
@@ -3,7 +3,7 @@ export const getDefaultConversationData = () => {
    const { $i18n } = useNuxtApp()
    return {
        id: null,
-        topic: $i18n.t('defaultConversationTitle'),
+        topic: null,
        messages: [],
        loadingMessages: false,
    }
@@ -17,11 +17,6 @@ export const getConversations = async () => {
    return []
 }

-export const createNewConversation = () => {
-    navigateTo('/')
-}
-
-
 export const addConversation = (conversation) => {
    const conversations = useConversations()
    conversations.value = [conversation, ...conversations.value]
@@ -29,12 +24,14 @@ export const addConversation = (conversation) => {


 export const genTitle = async (conversationId) => {
-    const { $i18n } = useNuxtApp()
+    const { $i18n, $settings } = useNuxtApp()
+    const openaiApiKey = useApiKey()
    const { data, error } = await useAuthFetch('/api/gen_title/', {
        method: 'POST',
        body: {
            conversationId: conversationId,
-            prompt: $i18n.t('genTitlePrompt')
+            prompt: $i18n.t('genTitlePrompt'),
+            openaiApiKey: $settings.open_api_key_setting === 'True' ? openaiApiKey.value : null,
        }
    })
    if (!error.value) {
@@ -49,21 +46,17 @@ export const genTitle = async (conversationId) => {
    return null
 }

-const transformData = (list) => {
-    const result = {};
-    for (let i = 0; i < list.length; i++) {
-        const item = list[i];
-        result[item.name] = item.value;
-    }
-    return result;
+export const fetchUser = async () => {
+    return useMyFetch('/api/account/user/')
 }

-export const loadSettings = async () => {
-    const settings = useSettings()
-    const { data, error } = await useAuthFetch('/api/chat/settings/', {
-        method: 'GET'
-    })
-    if (!error.value) {
-        settings.value = transformData(data.value)
-    }
+export const setUser = (userData) => {
+    const user = useUser()
+    user.value = userData
+}
+
+export const logout = () => {
+    const user = useUser()
+    user.value = null
+    return navigateTo('/account/signin');
 }
--- a/utils/localStorage.js
+++ b/utils/localStorage.js
@@ -1,6 +1,6 @@
-import {MODELS} from "~/utils/enums";

 const get = (key) => {
+    if (process.server) return
    let val = localStorage.getItem(key)
    if (val) {
        val = JSON.parse(val)
@@ -9,6 +9,7 @@ const get = (key) => {
 }

 const set = (key, val) => {
+    if (process.server) return
    localStorage.setItem(key, JSON.stringify(val))
 }

--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Rafi	01ea5f599f	feat(attachment): Support message attachments	2023-04-19 23:28:48 +08:00
Rafi	6c2faf1039	feat(editor): Add a file upload component.	2023-04-19 18:11:07 +08:00
Rafi	31dc740554	feat(editor): Encapsulate the tools in the editor toolbar as independent components.	2023-04-19 16:52:41 +08:00
Rafi	7353614472	fix(signup): some translation quoting error	2023-04-19 08:05:04 +08:00
Rafi	973338c9fb	Temporarily remove the invitation code input in the registration because the backend does not support it yet.	2023-04-19 07:50:36 +08:00
Rafi	191409209b	feat(md) Display the borders of the table.	2023-04-18 23:10:09 +08:00
Rafi	04c52cba88	feat(msg card): Optimize message content layout and support rendering mathematical formulas.	2023-04-18 19:59:32 +08:00
Rafi	1d2ebb30bb	feat(msg card): Optimize message content layout and support rendering mathematical formulas.	2023-04-18 19:55:23 +08:00
Rafi	53d639a9f6	feat(lang): Added French translation	2023-04-18 18:15:51 +08:00
Rafi	47951851c5	fix(gen_title) add `openaiApiKey` to request body	2023-04-18 14:25:21 +08:00
Rafi	f1b5f8cf3c	Add env var `DEBUG` to docker-compose.yml	2023-04-18 11:08:29 +08:00
Rafi	e6a8868f6c	docs: Frugal Mode Control	2023-04-18 10:44:35 +08:00
Rafi	e023a13bbc	feat(editor): Make the editor automatically focus after selecting a prompt.	2023-04-18 10:37:16 +08:00
Rafi	69dacca6c5	feat(nuxt): Upgrade Nuxt to version 3.4.	2023-04-18 10:29:27 +08:00
Rafi	76b865646c	feat(settings): Add independent plugin to put loading system configuration in the lifecycle hook "app:created".	2023-04-18 10:29:09 +08:00
Wong Saang	9fe7943152	Merge pull request #157 from CheaterScript/main feat: sinicize signup and signin pages.	2023-04-17 09:47:45 +08:00
AI&I	534ecb132c	feat: 更新邀请码功能	2023-04-17 04:37:54 +08:00
AI&I	04fa7394f6	feat: add invitation code.	2023-04-17 04:07:04 +08:00
AI&I	b9ed2fd785	feat: add default language config.	2023-04-17 03:52:29 +08:00
AI&I	e24a99481e	feat: sinicize signup and signin pages.	2023-04-17 03:30:22 +08:00
AI&I	405a4582b5	feat: add language setting in signin.	2023-04-17 03:05:58 +08:00
Rafi	09f470111e	feat(shell): add pull command before up	2023-04-15 20:57:55 +08:00
Rafi	ba604e8389	docs: modify API key configuration instructions.	2023-04-15 13:31:29 +08:00
Rafi	d9caaefdef	updated docker-compose.yml	2023-04-14 12:52:06 +08:00
Rafi	a3359be316	Merge remote-tracking branch 'origin/main' into main	2023-04-14 12:21:51 +08:00
Rafi	880b111001	feat(shell) Add DATABASE_URL to deployment.sh	2023-04-14 12:21:31 +08:00
Wong Saang	918b87979c	Create FUNDING.yml	2023-04-12 18:05:14 +08:00
Rafi	385bcaf603	docs: updated workflow	2023-04-12 14:56:00 +08:00
Rafi	81e120ac47	docs: updated	2023-04-12 14:46:18 +08:00
Rafi	1320d69cfb	docs: Adjust directory structure	2023-04-12 14:23:32 +08:00
Rafi	208376a418	update readme	2023-04-11 22:36:24 +08:00
Rafi	6e3a89468c	Use yarn instead of pnpm to build the document.	2023-04-11 22:27:13 +08:00
Rafi	f953704831	Add document workflow.	2023-04-11 22:16:15 +08:00
Rafi	1d7098a0cb	Use Vuepress to generate a static site for docs.	2023-04-11 22:08:16 +08:00
Rafi	e9f554dc4e	Add WORKER_TIMEOUT info to readme	2023-04-11 17:51:06 +08:00
Rafi	55279def0d	Add Dockerfile and workflow for static hosting image.	2023-04-11 15:32:06 +08:00
Rafi	fa14276d0a	Fix: Resending message when the visibility of the browser page changes , which causes slowdown or failure to receive messages	2023-04-11 10:30:12 +08:00
Rafi	8718dc4ed1	using SERVER_DOMAIN at proxy target	2023-04-10 18:15:18 +08:00
Rafi	fe814acfd9	using http-proxy-middleware	2023-04-10 18:05:07 +08:00
Rafi	1e4f14c9b7	add user guide to readme	2023-04-07 19:39:14 +08:00
Rafi	137ca5ae1a	Support Frugal Mode	2023-04-06 18:00:24 +08:00
Rafi	8a9b705b99	Fix the issue where useSettings does not work in SSR mode.	2023-04-06 16:07:46 +08:00
Rafi	82c1811034	Fix the issue of updating the number to a string type when clicking the plus or minus button in the input box when setting the model parameters.	2023-04-06 15:08:35 +08:00
Rafi	0d6aef6872	update readme	2023-04-06 10:54:36 +08:00
Rafi	3f3ab8c33b	Fix the issue of unable to copy code blocks in new messages.	2023-04-06 10:17:15 +08:00
Rafi	6522536291	fix some known bugs	2023-04-06 09:56:26 +08:00
Rafi	2bca5a032c	fix hydration text missing	2023-04-05 23:27:44 +08:00
Rafi	53460bd891	set default footer width	2023-04-05 23:20:31 +08:00
Rafi	fb9e8b8c7d	api proxy	2023-04-05 23:17:14 +08:00
Rafi	21dc2b9236	fix Dockerfile	2023-04-04 19:43:20 +08:00
Rafi	1a6bf1d239	Improve the conversation process	2023-04-04 19:23:57 +08:00
Rafi	3e3283029d	Improve the conversation process	2023-04-04 19:16:07 +08:00
Rafi	16c9b0e230	...	2023-04-03 23:37:50 +08:00
Rafi	836df995d0	Improve login and authentication methods to adapt to the SSR mode.	2023-04-03 22:04:52 +08:00
Rafi	5b9d52b177	support ssr	2023-04-03 18:19:39 +08:00