iatoolkit 0.51.0__py3-none-any.whl → 0.55.0__py3-none-any.whl

iatoolkit/iatoolkit.py

@@ -19,7 +19,7 @@ from werkzeug.middleware.proxy_fix import ProxyFix
 from injector import Binder, singleton, Injector
 from importlib.metadata import version as _pkg_version, PackageNotFoundError
 
-IATOOLKIT_VERSION = "0.50.2"
+IATOOLKIT_VERSION = "0.55.0"
 
 # global variable for the unique instance of IAToolkit
 _iatoolkit_instance: Optional['IAToolkit'] = None

iatoolkit/static/js/chat_onboarding.js

@@ -0,0 +1,98 @@
+// static/js/chat_onboarding.js
+(function (global) {
+  function qs(root, sel) { return (typeof sel === 'string') ? root.querySelector(sel) : sel; }
+
+  function createDots(container, count, activeIdx, activeColor) {
+    container.innerHTML = '';
+    for (let i = 0; i < count; i++) {
+      const d = document.createElement('div');
+      if (i === activeIdx) d.classList.add('active');
+      d.style.width = '10px';
+      d.style.height = '10px';
+      d.style.borderRadius = '50%';
+      d.style.backgroundColor = i === activeIdx ? (activeColor || 'var(--brand-primary-color, #FF5100)') : '#ddd';
+      d.style.transition = 'background-color .3s';
+      container.appendChild(d);
+    }
+  }
+
+  function initOnboarding(opts) {
+    const {
+      mode = 'modal',
+      cards = [],
+      ui = {},
+      autoRotateMs = 5000,
+      shell = {}
+    } = opts;
+
+    const root = document;
+    const elIcon = qs(root, ui.icon);
+    const elTitle = qs(root, ui.title);
+    const elText = qs(root, ui.text);
+    const elDots = qs(root, ui.dots);
+    const elPrev = qs(root, ui.prev);
+    const elNext = qs(root, ui.next);
+
+    let idx = 0;
+    let autoTimer = null;
+
+    function hasCards() { return Array.isArray(cards) && cards.length > 0; }
+
+    function render() {
+      if (!hasCards()) return;
+      const c = cards[idx] || {};
+      if (elIcon) elIcon.innerHTML = `<i class="${c.icon || 'bi bi-lightbulb'}"></i>`;
+      if (elTitle) elTitle.textContent = c.title || '';
+      if (elText) elText.innerHTML = c.text || '';
+      if (elDots) createDots(elDots, cards.length, idx);
+    }
+
+    function next() { if (!hasCards()) return; idx = (idx + 1) % cards.length; render(); }
+    function prev() { if (!hasCards()) return; idx = (idx - 1 + cards.length) % cards.length; render(); }
+
+    function startAuto() {
+      stopAuto();
+      if (!hasCards()) return;
+      autoTimer = setInterval(next, autoRotateMs);
+    }
+    function stopAuto() { if (autoTimer) { clearInterval(autoTimer); autoTimer = null; } }
+
+    function setupShellIfNeeded() {
+      if (mode !== 'shell') return;
+      const loader = ui.loader ? qs(root, ui.loader) : null;
+      const container = ui.container ? qs(root, ui.container) : null;
+      if (!container || !shell.iframeSrc) return;
+
+      const iframe = document.createElement('iframe');
+      iframe.src = shell.iframeSrc;
+      iframe.style.width = '100%';
+      iframe.style.height = '100%';
+      iframe.style.border = 'none';
+      iframe.style.display = 'none';
+
+      iframe.onload = function () {
+        iframe.style.display = 'block';
+        if (loader) {
+          loader.style.opacity = '0';
+          setTimeout(() => loader.style.display = 'none', 500);
+        }
+      };
+      container.appendChild(iframe);
+    }
+
+    if (elPrev) elPrev.addEventListener('click', () => { prev(); startAuto(); });
+    if (elNext) elNext.addEventListener('click', () => { next(); startAuto(); });
+
+    function start() {
+      idx = 0;
+      render();
+      startAuto();
+      if (mode === 'shell') setupShellIfNeeded();
+    }
+
+    return { start, stop: stopAuto, next, prev, hasCards };
+  }
+
+  // Export global
+  global.initOnboarding = initOnboarding;
+})(window);

iatoolkit/static/styles/chat_iatoolkit.css

@@ -455,4 +455,3 @@
 #send-button i {
     color: var(--brand-send-button-color);
 }
-

iatoolkit/static/styles/onboarding.css

