feat: Message actions

components/MessageActions.vue

@@ -0,0 +1,78 @@
+<script setup>
+import copy from 'copy-to-clipboard'
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true
+  },
+  messageIndex: {
+    type: Number,
+    required: true
+  }
+})
+
+const snackbar = ref(false)
+const snackbarText = ref('')
+const showSnackbar = (text) => {
+  snackbarText.value = text
+  snackbar.value = true
+}
+
+const copyMessage = () => {
+  copy(props.message.message)
+  showSnackbar('Copied!')
+}
+
+const deleteMessage = async () => {
+  const { data, error } = await useAuthFetch(`/api/chat/messages/${props.message.id}/`, {
+    method: 'DELETE'
+  })
+  if (!error.value) {
+    this.$emit('deleteMessage', props.messageIndex)
+    showSnackbar('Deleted!')
+  }
+  showSnackbar('Delete failed')
+}
+
+</script>
+
+<template>
+  <v-menu
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          v-bind="props"
+          icon
+          variant="text"
+          class="mx-1"
+      >
+        <v-icon icon="more_horiz"></v-icon>
+      </v-btn>
+    </template>
+    <v-list>
+      <v-list-item
+          @click="copyMessage()"
+      >
+        <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>
+
+  <v-snackbar
+      v-model="snackbar"
+      location="top"
+      timeout="2000"
+  >
+    {{ snackbarText }}
+  </v-snackbar>
+</template>
+
+<style scoped>
+
+</style>

lang/en-US.json

@@ -29,6 +29,9 @@
     "me": "Me",
     "ai": "AI"
   },
+  "copy": "Copy",
+  "copied": "Copied",
+  "delete": "Delete",
   "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,6 +29,9 @@
     "me": "我",
     "ai": "AI"
   },
+  "copy": "复制",
+  "copied": "已复制",
+  "delete": "删除",
   "welcomeScreen": {
     "introduction1": "是一个非官方的ChatGPT客户端，但使用OpenAI的官方API",
     "introduction2": "在使用本客户端之前，您需要一个OpenAI API密钥。",

pages/index.vue

@@ -6,6 +6,7 @@ definePageMeta({
 })
 import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
 import { nextTick } from 'vue'
+import MessageActions from "~/components/MessageActions.vue";
 
 const { $i18n, $auth } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
@@ -155,6 +156,10 @@ const usePrompt = (prompt) => {
   editor.value.usePrompt(prompt)
 }
 
+const deleteMessage = (index) => {
+  currentConversation.value.messages.splice(index, 1)
+}
+
 </script>
 
 <template>
@@ -169,9 +174,14 @@ const usePrompt = (prompt) => {
             cols="12"
         >
           <div
-              class="d-flex"
+              class="d-flex align-center"
-              :class="message.is_bot ? 'justify-start mr-16' : 'justify-end ml-16'"
+              :class="message.is_bot ? 'justify-start' : 'justify-end'"
           >
+            <MessageActions
+                v-if="!message.is_bot"
+                :message="message"
+                :message-index="index"
+            />
             <v-card
                 :color="message.is_bot ? '' : 'primary'"
                 rounded="lg"
@@ -180,18 +190,12 @@ const usePrompt = (prompt) => {
               <v-card-text>
                 <MsgContent :content="message.message" />
               </v-card-text>
-
-<!--              <v-card-actions-->
-<!--                  v-if="message.is_bot"-->
-<!--              >-->
-<!--                <v-spacer></v-spacer>-->
-<!--                <v-tooltip text="Copy">-->
-<!--                  <template v-slot:activator="{ props }">-->
-<!--                    <v-btn v-bind="props" icon="content_copy"></v-btn>-->
-<!--                  </template>-->
-<!--                </v-tooltip>-->
-<!--              </v-card-actions>-->
             </v-card>
+            <MessageActions
+                v-if="message.is_bot"
+                :message="message"
+                :message-index="index"
+            />
           </div>
         </v-col>
       </v-row>