iatoolkit 0.7.9__py3-none-any.whl → 0.7.11__py3-none-any.whl

iatoolkit/static/styles/chat_info.css

@@ -0,0 +1,53 @@
+/*
+    * Estilo para el encabezado de la tabla (thead).
+    * Se usa un fondo gris claro, texto en mayúsculas y
+    * un espaciado de letras para un look más profesional.
+    */
+
+.table{
+    background-color: white;
+}
+
+.title-info-page{
+    color: #495057;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.table thead th {
+    background-color: #f8f9fa;
+    color: #495057;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border-bottom-width: 2px;
+}
+
+/*
+    * Columna 1: Ancho mínimo, sin salto de línea y en negrita.
+    */
+.table th:nth-child(1),
+.table td:nth-child(1) {
+    width: 1%;
+    white-space: nowrap;
+    font-weight: bold;
+}
+
+/*
+    * Columna 2: Ancho mínimo y sin salto de línea.
+    */
+.table th:nth-child(2),
+.table td:nth-child(2) {
+    width: 1%;
+    white-space: nowrap;
+}
+
+/*
+    * Columna 3 (Descripción): Limita su ancho máximo
+    * y ajusta el texto largo para que no se desborde.
+    */
+.table th:nth-child(3),
+.table td:nth-child(3) {
+    max-width: 450px;
+    word-wrap: break-word;
+}

iatoolkit/static/styles/chat_modal.css

@@ -0,0 +1,136 @@
+/* ######################################################### */
+/* Estilos generales para modales */
+/* ######################################################### */
+
+/* Separación del icono y el título del modal */
+.icon-spaced {
+    margin-right: 10px;
+}
+
+/* Título del modal */
+.modal-title{
+    font-size: 20px;
+    font-weight: bold;
+}
+
+/* Texto del modal */
+.text-muted{
+    font-size:16px;
+    text-align: justify;
+}
+
+/* Estilos del header del modal*/
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+/* Estilos del título del modal*/
+.modal-header .modal-title {
+    margin: 0;
+    padding: 0;
+    flex: 1;
+}
+
+/* Estilos del botón de cerrar del modal*/
+.modal-header .close {
+    margin: 0;
+    padding: 0;
+    margin-left: auto;
+}
+
+/* ######################################################### */
+/* Modal de historial */
+/* ######################################################### */
+
+/* Estilos cabeceras de tablas */
+.thead-dark th{
+    font-size: 16px;
+    font-weight: bold;
+}
+
+/* Control de ancho de columnas en la tabla del historial */
+#history-content .table td:nth-child(1) {
+    width: 5%; /* Columna del número */
+}
+
+#history-content .table td:nth-child(2) {
+    width: 23%; /* Columna de la fecha */
+}
+
+#history-content .table td:nth-child(3) {
+    width: auto; /* Columna de la consulta - ocupa el resto */
+}
+
+/* ######################################################### */
+/* Modal de feedback */
+/* ######################################################### */
+
+/* Contenedor de calificación del modal de feedback */
+.rating-container {
+    text-align: center;
+    margin: 10px 0 0 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    width: 100%;
+}
+
+/* Contenedor de estrellas del modal de feedback */
+.rating-stars-container{
+    text-align: center;
+    margin: 2px 0 0 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+}
+
+/* Estilos de las estrellas del modal de feedback */
+.star {
+    font-size: 3rem;
+    color: #ddd;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    margin: 0 2px;
+}
+
+/* Estilos de las estrellas del modal de feedback al pasar el mouse */
+.star:hover,
+.star.active,
+.star.hover-active {
+    color: #ffc107;
+}
+
+/* ######################################################### */
+/* Modal de listado de archivos */
+/* ######################################################### */
+
+/* Para el icono de eliminar del modal */
+.remove-file-btn i {
+    color: #c82333
+}
+
+/* Estilos para el modal de archivos y ordenar icono */
+.list-group-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* Estilos del nombre del archivo del modal de archivos y ordenar icono */
+.file-name-modal {
+    flex: 1;
+    margin-right: 10px;
+}
+
+/* Estilos del botón de eliminar del modal de archivos y ordenar icono */
+.remove-file-btn {
+    flex-shrink: 0;
+}

iatoolkit/static/styles/llm_output.css

