iatoolkit 0.63.1__py3-none-any.whl → 0.67.0__py3-none-any.whl

iatoolkit/static/styles/chat_modal.css

@@ -1,54 +1,4 @@
-/* ######################################################### */
 /* Estilos generales para modales */
-/* ######################################################### */
-
-/* Estilos del header del modal con branding */
-.modal-header.branded {
-    background-color: var(--brand-modal-header-bg);
-    color: var(--brand-modal-header-text);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-.modal-header.branded .btn-close {
-    filter: invert(1) grayscale(100%) brightness(200%); /* Hace el botón de cerrar visible en fondos oscuros */
-}
-
-/* Estilos para botones con branding */
-.btn-branded-primary {
-    background-color: var(--brand-primary-color);
-    border-color: var(--brand-primary-color);
-    color: var(--brand-text-on-primary);
-}
-.btn-branded-primary:hover {
-    background-color: var(--brand-text-on-primary);
-    color: var(--brand-primary-color);
-    border-color: var(--brand-primary-color);
-}
-
-.btn-branded-secondary {
-    background-color: var(--brand-secondary-color);
-    border-color: var(--brand-secondary-color);
-    color: var(--brand-text-on-secondary);
-}
-.btn-branded-secondary:hover {
-    background-color: var(--brand-text-on-secondary);
-    color: var(--brand-secondary-color);
-    border-color: var(--brand-secondary-color);
-}
-
-/* Estilos para alertas informativas personalizadas */
-.alert-branded-info {
-    background-color: var(--brand-info-bg);
-    color: var(--brand-info-text);
-    border-color: var(--brand-info-border);
-}
-.alert-branded-info strong,
-.alert-branded-info .alert-link {
-    color: inherit;
-}
-.alert-branded-info .bi { /* Asegura que los iconos también tomen el color */
-    color: inherit;
-}
-
 
 /* Título del modal */
 .modal-title{
@@ -56,7 +6,6 @@
     font-weight: bold;
 }
 
-
 /* Estilos del header del modal*/
 .modal-header {
     display: flex;
@@ -70,6 +19,7 @@
     margin: 0;
     padding: 0;
     flex: 1;
+    color: inherit;
 }
 
 /* Estilos del botón de cerrar del modal*/
@@ -79,49 +29,36 @@
     margin-left: auto;
 }
 
