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

iatoolkit/templates/chat_modals.html

@@ -1,37 +1,69 @@
-<!-- Modal para mostrar archivos cargados -->
-<div class="modal fade" id="uploadedFilesModal" tabindex="-1" aria-labelledby="uploadedFilesModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header branded">
-        <h5 class="modal-title" id="uploadedFilesModalLabel">Archivos Cargados</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <ul id="uploaded-files-list" class="list-group">
-          <!-- Los nombres de los archivos se agregarán aquí por JS -->
-        </ul>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-branded-secondary" data-bs-dismiss="modal">Cerrar</button>
-      </div>
+
+
+<!-- Modal para historial -->
+<div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
+        <div class="modal-content">
+            <div class="modal-header branded">
+                <h5 class="modal-title" id="historyModalLabel">
+                    <i class="bi bi-clock-history me-3"></i>
+                    {{ t('ui.modals.history_title') }}
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div id="history-loading" style="display: none;" class="text-center p-4">
+                    <div class="spinner-border text-primary" role="status">
+                        <span class="visually-hidden">Cargando...</span>
+                    </div>
+                    <p class="mt-2">{{ t('ui.modals.loading_history') }}</p>
+                </div>
+
+                <div id="history-content" style="display: none;">
+                    <div class="table-responsive">
+                        <table class="table table-striped table-hover">
+                            <thead class="thead-branded">
+                                <tr>
+                                    <th scope="col">{{ t('ui.modals.history_table_date') }}</th>
+                                    <th scope="col">{{ t('ui.modals.history_table_query') }}</th>
+                                    <th scope="col" class="col-icon"></th>
+                                </tr>
+                            </thead>
+                            <tbody id="history-table-body">
+                                <!-- Los datos se cargarán aquí -->
+                            </tbody>
+                        </table>
+                    </div>
+                    <div id="no-history-message" style="display: none;">
+                        {{ t('js_messages.no_history_found') }}
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-branded-secondary" data-bs-dismiss="modal">
+                    <i class="bi bi-x-circle me-1"></i>
+                    {{ t('ui.buttons.cancel') }}
+                </button>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 
+
 <!-- Modal para feedback -->
 <div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header branded">
                 <h5 class="modal-title" id="feedbackModalLabel">
-                    <i class="bi bi-chat-dots me-3"></i>Tu Opinión es Importante
+                    <i class="bi bi-chat-dots me-3"></i>
+                    {{ t('ui.modals.feedback_title') }}
                 </h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <p class="text-center mb-2"><strong>¿Qué tan útil fue la respuesta del asistente?</strong></p>
+                <p class="text-center mb-2"><strong>{{ t('ui.modals.feedback_prompt') }}</strong></p>
 
-                <!-- ▼▼▼ ESTE ES EL BLOQUE DE HTML QUE FALTABA ▼▼▼ -->
                 <div class="rating-stars mb-4">
                     <span class="star" data-rating="1" onclick="gfg(1)"></span>
                     <span class="star" data-rating="2" onclick="gfg(2)"></span>
@@ -39,77 +71,115 @@
                     <span class="star" data-rating="4" onclick="gfg(4)"></span>
                     <span class="star" data-rating="5" onclick="gfg(5)"></span>
                 </div>
-                <!-- ▲▲▲ FIN DEL BLOQUE DE HTML QUE FALTABA ▲▲▲ -->
 
                 <div class="form-group">
-                    <label for="feedback-text" class="form-label text-muted">Tu comentario nos ayuda a mejorar:</label>
+                    <label for="feedback-text" class="form-label text-muted">
+                        {{ t('ui.modals.feedback_comment_label') }}</label>
                     <textarea
                     class="form-control feedback-text"
                     id="feedback-text"
                     rows="4"
-                    placeholder="Escribe aquí tu opinión, sugerencias o comentarios..."
+                    placeholder="{{ t('ui.modals.feedback_comment_placeholder') }}"
                     style="resize: vertical; min-height: 100px;"></textarea>
                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-branded-secondary" data-bs-dismiss="modal">
