Contenido del curso
Estructura del componente chat en Angular
El componente chat es el núcleo de un proyecto que conecta Angular con inteligencia artificial y guarda mensajes en Firestore. Acá te muestro cómo se arma su estructura, qué hace cada método del controller y por qué algunas piezas quedan comentadas hasta tener los servicios listos.
¿Cómo se organiza el componente chat en Angular?
La base vive dentro de src/app/components/chat. Reemplazas el archivo del componente con la versión preparada y, al pegarlo, vas a ver muchos ítems en rojo porque faltan variables del controller. En cuanto pegas el código del controller, todo se resuelve.
Después sumas el CSS y unificas los nombres de los servicios para mantener consistencia:
ChatService para no chocar con la clase del componente.FirestoreService con la misma convención.GeminiService siguiendo el mismo patrón.Esta convención evita el típico problema de tener servicios nombrados de formas distintas en un mismo proyecto.
¿Por qué hay tipos
anyen el código? Porque los modelos están comentados temporalmente. Cuando implementes los modelos de usuario y mensajes, reemplazas esosanypor los tipos correctos.
¿Qué variables y suscripciones maneja el controller?
El controller arranca con variables clave que después se conectarán a los modelos definitivos. Tienes un usuario único, un array mensajes, un mensajeTexto que guarda lo que estás escribiendo, y un booleano enviandoMensaje que controla la animación de loading mientras el asistente responde.
En el ngOnInit se ejecuta un try/catch con tres llamadas:
await, asíncrono).Si cualquiera falla, se imprime el error en consola y se muestra un mensaje en el HTML cuando la variable de error deja de estar vacía.
¿Cómo se limpian las suscripciones al salir del chat?
El ngOnDestroy recorre con un forEach todas las suscripciones activas y las elimina. Esto evita memory leaks cuando navegas fuera de la vista.
También hay un detector que, ante cualquier cambio en la vista, revisa si necesita hacer scroll. Si el booleano de scroll está en true, mueve el scroll hacia abajo para mantener visible el último mensaje y luego lo pasa a false.
¿Cómo se simula la autenticación sin AuthService?
Mientras el AuthService no esté implementado, se simula un usuario con id 123, nombre "usuario prueba" y sin foto. El flujo real haría una redirección a /auth si no hay sesión, pero como acá se fuerza el usuario a mano, esa rama nunca se ejecuta.
inicializarChat también es asíncrono. Si no hay usuario, retorna la promesa. Si hay usuario, activa cargarHistorial en true para mostrar el loading e intenta llamar a chatService.inicializarChat(). Como ese servicio todavía no existe, esa línea queda comentada y el chat aparece vacío en su primera versión.
¿Cuándo aparece el historial de mensajes? Aparece cuando descomentes la llamada a
chatService.inicializarChat(). Hasta entonces, el chat carga vacío en cada sesión.
¿Cómo se envían mensajes y se maneja el Enter?
El método enviarMensaje valida primero que haya texto. Si está vacío, hace return. Si hay texto, lo parsea para enviarlo al servicio. Mientras ChatService no esté implementado, el envío real queda pendiente.
El manejo del Enter distingue dos escenarios:
Es la convención que usan apps como WhatsApp o Slack, así que el usuario lo recibe como algo natural.
¿Qué hace el formateo de mensajes desde el backend?
Los mensajes llegan como texto plano y necesitas convertirlos a HTML para renderizarlos con estilos. El controller reemplaza:
<br>.<strong> para negrita.<em> para cursiva.También hay un formateoHora que adapta el horario al español, útil cuando guardas timestamps en Firestore y los muestras al usuario.
¿Qué pasa con el cierre de sesión y los errores de imagen?
El botón salir, sin AuthService, solo redirige al componente de autenticación sin limpiar el chat ni cerrar sesión real en Firebase. Cuando el servicio esté listo, ahí sí se hará el cierre completo.
Para los errores de imagen del avatar, hay un fallback con un SVG embebido. Así, si la URL de la foto del usuario falla, el HTML mantiene su estructura sin romperse.
También hay un enfocarInput que pone foco automático en el campo de texto al iniciar el componente y después de cada envío, para que puedas seguir escribiendo sin tocar el mouse.
¿Cómo aprovechar Copilot para generar este componente?
En la carpeta prompts queda guardado el prompt del chat component. Lo puedes usar con el chat del agente de Copilot para regenerar el componente de forma automática e iterar sobre él. Tanto el prompt como el componente quedan disponibles en los recursos.
Con esto ya tienes las dos vistas listas: el componente de autenticación y el componente de chat. El siguiente paso lógico es definir los modelos de usuario y mensaje, y después conectar los services para que todo el flujo funcione de punta a punta. ¿Qué parte del controller te genera más dudas?
Sebastian Reyes
EstudianteCabe destacar que ya hay en la versión 20 una versión de los basada en signals de viewChild Dejo acá abajo pues el Cambio en el componente usando signal viewChild y la documentación
import { AfterViewChecked, Component, ElementRef, inject, OnDestroy, OnInit, viewChild } from '@angular/core'; import { AuthService } from '../../services/auth'; import { Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-chat', imports: [CommonModule, FormsModule], templateUrl: './chat.html', styleUrl: './chat.css', }) export class Chat implements OnInit, OnDestroy, AfterViewChecked { private authService = inject(AuthService); private chatService = inject(AuthService); private router = inject(Router); // Referencia al contenedor de mensajes para hacer scroll automático messagesContainer = viewChild<ElementRef<HTMLElement>>('messagesContainer'); messageInput = viewChild<ElementRef<HTMLTextAreaElement>>('messageInput'); usuario: any = null; // Información del usuario actual mensajes: any[] = []; // Lista de mensajes del chat mensajeTexto = ''; // Texto del mensaje que está escribiendo el usuario enviandoMensaje = false; // Indica si se está enviando un mensaje asistenteEscribiendo = false; // Indica si el asistente está generando una respuesta cargandoHistorial = false; // Indica si se está cargando el historial mensajeError = ''; // Mensaje de error para mostrar al usuario private suscripciones: Subscription[] = []; // Control para hacer scroll automático private debeHacerScroll = false; async ngOnInit(): Promise<void> { try { await this.verificarAutenticacion(); await this.inicializarChat(); this.configurarSuscripciones(); } catch (error) { console.error('❌ Error al inicializar el chat:', error); this.mensajeError = 'Error al cargar el chat. Intenta recargar la página.'; } } ngOnDestroy(): void { this.suscripciones.forEach(sub => sub.unsubscribe()); } /** * Se ejecuta después de que Angular actualiza la vista * Lo usamos para hacer scroll automático cuando hay nuevos mensajes */ ngAfterViewChecked(): void { if (this.debeHacerScroll) { this.scrollHaciaAbajo(); this.debeHacerScroll = false; } } private async verificarAutenticacion(): Promise<void> { // this.usuario = this.authService.obtenerUsuarioActual(); // Simulación de usuario autenticado para desarrollo this.usuario = { uid: 'usuario123', nombre: 'Usuario de Prueba', fotoURL: '' }; if (!this.usuario) { await this.router.navigate(['/auth']); throw new Error('Usuario no autenticado'); } } private async inicializarChat(): Promise<void> { if (!this.usuario) return; this.cargandoHistorial = true; try { // Inicializamos el chat con el ID del usuario // await this.chatService.inicializarChat(this.usuario.uid); } catch (error) { console.error('❌ Error al inicializar chat en componente:', error); throw error; } finally { this.cargandoHistorial = false; } } private configurarSuscripciones(): void { // Suscribirse a los mensajes del chat // const subMensajes = this.chatService.mensajes$.subscribe(mensajes => { // this.mensajes = mensajes; // this.debeHacerScroll = true; // }); // // Suscribirse al estado del asistente // const subAsistente = this.chatService.asistenteRespondiendo$.subscribe(respondiendo => { // this.asistenteEscribiendo = respondiendo; // if (respondiendo) { // this.debeHacerScroll = true; // } // }); // this.suscripciones.push(subMensajes, subAsistente); } async enviarMensaje(): Promise<void> { // Validamos que hay texto para enviar if (!this.mensajeTexto.trim()) { return; } // Limpiamos errores previos this.mensajeError = ''; this.enviandoMensaje = true; // Guardamos el texto del mensaje y limpiamos el input const texto = this.mensajeTexto.trim(); this.mensajeTexto = ''; try { // Enviamos el mensaje usando el servicio de chat // await this.chatService.enviarMensaje(texto); // Hacemos focus en el input para continuar escribiendo this.enfocarInput(); } catch (error: any) { console.error('❌ Error al enviar mensaje:', error); // Mostramos el error al usuario this.mensajeError = error.message || 'Error al enviar el mensaje'; // Restauramos el texto en el input this.mensajeTexto = texto; } finally { this.enviandoMensaje = false; } } manejarTeclaPresionada(evento: KeyboardEvent): void { // Enter sin Shift envía el mensaje if (evento.key === 'Enter' && !evento.shiftKey) { evento.preventDefault(); this.enviarMensaje(); } } async cerrarSesion(): Promise<void> { try { // Limpiamos el chat local // this.chatService.limpiarChat(); // Cerramos sesión en Firebase // await this.authService.cerrarSesion(); // Navegamos al login await this.router.navigate(['/auth']); } catch (error) { console.error('❌ Error al cerrar sesión:', error); this.mensajeError = 'Error al cerrar sesión'; } } private scrollHaciaAbajo(): void { try { const container = this.messagesContainer()?.nativeElement; if (container) { container.scrollTop = container.scrollHeight; } } catch (error) { // Error al hacer scroll } } private enfocarInput(): void { setTimeout(() => { this.messageInput()?.nativeElement?.focus(); }, 100); } formatearHora(fecha: Date): string { return fecha.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' }); } /** * Formatea el contenido de los mensajes del asistente * Convierte texto plano en HTML básico */ formatearMensajeAsistente(contenido: string): string { return contenido .replace(/\n/g, '<br>') .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') .replace(/\*(.*?)\*/g, '<em>$1</em>'); } trackByMensaje(index: number, mensaje: any): string { return mensaje.id || ${mensaje.tipo}-${mensaje.fechaEnvio.getTime()}; } manejarErrorImagen(evento: any): void { evento.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9IiM2NjdlZWEiLz4KPHN2ZyB4PSI4IiB5PSI4IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDEyQzE0LjIwOTEgMTIgMTYgMTAuMjA5MSAxNiA4QzE2IDUuNzkwODYgMTQuMjA5MSA0IDEyIDRDOS43OTA4NiA0IDggNS43OTA4NiA4IDhDOCAxMC4yMDkxIDkuNzkwODYgMTIgMTIgMTJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTIgMTRDOC42ODYyOSAxNCA2IDE2LjY4NjMgNiAyMEg2VjIySDZIMThINlYyMEM2IDE2LjY4NjMgMTUuMzEzNyAxNCAxMiAxNFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo8L3N2Zz4K'; } }