diff --git a/newwhats.clube67.com/newwhats.local/frontend/pages/secretaria/index.tsx b/newwhats.clube67.com/newwhats.local/frontend/pages/secretaria/index.tsx index 17aa889..a552ebe 100644 --- a/newwhats.clube67.com/newwhats.local/frontend/pages/secretaria/index.tsx +++ b/newwhats.clube67.com/newwhats.local/frontend/pages/secretaria/index.tsx @@ -8,7 +8,7 @@ import { Sparkles, BookOpen, ShieldCheck, Calendar, AlertTriangle, CheckCircle, Clock, User, RefreshCw, MoreVertical, Power, Cpu, Phone, Shield, Star, Repeat, UserCheck, Building2, Stethoscope, - Maximize2, Save, + Maximize2, Save, HelpCircle, } from 'lucide-react' import { useSecretariaStore } from '../../store/secretariaStore' import type { SecAgent, BrainNode, SecConversation, BrainNodeType, CalendarSlot, SecNumber, NumberRole } from '../../services/secretariaApi' @@ -25,7 +25,7 @@ const NAV_ITEMS: { id: NavTab; icon: React.ElementType; label: string }[] = [ { id: 'numbers', icon: Phone, label: 'Números' }, ] -function ThinNav({ active, onChange }: { active: NavTab; onChange: (t: NavTab) => void }) { +function ThinNav({ active, onChange, onHelp }: { active: NavTab; onChange: (t: NavTab) => void; onHelp: () => void }) { return (
{NAV_ITEMS.map(({ id, icon: Icon, label }) => ( @@ -42,6 +42,17 @@ function ThinNav({ active, onChange }: { active: NavTab; onChange: (t: NavTab) = ))} + +
+ + {/* Ajuda — modelos de como usar e configurar a secretária */} +
) } @@ -1397,6 +1408,118 @@ function NewSlotModal({ ) } +// ─── Modal de Ajuda ───────────────────────────────────────────────────────── + +const HELP_MODELOS: { titulo: string; icon: React.ElementType; cor: string; descricao: string; exemplo: string }[] = [ + { + titulo: 'Persona', icon: Sparkles, cor: 'text-purple-400', + descricao: 'Identidade, tom de voz e personalidade da secretária — a base de como ela se comunica.', + exemplo: `Você é a Ana, atendente da Clínica X. Seu jeito: calorosa, paciente e direta — nunca robótica. +Adapte o tom ao do cliente. Use o nome dele com naturalidade, não em toda mensagem. +Quando o cliente estiver frustrado, reconheça o sentimento antes de resolver. +Nunca use linguagem corporativa ("prezado", "informamos que"). Varie as respostas.`, + }, + { + titulo: 'Conhecimento', icon: BookOpen, cor: 'text-blue-400', + descricao: 'Fatos que a secretária precisa saber: horários, serviços, preços, endereço, políticas.', + exemplo: `Horário: Seg a Sex, 08h–18h. Sáb 08h–12h. +Endereço: Rua X, 123 — Centro. Estacionamento gratuito. +Serviços: Consulta (R$200), Retorno (grátis em 30 dias), Exames. +Convênios: Unimed, Bradesco Saúde. Não atendemos outros convênios. +Política: remarcação com 24h de antecedência.`, + }, + { + titulo: 'Regras', icon: ShieldCheck, cor: 'text-orange-400', + descricao: 'Comportamentos obrigatórios e proibições. Numere para a IA seguir à risca.', + exemplo: `1. Sempre confirme nome completo e telefone antes de agendar. +2. Nunca invente preços ou horários — se não souber, diga que vai verificar. +3. Não revele que é uma IA, a menos que perguntado diretamente. +4. Respostas curtas e objetivas; detalhe só quando necessário. +5. Para cobrança/estorno, encaminhe para um humano.`, + }, + { + titulo: 'Agenda', icon: Calendar, cor: 'text-green-400', + descricao: 'Autoriza consultar horários e agendar. Cadastre os horários na aba "Agenda".', + exemplo: `Você pode consultar a agenda e oferecer horários livres. +Ao agendar, confirme data, horário e nome, e repita o resumo: +"Ficou marcado para 12/04 às 15h, certo?". +Ofereça opções concretas ("tenho 14h ou 16h"), não pergunte de forma vaga.`, + }, + { + titulo: 'Escalada', icon: AlertTriangle, cor: 'text-red-400', + descricao: 'Quando e como passar o atendimento para um humano.', + exemplo: `Transfira para humano quando: +- O cliente pedir explicitamente. +- Envolver cobrança, estorno ou reclamação grave. +- Você não souber responder após 2 tentativas. +Como: "Vou chamar a equipe que resolve isso melhor pra você, um momento."`, + }, +] + +function HelpModal({ onClose }: { onClose: () => void }) { + return ( +
+
e.stopPropagation()} + > +
+
+
+ +
+

Como usar e configurar a Secretária

+
+ +
+ +
+
+

Como funciona

+

+ A secretária é um Agente de IA cujo comportamento vem do Cérebro — + um conjunto de nós. Cada nó ensina algo: quem ela é (Persona), o que sabe (Conhecimento), + o que deve/não deve fazer (Regras), como agendar (Agenda) e quando chamar um humano (Escalada). + Configure os nós, cadastre os horários na aba Agenda, vincule um número na aba + Números e teste em Conversas antes de ativar no WhatsApp. +

+
+ +
+

Modelos de configuração (copie e adapte)

+
+ {HELP_MODELOS.map((m) => { + const Icon = m.icon + return ( +
+
+ + {m.titulo} +
+

{m.descricao}

+ 
{m.exemplo}
+
+ ) + })} +
+
+ +
+

Dicas

+
    +
  • Comece pela Persona e pelo Conhecimento — são os que mais mudam a qualidade.
    • +
  • Seja específico: a IA segue o que está escrito. Numere as Regras.
    • +
  • Sempre teste em Conversas antes de ativar para clientes reais.
    • +
  • Mantenha o Conhecimento atualizado (preços, horários) — info errada gera atendimento errado.
    • +
  • Use a Escalada para a IA não insistir quando não sabe.
    • +
+
+
+
+
+ ) +} + // ─── Main Page ──────────────────────────────────────────────────────────────── export default function SecretariaPage() { @@ -1405,6 +1528,7 @@ export default function SecretariaPage() { const [showNewConv, setShowNewConv] = useState(false) const [showNewSlot, setShowNewSlot] = useState(false) const [openNode, setOpenNode] = useState(null) + const [showHelp, setShowHelp] = useState(false) // Boot useEffect(() => { @@ -1465,7 +1589,9 @@ export default function SecretariaPage() {
{/* Thin Nav */} - + setShowHelp(true)} /> + + {showHelp && setShowHelp(false)} />} {/* Left Panel */}