Construcción del componente chat en Angular con Firestore

Este material guía, paso a paso, la construcción del componente chat en Angular para conversar con la IA y guardar mensajes en Firestore. Se explica el flujo completo del controller, la estandarización de servicios y las utilidades clave que asegurarán una UX fluida, lista para conectar con APIs y modelos cuando estén implementados.

¿Cómo queda la arquitectura del componente chat en Angular?

La base se arma reemplazando el componente, pegando el controller y el CSS, y luego ajustando servicios y nombres para evitar conflictos. Se dejan modelos comentados, por lo que aparecen algunos “nis” en el código hasta que los modelos estén listos.

¿Qué variables y estados controlan la conversación?

• usuario: único y luego alineado al modelo.
• mensajes: array que se vinculará al modelo definitivo.
• mensajeDeTexto: el texto actual a enviar.
• enviandoMensaje: booleano para el estado de envío.
• asistenteEscribiendo: activa la animación de “está escribiendo”.
• cargarHistorial: controla el loading al recuperar el historial.

¿Qué servicios intervienen y por qué se renombraron?

Se unifica la convención de nombres para evitar choques con clases del componente y mantener consistencia: - Firestore Service para la persistencia. - Gemini Service para la interacción con la IA. - Chat service ajustado para no colisionar con la clase del componente.

¿Cómo se inicializa y se gestionan suscripciones y scroll?

El ciclo de vida arranca con un try/catch que orquesta tres pasos: verificar autenticación, inicializar chat y configurar suscripciones. Los dos primeros son asíncronos con async/await; el tercero es síncrono. Si algo falla, se muestra un mensaje de error en el HTML y se loguea en consola.

¿Cómo se verifica autenticación y se simula usuario?

Mientras no exista auth service, se simula un usuario con id “123”, nombre “prueba” y sin foto. Si no hay usuario real, se redirigiría al auth cuando ese servicio esté disponible.

¿Cómo se carga el historial y el loading?

Al inicializar, si hay usuario, se activa cargarHistorial = true y se llama a chat service para recuperar el historial. Como ese servicio aún no está, el chat se muestra vacío y se desactiva el loading. Cuando el servicio esté implementado, se descomentará y aparecerán los mensajes previos.

¿Cómo se controla el scroll y las suscripciones?

• Con ng destroy, al salir de la vista se limpian todas las suscripciones con un foreach.
• Tras cambios en la vista, si un booleano indica que debe hacer scroll, se mueve al último mensaje y luego se restablece a false.
• Las suscripciones (por ahora comentadas) gestionarán en tiempo real: nuevos mensajes, si el asistente responde y el estado de “está escribiendo”.

¿Cómo se envían mensajes y se mejora la UX?

El envío valida que haya texto, lo parsea y delega en chat service. Por ahora no se envía porque el servicio no está implementado. Los errores se reflejan en pantalla con un mensaje dedicado.

¿Cómo funciona Enter y el enfoque de input?

• Enter con Shift: no envía y agrega salto de línea.
• Enter sin Shift: envía el mensaje.
• Envío y arranque del componente: se enfoca el input automáticamente pasado un breve intervalo.

¿Cómo se formatean hora y contenido para el backend?

• Hora: se formatea en español para enviar al backend sin ambigüedades.
• Mensaje: se convierte a HTML para su renderizado:
• Saltos de línea a
  .
• Doble asterisco a para negrita.
• Barra y asterisco a para cursiva.
• Se trackea el mensaje con su hora para mostrar en la interfaz.

¿Qué ocurre con cerrar sesión y errores de imagen?

• Cerrar sesión: cuando exista auth service, cerrará sesión en Firebase y llevará a auth. Hoy solo redirige a auth sin limpiar el chat.
• Imagen de usuario: si falla la carga, se muestra un SVG de respaldo para mantener la estructura del HTML.

¿Qué se ve en la navegación actual y qué sigue?

• Botón “continuar con Google”: redirige a “/chat”, pero no autentica realmente aún.
• Enviar “hola”: no hace nada porque no hay APIs conectadas por ahora.
• Botón “salir”: redirige, pero no desloguea hasta implementar auth service.
• En la carpeta “prompts” está el prompt para el agente de Copilot y el chat component listos para iterar. Próximo paso: modelos y luego services para conectar todo.

¿Te gustaría que agreguemos validaciones extra o modos de envío enriquecido cuando integremos el chat service? Deja tus ideas y casos de uso en los comentarios.