Theme components overview
Talkjs's pre-built chat UI is made up of many components, which you'll encounter when customizing a theme. This page provides an overview of customizable theme components, as well as of globally available subcomponents, variables, and shared types.
Components can be either top-level components, which are rendered directly in the user interface, or they can be subcomponents that are rendered by another component in your theme.
Top-level components also have access to a number of system components, which are provided directly by TalkJS and aren't customizable. The documentation page for each component lists which system components are available to it.
| 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. |
| NoSearchResults | Top-level component | Displays in the conversation list when nothing matches the user's search query. |
| RecordingPreview | Subcomponent | A component that includes a player to preview audio recordings |
| ReferencedMessage | Subcomponent | In reply messages, display the contents of the message that's replied to. |
| ReplyBar | Subcomponent | A bar rendered at the top of the message field when the user is replying to a message. |
| SearchResultFooter | Top-level component | Displays a footer below search results in the conversation list. |
| SearchResultHeader | Top-level component | Displays a header above search results in the conversation list. |
| 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. |
You can use the following subcomponents anywhere inside your theme.
You can use the following variables anywhere inside your theme.
The following shared types are used in the props given to several components.