Overview
Talkjs's pre-built chat UI is made up of many components, which you'll encounter when customizing a theme. Components can be either theme components or system components.
A theme component is defined by your theme. Theme components can be either rendered directly by the chat UI, for example the UserMessage component, which is rendered for every message in the conversation. Or they can be part of another theme component, for instance the Avatar theme component, which shows a user's avatar inside UserMessage, or wherever you'd like to show a user avatar.
| Component | Description |
|---|---|
| AudioBlock | Displays an audio attachment. If the audio attachment is a voice-recorded message, a VoiceBlock is used instead. |
| Avatar | Displays a user's profile picture or a conversation image. |
| ChatHeader | The top part of the chat panel. |
| CompactMessageContent | Displays a truncated version of the message's contents. Used by ConversationListItem, ReferencedMessage and ReplyBar. |
| ConversationImage | Displays an image associated with a conversation. |
| ConversationListItem | Displays an individual conversation in a conversation list. |
| FileBlock | Displays a file attachment without additional metadata. |
| GroupChatImage | A visual representation of a group chat. It shows the number of participants, and some of the participants' avatars. |
| Icon | Displays an icon. |
| ImageBlock | Displays an image attachment. |
| LocationBlock | Displays a geographic location on a map. |
| Message | Displays a single message in a conversation. |
| MessageActionMenu | A dropdown menu that allows a user to perform actions on a message, such as editing, deleting, replying to, or reacting with emojis. |
| MessageDivider | Displays a divider between messages sent on different dates, and between read and unread messages. |
| MessageField | Area at the bottom of the chat panel in which to write messages. |
| MessageListFooter | Area at the bottom of the message list. The message list footer can, for example, contain typing indicators to show when other users are typing. |
| ReferencedMessage | In reply messages, display the contents of the message that's replied to. |
| ReplyBar | Displayed by the MessageField when a user is writing a reply to a message. |
| TextBlock | Displays formatted text. |
| TimeAgo | Displays how much time has elapsed since a message was sent. |
| VideoBlock | Displays a video attachment. |
| VoiceBlock | Displays a voice recording attachment. |
A system component can be used inside theme components, but it isn't itself defined as part of a theme.
| Component | Description |
|---|---|
| AudioPlayer | Displays a waveform of the audio, as well as controls for playing or pausing and modifying the playback speed. |
| Editor | Displays a text input for formatted text. |
| EmojiPicker | Used to insert emojis into the message text field. |
| EmojiSuggestBar | Displays a small autocompletion bar of potential emojis when a user types out an emoji name. |
| MentionSuggestList | Displays a list of participants that can be mentioned in a chat. |
| MenuItem | Displays a single item in a menu. |
| MessageContent | Displays the content of a message. |
| PopoverButton | Displays a component as a popover when clicked. |
| ReactionPicker | Displays a picker for reacting to a message with emojis. |
| Text | Displays formatted text. |