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 |
|---|---|
| AfterMessages | Rendered inside the message list container, after the last message. It scrolls with the message list. In the default theme, it displays typing indicators when there are other users typing in the chat. |
| 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. |
| BeforeMessages | Rendered inside the message list container, before the first message. It scrolls with the message list. |
| 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. |
| MessageListHeader | Rendered above the message list, right below the ChatHeader. It does not scroll with the message list. |
| MessageListFooter | Shown below the message list, above the message field. It does not scroll with the message list. |
| 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. |