import { useEffect, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; const WORKSPACE_HEIGHT = 660; function ChannelBadge({ channel }) { const colors = { WhatsApp: '#2bb741', Email: '#e5a22a', SMS: '#00a4b7', }; return ( {channel} ); } function UnreadBadge({ count }) { if (!count) return null; return ( {count > 99 ? '99+' : count} ); } function buildSuggestedReplies(conversation) { const lastMessage = conversation?.lastMessage || conversation?.messages?.at(-1)?.text || ''; const firstName = conversation?.name?.split(' ')?.[0] || 'voce'; const lowerContext = lastMessage.toLowerCase(); if ( lowerContext.includes('fatura') || lowerContext.includes('cobranca') || lowerContext.includes('pagamento') ) { return [ `${firstName}, vou conferir os dados financeiros e ja te retorno com a posicao correta.`, 'Recebi sua mensagem sobre cobranca. Vou validar o historico antes de seguir com a orientacao.', 'Consigo te ajudar com isso. Pode me confirmar o CPF/CNPJ ou protocolo vinculado ao atendimento?', ]; } if ( lowerContext.includes('endereco') || lowerContext.includes('cadastro') || lowerContext.includes('atualizar') ) { return [ `${firstName}, vou validar seu cadastro e confirmar se a alteracao ja foi registrada.`, 'Para seguir com a atualizacao, me confirme por favor os dados que precisam ser ajustados.', 'Entendi. Vou verificar o cadastro atual e te retorno com o proximo passo.', ]; } if ( lowerContext.includes('ligar') || lowerContext.includes('telefone') || lowerContext.includes('retorno') ) { return [ `${firstName}, consigo organizar esse retorno. Qual o melhor horario para contato?`, 'Vou registrar sua solicitacao e direcionar o retorno para o time responsavel.', 'Obrigado pelo aviso. Vou confirmar disponibilidade e te retorno por aqui.', ]; } return [ `${firstName}, recebi sua mensagem e vou verificar o contexto para te orientar corretamente.`, 'Entendi. Vou analisar as informacoes do atendimento e retorno com o melhor encaminhamento.', 'Posso acionar o time responsavel e te atualizar por aqui assim que tiver uma posicao.', ]; } export function MessagesWorkspace({ conversations, activeConversationId, onSelectConversation, isWideDesktop = false, isDesktop = false, isTablet = false, isMobile = false, }) { const navigate = useNavigate(); const recentConversations = conversations.slice(0, 3); const activeConversation = recentConversations.find((conversation) => conversation.id === activeConversationId) || recentConversations[0] || conversations[0]; const safeActiveConversation = activeConversation || { id: 'empty', name: 'Nenhuma conversa', status: 'offline', messages: [], }; const suggestedReplies = useMemo( () => buildSuggestedReplies(safeActiveConversation), [safeActiveConversation], ); const [selectedReplyIndex, setSelectedReplyIndex] = useState(0); const [noteDraft, setNoteDraft] = useState(''); const [notes, setNotes] = useState(() => { try { return JSON.parse(window.localStorage.getItem('agentNotes') || '[]'); } catch { return []; } }); const selectedReply = suggestedReplies[selectedReplyIndex] || suggestedReplies[0]; const managerMessages = [ { id: 'sla', title: 'Comunicado do supervisor', text: 'Priorizar atendimentos com SLA abaixo de 15 minutos antes de abrir novos casos.', }, { id: 'script', title: 'Atualizacao de script', text: 'Use o novo roteiro de confirmacao de dados em atendimentos financeiros.', }, ]; useEffect(() => { setSelectedReplyIndex(0); }, [safeActiveConversation.id]); useEffect(() => { window.localStorage.setItem('agentNotes', JSON.stringify(notes)); }, [notes]); function selectPreviousReply() { setSelectedReplyIndex((current) => current === 0 ? suggestedReplies.length - 1 : current - 1, ); } function selectNextReply() { setSelectedReplyIndex((current) => (current + 1) % suggestedReplies.length); } function saveNote() { const text = noteDraft.trim(); if (!text) return; setNotes((current) => [ { id: Date.now(), text, time: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }), }, ...current, ]); setNoteDraft(''); } const gridTemplateColumns = isMobile ? '1fr' : isWideDesktop ? 'minmax(240px, 0.95fr) minmax(360px, 1.8fr) minmax(220px, 0.8fr)' : isDesktop || isTablet ? 'minmax(260px, 320px) minmax(0, 1fr)' : '1fr'; const panelHeight = isMobile ? 'auto' : WORKSPACE_HEIGHT; return (
Conversas

Ultimos 3 atendimentos em tempo real.

{recentConversations.map((conversation) => { const isActive = conversation.id === safeActiveConversation.id; return ( ); })} {conversations.length > 3 ? ( ) : null}
{safeActiveConversation.name} {safeActiveConversation.status === 'online' ? 'Online agora' : 'Offline'}
{safeActiveConversation.messages.map((message) => { const isAgent = message.from === 'agent'; return (
{message.text}
); })}
Resposta sugerida