Implantação da geração de mensagem de forma livre e mudança na engine de mensagem

This commit is contained in:
2026-08-24 17:32:16 -03:00
parent 94bbe7556f
commit 88f19dd8f5
77 changed files with 4650 additions and 25 deletions

View File

@@ -0,0 +1,114 @@
<div class="max-w-3xl space-y-6">
<div>
<h1 class="text-2xl font-bold text-white">WhatsApp — conexão</h1>
<p class="text-gray-400 text-sm mt-0.5">
Pareia o número da empresa com este servidor lendo um QR code, como no WhatsApp Web.
</p>
</div>
<%# O aviso fica na TELA, não só no código: quem parear precisa saber o que
está aceitando. %>
<div class="bg-amber-500/10 border border-amber-500/30 rounded-2xl px-5 py-4 text-sm text-amber-200 space-y-1">
<p class="font-bold">⚠️ Este canal não é oficial.</p>
<p>
A conexão por QR usa a porta do WhatsApp Web por engenharia reversa. É gratuita e ilimitada,
mas está <strong>fora dos Termos do WhatsApp</strong> — a Meta pode banir o número sem aviso.
Use um <strong>chip dedicado</strong>, nunca o número principal da operação.
</p>
<p>
Disparo em rajada é o que mais causa banimento. O intervalo entre mensagens fica em
<%= link_to 'Configurações → Notificações', admin_configuracao_notificacao_path,
data: { turbo: false }, class: 'underline hover:text-white' %>
(hoje: <strong><%= @config.intervalo_envio %>s</strong>).
</p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6" data-estado-url="<%= status_admin_whatsapp_sessao_path %>" id="painel-whatsapp">
<% if @estado['conectado'] %>
<div class="flex items-center gap-3">
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<div>
<p class="text-white font-bold">Conectado</p>
<p class="text-sm text-gray-400">
Número <span class="font-mono text-gray-300"><%= @estado['numero'] %></span>
<% if @config.whatsapp_conectado_em %> · desde <%= l @config.whatsapp_conectado_em, format: :short rescue @config.whatsapp_conectado_em %><% end %>
</p>
</div>
</div>
<div class="mt-6 border-t border-white/5 pt-5 space-y-4">
<%= form_with url: testar_admin_whatsapp_sessao_path, method: :post, data: { turbo: false },
class: 'flex flex-wrap items-end gap-3' do |f| %>
<div>
<%= f.label :numero, 'Enviar teste para', class: 'block text-gray-400 text-sm mb-1' %>
<%= f.text_field :numero, placeholder: '(11) 92005-1157',
class: 'bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
</div>
<%= f.submit 'Enviar teste',
class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
<% end %>
<%= button_to 'Desconectar', desconectar_admin_whatsapp_sessao_path, method: :delete,
form: { data: { turbo_confirm: 'Isso encerra a sessão e para TODOS os envios de WhatsApp até você ler o QR de novo. Confirmar?' } },
class: 'text-red-400 hover:text-red-300 text-sm' %>
</div>
<% elsif @estado['qr'].present? %>
<div class="flex flex-col items-center gap-4 text-center">
<p class="text-white font-bold">Leia o QR code</p>
<p class="text-sm text-gray-400 max-w-md">
No celular do chip dedicado: WhatsApp → <strong>Aparelhos conectados</strong> →
<strong>Conectar um aparelho</strong> → aponte para o código abaixo.
</p>
<%# O QR expira em ~20s e a ponte gera outro — o polling abaixo troca a
imagem sozinho, senão o operador ficaria lendo um código morto. %>
<img src="<%= @estado['qr'] %>" alt="QR code do WhatsApp" width="320" height="320"
class="rounded-xl bg-white p-3" id="qr-whatsapp">
<p class="text-xs text-gray-500">O código se renova sozinho a cada poucos segundos.</p>
</div>
<% else %>
<div class="flex items-start gap-3">
<span class="w-3 h-3 rounded-full bg-red-500 mt-1.5"></span>
<div>
<p class="text-white font-bold">Desconectado</p>
<p class="text-sm text-gray-400 mt-1">
<%= @estado['erro'].presence || @estado['ultimo_erro'].presence ||
'A ponte ainda não gerou um QR code. Aguarde alguns segundos e recarregue.' %>
</p>
<% unless @cliente.configurado? %>
<p class="text-sm text-amber-300 mt-3">
Falta configurar a ponte: defina <code>WHATSAPP_TOKEN</code> no <code>.env</code>
(o mesmo valor do container <code>whatsapp</code>) e suba os containers.
</p>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
<script>
// Polling do estado enquanto não está conectado: o QR expira sozinho e a
// página precisa buscar o novo, senão o operador lê um código já morto.
(function () {
var painel = document.getElementById('painel-whatsapp');
if (!painel) return;
var conectado = <%= @estado['conectado'] ? 'true' : 'false' %>;
if (conectado) return;
var url = painel.dataset.estadoUrl;
setInterval(function () {
fetch(url, { headers: { 'Accept': 'application/json' } })
.then(function (r) { return r.json(); })
.then(function (dados) {
// Conectou: recarrega para mostrar o painel de conectado.
if (dados.conectado) { window.location.reload(); return; }
var img = document.getElementById('qr-whatsapp');
if (dados.qr && img) { img.src = dados.qr; }
else if (dados.qr && !img) { window.location.reload(); }
})
.catch(function () { /* ponte fora do ar: a próxima tentativa resolve */ });
}, 8000);
})();
</script>