Uma empresa do ramo alimentício (Alimentos SA) precisa de um chatbot capaz de receber feedback dos clientes, elogios ou reclamações e ser capaz de armazenar esses dados, nesse caso, em contadores na própria página.
Para isso foi usado a API da Verbeux de IA generativa.
Um site com 2 componentes, Header e Body, sendo o primeiro apenas para estilo da página e o segundo é a parte principal que contém o chat.
- Body
- Possui 2 métodos:
- createSession(): serve para fazer o método POST da API e criar a sessão e seus respectivos dados.
- sendMessage(): responsável por enviar as mensagens do input do usuário para a API e receber a resposta da mesma e trabalhar em cima dos gatilhos.
- HTML
- Ele vai iterar sobre as menssagens enviadas pelo usuário e pelo bot e colocar os balões de chat.
- Possui 2 métodos:
Possui um service chamado ChatService:
- Faz as requisições HTTP: POST e PUT e então é injetado construtor do BodyComponent.
- Angular (com Angular Material e Tailwind para estilos)
Escrevi um documento explicando o comportamento detalhado de como a IA deve se comportar e enviei para que ela fosse treinada.
- Primeiro passo é clonar este repositório em sua máquina:
git clone https://github.com/arturbartonelli/verbeux-feedback-chatbot.git - Ao fazer o git clone, no terminal, utilize
npm ipara instalar todas as dependências do projeto - Em seguida, no terminal, digite
npm start, para começar a rodar o projeto no link http://localhost:4200 por padrão. - No terminal deve-se receber "Sessão Criada!", mostrando que a conexão com a API foi bem sucedida.
- Mande mensagens para o chatbot e ele reconhecerá e contará elogios e reclamações!
Tive problemas com CORS e então adicionei um arquivo proxy.conf.js para fazer uma configuração de proxy
para que pudesse usar sem problemas, sei que não é uma forma de boa prática de desenvolvimento por motivos de segurança,
mas acredito que para o presente teste é o suficiente.