@@ -0,0 +1,115 @@
+/* BLOQUE GENERAL */
+.llm-output {
+  margin: 0;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #333;
+}
+
+
+/* estilo especial para desplegar a ancho completo */
+.llm-output-full-width {
+  max-width: 100%;  /* Anula cualquier max-width anterior como 70% o 75% */
+  width: 100%;
+  align-self: center; /* Se asegura que se centre en el contenedor flex */
+  box-sizing: border-box; /* Para que el padding y borde no afecten el ancho total */
+}
+
+
+/* BLOQUES de categorías */
+.llm-output .categoria {
+  margin-bottom: 40px;
+}
+
+/* TÍTULO del bloque de categoría */
+.llm-output .categoria h4 {
+  font-size: 15px; /* tamaño consistente */
+  color: #337ab7;  /* azul Bootstrap 3 */
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-weight: bold;
+  border-bottom: 2px solid #337ab7; /* línea azul más visible */
+  padding-bottom: 5px;
+}
+
+/* TEXTOS normales dentro */
+.llm-output p {
+  margin-bottom: 10px;
+}
+
+/* LISTAS */
+.llm-output ul {
+  padding-left: 0;
+  margin: 0 0 10px 0;
+  list-style: none;
+}
+
+.llm-output ul li {
+  margin-bottom: 8px;
+}
+
+.llm-output li strong {
+  display: inline-block;
+  margin-right: 8px;
+  font-weight: bold;
+  color: #333;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+/* TABLAS */
+.llm-output table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.llm-output th,
+.llm-output td {
+  padding: 6px 10px;
+  border: 1px solid #ddd;
+  text-align: left !important;
+  vertical-align: middle;
+}
+
+.llm-output thead {
+  background-color: #f5f5f5;
+}
+
+.llm-output .table-striped tbody tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}
+
+.llm-output .table-hover tbody tr:hover {
+  background-color: #f5f5f5;
+}
+
+.llm-output .tabla-licitaciones-container {
+  width: 100%;
+  overflow-x: auto; /* Añade scroll horizontal si la tabla no cabe */
+  margin-bottom: 15px; /* Espacio extra debajo */
+  border: 1px solid #ddd; /* Opcional: un borde sutil alrededor */
+}
+
+.llm-output .tabla-licitaciones th,
+.llm-output .tabla-licitaciones td {
+  vertical-align: top;
+}
+
+.llm-output .tabla-licitaciones tbody tr:hover {
+  background-color: #f5f5f5; /* Mismo color que el hover genérico */
+}
+
+  .text-center {
+    text-align: center !important;
+  }
+
+  .text-right {
+    text-align: right !important;
+  }
+
+.nowrap {
+    white-space: nowrap;
+  }

iatoolkit/templates/about.html

@@ -0,0 +1,13 @@
+<!-- templates/about.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About</title>
+</head>
+<body>
+    <h1>AI Toolkit</h1>
+    <p>This is a static page in Flask.</p>
+</body>
+</html>

iatoolkit/templates/base.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Chatbot{% endblock %}</title>
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filepond/dist/filepond.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_iatoolkit.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_modal.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/llm_output.css') }}">
+</head>
+<body class="d-flex flex-column p-3" style="min-height: 100vh;">
+    <main class="d-flex flex-column flex-grow-1">
+        {% block content %}{% endblock %}
+    </main>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/filepond/dist/filepond.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+
+    <!-- Mostrar alertas SweetAlert2 si existe el mensaje -->
+    <script>
+        {% if alert_message %}
+        Swal.fire({
+            text: "{{ alert_message }}",  // Mensaje pasado desde Flask
+            icon: "{{ alert_icon | default('error') }}",  // Ícono por defecto "error"
+            confirmButtonText: "OK",
+            cancelButtonText: 'Cancelar',
+            customClass: {
+                confirmButton: 'custom-confirm-button', // Clase personalizada para el botón
+                cancelButton: 'custom-cancel-button'   // Clase personalizada para el botón de cancelar
+                 }
+        });
+        {% endif %}
+    </script>
+
+    {% block scripts %}{% endblock %}
+</body>
+</html>

iatoolkit/templates/change_password.html

