FRONTEND:
- Implementado visor de imágenes (lightbox) dentro del modal de chat
- Click en imagen abre pantalla completa en lugar de nueva pestaña
- Fondo negro translúcido (95%) con z-index 200
- Botón de cerrar (×) en esquina superior derecha
- Click en imagen/fondo cierra el lightbox
- Etiqueta flotante con nombre de archivo
- Cursor zoom-in en miniaturas para indicar ampliación
- Responsive: max 95vw/95vh con scroll automático
- Frontend v1.2.4
BACKEND:
- Sin cambios (v1.1.1)
📸 Frontend actualizado a v1.2.3
He implementado un sistema completo de previsualización de imágenes en el chat assistant:
🎨 Características Implementadas:
1. Preview Antes de Enviar (Zona de Input)
Miniaturas 20x20px con superposición de nombre
Botón de eliminar en esquina superior derecha (rojo con X)
Fondo oscuro translúcido para nombre del archivo
Hover effects para mejor UX
// Vista previa antes de enviar:
┌─────────────────────────────┐
│ [IMG] [IMG] 📄 file.pdf │ ← Miniaturas clickeables
│ ✕ ✕ ✕ │
└─────────────────────────────┘
2. Imágenes en Mensajes del Chat
Renderizado completo de imágenes en mensajes del usuario
Máximo 256px de altura (responsive)
Click para abrir en nueva pestaña (full size)
Metadata bajo la imagen (nombre + tamaño)
Esquina redondeada para mejor diseño
Transición hover (opacity 90%)
// Mensaje del usuario con imagen:
┌────────────────────────────┐
│ [Texto del mensaje] │
│ │
│ ┌────────────────────────┐ │
│ │ │ │
│ │ [IMAGEN PREVIEW] │ │ ← Click para ampliar
│ │ │ │
│ └────────────────────────┘ │
│ 🖼️ photo.jpg (128.5 KB) │
│ │
│ 10:45 │
└────────────────────────────┘
3. Gestión de Memoria
URLs temporales con URL.createObjectURL()
Limpieza automática al eliminar archivo
useEffect cleanup al desmontar modal
No memory leaks garantizados
Frontend: v1.2.0 → v1.2.1
package.json
Sidebar.jsx
service-worker.js (PWA)
Backend: v1.0.96 → v1.0.97
main.py
Cambios incluidos en v1.2.1 / v1.0.97:
✅ Paginación de inspecciones (ya estaba implementada con 10 items)
✅ Limpieza de sesiones de chat al cambiar de pregunta
✅ Campo "Número de OR" obligatorio
✅ Eliminación de referencias "IA" → "Asistente Ayutec"
Inspección nueva, Pregunta 1 (Frenos):
Abro chat → aiChatMessages = [] (vacío)
Pregunto sobre frenos
Cierro → se guarda en answers[pregunta1].chatHistory
Misma inspección, Pregunta 2 (Neumáticos):
Abro chat → aiChatMessages = [] (vacío, porque esta pregunta no tiene historial)
Chat limpio, sin mezclar con frenos ✅
Vuelvo a Pregunta 1:
Abro chat → aiChatMessages = [historial guardado]
Veo mi conversación anterior sobre frenos ✅
Nueva inspección en otro momento:
Todas las preguntas empiezan con aiChatMessages = []
No se mezcla con inspecciones anteriores ✅
He implementado el sistema de 3 estados para el requisito de fotos/archivos que solicitaste.
Problema Original:
Solo había 2 estados:
✅ Permitir fotos (checkbox activado)
❌ No permitir fotos (checkbox desactivado)
Faltaba: Fotos opcionales vs obligatorias
Solución Implementada:
3 Estados disponibles:
🚫 No permitir adjuntos (photo_requirement = 'none')
No se muestra el input de fotos
El mecánico NO puede adjuntar archivos
📎 Opcional (photo_requirement = 'optional')
Se muestra el input de fotos
El mecánico PUEDE adjuntar si lo desea
No es obligatorio para continuar
⚠️ Obligatorio (photo_requirement = 'required')
Se muestra el input de fotos con etiqueta "OBLIGATORIO"
El mecánico DEBE adjuntar al menos 1 archivo
Validación bloquea continuar sin adjuntos
He identificado y solucionado el bug que causaba que las subpreguntas recién creadas aparecieran al principio (asociadas a la primera pregunta) hasta que las arrastraras.
Problema Identificado:
Cuando creabas una subpregunta, el backend asignaba order = 0 por defecto, lo que hacía que:
La subpregunta apareciera al principio de la lista
Al arrastrarla, el sistema recalculaba el orden y la colocaba correctamente debajo de su padre
Solución Implementada:
Backend (v1.0.93) - main.py:
Modifiqué el endpoint POST /api/questions para calcular automáticamente el order correcto al crear una pregunta:
Formulario mejorado (App.jsx):
Selector de pregunta padre SIEMPRE disponible para cualquier tipo
Selector de condición opcional (solo si el padre es boolean/single_choice)
Indicadores visuales claros:
Verde: "Esta subpregunta aparecerá SIEMPRE"
Azul: "⚡ Condición aplicada"
Visualización distinguible:
Badge verde 📎 para subpreguntas siempre visibles
Badge azul ⚡ para subpreguntas condicionales
Texto explicativo debajo de cada subpregunta
Frontend: 1.0.96 → 1.0.97
Service Worker: 1.0.96 → 1.0.97
Backend: 1.0.92 (sin cambios)
Resultado:
✅ Las preguntas padre se mueven CON todos sus hijos
✅ Los hijos mantienen su orden relativo al padre
✅ No hay conflictos de orden entre preguntas
✅ El sistema usa espaciado inteligente (0, 10, 20...) para evitar colisiones
✅ Las subpreguntas solo se mueven dentro de su padre
Efectos Visuales Añadidos:
Al iniciar el arrastre:
La pregunta se vuelve semi-transparente (40% opacidad)
Se aplica un ligero zoom out (scale 0.98)
Aparece un borde morado brillante (ring-2 ring-purple-500)
Durante el arrastre sobre una pregunta:
La zona de destino se resalta con fondo morado claro
Borde superior morado grueso (4px)
Sombra pronunciada para destacar la zona
Indicador visual claro: Badge flotante que dice "Se moverá ANTES de esta pregunta" con ícono de cruz
Transiciones suaves:
Todas las transformaciones tienen duration-200 para animaciones fluidas
El elemento arrastrado mantiene su escala reducida durante el movimiento
Al soltar:
Se restauran todos los estilos originales
La pregunta regresa a opacidad 100% y escala normal
Ordenamiento consistente de preguntas (App.jsx):
Las preguntas ahora se ordenan por el campo order antes de agruparse por sección
Esto asegura que el orden se mantenga exactamente como está en el backend
Ordenamiento de secciones (App.jsx):
Las secciones se ordenan por el order mínimo de sus preguntas
Garantiza que las secciones aparezcan en orden lógico y consistente
Mejora en drag-and-drop (App.jsx):
Al reordenar, ahora se ordenan las preguntas por order antes de calcular nuevas posiciones
Los nuevos valores de order se asignan correctamente preservando el orden relativo
Funciona correctamente con una sola sección y con subpreguntas
Ordenamiento en modo inspección (App.jsx):
getVisibleQuestions() ahora ordena las preguntas visibles por su campo order
Mantiene el orden correcto durante la ejecución de inspecciones
Backend (v1.0.92)
No se requirieron cambios en el backend (ya estaba ordenando correctamente con order_by(models.Question.order))
🎯 Nueva Funcionalidad Completa
Se ha implementado un sistema de chat conversacional con IA que permite adjuntar archivos (imágenes y PDFs), similar a ChatGPT, con prompt personalizable y envío completo al webhook.
📋 Características Implementadas
1. Adjuntar Archivos en el Chat
✅ Botón 📎 para adjuntar archivos
✅ Soporte para imágenes (JPG, PNG, etc.) y PDFs
✅ Preview de archivos adjuntos antes de enviar
✅ Eliminación individual de archivos adjuntos
✅ Múltiples archivos por mensaje
✅ Validación de tipos de archivo
2. Procesamiento Backend de Archivos
✅ Endpoint modificado para recibir FormData con archivos
✅ PDFs: Extracción automática de texto con pypdf
✅ Imágenes: Conversión a base64 para Vision AI
✅ Análisis combinado de texto + imágenes
✅ Límite de 2000 caracteres por PDF para optimizar
3. Integración con IA
✅ OpenAI Vision: Soporte multimodal (texto + imágenes)
✅ Gemini: Soporte de imágenes y texto
✅ Contexto enriquecido con archivos adjuntos
✅ Prompts adaptados según tipo de archivo
4. Custom Prompt por Checklist
✅ Campo assistant_prompt configurable por pregunta
✅ Campo assistant_instructions para instrucciones adicionales
✅ Control de longitud de respuesta (short/medium/long)
✅ Contexto automático del vehículo en cada mensaje
5. Persistencia del Chat
✅ Nuevo campo chat_history en modelo Answer
✅ Migración SQL: add_chat_history_to_answers.sql
✅ Guardado automático del historial completo
✅ Restauración del chat al reabrir
6. Envío al Webhook (n8n)
✅ Todos los chats incluidos en send_completed_inspection_to_n8n()
✅ Campo chat_history en cada respuesta del webhook
✅ Incluye metadata de archivos adjuntos
✅ Tipo de pregunta identificado en webhook
✅ Datos completos para análisis posterior
📋 Cambios Implementados
Frontend:
✅ Input acepta image/*,application/pdf
✅ Label actualizado: "Fotografías / Documentos PDF *"
✅ Preview diferenciado: PDFs muestran icono 📝 rojo en lugar de imagen
✅ Nombre de archivo PDF visible en el preview
✅ Contador genérico: "archivo(s) cargado(s)"
Backend:
✅ Agregado pypdf==4.0.1 a requirements.txt
✅ Detección automática de PDFs por content_type o extensión
✅ Extracción de texto de PDFs usando pypdf.PdfReader
✅ Validación de PDFs vacíos (sin texto extraíble)
✅ Prompts adaptados automáticamente para PDFs
✅ Soporte en OpenAI y Gemini (análisis de texto en lugar de vision)
✅ Límite de 4000 caracteres del PDF para análisis
🎯 Funcionamiento
Usuario sube PDF → Sistema detecta tipo de archivo
Extrae texto → PyPDF lee todas las páginas
Análisis IA → Envía texto al modelo (no usa Vision API)
Respuesta → Misma estructura JSON que con imágenes
⚠️ Limitaciones
PDFs escaneados sin OCR no funcionarán (requieren texto seleccionable)
Máximo 4000 caracteres del PDF enviados al AI
📦 Versiones
Frontend: 1.0.91 → 1.0.92
Backend: 1.0.89 → 1.0.90
✅ Agregado checkbox "Agregar campo observaciones" en QuestionTypeEditor.jsx (sección "Opciones Generales")
✅ Por defecto está marcado (compatibilidad con preguntas existentes)
✅ El campo de observaciones solo se muestra si show_observations !== false
✅ El admin ahora tiene control total sobre si mostrar o no las observaciones
2. Botón "Consultar Asistente IA" Siempre Visible
✅ El botón ahora aparece siempre para preguntas tipo ai_assistant
✅ No depende de que la pregunta tenga fotos habilitadas
✅ Movido a una sección independiente (fuera del bloque de fotos)
✅ Removido el botón duplicado que estaba dentro de la sección de fotos
3. Versiones Actualizadas
Frontend: 1.0.89 → 1.0.90
Service Worker: ayutec-v1.0.89 → ayutec-v1.0.90
Backend: Sin cambios (no fue necesario)
📋 Detalles Técnicos
App.jsx:
Campo de respuesta oculto para photo_only y ai_assistant
Botón de Asistente IA en sección dedicada (siempre visible para ai_assistant)
Observaciones solo si show_observations !== false y no es photo_only ni ai_assistant
QuestionTypeEditor.jsx:
Nueva sección "⚙️ Opciones Generales" con checkbox azul
Texto de ayuda: "Si está marcado, el mecánico podrá agregar notas adicionales"
Cambios Realizados
Service Worker (public/service-worker.js)
❌ Removido skipWaiting() automático en install
❌ Removido claim() automático en activate
✅ Solo se activa cuando recibe mensaje SKIP_WAITING del usuario
App.jsx
✅ Modal se muestra cuando hay actualización
✅ Nueva versión se instala en segundo plano
⏸️ Espera confirmación del usuario
✅ Solo actualiza cuando el usuario presiona el botón
✅ Protección contra recargas múltiples (refreshing flag)
Flujo Actualizado
Deploy de nueva versión (ej: v1.0.89)
Usuario abre la app con versión antigua (v1.0.88)
Service Worker detecta nueva versión
Descarga en segundo plano la nueva versión
Modal aparece → "¡Nueva Actualización!"
⏸️ La app sigue funcionando normalmente
👆 Usuario presiona "🚀 ACTUALIZAR AHORA"
Service Worker se activa (skipWaiting)
Página se recarga automáticamente
✅ Nueva versión activa
Ventajas
✅ Usuario tiene control total
✅ No interrumpe trabajo en curso
✅ Puede terminar inspección antes de actualizar
✅ Modal bloqueante asegura que eventualmente actualice
✅ Actualización instantánea al presionar botón
Ahora el usuario DEBE presionar el botón para actualizar! 🎯
Frontend (v1.0.88)
QuestionTypeEditor.jsx
✅ Nuevo tipo: ai_assistant con icono 💬✅ Configuración completa:
assistant_prompt: Define rol y comportamiento del asistente
context_questions: IDs de preguntas anteriores cuyas fotos usar (o todas)
assistant_instructions: Reglas específicas de diagnóstico
max_messages: Límite de mensajes en el chat
response_length: Corta/Media/Larga
QuestionAnswerInput.jsx
✅ Mensaje informativo para tipo ai_assistant
✅ Indica que el chat se abre con botón separado
App.jsx - Modal de Chat IA
✅ Modal full-screen responsive con:
Header con gradiente purple/blue
Área de mensajes con scroll
Input de texto + botón enviar
Soporte Enter para enviar
Indicador de "pensando..."
Timestamps en mensajes
Confianza de la IA
Límite de mensajes
✅ Botón "💬 Consultar Asistente IA" al lado de "Cargar Documentos"
✅ Contador de mensajes en el botón si ya hay historial
✅ Historial guardado en answers[questionId].chatHistory
✅ Auto-marca como completada cuando se abre el chat
Backend (v1.0.85)
Endpoint /api/ai/chat-assistant
✅ Recibe:
Mensaje del usuario
Historial del chat
Fotos de preguntas anteriores con sus análisis
Configuración del asistente
Info del vehículo
✅ Contexto inteligente:
Información del vehículo (marca, modelo, km, placa)
Análisis previos de fotos (hasta 10 fotos más relevantes)
Instrucciones personalizadas por pregunta
Historial conversacional (últimos 10 mensajes)
✅ Soporte multi-proveedor:
OpenAI (GPT-4, GPT-3.5)
Google Gemini
✅ Respuestas adaptables:
Longitud configurable (200/400/800 tokens)
Temperature 0.7 para balance creatividad/precisión
Cómo Funciona
Configuración (Admin):
- Crear pregunta tipo "Asistente IA (Chat)"
- Definir prompt: "Eres experto en sistemas de frenos..."
- Seleccionar preguntas anteriores: "5,8,12" (fotos de frenos)
- Instrucciones: "Si pastillas < 3mm → cambio inmediato"
- Longitud: Media
- Max mensajes: 20
2 Durante Inspección (Mecánico):
- Llega a pregunta tipo AI Assistant
- Ve botón "💬 Consultar Asistente IA"
- Clic → Abre chat full-screen
- La IA YA vio las fotos de preguntas 5, 8, 12
- Mecánico pregunta: "¿Las pastillas están bien?"
- IA responde basado en fotos previas + contexto vehículo
- Conversación natural con historial
- Al cerrar → se guarda automáticamente
3 Ejemplo de Conversación:
Mecánico: "Vi desgaste en las pastillas, ¿qué recomiendas?"
IA: "Basándome en las fotos que analicé:
Pastilla delantera izquierda: ~2.5mm de espesor
Pastilla delantera derecha: ~2.8mm
⚠️ CRÍTICO: Ambas pastillas están por debajo del
mínimo de 3mm. Con 45,000 km, es normal este desgaste.
RECOMENDACIÓN:
- Cambio INMEDIATO de pastillas delanteras
- Verificar estado de discos (posible rectificado)
- Revisar líquido de frenos (última foto muestra nivel bajo)
¿Necesitas el código de pieza para este Toyota Corolla 2019?"
Casos de Uso
Diagnóstico de Frenos
assistant_prompt: "Eres especialista en sistemas de frenos.
Analiza desgaste, fugas, vibraciones."
context_questions: "10,11,12,13" // Fotos de pastillas, discos, líquido
assistant_prompt: "Experto en motores. Detecta fugas, ruidos anormales,
consumo excesivo."
context_questions: "5,6,7,8,9" // Motor, aceite, correa, filtros
assistant_prompt: "Especialista en sistemas eléctricos y electrónicos."
context_questions: "20,21,22" // Batería, luces, tablero
instructions: "Siempre pedir código OBD2 si hay check engine"
Ventajas
✅ Contextual: La IA ve fotos previas, no pregunta "¿puedes mostrarme?"
✅ Especializado: Un asistente POR tema (frenos, motor, eléctrico)
✅ Conversacional: El mecánico puede hacer follow-up questions
✅ Guiado: Instrucciones específicas por tipo de inspección
✅ Historial: No repite info, mantiene contexto de la conversación
✅ Móvil-friendly: Modal responsive, fácil de usar en celular
Frontend (v1.0.87)
Service Worker (public/service-worker.js)
✅ Cache versionado dinámico: ayutec-v1.0.87
✅ Estrategia Network-First con fallback a cache
✅ Auto-limpieza de caches antiguos en activación
✅ Skip waiting para activación inmediata
✅ Soporte para mensaje SKIP_WAITING desde cliente
Detección de Actualizaciones (App.jsx)
✅ Registro automático de Service Worker
✅ Listener de updatefound para detectar nuevas versiones
✅ Listener de controllerchange para recarga automática
✅ Estado updateAvailable y waitingWorker
Modal de Actualización
✅ Diseño grande y llamativo con animación bounce
✅ Overlay bloqueante (z-index 9999, no se puede cerrar)
✅ Botón enorme: "🚀 ACTUALIZAR AHORA"
✅ Gradiente indigo/purple, responsive
✅ Texto claro: "Nueva versión disponible"
✅ Recarga automática al actualizar
PWA Manifest (site.webmanifest)
✅ Agregado start_url y scope
✅ Configurado orientation: portrait
✅ Display standalone para app nativa
HTML Metatags (index.html)
✅ theme-color para barra de navegación
✅ apple-mobile-web-app-capable para iOS
✅ mobile-web-app-capable para Android
✅ Viewport con user-scalable=no para PWA
Automatización
✅ Script PowerShell update-version.ps1:
Incrementa versión automáticamente (patch)
Actualiza package.json
Actualiza service-worker.js
Sincroniza ambos archivos
✅ Guía completa PWA-UPDATE-GUIDE.md
Flujo de Actualización
Desarrollador ejecuta update-version.ps1
Build y deploy de nueva versión
Usuario abre la app
Service Worker detecta nueva versión
Modal aparece automáticamente bloqueando UI
Usuario presiona "ACTUALIZAR AHORA"
Service Worker se activa
Página se recarga automáticamente
Usuario usa nueva versión
Backend (v1.0.84)
Sin cambios
Ahora la PWA se actualiza automáticamente mostrando un modal imposible de ignorar! 🚀📱
