feat: dispositivos e ajustes de csat e relatórios
This commit is contained in:
codex-bot
parent
25d2a9b062
commit
e0ef66555d
86 changed files with 5811 additions and 992 deletions
203
src/components/tickets/ticket-chat-panel.tsx
Normal file
203
src/components/tickets/ticket-chat-panel.tsx
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
"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 { Textarea } from "@/components/ui/textarea"
|
||||
import { Card, CardContent, CardHeader, CardTitle } 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"
|
||||
|
||||
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")
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
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 messagesEndRef = useRef<HTMLDivElement | null>(null)
|
||||
const [draft, setDraft] = useState("")
|
||||
const [isSending, setIsSending] = useState(false)
|
||||
|
||||
const messages = chat?.messages ?? []
|
||||
const canPost = Boolean(chat?.canPost && viewerId)
|
||||
const chatEnabled = Boolean(chat?.chatEnabled)
|
||||
|
||||
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 "Você não tem permissão para enviar mensagens"
|
||||
return null
|
||||
}, [canPost, chatEnabled])
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!viewerId || !canPost || draft.trim().length === 0) return
|
||||
if (draft.length > MAX_MESSAGE_LENGTH) {
|
||||
toast.error(`Mensagem muito longa (máx. ${MAX_MESSAGE_LENGTH} caracteres).`)
|
||||
return
|
||||
}
|
||||
setIsSending(true)
|
||||
toast.dismiss("ticket-chat")
|
||||
toast.loading("Enviando mensagem...", { id: "ticket-chat" })
|
||||
try {
|
||||
await postChatMessage({
|
||||
ticketId: ticketId as Id<"tickets">,
|
||||
actorId: viewerId as Id<"users">,
|
||||
body: draft,
|
||||
})
|
||||
setDraft("")
|
||||
toast.success("Mensagem enviada!", { id: "ticket-chat" })
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.error("Não foi possível enviar a mensagem.", { id: "ticket-chat" })
|
||||
} finally {
|
||||
setIsSending(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!viewerId) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader className="flex flex-row items-center justify-between gap-2">
|
||||
<CardTitle className="text-base font-semibold text-neutral-800">Chat do atendimento</CardTitle>
|
||||
{!chatEnabled ? (
|
||||
<span className="text-xs font-medium text-neutral-500">Chat desativado</span>
|
||||
) : null}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{chat === undefined ? (
|
||||
<div className="flex items-center justify-center gap-2 rounded-lg border border-dashed border-slate-200 py-6 text-sm text-neutral-500">
|
||||
<Spinner className="size-4" /> Carregando mensagens...
|
||||
</div>
|
||||
) : messages.length === 0 ? (
|
||||
<div className="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-4 py-6 text-center text-sm text-neutral-500">
|
||||
Nenhuma mensagem registrada no chat até o momento.
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-72 space-y-3 overflow-y-auto pr-2">
|
||||
{messages.map((message) => {
|
||||
const isOwn = String(message.authorId) === String(viewerId)
|
||||
return (
|
||||
<div
|
||||
key={message.id}
|
||||
className={cn(
|
||||
"flex flex-col gap-1 rounded-lg border px-3 py-2 text-sm",
|
||||
isOwn ? "border-slate-300 bg-slate-50" : "border-slate-200 bg-white"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="font-semibold text-neutral-800">{message.authorName ?? "Usuário"}</span>
|
||||
<span className="text-xs text-neutral-500">{formatRelative(message.createdAt)}</span>
|
||||
</div>
|
||||
<div
|
||||
className="prose prose-sm max-w-none text-neutral-700"
|
||||
dangerouslySetInnerHTML={{ __html: message.body }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Textarea
|
||||
value={draft}
|
||||
onChange={(event) => setDraft(event.target.value)}
|
||||
placeholder={disabledReason ?? "Digite uma mensagem"}
|
||||
rows={3}
|
||||
disabled={isSending || !canPost || !chatEnabled}
|
||||
/>
|
||||
<div className="flex items-center justify-between text-xs text-neutral-500">
|
||||
<span>{draft.length}/{MAX_MESSAGE_LENGTH}</span>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
{!chatEnabled ? (
|
||||
<span className="text-neutral-500">Chat indisponível</span>
|
||||
) : null}
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={handleSend}
|
||||
disabled={isSending || !canPost || !chatEnabled || draft.trim().length === 0}
|
||||
>
|
||||
{isSending ? <Spinner className="mr-2 size-4" /> : null}
|
||||
Enviar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{disabledReason && chatEnabled ? (
|
||||
<p className="text-xs text-neutral-500">{disabledReason}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue