Boa tarde,
Estou adicionando o package npm do blip-chat-widget em uma ferramenta desenvolvida em React.js.
O fluxo é o seguinte:
O usuário se autentica em uma página de login, ao finalizar sua autenticação, é realizada uma chamada para o bot , já identificando o usuário.
O problema que está acontecendo é que ao construir o bot com o blip-chat-widget, o bot abre, mas antes de abrir ele dá uma “piscada” de alguns segundos, Coloquei alguns console.log nos eventos de OnEnter, OnLoad, onLeave, e reparei que assim que o bot é construído, ele passa pelos logs de onEnter, onLoad e onLeave e depois onEnter e Onload novamente. Como se, assim que o bot abrisse, ele já fechasse e recarregasse.
O componente criado é assim:
import React from "react";
import { useEffect, useCallback } from "react";
import { BlipChat } from "blip-chat-widget";
const BoxChat = ({
blip_chat_key,
user_login,
user_password,
username,
fullname,
}) => {
const buildChat = useCallback(async () => {
const builder = await new BlipChat()
.withAppKey(blip_chat_key)
.withButton({ color: "#2f469d" })
.withAuth({
authType: BlipChat.DEV_AUTH,
userIdentity: user_login,
userPassword: user_password,
userName: username,
userEmail: "",
})
.withEventHandler(BlipChat.ENTER_EVENT, () => {
console.log("onEnter");
})
.withEventHandler(BlipChat.LEAVE_EVENT, () => {
console.log("OnLeave");
})
.withEventHandler(BlipChat.LOAD_EVENT, () => {
console.log("OnLoad");
})
.withEventHandler(BlipChat.CREATE_ACCOUNT_EVENT, () => {
console.log("OnCreateAccount");
})
.withAccount({
fullName: fullname,
encryptMessageContent: true,
})
.withTarget("box-chat");
builder.build();
}, []);
useEffect(() => {
buildChat();
console.log("quit");
}, [buildChat]);
return (
<div
id="box-chat"
style={{
position: "absolute",
width: "100%",
height: "100%",
}}
></div>
);
};
export default React.memo(BoxChat);
Estes são os logs que tenho recebido:
Depois destes logs, ele roda novamente o onEnter e onLoad, abrindo finalmente a tela.
Fiz alguns testes:
- Tentei colocar o componente que serve de container (uma div com o id específico que eu passo no withTarget) fora do contexto do react (dentro do body, mas antes da div root, onde é renderizada a aplicação), numa tentativa de este div ficar fora de qualquer rerender que esteja acontecendo, continua acontecendo este reload
- Tentei usar o código de exemplo em : Please clarify recommended setup for React Apps · Issue #4 · takenet/blip-chat-widget · GitHub , onde se usa o formato de class based componentes, sem sucesso, o reload continua acontecendo
Estranhamente, noutro teste que fiz, não usei o react, só importei a biblioteca em um html com javascript, e neste, o reload não acontece, o que me leva a crer que seja algum problema entre react x blip.
Agradeço qualquer auxilio ou dica que a comunidade possa fornecer.
