Add visual debug indicator to chat widget

Shows unread count and sessions count next to the chat button
for debugging purposes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
esdrasrenan 2025-12-07 12:18:46 -03:00
parent b10548157e
commit faa6e28765

View file

@ -192,9 +192,21 @@ export function ChatFloatingWidget({
const currentSession = sessions.find(s => s.ticketId === selectedTicketId) const currentSession = sessions.find(s => s.ticketId === selectedTicketId)
// Botao flutuante (fechado) // Botao flutuante (fechado)
// DEBUG: Log do estado do widget
console.log("[ChatFloatingWidget] Estado:", {
isOpen,
totalUnread,
sessionsCount: sessions.length,
sessions: sessions.map(s => ({ id: s.sessionId, ticketId: s.ticketId, unread: s.unreadCount }))
})
if (!isOpen) { if (!isOpen) {
return ( return (
<div className="fixed bottom-4 right-4 z-50"> <div className="fixed bottom-4 right-4 z-50">
{/* DEBUG: Indicador visual do estado */}
<div className="absolute -left-32 bottom-0 rounded bg-yellow-100 p-1 text-[10px] text-yellow-800 shadow">
unread: {totalUnread} | sessions: {sessions.length}
</div>
<button <button
onClick={onToggle} onClick={onToggle}
className="relative flex size-14 items-center justify-center rounded-full bg-black text-white shadow-lg transition hover:bg-black/90" className="relative flex size-14 items-center justify-center rounded-full bg-black text-white shadow-lg transition hover:bg-black/90"