iatoolkit 0.51.0__tar.gz → 0.55.1__tar.gz

{iatoolkit-0.51.0 → iatoolkit-0.55.1}/PKG-INFO

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

{iatoolkit-0.51.0 → iatoolkit-0.55.1}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "iatoolkit"
-version = "0.51.0"
+version = "0.55.1"
 requires-python = ">=3.12"
 description = "IAToolkit"
 readme = "readme.md"

{iatoolkit-0.51.0 → iatoolkit-0.55.1}/src/iatoolkit/common/routes.py

@@ -25,7 +25,7 @@ def register_views(injector, app):
     from iatoolkit.views.llmquery_api_view import LLMQueryApiView
     from iatoolkit.views.tasks_view import TaskView
     from iatoolkit.views.tasks_review_view import TaskReviewView
-    from iatoolkit.views.login_test_view import LoginTest
+    from iatoolkit.views.login_simulation_view import LoginSimulationView
     from iatoolkit.views.login_view import LoginView, FinalizeContextView
     from iatoolkit.views.external_login_view import ExternalLoginView
     from iatoolkit.views.signup_view import SignupView
@@ -112,7 +112,8 @@ def register_views(injector, app):
             abort(404)
 
     # login testing (old home page)
-    app.add_url_rule('/login_test', view_func=LoginTest.as_view('login_test'))
+    app.add_url_rule('/login_test/<company_short_name>/<external_user_id>',
+                     view_func=LoginSimulationView.as_view('login_test'))
 
     app.add_url_rule(
         '/about',  # URL de la ruta

{iatoolkit-0.51.0 → iatoolkit-0.55.1}/src/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.1"
 
 # global variable for the unique instance of IAToolkit
 _iatoolkit_instance: Optional['IAToolkit'] = None

iatoolkit-0.55.1/src/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-0.51.0 → iatoolkit-0.55.1}/src/iatoolkit/static/styles/chat_iatoolkit.css

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

iatoolkit-0.55.1/src/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-0.51.0 → iatoolkit-0.55.1}/src/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-0.51.0 → iatoolkit-0.55.1}/src/iatoolkit/templates/chat.html

@@ -4,9 +4,15 @@
 
 {% block content %}
 
-<style>
-    {{ branding.css_variables | safe }}
-</style>
+{% 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="{{ url_for('static', filename='styles/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">
+{% 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"
@@ -49,14 +55,17 @@
            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 %}
-            <a href="{{ url_for('logout', company_short_name=company_short_name, _external=True) }}"
-                 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 %}
+        <a href="{{ url_for('logout', company_short_name=company_short_name, _external=True) }}"
+           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>
     </div>
 
 </div>
@@ -174,20 +183,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 +279,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-0.51.0 → iatoolkit-0.55.1}/src/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-primary" data-bs-dismiss="modal">
+            Cerrar
+        </button>
+        </div>
+    </div>
+  </div>
 </div>

iatoolkit-0.55.1/src/iatoolkit/templates/login_test.html

@@ -0,0 +1,118 @@
+{% extends "base.html" %}
+
+{% block title %}Prueba de Login para {{ branding.name }}{% endblock %}
+
+{% block styles %}
+{# Este bloque asegura que los colores de la marca estén disponibles como variables CSS #}
+{% if branding and branding.css_variables %}
+<style>
+  {{ branding.css_variables|safe }}
+  /* Usa la variable de CSS para el color primario del botón */
+  #initiateJwtChatButton {
+    background-color: var(--brand-primary-color, #0d6efd);
+    border-color: var(--brand-primary-color, #0d6efd);
+  }
+</style>
+{% endif %}
+{% endblock %}
+
+{% block content %}
+<div class="container-fluid">
+  <div class="row flex-fill mt-5 justify-content-center">
+    <!-- login desde sistema externo -->
+    <div class="col-12 col-lg-6">
+      <div class="border rounded p-4 p-md-5 shadow-sm bg-light">
+        {# El título ahora muestra dinámicamente el nombre de la empresa #}
+        <h3 class="text-muted fw-semibold text-start mb-3">
+          Login Externo para <span style="color: var(--brand-primary-color, #0d6efd);">{{ branding.name }}</span>
+        </h3>
+        <div class="text-center mb-4">
+          <p class="text-muted widget-intro-text">
+            Este formulario permite testear el acceso a IAToolkit desde un portal externo utilizando una api-key. El external user ID es el nombre del usuario ya autentificado en algún portal interno de la empresa.
+          </p>
+        </div>
+
+        {# El 'action' y 'method' son manejados por JS, pero el id es crucial #}
+        <form id="jwt-form">
+
+          <div class="mb-3">
+            <label for="external_user_id" class="form-label d-block">External user ID</label>
+            <input type="text" id="external_user_id" name="external_user_id" class="form-control" required>
+          </div>
+
+          <button type="submit" id="initiateJwtChatButton" class="btn btn-primary">
+            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
+            Iniciar Sesión
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const companyShortName = "{{ company_short_name }}";
+    const apiKey = "{{ api_key }}";
+    const loginForm = document.getElementById('jwt-form');
+    const userIdInput = document.getElementById('external_user_id');
+    const submitButton = document.getElementById('initiateJwtChatButton');
+    const spinner = submitButton.querySelector('.spinner-border');
+
+    loginForm.addEventListener('submit', function(event) {
+      event.preventDefault();
+      const userIdentifier = userIdInput.value.trim();
+      if (!userIdentifier) return;
+
+      // Deshabilitar botón y mostrar spinner
+      submitButton.disabled = true;
+      spinner.classList.remove('d-none');
+
+      const newWindow = window.open('', '_blank');
+      const apiUrl = `/${companyShortName}/external_login`;
+
+      fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+                  'Content-Type': 'application/json',
+                  'Authorization': `Bearer ${apiKey}`
+              },
+        body: JSON.stringify({ external_user_id: userIdentifier })
+      })
+      .then(response => response.ok ? response.text() : response.text().then(text => { throw new Error(text) }))
+      .then(html => {
+          newWindow.document.documentElement.innerHTML = html;
+                  // Buscamos todos los scripts en el HTML inyectado y los re-ejecutamos.
+        const scripts = newWindow.document.querySelectorAll('script');
+        scripts.forEach(oldScript => {
+          const newScript = newWindow.document.createElement('script');
+
+          // Copiamos los atributos (como 'src' para archivos externos)
+          Array.from(oldScript.attributes).forEach(attr => {
+            newScript.setAttribute(attr.name, attr.value);
+          });
+
+          // Copiamos el contenido para scripts inline
+          newScript.appendChild(newWindow.document.createTextNode(oldScript.innerHTML));
+
+          // Reemplazamos el script viejo por el nuevo para que se ejecute.
+          oldScript.parentNode.replaceChild(newScript, oldScript);
+        });
+
+      })
+      .catch(error => {
+        console.error("Falló la prueba de login externo:", error);
+        const errorMessage = error.message || "Error desconocido.";
+        newWindow.document.body.innerHTML = `<div style="padding: 20px; font-family: monospace;"><h2>Error</h2><pre>${errorMessage}</pre></div>`;
+      })
+      .finally(() => {
+        // Volver a habilitar el botón y ocultar el spinner
+        submitButton.disabled = false;
+        spinner.classList.add('d-none');
+      });
+    });
+  });
+</script>
+{% endblock %}