From f4ed9488bd3e4aecfefc8ab0a219ccbb00dfa5c9 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 2 Dec 2025 20:58:41 -0600
Subject: [PATCH] UI: Agregar botones de copiar en paneles de debug de Mensajes

---
 app/pages/messages/index.vue | 43 +++++++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/app/pages/messages/index.vue b/app/pages/messages/index.vue
index d43c8b9..5947b88 100644
--- a/app/pages/messages/index.vue
+++ b/app/pages/messages/index.vue
@@ -32,7 +32,17 @@
     >
       <div class="flex items-center justify-between mb-2">
         <span class="text-gray-400">Last SSE Event:</span>
-        <span class="text-gray-500">{{ lastEvent?.timestamp?.toLocaleTimeString() || 'N/A' }}</span>
+        <div class="flex items-center gap-2">
+          <span class="text-gray-500">{{ lastEvent?.timestamp?.toLocaleTimeString() || 'N/A' }}</span>
+          <button
+            v-if="lastEvent"
+            @click="copyToClipboard(JSON.stringify(lastEvent, null, 2))"
+            class="px-2 py-1 rounded bg-gray-700 hover:bg-gray-600 text-gray-300"
+            title="Copiar al portapapeles"
+          >
+            <UIcon name="i-lucide-copy" class="w-3 h-3" />
+          </button>
+        </div>
       </div>
       <pre v-if="lastEvent" class="text-green-400 whitespace-pre-wrap overflow-x-auto max-h-40">{{ JSON.stringify(lastEvent, null, 2) }}</pre>
       <p v-else class="text-gray-500">No events received yet</p>
@@ -73,7 +83,16 @@
             v-if="showChatsDebug"
             class="mt-2 p-2 rounded bg-gray-900 border border-gray-700 text-xs font-mono max-h-60 overflow-auto"
           >
-            <div class="text-gray-400 mb-1">Chats ({{ chats.length }}):</div>
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-gray-400">Chats ({{ chats.length }}):</span>
+              <button
+                @click="copyToClipboard(JSON.stringify(chats, null, 2))"
+                class="px-2 py-1 rounded bg-gray-700 hover:bg-gray-600 text-gray-300"
+                title="Copiar al portapapeles"
+              >
+                <UIcon name="i-lucide-copy" class="w-3 h-3" />
+              </button>
+            </div>
             <pre class="text-green-400 whitespace-pre-wrap">{{ JSON.stringify(chats, null, 2) }}</pre>
           </div>
         </div>
@@ -127,7 +146,16 @@
               v-if="showSelectedChatDebug"
               class="mt-2 p-2 rounded bg-gray-900 border border-gray-700 text-xs font-mono max-h-40 overflow-auto"
             >
-              <div class="text-gray-400 mb-1">Selected Chat:</div>
+              <div class="flex items-center justify-between mb-1">
+                <span class="text-gray-400">Selected Chat:</span>
+                <button
+                  @click="copyToClipboard(JSON.stringify(selectedChat, null, 2))"
+                  class="px-2 py-1 rounded bg-gray-700 hover:bg-gray-600 text-gray-300"
+                  title="Copiar al portapapeles"
+                >
+                  <UIcon name="i-lucide-copy" class="w-3 h-3" />
+                </button>
+              </div>
               <pre class="text-green-400 whitespace-pre-wrap">{{ JSON.stringify(selectedChat, null, 2) }}</pre>
             </div>
           </div>
@@ -229,6 +257,15 @@ const filteredChats = computed(() => {
   )
 })
 
+// Copy to clipboard function
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+
 const handleSendMessage = async (content: string) => {
   if (!selectedInstance.value?.value || !selectedChat.value) return