Theme components overview
Each theme has a number of components. Some are top-level components, meaning that they are rendered directly by the TalkJS application at a certain location in the user interface. Others are subcomponents, which are rendered by a component in the theme.
Each of the top-level components also has access to a number of system components. These are components for which the markup and behavior is provided by the TalkJS application. The documentation page for each component lists the available system components.
| Name | Type | Description |
|---|---|---|
Avatar | Subcomponent | Renders a user's profile image. |
ChatHeader | Top-level component | A header rendered at the top of the chatbox (also in the inbox and popup widgets). |
ConversationImage | Subcomponent | Renders a visual representation of a conversation. |
ConversationListHeader | Top-level component | A header rendered at the top of the conversation list in the inbox |
ConversationListItem | Top-level component | This component is rendered for each conversation in the conversation list of the inbox. |
GroupChatImage | Subcomponent | Renders a visual representation of a group chat, showing the number of participants, and some participants' avatars. |
MessageBody | Subcomponent | A subcomponent used by UserMessage and SystemMessage to render the message's contents. |
MessageField | Top-level component | This component is rendered at the bottom of the chatbox (also in the inbox and popup widgets). It includes the text field where you can type messages, but also buttons for sending attachments, voice recordings, etc. |
NoChatsScreen | Top-level component | This component is rendered in certain situations when the user is not part of any conversations. |
RecordingPreview | Subcomponent | A component that includes a player to preview audio recordings |
ReplyBar | Subcomponent | A bar rendered at the top of the message field when the user is replying to a message. |
SystemMessage | Top-level component | This component is rendered for each system message in a conversation. |
TypingIndicator | Subcomponent | Used inside MessageBody to render inside a "fake" message that is shown when a user is typing. |
UserMessage | Top-level component | This component is rendered for each user message in a conversation. |
VoiceRecorder | Subcomponent | A component used by MessageField to render the interface for recording voice messages. |