Import the @kevinmarrec/nuxt-pwa module to fix the related bugs of PWA feature.

README.md

@@ -108,6 +108,7 @@ services:
       - 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

app.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <VitePwaManifest />
     <NuxtLoadingIndicator />
     <NuxtLayout>
       <NuxtPage />

components/MessageActions.vue

@@ -9,6 +9,14 @@ const props = defineProps({
   messageIndex: {
     type: Number,
     required: true
+  },
+  usePrompt: {
+    type: Function,
+    required: true
+  },
+  deleteMessage: {
+    type: Function,
+    required: true
   }
 })
 
@@ -24,6 +32,10 @@ const copyMessage = () => {
   showSnackbar('Copied!')
 }
 
+const editMessage = () => {
+  props.usePrompt(props.message.message)
+}
+
 const deleteMessage = async () => {
   const { data, error } = await useAuthFetch(`/api/chat/messages/${props.message.id}/`, {
     method: 'DELETE'
@@ -53,14 +65,22 @@ const deleteMessage = async () => {
     <v-list>
       <v-list-item
           @click="copyMessage()"
+          :title="$t('copy')"
+          prepend-icon="content_copy"
+      >
+      </v-list-item>
+      <v-list-item
+          @click="editMessage()"
+          :title="$t('edit')"
+          prepend-icon="edit"
+      >
+      </v-list-item>
+      <v-list-item
+          @click="deleteMessage()"
+          :title="$t('delete')"
+          prepend-icon="delete"
       >
-        <v-list-item-title>{{ $t('copy') }}</v-list-item-title>
       </v-list-item>
-<!--      <v-list-item-->
-<!--          @click="deleteMessage()"-->
-<!--      >-->
-<!--        <v-list-item-title>{{ $t('delete') }}</v-list-item-title>-->
-<!--      </v-list-item>-->
     </v-list>
   </v-menu>
 

components/MsgEditor.vue

@@ -1,17 +1,29 @@
 <template>
+  <div
+      class="flex-grow-1 d-flex align-center justify-space-between"
+  >
     <v-textarea
         v-model="message"
         :label="$t('writeAMessage')"
         :placeholder="hint"
-      rows="1"
+        :rows="rows"
+        max-rows="8"
         :auto-grow="autoGrow"
         :disabled="disabled"
         :loading="loading"
         :hide-details="true"
-      append-inner-icon="send"
-      @keyup.enter.exact="enterOnly"
-      @click:appendInner="clickSendBtn"
+        clearable
+        variant="outlined"
+        @keydown.enter.exact="enterOnly"
     ></v-textarea>
+    <v-btn
+        :disabled="loading"
+        icon="send"
+        title="Send"
+        class="ml-3"
+        @click="clickSendBtn"
+    ></v-btn>
+  </div>
 </template>
 
 <script>
@@ -39,7 +51,7 @@ export default {
     message(val) {
       const lines = val.split(/\r\n|\r|\n/).length;
       if (lines > 8) {
-        this.rows = lines;
+        this.rows = 8;
         this.autoGrow = false;
       } else {
         this.rows = 1;
@@ -65,7 +77,8 @@ export default {
     clickSendBtn () {
       this.send()
     },
-    enterOnly () {
+    enterOnly (event) {
+      event.preventDefault();
       if (!isMobile()) {
         this.send()
       }

components/settings/Languages.vue

@@ -15,26 +15,23 @@
     </template>
     <v-card>
       <v-toolbar
-          dark
-          color="primary"
       >
         <v-btn
             icon
-            dark
             @click="dialog = false"
         >
-          <v-icon>close</v-icon>
+          <v-icon icon="close"></v-icon>
         </v-btn>
         <v-toolbar-title>{{ $t('language') }}</v-toolbar-title>
         <v-spacer></v-spacer>
-        <!--          <v-toolbar-items>-->
-        <!--            <v-btn-->
-        <!--                variant="text"-->
-        <!--                @click="dialog = false"-->
-        <!--            >-->
-        <!--              Save-->
-        <!--            </v-btn>-->
-        <!--          </v-toolbar-items>-->
+                  <v-toolbar-items>
+                    <v-btn
+                        variant="text"
+                        @click="dialog = false"
+                    >
+                      Save
+                    </v-btn>
+                  </v-toolbar-items>
       </v-toolbar>
       <v-list
       >

deployment.sh

@@ -65,6 +65,6 @@ sudo curl -L "https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/docker
 
 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 -d
+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
 
 echo "Done"

docker-compose.yml

@@ -22,6 +22,7 @@ services:
       - 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

docs/zh/README.md

@@ -106,6 +106,7 @@ services:
       - 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

lang/en-US.json

@@ -29,9 +29,11 @@
     "me": "Me",
     "ai": "AI"
   },
+  "edit": "Edit",
   "copy": "Copy",
   "copied": "Copied",
   "delete": "Delete",
+  "signOut": "Sign out",
   "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.",

lang/zh-CN.json

@@ -29,9 +29,11 @@
     "me": "我",
     "ai": "AI"
   },
+  "edit": "编辑",
   "copy": "复制",
   "copied": "已复制",
   "delete": "删除",
+  "signOut": "退出登录",
   "welcomeScreen": {
     "introduction1": "是一个非官方的ChatGPT客户端，但使用OpenAI的官方API",
     "introduction2": "在使用本客户端之前，您需要一个OpenAI API密钥。",

layouts/default.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {useDisplay} from "vuetify";
 
-const { $i18n } = useNuxtApp()
+const { $i18n, $auth } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
 const colorMode = useColorMode()
 const drawer = ref(null)
@@ -88,6 +88,15 @@ 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()
+  }
+}
+
 onNuxtReady(async () => {
   loadConversations()
 })
@@ -261,6 +270,14 @@ onNuxtReady(async () => {
                 :title="$t('feedback')"
                 @click="feedback"
             ></v-list-item>
+
+            <v-list-item
+                rounded="xl"
+                prepend-icon="logout"
+                :title="$t('signOut')"
+                @click="signOut"
+            ></v-list-item>
+
           </v-list>
         </div>
       </template>
@@ -281,72 +298,12 @@ onNuxtReady(async () => {
           @click="createNewConversion()"
       ></v-btn>
 
-<!--      <v-menu-->
-<!--      >-->
-<!--        <template v-slot:activator="{ props }">-->
-<!--          <v-btn-->
-<!--              v-bind="props"-->
-<!--              icon="help_outline"-->
-<!--              title="Feedback"-->
-<!--          ></v-btn>-->
-<!--        </template>-->
-<!--        <v-list-->
-<!--        >-->
-<!--          <v-list-item-->
-<!--              @click="feedback"-->
-<!--          >-->
-<!--            <v-list-item-title>{{ $t('feedback') }}</v-list-item-title>-->
-<!--          </v-list-item>-->
-<!--        </v-list>-->
-<!--      </v-menu>-->
     </v-app-bar>
 
     <v-main>
       <NuxtPage/>
     </v-main>
 
-    <div>
-      <div
-          v-if="$pwa?.offlineReady || $pwa?.needRefresh"
-          class="pwa-toast"
-          role="alert"
-      >
-        <div class="message">
-          <span v-if="$pwa.offlineReady">
-            App ready to work offline
-          </span>
-          <span v-else>
-            New content available, click on reload button to update.
-          </span>
-        </div>
-        <button
-            v-if="$pwa.needRefresh"
-            @click="$pwa.updateServiceWorker()"
-        >
-          Reload
-        </button>
-        <button @click="$pwa.cancelPrompt()">
-          Close
-        </button>
-      </div>
-      <div
-          v-if="$pwa?.showInstallPrompt && !$pwa?.offlineReady && !$pwa?.needRefresh"
-          class="pwa-toast"
-          role="alert"
-      >
-        <div class="message">
-          <span>
-            Install PWA
-          </span>
-        </div>
-        <button @click="$pwa.install()">
-          Install
-        </button>
-        <button @click="$pwa.cancelInstall()">
-          Cancel
-        </button>
-      </div>
-    </div>
   </v-app>
 </template>
 
@@ -362,26 +319,4 @@ onNuxtReady(async () => {
   border-radius: 3px;
 }
 
-.pwa-toast {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  margin: 16px;
-  padding: 12px;
-  border: 1px solid #8885;
-  border-radius: 4px;
-  z-index: 1;
-  text-align: left;
-  box-shadow: 3px 4px 5px 0 #8885;
-}
-.pwa-toast .message {
-  margin-bottom: 8px;
-}
-.pwa-toast button {
-  border: 1px solid #8885;
-  outline: none;
-  margin-right: 5px;
-  border-radius: 2px;
-  padding: 3px 10px;
-}
 </style>

nuxt.config.ts

@@ -25,36 +25,18 @@ export default defineNuxtConfig({
         'highlight.js/styles/panda-syntax-dark.css',
     ],
     modules: [
-        '@vite-pwa/nuxt',
+        '@kevinmarrec/nuxt-pwa',
         '@nuxtjs/color-mode',
         '@nuxtjs/i18n',
     ],
     pwa: {
-        registerType: 'autoUpdate',
         manifest: {
             name: appName,
             short_name: appName,
-            icons: [
-                {
-                    src: 'icon-black.svg',
-                    sizes: '900x900',
-                    purpose: 'any maskable',
-                }
-            ],
+            description: 'A ChatGPT web Client'
         },
         workbox: {
-            navigateFallback: '/',
-            globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
-        },
-        client: {
-            installPrompt: true,
-            // you don't need to include this: only for testing purposes
-            // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
-            periodicSyncForUpdates: 20,
-        },
-        devOptions: {
-            enabled: true,
-            type: 'module',
+            enabled: true
         }
     },
     i18n: {
@@ -83,7 +65,7 @@ export default defineNuxtConfig({
     nitro: {
         devProxy: {
             "/api": {
-                target: "http://localhost:8000/api",
+                target: process.env.NUXT_DEV_SERVER ?? 'http://localhost:8000/api',
                 prependPath: true,
                 changeOrigin: true,
             }

package.json

@@ -8,6 +8,7 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
+    "@kevinmarrec/nuxt-pwa": "^0.17.0",
     "@nuxtjs/color-mode": "^3.2.0",
     "@nuxtjs/i18n": "^8.0.0-beta.9",
     "material-design-icons-iconfont": "^6.7.0",
@@ -15,7 +16,6 @@
   },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@vite-pwa/nuxt": "^0.0.7",
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",
     "is-mobile": "^3.1.1",

pages/account/onboarding.vue

@@ -45,8 +45,15 @@ onNuxtReady(() => {
               elevation="0"
           >
             <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>
+                <p class="mt-5">
+                  You can now <NuxtLink to="/account/signin">login</NuxtLink> to your account.
+                </p>
+              </div>
+              <div v-else>
                 <h2 class="text-h4">Verify your email</h2>
-              <p class="text-body-2 mt-5">
+                <p class="mt-5">
                   We've sent a verification email to <strong>{{ $auth.user.email }}</strong>. <br>
                   Please check your inbox and click the link to verify your email address.
                 </p>
@@ -64,6 +71,7 @@ onNuxtReady(() => {
                   {{ resent ? 'Resent' : 'Resend email'}}
                 </v-btn>
               </div>
+            </div>
           </v-card>
         </v-col>
       </v-row>

pages/account/signup.vue

@@ -75,7 +75,7 @@ const submit = async () => {
       }
     } else {
       $auth.setUser(data.value.user)
-      navigateTo('/account/onboarding')
+      navigateTo('/account/onboarding?email_verification_required='+data.value.email_verification_required)
     }
 
     submitting.value = false

pages/index.vue

@@ -181,6 +181,8 @@ const deleteMessage = (index) => {
                 v-if="!message.is_bot"
                 :message="message"
                 :message-index="index"
+                :use-prompt="usePrompt"
+                :delete-message="deleteMessage"
             />
             <v-card
                 :color="message.is_bot ? '' : 'primary'"
@@ -195,6 +197,8 @@ const deleteMessage = (index) => {
                 v-if="message.is_bot"
                 :message="message"
                 :message-index="index"
+                :use-prompt="usePrompt"
+                :delete-message="deleteMessage"
             />
           </div>
         </v-col>