From 587c9c9832b9b22fdf260b7911c4bbc3f34a4c98 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Thu, 20 Mar 2025 10:09:25 +0100
Subject: [PATCH] add copy clipboard button

---
 admin/src/components/AiChat.vue | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/admin/src/components/AiChat.vue b/admin/src/components/AiChat.vue
index fc1a3c109..e167d685d 100644
--- a/admin/src/components/AiChat.vue
+++ b/admin/src/components/AiChat.vue
@@ -16,8 +16,17 @@
       <div ref="chatContainer" class="messages-scroll-container">
         <TransitionGroup class="messages" tag="div" name="chat">
           <div v-for="(message, index) in messages" :key="index" :class="['message', message.role]">
-            <div class="message-content">
-              <span v-html="message.content.replace(/\n/g, '<br>')"></span>
+            <div class="message-content position-relative inner-container">
+              <span v-html="formatMessage(message)"></span>
+              <b-button
+                v-if="message.role === 'assistant'"
+                variant="light"
+                class="copy-clipboard-button"
+                :title="$t('copy-to-clipboard')"
+                @click="copyToClipboard(message.content)"
+              >
+                <IBiClipboard></IBiClipboard>
+              </b-button>
             </div>
           </div>
         </TransitionGroup>
@@ -81,6 +90,15 @@ const textareaPlaceholder = computed(() =>
   loading.value ? t('ai.chat-placeholder-loading') : t('ai.chat-placeholder'),
 )
 
+function formatMessage(message) {
+  return message.content.replace(/\n/g, '<br>')
+}
+
+function copyToClipboard(content) {
+  navigator.clipboard.writeText(content)
+  toastSuccess(t('copied-to-clipboard'))
+}
+
 function openChat() {
   isChatOpen.value = true
   if (messages.value.length > 0) {
@@ -200,7 +218,7 @@ onMounted(async () => {
 
 .chat-window {
   width: 550px;
-  height: 300px;
+  height: 330px;
   background-color: white;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -209,6 +227,15 @@ onMounted(async () => {
   flex-direction: column;
 }
 
+.copy-clipboard-button {
+  position: absolute;
+  top: 20%;
+  right: -12%;
+  padding-top: 2px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
 .messages-scroll-container {
   border-radius: 8px;
   flex: 1;