docs/FRONTEND_CHATBOT_PROMPT.md

🤖 Prompt Atualizado para Frontend com Chatbot

Para Claude Code no cidadao.ai-frontend:

Preciso implementar a integração com o backend do Cidadão.AI incluindo um chatbot conversacional que permite aos usuários interagir naturalmente com os agentes de IA.

Contexto:
- O backend está funcionando em http://localhost:8000 (ou https://neural-thinker-cidadao-ai-backend.hf.space)
- Temos 8 agentes de IA funcionais, cada um com personalidade brasileira
- Sistema funciona em modo DEMO ou REAL (com API key do Portal da Transparência)

IMPORTANTE: Preciso implementar um CHATBOT CONVERSACIONAL além das páginas:

1. **Chatbot Interface** (componente global ou página /chat)
   - Interface de chat estilo WhatsApp/Telegram
   - Conversa natural com os agentes (Abaporu, Zumbi, etc)
   - Sugestões de perguntas rápidas
   - Mostra qual agente está respondendo
   - Integração com ações (iniciar investigação, ver relatórios)
   - Pode ser flutuante (canto inferior) ou página dedicada

2. **Fluxo Conversacional**:
   Usuário: "Quero investigar contratos suspeitos"
   Abaporu: "Claro! Vou coordenar a investigação. Qual órgão?"
   Usuário: "Ministério da Saúde"
   Zumbi: "Iniciando análise de anomalias no Min. Saúde..."
   [Mostra progresso e resultados no chat]

3. **Páginas principais** (já mencionadas):
   - Nova Investigação (/investigations/new)
   - Dashboard em Tempo Real (/investigations/[id])
   - Landing Page melhorada

4. **Integração Chat + Páginas**:
   - Chat pode redirecionar para páginas específicas
   - Páginas podem abrir chat para dúvidas
   - Contexto compartilhado entre interfaces

Exemplos completos em:
/home/anderson-henrique/Documentos/cidadao.ai/cidadao.ai-backend/docs/frontend-examples/
- ChatbotInterface.tsx (NOVO - interface completa do chatbot)
- NewInvestigationPage.tsx
- InvestigationDashboard.tsx

Features do Chatbot:
- Detecta intenção do usuário (investigar, analisar, gerar relatório)
- Mostra avatar e nome do agente respondendo
- Indicador de "digitando..." enquanto processa
- Sugestões de perguntas contextuais
- Botões de ação inline (ex: "Iniciar Investigação")
- Histórico da conversa
- Modo minimizado/expandido

Integração Backend:
- Use o endpoint /api/v1/chat para conversas
- SSE para respostas em streaming
- Contexto de investigação mantido entre mensagens

Por favor implemente primeiro o chatbot, pois é a interface mais intuitiva para os cidadãos interagirem com o sistema.

🎯 Arquitetura do Chatbot

Componente Principal

// components/chat/ChatbotInterface.tsx
- Interface completa do chat
- Gerenciamento de mensagens
- Detecção de intenção
- Renderização de agentes

// hooks/useChatbot.ts
- Hook para abrir/fechar chat
- Estado global do chat
- Integração com API

Integração com Backend

// Endpoint de chat
POST /api/v1/chat
{
  message: string
  context?: {
    investigationId?: string
    previousAgent?: string
  }
}

// Resposta
{
  agent: "zumbi",
  message: "Detectei 15 anomalias...",
  metadata: {
    confidence: 0.92,
    nextActions: ["view_details", "generate_report"]
  }
}

Estados do Chat

1. Idle: Aguardando input
2. Processing: Agente processando
3. Streaming: Recebendo resposta
4. Action: Mostrando botões de ação

Fluxos Conversacionais

1. Investigação Guiada

   • Bot pergunta órgão
   • Bot pergunta período
   • Bot confirma e inicia

2. Consulta de Resultados

   • Lista investigações
   • Mostra resumos
   • Permite drill-down

3. Geração de Relatórios

   • Escolhe formato
   • Preview no chat
   • Download direto

---

Esse chatbot tornará o sistema muito mais acessível para cidadãos comuns! 🤖💬