Chatbot

Visão geral

Componente de chatbot interativo que permite a comunicação entre usuários e um assistente virtual. Fornece uma interface amigável para interações em tempo real e pode ser integrado facilmente em diferentes partes da aplicação.

Clique para exibir o código

<script setup>
import { ref } from 'vue';
import { LxChatbot } from '@lde/lxcomponents';
import LxChatbotButton from '@/components/LxChatbot/Components/LxChatbotButton.vue';

const lxChatbot = ref(null);

const handleButtonClick = () => {
	lxChatbot.value.handleButtonClick();
};
</script>

<template>
	<LxChatbotButton @click="handleButtonClick" />
	<LxChatbot
		:id="'chatbot'"
		ref="lxChatbot"
		:agentName="'Microvix'"
		:permissionToUseChat="true"
		:urlBase="'https://localhost:44336'"
		:urlErpWebApp="'https://9044-erpwebapp-exppagrec.microvix.com.br'"
		:authToken="'1a6758d1-32ea-4426-a531-48c9bff175de'"
		:authorizationToken="'eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJJZFBvcnRhbCI6IjkwOCIsIklkRW1wcmVzYSI6IjEwIiwiSWRVc3VhcmlvIjoiNDMiLCJJZENvbmZpZ0FtYmllbnRlIjoiMjgiLCJuYmYiOjE3NzMyNTM1NzYsImV4cCI6MTc3MzMzOTk3Nn0.0vPj1reW8wDb9qByCrOv0RGt8FnaIOhCfvKdUS_hw5s'"
		:showChatbotButton="true"
	/>
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
id	⚠️ obr Define o identificador único(id) que o chatbot irá receber	String	-
url-base	Define a URL base para a API de comunicação do chatbot	String	-
agent-name	Define o nome do agente no qual o chatbot irá se comunicar	String	-
permission-to-use-chat	Define se o usuário tem permissão para utilizar o chat	Boolean	true
function-to-show-user-permissions	Define uma função utilizada para validar se o usuário possui permissão para utilizar o chatbot (mesma função presente em relatórios como "Movimento Diário" e "Lista de Preços")	Function	-

Variações

Variação	Descrição
Chatbot	Interface de chat padrão com foco em interações de texto

Casos de uso

• Atendimento ao cliente em tempo real
• Assistência na navegação do site
• Coleta de feedback dos usuários

Boas práticas

1. Garanta que o texto das mensagens seja claro e conciso
2. Implemente tempos de resposta rápidos para melhor experiência do usuário
3. Utilize a propriedade permission-to-use-chat e function-to-show-user-permissions para controlar o acesso ao chatbot