Axel Axt
120 lines
3.4 KiB
PHP
120 lines
3.4 KiB
PHP
<?php require __DIR__ . '/../../includes/navBar.php'; ?>
|
|
|
|
<link rel="stylesheet" href="css/chatbot.css">
|
|
|
|
<div class="container my-5">
|
|
|
|
<div class="row justify-content-center">
|
|
|
|
<div class="col-xl-9 col-lg-10">
|
|
|
|
<div class="card card-rounded card-shadow border-0">
|
|
|
|
<!-- HEADER -->
|
|
|
|
<div class="card-header header-dark px-4 py-3">
|
|
|
|
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
|
|
|
|
<div>
|
|
|
|
<h4 class="mb-0 title-shadow">
|
|
|
|
<i class="fas fa-comment-dots me-"></i>
|
|
Asistente ByteCenter
|
|
|
|
</h4>
|
|
|
|
<small class="text-light opacity-75">
|
|
|
|
Asistente interno del sistema
|
|
|
|
</small>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- BODY -->
|
|
|
|
<div class="card-body p-0 bg-white">
|
|
|
|
<!-- CHAT -->
|
|
|
|
<div id="chat-box" class="chatbot-body">
|
|
|
|
<?php if (empty($_SESSION['chat_historial'])): ?>
|
|
|
|
<!-- MENSAJE INICIAL -->
|
|
|
|
<div class="mensaje-bot">
|
|
|
|
<div class="mensaje-contenido">
|
|
|
|
¡Hola! 👋<br><br>
|
|
|
|
Soy el asistente interno de ByteCenter.<br>
|
|
|
|
Puedo ayudarte a utilizar los módulos del sistema,
|
|
explicar funcionalidades y guiarte en distintas acciones.
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<?php else: ?>
|
|
|
|
<?php foreach ($_SESSION['chat_historial'] as $msg): ?>
|
|
|
|
<div class="<?= $msg['role'] === 'user' ? 'mensaje-user' : 'mensaje-bot' ?>">
|
|
|
|
<div class="mensaje-contenido">
|
|
|
|
<?= nl2br(htmlspecialchars($msg['content'])) ?>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<?php endforeach; ?>
|
|
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
|
|
<div class="chatbot-footer border-top p-3">
|
|
|
|
<form id="chat-form" novalidate>
|
|
|
|
<div class="input-group">
|
|
|
|
<input
|
|
type="text"
|
|
id="mensaje"
|
|
class="form-control"
|
|
placeholder="Escriba una consulta..."
|
|
autocomplete="off"
|
|
required>
|
|
|
|
<button
|
|
type="submit"
|
|
class="btn btn-success">
|
|
|
|
<i class="fas fa-paper-plane"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/chatbot.js"></script>
|