From 371b5676fb36ff26dd020e1bda590d9285fb1d1c Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 2 Dec 2025 21:06:51 -0600
Subject: [PATCH] UI: Agregar botones de copiar en paneles de debug de ChatItem
 y MessageBubble

---
 app/components/messages/ChatItem.vue      | 18 ++++++++++++++++++
 app/components/messages/MessageBubble.vue | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/app/components/messages/ChatItem.vue b/app/components/messages/ChatItem.vue
index 553c296..79f4574 100644
--- a/app/components/messages/ChatItem.vue
+++ b/app/components/messages/ChatItem.vue
@@ -43,6 +43,16 @@
       v-if="showDebug"
       class="mx-2 mb-2 p-2 rounded bg-gray-900 border border-gray-700 text-xs font-mono overflow-x-auto"
     >
+      <div class="flex items-center justify-between mb-1">
+        <span class="text-gray-400">Chat:</span>
+        <button
+          @click.stop="copyToClipboard(JSON.stringify(chat, 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(chat, null, 2) }}</pre>
     </div>
   </div>
@@ -71,6 +81,14 @@ defineEmits<{
 
 const showDebug = ref(false)
 
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+
 const formatTime = (date: Date) => {
   const d = new Date(date)
   const now = new Date()
diff --git a/app/components/messages/MessageBubble.vue b/app/components/messages/MessageBubble.vue
index 25c643f..f8e5fa8 100644
--- a/app/components/messages/MessageBubble.vue
+++ b/app/components/messages/MessageBubble.vue
@@ -52,6 +52,16 @@
       v-if="showDebug"
       class="max-w-[90%] mt-1 p-2 rounded bg-gray-900 border border-gray-700 text-xs font-mono overflow-x-auto"
     >
+      <div class="flex items-center justify-between mb-1">
+        <span class="text-gray-400">Message:</span>
+        <button
+          @click="copyToClipboard(JSON.stringify(message, 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(message, null, 2) }}</pre>
     </div>
   </div>
@@ -77,6 +87,14 @@ const props = defineProps<Props>()
 
 const showDebug = ref(false)
 
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+
 const formatTime = (date: Date) => {
   return new Date(date).toLocaleTimeString('es-AR', {
     hour: '2-digit',