Angular Resumen del chat

El componente Chat ofrece una solución completa para construir interfaces conversacionales en tus aplicaciones. Ya sea que estés creando una herramienta de atención al cliente, un espacio de trabajo colaborativo o un asistente de chatbot, el componente de Chat te proporciona los bloques básicos que necesitas: enviar y recibir mensajes de texto, subir archivos adjuntos, mostrar sugerencias rápidas de respuesta, mostrar indicadores de escritura cuando el otro participante escribe una respuesta.

A diferencia de una lista de mensajes estática, el componente Chat es interactivo y está diseñado para la comunicación en tiempo real. Gestiona la entrada, el renderizado y la interacción del usuario, dándote control total sobre cómo se muestran los mensajes y los archivos adjuntos. También expone una extensa API de renderizado que te permite anular cualquier parte de su diseño o gráficos.

Installation

Para empezar, instala Ignite UI for Angular paquete así como el Ignite UI para el Componente Web que alimenta la interfaz:

npm install igniteui-angular igniteui-webcomponents

IgxChatComponentproporciona Angular vinculaciones (eventos, plantillas, DI, detección de cambios, tuberías), mientras que la interfaz visual del chat se renderiza mediante el Componente Web. Instalar ambos garantiza que el chat se comporte de forma nativa en Angular aprovechando la interfaz completa del componente web.

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

Una vez instalado, puedes importar el componente de tu proyecto:

import { Component } from '@angular/core';
import { IgxChatComponent } from "igniteui-angular/chat";

@Component({
  ...
})
export class AppComponent { ... }

Usage

Define las opciones de chat y envílgalas en tu plantilla:

import { IgxChatComponent, IgxChatOptions } from "igniteui-angular/chat";

public options: IgxChatOptions  = {
  currentUserId: 'me',
  headerText: 'Support Chat',
};

<igx-chat 
    [options]="options"
    [messages]="messages">
</igx-chat>

Aquí, lacurrentUserId propiedad indica al componente qué mensajes son "salientes" (enviados por el usuario actual) y cuáles son "recibidos" (enviados por otros). ProporcionaheaderText un título para la ventana de chat.

Una vez renderizado, puedes añadir mensajes programáticamente actualizando el array de mensajes asignado:

public addMessage() {    
    const newMessage = {
      id: '1',
      sender: 'me',
      text: 'Hello! How can I help you?',
      timestamp: Date.now().toString()
    };
    this.messages = [...this.messages, newMessage ];
}

Este enfoque facilita la conexión de Chat a su propio origen de datos, como un punto de conexión de servidor, un motor de chatbot o un backend de aplicación colaborativa.

Inputs

El componente Chat expone varias propiedades clave que permiten controlar su estado y configuración:

Nombre	Descripción
messages	Matriz de mensajes (IgcChatMessage[]) que se muestra en el chat. Puede enlazar a esto para controlar qué mensajes se muestran.
draftMessage	El mensaje actual no enviado, representado como un objeto que contienetext y es opcionalattachments. Esto es útil para guardar o restaurar borradores de mensajes.
options	Configuración del chat (IgxChatOptions) como el ID de usuario actual, marcadores de posición de entrada, tipos de archivo aceptados, sugerencias rápidas de respuesta y comportamiento al escribir.
templates	Plantillas personalizadas de Angular (IgxChatTemplates) para el contenido de los mensajes, entradas, archivos adjuntos y otras partes de la interfaz de chat.

Estas propiedades facilitan la sincronización de la interfaz de usuario del chat con el estado y el back-end de la aplicación.

Attachments

Las conversaciones modernas rara vez se limitan solo al texto. El componente Chat incluye soporte integrado para archivos adjuntos, permitiendo a los usuarios compartir imágenes, documentos y otros archivos. Por defecto, el área de entrada incluye un botón de acceso. Puedes controlar qué tipos de archivo están permitidos estableciendo laacceptedFiles propiedad:

public options: IgxChatOptions = {
  acceptedFiles="image/*,.pdf",
};

En este ejemplo, los usuarios solo podrán cargar imágenes y archivos PDF. Si tu caso de uso no requiere archivos adjuntos, puedes desactivarlos fácilmente:

public options: IgxChatOptions = {
  disableInputAttachments: true,
};

Suggestions

Las sugerencias de respuesta rápida proporcionan a los usuarios respuestas predefinidas que pueden tocar para responder al instante. Esta función es especialmente útil en chatbots, flujos de atención al cliente o al guiar a los usuarios a través de un proceso estructurado. Puedes proporcionar sugerencias vinculando una matriz de cadenas a la propiedad de sugerencias. LasuggestionsPosition propiedad te permite controlar dónde se muestran: ya sea debajo del área de entrada o debajo de la lista de mensajes.

