Tutoriais

# TEKA - Chatbot

Documentação para configuração básica do componente Chatbot nos produtos da Teknisa. Será possível falar sobre assuntos cadastrados com arquivos PDF e dados obtidos a partir de consultas SQL.

initChat

# Zeedhi Angular

# Dependência

Instale a dependência no bower.json

"teka-chat-js": "1.0.*"

Atenção

Não adicione o JS do componente no Gruntfile. Todo seu conteúdo será injetado nos passos seguintes.

# Configuração

No arquivo engine.js, adicione o código abaixo:

var initializeTekaChat = function () {
	// Endpoint do produto para que a comunicação do chat seja sempre no backend do próprio produto e não para cada módulo.
	var productPkg = window.serviceUrls.find(function(pkg) {
		return pkg.package == 'product'
	});

	// Injetar JS do componente TEKA instalado no produto para todas as telas do sistema, incluindo os módulos.
	var pathname = location.pathname.includes('mobile') ? location.pathname.split('/modules')[0].replace('/mobile', '') +  '/mobile' : '';
	var script = document.createElement('script');
	script.src = location.origin + pathname + '/bower_components/teka-chat-js/dist/teka-chat.min.js?v=' + window.applicationVersion;
	document.head.appendChild(script);

	// Inicializa o componente do chat
	script.onload = function () {
		window.tekaInstance = TekaChat.initializeChat('section.everything > div.container', {
			chatEndpoint: window.chatWsURL, // Valor definido em arquivo de configuração externo
			chatEndpointHttp: window.chatHttpURL, // Valor definido em arquivo de configuração externo
			backendURL: productPkg.baseUrl,
			productId: window.projectId
		});
	};
};

// O componente deve ser inicializado após o menu estar completamente construído. 
// Dessa forma, o controle de acesso sobre a tela que está sendo aberta já foi executado.
eventAggregator.subscribe('menuBuilded', initializeTekaChat);
# Variáveis:

  • chatEndpoint: Endereço WebSocket da API do chatbot
    • Desenvolvimento / Teste: wss://chat-api-teste.teknisa.com/echo
    • Produção: wss://chat-api.teknisa.com/echo
  • chatEndpointHttp: Endereço HTTP da API do chatbot
    • Desenvolvimento/Teste: https://chat-api-teste.teknisa.com
    • Produção: https://chat-api.teknisa.com
  • backendURL: Apontamento para o backend do produto.
    • Será utilizado apenas para o chatbot SQL.
    • Depende de utilização da versão 3.14.* da LIB ou da criação de uma rota para executar as consultas SQL cadastradas.
  • productId: ID do produto

Nota

É recomendável criar as variáveis de endereço da API em arquivos de configuração a fim de utilizar mnemônicos.

# Zeedhi Next

# Dependência

Instale a dependência no package.json

"@zeedhi/teka-chat-js": "1.0.*",
# Configuração

No arquivo App.vue:

  • Importe o componente
const { TekaChat } = require('@zeedhi/teka-chat-js');
  • Crie a função abaixo:
private initializeTekaChat() {
	TekaChat.initializeChat('#app', {
		chatEndpoint: Config.env.product.chatWsURL, // Valor definido em arquivo de configuração externo
		chatEndpointHttp: Config.env.product.chatHttpURL, // Valor definido em arquivo de configuração externo
		backendURL: Config.endPoint,
		productId: Config.env.product.id,
	});
}
# Variáveis:

  • chatEndpoint: Endereço WebSocket da API do chatbot
    • Desenvolvimento / Teste: wss://chat-api-teste.teknisa.com/echo
    • Produção: wss://chat-api.teknisa.com/echo
  • chatEndpointHttp: Endereço HTTP da API do chatbot
    • Desenvolvimento/Teste: https://chat-api-teste.teknisa.com
    • Produção: https://chat-api.teknisa.com
  • backendURL: Apontamento para o backend do produto.
    • Será utilizado apenas para o chatbot SQL.
    • Depende de utilização da versão 2.11.* da LIB - Next ou da criação de uma rota para executar as consultas SQL cadastradas.
  • productId: ID do produto

Nota

Crie as variáveis de endereço da API nos arquivos de configuração (devEnvironment.json e prodEnvironment.json). Na função de exemplo acima, as variáveis foram criadas dentro da propriedade product. Lembre-se de utilizar mnemônicos nos valores para produção.

# Inicialização

Ainda no arquivo App.vue, inicialize o componente chamando a função initializeTekaChat tanto na função mounted quanto na afterLogin.




 
 
 








 
 
 


public mounted() {
	if (!this.isRouteLogin) {
		this.setMenu();
		if (TekLibLocalStorage.getItem('IS_NEXT')) {
			this.initializeTekaChat();
		}
	}
}

(...)

private async afterLogin(userData: any) {
	await TekLibAuth.startSession(userData);
	this.setMenu();
	if (TekLibLocalStorage.getItem('IS_NEXT')) {
		this.initializeTekaChat();
	}
}

Atenção!

  • Verifique como estão as funções do seu projeto. Podem haver diferenças nos exemplos citados acima.
  • O if (TekLibLocalStorage.getItem('IS_NEXT')) se faz necessário para telas que são abertas no Zeedhi Angular. Nesse caso, apenas o componente do angular será renderizado.

← Componente User Info →