-/* ######################################################### */
-/* Modal de historial */
-/* ######################################################### */
-
-/* Encabezado de tabla con branding */
-.thead-branded th {
-    background-color: var(--brand-primary-color);
-    color: var(--brand-text-on-primary);
-    font-size: 16px;
-    font-weight: bold;
+/* Estilos del header del modal con branding */
+.modal-header.branded {
+    background-color: var(--brand-modal-header-bg);
+    color: var(--brand-modal-header-text);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
-
-
-#history-content .table td:nth-child(1) { width: 5%; }
-#history-content .table td:nth-child(2) { width: 23%; }
-
-#history-content .table td:nth-child(3) {
-    width: auto; /* Columna de la consulta - ocupa el resto */
+.modal-header.branded .btn-close {
+    filter: invert(1) grayscale(100%) brightness(200%); /* Hace el botón de cerrar visible en fondos oscuros */
 }
 
-/* Evita el salto de línea en la celda de la fecha */
-#historyModal .date-cell {
-    white-space: nowrap;
-}
 
-/* Estilo para el icono de copiar/editar en cada fila */
-#historyModal .copy-query-icon {
-    color: var(--brand-secondary-color, #6c757d); /* Usa el color secundario de la marca */
-    text-decoration: none;
-    opacity: 0.6;
-    transition: opacity 0.2s ease-in-out;
+/* Tabla con el resultado del historial */
+.thead-branded th {
+    background-color: #e9ecef; /* Un gris claro estándar de Bootstrap */
+    color: #212529;             /* El color de texto oscuro por defecto */
+    font-size: 16px;
+    font-weight: bold;
 }
-
-#historyModal .copy-query-icon:hover {
-    opacity: 1; /* El icono se vuelve completamente opaco al pasar el ratón */
-    cursor: pointer; /* Asegura que el cursor cambie a una mano */
+.col-icon {
+  width: 1%;
 }
 
-/* ######################################################### */
 /* Modal de feedback */
-/* ######################################################### */
-
-/* Contenedor de calificación del modal de feedback */
+.rating-stars {
+    display: flex;
+    justify-content: center;
+    gap: 5px;
+    margin-bottom: 15px;
+    padding-top: 5px;
+}
 
 /* Estilos de las estrellas del modal de feedback */
 .star {
@@ -132,16 +69,51 @@
     margin: 0 2px;
 }
 
-/* Estilos de las estrellas del modal de feedback al pasar el mouse */
+.star::before {
+    content: '★';
+}
+
 .star:hover,
 .star.active,
 .star.hover-active {
-    color: #ffc107;
+    color: var(--brand-primary-color);
+}
+
+/* model de help */
+     .modal-body .accordion-button:not(.collapsed) {
+        background-color: var(--brand-primary-color);
+        color: var(--brand-text-on-primary);
+        font-weight: 600;
+        box-shadow: none;
+    }
+
+    /* Estilo para el anillo de foco, aplicado ÚNICAMENTE cuando el botón está CERRADO y tiene foco. */
+    .modal-body .accordion-button.collapsed:focus {
+        background-color: #fff; /* Asegura fondo blanco al hacer foco en un item cerrado */
+        border-color: transparent; /* Evita bordes no deseados */
+        /* La única regla que debe estar aquí es la que dibuja el anillo de foco. */
+        box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-color-rgb), 0.25);
+    }
+
+.icon-spaced {
+    margin-right: 10px;
+}
+
+.text-muted{
+    font-size:16px;
+    text-align: justify;
+}
+
+.feedback-text{
+    font-size: 16px;
 }
 
-/* ######################################################### */
 /* Modal de listado de archivos */
