Eventos de integração

É possível ouvir alguns eventos da biblioteca de acordo com a necessidade do seu projeto. Abaixo estão listados os eventos disponíveis para configuração:

type ErrorCodes = "NOT_ENOUGH_CREDITS"

Evento	Obrigatório	Payload	Função
ai:loaded	Não	`undefined`	Evento disparado quando a aplicação é carregada
ai:error	Não	`{ errorCode: ErrorCodes, from: string }`	Evento disparado quando ocorre algum erro na aplicação
ai:tokenrevoked	Não	`undefined`	Evento disparado quando o token é revogado ou expirado

Controlar o carregamento do iframe

Exemplo:

function App() {
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);
 
  useEffect(() => {
    function handleLoaded() {
      setLoaded(true);
      setError(false);
    }
 
    const iaElement = document.querySelector("ai-integration");
 
    iaElement?.addEventListener("ai:loaded", handleLoaded);
 
    return () => {
      iaElement?.removeEventListener("ai:loaded", handleLoaded);
    };
  }, []);
 
  const timeout = useRef<NodeJS.Timeout>();
 
  useEffect(() => {
    if (loaded) {
      clearTimeout(timeout.current);
      return;
    }
 
    timeout.current = setTimeout(() => {
      setError(true);
    }, 2000);
 
    return () => clearTimeout(timeout.current);
  }, [loaded]);
 
  return (
    <div className="p-4">
      <p className="mb-5 text-center text-2xl">
        Conteúdo da paǵina externa
      </p>
      {error && <p>Erro ao carregar o iframe</p>}
 
      {!loaded && !error && <p>Carregando...</p>}
 
      <div className={loaded ? "opacity-1 h-[95vh]" : "opacity-0"}>
        <ai-integration
          url={import.meta.env.VITE_PARTNER_URL}
          publishable-key={import.meta.env.VITE_PUBLISHABLE_KEY}
        />
      </div>
    </div>
  );
}
 
export default App;

Exibir mensagens de erro

Exemplo:

function App() {
  const [error, setError] = useState<ErrorCodes | null>(null);
 
  useEffect(() => {
    function handleError(event) {
      setError(event.detail.errorCode);
    }
 
    const iaElement = document.querySelector("ai-integration");
 
    iaElement?.addEventListener("ai:error", handleError);
 
    return () => {
      iaElement?.removeEventListener("ai:error", handleError);
    };
  }, []);
 
  return (
    <div className="p-4">
      <p className="mb-5 text-center text-2xl">
        Conteúdo da paǵina externa
      </p>
 
      {error}
 
      <div className="h-[95vh]">
        <ai-integration
          url={import.meta.env.VITE_PARTNER_URL}
          publishable-key={import.meta.env.VITE_PUBLISHABLE_KEY}
        />
      </div>
    </div>
  );
}
 
export default App;

Atualizar o token

Exemplo:

 
import {refreshToken} from './services'
 
function App({currentToken}: {currentToken: string}) {
  const [token, setToken] = useState<string | null>(currentToken);
 
  useEffect(() => {
    function handleNewToken() {
      refreshToken().then((token) => {
        setToken(token);
      });
    }
 
    const iaElement = document.querySelector("ai-integration");
 
    iaElement?.addEventListener("ai:tokenrevoked", handleNewToken);
 
    return () => {
      iaElement?.removeEventListener("ai:tokenrevoked", handleNewToken);
    };
  }, []);
 
  return (
    <div className="p-4">
      <p className="mb-5 text-center text-2xl">
        Conteúdo da paǵina externa
      </p>
 
      <div className="h-[95vh]">
        <ai-integration
          url={import.meta.env.VITE_PARTNER_URL}
          publishable-key={token}
        />
      </div>
    </div>
  );
}
 
export default App;

Parâmetros Introdução