Added a new message action: delete

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()
       }

lang/en-US.json

@@ -29,6 +29,7 @@
     "me": "Me",
     "ai": "AI"
   },
+  "edit": "Edit",
   "copy": "Copy",
   "copied": "Copied",
   "delete": "Delete",

lang/zh-CN.json

@@ -29,6 +29,7 @@
     "me": "我",
     "ai": "AI"
   },
+  "edit": "编辑",
   "copy": "复制",
   "copied": "已复制",
   "delete": "删除",

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>