Skip to main content

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.

Nenhum comentário