Pular para o conteúdo principal
Atenção

Comunicado 1: Beth Studio - Central de Ajuda - 16/09/2025​

Instruções para incluir um assistente da Beth nos sistemas da linha Angular​

note

A configuração do assistente é simples: basta importar um módulo UMD (Universal Module Definition).
Esse módulo é responsável por carregar o componente da Beth e gerenciar os eventos de refresh token.

Pré-requisitos​

  • Cada time pode criar seu assistente tanto em teste quanto em produção.
  • No ambiente de testes, o componente só enxerga agentes em testes.
  • Em produção, a mesma lógica, apenas os assistentes publicados em produção ficam disponíveis.
  • A configuração é é parecida com o Google Analytics: cada produto possui um ID.
    • Diferença: pode existir um assistente por linha de produto ou por produto individual que deve ser criado nos ambientes desejados.
    • A configuração mais comum será um assistente por produto em testes e outro em produção.

Entidades de configuração​

Criar o assistente no ambiente
No projeto de front-end

Versionar as seguintes variáveis:

  • ID do assistente referente ao produto/área
  • URL do componente no ambiente correto (fornecida pela equipe de Tecnologia)
  • O acesso as respectivas entidades pode ser solicitado ao Ramon Lummmertz.

Passo a passo​

Criação do assistente​

  • No Studio, primeiro configure uma ou mais bases de conhecimento.
    • É necessário realizar ao menos uma carga (exemplo: enviar um arquivo)
    • Em seguida, publique a base de conhecimento.
  • Crie uma skill definindo o nome do assistente, vincule as bases de conhecimento, defina instruções e ajuste fino.
  • Por fim, publique a skill:
    • Na aba publicar, após a primeira publicação, ficará disponível a cópia do ID permanente. É este ID que será utilizado em cada produto.

executando

Sugestão de configuração no front:​

Desenvolvimento / Teste​

development.json / test.json

  "URL_BETH_CHAT": "https://resources.tecnologia.betha.cloud/ui/test/beth-assistant-angular-l-wrapper/version=latest/beth-chat-portal.umd.js",
  "BETH_AGENT_ID": "ID_DO_ASSISTENTE_CRIADO"

Produção​

production.json / yaml

  "URL_BETH_CHAT": "https://resources.tecnologia.betha.cloud/ui/production/beth-assistant-angular-l-wrapper/version=latest/beth-chat-portal.umd.js",
  "BETH_AGENT_ID": "ID_DO_ASSISTENTE_CRIADO"

Import no index.html​

<script src="<!-- @echo URL_BETH_CHAT -->" type="text/javascript"></script>

No menu do sistema (geralmente header.html)​

<li  class="menu-right" ng-hide="vm.state.includes('main.entidade')" title="Fale com a Beth.">
    <a href id="bethAi" href ng-click="vm.openBethChat()">
        <i class="fa fa-wand-magic-sparkles"></i>
    </a>
</li>

<beth-chat-portal ng-if="vm.bethChatIsOpen" profile="<!-- @echo BETH_AGENT_ID -->" align="left" gap="0" width="640" z-index="1068" class-name="chat-extra"></beth-chat-portal>

No controller:

    vm.bethChatIsOpen = false;
    vm.openBethChat = openBethChat;

    function openBethChat() {
        vm.bethChatIsOpen = !vm.bethChatIsOpen;
    }

No module principal da aplicação (geralmente sistema.module.js)​

No exemplo abaixo, é apresentado no sistema folha como podemos carregar de forma segura o module do componente.

  • folha.module.js
var FAIL_SAFE_MODULES = ['beth.chat.portal'];
FAIL_SAFE_MODULES.forEach(function(moduleName) {
    try {
        angular.module(moduleName);
        angular.module('folha').requires.push(moduleName);
    } catch (e) {
    }
});

Esta abordagem tem o benefício de evitar a quebra da aplicação caso ocorra uma falha na resolução do módulo do componente da Beth.

Também é possível importar diretamente na definição do módulo principal, como é feito normalmente:

module.exports = angular
    .module('folha', [
        // bfc, etc.
        'beth.chat.portal',
        // demais módulos do aplicação
    ]);

Checklist​

Na Beth, para cada ambiente:

  • Criar uma ou mais bases de conhecimento e publicar
  • Criar a Skill/assistente utilizando ao menos uma base de conhecimento
  • Publicar a skill e obter o ID do assistente

No produto:

  • Definir o ID do assistente para o ambiente
  • Definir URL do componente para o ambiente
  • Import do JS do componente no index.html
  • Registrar o module beth.chat.portal
  • Alterar o header.html e controller para incluir o componente

Notas​

note

Cada time tem autonomia para decidir como e para quem disponibilizar o assistente.
É possível utilizar feature flags para liberar apenas para determinados usuários, especialmente durante a etapa de validação.

Exemplo prático
  • O time do produto X criou o assistente “Central de Ajuda X” na entidade BETHA SISTEMAS - DIRETORIA DE PRODUTOS.
  • No front-end, é possível adicionar uma condição (ng-if) para mostrar o componente apenas quando o usuário pertencer à entidade “SISTEMA X - TIME DE PRODUTO”.

Erros comuns​

Atenção
  • Caso ocorra algum problema de configuração, o console do navegador exibirá detalhes do erro.
  • Em caso de falha, o comportamento padrão do agente é exibir a mensagem:

“O assistente está indisponível no momento.”

Changelog​

Última atualização
  • 16/09/2025 – Criação do comunicado.