feat: 优化删除功能

src/views/chat/components/Message/Text.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import { NDropdown } from 'naive-ui'
+import { computed } from 'vue'
-import { computed, h } from 'vue'
 import { marked } from 'marked'
 import includeCode from '@/utils/functions/includeCode'
-import { SvgIcon } from '@/components/common'
 
 interface Props {
   inversion?: boolean
@@ -12,45 +10,8 @@ interface Props {
   loading?: boolean
 }
 
-interface Emit {
-  (ev: 'copy'): void
-  (ev: 'delete'): void
-}
-
 const props = defineProps<Props>()
 
-const emit = defineEmits<Emit>()
-
-const options = [
-  {
-    label: 'Copy',
-    key: 'copy',
-    icon: renderIcon('ri:file-copy-2-line'),
-  },
-  {
-    label: 'Delete',
-    key: 'delete',
-    icon: renderIcon('ri:delete-bin-6-line'),
-  },
-]
-
-function renderIcon(icon: string) {
-  return () => {
-    return h(SvgIcon, { icon })
-  }
-}
-
-function handleSelect(key: string | number) {
-  switch (key) {
-    case 'copy':
-      emit('copy')
-      break
-    case 'delete':
-      emit('delete')
-      break
-  }
-}
-
 const wrapClass = computed(() => {
   return [
     'text-wrap',
@@ -73,17 +34,15 @@ const text = computed(() => {
 </script>
 
 <template>
-  <NDropdown trigger="click" :options="options" @select="handleSelect">
+  <div :class="wrapClass">
-    <div :class="wrapClass">
+    <template v-if="loading">
-      <template v-if="loading">
+      <span class="w-[5px] h-[20px] block animate-blink" />
-        <span class="w-[5px] h-[20px] block animate-blink" />
+    </template>
-      </template>
+    <template v-else>
-      <template v-else>
+      <code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
-        <code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
+      <div v-else class="leading-relaxed break-all" v-html="text" />
-        <div v-else class="leading-relaxed break-all" v-html="text" />
+    </template>
-      </template>
+  </div>
-    </div>
-  </NDropdown>
 </template>
 
 <style lang="less">

src/views/chat/components/Message/index.vue

@@ -21,10 +21,6 @@ defineProps<Props>()
 
 const emit = defineEmits<Emit>()
 
-function handleCopy() {
-  emit('copy')
-}
-
 function handleDelete() {
   emit('delete')
 }
@@ -46,22 +42,28 @@ function handleRegenerate() {
       <span class="text-xs text-[#b4bbc4]">
         {{ dateTime }}
       </span>
-      <div class="flex items-end mt-2">
+      <div class="flex items-end gap-2 mt-2" :class="[inversion ? 'flex-row-reverse' : 'flex-row']">
         <Text
           :inversion="inversion"
           :error="error"
           :text="text"
           :loading="loading"
-          @copy="handleCopy"
-          @delete="handleDelete"
         />
-        <button
+        <div class="flex flex-col">
-          v-if="!inversion"
+          <button
-          class="mb-2 ml-2 transition text-neutral-400 hover:text-neutral-800"
+            v-if="!inversion"
-          @click="handleRegenerate"
+            class="mb-2 transition text-neutral-400 hover:text-neutral-800"
-        >
+            @click="handleRegenerate"
-          <SvgIcon icon="ri:restart-line" />
+          >
-        </button>
+            <SvgIcon icon="ri:restart-line" />
+          </button>
+          <button
+            class="mb-1 transition text-neutral-400 hover:text-neutral-800"
+            @click="handleDelete"
+          >
+            <SvgIcon icon="ri:delete-bin-6-line" />
+          </button>
+        </div>
       </div>
     </div>
   </div>

src/views/chat/index.vue

@@ -2,7 +2,6 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { NButton, NInput, useDialog, useMessage } from 'naive-ui'
-import { useClipboard } from '@vueuse/core'
 import { Message } from './components'
 import { useScroll } from './hooks/useScroll'
 import { useChat } from './hooks/useChat'
@@ -17,8 +16,6 @@ const route = useRoute()
 const dialog = useDialog()
 const ms = useMessage()
 
-const { copy, isSupported } = useClipboard()
-
 const chatStore = useChatStore()
 
 const { isMobile } = useBasicLayout()
@@ -199,19 +196,6 @@ async function onRegenerate(index: number) {
   }
 }
 
-async function handleCopy(index: number) {
-  if (loading.value)
-    return
-
-  if (isSupported.value) {
-    await copy(dataSources.value[index].text)
-    ms.success('Copied to clipboard')
-  }
-  else {
-    ms.error('Copy to clipboard is not supported')
-  }
-}
-
 function handleDelete(index: number) {
   if (loading.value)
     return
@@ -223,6 +207,7 @@ function handleDelete(index: number) {
     negativeText: 'No',
     onPositiveClick: () => {
       chatStore.deleteChatByUuid(+uuid, index)
+      ms.success('Message deleted successfully.')
     },
   })
 }
@@ -305,7 +290,6 @@ onUnmounted(() => {
               :error="item.error"
               :loading="item.loading"
               @regenerate="onRegenerate(index)"
-              @copy="handleCopy(index)"
               @delete="handleDelete(index)"
             />
             <div class="flex justify-center">