public options: IgxChatOptions = {
  currentUserId: "me",
  suggestions: ['Yes', 'No', 'Maybe later'],
  suggestionsPosition: "below-input"
};

Este enfoque ayuda a agilizar las interacciones de los usuarios al reducir la necesidad de escribir respuestas repetitivas y mejora la experiencia general en las conversaciones guiadas.

Typing Indicator

Las conversaciones se sienten más naturales cuando los participantes pueden ver que la otra persona está escribiendo. El componente Chat proporciona este comportamiento a través de laisTyping propiedad del objeto option. Cuando se configura en verdadero, el chat muestra un indicador sutil de escritura debajo de los mensajes:

public options: IgxChatOptions = {
  isTyping: true
};

Esta característica normalmente se alterna mediante programación, por ejemplo, al recibir un evento de escritura del servicio back-end.

Custom Templates

Aunque el componente de chat funciona de fábrica con su interfaz predeterminada, muchas aplicaciones necesitan personalizar su aspecto y sensación. Por ejemplo, podrías añadir recibos de lectura, mostrar avatares o reemplazar el área de entrada por un botón de grabación de voz. El componente Chat cubre esta necesidad usando plantillas Angular. Las plantillas se proporcionan mediante latemplates entrada y utilizan directivas de Angular fuertemente tipadas.

Plantillas disponibles

Las siguientes partes del chat se pueden personalizar:

• Message-level: message, messageHeader, messageContent, messageAttachments, messageActions
• Attachment-level: attachment, attachmentHeader, attachmentContent
• Input-level: input, inputActions, inputActionsStart, inputActionsEnd, inputAttachments, fileUploadButton, sendButton
• Suggestions: suggestionPrefix
• Miscellaneous: typingIndicator

Este nivel de granularidad significa que puede modificar solo una parte (por ejemplo, cómo se ven los archivos adjuntos) sin reescribir todo el diseño del chat.

Custom Message Content

<igx-chat
        [options]="options"
        [messages]="messages"
        [templates]="{ messageContent: messageContent }">
</igx-chat>
<ng-template #messageContent let-message igxChatMessageContext>
  <div class="custom-message">
    <strong>{{ message.sender }}:</strong> {{ message.text }}
  </div>
</ng-template>

Here:

• let-messageexpone el objeto mensaje.
• LaigxChatMessageContext directiva garantiza la correcta tipificación de las plantillas de mensajes.

Custom Input Area

De forma predeterminada, la entrada de chat es un área de texto. Puede anularlo para proporcionar una experiencia más personalizada, como agregar un botón de entrada de voz:

<igx-chat
  [options]="options"
  [templates]="{ input: customInput }">
</igx-chat>

<ng-template #customInput let-input igxChatInputContext>
  <div class="custom-input">
    <textarea [(ngModel)]="input.value"></textarea>
    <button (click)="speechToText()">🎤</button>
  </div>
</ng-template>

Extending Input Actions

El componente de chat ofrece dos plantillas que son útiles cuando quieres mantener las acciones predeterminadas (subir y enviar) pero ampliarlas con controles adicionales:

• inputActionsStart– te permite inyectar contenido personalizado tras el botón de subida incorporado.
• inputActionsEnd– permite inyectar contenido personalizado tras el botón de envío integrado.

Por ejemplo, es posible que desee agregar un botón de grabación de voz después del botón de carga o un menú de opciones adicionales después del botón de enviar. En el siguiente ejemplo, se conserva el botón de carga predeterminado, pero agregamos un botón de micrófono junto a él. En el otro extremo, eliminamos el botón de envío predeterminado y lo reemplazamos con un botón Preguntar personalizado y un menú "más":

<igx-chat
  [options]="options"
  [templates]="{
    inputActionsStart: inputStart,
    inputActionsEnd: inputEnd
  }">
</igx-chat>

<ng-template #inputStart>
  <button class="icon-btn">🎤</button>
</ng-template>

<ng-template #inputEnd>
  <button (click)="ask()">Ask</button>
  <button class="icon-btn">⋮</button>
</ng-template>

En esta configuración:

• El botón de carga permanece en su lugar.
• Se agrega un botón de micrófono después de él (inputActionsStart).
• El botón de envío predeterminado se elimina y se reemplaza por un botón Ask personalizado y un icono "más" (inputActionsEnd).

Este enfoque le brinda flexibilidad total sobre la barra de entrada de chat, lo que le permite agregar, eliminar o reordenar acciones sin reconstruir el área de entrada desde cero.