-/* ######################################################### */
+/* Estilos del nombre del archivo del modal de archivos y ordenar icono */
+.file-name-modal {
+    flex: 1;
+    margin-right: 10px;
+}
 
 /* Para el icono de eliminar del modal */
 .remove-file-btn i {
@@ -155,13 +127,7 @@
     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/chat_public.css

@@ -0,0 +1,107 @@
+/* Estos estilos son para las paginas publicas: home, signup,  olvide la clave, etc */
+
+    /* --- Encabezado (top) de company --- */
+    .custom-company-header {
+        height: 78px;
+        margin-bottom: 20px;
+        padding: 0 1.5rem; /* Padding interno para que el texto no toque los bordes */
+        border-radius: 0.375rem; /* Bordes redondeados para que coincida con los formularios */
+
+        /* Los estilos de color y sombra se mantienen */
+        background-color: var(--brand-header-bg);
+        color: var(--brand-header-text);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra ligeramente más suave */
+    }
+
+    /* Estilo específico para el nombre de la marca en el encabezado (Letra más grande) */
+    .custom-company-header .brand-name {
+        font-size: 1.8rem; /* Tamaño de fuente aumentado */
+        font-weight: 600;
+        color: inherit;
+        text-decoration: none;
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    /* Efecto hover para el enlace del nombre de la marca */
+    .custom-company-header .brand-name:hover {
+        opacity: 0.85;
+    }
+
+    /* Estilo para el texto "Powered by" --- */
+    .custom-company-header .powered-by {
+        font-size: 0.9rem;
+        font-weight: 400;
+        opacity: 0.75; /* Menos prominente que el nombre de la marca */
+        color: inherit;
+    }
+
+    /* --- Estilo para el enlace de IAToolkit --- */
+    .custom-company-header .iatoolkit-link {
+        color: inherit; /* Hereda el color del texto padre */
+        text-decoration: none; /* ¡Elimina el subrayado! */
+        font-weight: 600; /* Un poco más de peso para diferenciarlo */
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    .custom-company-header .form-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    /* titulo en home */
+    .home-title {
+        font-size: 3.2rem;
+        font-weight: 800;
+        line-height: 1.2;
+        color: var(--brand-primary-color);
+    }
+    .list-example {
+            display: block;              /* Coloca el ejemplo en su propia línea */
+            font-size: 0.9rem;          /* Lo hace ligeramente más pequeño */
+            color: #6c757d;             /* Color gris (muted) para texto secundario */
+            font-style: italic;         /* Cursiva para diferenciarlo */
+            padding-left: 1.75rem;      /* Lo indenta para alinearlo con el texto del tema */
+            margin-top: 0.25rem;        /* Pequeño espacio superior */
+        }
+
+    .text-brand-primary {
+        font-weight: 800;
+        color: var(--brand-primary-color);
+        }
+
+/* contenedor de formularios: login, signup, forgot password, etc. */
+    .branded-form-container {
+        background-color: #ffffff;
+        border: 1px solid #dee2e6;
+        border-top: 4px solid #adb5bd;
+        border-radius: 0.375rem;
+        padding: 2rem;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    }
+
+    .branded-form-label {
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: #495057; /* Un gris oscuro profesional */
+        text-transform: uppercase;
+        letter-spacing: 0.05em; /* Un poco de espacio extra entre letras */
+        margin-bottom: 0.3rem;
+        display: block;
+    }
+
+    /* Efecto de foco brandeado para todos los form-control */
+    .form-control:focus {
+        border-color: var(--brand-primary-color);
+        box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-color-rgb), 0.25); /* Usa la variable RGB para el shadow */
+    }
+
+    .branded-form-title {
+        color: var(--brand-primary-color);
+        font-size: 1.75rem; /* Un tamaño más prominente */
+        font-weight: 700;   /* Equivalente a fw-bold de Bootstrap */
+        text-align: center;
+        margin-bottom: 1.5rem; /* Espacio consistente debajo del título */
+    }
+
+

iatoolkit/static/styles/landing_page.css

@@ -86,7 +86,6 @@ body {
     color: var(--website-primary-color);
 }
 
-/* --- Sección de Características (Features) --- */
 .features-section {
     padding: 5rem 0;
     background-color: var(--website-light-bg);

iatoolkit/templates/_company_header.html

@@ -1,16 +1,20 @@
 {# El div principal ahora es un contenedor y tiene los estilos y clases de alineación #}
 <div class="custom-company-header container d-flex justify-content-between align-items-center">
 
+    {% if company_short_name and branding %}
     <a href="{{ url_for('home', company_short_name=company_short_name) }}"
        class="brand-name"
        style="{{ branding.primary_text_style }}">
         {{ branding.name }} IA
     </a>
-
+    {% else %}
+        <span class="brand-name">
+             IAToolkit
+        </span>
+    {% endif %}
 
     {# Texto "Powered by" con enlace a iatoolkit.com #}
     <span class="powered-by">
         Powered by <a href="{{ url_for('index') }}" rel="noopener noreferrer" class="iatoolkit-link">IAToolkit</a>
     </span>
-
 </div>

iatoolkit/templates/_login_widget.html

@@ -0,0 +1,42 @@
+<div class="branded-form-container">
+    <!-- 1. Encabezado de Marketing -->
+    <div class="text-center mb-4">
+        <p class="text-muted widget-intro-text">
+            {{ t('ui.login_widget.welcome_message') }}
+        </p>
+    </div>
+
+    <!-- 2. Formulario de Inicio de Sesión -->
+    <form id="login-form"
+          action="{{ url_for('login', company_short_name=company_short_name) }}"
+          method="post">
+      <div class="mb-3">
+        <label for="email" class="form-label d-block">{{ t('ui.signup.email_label') }}</label>
+        <input type="email" id="email" name="email" class="form-control"
+               required value="{{ form_data.email if form_data is defined else '' }}">
+      </div>
+      <div class="mb-3">
+        <label for="password" class="form-label d-block">{{ t('ui.signup.password_label') }}</label>
+        <input type="password" id="password" name="password"
+               class="form-control" required>
+      </div>
+      <button type="submit" class="btn btn-branded-primary w-100 fw-bold py-2">
+          {{ t('ui.login_widget.login_button') }}
+      </button>
+    </form>
+
+    <!-- 3. Nueva Sección de Registro más Atractiva -->
+    <div class="mt-4 pt-3 text-center" style="border-top: 1px solid #e0e0e0;">
+        <span class="text-muted small">{{ t('ui.login_widget.no_account_prompt') }}</span>
+        <a href="{{ url_for('signup', company_short_name=company_short_name) }}" id="signup-link"
+           class="fw-bold ms-1 text-decoration-none" style="color: var(--brand-primary-color);">
+            {{ t('ui.login_widget.signup_link') }}</a>
+    </div>
+
+    <!-- 4. Enlace de Recuperación de Contraseña (más sutil) -->
+    <div class="text-center mt-2">
+      <a href="{{ url_for('forgot_password', company_short_name=company_short_name) }}" class="text-decoration-none text-muted" style="font-size: 0.8rem;">
+        {{ t('ui.login_widget.forgot_password_link') }}
+      </a>
+    </div>
+</div>

iatoolkit/templates/base.html

@@ -4,11 +4,13 @@
     <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/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" >
     <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="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
     <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_iatoolkit.css', _external=True) }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='styles/onboarding.css', _external=True) }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_modal.css',  _external=True) }}">
@@ -16,32 +18,45 @@
 
     {% block styles %}{% endblock %}
 </head>
-<body class="d-flex flex-column p-3" style="min-height: 100vh;">
-
-    <main class="d-flex flex-column flex-grow-1">
+<body>
+    <!-- El "Ancla": Envolvemos el contenido en un div con un ID y estilo. -->
+    <div id="page-content-wrapper" style="position: relative;">
         {% block content %}{% endblock %}
-    </main>
-
+    </div>
 
     <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>
-
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></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
-                 }
-        });
+        // Configuración global de Toastr
+        toastr.options = {
+            "closeButton": true,
+            "progressBar": true,
+            "positionClass": "toast-bottom-right",
+            "preventDuplicates": true,
+            "timeOut": "7000",
+            "extendedTimeOut": "1000",
+            "tapToDismiss": false,
+            "target": "#page-content-wrapper"
+        };
+
+        {% if flashed_messages %}
+            {% for category, message in flashed_messages %}
+                var toastClass = 'toast-info'; // default class
+                if ('{{ category }}' === 'error') {
+                    toastClass = 'toast-error';
+                } else if ('{{ category }}' === 'success') {
+                    toastClass = 'toast-success';
+                }
+
+                // Llama a Toastr usando la opción 'toastClass' para aplicar nuestro estilo
+                toastr.info("{{ message }}", null, { "toastClass": "toast " + toastClass });
+
+            {% endfor %}
         {% endif %}
     </script>
 