-                    <i class="bi bi-x-circle me-1"></i>Cancelar
+                    <i class="bi bi-x-circle me-1"></i>
+                    {{ t('ui.buttons.cancel') }}
                 </button>
                 <button type="button" class="btn btn-branded-primary" id="submit-feedback">
-                    <i class="bi bi-send me-1"></i>Enviar
+                    <i class="bi bi-send me-1"></i>
+                    {{ t('ui.buttons.send') }}
                 </button>
             </div>
         </div>
     </div>
 </div>
 
-<!-- Modal para historial -->
-<div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg modal-dialog-centered">
+
+<!-- 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);">
+            {{ 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 id="ob-example" class="ob-example"></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">
+            {{ t('ui.buttons.cancel') }}
+        </button>
+        </div>
+    </div>
+  </div>
+</div>
+
+    <!-- Modal de Guía de Uso / Ayuda -->
+    <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-lg modal-dialog-scrollable">
         <div class="modal-content">
-            <div class="modal-header branded">
-                <h5 class="modal-title" id="historyModalLabel">
-                    <i class="bi bi-clock-history me-3"></i>Historial de Consultas
-                </h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div id="history-loading" style="display: none;" class="text-center p-4">
-                    <div class="spinner-border text-primary" role="status">
-                        <span class="visually-hidden">Cargando...</span>
-                    </div>
-                    <p class="mt-2">Cargando historial...</p>
-                </div>
-                <div id="history-error" style="display: none;" class="alert alert-danger">
-                    <!-- Los errores se mostrarán aquí -->
-                </div>
-                <div id="history-content" style="display: none;">
-                    <!-- Texto explicativo -->
-                    <div class="alert alert-branded-info mb-3" role="alert">
-                        <i class="bi bi-info-circle me-2"></i>
-                        <strong>Tip:</strong> Haz clic en cualquier pregunta del historial para copiarla automáticamente al área de texto.
-                    </div>
-                    <div class="table-responsive">
-                        <table class="table table-striped table-hover">
-                            <thead class="thead-branded">
-                                <tr>
-                                    <th scope="col">#</th>
-                                    <th scope="col">Fecha</th>
-                                    <th scope="col">Consulta</th>
-                                </tr>
-                            </thead>
-                            <tbody id="history-table-body">
-                                <!-- Los datos se cargarán aquí -->
-                            </tbody>
-                        </table>
-                    </div>
+          <div class="modal-header branded">
+            <h5 class="modal-title" id="helpModalLabel">
+                <i class="bi bi-info-circle me-2"></i>
+                {{ t('ui.modals.help_title') }}
+            </h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <!-- El acordeón con el contenido de ayuda se inyectará aquí dinámicamente -->
+            <div id="help-spinner" class="text-center p-5" style="display: none;">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Cargando...</span>
                 </div>
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-branded-secondary" data-bs-dismiss="modal">
-                    <i class="bi bi-x-circle me-1"></i>Cerrar
-                </button>
+            <div class="accordion" id="help-accordion-container">
+                <!-- Contenido generado por JS -->
             </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-branded-secondary"
+                    data-bs-dismiss="modal">
+                {{ t('ui.buttons.cancel') }}
+            </button>
+          </div>
         </div>
+      </div>
     </div>
+
+<!-- Modal para mostrar archivos cargados -->
+<div class="modal fade" id="uploadedFilesModal" tabindex="-1" aria-labelledby="uploadedFilesModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header branded">
+        <h5 class="modal-title" id="uploadedFilesModalLabel">Archivos Cargados</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <ul id="uploaded-files-list" class="list-group">
+          <!-- Los nombres de los archivos se agregarán aquí por JS -->
+        </ul>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-branded-secondary" data-bs-dismiss="modal">Cerrar</button>
+      </div>
+    </div>
+  </div>
 </div>

iatoolkit/templates/error.html

@@ -1,15 +1,51 @@
 {% extends "base.html" %}
 
-{% block title %}Error - IAToolkit{% endblock %}
+{% block title %}Error{% endblock %}
+
+{% block styles %}
+{# Carga las variables de CSS personalizadas de la empresa #}
+{% if branding %}
+    <style>
+        {{ branding.css_variables | safe }}
+    </style>
+{% endif %}
+    {# Enlace a los iconos de Bootstrap para el icono de error #}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+{% endblock %}
 
 {% block content %}
-<div class="container vh-100 d-flex justify-content-center align-items-center">
-    <div class="text-center col-11 col-md-8 col-lg-6 border rounded p-4 shadow-sm bg-light">
-        <h1 class="text-danger fw-bold">¡Ups! Ha ocurrido un error</h1>
-        <p class="mt-3 text-muted">
-            {{ message }}
-        </p>
-        <a href="{{ url_for('home') }}" class="btn btn-primary mt-4">Volver al Inicio</a>
+<div class="container mt-4">
+
+{% include '_company_header.html' %}
+
+{# Contenedor principal para el mensaje de error #}
+<div class="container mt-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-6">
+
+            {# Usamos una tarjeta para enmarcar el contenido del error #}
+            <div class="card shadow-sm text-center border-danger">
+                <div class="card-body p-4 p-md-5">
+
+                    {# Icono de error grande y visible #}
+                    <i class="bi bi-exclamation-triangle-fill text-danger" style="font-size: 4rem;"></i>
+
+                    <h4 class="card-title mt-4">Ha Ocurrido un Error</h4>
+                    <h5 class="card-title mt-4">Empresa: {{ company_short_name }} </h5>
+
+                    {# El mensaje de error dinámico que se pasa desde la vista #}
+                    <p class="text-muted mt-3 mb-4">
+                        {{ message | default('Lo sentimos, algo salió mal. Por favor, inténtalo de nuevo más tarde.') }}
+                    </p>
+
+                    <a href="javascript:history.back()"
+                        class="btn btn-branded-primary px-4">
+                            Volver
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
+</div>
 {% endblock %}

iatoolkit/templates/forgot_password.html

@@ -1,33 +1,50 @@
 {% extends "base.html" %}
 
-{% block title %}Recuperar Contraseña{% endblock %}
+{% block title %}{{ t('ui.forgot_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 d-flex justify-content-center align-items-center vh-100">
-    <div class="col-11 col-md-6 col-lg-4 border rounded p-3 shadow-sm">
-        <h4 class="text-muted fw-semibold text-start mb-3">Recuperar Contraseña</h4>
-
-        <form action="{{ url_for('forgot_password', company_short_name=company_short_name) }}" method="post">
-            <div class="mb-3">
-                <label for="email" class="form-label text-muted">Correo Electrónico</label>
-                <input type="email" id="email" name="email"
-                       class="form-control text-muted"
-                       required value="{{ form_data.email if form_data else '' }}"
-                       style="text-align: justify;">
-            </div>
+<div class="container mt-4">
+
+{% include '_company_header.html' %}
 
-            <button type="submit" class="btn btn-primary w-100">Enviar Contraseña</button>
+    <!-- 3. 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.forgot_password.title') }}</h4>
 
-            <!-- Mensaje descriptivo -->
-            <p class="text-muted text-start mt-3" style="text-align: justify;">
-                Recibirás un correo con una nueva contraseña temporal junto con un código de seguridad.
-                Usa este código para cambiar tu contraseña de forma segura y mantener tu cuenta protegida.
-            </p>
+                        <p class="text-muted text-center mb-4">
+                            {{ t('ui.forgot_password.subtitle') }}
+                        </p>
 
-            <div class="text-center mt-3">
-                <a href="{{ url_for('login', company_short_name=company_short_name) }}" class="text-muted text-decoration-none fw-semibold">Volver al Login</a>
+                        <form action="{{ url_for('forgot_password', company_short_name=company_short_name) }}" method="post">
+                            <div class="mb-3">
+                                <label for="email" class="form-label text-secondary">{{ t('ui.signup.email_label') }}</label>
+                                <input type="email" id="email" name="email"
+                                       class="form-control"
+                                       required value="{{ form_data.email if form_data else '' }}">
+                            </div>
+
+                            <button type="submit" class="btn btn-branded-primary w-100 fw-bold py-2 mt-3">{{ t('ui.forgot_password.submit_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.forgot_password.back_to_login') }}
+                            </a>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </form>
-    </div>
+        </div>
+    </section>
 </div>
+
 {% endblock %}

iatoolkit/templates/index.html

@@ -0,0 +1,145 @@
+{% extends "base.html" %}
+
+{% block title %}IAToolkit - Framework de IA{% endblock %}
+
+{% block styles %}
+    {# Enlazamos la hoja de estilos del website y los iconos de Bootstrap #}
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/landing_page.css') }}">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+{% endblock %}
+
+
+{% block content %}
+<div class="container mt-4">
+
+    <!-- 1. Encabezado con una clase 100% propia y única -->
+    <header class="website-header container">
+        <span class="website-brand">IAToolkit</span>
+    </header>
+
+    <!-- 2. Sección Principal (Hero) -->
+    <section class="hero-section">
+        <div class="container">
+            <div class="row align-items-center g-5 py-5">
+                <div class="col-lg-7">
+                    <h1 class="hero-title gradient-text">Framework de IA Open Source</h1>
+                    <ul class="hero-bullets mt-4">
+                      <li><i class="bi bi-hdd-stack"></i>Integra tus bases de datos SQL y documentos para dar contexto real a tus asistentes.</li>
+                    <li><i class="bi bi-code-slash"></i>Crea un repositorio de prompts validados por tu equipo para estandarizar y acelerar las tareas de IA.</li>
+                    <li><i class="bi bi-shield-lock"></i> Monta la plataforma en tu propia infraestructura con control total sobre el LLM, garantizando la privacidad de los datos.</li>                    </ul>
+                </div>
+                <div class="col-lg-5">
+                    <div class="border rounded-3 p-4 p-md-5 shadow-sm bg-light">
+                        <h3 class="fw-bold text-center mb-3">Prueba la Plataforma</h3>
+                        <p class="text-muted mb-4">
+                            Descubre nuestra demo interactiva, configurada con datos de una empresa de muestra. Explora  las funcionalidades de la plataforma en un entorno práctico.<br>
+                        </p>
+                        <div class="d-grid">
+                            {# Este botón usa la clase .btn-primary, que es estilizada por .hero-section .btn-primary en el CSS #}
+                            <a href="{{ url_for('home', company_short_name='sample_company') }}"
+                               target="_blank"
+                                rel="noopener noreferrer"
+                               class="btn btn-primary btn-lg fw-bold">
+                                Acceder
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 3. Sección de Características -->
+    <section class="features-section">
+        <div class="container">
+            <div class="row g-4">
+                <div class="col-lg-4 d-flex align-items-stretch">
+                    <div class="opensource-box">
+                        <div>
+                            <div class="opensource-icon"><i class="bi bi-github"></i></div>
+                            <h3>100% Open Source</h3>
+                            <p>Construido en Python, IAToolkit te da control total. Audita el código, adáptalo y contribuye a una comunidad en crecimiento.</p>
+                        </div>
+                        <a href="https://github.com/flibedinsky/iatoolkit" target="_blank" class="btn btn-light mt-auto">
+                            <i class="bi bi-github me-2"></i>Ir a GitHub
+                            {% if iatoolkit_version %}
+                                <span class="badge bg-dark ms-2">{{ iatoolkit_version }}</span>
+                            {% endif %}
+                        </a>
+                    </div>
+                </div>
+                <div class="col-lg-4 d-flex align-items-stretch">
+                    <div class="feature-item">
+                        <div class="feature-icon"><i class="bi bi-hdd-stack"></i></div>
+                        <h3>Conecta tus Datos</h3>
+                        <p>Integra tus bases de datos SQL, documentos (PDFs, TXT) y otros sistemas para que el asistente tenga un contexto real de tu negocio.</p>
+                    </div>
+                </div>
+                <div class="col-lg-4 d-flex align-items-stretch">
+                    <div class="feature-item">
+                        <div class="feature-icon"><i class="bi bi-gem"></i></div>
+                        <h3>Multi-LLM</h3>
+                        <p>No te ates a un solo proveedor. IAToolkit está diseñado para funcionar con diferentes modelos, incluyendo Gemini y OpenAI (GPT).</p>
+                    </div>
+                </div>
+            </div>
+            <div class="row g-4 mt-4">
+                <div class="col-lg-4 d-flex align-items-stretch">
+                    <div class="feature-item">
+                        <div class="feature-icon"><i class="bi bi-magic"></i></div>
+                        <h3>Prompt Manager</h3>
+                        <p>Crea, gestiona y comparte una librería de prompts personalizados para tu empresa, optimizando las tareas repetitivas.</p>
+                    </div>
+                </div>
+                <div class="col-lg-4 d-flex align-items-stretch">
+                    <div class="feature-item">
+                        <div class="feature-icon"><i class="bi bi-palette"></i></div>
+                        <h3>100% Personalizable</h3>
+                        <p>Adapta cada aspecto, desde la apariencia visual hasta las capacidades y herramientas del asistente, para que se alinee con la identidad de tu marca.</p>
+                    </div>
+                </div>
+                <div class="col-lg-4 d-flex align-items-stretch">
+                    <div class="feature-item">
+                        <div class="feature-icon"><i class="bi bi-shield-lock"></i></div>
+                        <h3>Privacidad Primero</h3>
+                        <p>Despliega IAToolkit en tus propios servidores. Tus datos y consultas nunca son compartidos con terceros, garantizando la máxima confidencialidad.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 3.5 Sobre el Autor -->
+    <section class="author-section py-5">
+        <div class="container">
+            <div class="author-card p-4">
+                <div class="row align-items-center g-4">
+                    <div class="col-md-2 text-center">
+                        <img src="{{ url_for('static', filename='images/fernando.jpeg') }}" alt="Foto de Fernando Libedinsky" class="img-fluid rounded-circle" style="max-width: 120px;">
+                    </div>
+                    <div class="col-md-10">
+                        <div class="d-flex flex-wrap align-items-center mb-2">
+                            <h5 class="mb-0 me-3">Sobre el autor</h5>
+                            <a href="https://www.linkedin.com/in/fernandolibedinsky" target="_blank" rel="noopener" class="author-linkedin ms-auto">
+                                <i class="bi bi-linkedin me-1"></i> LinkedIn
+                            </a>
+                        </div>
+                        <p class="author-bio mb-0">
+                            Soy <strong>Fernando Libedinsky</strong>, ingeniero de software y creador de <strong>IAToolkit</strong>.
+                            <br>Tras una extensa trayectoria en el desarrollo de software, sigo movido por la misma curiosidad que me llevó a programar por primera vez: aprender, explorar y construir cosas nuevas.
+                            <br>IAToolkit es la continuación de ese impulso, una plataforma creada para conectar rapidamente empresas con la IA.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 4. Footer -->
+    <footer class="landing-footer">
+        <div class="container">
+            &copy; 2024 IAToolkit - Proyecto Open Source
+        </div>
+    </footer>
+</div>
+{% endblock %}

iatoolkit/templates/login_simulation.html

@@ -0,0 +1,45 @@
+{% extends "base.html" %}
+
+{% block title %}Login Test - {{ 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 mt-4">
+
+{% include '_company_header.html' %}
+
+<div class="container-fluid">
+  <div class="row flex-fill mt-5 justify-content-center">
+    <div class="col-12 col-lg-6">
+      <div class="branded-form-container">
+        <h4 class="branded-form-title">
+          Login Externo para {{ company_short_name }}
+        </h4>
+        <div class="text-center mb-4">
+          <p class="text-muted widget-intro-text">
+            Este formulario simula el inicio de una sesión externa. Al enviar, serás redirigido a la URL de login final.
+          </p>
+        </div>
+
+        <!-- Formulario HTML estándar que hace un POST a la misma URL -->
+        <form method="POST" action="">
+          <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" class="btn btn-branded-primary">
+            Redirigir a External Login
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+{% endblock %}
+