iatoolkit 0.11.0__py3-none-any.whl → 0.71.2__py3-none-any.whl

iatoolkit/templates/_company_header.html

@@ -0,0 +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,39 +4,59 @@
     <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="{{ 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') }}">
+    <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) }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/llm_output.css', _external=True) }}">
+
+    {% 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,45 +1,66 @@
 {% extends "base.html" %}
 
-{% block title %}Cambiar Contraseña{% endblock %}
+{% block title %}{{ t('ui.change_password.title') }} - {{ branding.name }} {% endblock %}
+
+{% block styles %}
+    <style>
+        {{ branding.css_variables | safe }}
+    </style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_public.css') }}">
+{% 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 class="container mt-4">
 
-            </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>
+{% include '_company_header.html' %}
+
+    <!-- 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">{{ t('ui.change_password.title') }}</h4>
+                        <p class="text-muted text-center mb-4">
+                            {{ 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">
 
-            <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>
+                            <div class="mb-3">
+                                <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="{{ t('ui.change_password.temp_code_placeholder') }}">
+                            </div>
 
-        </form>
-    </div>
+                            <div class="mb-3">
+                                <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>{{ t('ui.change_password.password_instructions') }}</span>
+                                </div>
+                            </div>
+
+                            <div class="mb-3">
+                                <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">{{ 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>{{ t('ui.change_password.back_to_home') }}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
 </div>
+
 {% endblock %}

iatoolkit/templates/chat.html

@@ -1,67 +1,101 @@
 {% extends "base.html" %}
 
-{% block title %}IAToolkit{% endblock %}
+{% block title %}{{ branding.name }} IA{% endblock %}
 
 {% block content %}
+<div class="chat-layout-container container">
+{% block styles %}
+    {# Movemos los estilos y los links aquí para que se rendericen en el <head> #}
+    <style>
+        {{ branding.css_variables | safe }}
+    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
-<style>
-    {{ branding.css_variables | safe }}
-</style>
+    {% endblock %}
 
 <!-- Sección de encabezado con el usuario conectado -->
-<div id="company-section" class="company-section d-flex justify-content-between align-items-center px-3 py-2"
-     style="{{ branding.header_style }}">
-
-    <!-- Izquierda: Nombre de la Empresa y atribución "Powered by" -->
-    <div class="d-flex align-items-center">
-        <span style="{{ branding.primary_text_style }}">
-            {{ branding.name }}
-        </span>
-        <span class="ms-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Powered by IAToolkit">
-            <i class="bi bi-info-circle" style="color: {{ branding.header_text_color }}; opacity: 0.7; font-size: 0.9rem;"></i>
-        </span>
-    </div>
+    <div id="company-section"
+         class="company-section d-flex flex-column flex-md-row justify-content-md-between align-items-center px-3 py-2"
+         style="{{ branding.header_style }}">
 
-    <!-- Derecha: Grupo de información y acciones para el usuario -->
-    <div class="d-flex align-items-center">
-        <!-- 1. ID de Usuario -->
-        <span style="{{ branding.secondary_text_style }}">
-            {{ external_user_id or user.email }}
-        </span>
-
-        <!-- 2. Separador Vertical -->
-        <div class="vr mx-3"></div>
-
-        <!-- 3. Iconos de Acción -->
-        <a href="javascript:void(0);" id="history-button"
-           class="action-icon-style" title="Historial con mis consultas" style="color: {{ branding.header_text_color }};">
-            <i class="bi bi-clock-history"></i>
-        </a>
-        <a href="javascript:void(0);" id="send-feedback-button"
-           class="ms-3 action-icon-style" title="Tu feedback es muy importante" style="color: {{ branding.header_text_color }};">
-            <i class="bi bi-emoji-smile"></i>
-        </a>
-
-        <!-- Icono de cerrar sesión (al final) -->
-        {% if user.email %}
-            <a href="{{ url_for('logout', company_short_name=company_short_name) }}"
-                 class="ms-3 action-icon-style" title="Cerrar sesión" style="color: {{ branding.header_text_color }} !important;">
-                <i class="bi bi-box-arrow-right"></i>
-            </a>
-        {% endif %}
-    </div>
+        <!-- Fila 1 (Móvil) / Columna Izquierda (Desktop): Nombre de la Empresa -->
+        <div class="d-flex align-items-center mb-2 mb-md-0">
+            <span style="{{ branding.primary_text_style }}">
+                {{ branding.name }}
+            </span>
+            <span class="ms-2" data-bs-toggle="tooltip" data-bs-placement="bottom"
+                  title="Powered by IAToolkit ({{ iatoolkit_version }})">
+                <i class="bi bi-info-circle" style="color: {{ branding.header_text_color }}; opacity: 0.7; font-size: 0.9rem;"></i>
+            </span>
+        </div>
 
-</div>
+        <!-- Contenedor para la derecha que agrupa ID de usuario y botones -->
+        <div class="d-flex flex-column flex-md-row align-items-center">
 
-<div id="chat-container"
-     class="chat-block mt-2 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?
+            <!-- Fila 2 (Móvil) / Parte 1 de la Columna Derecha (Desktop): ID de Usuario -->
+            <span style="{{ branding.secondary_text_style }}" class="mb-2 mb-md-0">
+                {{ user_identifier }}
+            </span>
+
+            <!-- Separador Vertical (Solo visible en Desktop) -->
+            <div class="vr mx-3 d-none d-md-block"></div>
+
+            <!-- Fila 3 (Móvil) / Parte 2 de la Columna Derecha (Desktop): Iconos de Acción -->
+            <div class="d-flex align-items-center">
+                <a href="javascript:void(0);"
+                   id="history-button"
+                   class="action-icon-style" title="{{ t('ui.tooltips.history') }}"
+                   style="color: {{ branding.header_text_color }};">
+                    <i class="bi bi-clock-history"></i>
+                </a>
+                <a href="javascript:void(0);"
+                   id="force-reload-button"
+                   class="ms-3 action-icon-style"
+                   title="{{ t('ui.tooltips.reload_context') }}"
+                   style="color: {{ branding.header_text_color }};">
+                    <i class="bi bi-arrow-clockwise"></i>
+                </a>
+                <a href="javascript:void(0);"
+                   id="send-feedback-button"
+                   class="ms-3 action-icon-style"
+                   title="{{ t('ui.tooltips.feedback') }}"
+                   style="color: {{ branding.header_text_color }};">
+                    <i class="bi bi-emoji-smile"></i>
+                </a>
+
+                <a href="javascript:void(0);"
+                   id="onboarding-button"
+                   class="ms-3 action-icon-style"
+                   title="{{ t('ui.tooltips.onboarding') }}"
+                   style="color: {{ branding.header_text_color }};">
+                    <i class="bi bi-lightbulb"></i>
+                </a>
+                <a href="javascript:void(0);"
+                       id="open-help-button"
+                       class="ms-3 action-icon-style"
+                        title="{{ t('ui.tooltips.usage_guide') }}"
+                       style="color: {{ branding.header_text_color }};">
+                        <i class="bi bi-question-circle-fill"></i>
+                    </a>
+                <a href="javascript:void(0);"
+                   id="logout-button"
+                   class="ms-3 action-icon-style"
+                   title="{{ t('ui.tooltips.logout') }}"
+                   style="color: {{ branding.header_text_color }}; !important;">
+                    <i class="bi bi-box-arrow-right"></i>
+                </a>
+            </div>
         </div>
     </div>
+
+<div id="chat-container"
+     class="chat-block mt-2 flex-grow-1" style="overflow-y: auto;">
+
+    <!-- Mensaje de bienvenida  -->
+    <div class="answer-section">
+         {{ t('ui.chat.welcome_message') }}
+    </div>
 </div>
 
 <!-- Input oculto de FilePond -->
@@ -79,8 +113,11 @@
                 <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 type="button" id="prompt-select-button"
+                                    class="btn prompt-select-button  border dropdown-toggle w-100 text-start"
+                                    data-bs-toggle="dropdown"
+                                    aria-expanded="false">
+                                {{ t('ui.chat.prompts_available') }} ....
                             </button>
                             <ul class="dropdown-menu dropdown-menu-soft w-100">
                                 {% if prompts and prompts.message %}
@@ -94,13 +131,20 @@
                                                data-custom-fields='{{ prompt.custom_fields | tojson  }}'>
                                                 {{ prompt.description }}
                                             </a>
-                                        </li>                                    {% endfor %}
-                                    {% if not loop.last %}<li><hr class="dropdown-divider"></li>{% endif %}
+                                        </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>
+                        <button type="button"
+                                id="clear-selection-button"
+                                class="btn clear-specific-data-button position-absolute end-0 me-1" 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">
@@ -117,34 +161,41 @@
     <div id="chat-input-bar" 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">
+            <!-- varita magica -->
+            <a class="p-2" href="#prompt-assistant-collapse" data-bs-toggle="collapse" role="button"
+               aria-expanded="false" aria-controls="prompt-assistant-collapse"
+               title="{{ t('ui.tooltips.use_prompt_assistant') }}">
                 <i class="bi bi-magic"></i>
             </a>
-            <a class="p-2" href="javascript:void(0);" id="paperclip-button" title="Adjuntar archivos">
+            <a class="p-2" href="javascript:void(0);" id="paperclip-button"
+               title="{{ t('ui.tooltips.attach_files') }}">
                 <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">
+                <a class="p-2" href="javascript:void(0);" id="view-files-button"
+                   title="{{ t('ui.tooltips.view_attached_files') }}">
                     <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>
+        <textarea id="question" placeholder="{{ t('ui.chat.input_placeholder') }}"
+                  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">
+                   class="p-2 send-button-icon"
+                   title="{{ t('ui.buttons.send') }}">
                     <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">
+                   class="p-2 text-danger"
+                   title="{{ t('ui.buttons.stop') }}">
                     <i class="bi bi-stop-circle-fill"></i>
                 </a>
             </div>
@@ -155,41 +206,44 @@
 <!-- Incluir los modales desde un archivo externo -->
 {% include 'chat_modals.html' %}
 
+</div>
 {% endblock %}
 
 {% block scripts %}
 <script>
     // --- Global Configuration from Backend ---
     window.companyShortName = "{{ company_short_name }}";
+    window.user_identifier = "{{ user_identifier }}";
+    window.redeemToken = {{ redeem_token | tojson | default('null') }};
     window.iatoolkit_base_url = "{{ iatoolkit_base_url }}";
-    window.externalUserId = "{{ external_user_id }}";
     window.availablePrompts = {{ prompts.message | tojson }};
+    window.onboardingCards = {{ onboarding_cards | tojson }};
+    window.sendButtonColor = "{{ branding.send_button_color }}";
+
+    // JS translations helper
+    window.i18n = {{ js_translations | tojson }};
+    function t_js(key) {
+        return window.i18n[key] || key;
+    }
+
 
-    {% 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 src="{{ url_for('static', filename='js/chat_history_button.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_reload_button.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_feedback_button.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_help_content.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_onboarding_button.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_logout_button.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_prompt_manager.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_filepond.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_main.js', _external=True) }}"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+    <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'
-                });
-            });
-        }
-    });
     document.addEventListener('DOMContentLoaded', function () {
         // Inicializar todos los tooltips de la página
         var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
@@ -197,5 +251,45 @@
             return new bootstrap.Tooltip(tooltipTriggerEl)
         })
     });
+
+// Inicialización del modal de onboarding
+document.addEventListener('DOMContentLoaded', function () {
+  const btn = document.getElementById('onboarding-button');
+  if (!btn) return;
+
+  const modalEl = document.getElementById('onboardingModal');
+  const modal = new bootstrap.Modal(modalEl);
+
+  if (!window.initOnboarding) {
+    console.error('initOnboarding no disponible. Verifica chat_onboarding.js');
+    return;
+  }
+
+  const onboarding = initOnboarding({
+    mode: 'modal',
+    cards: Array.isArray(window.onboardingCards) ? window.onboardingCards : [],
+    ui: {
+      icon: '#ob-icon',
+      title: '#ob-title',
+      text: '#ob-text',
+        example: '#ob-example',
+      dots: '#ob-dots',
+      prev: '#ob-prev',
+      next: '#ob-next'
+    },
+    autoRotateMs: 5000
+  });
+
+  modalEl.addEventListener('hidden.bs.modal', () => onboarding.stop());
+
+  btn.addEventListener('click', () => {
+    if (!onboarding.hasCards()) {
+      toastr.info('No hay información de onboarding disponible.');
+      return;
+    }
+    onboarding.start();
+    modal.show();
+  });
+});
 </script>
 {% endblock %}