ChatBubble

UsageExamples
• Code

Import

import { ChatBubble } from '@resultadosdigitais/tangram-components'

Properties

children

Type	node

Description

Sets the children.

error

Type	bool

Description

Sets error state.

outbound

Type	bool

Description

If true, the chat bubble represents an outbound message, otherwise it represents an inbound message.

messageQuotedLabelText

Type	string
Default	ChatBubble.translations.en.messageQuoted

Description

Custom text for the label that identifies the quoted message. This text is not displayed on the screen.

Preset values for English, Brazilian Portuguese and Spanish are available in ChatBubble.translations.en.messageQuoted, ChatBubble.translations.ptBR.messageQuoted, and ChatBubble.translations.es.messageQuoted.

messageNotSentLabelText

Type	string
Default	ChatBubble.translations.en.messageNotSent

Description

Custom text for the label that identifies the message not sent. This text is not displayed on the screen.

Preset values for English, Brazilian Portuguese and Spanish are available in ChatBubble.translations.en.messageNotSent, ChatBubble.translations.ptBR.messageNotSent, and ChatBubble.translations.es.messageNotSent.

messageSentLabelText

Type	string
Default	ChatBubble.translations.en.messageSent

Description

Custom text for the label that identifies the sent message. This text is not displayed on the screen.

Preset values for English, Brazilian Portuguese and Spanish are available in ChatBubble.translations.en.messageSent, ChatBubble.translations.ptBR.messageSent, and ChatBubble.translations.es.messageSent.

messageReceivedLabelText

Type	string
Default	ChatBubble.translations.en.messageReceived

Description

Custom text for the label that identifies the received message. This text is not displayed on the screen.

Preset values for English, Brazilian Portuguese and Spanish are available in ChatBubble.translations.en.messageReceived, ChatBubble.translations.ptBR.messageReceived, and ChatBubble.translations.es.messageReceived.

actionsLabelText

Type	string
Default	ChatBubble.translations.en.actions

Description

Custom text for the label that identifies the actions icon button.

Preset values for English, Brazilian Portuguese and Spanish are available in ChatBubble.translations.en.actions, ChatBubble.translations.ptBR.actions, and ChatBubble.translations.es.actions.

<ChatBubbleActionsDropdown />

Import

import { ChatBubbleActionsDropdown } from '@resultadosdigitais/tangram-components'

Properties

children

Type	node

Description

Sets the children. There is no need to add Dropdown.Container subcomponent.

defaultOpen

Type	bool

Description

Responsible for controlling if Dropdown will be rendered opened or closed in the uncontrolled version.

open

Type	bool

Description

Controls whether Dropdown will be rendered opened in the controlled version.

position

Type	Enum of: Dropdown.positions.topStart Dropdown.positions.topEnd Dropdown.positions.rightStart Dropdown.positions.rightEnd Dropdown.positions.leftStart Dropdown.positions.leftEnd Dropdown.positions.bottomStart Dropdown.positions.bottomEnd

Description

Determines the position of Dropdown relative to the anchor element.

unfocused

Type	bool
Default	false

Description

Controls whether Dropdown will mount without focus.

keepMounted

Type	bool
Default	false

Description

Sets if the Dropdown will be always mounted after the first mount. It can be useful for SEO.

onClickOutside

Type	func
Param	event React.SyntheticEvent - The event source of the callback.

Description

Callback triggered when the Dropdown is open and outside of dropdown is clicked.

onEscape

Type	func
Param	event React.SyntheticEvent - The event source of the callback.

Description

Callback triggered when the Dropdown is opened and ESC key is pressed.

onKeyDown

Type	func
Param	event React.SyntheticEvent - The event source of the callback.

Description

Callback triggered when the Dropdown is focused and any key is pressed.

onToggle

Type	func
Param	event React.SyntheticEvent - The event source of the callback.
Param	open boolean - Dropdown open state.
Param	infos object - Additional information about component status. infos.reason string - The reason to toggle the Dropdown. Can be Dropdown.reasonsToToggle.escape, Dropdown.reasonsToToggle.clickOutside, Dropdown.reasonsToToggle.clickItem or Dropdown.reasonsToToggle.clickAnchor.

Description

Callback triggered when the Dropdown requests to be closed or opened.

<ChatBubbleFeedback />

Import

import { ChatBubbleFeedback } from '@resultadosdigitais/tangram-components'

Properties

children

Type	node

Description

Sets the children.

<ChatBubbleHeader />

Import

import { ChatBubbleHeader } from '@resultadosdigitais/tangram-components'

Properties

children

Type	node

Description

Sets the children.

Feedback