> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Chat Message > One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from # Chat Message One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from **Chat Message** ```html chat-message.html theme={null} Chat Message ``` Copy npx hyperframes add chat-message to the clipboard That writes one file: `compositions/components/chat-message.html`. ## Paste it into your composition Open `compositions/components/chat-message.html` and copy what is inside into your own composition. A component has no size or duration of its own. It takes both from the composition you paste it into. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | - | - | - | - | | `type` | `sent` | `recv`, `sent`, `emoji`, `img`, `card` | Which message form arrives. | | `text` | `wait look 👀` | string | Bubble text, or the emoji row for the Emoji type. | | `cardTitle` | `HyperFrames — Write HTML, render pixel-perfect video` | string | Link-card title (Link card type only). | | `cardDomain` | `hyperframes.heygen.com` | string | Link-card domain line (Link card type only). | | `tail` | `on` | `on`, `off` | The bubble tail anchoring the message to its side. | | `delivered` | `on` | `on`, `off` | The receipt under a sent message. | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap theme={null}
``` Tagged `video-primitive` `chat` `mock-ui` `message`. Created by Miao Yang. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md) ## Related topics - [Make clips with HeyGen Video 1](/studio-app/video-clips.md) - [Chat Thread](/catalog/components/chat-thread.md) - [Message Thread Reveal](/catalog/blocks/message-thread-reveal.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.