feat: rediseña el widget embebible (ícono AI, color configurable, animaciones)
El bubble era un emoji 💬 sobre un color fijo hardcodeado en el JS. Ahora: - Ícono nuevo (spark/sparkle, el motivo visual estándar de "asistente IA" hoy) en vez del emoji, con anillo de pulso al cargar para llamar la atención sin ser invasivo. - Color configurable por tenant (UmindTenant.Color, validado como hex en el server) — se aplica en tiempo real vía /widget/:site_key/init, así que cambiarlo desde el panel no requiere recopiar el <script>. - Panel con animación de entrada, botón de cerrar explícito, subtítulo "Asistente con IA · uMind" y badge de marca — antes solo tenía el nombre del tenant y ningún indicio de qué lo potencia. - El widget ahora se inicializa al cargar el script (no al primer click), así el color/nombre reales ya están listos antes de que el visitante abra el chat. Selector de color agregado al form de tenant en el orquestador (input type=color + hex). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
c2e9d2c5a2
commit
8c1e754ab3
@@ -21,6 +21,7 @@ function vacio() {
|
||||
ai_config_id: null,
|
||||
tono: '',
|
||||
mensaje_bienvenida: '',
|
||||
color: '#8eb02f',
|
||||
activo: true,
|
||||
}
|
||||
}
|
||||
@@ -56,6 +57,7 @@ function editarTenant(t) {
|
||||
ai_config_id: t.ai_config_id,
|
||||
tono: t.tono,
|
||||
mensaje_bienvenida: t.mensaje_bienvenida,
|
||||
color: t.color || '#8eb02f',
|
||||
activo: t.activo,
|
||||
}
|
||||
showForm.value = true
|
||||
@@ -210,6 +212,14 @@ onMounted(cargar)
|
||||
class="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded-lg px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs text-gray-500 dark:text-gray-400">Color del widget</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input v-model="form.color" type="color" class="w-10 h-9 border border-gray-300 dark:border-gray-700 rounded cursor-pointer bg-white dark:bg-gray-800" />
|
||||
<input v-model="form.color" type="text" pattern="#[0-9a-fA-F]{6}" class="flex-1 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded-lg px-3 py-2 text-sm font-mono" />
|
||||
</div>
|
||||
<p class="text-[11px] text-gray-400 dark:text-gray-500 mt-1">Se aplica al widget embebido automáticamente, no hace falta recopiar el código.</p>
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
<input v-model="form.activo" type="checkbox" />
|
||||
Activo
|
||||
|
||||
Reference in New Issue
Block a user