From 2f74fec9e6d86ba8f116c2577a1fe6265a8eb1d9 Mon Sep 17 00:00:00 2001
From: Christian Herrera <herrerachristian1897@gmail.com>
Date: Fri, 21 Jun 2024 00:47:25 -0600
Subject: [PATCH] feat: allow users to copy assistant responses

---
 client/src/components/ChatBox.vue    |  5 ++++-
 client/src/components/CopyButton.vue | 27 +++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/CopyButton.vue

diff --git a/client/src/components/ChatBox.vue b/client/src/components/ChatBox.vue
index 81a8481..a7ddb85 100644
--- a/client/src/components/ChatBox.vue
+++ b/client/src/components/ChatBox.vue
@@ -70,8 +70,9 @@
                 <div v-else v-html="message.content" />
               </template>
               <template #footer>
-                <div class="date w-max justify-content-end text-xs text-white-alpha-70">
+                <div class="date text-xs text-white-alpha-70 flex gap-2 align-items-center">
                   {{ message.date }}
+                  <CopyButton v-if="message.role != 'user'" :content="message.content"/>
                 </div>
               </template>
             </Card>
@@ -117,6 +118,7 @@ import Toast from "primevue/toast";
 import Card from "primevue/card";
 import Avatar from "primevue/avatar";
 import MessageAdder from "@/components/MessageAdder.vue";
+import CopyButton from "@/components/CopyButton.vue";
 
 const SourcesBox = defineAsyncComponent(() =>
   import("@/components/SourcesBox.vue")
@@ -146,6 +148,7 @@ export default {
     Button,
     DynamicDialog,
     Chip,
+    CopyButton
   },
   props: { requiresContext: Boolean },
   mounted() {
diff --git a/client/src/components/CopyButton.vue b/client/src/components/CopyButton.vue
new file mode 100644
index 0000000..e0b6be7
--- /dev/null
+++ b/client/src/components/CopyButton.vue
@@ -0,0 +1,27 @@
+<template>
+    <Button :icon="`pi ${copied ? 'pi-check' : 'pi-copy'}`" text class="bg-inherit text-gray-300" title="Copy"
+        size="large" @click="onClick" />
+</template>
+
+<script>
+import Button from "primevue/button";
+export default {
+    name: 'CopyButton',
+    components: { Button },
+    props: { content: String },
+    data() {
+        return {
+            copied: false,
+        }
+    },
+    methods: {
+        onClick() {
+            navigator.clipboard.writeText(this.content.replace('<sources>', ''))
+            this.copied = true
+            setTimeout(() => this.copied = false, 2000)
+        }
+    }
+}
+</script>
+
+<style></style>
\ No newline at end of file