Pular para o conteúdo principal

ChatBubble

Base​

O ChatBubble funciona como um balão de mensagem, se posicionando de acordo com sua origem (enviada ou recebida), podendo conter, além do texto da mensagem, imagens, preview de links, cabeçalho e rodapé. É possível ainda indicar que houve erro no envio ou recebimento da mensagem, bem como exibir dados sobre a mensagem abaixo do balão.

Utilize o subcomponente ChatBubble.Header para indicar o nome do remetente ou incluir outros elementos úteis.

Texto​

O ChatBubble está preparado para receber diversos tipos de textos, sendo possível utilizar elementos como parágrafos, citações (<blockquote>), negrito (<strong> ou <b>), itálico (<em> ou <i>), tachado (<del> ou <s>) e trechos de código inline (<code>) ou em bloco (<samp>).

Com imagem​

Para inserir imagens no do ChatBubble, utilize o componente Image dentro do subcomponente ChatBubble.Media.

Informação

Ao inserir o componente Image no subcomponente ChatBubble.Media, você garante que a imagem seja exibida corretamente dentro do balão.

Com lista de ações​

Adicione o subcomponente ChatBubble.Footer para inserir uma lista de ações no ChatBubble, como botões, links de localização ou outros elementos úteis.

Feedback da mensagem​

Utilize o subcomponente ChatBubble.Feedback para adicionar informações úteis sobre a mensagem, como por exemplo a data e hora em que foi enviada, se foi recebida ou lida pelo destinatário, entre outras.

Mensagem enviada pelo operador do chat​

Por padrão, toda mensagem criada é tratada como mensagem recebida, porém é possível definir, utilizando a propriedade outbound, que a mensagem foi enviada pelo operador do chat.

Uma mensagem enviada pelo operador do chat pode se enquadrar em um dos seguintes estados:

Mensagem sendo enviada para o servidor​

Mensagem entregue no servidor, porém não ao destinatário​

Mensagem entregue ao destinatário​

Mensagem lida pelo destinatário​

Ações​

Utilize o subcomponente ChatBubble.ActionsDropdown para disponibilizar uma lista de ações para mensagem.

Atenção

O subcomponente ChatBubble.ActionsDropdown é um Dropdown convencional, de modo que pode receber várias das propriedades disponíveis para o Dropdown. Para saber quais são elas, verifique a API do componente.

Contudo, diferente do componente Dropdown, ele não requer o subcomponente Dropdown.Container como um de seus filhos.

Mensagem citada​

Para referenciar uma mensagem, utilize o componente ChatBubble contendo a mensagem citada dentro do ChatBubble que contém a mensagem principal.

Erro​

Utilize a propriedade error para indicar que houve algum tipo de erro que impediu que a mensagem fosse entregue ao destinatário com sucesso.

Internacionalização​

É possível atribuir valores customizados para os diferentes textos usados internamente pelo componente. São eles:

  • messageQuotedLabelText: Texto customizado para rotular a mensagem citada
  • messageNotSentLabelText: Texto customizado para rotular a mensagem que não foi enviada
  • messageSentLabelText: Texto customizado para rotular a mensagem enviada
  • messageReceivedLabelText: Texto customizado para rotular a mensagem recebida
  • actionsLabelText: Texto customizado para rotular o botão de ações

Nenhum desses textos é exibido, mas todos são úteis para questões de acessibilidade.

Atenção

Ao mudar o idioma padrão do componente (inglês), devem ser definidos novos valores para todas as propriedades citadas acima.

Para ajudar neste processo, constantes estão disponíveis com valores padrão para estas propriedades em inglês, português e espanhol. Para mais detalhes consulte a API do componente.

Abaixo um exemplo de uso destas constantes para o Português:

Feedback​

Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.