iatoolkit/templates/change_password.html

@@ -1,59 +1,59 @@
 {% extends "base.html" %}
 
-{% block title %}Cambiar Contraseña - {{ company.name }}{% endblock %}
+{% block title %}{{ t('ui.change_password.title') }} - {{ company.name }}{% endblock %}
 
-{% block content %}
-    <!-- 1. Incluimos los estilos de branding reutilizables -->
-    {% include '_branding_styles.html' %}
+{% block styles %}
+    <style>
+        {{ branding.css_variables | safe }}
+    </style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_public.css') }}">
+{% endblock %}
 
-    <!-- Enlazamos la hoja de estilos de la landing page para reutilizar estilos -->
-    <link rel="stylesheet" href="{{ iatoolkit_base_url }}/static/styles/landing_page.css">
+{% block content %}
+<div class="container mt-4">
 
-    <!-- 2. Incluimos la barra de navegación reutilizable -->
-    {% include '_navbar.html' %}
+{% include '_company_header.html' %}
 
-    <!-- 3. Sección contenedora para centrar el contenido -->
+    <!-- Sección contenedora para centrar el contenido -->
     <section class="hero-section">
         <div class="container">
             <div class="row justify-content-center">
                 <div class="col-lg-6 col-md-8">
                     <div class="branded-form-container">
