Skip to main content

ChatBubble

Base​

O ChatBubble funciona como um balão de mensagem, se posicionando de acordo com sua origem (enviada ou recebida) e sendo capaz de aplicar estilo de erro e aceitar feedback.

Utilize o subcomponente ChatBubble.Header para indicar o nome do remetente ou incluir 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 citar uma mensagem, utilize o componente ChatBubble contendo a mensagem citada, dentro do outro ChatBubble com a mensagem principal.

Erro​

Utilize a propriedade error para indicar que houve algum tipo de erro durante o envio da mensagem ou na operação.

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), deve 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​