Added a Sign-out button

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>
-  <v-textarea
+  <div
-      v-model="message"
+      class="flex-grow-1 d-flex align-center justify-space-between"
-      :label="$t('writeAMessage')"
+  >
-      :placeholder="hint"
+    <v-textarea
-      rows="1"
+        v-model="message"
-      :auto-grow="autoGrow"
+        :label="$t('writeAMessage')"
-      :disabled="disabled"
+        :placeholder="hint"
-      :loading="loading"
+        :rows="rows"
-      :hide-details="true"
+        max-rows="8"
-      append-inner-icon="send"
+        :auto-grow="autoGrow"
-      @keyup.enter.exact="enterOnly"
+        :disabled="disabled"
-      @click:appendInner="clickSendBtn"
+        :loading="loading"
-  ></v-textarea>
+        :hide-details="true"
+        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()
       }

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,24 +298,6 @@ 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>

nuxt.config.ts

@@ -53,7 +53,7 @@ export default defineNuxtConfig({
             periodicSyncForUpdates: 20,
         },
         devOptions: {
-            enabled: true,
+            enabled: false,
             type: 'module',
         }
     },
@@ -83,7 +83,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,
             }

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>