From 3282491415b8aec2aecd0631d4d5e8eed3f0a970 Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Wed, 11 Jun 2025 04:49:16 -0600
Subject: [PATCH] Improve floating chat

---
 ui/src/components/chat/FloatingChat.vue | 54 ++++++++++++++++++++-----
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/chat/FloatingChat.vue b/ui/src/components/chat/FloatingChat.vue
index 63b52f6..9a13aec 100644
--- a/ui/src/components/chat/FloatingChat.vue
+++ b/ui/src/components/chat/FloatingChat.vue
@@ -7,14 +7,26 @@ const open = ref(false)
 
 <template>
   <div>
-    <button v-if="!open" @click="open = true" class="chat-fab" aria-label="Abrir chat">
+    <button
+      v-if="!open"
+      @click="open = true"
+      class="chat-fab"
+      aria-label="Abrir chat"
+    >
       💬
     </button>
     <transition name="fade">
       <div v-if="open" class="chat-window">
-        <div class="chat-header">
-          <button @click="open = false" class="close-btn" aria-label="Cerrar chat">✖</button>
-        </div>
+        <header class="chat-header">
+          <h3 class="title">Chat</h3>
+          <button
+            @click="open = false"
+            class="close-btn"
+            aria-label="Cerrar chat"
+          >
+            ✕
+          </button>
+        </header>
         <CanvasChat class="flex-1 min-h-0" />
       </div>
     </transition>
@@ -43,24 +55,44 @@ const open = ref(false)
   right: 1rem;
   width: 24rem; /* 384px */
   height: 32rem; /* 512px */
-  background-color: var(--background-color);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+  background: var(--background-color);
+  background-image: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.6),
+    rgba(255, 255, 255, 0.2)
+  );
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   border-radius: 0.5rem;
+  backdrop-filter: blur(8px);
   display: flex;
   flex-direction: column;
   z-index: 60;
 }
 .chat-header {
   display: flex;
-  justify-content: flex-end;
-  padding: 0.25rem;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+  font-weight: 600;
+  color: var(--primary-color);
 }
 .close-btn {
-  background: transparent;
+  background: var(--secondary-color);
   border: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
   cursor: pointer;
-  color: var(--text-color);
-  font-size: 1.25rem;
+  color: var(--background-color);
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.close-btn:hover {
+  filter: brightness(1.1);
 }
 .fade-enter-active, .fade-leave-active {
   transition: opacity 0.2s;