SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: remove outdated avatar and chat update documentation files; streamline project structure for improved maintainability

Browse Source
This commit is contained in:
deyvisonwanderley
2025-10-30 09:25:53 -03:00
parent ef20d599eb
commit 21b41121db
24 changed files with 829 additions and 4573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
apps/web/src/lib/components/chat/ChatWidget.svelte
View File

@@ -19,23 +19,24 @@
let isMinimized = $state(false);
let activeConversation = $state<string | null>(null);
// Posição do widget (arrastável)
let position = $state({ x: 0, y: 0 });
let isDragging = $state(false);
let dragStart = $state({ x: 0, y: 0 });
let isAnimating = $state(false);
// Sincronizar com stores
$effect(() => {
isOpen = $chatAberto;
console.log("ChatWidget - isOpen:", isOpen);
});
$effect(() => {
isMinimized = $chatMinimizado;
console.log("ChatWidget - isMinimized:", isMinimized);
});
$effect(() => {
activeConversation = $conversaAtiva;
});
// Debug inicial
console.log("ChatWidget montado - isOpen:", isOpen, "isMinimized:", isMinimized);
function handleToggle() {
if (isOpen && !isMinimized) {
@@ -56,125 +57,279 @@
function handleMaximize() {
maximizarChat();
}
// Funcionalidade de arrastar
function handleMouseDown(e: MouseEvent) {
if (e.button !== 0) return; // Apenas botão esquerdo
isDragging = true;
dragStart = {
x: e.clientX - position.x,
y: e.clientY - position.y,
};
document.body.classList.add('dragging');
e.preventDefault();
}
function handleMouseMove(e: MouseEvent) {
if (!isDragging) return;
const newX = e.clientX - dragStart.x;
const newY = e.clientY - dragStart.y;
// Dimensões do widget
const widgetWidth = isOpen && !isMinimized ? 440 : 72;
const widgetHeight = isOpen && !isMinimized ? 680 : 72;
// Limites da tela com margem de segurança
const minX = -(widgetWidth - 100); // Permitir até 100px visíveis
const maxX = window.innerWidth - 100; // Manter 100px dentro da tela
const minY = -(widgetHeight - 100);
const maxY = window.innerHeight - 100;
position = {
x: Math.max(minX, Math.min(newX, maxX)),
y: Math.max(minY, Math.min(newY, maxY)),
};
}
function handleMouseUp() {
if (isDragging) {
isDragging = false;
document.body.classList.remove('dragging');
// Garantir que está dentro dos limites ao soltar
ajustarPosicao();
}
}
function ajustarPosicao() {
isAnimating = true;
// Dimensões do widget
const widgetWidth = isOpen && !isMinimized ? 440 : 72;
const widgetHeight = isOpen && !isMinimized ? 680 : 72;
// Verificar se está fora dos limites
let newX = position.x;
let newY = position.y;
// Ajustar X
if (newX < -(widgetWidth - 100)) {
newX = -(widgetWidth - 100);
} else if (newX > window.innerWidth - 100) {
newX = window.innerWidth - 100;
}
// Ajustar Y
if (newY < -(widgetHeight - 100)) {
newY = -(widgetHeight - 100);
} else if (newY > window.innerHeight - 100) {
newY = window.innerHeight - 100;
}
position = { x: newX, y: newY };
setTimeout(() => {
isAnimating = false;
}, 300);
}
// Event listeners globais
if (typeof window !== 'undefined') {
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
}
</script>
<!-- Botão flutuante (quando fechado ou minimizado) -->
<!-- Botão flutuante MODERNO E ARRASTÁVEL -->
{#if !isOpen || isMinimized}
<button
type="button"
class="fixed btn btn-circle btn-lg shadow-2xl hover:shadow-primary/40 hover:scale-110 transition-all duration-500 group relative border-0 bg-gradient-to-br from-primary via-primary to-primary/80"
style="z-index: 99999 !important; width: 4.5rem; height: 4.5rem; bottom: 1.5rem !important; right: 1.5rem !important; position: fixed !important;"
class="fixed group relative border-0 backdrop-blur-xl"
style="
z-index: 99999 !important;
width: 4.5rem;
height: 4.5rem;
bottom: {position.y === 0 ? '1.5rem' : `${window.innerHeight - position.y - 72}px`};
right: {position.x === 0 ? '1.5rem' : `${window.innerWidth - position.x - 72}px`};
position: fixed !important;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
box-shadow:
0 20px 60px -10px rgba(102, 126, 234, 0.5),
0 10px 30px -5px rgba(118, 75, 162, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
border-radius: 50%;
cursor: {isDragging ? 'grabbing' : 'grab'};
transform: {isDragging ? 'scale(1.05)' : 'scale(1)'};
transition: {isAnimating ? 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'transform 0.2s, box-shadow 0.3s'};
"
onclick={handleToggle}
onmousedown={handleMouseDown}
aria-label="Abrir chat"
>
<!-- Anel pulsante interno -->
<div class="absolute inset-0 rounded-full bg-white/10 group-hover:scale-95 transition-transform duration-500"></div>
<!-- Anel de brilho rotativo -->
<div class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"
style="background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); animation: rotate 3s linear infinite;">
</div>
<!-- Ícone de chat premium -->
<!-- Ondas de pulso -->
<div class="absolute inset-0 rounded-full" style="animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></div>
<!-- Ícone de chat moderno com efeito 3D -->
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
fill="none"
stroke="currentColor"
class="w-9 h-9 relative z-10 text-white group-hover:scale-110 transition-all duration-500"
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-7 h-7 relative z-10 text-white group-hover:scale-110 transition-all duration-500"
style="filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
/>
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
<circle cx="9" cy="10" r="1" fill="currentColor"/>
<circle cx="12" cy="10" r="1" fill="currentColor"/>
<circle cx="15" cy="10" r="1" fill="currentColor"/>
</svg>
<!-- Badge premium com animação -->
{#if count && count > 0}
<!-- Badge ULTRA PREMIUM com gradiente e brilho -->
{#if count?.data && count.data > 0}
<span
class="absolute -top-1.5 -right-1.5 flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-red-500 via-error to-red-600 text-white text-xs font-black shadow-2xl ring-4 ring-white z-20"
style="animation: badge-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
class="absolute -top-1 -right-1 flex h-8 w-8 items-center justify-center rounded-full text-white text-xs font-black z-20"
style="
background: linear-gradient(135deg, #ff416c, #ff4b2b);
box-shadow:
0 8px 24px -4px rgba(255, 65, 108, 0.6),
0 4px 12px -2px rgba(255, 75, 43, 0.4),
0 0 0 3px rgba(255, 255, 255, 0.3),
0 0 0 5px rgba(255, 65, 108, 0.2);
animation: badge-bounce 2s ease-in-out infinite;
"
>
{count > 9 ? "9+" : count}
{count.data > 9 ? "9+" : count.data}
</span>
{/if}
<!-- Indicador de arrastável -->
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 flex gap-1 opacity-50 group-hover:opacity-100 transition-opacity">
<div class="w-1 h-1 rounded-full bg-white"></div>
<div class="w-1 h-1 rounded-full bg-white"></div>
<div class="w-1 h-1 rounded-full bg-white"></div>
</div>
</button>
{/if}
<!-- Janela do Chat -->
<!-- Janela do Chat ULTRA MODERNA E ARRASTÁVEL -->
{#if isOpen && !isMinimized}
<div
class="fixed flex flex-col bg-base-100 rounded-2xl shadow-2xl border border-base-300 overflow-hidden
w-[400px] h-[600px] max-w-[calc(100vw-3rem)] max-h-[calc(100vh-3rem)]
md:w-[400px] md:h-[600px]
sm:w-full sm:h-full sm:bottom-0 sm:right-0 sm:rounded-none sm:max-w-full sm:max-h-full"
style="z-index: 99999 !important; animation: slideIn 0.3s ease-out; bottom: 1.5rem !important; right: 1.5rem !important; position: fixed !important;"
class="fixed flex flex-col overflow-hidden backdrop-blur-2xl"
style="
z-index: 99999 !important;
bottom: {position.y === 0 ? '1.5rem' : `${window.innerHeight - position.y - 680}px`};
right: {position.x === 0 ? '1.5rem' : `${window.innerWidth - position.x - 440}px`};
width: 440px;
height: 680px;
max-width: calc(100vw - 3rem);
max-height: calc(100vh - 3rem);
position: fixed !important;
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(249,250,251,0.98) 100%);
border-radius: 24px;
box-shadow:
0 32px 64px -12px rgba(0, 0, 0, 0.15),
0 16px 32px -8px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
animation: slideInScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: {isAnimating ? 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'none'};
"
>
<!-- Header Premium -->
<!-- Header ULTRA PREMIUM com gradiente glassmorphism -->
<div
class="flex items-center justify-between px-5 py-4 bg-gradient-to-r from-primary via-primary to-primary/90 text-white border-b border-white/10 shadow-lg"
class="flex items-center justify-between px-6 py-5 text-white relative overflow-hidden"
style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
box-shadow: 0 8px 32px -4px rgba(102, 126, 234, 0.3);
cursor: {isDragging ? 'grabbing' : 'grab'};
"
onmousedown={handleMouseDown}
role="button"
tabindex="0"
aria-label="Arrastar janela do chat"
>
<h2 class="text-lg font-bold flex items-center gap-3">
<!-- Ícone premium do chat -->
<div class="relative">
<div class="absolute inset-0 bg-white/20 rounded-lg blur-md"></div>
<!-- Efeitos de fundo animados -->
<div class="absolute inset-0 opacity-30" style="background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.3) 0%, transparent 50%);"></div>
<div class="absolute inset-0 opacity-20" style="background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); animation: shimmer 3s infinite;"></div>
<!-- Título com ícone moderno 3D -->
<h2 class="text-xl font-bold flex items-center gap-3 relative z-10">
<!-- Ícone de chat com efeito glassmorphism -->
<div class="relative flex items-center justify-center w-10 h-10 rounded-xl" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.2) inset;">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
fill="none"
stroke="currentColor"
class="w-7 h-7 relative z-10"
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5"
style="filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
/>
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
<line x1="9" y1="10" x2="15" y2="10"/>
<line x1="9" y1="14" x2="13" y2="14"/>
</svg>
</div>
<span class="tracking-wide" style="text-shadow: 0 2px 4px rgba(0,0,0,0.2);">Mensagens</span>
<span class="tracking-wide font-extrabold" style="text-shadow: 0 2px 8px rgba(0,0,0,0.3); letter-spacing: 0.02em;">Mensagens</span>
</h2>
<div class="flex items-center gap-1">
<!-- Botão minimizar premium -->
<!-- Botões de controle modernos -->
<div class="flex items-center gap-2 relative z-10">
<!-- Botão minimizar MODERNO -->
<button
type="button"
class="btn btn-ghost btn-sm btn-circle hover:bg-white/20 transition-all duration-300 group"
class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden"
style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
onclick={handleMinimize}
aria-label="Minimizar"
>
<div class="absolute inset-0 bg-white/0 group-hover:bg-white/20 transition-colors duration-300"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
fill="none"
stroke="currentColor"
class="w-5 h-5 group-hover:scale-110 transition-transform"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5 relative z-10 group-hover:scale-110 transition-transform duration-300"
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
<!-- Botão fechar premium -->
<!-- Botão fechar MODERNO -->
<button
type="button"
class="btn btn-ghost btn-sm btn-circle hover:bg-error/20 hover:text-error-content transition-all duration-300 group"
class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden"
style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
onclick={handleClose}
aria-label="Fechar"
>
<div class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/30 transition-colors duration-300"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
fill="none"
stroke="currentColor"
class="w-5 h-5 group-hover:scale-110 group-hover:rotate-90 transition-all duration-300"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
class="w-5 h-5 relative z-10 group-hover:scale-110 group-hover:rotate-90 transition-all duration-300"
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
/>
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
@@ -192,26 +347,68 @@
{/if}
<style>
@keyframes badge-pulse {
/* Animação do badge com bounce suave */
@keyframes badge-bounce {
0%, 100% {
transform: scale(1);
opacity: 1;
transform: scale(1) translateY(0);
}
50% {
transform: scale(1.15);
opacity: 0.9;
transform: scale(1.08) translateY(-2px);
}
}
@keyframes slideIn {
from {
/* Animação de entrada da janela com escala e bounce */
@keyframes slideInScale {
0% {
opacity: 0;
transform: translateY(20px) scale(0.95);
transform: translateY(30px) scale(0.9);
}
to {
60% {
transform: translateY(-5px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Ondas de pulso para o botão flutuante */
@keyframes pulse-ring {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.5);
}
50% {
box-shadow: 0 0 0 15px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
/* Rotação para anel de brilho */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Efeito shimmer para o header */
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Suavizar transições */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>