Descripción general de Web Components Chat

El componente Ignite UI for Web Components Chat proporciona una solución completa para crear interfaces conversacionales en las aplicaciones. Ya sea que esté creando una herramienta de atención al cliente, un espacio de trabajo colaborativo o un asistente de chatbot, el componente Chat le brinda los componentes básicos que necesita: enviar y recibir mensajes de texto, cargar archivos adjuntos, mostrar sugerencias de respuesta rápida, mostrar indicadores de escritura cuando el otro participante está escribiendo una respuesta.

A diferencia de una lista de mensajes estática, elIgcChatComponent componente 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 comenzar, instale el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents

Una vez instalado, puede importar el componente en su proyecto y registrarlo para que esté disponible como un elemento personalizado:

import { defineComponents, IgcChatComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcChatComponent);

El archivo CSS incluye uno de nuestros temas predeterminados. Puedes reemplazarlo por otro tema o crear uno personalizado si quieresIgcChatComponent que coincida con la marca de tu aplicación.

Usage

La forma más sencilla de usar elIgcChatComponent es declararlo de la siguiente manera:

const options: IgcChatOptions = {
  currentUserId: 'me',
  headerText: 'Support Chat',
};

<igc-chat id="myChat" .options=${options}>
</igc-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, puede agregar mensajes mediante programación:

const chat = document.getElementById('myChat');
const newMessage = {
  id: '1',
  sender: 'me',
  text: 'Hello! How can I help you?',
  timestamp: Date.now().toString()
};
chat.messages = [...chat.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.

Properties

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

Nombre	Descripción
messages	Matriz de mensajes (ChatMessage[]) 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 de chat (IgcChatOptions) como ID de usuario actual, marcadores de posición de entrada, tipos de archivo aceptados, sugerencias de respuesta rápida, retraso de escritura y renderizadores personalizados.
resourceStrings	Cadenas de recursos localizadas para etiquetas, encabezados y texto del sistema. Utilice esta propiedad para adaptar el componente a diferentes idiomas.

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:

const options: IgcChatOptions = {
  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:

const options: IgcChatOptions = {
  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. Elsuggestions-position atributo te permite controlar dónde se muestran: ya sea debajo del área de entrada o debajo de la lista de mensajes.

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

<igc-chat
  .options=${options}>
</igc-chat>

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:

const options: IgcChatOptions = {
  isTyping: true
};

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

Custom Renderers

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. ElIgcChatComponent componente responde a esta necesidad con un sistema de renderizador. Un renderizador es simplemente una función que devuelve una plantilla para una parte determinada de la interfaz. Puedes sobrescribir tantos o tan pocos renderizadores como quieras.

ChatTemplateRenderer

Cada renderizador sigue la misma firma de función:

export type ChatTemplateRenderer<T> = (ctx: T) => unknown;

El parámetro ctx proporciona diferentes datos contextuales en función de lo que se esté representando.

Renderer Contexts

Context Type	Provided Data
ChatRenderContext	instance(la instancia del componente de chat).
ChatInputRenderContext	HeredaChatRenderContext y agregaattachments (matriz deIgcChatMessageAttachment) yvalue (texto de entrada actual).
ChatMessageRenderContext	HeredaChatRenderContext y agregaIgcChatMessage (elIgcChatMessage que se está renderizando).
ChatAttachmentRenderContext	HeredaChatMessageRenderContext y agregaattachment (elIgcChatMessageAttachment que se está renderizando).

Renderizadores 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.

Ejemplo: Contenido de mensaje personalizado

En este ejemplo se muestra cómo reemplazar la burbuja de mensaje con su propia plantilla:

const options = {
  renderers: {
    messageContent: (ctx) => {
      const { message } = ctx;
      return html`<div class="bubble custom">${message.content}</div>`;
    }
  }
};

Example: 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:

const options = {
  renderers: {
    input: (ctx) => html`
      <textarea placeholder=${ctx.instance?.options?.inputPlaceholder || 'Type here...'}>${ctx.value}</textarea>
      <button @click=${() => alert('Voice input!')}>🎤</button>
    `
  }
};

Ejemplo: Extensión de acciones de entrada

ElIgcChatComponent componente proporciona dos renderizadores que son útiles cuando quieres mantener las acciones predeterminadas (subir y enviar) pero extenderlas 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":

const _actionsStartTemplate = () => html`
  <igc-icon-button variant="flat">🎤</igc-icon-button>
`;

const _actionsEndTemplate = (ctx: ChatRenderContext) => html`
  <div>
    <igc-button @click=${() => handleCustomSendClick(ctx.instance)}>Ask</igc-button>
    <igc-icon-button variant="flat" name="more_horiz"></igc-icon-button>
  </div>
`;

const options = {
  renderers: {
    inputActionsStart: _actionsStartTemplate,
    inputActionsEnd: _actionsEndTemplate,
    sendButton: () => nothing,
  },
};

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 Rendering

El componente Chat incluye soporte integrado para contenido Markdown a través delcreateMarkdownRenderer helper, que se exporta desde el igniteui-webcomponents/extras punto de entrada del paquete principal. 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.

[!Note] To use the Markdown renderer, you need to install the following peer dependencies in your project:

npm install marked marked-shiki shiki dompurify

De forma predeterminada, los mensajes se representan como texto sin formato. Si desea habilitar la compatibilidad con Markdown, puede anular el renderizador messageContent y usar el renderizador Markdown como se muestra a continuación:

import { createMarkdownRenderer } from 'igniteui-webcomponents/extras';

// Create a reusable Markdown renderer instance
const markdownRenderer = await createMarkdownRenderer();

const options = {
  renderers: {
    messageContent: async ({ message }) => markdownRenderer(message),
  }
};

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

El renderizador Markdown también admite el resaltado de sintaxis para bloques de código mediante Shiki. De forma predeterminada, incluye resaltado para JavaScript, TypeScript, HTML y CSS con el tema github-light. Puede personalizar este comportamiento a través de MarkdownRendererOptions:

const markdownRenderer = await createMarkdownRenderer({
  theme: { light: 'min-light' },
  languages: ['javascript', 'python']
});

Esto habilitará bloques de código resaltados para JavaScript, Python y Go, con el estilo del tema oscuro de GitHub.

Configuration Options

Opción	Descripción
noHighlighter	Sitrue, deshabilita el resaltado de sintaxis por completo.
languages	Lista de lenguajes de programación que se admiten en bloques de código resaltados.
theme	Un objeto que especifica temas Shiki para aplicar. Soporta valores separados paralight ydark modo (por ejemplo, ).{ light: 'github-light', dark: 'github-dark' }​
sanitizer	Una función personalizada para desinfectar el HTML final. El valor predeterminado esDOMPurify.sanitize.

Eventos

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

• igcMessageCreated – cuando se crea un nuevo mensaje.
• igcMessageReact – cuando se reacciona a un mensaje.
• igcAttachmentClick: cuando se hace clic en un archivo adjunto.
• igcAttachmentAdded: cuando se agrega un archivo adjunto.
• igcAttachmentRemoved: cuando se quita un archivo adjunto.
• igcAttachmentDrag: mientras arrastra un archivo adjunto.
• igcAttachmentDrop: cuando se quita un archivo adjunto.
• igcTypingChange: cuando se escriben cambios de estado.
• igcInputFocus / igcInputBlur – input focus events.
• igcInputChange: cuando cambia el valor de entrada.

Puede escuchar estos eventos y sincronizarlos con su backend:

chat.addEventListener('igcMessageCreated', (e) => {
  console.log('Message:', e.detail);
});

Styling

ElIgcChatComponent componente expone tanto piezas CSS como ranuras para una personalización detallada de su apariencia y estructura.

CSS Parts

Nombre de la pieza	Descripción
"chat-contenedor"	Aplica estilos al contenedor de chat principal.
"encabezado"	Aplica estilo al contenedor de encabezado de chat.
"prefijo"	Aplica estilo al elemento antes del título del chat (por ejemplo, avatar).
"título"	Aplica estilo al título del encabezado del chat.
"mensaje-área-contenedor"	Aplica estilo al contenedor que contiene los mensajes y las sugerencias (opcionales).
"lista de mensajes"	Aplica estilo al contenedor de la lista de mensajes.
"mensaje-ítem"	Aplica estilo a cada contenedor de mensajes.
"indicador de escritura"	Aplica estilo al contenedor del indicador de escritura.
"punto de escritura"	Estilos de puntos indicadores de escritura individuales.
"contenedor de sugerencias"	Aplica estilo al contenedor que contiene todas las sugerencias.
"encabezado de sugerencias"	Aplica estilo al encabezado de sugerencias.
"Sugerencia"	Aplica estilo a cada elemento de sugerencia.
"prefijo de sugerencia"	Aplica estilo al icono o prefijo de una sugerencia.
"sugerencia-título"	Aplica estilo al texto o título de una sugerencia.
"Estado vacío"	Aplica estilo al contenedor de estado vacío cuando no hay mensajes.
"contenedor-área-entrada"	Aplica estilo al envoltorio alrededor del área de entrada del chat.
"contenedor de entrada"	Aplica estilo al contenedor de entrada principal.
"contenido-adjuntos-entrada"	Aplica estilo al contenedor de los datos adjuntos en la entrada.
"contenedor-acceso-entrada"	Aplica estilo a un único adjunto en el área de entrada.
"nombre-adjunto-entrada"	Aplica estilo al nombre de archivo de un archivo adjunto.
"icono-adjunto-entrada"	Aplica estilo al icono de un archivo adjunto.
"entrada de texto"	Aplica estilo al campo de entrada de texto para escribir mensajes.
"contenedor-de acciones-entrada"	Aplica estilo al contenedor para las acciones de entrada.
"inicio-acciones-entrada"	Aplica estilo al grupo de acciones al inicio de la entrada después de la carga de archivos predeterminada.
"extremo-acciones-entrada"	Aplica estilo al grupo de acciones al final de la entrada.
"contenedor-subido de archivos"	Aplica estilo al contenedor para la entrada de carga de archivos.
"subida de archivos"	Aplica estilo a la entrada de carga de archivos.
"envase de botón de envío"	Aplica estilo al contenedor alrededor del botón de envío.
"botón de enviar"	Aplica estilo al botón de enviar.
"contenedor-mensaje"	Aplica estilo al contenedor de un solo mensaje.
"lista de mensajes (reenviada)"	Aplica estilo a la lista interna de mensajes.
"encabezado de mensaje"	Aplica estilo al encabezado de un mensaje (por ejemplo, remitente, marca de tiempo).
"contenido-mensaje"	Aplica estilo al contenido de texto de un mensaje.
"contenedor-adjuntos de mensajes"	Aplica estilo al contenedor de los archivos adjuntos de mensajes.
"mensaje-adjunto"	Aplica estilo a un solo archivo adjunto de mensaje.
"contenedor-de mensajes-acciones"	Aplica estilo al contenedor que contiene las acciones de mensaje.
"mensaje enviado"	Aplica estilos a los mensajes marcados como enviados por el usuario actual.
"encabezado de accesorio"	Aplica estilo al encabezado de un bloque de enlaces.
"contenido de apego"	Aplica estilo al contenido de un bloque de datos adjuntos.
"icono de accesorio"	Aplica estilo al icono de un archivo adjunto.
"nombre de archivo"	Aplica estilo al nombre de archivo que se muestra en un archivo adjunto.

Slots

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

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.
• "" elements – For larger stylesheets, inject them inside the Shadow DOM.
• En línea "