e66b3cce92
- Remove scrollbars com overflow: hidden no CSS - Aumenta tamanho da janela minimizada (210x52) para não cortar badge - Adiciona bordas arredondadas (rounded-2xl) no chat expandido - Adiciona sombra (shadow-xl) no chat expandido 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
606 lines
20 KiB
TypeScript
606 lines
20 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from "react"
|
|
import { invoke } from "@tauri-apps/api/core"
|
|
import { listen } from "@tauri-apps/api/event"
|
|
import { Store } from "@tauri-apps/plugin-store"
|
|
import { appLocalDataDir, join } from "@tauri-apps/api/path"
|
|
import { open } from "@tauri-apps/plugin-dialog"
|
|
import { Send, X, Loader2, MessageCircle, Paperclip, FileText, Image as ImageIcon, File, User, ChevronUp, Minimize2 } from "lucide-react"
|
|
import type { ChatMessage, ChatMessagesResponse, SendMessageResponse } from "./types"
|
|
|
|
const STORE_FILENAME = "machine-agent.json"
|
|
const MAX_MESSAGES_IN_MEMORY = 200 // Limite de mensagens para evitar memory leak
|
|
|
|
// Tipos de arquivo permitidos
|
|
const ALLOWED_EXTENSIONS = [
|
|
"jpg", "jpeg", "png", "gif", "webp",
|
|
"pdf", "txt", "doc", "docx", "xls", "xlsx",
|
|
]
|
|
|
|
interface UploadedAttachment {
|
|
storageId: string
|
|
name: string
|
|
size?: number
|
|
type?: string
|
|
}
|
|
|
|
function getFileIcon(fileName: string) {
|
|
const ext = fileName.toLowerCase().split(".").pop() ?? ""
|
|
if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext)) {
|
|
return <ImageIcon className="size-4" />
|
|
}
|
|
if (["pdf", "doc", "docx", "txt"].includes(ext)) {
|
|
return <FileText className="size-4" />
|
|
}
|
|
return <File className="size-4" />
|
|
}
|
|
|
|
interface ChatWidgetProps {
|
|
ticketId: string
|
|
}
|
|
|
|
export function ChatWidget({ ticketId }: ChatWidgetProps) {
|
|
const [messages, setMessages] = useState<ChatMessage[]>([])
|
|
const [inputValue, setInputValue] = useState("")
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [isSending, setIsSending] = useState(false)
|
|
const [isUploading, setIsUploading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [ticketInfo, setTicketInfo] = useState<{ ref: number; subject: string; agentName: string } | null>(null)
|
|
const [hasSession, setHasSession] = useState(false)
|
|
const [pendingAttachments, setPendingAttachments] = useState<UploadedAttachment[]>([])
|
|
const [isMinimized, setIsMinimized] = useState(false)
|
|
const [unreadCount, setUnreadCount] = useState(0)
|
|
|
|
const messagesEndRef = useRef<HTMLDivElement>(null)
|
|
const lastFetchRef = useRef<number>(0)
|
|
const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
|
const hadSessionRef = useRef<boolean>(false)
|
|
|
|
// Scroll para o final quando novas mensagens chegam
|
|
const scrollToBottom = useCallback(() => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
scrollToBottom()
|
|
}, [messages, scrollToBottom])
|
|
|
|
// Auto-minimizar quando a sessão termina (hasSession muda de true para false)
|
|
useEffect(() => {
|
|
if (hadSessionRef.current && !hasSession) {
|
|
setIsMinimized(true)
|
|
// Redimensionar janela para modo minimizado
|
|
invoke("set_chat_minimized", { ticketId, minimized: true }).catch(err => {
|
|
console.error("Erro ao minimizar janela automaticamente:", err)
|
|
})
|
|
}
|
|
hadSessionRef.current = hasSession
|
|
}, [hasSession, ticketId])
|
|
|
|
// Carregar configuracao do store
|
|
const loadConfig = useCallback(async () => {
|
|
try {
|
|
const appData = await appLocalDataDir()
|
|
const storePath = await join(appData, STORE_FILENAME)
|
|
const store = await Store.load(storePath)
|
|
const token = await store.get<string>("token")
|
|
const config = await store.get<{ apiBaseUrl: string }>("config")
|
|
|
|
if (!token || !config?.apiBaseUrl) {
|
|
setError("Máquina não registrada")
|
|
setIsLoading(false)
|
|
return null
|
|
}
|
|
|
|
return { token, baseUrl: config.apiBaseUrl }
|
|
} catch (err) {
|
|
setError("Erro ao carregar configuracao")
|
|
setIsLoading(false)
|
|
return null
|
|
}
|
|
}, [])
|
|
|
|
// Buscar mensagens
|
|
const fetchMessages = useCallback(async (baseUrl: string, token: string, since?: number) => {
|
|
try {
|
|
const response = await invoke<ChatMessagesResponse>("fetch_chat_messages", {
|
|
baseUrl,
|
|
token,
|
|
ticketId,
|
|
since: since ?? null,
|
|
})
|
|
|
|
setHasSession(response.hasSession)
|
|
|
|
if (response.messages.length > 0) {
|
|
if (since) {
|
|
// Adicionar apenas novas mensagens (com limite para evitar memory leak)
|
|
setMessages(prev => {
|
|
const existingIds = new Set(prev.map(m => m.id))
|
|
const newMsgs = response.messages.filter(m => !existingIds.has(m.id))
|
|
const combined = [...prev, ...newMsgs]
|
|
// Manter apenas as últimas MAX_MESSAGES_IN_MEMORY mensagens
|
|
return combined.slice(-MAX_MESSAGES_IN_MEMORY)
|
|
})
|
|
} else {
|
|
// Primeira carga (já limitada)
|
|
setMessages(response.messages.slice(-MAX_MESSAGES_IN_MEMORY))
|
|
}
|
|
lastFetchRef.current = Math.max(...response.messages.map(m => m.createdAt))
|
|
}
|
|
|
|
return response
|
|
} catch (err) {
|
|
console.error("Erro ao buscar mensagens:", err)
|
|
return null
|
|
}
|
|
}, [ticketId])
|
|
|
|
// Buscar info da sessao
|
|
const fetchSessionInfo = useCallback(async (baseUrl: string, token: string) => {
|
|
try {
|
|
const sessions = await invoke<Array<{
|
|
ticketId: string
|
|
ticketRef: number
|
|
ticketSubject: string
|
|
agentName: string
|
|
}>>("fetch_chat_sessions", { baseUrl, token })
|
|
|
|
const session = sessions.find(s => s.ticketId === ticketId)
|
|
if (session) {
|
|
setTicketInfo({
|
|
ref: session.ticketRef,
|
|
subject: session.ticketSubject,
|
|
agentName: session.agentName,
|
|
})
|
|
}
|
|
} catch (err) {
|
|
console.error("Erro ao buscar sessao:", err)
|
|
}
|
|
}, [ticketId])
|
|
|
|
// Inicializacao
|
|
useEffect(() => {
|
|
let mounted = true
|
|
|
|
const init = async () => {
|
|
const config = await loadConfig()
|
|
if (!config || !mounted) return
|
|
|
|
const { baseUrl, token } = config
|
|
|
|
// Buscar sessao e mensagens iniciais
|
|
await Promise.all([
|
|
fetchSessionInfo(baseUrl, token),
|
|
fetchMessages(baseUrl, token),
|
|
])
|
|
|
|
if (!mounted) return
|
|
setIsLoading(false)
|
|
|
|
// Iniciar polling (2 segundos para maior responsividade)
|
|
pollIntervalRef.current = setInterval(async () => {
|
|
await fetchMessages(baseUrl, token, lastFetchRef.current)
|
|
}, 2000)
|
|
}
|
|
|
|
init()
|
|
|
|
// Listener para eventos de nova mensagem do Tauri
|
|
const unlistenNewMessage = listen<{ ticketId: string; message: ChatMessage }>(
|
|
"raven://chat/new-message",
|
|
(event) => {
|
|
if (event.payload.ticketId === ticketId) {
|
|
setMessages(prev => {
|
|
if (prev.some(m => m.id === event.payload.message.id)) {
|
|
return prev
|
|
}
|
|
const combined = [...prev, event.payload.message]
|
|
// Manter apenas as últimas MAX_MESSAGES_IN_MEMORY mensagens
|
|
return combined.slice(-MAX_MESSAGES_IN_MEMORY)
|
|
})
|
|
}
|
|
}
|
|
)
|
|
|
|
// Listener para atualização de mensagens não lidas
|
|
const unlistenUnread = listen<{ totalUnread: number; sessions: Array<{ ticketId: string; unreadCount: number }> }>(
|
|
"raven://chat/unread-update",
|
|
(event) => {
|
|
// Encontrar o unread count para este ticket
|
|
const session = event.payload.sessions?.find(s => s.ticketId === ticketId)
|
|
if (session) {
|
|
setUnreadCount(session.unreadCount ?? 0)
|
|
}
|
|
}
|
|
)
|
|
|
|
return () => {
|
|
mounted = false
|
|
if (pollIntervalRef.current) {
|
|
clearInterval(pollIntervalRef.current)
|
|
}
|
|
unlistenNewMessage.then(unlisten => unlisten())
|
|
unlistenUnread.then(unlisten => unlisten())
|
|
}
|
|
}, [ticketId, loadConfig, fetchMessages, fetchSessionInfo])
|
|
|
|
// Selecionar arquivo para anexar
|
|
const handleAttach = async () => {
|
|
if (isUploading || isSending) return
|
|
|
|
try {
|
|
const selected = await open({
|
|
multiple: false,
|
|
filters: [{
|
|
name: "Arquivos permitidos",
|
|
extensions: ALLOWED_EXTENSIONS,
|
|
}],
|
|
})
|
|
|
|
if (!selected) return
|
|
|
|
// O retorno pode ser string (path único) ou objeto com path
|
|
const filePath = typeof selected === "string" ? selected : (selected as { path: string }).path
|
|
|
|
setIsUploading(true)
|
|
|
|
const config = await loadConfig()
|
|
if (!config) {
|
|
setIsUploading(false)
|
|
return
|
|
}
|
|
|
|
const attachment = await invoke<UploadedAttachment>("upload_chat_file", {
|
|
baseUrl: config.baseUrl,
|
|
token: config.token,
|
|
filePath,
|
|
})
|
|
|
|
setPendingAttachments(prev => [...prev, attachment])
|
|
} catch (err) {
|
|
console.error("Erro ao anexar arquivo:", err)
|
|
alert(typeof err === "string" ? err : "Erro ao anexar arquivo")
|
|
} finally {
|
|
setIsUploading(false)
|
|
}
|
|
}
|
|
|
|
// Remover anexo pendente
|
|
const handleRemoveAttachment = (storageId: string) => {
|
|
setPendingAttachments(prev => prev.filter(a => a.storageId !== storageId))
|
|
}
|
|
|
|
// Enviar mensagem
|
|
const handleSend = async () => {
|
|
if ((!inputValue.trim() && pendingAttachments.length === 0) || isSending) return
|
|
|
|
const messageText = inputValue.trim()
|
|
const attachmentsToSend = [...pendingAttachments]
|
|
setInputValue("")
|
|
setPendingAttachments([])
|
|
setIsSending(true)
|
|
|
|
try {
|
|
const config = await loadConfig()
|
|
if (!config) {
|
|
setIsSending(false)
|
|
setInputValue(messageText)
|
|
setPendingAttachments(attachmentsToSend)
|
|
return
|
|
}
|
|
|
|
const response = await invoke<SendMessageResponse>("send_chat_message", {
|
|
baseUrl: config.baseUrl,
|
|
token: config.token,
|
|
ticketId,
|
|
body: messageText || (attachmentsToSend.length > 0 ? "[Anexo]" : ""),
|
|
attachments: attachmentsToSend.length > 0 ? attachmentsToSend : null,
|
|
})
|
|
|
|
// Adicionar mensagem localmente
|
|
setMessages(prev => [...prev, {
|
|
id: response.messageId,
|
|
body: messageText || (attachmentsToSend.length > 0 ? "[Anexo]" : ""),
|
|
authorName: "Voce",
|
|
isFromMachine: true,
|
|
createdAt: response.createdAt,
|
|
attachments: attachmentsToSend.map(a => ({
|
|
storageId: a.storageId,
|
|
name: a.name,
|
|
size: a.size,
|
|
type: a.type,
|
|
})),
|
|
}])
|
|
|
|
lastFetchRef.current = response.createdAt
|
|
} catch (err) {
|
|
console.error("Erro ao enviar mensagem:", err)
|
|
// Restaurar input e anexos em caso de erro
|
|
setInputValue(messageText)
|
|
setPendingAttachments(attachmentsToSend)
|
|
} finally {
|
|
setIsSending(false)
|
|
}
|
|
}
|
|
|
|
const handleMinimize = async () => {
|
|
setIsMinimized(true)
|
|
try {
|
|
await invoke("set_chat_minimized", { ticketId, minimized: true })
|
|
} catch (err) {
|
|
console.error("Erro ao minimizar janela:", err)
|
|
}
|
|
}
|
|
|
|
const handleExpand = async () => {
|
|
setIsMinimized(false)
|
|
try {
|
|
await invoke("set_chat_minimized", { ticketId, minimized: false })
|
|
} catch (err) {
|
|
console.error("Erro ao expandir janela:", err)
|
|
}
|
|
}
|
|
|
|
const handleClose = () => {
|
|
invoke("close_chat_window", { ticketId })
|
|
}
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault()
|
|
handleSend()
|
|
}
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex h-screen flex-col items-center justify-center bg-white">
|
|
<Loader2 className="size-8 animate-spin text-slate-400" />
|
|
<p className="mt-2 text-sm text-slate-500">Carregando chat...</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex h-screen flex-col items-center justify-center bg-white p-4">
|
|
<p className="text-sm text-red-600">{error}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Quando não há sessão, mostrar versão minimizada com indicador de offline
|
|
if (!hasSession) {
|
|
return (
|
|
<div className="flex h-full w-full items-end justify-end bg-transparent">
|
|
<div className="flex items-center gap-2 rounded-full bg-slate-200 px-4 py-2 text-slate-600 shadow-lg">
|
|
<MessageCircle className="size-4" />
|
|
<span className="text-sm font-medium">
|
|
{ticketInfo ? `Chat #${ticketInfo.ref}` : "Chat"}
|
|
</span>
|
|
<span className="size-2 rounded-full bg-slate-400" />
|
|
<span className="text-xs text-slate-500">Offline</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Versão minimizada (chip compacto igual web)
|
|
if (isMinimized) {
|
|
return (
|
|
<div className="flex h-full w-full items-end justify-end bg-transparent">
|
|
<button
|
|
onClick={handleExpand}
|
|
className="relative flex items-center gap-2 rounded-full bg-black px-4 py-2 text-white shadow-lg hover:bg-black/90"
|
|
>
|
|
<MessageCircle className="size-4" />
|
|
<span className="text-sm font-medium">
|
|
Chat #{ticketInfo?.ref}
|
|
</span>
|
|
<span className="size-2 rounded-full bg-emerald-400" />
|
|
<ChevronUp className="size-4" />
|
|
{/* Badge de mensagens não lidas */}
|
|
{unreadCount > 0 && (
|
|
<span className="absolute -right-1 -top-1 flex size-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold">
|
|
{unreadCount > 9 ? "9+" : unreadCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-screen flex-col overflow-hidden rounded-2xl bg-white shadow-xl">
|
|
{/* Header - arrastavel */}
|
|
<div
|
|
data-tauri-drag-region
|
|
className="flex items-center justify-between border-b border-slate-200 bg-slate-50 px-4 py-3 rounded-t-2xl"
|
|
>
|
|
<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>
|
|
<div className="flex items-center gap-2">
|
|
<p className="text-sm font-semibold text-slate-900">Chat</p>
|
|
<span className="flex items-center gap-1.5 text-xs text-emerald-600">
|
|
<span className="size-2 rounded-full bg-emerald-500 animate-pulse" />
|
|
Online
|
|
</span>
|
|
</div>
|
|
{ticketInfo && (
|
|
<p className="text-xs text-slate-500">
|
|
#{ticketInfo.ref} - {ticketInfo.agentName ?? "Suporte"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={handleMinimize}
|
|
className="rounded-md p-1.5 text-slate-500 hover:bg-slate-100"
|
|
title="Minimizar"
|
|
>
|
|
<Minimize2 className="size-4" />
|
|
</button>
|
|
<button
|
|
onClick={handleClose}
|
|
className="rounded-md p-1.5 text-slate-500 hover:bg-slate-100"
|
|
title="Fechar"
|
|
>
|
|
<X className="size-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mensagens */}
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
{messages.length === 0 ? (
|
|
<div className="flex h-full flex-col items-center justify-center text-center">
|
|
<p className="text-sm text-slate-400">
|
|
Nenhuma mensagem ainda
|
|
</p>
|
|
<p className="mt-1 text-xs text-slate-400">
|
|
O agente iniciará a conversa em breve
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{messages.map((msg) => {
|
|
// No desktop: isFromMachine=true significa mensagem do cliente (maquina)
|
|
// Layout igual à web: cliente à esquerda, agente à direita
|
|
const isAgent = !msg.isFromMachine
|
|
return (
|
|
<div
|
|
key={msg.id}
|
|
className={`flex gap-2 ${isAgent ? "flex-row-reverse" : "flex-row"}`}
|
|
>
|
|
{/* Avatar */}
|
|
<div
|
|
className={`flex size-7 shrink-0 items-center justify-center rounded-full ${
|
|
isAgent ? "bg-black text-white" : "bg-slate-200 text-slate-600"
|
|
}`}
|
|
>
|
|
{isAgent ? <MessageCircle className="size-3.5" /> : <User className="size-3.5" />}
|
|
</div>
|
|
|
|
{/* Bubble */}
|
|
<div
|
|
className={`max-w-[75%] rounded-2xl px-4 py-2 ${
|
|
isAgent
|
|
? "rounded-br-md bg-black text-white"
|
|
: "rounded-bl-md border border-slate-100 bg-white text-slate-900 shadow-sm"
|
|
}`}
|
|
>
|
|
{!isAgent && (
|
|
<p className="mb-1 text-xs font-medium text-slate-500">
|
|
{msg.authorName}
|
|
</p>
|
|
)}
|
|
<p className="whitespace-pre-wrap text-sm">{msg.body}</p>
|
|
{/* Anexos */}
|
|
{msg.attachments && msg.attachments.length > 0 && (
|
|
<div className="mt-2 space-y-1">
|
|
{msg.attachments.map((att) => (
|
|
<div
|
|
key={att.storageId}
|
|
className={`flex items-center gap-2 rounded-lg p-2 text-xs ${
|
|
isAgent ? "bg-white/10" : "bg-slate-100"
|
|
}`}
|
|
>
|
|
{getFileIcon(att.name)}
|
|
<span className="truncate">{att.name}</span>
|
|
{att.size && (
|
|
<span className="text-xs opacity-60">
|
|
({Math.round(att.size / 1024)}KB)
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
<p
|
|
className={`mt-1 text-right text-xs ${
|
|
isAgent ? "text-white/60" : "text-slate-400"
|
|
}`}
|
|
>
|
|
{formatTime(msg.createdAt)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Input */}
|
|
<div className="border-t border-slate-200 p-3">
|
|
{/* Anexos pendentes */}
|
|
{pendingAttachments.length > 0 && (
|
|
<div className="mb-2 flex flex-wrap gap-2">
|
|
{pendingAttachments.map((att) => (
|
|
<div
|
|
key={att.storageId}
|
|
className="flex items-center gap-1 rounded-lg bg-slate-100 px-2 py-1 text-xs"
|
|
>
|
|
{getFileIcon(att.name)}
|
|
<span className="max-w-[100px] truncate">{att.name}</span>
|
|
<button
|
|
onClick={() => handleRemoveAttachment(att.storageId)}
|
|
className="ml-1 rounded p-0.5 text-slate-400 hover:bg-slate-200 hover:text-slate-600"
|
|
>
|
|
<X className="size-3" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="flex items-end gap-2">
|
|
<textarea
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Digite sua mensagem..."
|
|
className="max-h-24 min-h-[36px] flex-1 resize-none rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
|
|
rows={1}
|
|
/>
|
|
<button
|
|
onClick={handleAttach}
|
|
disabled={isUploading || isSending}
|
|
className="flex size-9 items-center justify-center rounded-lg text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 disabled:opacity-50"
|
|
title="Anexar arquivo"
|
|
>
|
|
{isUploading ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<Paperclip className="size-4" />
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={handleSend}
|
|
disabled={(!inputValue.trim() && pendingAttachments.length === 0) || isSending}
|
|
className="flex size-9 items-center justify-center rounded-lg bg-black text-white transition hover:bg-black/90 disabled:opacity-50"
|
|
>
|
|
{isSending ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<Send className="size-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function formatTime(timestamp: number): string {
|
|
const date = new Date(timestamp)
|
|
return date.toLocaleTimeString("pt-BR", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})
|
|
}
|