Keural Kit

O Keural Kit coloca telas do Keural na sua página com um único script. As telas são desenhadas dentro de um Shadow DOM, por isso não se misturam ao CSS da sua página. O Kit é atualizado a cada implantação da aplicação web do Keural. Se uma tela antiga continuar aparecendo depois de uma implantação, limpe o cache do navegador e da CDN e confira a data da compilação com window.KeuralKit.__build.

CarregamentoCopiar link da âncora

O Kit é carregado do endereço web do ambiente Keural que você usa. Com keural.ai, o endereço é https://keural.ai; em ambientes locais ou dedicados, use o endereço web desse ambiente. Antes de incluir o script, defina em window.__KEURAL_ENV__ os endereços de servidor que o Kit vai chamar. Os três endereços devem ser do mesmo ambiente, e você os recebe do seu contato no Keural durante a adoção.

<script>
  window.__KEURAL_ENV__ = {
    NEXT_PUBLIC_API_BASE_URL: '<KEURAL_API_URL>',
    NEXT_PUBLIC_FAST_API_BASE_URL: '<KEURAL_AGENT_URL>',
    NEXT_PUBLIC_MODE: 'prd',
  };
</script>
<script src="<KEURAL_WEB_URL>/plugin/kit/keural.js" async></script>

Para usar o mesmo Kit em um segundo domínio, defina os três valores NEXT_PUBLIC_ADDITIONAL_FRONTEND_URL, NEXT_PUBLIC_ADDITIONAL_API_BASE_URL e NEXT_PUBLIC_ADDITIONAL_FAST_API_BASE_URL. Se algum deles faltar, ocorre um erro. Os valores são endereços https:// sem caminho.

Quando o script é carregado, window.KeuralKit é criado. Em SPAs como React, use um carregador para que o script seja carregado apenas uma vez.

export function loadKeuralKit(src = '<KEURAL_WEB_URL>/plugin/kit/keural.js') {
  if (window.KeuralKit) return Promise.resolve(window.KeuralKit);
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onload = () => resolve(window.KeuralKit);
    s.onerror = () => {
      s.remove();
      reject(new Error('Keural Kit failed to load'));
    };
    document.head.appendChild(s);
  });
}

Incorporar o chatCopiar link da âncora

const el = document.getElementById('keural-chat')!;

window.KeuralKit.mountChat(el, {
  userInfo: { userId: user.id, name: user.name },
  colorMode: 'light',
  initialData: { message: 'Resuma a receita deste trimestre', room_name: 'Relatório trimestral' },
  onSessionCreated: (roomId) => router.push(`/c/${roomId}`),
  onError: () => router.push('/'),
});

// Ao sair da tela
window.KeuralKit.unmount(el);

• Para abrir uma conversa existente, informe o ID da conversa em sessionId.
• Inclua initialData somente ao abrir uma conversa nova. Se ele for incluído ao abrir uma conversa existente, a mesma mensagem é enviada novamente.
• Se userInfo.userId estiver ausente, o usuário é tratado como não logado. Monte o componente depois que as informações de login estiverem prontas.

MétodosCopiar link da âncora

Os métodos mount* e update* recebem colorMode e userInfo juntos, e unmount(el) recebe apenas o elemento. update* redesenha o mesmo elemento com as novas opções. Para abrir ou fechar a janela, altere o valor de open e chame update*. Se mount* for chamado novamente no mesmo elemento, a tela existente é reaproveitada.

Opções do mountChatCopiar link da âncora

initialDataCopiar link da âncora

Idioma da telaCopiar link da âncora

A tela do Kit é exibida em coreano.

Configurações e loginCopiar link da âncora

• As configurações do usuário são alteradas na aplicação web ou no app do Keural, e a tela do Kit segue essas configurações.
• O login é tratado pelo seu serviço, e ao Kit são enviadas apenas as informações do usuário logado.