@@ -0,0 +1,169 @@
+/* static/css/onboarding.css */
+
+/* Fuente base para ambos contextos */
+.ob-root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Tarjeta */
+.ob-card {
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+  padding: 30px;
+  width: 90%;
+  max-width: 450px;
+  text-align: center;
+  transition: opacity 0.3s ease-in-out;
+  margin: 0 auto;
+}
+
+/* Contenido de tarjeta */
+.ob-icon {
+  font-size: 40px;
+  color: var(--brand-primary-color, #FF5100);
+  margin-bottom: 15px;
+}
+.ob-title {
+  font-size: 1.25rem;
+  color: #333;
+  margin-bottom: 10px;
+}
+.ob-text {
+  font-size: 0.95rem;
+  color: #666;
+  line-height: 1.5;
+  min-height: 60px;
+}
+
+/* Navegación */
+.ob-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+}
+.ob-btn {
+  background-color: var(--brand-secondary-color, #06326B);
+  border: none;
+  color: var(--brand-text-on-secondary, #FFFFFF);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ob-btn:hover { opacity: 0.85; }
+
+/* Dots */
+.ob-dots {
+  display: flex;
+  gap: 8px;
+}
+.ob-dots > div {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #ddd;
+  transition: background-color 0.3s;
+}
+.ob-dots > div.active {
+  background-color: var(--brand-primary-color, #FF5100);
+}
+
+/* Encabezado reutilizable (si se usa) */
+.ob-brand-header {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 24px;
+  color: var(--brand-secondary-color, #06326B);
+  text-align: center;
+}
+.ob-brand-header .brand-name {
+  color: var(--brand-primary-color, #FF5100);
+}
+
+/* Utilidades */
+.ob-fade {
+  transition: opacity 0.5s ease-in-out;
+}
+
+/* Responsivo */
+@media (max-width: 420px) {
+  .ob-card { padding: 24px; }
+  .ob-icon { font-size: 34px; }
+}
+
+/* Overlay a pantalla completa */
+.onboarding-shell-root {
+  position: relative;
+  height: calc(100vh - 0px);
+}
+
+/* Centrado vertical y horizontal del contenido del loader */
+#loader-wrapper {
+  position: absolute; inset: 0;
+  background-color: #f4f7f6;
+  z-index: 1000;
+  display: flex; align-items: center; justify-content: center;
+  padding: 20px; box-sizing: border-box;
+  transition: opacity 0.5s ease-in-out;
+}
+
+/* Pila vertical: header + tarjeta + banda de carga */
+.ob-stack {
+  width: 100%;
+  max-width: 520px; /* ligeramente más que la tarjeta para respiración */
+  display: flex;
+  flex-direction: column;
+  align-items: stretch; /* la tarjeta ocupa el ancho */
+  gap: 16px;
+}
+
+/* Header de marca consistente */
+.ob-brand-header {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0;
+  color: var(--brand-secondary-color, #06326B);
+  text-align: center;
+}
+.ob-brand-header .brand-name {
+  color: var(--brand-primary-color, #FF5100);
+}
+
+/* Banda de estado integrada visualmente con la tarjeta */
+.ob-loading-band {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 14px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+}
+
+/* Spinner */
+.spinner {
+  width: 28px; height: 28px;
+  border: 4px solid rgba(0,0,0,0.1);
+  border-top-color: var(--brand-primary-color, #FF5100);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+#loading-status p {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: #555;
+  margin: 0;
+}
+
+/* Iframe contenedor */
+#content-container { width: 100%; height: 100%; }
+#content-container iframe { width: 100%; height: 100%; border: none; }

iatoolkit/templates/base.html

@@ -10,6 +10,7 @@
     <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', _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) }}">
 </head>

iatoolkit/templates/chat.html

@@ -7,6 +7,9 @@
 <style>
     {{ branding.css_variables | safe }}
 </style>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/onboarding.css', _external=True) }}">
+<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">
 
 <!-- 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"
@@ -49,6 +52,11 @@
            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>
+        <a href="javascript:void(0);" id="onboarding-button"
+           class="ms-3 action-icon-style" title="Ver onboarding"
+           style="color: {{ branding.header_text_color }};">
+            <i class="bi bi-lightbulb"></i>
+        </a>
 
         <!-- Icono de cerrar sesión (al final) -->
         {% if user_is_local %}
@@ -174,20 +182,16 @@
     window.iatoolkit_base_url = "{{ iatoolkit_base_url }}";
     window.availablePrompts = {{ prompts.message | tojson }};
     window.sendButtonColor = "{{ branding.send_button_color }}";
-
-    {% if auth_method == 'jwt' and session_jwt %}
-        // Store session JWT if it exists, defined in the same global scope
-        window.sessionJWT = "{{ session_jwt }}";
-    {% endif %}
+    window.onboardingCards = {{ onboarding_cards | tojson }};
 </script>
 
 <!-- Carga de los scripts JS externos después de definir las variables globales -->
+<script src="{{ url_for('static', filename='js/chat_onboarding.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_history.js', _external=True) }}"></script>
 <script src="{{ url_for('static', filename='js/chat_feedback.js', _external=True) }}"></script>
 <script src="{{ url_for('static', filename='js/chat_main.js', _external=True) }}"></script>
 
-
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
@@ -274,5 +278,44 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
 });
+
+// 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',
+      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 %}

iatoolkit/templates/chat_modals.html

@@ -109,4 +109,37 @@
             </div>
         </div>
     </div>
+</div>
+
+<!-- Modal de Onboarding -->
+<div class="modal fade" id="onboardingModal" tabindex="-1" aria-labelledby="onboardingModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content" style="border-radius:12px;">
+      <div class="modal-header">
+        <h5 class="modal-title w-100 text-center" id="onboardingModalLabel" style="color: var(--brand-primary-color, #FF5100);">
+            Bienvenido a {{ branding.name }}
+        </h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
+      </div>
+
+      <div class="modal-body ob-root">
+        <div id="ob-card" class="ob-card">
+          <div id="ob-icon" class="ob-icon"><i class="bi bi-lightbulb"></i></div>
+          <h6 id="ob-title" class="ob-title"></h6>
+          <div id="ob-text" class="ob-text"></div>
+          <div class="ob-nav">
+            <button id="ob-prev" class="ob-btn" aria-label="Anterior"><i class="bi bi-chevron-left"></i></button>
+            <div id="ob-dots" class="ob-dots"></div>
+            <button id="ob-next" class="ob-btn" aria-label="Siguiente"><i class="bi bi-chevron-right"></i></button>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button id="ob-close" type="button" class="btn btn-branded-secondary" data-bs-dismiss="modal">
+            Cerrar
+        </button>
+        </div>
+    </div>
+  </div>
 </div>

iatoolkit/templates/onboarding_shell.html

@@ -1,167 +1,101 @@
-
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <title>Iniciando {{ branding.name | default('IAToolkit') }} IA...</title>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-
-    <!-- Inyecta las variables CSS de la marca -->
-    {% if branding and branding.css_variables %}
-    <style>
-        {{ branding.css_variables|safe }}
-    </style>
-    {% endif %}
-
-    <style>
-        /* --- Estilos Generales --- */
-        body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
-
-        #loader-wrapper {
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background-color: #f4f7f6;
-            z-index: 1000;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            padding: 20px;
-            box-sizing: border-box;
-            transition: opacity 0.5s ease-in-out;
-        }
-
-        /* --- Estilos de Branding --- */
-        #brand-header {
-            font-size: 2.5rem;
-            font-weight: 700;
-            margin: 0 0 30px 0; /* Aumentamos el margen inferior para dar espacio */
-            color: var(--brand-secondary-color, #06326B);
-        }
-        #brand-header .brand-name {
-            color: var(--brand-primary-color, #FF5100);
-        }
-
-
-        /* --- Estilos de la Tarjeta (Sin cambios) --- */
-        #card-container {
-            background-color: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-            padding: 30px; width: 90%; max-width: 450px; text-align: center; transition: opacity 0.3s ease-in-out;
-        }
-        #card-container .icon { font-size: 40px; color: var(--brand-primary-color, #FF5100); margin-bottom: 15px; }
-        #card-container h3 { font-size: 1.25rem; color: #333; margin-bottom: 10px; }
-        #card-container p { font-size: 0.95rem; color: #666; line-height: 1.5; min-height: 60px; }
-        .card-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
-        .card-nav button { background-color: var(--brand-secondary-color, #06326B); border: none; color: var(--brand-text-on-secondary, #FFFFFF); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; transition: opacity 0.2s; }
-        .card-nav button:hover { opacity: 0.85; }
-        #progress-dots { display: flex; gap: 8px; }
-        .dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; transition: background-color 0.3s; }
-        .dot.active { background-color: var(--brand-primary-color, #FF5100); }
-
-        /* --- ESTILOS MEJORADOS: SPINNER DE CARGA --- */
-        #loading-status { margin-top: 30px; display: flex; align-items: center; gap: 15px; }
-        .spinner {
-            width: 30px; height: 30px; border: 4px solid rgba(0, 0, 0, 0.1);
-            border-top-color: var(--brand-primary-color, #FF5100);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        #loading-status p { font-size: 1rem; font-weight: 500; color: #555; margin: 0; }
-        @keyframes spin { to { transform: rotate(360deg); } }
-
-        /* --- Iframe (Sin cambios) --- */
-        #content-container { width: 100%; height: 100%; }
-        iframe { width: 100%; height: 100%; border: none; }
-    </style>
-</head>
-<body>
-    <div id="loader-wrapper">
-
-        <h1 id="brand-header">
-            <span class="brand-name">{{ branding.name | default('IAToolkit') }}</span>  <span>IA</span>
-        </h1>
-
-        <div id="card-container">
-            <div id="card-icon" class="icon"><i class="fas fa-lightbulb"></i></div>
-            <h3 id="card-title">Título de la Tarjeta</h3>
-            <p id="card-text">Descripción de la tarjeta de capacitación.</p>
-            <div class="card-nav">
-                <button id="prev-card" aria-label="Anterior"><i class="fas fa-chevron-left"></i></button>
-                <div id="progress-dots"></div>
-                <button id="next-card" aria-label="Siguiente"><i class="fas fa-chevron-right"></i></button>
-            </div>
-        </div>
-
-        <!-- MEJORADO: Texto de estado ahora junto al spinner -->
-        <div id="loading-status">
-            <div class="spinner"></div>
-            <p>Inicializando el contexto de {{ branding.name }} para la IA...</p>
+{% extends "base.html" %}
+
+{% block title %}Iniciando {{ branding.name | default('IAToolkit') }} IA...{% endblock %}
+
+{% block styles %}
+<link rel="stylesheet" href="{{ url_for('static', filename='styles/llm_output.css', _external=True) }}?v=6">
+<link rel="stylesheet" href="{{ url_for('static', filename='css/onboarding.css', _external=True) }}?v=6">
+<style>
+  .onboarding-shell-root { position: relative; height: 100vh; }
+  .onboarding-shell-root #loader-wrapper { position: absolute; inset: 0; background: #f4f7f6; z-index: 1000; display:flex; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; transition: opacity .5s; }
+  .onboarding-shell-root .ob-stack { width:100%; max-width:520px; display:flex; flex-direction:column; gap:16px; }
+  .onboarding-shell-root .ob-loading-band { display:flex; align-items:center; justify-content:center; gap:12px; padding:12px 14px; background:#fff; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.08); }
+  .onboarding-shell-root .spinner { width:28px; height:28px; border:4px solid rgba(0,0,0,.1); border-top-color: var(--brand-primary-color, #FF5100); border-radius:50%; animation: spin 1s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .onboarding-shell-root #content-container { width:100%; height:100%; }
+  .onboarding-shell-root #content-container iframe { width:100%; height:100%; border:none; }
+
+  /* Forzar colores de marca (sube especificidad y evita overrides) */
+  .onboarding-shell-root .ob-brand-header { color: var(--brand-secondary-color, #06326B) !important; }
+  .onboarding-shell-root .ob-brand-header .brand-name { color: var(--brand-primary-color, #FF5100) !important; }
+  .onboarding-shell-root .ob-icon { color: var(--brand-primary-color, #FF5100) !important; }
+  .onboarding-shell-root .ob-btn { background-color: var(--brand-secondary-color, #06326B) !important; color: var(--brand-text-on-secondary, #FFFFFF) !important; border:none !important; }
+  .onboarding-shell-root .ob-dots > div.active { background-color: var(--brand-primary-color, #FF5100) !important; }
+</style>
+{% if branding and branding.css_variables %}
+<style>
+  {{ branding.css_variables|safe }}
+</style>
+{% endif %}
+{% endblock %}
+
+{% block content %}
+<div class="onboarding-shell-root ob-root">
+  <div id="loader-wrapper">
+    <div class="ob-stack">
+      <h1 id="ob-brand-header" class="ob-brand-header">
+        <span class="brand-name text-brand-primary">{{ branding.name | default('IAToolkit') }}</span>
+        <span class="brand-rest"> IA</span>
+      </h1>
+
+      <div id="card-container" class="ob-card">
+        <div id="card-icon" class="ob-icon"><i class="fas fa-lightbulb"></i></div>
+        <h3 id="card-title" class="ob-title">Título de la Tarjeta</h3>
+        <p id="card-text" class="ob-text">Descripción de la tarjeta de capacitación.</p>
+        <div class="ob-nav">
+          <button id="prev-card" class="ob-btn btn-branded-primary" aria-label="Anterior">
+            <i class="fas fa-chevron-left"></i>
+          </button>
+          <div id="progress-dots" class="ob-dots"></div>
+          <button id="next-card" class="ob-btn btn-branded-primary" aria-label="Siguiente">
+            <i class="fas fa-chevron-right"></i>
+          </button>
         </div>
+      </div>
 
+      <div id="loading-status" class="ob-loading-band">
+        <div class="spinner"></div>
+        <p>Inicializando el contexto de {{ branding.name }} para la IA...</p>
+      </div>
     </div>
-
-    <div id="content-container"></div>
-
-    <script>
-        $(function() {
-            const cardsData = {{ onboarding_cards | tojson }};
-
-            let currentCardIndex = 0, autoRotateInterval;
-            const $cardContainer = $('#card-container'), $cardIcon = $('#card-icon'), $cardTitle = $('#card-title'), $cardText = $('#card-text'), $progressDots = $('#progress-dots');
-            function displayCard(index) {
-                $cardContainer.css('opacity', 0);
-                setTimeout(() => {
-                    const card = cardsData[index];
-                    $cardIcon.html(`<i class="${card.icon}"></i>`);
-                    $cardTitle.text(card.title);
-                    $cardText.html(card.text);
-                    $progressDots.find('.dot').removeClass('active').eq(index).addClass('active');
-                    $cardContainer.css('opacity', 1);
-                }, 300);
-            }
-            function startAutoRotate() { autoRotateInterval = setInterval(() => $('#next-card').click(), 5000); }
-            cardsData.forEach(() => $progressDots.append('<div class="dot"></div>'));
-            displayCard(currentCardIndex);
-            startAutoRotate();
-            $('#next-card').on('click', function() {
-                currentCardIndex = (currentCardIndex + 1) % cardsData.length;
-                displayCard(currentCardIndex);
-                clearInterval(autoRotateInterval); startAutoRotate();
-            });
-            $('#prev-card').on('click', function() {
-                currentCardIndex = (currentCardIndex - 1 + cardsData.length) % cardsData.length;
-                displayCard(currentCardIndex);
-                clearInterval(autoRotateInterval); startAutoRotate();
-            });
-
-            const $loader = $('#loader-wrapper');
-        const $container = $('#content-container');
-
-        // URL para el iframe, pasada desde la vista InitiateExternalChatView
-        const iframeSrc = "{{ iframe_src_url }}";
-
-        // Creamos el elemento iframe
-        const iframe = document.createElement('iframe');
-        iframe.src = iframeSrc;
-
-        // Estilos para que ocupe toda la pantalla
-        iframe.style.width = '100%';
-        iframe.style.height = '100%';
-        iframe.style.border = 'none';
-        iframe.style.display = 'none'; // Empezamos oculto
-
-        // Evento que se dispara cuando el iframe ha terminado de cargar su contenido
-        iframe.onload = function() {
-            // Mostramos el iframe
-            iframe.style.display = 'block';
-            // Ocultamos la animación de carga con una transición suave
-            $loader.css('opacity', 0);
-            setTimeout(() => $loader.hide(), 500); // Lo eliminamos del DOM después de la transición
-        };
-
-        // Añadimos el iframe al contenedor en el DOM
-        $container.append(iframe);
+  </div>
+
+  <div id="content-container"></div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+
+<script src="{{ url_for('static', filename='js/chat_onboarding.js', _external=True) }}"></script>
+<script>
+  (function() {
+    const cardsData = {{ onboarding_cards | tojson }};
+    const iframeSrc = "{{ iframe_src_url }}";
+
+    if (!window.initOnboarding) {
+      console.error('initOnboarding no está disponible. Verifica la carga de chat_onboarding.js');
+      return;
+    }
+
+    const onboarding = initOnboarding({
+      mode: 'shell',
+      cards: cardsData,
+      ui: {
+        icon: '#card-icon',
+        title: '#card-title',
+        text: '#card-text',
+        dots: '#progress-dots',
+        prev: '#prev-card',
+        next: '#next-card',
+        loader: '#loader-wrapper',
+        container: '#content-container'
+      },
+      autoRotateMs: 5000,
+      shell: { iframeSrc: iframeSrc }
     });
-    </script>
-</body>
-</html>
+
+    onboarding.start();
+  })();
+</script>
+{% endblock %}

iatoolkit/views/base_login_view.py

@@ -36,15 +36,18 @@ class BaseLoginView(MethodView):
         """
         Centralized logic to decide between the fast path and the slow path.
         """
+        # --- Get the company branding ---
+        branding_data = self.branding_service.get_company_branding(company)
+
+        # this service decides is the context needs to be rebuilt or not
         prep_result = self.query_service.prepare_context(
             company_short_name=company_short_name, user_identifier=user_identifier
         )
-
-        branding_data = self.branding_service.get_company_branding(company)
-
         if prep_result.get('rebuild_needed'):
             # --- SLOW PATH: Render the loading shell ---
             onboarding_cards = self.onboarding_service.get_onboarding_cards(company)
+
+            # callback url to call when the context finish loading
             target_url = url_for('finalize_context_load', company_short_name=company_short_name, _external=True)
 
             return render_template(
@@ -56,8 +59,10 @@ class BaseLoginView(MethodView):
         else:
             # --- FAST PATH: Render the chat page directly ---
             prompts = self.prompt_service.get_user_prompts(company_short_name)
+            onboarding_cards = self.onboarding_service.get_onboarding_cards(company)
             return render_template(
                 "chat.html",
                 branding=branding_data,
                 prompts=prompts,
+                onboarding_cards=onboarding_cards
             )

iatoolkit/views/login_test_view.py

@@ -7,24 +7,39 @@ from flask.views import MethodView
 from flask import render_template, request
 from injector import inject
 from iatoolkit.services.profile_service import ProfileService
+from iatoolkit.services.branding_service import BrandingService
+from iatoolkit.services.onboarding_service import OnboardingService
 import os
 
 
 class LoginTest(MethodView):
     @inject
     def __init__(self,
-                 profile_service: ProfileService):
+                 profile_service: ProfileService,
+                 branding_service: BrandingService,
+                 onboarding_service: OnboardingService):
         self.profile_service = profile_service
+        self.branding_service = branding_service
+        self.onboarding_service = onboarding_service
 
     def get(self):
         alert_message = request.args.get('alert_message', None)
         companies = self.profile_service.get_companies()
+        branding_data = None
+        onboarding_cards = {}
+        if companies:
+            # Obtener el branding de la primera empresa para la página de prueba
+            first_company = companies[0]
+            branding_data = self.branding_service.get_company_branding(first_company)
+            onboarding_cards = self.onboarding_service.get_onboarding_cards(first_company)
 
         # Esta API_KEY para el login
         api_key_for_login = os.getenv("IATOOLKIT_API_KEY", "tu_api_key_por_defecto_o_error")
 
         return render_template('login_test.html',
                                companies=companies,
+                               branding=branding_data,
+                               onboarding_cards=onboarding_cards,
                                alert_message=alert_message,
                                alert_icon='success' if alert_message else None,
                                api_key=api_key_for_login

iatoolkit/views/login_view.py

@@ -10,6 +10,7 @@ from iatoolkit.services.profile_service import ProfileService
 from iatoolkit.services.query_service import QueryService
 from iatoolkit.services.prompt_manager_service import PromptService
 from iatoolkit.services.branding_service import BrandingService
+from iatoolkit.services.onboarding_service import OnboardingService
 from iatoolkit.views.base_login_view import BaseLoginView
 
 
@@ -67,12 +68,14 @@ class FinalizeContextView(MethodView):
                  profile_service: ProfileService,
                  query_service: QueryService,
                  prompt_service: PromptService,
-                 branding_service: BrandingService
+                 branding_service: BrandingService,
+                 onboarding_service: OnboardingService
                  ):
         self.profile_service = profile_service
         self.query_service = query_service
         self.prompt_service = prompt_service
         self.branding_service = branding_service
+        self.onboarding_service = onboarding_service
 
     def get(self, company_short_name: str):
         # 1. Use the centralized method to get session info.
@@ -97,11 +100,13 @@ class FinalizeContextView(MethodView):
             # 3. render the chat page.
             prompts = self.prompt_service.get_user_prompts(company_short_name)
             branding_data = self.branding_service.get_company_branding(company)
+            onboarding_cards = self.onboarding_service.get_onboarding_cards(company)
 
             return render_template(
                 "chat.html",
                 branding=branding_data,
                 prompts=prompts,
+                onboarding_cards=onboarding_cards
             )
 
         except Exception as e:

{iatoolkit-0.51.0.dist-info → iatoolkit-0.55.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: iatoolkit
-Version: 0.51.0
+Version: 0.55.0
 Summary: IAToolkit
 Author: Fernando Libedinsky
 License-Expression: MIT

{iatoolkit-0.51.0.dist-info → iatoolkit-0.55.0.dist-info}/RECORD

@@ -2,7 +2,7 @@ iatoolkit/__init__.py,sha256=4PWjMJjktixtrxF6BY405qyA50Sv967kEP2x-oil6qk,1120
 iatoolkit/base_company.py,sha256=uFJmy77LPAceVqkTeuJqo15-auDiq4aTwvC_bbBD0mQ,4607
 iatoolkit/cli_commands.py,sha256=G5L9xQXZ0lVFXQWBaE_KEZHyfuiT6PL1nTQRoSdnBzc,2302
 iatoolkit/company_registry.py,sha256=tduqt3oV8iDX_IB1eA7KIgvIxE4edTcy-3qZIXh3Lzw,2549
-iatoolkit/iatoolkit.py,sha256=iRxEAy8P4dgM67IRmQPVjyh63SlW6IEnRH5FONef6MM,17305
+iatoolkit/iatoolkit.py,sha256=jIIhvxu1CwCiz3dLm9B7I2SzH-4sT0QQeci_XD2_C68,17305
 iatoolkit/common/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 iatoolkit/common/exceptions.py,sha256=EXx40n5htp7UiOM6P1xfJ9U6NMcADqm62dlFaKz7ICU,1154
 iatoolkit/common/routes.py,sha256=Djf8Q_b5IGkdhQ5Az_AuYIVqam6-HFA2d4ByursdARI,6030
@@ -67,11 +67,13 @@ iatoolkit/static/js/chat_feedback.js,sha256=DDT2NPgglrLnW75vtEAVXS72MNt7vlMcavzr
 iatoolkit/static/js/chat_filepond.js,sha256=mzXafm7a506EpM37KATTK3zvAswO1E0KSUY1vKbwuRc,3163
 iatoolkit/static/js/chat_history.js,sha256=4hYNODIwYNd5vaQqkR28HZyXYIFKgSayrnmOuT_DUac,4381
 iatoolkit/static/js/chat_main.js,sha256=j3rbJjWWCEAM1XUXPv6K2SW4S3kBrPAwEzVtLTjHslI,17314
-iatoolkit/static/styles/chat_iatoolkit.css,sha256=WgzKKyFRuQU8SozX1sWSN7b66SxVoKIHDwpK6V-xL6g,11417
+iatoolkit/static/js/chat_onboarding.js,sha256=b6ofiFcPhuCaPmSFIvDQZqcMUVvbI7LpIsjZOZJUSAU,3185
+iatoolkit/static/styles/chat_iatoolkit.css,sha256=aA-PZ2TGl_k82JSVVBC2-CJT0NiZAuLOGoiaJhdeVUU,11416
 iatoolkit/static/styles/chat_info.css,sha256=17DbgoNYE21VYWfb5L9-QLCpD2R1idK4imKRLwXtJLY,1058
 iatoolkit/static/styles/chat_modal.css,sha256=mdfjrJtmUn3O9rKwIGjJc-oSNmJGnzUY1aAJqEfPh38,4301
 iatoolkit/static/styles/landing_page.css,sha256=5MHlXkmgZVv9uHE7rZTGYzZeynya3ONY4hp7e2uPXwk,4898
 iatoolkit/static/styles/llm_output.css,sha256=AlxgRSOleeCk2dLAqFWVaQ-jwZiJjcpC5rHuUv3T6VU,2312
+iatoolkit/static/styles/onboarding.css,sha256=Bo0hd8ngVy404_a-gtNFi-hzljhIAnpE-1oQJGnj0F0,3655
 iatoolkit/system_prompts/format_styles.prompt,sha256=MSMe1qvR3cF_0IbFshn8R0z6Wx6VCHQq1p37rpu5wwk,3576
 iatoolkit/system_prompts/query_main.prompt,sha256=D2Wjf0uunQIQsQiJVrY-BTQz6PemM5En6ftmw_c5t4E,2808
 iatoolkit/system_prompts/sql_rules.prompt,sha256=y4nURVnb9AyFwt-lrbMNBHHtZlhk6kC9grYoOhRnrJo,59174
@@ -79,20 +81,20 @@ iatoolkit/templates/_branding_styles.html,sha256=x0GJmY1WWpPxKBUoqmxh685_1c6-4uL
 iatoolkit/templates/_login_widget.html,sha256=p7Xz0P1Xd3Otn41uVQTA3GmDswMrUVMIn9doDNJojAA,1852
 iatoolkit/templates/_navbar.html,sha256=o1PvZE5ueLmVpGUAmsjtu-vS_WPROTlJc2sTXl6AS4Y,360
 iatoolkit/templates/about.html,sha256=ciC08grUVz5qLzdzDDqDX31xirg5PrJIRYabWpV9oA8,294
-iatoolkit/templates/base.html,sha256=Bd_dBk_wiAhX0DPQHJAdPtCBBq2xK1J1Z2b9p3Wn0e8,2214
+iatoolkit/templates/base.html,sha256=hHfBqZJsPcZGlb4BxAbHvpJFcSjckLIAVTYTmoyXrz0,2323
 iatoolkit/templates/change_password.html,sha256=G5a3hYLTpz_5Q_eZ4LNcYSqLeW-CuT4NCHD8bkhAd9k,3573
-iatoolkit/templates/chat.html,sha256=mT73hW42QtN2uGciGuwdQQhVi8iQgkQoUWK4cvWZ9Xw,12315
-iatoolkit/templates/chat_modals.html,sha256=ngKk0L8qnWteBDLAqCKv8-55LWNH3-HwVyk2of6ylWo,5510
+iatoolkit/templates/chat.html,sha256=spvypAVaVI1I22YRrYgQqzK1lXVPX5ywMp2MNixFTTY,13885
+iatoolkit/templates/chat_modals.html,sha256=o3BmQBCTVun4ukyy-9E0e7FuBlgyVQKbRXuDn86SVnw,6949
 iatoolkit/templates/error.html,sha256=c3dxieMygsvdjQMiQu_sn6kqqag9zFtVu-z5FunX6so,580
 iatoolkit/templates/forgot_password.html,sha256=NRZqbNHJXSLNArF_KLbzuem-U57v07awS0ikI_DJbfM,2360
 iatoolkit/templates/header.html,sha256=179agI7rnYwP_rvJNXIiVde5E8Ec5649_XKq6eew2Hk,1263
 iatoolkit/templates/index.html,sha256=jBLCqZoIMmUCA1KQESW9BcEgaxE0Rjs-4-i2V0ueSMo,7654
 iatoolkit/templates/login_test.html,sha256=HsLgRNowhrg-G7Cyv4MFEYc6m7dJ92OpnQP6ia6eKoM,5981
-iatoolkit/templates/onboarding_shell.html,sha256=at7VXh9vQmDiWu2mJbc6NkzEVlu8I8Xgn6_31JltrW0,7477
+iatoolkit/templates/onboarding_shell.html,sha256=WA2-Or91epS2IeWf7m5vcuLYAjtpI36NBCtypcIiXAQ,4546
 iatoolkit/templates/signup.html,sha256=9ArDvcNQgHFR2dwxy-37AXzGUOeOsT7Nz5u0y6fAB3U,4385
 iatoolkit/templates/test.html,sha256=rwNtxC83tbCl5COZFXYvmRBxxmgFJtPNuVBd_nq9KWY,133
 iatoolkit/views/__init__.py,sha256=5JqK9sZ6jBuK83zDQokUhxQ0wuJJJ9DXB8pYCLkX7X4,102
-iatoolkit/views/base_login_view.py,sha256=k6FNULBwyqjQ9zWKJvFXS88dPydETazcSa_OR1hbKfY,2501
+iatoolkit/views/base_login_view.py,sha256=6IWJXEg_6K9cPYoKnG_-Kpt_hIdYnv5ZNC5anIrytXk,2819
 iatoolkit/views/change_password_view.py,sha256=tM0woZyKdhY4XYjS_YXg2sKq3RYkXGfcq_eVAKrNvNM,4498
 iatoolkit/views/chat_token_request_view.py,sha256=wf32_A2Sq8NHYWshCwL10Tovd1znLoD0jQjzutR3sVE,4408
 iatoolkit/views/external_login_view.py,sha256=qY5wxh98HyKI0Q1Phf6pkOzRGD7PvbH27GUZn0ccYu4,2889
@@ -103,15 +105,15 @@ iatoolkit/views/index_view.py,sha256=P5aVdEWxsYOZGbzcXd6WFE733qZ7YXIoeqriUMAM6V8
 iatoolkit/views/init_context_api_view.py,sha256=1j8NKfODfPrffbA5YO8TPMHh-ildlLNzReIxv_qO-W4,2586
 iatoolkit/views/llmquery_api_view.py,sha256=Rh-y-VENwwtNsDrYAD_SWKwjK16fW-pFRWlEvI-OYwY,2120
 iatoolkit/views/llmquery_web_view.py,sha256=WhjlA1mfsoL8hL9tlKQfjCUcaTzT43odlp_uQKmT314,1500
-iatoolkit/views/login_test_view.py,sha256=E50Lyhf6EsUilQl9W4SLKIWW39h_Gcyf8Y2rwAJqA-Y,1049
-iatoolkit/views/login_view.py,sha256=TlLiNBaFvmk1bsGXutLkTqchvSjF1uC-Z1f6NDLYPjg,4323
+iatoolkit/views/login_test_view.py,sha256=7bqj9XWYCNGZulwPCgBMlk3O1DEIje_A_Hqesa58CVU,1893
+iatoolkit/views/login_view.py,sha256=eAsmiCWS2KSOq3czaxVGm3W9__yaXKxqB9SeuGsdnmI,4635
 iatoolkit/views/prompt_api_view.py,sha256=MP0r-MiswwKcbNc_5KY7aVbHkrR218I8XCiCX1D0yTA,1244
 iatoolkit/views/signup_view.py,sha256=BCjhM2lMiDPwYrlW_eEwPl-ZLupblbFfsonWtq0E4vU,3922
 iatoolkit/views/tasks_review_view.py,sha256=keLsLCyOTTlcoIapnB_lbuSvLwrPVZVpBiFC_7ChbLg,3388
 iatoolkit/views/tasks_view.py,sha256=a3anTXrJTTvbQuc6PSpOzidLKQFL4hWa7PI2Cppcz8w,4110
 iatoolkit/views/user_feedback_api_view.py,sha256=59XB9uQLHI4Q6QA4_XhK787HzfXb-c6EY7k1Ccyr4hI,2424
 iatoolkit/views/verify_user_view.py,sha256=7XLSaxvs8LjBr3cYOUDa9B8DqW_50IGlq0IvmOQcD0Y,2340
-iatoolkit-0.51.0.dist-info/METADATA,sha256=Hk7h63aIMgP0_P1ngiNJYhL4_VWtI-v8wSDEWFYyIBQ,9301
-iatoolkit-0.51.0.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
-iatoolkit-0.51.0.dist-info/top_level.txt,sha256=V_w4QvDx0b1RXiy8zTCrD1Bp7AZkFe3_O0-9fMiwogg,10
-iatoolkit-0.51.0.dist-info/RECORD,,
+iatoolkit-0.55.0.dist-info/METADATA,sha256=thMCV6aAt67vKtHbdiK1zTVTTdW1Q-YC-SWgaSz3ywI,9301
+iatoolkit-0.55.0.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
+iatoolkit-0.55.0.dist-info/top_level.txt,sha256=V_w4QvDx0b1RXiy8zTCrD1Bp7AZkFe3_O0-9fMiwogg,10
+iatoolkit-0.55.0.dist-info/RECORD,,