@@ -0,0 +1,45 @@
+{% extends "base.html" %}
+
+{% block title %}Cambiar Contraseña{% endblock %}
+
+{% block content %}
+<div class="container vh-100 d-flex justify-content-center align-items-center">
+    <div class="col-11 col-md-8 col-lg-5 border rounded p-3 shadow-sm">
+        <h4 class="text-muted fw-semibold text-start mb-3">Cambiar Contraseña</h4>
+        <h6 class="text-muted text-start mb-4">{{ email }}</h6>
+
+        <form action="{{ url_for('change_password', company_short_name=company_short_name, token=token) }}" method="post">
+            <div class="mb-3">
+                <label for="temp_code" class="form-label text-muted">Código Temporal recibido</label>
+                <input type="text" name="temp_code" id="temp_code"
+                       class="form-control text-muted" required
+                       autocomplete="off"
+                       value="{{ form_data.temp_code if form_data else '' }}">
+            </div>
+            <div class="mb-3">
+                <label for="new_password" class="form-label text-muted">Nueva Contraseña</label>
+                <input type="password" name="new_password" id="new_password"
+                       class="form-control text-muted" required
+                       value="{{ form_data.new_password if form_data else '' }}">
+                <small class="form-text text-muted">
+                        La contraseña debe contener al menos 8 caracteres, una letra mayúscula, una letra minúscula, un número y un carácter especial.
+                </small>
+
+            </div>
+            <div class="mb-3">
+                <label for="confirm_password" class="form-label text-muted">Confirmar Nueva Contraseña</label>
+                <input type="password" name="confirm_password" id="confirm_password"
+                       class="form-control text-muted" required
+                       value="{{ form_data.password if form_data else '' }}">
+            </div>
+            <button type="submit" class="btn btn-primary w-100">Cambiar Contraseña</button>
+
+            <p class="text-muted text-start mt-3" style="text-align: justify;">
+                    Ingresa el código de seguridad que recibiste por correo y elige una nueva contraseña.
+                    Asegúrate de que sea segura y fácil de recordar.
+            </p>
+
+        </form>
+    </div>
+</div>
+{% endblock %}

iatoolkit/templates/chat.html