Markdown Support

El componente Chat incluye soporte integrado para contenido Markdown a través defromMarkdown Pipe, que transforma el texto de los mensajes en HTML seguro. Esto te permite mostrar mensajes con texto formateado, enlaces, listas e incluso bloques de código resaltados con sintaxis, asegurando que todo el HTML renderizado esté limpio para mayor seguridad.

El renderizado de markdown se realiza de forma asíncrona por razones de rendimiento, por lo que lafromMarkdown tubería debe combinarse con la tubería deasync Angular.

Ejemplo — renderizar markdown dentro de una plantilla:

<ng-template #messageContent let-message igxChatMessageContext>
    <div [innerHTML]="message.text | fromMarkdown | async"></div>
</ng-template>

En este ejemplo:

• La propiedad de texto de cada mensaje se analizará como Markdown utilizando la biblioteca marcada.
• El renderizador desinfecta la salida usando DOMPurify
• Los enlaces se abren automáticamente en una nueva pestaña con atributos rel seguros.

Resaltado de sintaxis

ElfromMarkdown pipe también soporta el resaltado de sintaxis para bloques de código. Cuando un mensaje contiene código cercado (js...), se renderizará usando Shiki, un resaltador de código de alta fidelidad que utiliza VS Code. Por defecto, incluye resaltado para JavaScript, TypeScript, HTML y CSS con el tema github-light.

Ejemplo — cuando un mensaje contiene:

