Ahora entiendo el problema completamente. El flujo actual es:
- Usuario completa cuestionario ->
handleSubmit->setIsGeneratingPDF(true) - PDFGenerationOverlay se muestra con animacion de 3.5 segundos
- Cuando termina, llama a
onComplete(que eshandlePDFComplete) handlePDFCompleteactualiza estados y despues de 100ms cambia a tab "document"
El problema es que el PDFGenerationOverlay tiene un setTimeout(onComplete, 1400) DESPUES de que setPhase("success") se llama. Esto significa que onComplete se llama 1400ms despues de mostrar el "success", pero el overlay sigue visible porque isGenerating todavia es true hasta que handlePDFComplete llame a setIsGeneratingPDF(false).
El problema REAL es que cuando handlePDFComplete se ejecuta:
- Primero llama
setHasGeneratedDocument(true) - Luego
setIsGeneratingPDF(false)- esto cierra el overlay - Despues de 100ms llama
setActiveTab("document")
PERO el componente puede estar re-renderizando durante este tiempo y el estado puede no propagarse correctamente. Voy a simplificar completamente el flujo eliminando el delay y asegurando que todo se actualice sincronicamente:
Ahora el problema tambien puede estar en el PDFGenerationOverlay - cuando llama a onComplete, el overlay sigue mostrando "success" pero la pantalla detras puede estar en blanco. Voy a verificar que el overlay no bloquee la vista mientras los estados se actualizan:
El cambio clave fue reorganizar el orden de las actualizaciones de estado en handlePDFComplete: ahora primero actualizamos hasGeneratedDocument y activeTab ANTES de cerrar el overlay. Esto asegura que cuando el overlay se cierre, el documento ya este listo para mostrarse. Tambien reduje el delay de "success" en el overlay de 1400ms a 800ms para una transicion mas rapida.
ahora quiero cambiar la estructura del proyecto y realizerlo entero, lo que tienes que hacer crear una nueva vista que sea la del proyecto una vez entras . La pestaña donde aparece todas las fases , las que estan en progreso y no etc la tienes que eliminar, ahora al entrar al proyecto tiene que salirte una pantalla como la que te enseño en la captura, se conserva la explicacion de arriba pero cambia la parte de abajo, a la izquierda una seccion de paso a paso, a la derecha un panel para visualizar todo el contenido multimedia que se genere, prompt o el chat con el asistente para obtener el ouput. Quiero que te fijes en como funciona muy detalladamente y calcar las imagenes que te voy a pasar, agregale las animaciones, transiciones, retroiluminacion pertintente. A la hora de revisar el prompt, la vista del prompt no debe de ser de color azul como en el ejemplo, alli se debe de crear una visualizacion con el estilo visual y branding de weartifcial con una animacion elegante para poder editar el prompt si lo desea. Cuando se accede al chat quiero lo mismo, el alli se ha puesto el chat de gemini pero quiero que uses el chatbot que ya has creado, y que el chatbot sea capaz de devolver no solo texto sino documentos (alli tienes que crear un componenete para la previsualizacion del documento). En la ultima pagina se conserva el historial de los documentos que se han generado.
Voy a analizar las imagenes y crear esta nueva estructura completamente:
- Imagen 1-2: Vista de fase con header, descripcion, dropdowns de Output y Herramientas, tabs (Guia paso a paso / Documentos generados), accordion de 4 pasos a la izquierda, panel de contenido a la derecha con logo animado
- Imagen 3: Paso 3 expandido con instrucciones numeradas y preview del chatbot
- Imagen 4: Editor de prompt en panel derecho con fondo oscuro y boton "Guardar cambios"
- Imagen 5: Tab de Documentos generados con tabla de archivos (nombre, fecha, hora)
- Imagen 6: Paso 1 con formulario de campos a completar
- Imagen 7: Estado inicial con Paso 1 activo