-                        <h4 class="branded-form-title">Crear Nueva Contraseña</h4>
-
+                        <h4 class="branded-form-title">{{ t('ui.change_password.title') }}</h4>
                         <p class="text-muted text-center mb-4">
-                            Estás cambiando la contraseña para <strong>{{ email }}</strong>.
+                            {{ t('ui.change_password.subtitle', email=email) | safe }}
                         </p>
 
                         <form action="{{ url_for('change_password', company_short_name=company_short_name, token=token) }}" method="post">
 
-                            <!-- CAMPO RESTAURADO: Código Temporal -->
                             <div class="mb-3">
-                                <label for="temp_code" class="form-label text-secondary">Código Temporal</label>
+                                <label for="temp_code" class="form-label text-secondary">{{ t('ui.change_password.temp_code_label') }}</label>
                                 <input type="text" id="temp_code" name="temp_code" class="form-control"
                                        required value="{{ form_data.temp_code if form_data else '' }}"
-                                       placeholder="Revisa tu correo electrónico">
+                                       placeholder="{{ t('ui.change_password.temp_code_placeholder') }}">
                             </div>
 
                             <div class="mb-3">
-                                <label for="new_password" class="form-label text-secondary">Nueva Contraseña</label>
+                                <label for="new_password" class="form-label text-secondary">{{ t('ui.change_password.new_password_label') }}</label>
                                 <input type="password" id="new_password" name="new_password" class="form-control" required>
                                 <div class="d-flex align-items-start text-muted mt-2" style="font-size: 0.8rem;">
                                     <i class="bi bi-info-circle me-2" style="font-size: 0.9rem; line-height: 1.4;"></i>
-                                    <span>Debe contener al menos 8 caracteres, mayúscula, minúscula, número y un carácter especial.</span>
+                                    <span>{{ t('ui.change_password.password_instructions') }}</span>
                                 </div>
                             </div>
 
                             <div class="mb-3">
-                                <label for="confirm_password" class="form-label text-secondary">Confirmar Nueva Contraseña</label>
+                                <label for="confirm_password" class="form-label text-secondary">{{ t('ui.change_password.confirm_password_label') }}</label>
                                 <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
                             </div>
 
-                            <button type="submit" class="btn btn-branded-primary w-100 fw-bold py-2 mt-3">Guardar Contraseña</button>
+                            <button type="submit" class="btn btn-branded-primary w-100 fw-bold py-2 mt-3">{{ t('ui.change_password.save_button') }}</button>
                         </form>
 
                         <div class="text-center mt-4 pt-3" style="border-top: 1px solid #e0e0e0;">
                             <a href="{{ url_for('home', company_short_name=company_short_name) }}" class="text-muted text-decoration-none fw-semibold">
-                                <i class="bi bi-arrow-left me-1"></i>Volver al inicio
+                                <i class="bi bi-arrow-left me-1"></i>{{ t('ui.change_password.back_to_home') }}
                             </a>
                         </div>
                     </div>
@@ -61,4 +61,6 @@
             </div>
         </div>
     </section>
+</div>
+
 {% endblock %}