Here is a JavaScript example:
\`\`\`ts
function greet(name: string) {
  return `Hello, ${name}!`;
}
\`\`\`

La salida dentro del mensaje del chat aparecerá con:

• Resaltado automático de sintaxis
• Theme-aware styling (github-light / github-dark)
• Proper indentation and monospaced font
• No se requiere ninguna configuración adicional: los temas predeterminados se cargan automáticamente.

Outputs (Events)

Para integrarse con la lógica de la aplicación, el componente Chat emite un conjunto de eventos:

• MensajeCreado – cuando se crea un mensaje nuevo.
• Mensaje Reaccionar – cuando se responde a un mensaje.
• AccesoClic – cuando se hace clic en un archivo adjunto.
• Adjunto Añadido – cuando se añade un accesorio.
• adjuntoEliminado – cuando se retira un adjunto.
• AttachmentDrag – mientras arrastras un attachment.
• attachmentDrop – cuando se suelta un attachment.
• typechange: cuando cambia el estado de la escritura.
• inputFocus / inputBlur – input focus events.
• inputChange – cuando cambia el valor de entrada.

Puede escuchar estos eventos y sincronizarlos con su backend:

<igx-chat
        [options]="options"
        [messages]="messages"
        (messageCreated)="onMessageCreated($event)">
</igx-chat>

Estilismo

El componente Chat expone tanto las partes CSS como las ranuras para una personalización detallada de su apariencia y estructura.

CSS Parts

Nombre de la pieza	Descripción
chat-container	Aplica estilos al contenedor de chat principal.
header	Aplica estilo al contenedor de encabezado de chat.
prefix	Aplica estilo al elemento antes del título del chat (por ejemplo, avatar).
title	Aplica estilo al título del encabezado del chat.
message-area-container	Aplica estilo al contenedor que contiene los mensajes y las sugerencias (opcionales).
message-list	Aplica estilo al contenedor de la lista de mensajes.
message-item	Aplica estilo a cada contenedor de mensajes.
typing-indicator	Aplica estilo al contenedor del indicador de escritura.
typing-dot	Estilos de puntos indicadores de escritura individuales.
suggestions-container	Aplica estilo al contenedor que contiene todas las sugerencias.
suggestions-header	Aplica estilo al encabezado de sugerencias.
suggestion	Aplica estilo a cada elemento de sugerencia.
suggestion-prefix	Aplica estilo al icono o prefijo de una sugerencia.
suggestion-title	Aplica estilo al texto o título de una sugerencia.
empty-state	Aplica estilo al contenedor de estado vacío cuando no hay mensajes.
input-area-container	Aplica estilo al envoltorio alrededor del área de entrada del chat.
input-container	Aplica estilo al contenedor de entrada principal.
input-attachments-container	Aplica estilo al contenedor de los datos adjuntos en la entrada.
input-attachment-container	Aplica estilo a un único adjunto en el área de entrada.
input-attachment-name	Aplica estilo al nombre de archivo de un archivo adjunto.
input-attachment-icon	Aplica estilo al icono de un archivo adjunto.
text-input	Aplica estilo al campo de entrada de texto para escribir mensajes.
input-actions-container	Aplica estilo al contenedor para las acciones de entrada.
input-actions-start	Aplica estilo al grupo de acciones al inicio de la entrada después de la carga de archivos predeterminada.
input-actions-end	Aplica estilo al grupo de acciones al final de la entrada.
file-upload-container	Aplica estilo al contenedor para la entrada de carga de archivos.
file-upload	Aplica estilo a la entrada de carga de archivos.
send-button-container	Aplica estilo al contenedor alrededor del botón de envío.
send-button	Aplica estilo al botón de enviar.
message-container	Aplica estilo al contenedor de un solo mensaje.
message-list (forwarded)	Aplica estilo a la lista interna de mensajes.
message-header	Aplica estilo al encabezado de un mensaje (por ejemplo, remitente, marca de tiempo).
message-content	Aplica estilo al contenido de texto de un mensaje.
message-attachments-container	Aplica estilo al contenedor de los archivos adjuntos de mensajes.
message-attachment	Aplica estilo a un solo archivo adjunto de mensaje.
message-actions-container	Aplica estilo al contenedor que contiene las acciones de mensaje.
message-sent	Aplica estilos a los mensajes marcados como enviados por el usuario actual.
attachment-header	Aplica estilo al encabezado de un bloque de enlaces.
attachment-content	Aplica estilo al contenido de un bloque de datos adjuntos.
attachment-icon	Aplica estilo al icono de un archivo adjunto.
file-name	Aplica estilo al nombre de archivo que se muestra en un archivo adjunto.

Ejemplo

igc-chat::part(header) {
  background: var(--ig-primary-100);
}

igc-chat::part(message-container) {
  border-radius: 12px;
  padding: 0.5rem;
}

igc-chat::part(empty-state) {
  font-style: italic;
  color: var(--ig-gray-500);
}

Esto te permite combinarChat con tu marca sin cambiar su funcionalidad.

Slots

Nombre de la ranura	Descripción
prefix	Espacio para inyectar contenido (por ejemplo, avatar o icono) antes del título del chat.
title	Espacio para anular el contenido del título del chat.
actions	Ranura para inyectar acciones de encabezado (por ejemplo, botones, menús).
suggestions-header	Ranura para representar un encabezado personalizado para la lista de sugerencias.
suggestions	Ranura para renderizar una lista personalizada de sugerencias de respuesta rápida.
suggestions-actions	Ranura para renderizar acciones adicionales.
suggestion	Ranura para renderizar un solo elemento de sugerencia.
empty-state	Ranura que se muestra cuando no hay mensajes.

Estas ranuras permiten inyectar una interfaz personalizada en el encabezado o en el área de sugerencias:

<igx-chat>
  <span slot="actions">
    <button class="icon">⚙️</button>
  </span>
</igx-chat>

Adopción del estilo raíz (adoptRootStyles)

Las opciones del componente Chat incluyen una marca especial para escenarios de estilo avanzados:

Opción	Tipo	Por defecto	Descripción
adoptRootStyles	boolean	FALSO	Cuandotrue, el componente permite que el contenido representado dentro de su Shadow DOM (por ejemplo, de renderizadores personalizados) herede estilos de la raíz del documento. Esto proporciona una solución rápida para el peinado, pero no se recomienda para uso en producción.

Esta propiedad puede ser útil si prefiere no tratar con la encapsulación de Shadow DOM al aplicar CSS global a plantillas renderizadas personalizadas. Sin embargo, viene con compensaciones:

• ✅ Conveniencia: permite que los estilos globales (del documento) afecten a los renderizadores de mensajes personalizados.
• ⚠️ Arriesgado: rompe la encapsulación y puede provocar una fuga de estilo, donde el CSS global altera involuntariamente los elementos visuales internos.
• 🔒 Configuración única: esta opción solo se puede establecer en la inicialización. Cambiarlo en tiempo de ejecución no tiene ningún efecto.

Se recomienda encarecidamente usar los enfoques de estilo estándar de componentes web antes de recurrir a esta propiedad:

• Variables CSS y API ::p art: prefiera la personalización a través de partes y variables expuestas.
• <link>elementos – Para hojas de estilo más grandes, inyecta dentro del DOM Shadow.
• Etiquetas en línea<style>– Para anulaciones pequeñas y con mira.

API Reference

• IgxChatComponent
• IgxChatOptions
• IgxChatTemplates
• IgxChatMessageContextDirective
• IgxChatInputContextDirective
• IgxChatAttachmentContextDirective
• Styling & Themes

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub