Angular Visão Geral do Chat

    O componente Chat oferece uma solução completa para construir interfaces conversacionais em suas aplicações. Seja criando uma ferramenta de suporte ao cliente, um espaço de trabalho colaborativo ou um assistente de chatbot, o componente Chat oferece os blocos de construção necessários: enviar e receber mensagens de texto, enviar anexos, exibir sugestões rápidas de resposta, mostrar indicadores de digitação quando o outro participante está escrevendo uma resposta.

    Ao contrário de uma lista de mensagens estática, o componente Chat é interativo e projetado para comunicação em tempo real. Ele gerencia entrada, renderização e interação do usuário, além de dar controle total sobre como mensagens e anexos são exibidos. Também expõe uma API de renderização extensa que permite sobrescrever qualquer parte do layout ou dos visuais.

    Installation

    Para começar, instale Ignite UI for Angular pacote assim como o Ignite UI para o Web Component que alimenta a interface:

    npm install igniteui-angular igniteui-webcomponents

    IgxChatComponentfornece Angular bindings (eventos, templates, DI, detecção de mudanças, pipes), enquanto a interface visual do chat é renderizada pelo Componente Web. Instalar ambos garante que o chat se comporte nativamente em Angular enquanto aproveita toda a interface do Web Component.

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    Uma vez instalado, você pode importar o componente do seu projeto:

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

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

    Usage

    Defina as opções de chat e as vincule ao seu modelo:

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

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

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

    Aqui, acurrentUserId propriedade informa ao componente quais mensagens são "enviadas" (enviadas pelo usuário atual) e quais mensagens estão "recebidas" (enviadas por outros). EleheaderText fornece um título para a janela de chat.

    Uma vez renderizado, você pode adicionar mensagens programaticamente atualizando o array de mensagens vinculado:

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

    Essa abordagem facilita a conexão do Chat à sua própria fonte de dados, como um endpoint de servidor, um mecanismo de chatbot ou um back-end de aplicativo colaborativo.

    Inputs

    O componente Chat expõe várias propriedades importantes que permitem controlar seu estado e configuração:

    Nome Descrição
    messages Matriz de mensagens (IgcChatMessage[]) exibidas no chat. Você pode vincular a isso para controlar quais mensagens são mostradas.
    draftMessage A mensagem não enviada atual, representada como um objeto contendotext e opcionalattachments. Isso é útil para salvar ou restaurar rascunhos de mensagens.
    options Configuração do chat (IgxChatOptions) como ID de usuário atual, marcadores de entrada, tipos de arquivo aceitos, sugestões rápidas de resposta e comportamento de digitação.
    templates Modelos personalizados de Angular (IgxChatTemplates) para conteúdo de mensagens, entradas, anexos e outras partes da interface do chat.

    Essas propriedades facilitam a sincronização da interface do usuário do Chat com o estado e o back-end do aplicativo.

    Attachments

    Conversas modernas raramente se limitam apenas ao texto. O componente Chat inclui suporte embutido para anexos de arquivos, permitindo que os usuários compartilhem imagens, documentos e outros arquivos. Por padrão, a área de entrada inclui um botão de anexo. Você pode controlar quais tipos de arquivo são permitidos definindo a propriedadeacceptedFiles:

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

    Neste exemplo, os usuários só poderão fazer upload de imagens e arquivos PDF. Se o seu caso de uso não exigir anexos, você poderá desativá-los facilmente:

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

    Suggestions

    Sugestões de resposta rápida oferecem aos usuários respostas pré-definidas que podem tocar para responder instantaneamente. Esse recurso é particularmente útil em chatbots, fluxos de atendimento ao cliente ou ao guiar usuários por um processo estruturado. Você pode fornecer sugestões vinculando um array de strings à propriedade de sugestões. AsuggestionsPosition propriedade permite que você controle onde elas são exibidas: abaixo da área de entrada ou abaixo da lista de mensagens.

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

    Essa abordagem ajuda a simplificar as interações do usuário, reduzindo a necessidade de digitar respostas repetitivas e melhora a experiência geral em conversas guiadas.

    Typing Indicator

    As conversas parecem mais naturais quando os participantes veem que a outra pessoa está digitando. O componente Chat fornece esse comportamento por meio daisTyping propriedade do objeto options. Quando configurado como verdadeiro, o chat mostra um indicador sutil de digitação abaixo das mensagens:

    public options: IgxChatOptions = {
  isTyping: true
};

    Esse recurso normalmente é alternado programaticamente, por exemplo, ao receber um evento de digitação do serviço de back-end.

    Custom Templates

    Embora o componente Chat funcione de fábrica com sua interface padrão, muitos aplicativos precisam personalizar a aparência e a sensação. Por exemplo, você pode querer adicionar recibos de leitura, exibir avatares ou substituir a área de entrada por um botão de gravação de voz. O componente Chat atende a essa necessidade usando Angular templates. Os templates são fornecidos via entradatemplates e utilizam diretivas de Angular fortemente tipadas.

    Modelos Disponíveis

    As seguintes partes do bate-papo podem ser personalizadas:

    • 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

    Esse nível de granularidade significa que você pode ajustar apenas uma parte (por exemplo, a aparência dos anexos) sem reescrever todo o layout do 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-messageexpõe o objeto mensagem.
    • AigxChatMessageContext diretiva garante a digitação correta para os templates de mensagens.

    Custom Input Area

    Por padrão, a entrada de chat é uma área de texto. Você pode substituí-lo para fornecer uma experiência mais personalizada, como adicionar um botão 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

    O componente Chat oferece dois modelos que são úteis quando você quer manter as ações padrão (upload e envio), mas estendê-las com controles adicionais:

    • inputActionsStart– permite que você injete conteúdo personalizado após o botão de upload embutido.
    • inputActionsEnd– permite injetar conteúdo personalizado após o botão de enviar embutido.

    Por exemplo, você pode querer adicionar um botão de gravação de voz após o botão de upload ou um menu de opções extras após o botão enviar. No exemplo a seguir, o botão de upload padrão é preservado, mas adicionamos um botão de microfone ao lado dele. Por outro lado, removemos o botão de envio padrão e o substituímos por um botão Ask personalizado e um menu "mais":

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

    Nesta configuração:

    • O botão de upload permanece no lugar.
    • Um botão de microfone é adicionado depois dele (inputActionsStart).
    • O botão de envio padrão é removido e substituído por um botão Perguntar personalizado e um ícone "mais" (inputActionsEnd).

    Essa abordagem oferece flexibilidade total na barra de entrada do chat, permitindo adicionar, remover ou reordenar ações sem reconstruir a área de entrada do zero.

    Markdown Support

    O componente Chat inclui suporte embutido para conteúdo Markdown por meiofromMarkdown de Pipe, que transforma o texto das mensagens em HTML seguro. Isso permite exibir mensagens com texto formatado, links, listas e até blocos de código destacados com sintaxe, garantindo que todo o HTML renderizado seja limpo para segurança.

    A renderização markdown é realizada assíncrona por razões de desempenho, então ofromMarkdown pipe deve ser combinado com o pipe doasync Angular.

    Exemplo — renderização de markdown dentro de um template:

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

    Neste exemplo:

    • A propriedade text de cada mensagem será analisada como Markdown usando a biblioteca marcada.
    • O renderizador limpa a saída usando DOMPurify
    • Os links são abertos automaticamente em uma nova guia com atributos rel seguros.

    Realce de sintaxe

    OfromMarkdown pipe também suporta realce de sintaxe para blocos de código. Quando uma mensagem contém código cercado (js...), ela será renderizada usando o Shiki, um marcador de código de alta fidelidade usado pelo VS Code. Por padrão, inclui destaque para JavaScript, TypeScript, HTML e CSS com o tema github-light.

    Exemplo — quando uma mensagem contém:

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

    A saída dentro da mensagem do chat aparecerá com:

    • Realce automático de sintaxe
    • Theme-aware styling (github-light / github-dark)
    • Proper indentation and monospaced font
    • Não é necessária configuração adicional — os temas padrão são carregados automaticamente.

    Outputs (Events)

    Para se integrar à lógica do aplicativo, o componente Chat emite um conjunto de eventos:

    • MessageCreated – quando uma nova mensagem é criada.
    • MessageReact – quando uma mensagem é respondida.
    • anexo Click – quando um anexo é clicado.
    • anexoAdicionado – quando um anexo é adicionado.
    • AnexoRemovido – quando um anexo é removido.
    • attachmentDrag – enquanto arrasta um attachment.
    • attachmentDrop – quando um anexo é dropado.
    • typechangeChange – quando o status da digitação muda.
    • inputFocus / inputBlur – input focus events.
    • inputChange – quando o valor de entrada muda.

    Você pode ouvir esses eventos e sincronizá-los com seu back-end:

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

    Estilização

    O componente Chat expõe tanto partes de CSS quanto slots para uma personalização detalhada de sua aparência e estrutura.

    CSS Parts

    Nome da peça Descrição
    chat-container Estiliza o contêiner de bate-papo principal.
    header Estiliza o contêiner de cabeçalho de chat.
    prefix Estiliza o elemento antes do título do bate-papo (por exemplo, avatar).
    title Estiliza o título do cabeçalho do chat.
    message-area-container Estiliza o contêiner que contém as mensagens e sugestões (opcionais).
    message-list Estiliza o contêiner da lista de mensagens.
    message-item Estiliza cada wrapper de mensagem.
    typing-indicator Estiliza o contêiner do indicador de digitação.
    typing-dot Estilos de pontos indicadores de digitação individuais.
    suggestions-container Estiliza o contêiner que contém todas as sugestões.
    suggestions-header Estiliza o cabeçalho de sugestões.
    suggestion Estiliza cada item de sugestão.
    suggestion-prefix Estiliza o ícone ou prefixo em uma sugestão.
    suggestion-title Estiliza o texto/título de uma sugestão.
    empty-state Estiliza o contêiner de estado vazio quando não há mensagens.
    input-area-container Estiliza o wrapper ao redor da área de entrada do chat.
    input-container Estiliza o contêiner de entrada principal.
    input-attachments-container Estiliza o contêiner para anexos na entrada.
    input-attachment-container Estiliza um único anexo na área de entrada.
    input-attachment-name Estiliza o nome do arquivo de um anexo.
    input-attachment-icon Estiliza o ícone de um anexo.
    text-input Estiliza o campo de entrada de texto para digitar mensagens.
    input-actions-container Estiliza o contêiner para ações de entrada.
    input-actions-start Estiliza o grupo de ações no início da entrada após o upload do arquivo padrão.
    input-actions-end Estiliza o grupo de ações no final da entrada.
    file-upload-container Estiliza o contêiner para a entrada de upload de arquivo.
    file-upload Estiliza a própria entrada de upload de arquivo.
    send-button-container Estiliza o contêiner ao redor do botão enviar.
    send-button Estiliza o botão enviar.
    message-container Estiliza o contêiner de uma única mensagem.
    message-list (forwarded) Estiliza a lista interna de mensagens.
    message-header Estiliza o cabeçalho de uma mensagem (por exemplo, remetente, carimbo de data/hora).
    message-content Estiliza o conteúdo de texto de uma mensagem.
    message-attachments-container Estiliza o contêiner para anexos de mensagens.
    message-attachment Estiliza um único anexo de mensagem.
    message-actions-container Estiliza o contêiner que contém as ações da mensagem.
    message-sent Define as mensagens marcadas como enviadas pelo usuário atual.
    attachment-header Estiliza o cabeçalho de um bloco de anexo.
    attachment-content Estiliza o conteúdo de um bloco de anexo.
    attachment-icon Estiliza o ícone de um anexo.
    file-name Estiliza o nome do arquivo mostrado em um anexo.

    Exemplo

    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);
}

    Isso permite que você combineChat com a sua marca sem substituir sua funcionalidade.

    Slots

    Nome do slot Descrição
    prefix Slot para injetar conteúdo (por exemplo, avatar ou ícone) antes do título do bate-papo.
    title Slot para substituir o conteúdo do título do bate-papo.
    actions Slot para injetar ações de cabeçalho (por exemplo, botões, menus).
    suggestions-header Slot para renderizar um cabeçalho personalizado para a lista de sugestões.
    suggestions Slot para renderizar uma lista personalizada de sugestões de resposta rápida.
    suggestions-actions Slot para renderizar ações adicionais.
    suggestion Slot para renderizar um único item de sugestão.
    empty-state Slot mostrado quando não há mensagens.

    Esses slots permitem injetar uma interface personalizada no cabeçalho ou na área de sugestões:

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

    Adoção de estilo raiz (adoptRootStyles)

    As opções do componente Chat incluem um sinalizador especial para cenários de estilo avançados:

    Opção Tipo Padrão Descrição
    adoptRootStyles boolean falso Quandotrue, o componente permite que o conteúdo renderizado dentro de seu Shadow DOM (por exemplo, de renderizadores personalizados) herde estilos da raiz do documento. Isso fornece uma solução rápida para o estilo, mas não é recomendado para uso em produção.

    Essa propriedade pode ser útil se você preferir não lidar com o encapsulamento Shadow DOM ao aplicar CSS global a modelos renderizados personalizados. No entanto, ele vem com compensações:

    • ✅ Conveniência: permite que os estilos globais (do documento) afetem os renderizadores de mensagens personalizados.
    • ⚠️ Arriscado: quebra o encapsulamento e pode levar ao vazamento de estilo, onde o CSS global altera involuntariamente os visuais internos.
    • 🔒 Configuração única: Esta opção só pode ser definida na inicialização. Alterá-lo em tempo de execução não tem efeito.

    É altamente recomendável usar as abordagens de estilo padrão do Web Component antes de recorrer a esta propriedade:

    • Variáveis CSS e API ::p art – Prefira personalizar por meio de partes e variáveis expostas.
    • <link>elementos – Para folhas de estilo maiores, injete-as dentro do Shadow DOM.
    • Tags inline<style>– Para pequenas sobrescrições de estilo com mira.

    API Reference

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.