b10548157e
- Add detailed debug logs in Rust (chat.rs) to trace polling flow - Add console.log in frontend (main.tsx) to trace event reception - Add red border to "Encerrar" button in chat panels for better visibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
375 lines
14 KiB
TypeScript
375 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useRef, useState } from "react"
|
|
import { useMutation, useQuery } from "convex/react"
|
|
import type { Id } from "@/convex/_generated/dataModel"
|
|
import { api } from "@/convex/_generated/api"
|
|
import { useAuth } from "@/lib/auth-client"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card"
|
|
import { Spinner } from "@/components/ui/spinner"
|
|
import { cn } from "@/lib/utils"
|
|
import { toast } from "sonner"
|
|
import { formatDistanceToNowStrict } from "date-fns"
|
|
import { ptBR } from "date-fns/locale"
|
|
import { MessageCircle, Send, WifiOff, X, User, Headphones } from "lucide-react"
|
|
|
|
const MAX_MESSAGE_LENGTH = 4000
|
|
|
|
function formatRelative(timestamp: number) {
|
|
try {
|
|
return formatDistanceToNowStrict(timestamp, { locale: ptBR, addSuffix: true })
|
|
} catch {
|
|
return new Date(timestamp).toLocaleString("pt-BR")
|
|
}
|
|
}
|
|
|
|
function formatTime(timestamp: number) {
|
|
return new Date(timestamp).toLocaleTimeString("pt-BR", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})
|
|
}
|
|
|
|
type TicketChatPanelProps = {
|
|
ticketId: string
|
|
}
|
|
|
|
export function TicketChatPanel({ ticketId }: TicketChatPanelProps) {
|
|
const { convexUserId } = useAuth()
|
|
const viewerId = convexUserId ?? null
|
|
const chat = useQuery(
|
|
api.tickets.listChatMessages,
|
|
viewerId ? { ticketId: ticketId as Id<"tickets">, viewerId: viewerId as Id<"users"> } : "skip"
|
|
) as
|
|
| {
|
|
ticketId: string
|
|
chatEnabled: boolean
|
|
status: string
|
|
canPost: boolean
|
|
reopenDeadline: number | null
|
|
liveChat?: {
|
|
hasMachine: boolean
|
|
machineOnline: boolean
|
|
machineHostname: string | null
|
|
activeSession: {
|
|
sessionId: Id<"liveChatSessions">
|
|
agentId: Id<"users">
|
|
agentName: string | null
|
|
startedAt: number
|
|
unreadByAgent: number
|
|
} | null
|
|
}
|
|
messages: Array<{
|
|
id: Id<"ticketChatMessages">
|
|
body: string
|
|
createdAt: number
|
|
updatedAt: number
|
|
authorId: string
|
|
authorName: string | null
|
|
authorEmail: string | null
|
|
attachments: Array<{ storageId: Id<"_storage">; name: string; size: number | null; type: string | null }>
|
|
readBy: Array<{ userId: string; readAt: number }>
|
|
}>
|
|
}
|
|
| null
|
|
| undefined
|
|
|
|
const markChatRead = useMutation(api.tickets.markChatRead)
|
|
const postChatMessage = useMutation(api.tickets.postChatMessage)
|
|
const startLiveChat = useMutation(api.liveChat.startSession)
|
|
const endLiveChat = useMutation(api.liveChat.endSession)
|
|
|
|
const messagesEndRef = useRef<HTMLDivElement | null>(null)
|
|
const inputRef = useRef<HTMLTextAreaElement | null>(null)
|
|
const [draft, setDraft] = useState("")
|
|
const [isSending, setIsSending] = useState(false)
|
|
const [isStartingChat, setIsStartingChat] = useState(false)
|
|
const [isEndingChat, setIsEndingChat] = useState(false)
|
|
|
|
const messages = chat?.messages ?? []
|
|
const canPost = Boolean(chat?.canPost && viewerId)
|
|
const chatEnabled = Boolean(chat?.chatEnabled)
|
|
const liveChat = chat?.liveChat
|
|
const hasActiveSession = Boolean(liveChat?.activeSession)
|
|
|
|
useEffect(() => {
|
|
if (!viewerId || !chat || !Array.isArray(chat.messages) || chat.messages.length === 0) return
|
|
const unreadIds = chat.messages
|
|
.filter((message) => {
|
|
const alreadyRead = (message.readBy ?? []).some((entry) => entry.userId === viewerId)
|
|
return !alreadyRead
|
|
})
|
|
.map((message) => message.id)
|
|
if (unreadIds.length === 0) return
|
|
void markChatRead({
|
|
ticketId: ticketId as Id<"tickets">,
|
|
actorId: viewerId as Id<"users">,
|
|
messageIds: unreadIds,
|
|
}).catch((error) => {
|
|
console.error("Failed to mark chat messages as read", error)
|
|
})
|
|
}, [markChatRead, chat, ticketId, viewerId])
|
|
|
|
useEffect(() => {
|
|
if (messagesEndRef.current) {
|
|
messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
|
|
}
|
|
}, [messages.length])
|
|
|
|
const disabledReason = useMemo(() => {
|
|
if (!chatEnabled) return "Chat desativado para este ticket"
|
|
if (!canPost) return "Voce nao tem permissao para enviar mensagens"
|
|
return null
|
|
}, [canPost, chatEnabled])
|
|
|
|
const handleStartLiveChat = async () => {
|
|
if (!viewerId) return
|
|
setIsStartingChat(true)
|
|
toast.dismiss("live-chat")
|
|
try {
|
|
const result = await startLiveChat({
|
|
ticketId: ticketId as Id<"tickets">,
|
|
actorId: viewerId as Id<"users">,
|
|
})
|
|
if (result.isNew) {
|
|
toast.success("Chat ao vivo iniciado! O cliente será notificado.", { id: "live-chat" })
|
|
} else {
|
|
toast.info("Já existe uma sessão de chat ativa.", { id: "live-chat" })
|
|
}
|
|
} catch (error: unknown) {
|
|
const message = error instanceof Error ? error.message : "Não foi possível iniciar o chat"
|
|
toast.error(message, { id: "live-chat" })
|
|
} finally {
|
|
setIsStartingChat(false)
|
|
}
|
|
}
|
|
|
|
const handleEndLiveChat = async () => {
|
|
if (!viewerId || !chat?.liveChat?.activeSession) return
|
|
setIsEndingChat(true)
|
|
toast.dismiss("live-chat")
|
|
try {
|
|
await endLiveChat({
|
|
sessionId: chat.liveChat.activeSession.sessionId,
|
|
actorId: viewerId as Id<"users">,
|
|
})
|
|
toast.success("Chat ao vivo encerrado.", { id: "live-chat" })
|
|
} catch (error: unknown) {
|
|
const message = error instanceof Error ? error.message : "Não foi possível encerrar o chat"
|
|
toast.error(message, { id: "live-chat" })
|
|
} finally {
|
|
setIsEndingChat(false)
|
|
}
|
|
}
|
|
|
|
const handleSend = async () => {
|
|
if (!viewerId || !canPost || draft.trim().length === 0) return
|
|
if (draft.length > MAX_MESSAGE_LENGTH) {
|
|
toast.error(`Mensagem muito longa (max. ${MAX_MESSAGE_LENGTH} caracteres).`)
|
|
return
|
|
}
|
|
setIsSending(true)
|
|
try {
|
|
await postChatMessage({
|
|
ticketId: ticketId as Id<"tickets">,
|
|
actorId: viewerId as Id<"users">,
|
|
body: draft.trim(),
|
|
})
|
|
setDraft("")
|
|
inputRef.current?.focus()
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Não foi possível enviar a mensagem.")
|
|
} finally {
|
|
setIsSending(false)
|
|
}
|
|
}
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault()
|
|
handleSend()
|
|
}
|
|
}
|
|
|
|
if (!viewerId) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Card className="flex flex-col overflow-hidden border-slate-200">
|
|
{/* Header */}
|
|
<CardHeader className="flex flex-row items-center justify-between gap-2 border-b border-slate-100 bg-slate-50 px-4 py-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex size-10 items-center justify-center rounded-full bg-black text-white">
|
|
<MessageCircle className="size-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-slate-900">Chat do Atendimento</p>
|
|
<div className="flex items-center gap-2">
|
|
{liveChat?.hasMachine && (
|
|
<>
|
|
{liveChat.machineOnline ? (
|
|
<span className="flex items-center gap-1 text-xs text-green-600">
|
|
<span className="size-1.5 rounded-full bg-green-500" />
|
|
{liveChat.machineHostname ?? "Maquina"} online
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-1 text-xs text-slate-400">
|
|
<WifiOff className="size-3" />
|
|
{liveChat.machineHostname ?? "Maquina"} offline
|
|
</span>
|
|
)}
|
|
</>
|
|
)}
|
|
{hasActiveSession && (
|
|
<span className="flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
|
|
Chat ativo
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{liveChat?.hasMachine && (
|
|
<>
|
|
{hasActiveSession ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleEndLiveChat}
|
|
disabled={isEndingChat}
|
|
className="gap-1.5 border border-red-300 text-red-600 hover:border-red-400 hover:bg-red-50 hover:text-red-700"
|
|
>
|
|
{isEndingChat ? <Spinner className="size-3" /> : <X className="size-3" />}
|
|
Encerrar
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleStartLiveChat}
|
|
disabled={isStartingChat || !liveChat.machineOnline}
|
|
className="gap-1.5"
|
|
title={!liveChat.machineOnline ? "A maquina precisa estar online para iniciar o chat" : undefined}
|
|
>
|
|
{isStartingChat ? <Spinner className="size-3" /> : <MessageCircle className="size-3" />}
|
|
Iniciar Chat
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
|
|
{/* Messages */}
|
|
<CardContent className="flex-1 overflow-y-auto bg-slate-50/50 p-0">
|
|
<div className="min-h-[300px] max-h-[400px] overflow-y-auto p-4">
|
|
{chat === undefined ? (
|
|
<div className="flex h-full min-h-[200px] items-center justify-center">
|
|
<div className="flex flex-col items-center gap-2 text-slate-400">
|
|
<Spinner className="size-6" />
|
|
<p className="text-sm">Carregando mensagens...</p>
|
|
</div>
|
|
</div>
|
|
) : messages.length === 0 ? (
|
|
<div className="flex h-full min-h-[200px] flex-col items-center justify-center text-center">
|
|
<div className="flex size-12 items-center justify-center rounded-full bg-slate-100">
|
|
<MessageCircle className="size-6 text-slate-400" />
|
|
</div>
|
|
<p className="mt-3 text-sm font-medium text-slate-600">Nenhuma mensagem ainda</p>
|
|
<p className="mt-1 text-xs text-slate-400">
|
|
{hasActiveSession ? "Envie uma mensagem para iniciar a conversa" : "Inicie um chat para conversar com o cliente"}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{messages.map((message) => {
|
|
const isOwn = String(message.authorId) === String(viewerId)
|
|
return (
|
|
<div
|
|
key={message.id}
|
|
className={cn("flex gap-2", isOwn ? "flex-row-reverse" : "flex-row")}
|
|
>
|
|
{/* Avatar */}
|
|
<div
|
|
className={cn(
|
|
"flex size-8 shrink-0 items-center justify-center rounded-full",
|
|
isOwn ? "bg-black text-white" : "bg-slate-200 text-slate-600"
|
|
)}
|
|
>
|
|
{isOwn ? <Headphones className="size-4" /> : <User className="size-4" />}
|
|
</div>
|
|
|
|
{/* Bubble */}
|
|
<div
|
|
className={cn(
|
|
"max-w-[75%] rounded-2xl px-4 py-2",
|
|
isOwn
|
|
? "rounded-br-md bg-black text-white"
|
|
: "rounded-bl-md bg-white text-slate-900 shadow-sm border border-slate-100"
|
|
)}
|
|
>
|
|
{!isOwn && (
|
|
<p className={cn("mb-1 text-xs font-medium", isOwn ? "text-white/70" : "text-slate-500")}>
|
|
{message.authorName ?? "Usuario"}
|
|
</p>
|
|
)}
|
|
<p className="whitespace-pre-wrap text-sm">{message.body}</p>
|
|
<p
|
|
className={cn(
|
|
"mt-1 text-right text-xs",
|
|
isOwn ? "text-white/60" : "text-slate-400"
|
|
)}
|
|
>
|
|
{formatTime(message.createdAt)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* Input */}
|
|
<div className="border-t border-slate-200 bg-white p-3">
|
|
{!chatEnabled ? (
|
|
<p className="text-center text-sm text-slate-400">Chat desativado para este ticket</p>
|
|
) : !canPost ? (
|
|
<p className="text-center text-sm text-slate-400">Voce nao pode enviar mensagens neste chat</p>
|
|
) : (
|
|
<div className="flex items-end gap-2">
|
|
<textarea
|
|
ref={inputRef}
|
|
value={draft}
|
|
onChange={(e) => setDraft(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Digite sua mensagem..."
|
|
className="max-h-24 min-h-[40px] flex-1 resize-none rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-1 focus:ring-black"
|
|
rows={1}
|
|
disabled={isSending}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
onClick={handleSend}
|
|
disabled={!draft.trim() || isSending}
|
|
className="flex size-10 items-center justify-center rounded-lg bg-black text-white hover:bg-black/90"
|
|
>
|
|
{isSending ? (
|
|
<Spinner className="size-4" />
|
|
) : (
|
|
<Send className="size-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|