@@ -0,0 +1,180 @@
+{% extends "base.html" %}
+
+{% block title %}IAToolkit{% endblock %}
+
+{% block content %}
+<!-- Sección de encabezado con el usuario conectado -->
+<div class="company-section d-flex justify-content-between align-items-center">
+    <!-- Izquierda: Datos del usuario -->
+    <span class="text-muted small fw-bold">
+        {{ company_short_name }} - {{ external_user_id or user.email }}
+    </span>
+
+    <!-- Derecha: Grupo de iconos de acción -->
+    <div class="d-flex align-items-center">
+        <!-- "Powered by"  -->
+        <span class="text-muted" style="font-size: 0.75rem;">
+            Powered by <strong>IAToolkit</strong>
+        </span>
+
+        <!-- Icono de Historial -->
+        <a href="javascript:void(0);" id="history-button"
+           class="ms-3 action-icon-style" title="Historial con mis consultas">
+            <i class="bi bi-clock-history"></i>
+        </a>
+
+        <!-- Icono de Feedback -->
+        <a href="javascript:void(0);" id="send-feedback-button"
+           class="ms-3 action-icon-style" title="Tu feedback es muy importante">
+            <i class="bi bi-emoji-smile"></i>
+        </a>
+
+        <!-- Icono de cerrar sesión -->
+        {% if user.email %}
+            <a href="{{ url_for('logout', company_short_name=company_short_name) }}"
+                 class="ms-3 action-icon-style" title="Cerrar sesión">
+                <i class="bi bi-box-arrow-right"></i>
+            </a>
+        {% endif %}
+    </div>
+</div>
+
+<div id="chat-container"
+     class="mt-2 p-3 border border-2 rounded flex-grow-1"
+     style="overflow-y: auto;">
+        <div id="chat-messages">
+        <!-- Mensaje de bienvenida estático -->
+        <div class="answer-section">
+            ¡Hola! en que te puedo ayudar hoy?
+        </div>
+    </div>
+</div>
+
+<!-- Input oculto de FilePond -->
+<div class="filepond-container" style="display: none;">
+    <input type="file" id="file-upload" class="filepond" data-max-files="5" multiple>
+</div>
+
+<div class="input-area mt-2 mb-2">
+
+    <!-- 1. Contenido Colapsable del Asistente de prompts -->
+    <div class="collapse" id="prompt-assistant-collapse">
+        <div class="card card-body mb-2">
+            <div class="row g-2">
+                {% set prompt_col_class = 'col-md-4' %}
+                <div class="{{ prompt_col_class }}">
+                    <div class="position-relative h-100">
+                        <div class="input-group dropup h-100">
+                            <button type="button" id="prompt-select-button" class="btn btn-light border dropdown-toggle w-100 text-start" data-bs-toggle="dropdown" aria-expanded="false">
+                                Prompts disponibles ....
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-soft w-100">
+                                {% if prompts and prompts.message %}
+                                {% for category_group in prompts.message %}
+                                    <li><h6 class="dropdown-header">{{ category_group.category_name }}</h6></li>
+                                    {% for prompt in category_group.prompts %}
+                                        <li>
+                                            <a class="dropdown-item" href="#"
+                                               data-prompt-name="{{ prompt.prompt }}"
+                                               data-prompt-description="{{ prompt.description }}"
+                                               data-custom-fields='{{ prompt.custom_fields | tojson  }}'>
+                                                {{ prompt.description }}
+                                            </a>
+                                        </li>                                    {% endfor %}
+                                    {% if not loop.last %}<li><hr class="dropdown-divider"></li>{% endif %}
+                                {% endfor %}
+                                {% endif %}
+                            </ul>
+                        </div>
+                        <button type="button" id="clear-selection-button" class="btn clear-specific-data-button" style="display: none;"><i class="bi bi-x-circle-fill"></i></button>
+                    </div>
+                    <input type="hidden" id="prompt-select-value" name="prompt_select_value">
+                    <input type="hidden" id="prompt-select-description" name="prompt-select-description">
+                </div>
+                <!-- Contenedor donde JavaScript inyectará los inputs dinámicos -->
+                <div id="dynamic-inputs-container" class="col-md">
+                    <!-- aca se renderizarán los customs_fields del prompt seleccionado -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 2. La Barra de Entrada Principal -->
+    <div class="chat-input-bar d-flex align-items-center">
+        <!-- Iconos de la izquierda -->
+        <div class="d-flex align-items-center">
+            <!-- BOTÓN  PARA CONTROLAR EL COLLAPSE -->
+            <a class="p-2" href="#prompt-assistant-collapse" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="prompt-assistant-collapse" title="Usar Asistente de Prompts">
+                <i class="bi bi-magic"></i>
+            </a>
+            <a class="p-2" href="javascript:void(0);" id="paperclip-button" title="Adjuntar archivos">
+                <i class="bi bi-plus-circle"></i>
+            </a>
+            <div id="view-files-button-container" style="display: none;">
+                <a class="p-2" href="javascript:void(0);" id="view-files-button" title="Ver archivos adjuntos">
+                    <i class="bi bi-file-earmark-text"></i>
+                </a>
+            </div>
+        </div>
+
+        <!-- Textarea Central -->
+        <textarea id="question" placeholder="Escribe tu consulta aquí..." class="form-control chat-textarea" style="resize: none;" rows="1"></textarea>
+
+        <!-- Botón de Enviar a la derecha -->
+        <div class="d-flex align-items-center">
+            <div id="send-button-container">
+                <a href="javascript:void(0);" id="send-button"
+                   class="p-2 send-button-icon" title="Enviar">
+                    <i class="bi bi-arrow-up-circle-fill"></i>
+                </a>
+            </div>
+            <div id="stop-button-container" style="display: none;">
+                <a href="javascript:void(0);" id="stop-button"
+                   class="p-2 text-danger" title="Detener">
+                    <i class="bi bi-stop-circle-fill"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Incluir los modales desde un archivo externo -->
+{% include 'chat_modals.html' %}
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+    // --- Global Configuration from Backend ---
+    window.companyShortName = "{{ company_short_name }}";
+    window.iatoolkit_base_url = "{{ iatoolkit_base_url }}";
+    window.externalUserId = "{{ external_user_id }}";
+    window.availablePrompts = {{ prompts.message | tojson }};
+
+    {% if auth_method == 'jwt' and session_jwt %}
+        // Store session JWT if it exists, defined in the same global scope
+        window.sessionJWT = "{{ session_jwt }}";
+    {% endif %}
+</script>
+
+<!-- Carga de los scripts JS externos después de definir las variables globales -->
+<script src="{{ url_for('static', filename='js/chat_filepond.js') }}"></script>
+<script src="{{ url_for('static', filename='js/chat_history.js') }}"></script>
+<script src="{{ url_for('static', filename='js/chat_feedback.js') }}"></script>
+<script src="{{ url_for('static', filename='js/chat_main.js') }}"></script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const promptCollapse = document.getElementById('prompt-assistant-collapse');
+        if (promptCollapse) {
+            promptCollapse.addEventListener('shown.bs.collapse', function () {
+                // Desplazar la ventana al final de la página para mantener visible el área de entrada.
+                window.scrollTo({
+                    top: document.body.scrollHeight,
+                    behavior: 'smooth'
+                });
+            });
+        }
+    });
+</script>
+{% endblock %}