From d4121ac435b15b6bc49dfadf3595eeaa0da5b038 Mon Sep 17 00:00:00 2001
From: Lizandro <lizandrogd@gmail.com>
Date: Tue, 14 Jul 2026 14:51:11 +0000
Subject: [PATCH] feat: copy button for Bre-B llave with visual feedback

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../views/livewire/chat/public-chat.blade.php | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/resources/views/livewire/chat/public-chat.blade.php b/resources/views/livewire/chat/public-chat.blade.php
index 127b261..d80c72a 100644
--- a/resources/views/livewire/chat/public-chat.blade.php
+++ b/resources/views/livewire/chat/public-chat.blade.php
@@ -459,9 +459,28 @@
                                                 <span class="text-white text-sm font-semibold">{{ $payload['banco'] }}</span>
                                             </div>
                                         @endif
-                                        <div class="bg-[#0b141a] rounded-xl px-4 py-3 text-center">
-                                            <p class="text-[#8696a0] text-[11px] mb-1">Llave Bre-B</p>
-                                            <p class="text-[#00a884] text-xl font-bold font-mono tracking-widest">{{ $payload['clave'] ?? '' }}</p>
+                                        <div class="bg-[#0b141a] rounded-xl px-4 py-3 text-center"
+                                             x-data="{ copiado: false }">
+                                            <p class="text-[#8696a0] text-[11px] mb-2">Llave Bre-B</p>
+                                            <div class="flex items-center justify-center gap-3">
+                                                <p class="text-[#00a884] text-2xl font-bold font-mono tracking-widest select-all">{{ $payload['clave'] ?? '' }}</p>
+                                                <button
+                                                    @click="navigator.clipboard.writeText('{{ $payload['clave'] ?? '' }}').then(() => { copiado = true; setTimeout(() => copiado = false, 2000) })"
+                                                    class="flex-shrink-0 p-2 rounded-xl transition"
+                                                    :class="copiado ? 'bg-green-500/20 text-green-400' : 'bg-[#00a884]/20 text-[#00a884] active:bg-[#00a884]/40'">
+                                                    <template x-if="!copiado">
+                                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
+                                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
+                                                        </svg>
+                                                    </template>
+                                                    <template x-if="copiado">
+                                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+                                                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                                        </svg>
+                                                    </template>
+                                                </button>
+                                            </div>
+                                            <p x-show="copiado" x-transition class="text-green-400 text-xs mt-1.5">¡Copiado!</p>
                                         </div>
                                         @if (!empty($payload['titular']))
                                             <div class="flex justify-between items-center">