From 25c725c6e8157f7f9b5abd82a2aadfaa285222ac Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Thu, 23 Feb 2023 11:49:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=95=E6=B6=88=E6=81=AF=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=E5=92=8C=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/chat/index.ts             | 16 ++++++
 src/views/chat/components/Message/Text.vue  | 61 +++++++++++++++++----
 src/views/chat/components/Message/index.vue | 19 ++++++-
 src/views/chat/index.vue                    | 36 +++++++++++-
 4 files changed, 120 insertions(+), 12 deletions(-)

diff --git a/src/store/modules/chat/index.ts b/src/store/modules/chat/index.ts
index 9db57d4..203e194 100644
--- a/src/store/modules/chat/index.ts
+++ b/src/store/modules/chat/index.ts
@@ -110,6 +110,22 @@ export const useChatStore = defineStore('chat-store', {
       }
     },
 
+    deleteChatByUuid(uuid: number, index: number) {
+      if (!uuid || uuid === 0) {
+        if (this.chat.length) {
+          this.chat[0].data.splice(index, 1)
+          this.recordState()
+        }
+        return
+      }
+
+      const chatIndex = this.chat.findIndex(item => item.uuid === uuid)
+      if (chatIndex !== -1) {
+        this.chat[chatIndex].data.splice(index, 1)
+        this.recordState()
+      }
+    },
+
     clearChatByUuid(uuid: number) {
       if (!uuid || uuid === 0) {
         if (this.chat.length) {
diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
index 23a2ed8..abc881d 100644
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { NDropdown } from 'naive-ui'
+import { computed, h } from 'vue'
 import { marked } from 'marked'
 import includeCode from '@/utils/functions/includeCode'
+import { SvgIcon } from '@/components/common'
 
 interface Props {
   inversion?: boolean
@@ -10,8 +12,45 @@ 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',
@@ -34,15 +73,17 @@ const text = computed(() => {
 </script>
 
 <template>
-  <div :class="wrapClass">
-    <template v-if="loading">
-      <span class="w-[5px] h-[20px] block animate-blink" />
-    </template>
-    <template v-else>
-      <code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
-      <div v-else class="leading-relaxed break-all" v-html="text" />
-    </template>
-  </div>
+  <NDropdown trigger="click" :options="options" @select="handleSelect">
+    <div :class="wrapClass">
+      <template v-if="loading">
+        <span class="w-[5px] h-[20px] block animate-blink" />
+      </template>
+      <template v-else>
+        <code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
+        <div v-else class="leading-relaxed break-all" v-html="text" />
+      </template>
+    </div>
+  </NDropdown>
 </template>
 
 <style lang="less">
diff --git a/src/views/chat/components/Message/index.vue b/src/views/chat/components/Message/index.vue
index 898ed52..623f2e6 100644
--- a/src/views/chat/components/Message/index.vue
+++ b/src/views/chat/components/Message/index.vue
@@ -13,12 +13,22 @@ interface Props {
 
 interface Emit {
   (ev: 'regenerate'): void
+  (ev: 'copy'): void
+  (ev: 'delete'): void
 }
 
 defineProps<Props>()
 
 const emit = defineEmits<Emit>()
 
+function handleCopy() {
+  emit('copy')
+}
+
+function handleDelete() {
+  emit('delete')
+}
+
 function handleRegenerate() {
   emit('regenerate')
 }
@@ -37,7 +47,14 @@ function handleRegenerate() {
         {{ dateTime }}
       </span>
       <div class="flex items-end mt-2">
-        <Text :inversion="inversion" :error="error" :text="text" :loading="loading" />
+        <Text
+          :inversion="inversion"
+          :error="error"
+          :text="text"
+          :loading="loading"
+          @copy="handleCopy"
+          @delete="handleDelete"
+        />
         <button
           v-if="!inversion"
           class="mb-2 ml-2 transition text-neutral-400 hover:text-neutral-800"
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 5a1212b..c65301e 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -1,7 +1,8 @@
 <script setup lang='ts'>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { NButton, NInput, useDialog } from 'naive-ui'
+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'
@@ -14,6 +15,9 @@ let controller = new AbortController()
 
 const route = useRoute()
 const dialog = useDialog()
+const ms = useMessage()
+
+const { copy, isSupported } = useClipboard()
 
 const chatStore = useChatStore()
 
@@ -195,6 +199,34 @@ 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
+
+  dialog.warning({
+    title: 'Delete Message',
+    content: 'Are you sure to delete this message?',
+    positiveText: 'Yes',
+    negativeText: 'No',
+    onPositiveClick: () => {
+      chatStore.deleteChatByUuid(+uuid, index)
+    },
+  })
+}
+
 function handleClear() {
   if (loading.value)
     return
@@ -273,6 +305,8 @@ onUnmounted(() => {
               :error="item.error"
               :loading="item.loading"
               @regenerate="onRegenerate(index)"
+              @copy="handleCopy(index)"
+              @delete="handleDelete(index)"
             />
             <div class="flex justify-center">
               <NButton v-if="loading" ghost @click="handleStop">