{"id":634,"date":"2026-08-04T16:06:32","date_gmt":"2026-08-04T19:06:32","guid":{"rendered":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/portfolio-chat-suporte\/"},"modified":"2026-08-05T17:06:04","modified_gmt":"2026-08-05T20:06:04","slug":"portfolio-chat-suporte","status":"publish","type":"page","link":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/portfolio-chat-suporte\/","title":{"rendered":"Assistente de Suporte Guiado por Fluxo JSON, sem IA"},"content":{"rendered":"<style>\n.pf-wrap{max-width:1100px;margin:0 auto;font-size:16px;line-height:1.65}\n.pf-chamada{font-size:1.15rem;opacity:.85;margin:0 0 2rem}\n.pf-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}\n.pf-card{border:1px solid rgba(128,128,128,.3);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}\n.pf-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12)}\n.pf-card img{width:100%;height:180px;object-fit:cover;display:block;background:rgba(128,128,128,.12)}\n.pf-card-corpo{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;flex:1}\n.pf-card h3{margin:0;font-size:1.05rem;line-height:1.35}\n.pf-card p{margin:0;font-size:.92rem;opacity:.85;flex:1}\n.pf-chips{display:flex;flex-wrap:wrap;gap:.35rem}\n.pf-chip{font-size:.75rem;padding:.18rem .55rem;border-radius:999px;border:1px solid rgba(128,128,128,.35);opacity:.9}\n.pf-meta{font-size:.8rem;opacity:.7}\n.pf-cadeado{font-size:.8rem;opacity:.75}\n.pf-hero{margin:0 0 1.5rem}\n.pf-hero h1{margin:0 0 .4rem;line-height:1.2}\n.pf-secao{margin:2rem 0}\n.pf-secao h2{font-size:1.15rem;margin:0 0 .6rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75}\n.pf-galeria{display:grid;gap:1.2rem;margin:2rem 0}\n.pf-galeria figure{margin:0}\n.pf-galeria img{width:100%;border:1px solid rgba(128,128,128,.3);border-radius:8px;display:block}\n.pf-galeria figcaption{font-size:.85rem;opacity:.75;margin-top:.4rem}\n.pf-repo{border:1px solid rgba(128,128,128,.35);border-left-width:4px;border-radius:8px;padding:1rem 1.2rem;margin:2rem 0}\n.pf-repo h2{margin:0 0 .5rem;font-size:1rem;text-transform:uppercase;letter-spacing:.06em}\n.pf-repo pre{background:rgba(128,128,128,.12);padding:.7rem .9rem;border-radius:6px;overflow-x:auto;margin:.6rem 0;font-size:.85rem}\n.pf-contato{margin:2rem 0;padding-top:1.2rem;border-top:1px solid rgba(128,128,128,.3);font-size:.95rem}\n.pf-voltar{display:inline-block;margin-bottom:1rem;font-size:.9rem}\n@media (max-width:600px){.pf-card img{height:150px}}\n<\/style>\n<div class=\"pf-wrap\">\n  <a class=\"pf-voltar\" href=\"\/index.php\/portfolio-frontend\/\">\u2190 voltar ao portf\u00f3lio<\/a><\/p>\n<header class=\"pf-hero\">\n<p class=\"pf-meta\">08\/2025 &#8211; 08\/2026 \u00b7 1 semana<\/p>\n<p>Primeira linha de suporte t\u00e9cnico de um PABX em nuvem, com o di\u00e1logo inteiro declarado em JSON e nenhuma depend\u00eancia de IA.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">JavaScript (ES6+)<\/span><span class=\"pf-chip\">HTML5<\/span><span class=\"pf-chip\">CSS3<\/span><span class=\"pf-chip\">JSON<\/span><span class=\"pf-chip\">m\u00e1quina de estados<\/span><\/div>\n<\/header>\n<section class=\"pf-secao\">\n<h2>O problema<\/h2>\n<p>Suporte t\u00e9cnico gasta a maior parte do tempo com as mesmas perguntas de configura\u00e7\u00e3o. A resposta da moda \u00e9 colocar um modelo de linguagem na frente, mas isso traz tr\u00eas custos que nem sempre se justificam: cobran\u00e7a por atendimento, depend\u00eancia de rede e, o mais s\u00e9rio aqui, a possibilidade de inventar um passo de configura\u00e7\u00e3o que n\u00e3o existe. Em instru\u00e7\u00e3o t\u00e9cnica de PABX, uma resposta plaus\u00edvel e errada faz o cliente mexer no que estava certo.<\/p>\n<\/section>\n<section class=\"pf-secao\">\n<h2>A arquitetura<\/h2>\n<p>O di\u00e1logo \u00e9 dado, n\u00e3o c\u00f3digo. Cada n\u00f3 do fluxo declara sua mensagem e suas op\u00e7\u00f5es, e cada op\u00e7\u00e3o aponta para o pr\u00f3ximo n\u00f3 \u2014 uma m\u00e1quina de estados escrita em JSON, com 58 n\u00f3s e 200 caminhos de navega\u00e7\u00e3o. O painel de configura\u00e7\u00e3o carrega esse JSON em tempo de execu\u00e7\u00e3o e guarda um hist\u00f3rico de configura\u00e7\u00f5es, de modo que o mesmo aplicativo atende fluxos diferentes: um de Suporte T\u00e9cnico, outro de Vendas. Quem mant\u00e9m o atendimento edita texto, n\u00e3o JavaScript. A implementa\u00e7\u00e3o \u00e9 HTML, CSS e JavaScript puros, sem framework e sem etapa de build, e roda de um \u00fanico arquivo no navegador \u2014 sem servidor, sem chave de API e sem chamada de rede. O indicador de digita\u00e7\u00e3o existe para dar ritmo de conversa a uma intera\u00e7\u00e3o que, por baixo, \u00e9 instant\u00e2nea.<\/p>\n<\/section>\n<section class=\"pf-secao\">\n<h2>O resultado<\/h2>\n<p>Assistente de 1.334 linhas cobrindo oito \u00e1reas de suporte do produto \u2014 introdu\u00e7\u00e3o, login e conta, chamadas e mensagens, filas, Caller ID, SMS e WhatsApp, softphone, c\u00f3digos de fun\u00e7\u00e3o e suporte t\u00e9cnico \u2014 com resposta imediata e determin\u00edstica. Como n\u00e3o h\u00e1 infer\u00eancia, o custo por atendimento \u00e9 zero e o comportamento \u00e9 audit\u00e1vel: dado um caminho de cliques, a resposta \u00e9 sempre a mesma, e conferi-la \u00e9 ler o JSON.<\/p>\n<\/section>\n<div class=\"pf-galeria\">\n<figure>\n      <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/manual-chat-01-atendimento.png\" alt=\"O atendimento em uso: o cliente escolhe, o assistente responde e o submenu do tema aparece\" loading=\"lazy\"><figcaption>O atendimento em uso: o cliente escolhe, o assistente responde e o submenu do tema aparece<\/figcaption><\/figure>\n<figure>\n      <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/manual-chat-02-configuracao.png\" alt=\"O di\u00e1logo \u00e9 dado: o painel carrega o fluxo em JSON e guarda configura\u00e7\u00f5es distintas\" loading=\"lazy\"><figcaption>O di\u00e1logo \u00e9 dado: o painel carrega o fluxo em JSON e guarda configura\u00e7\u00f5es distintas<\/figcaption><\/figure>\n<\/p><\/div>\n<div class=\"pf-repo\">\n<h2>\ud83d\udd12 C\u00f3digo-fonte<\/h2>\n<pre><code>git clone https:\/\/git.programandosolucoes.com.br\/git\/repos\/manual-chat.git<\/code><\/pre>\n<p>C\u00f3digo-fonte privado. As credenciais de leitura s\u00e3o liberadas sob solicita\u00e7\u00e3o \u2014 me chame para conversar sobre o projeto.<\/p>\n<\/p><\/div>\n<div class=\"pf-contato\">\n    <strong>Carlos Alberto<\/strong> \u2014 carlosalberto4ti@gmail.com \u00b7 +55 11 2615-2880\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u2190 voltar ao portf\u00f3lio 08\/2025 &#8211; 08\/2026 \u00b7 1 semana Primeira linha de suporte t\u00e9cnico de um PABX em nuvem, com o di\u00e1logo inteiro declarado em JSON e nenhuma depend\u00eancia de IA. JavaScript (ES6+)HTML5CSS3JSONm\u00e1quina de estados O problema Suporte t\u00e9cnico gasta a maior parte do tempo com as mesmas perguntas de configura\u00e7\u00e3o. A resposta da [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-634","page","type-page","status-publish","hentry"],"translation":{"provider":"WPGlobus","version":"3.0.2","language":"en","enabled_languages":["en","br","it"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"br":{"title":false,"content":false,"excerpt":false},"it":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/wp-json\/wp\/v2\/pages\/634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=634"}],"version-history":[{"count":1,"href":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/wp-json\/wp\/v2\/pages\/634\/revisions"}],"predecessor-version":[{"id":638,"href":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/wp-json\/wp\/v2\/pages\/634\/revisions\/638"}],"wp:attachment":[{"href":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}