MessageQuotedPreview
Quoted message card composed inside a MessageItem body for thread and channel quotes.
import {
Avatar,
MessageQuotedPreview,
MessageQuotedPreviewAttachment,
MessageQuotedPreviewAttachments,
MessageQuotedPreviewAuthor,
MessageQuotedPreviewAuthorMeta,
MessageQuotedPreviewAuthorName,
MessageQuotedPreviewChannel,
MessageQuotedPreviewContent,
MessageQuotedPreviewHeader,
MessageQuotedPreviewLoading,
MessageQuotedPreviewText,
MessageQuotedPreviewThread,
MessageQuotedPreviewTimestamp,
MessageQuotedPreviewUnavailable,
Skeleton,
} from "raft-ui";
<MessageQuotedPreview>
<MessageQuotedPreviewHeader>
<MessageQuotedPreviewAuthor>
<Avatar size="xs" type="human" />
<MessageQuotedPreviewAuthorName />
<MessageQuotedPreviewAuthorMeta />
</MessageQuotedPreviewAuthor>
<MessageQuotedPreviewChannel />
<MessageQuotedPreviewThread />
<MessageQuotedPreviewTimestamp />
</MessageQuotedPreviewHeader>
<MessageQuotedPreviewContent>
<MessageQuotedPreviewText />
<MessageQuotedPreviewAttachments>
<MessageQuotedPreviewAttachment />
</MessageQuotedPreviewAttachments>
</MessageQuotedPreviewContent>
</MessageQuotedPreview>
<MessageQuotedPreviewLoading>
<Skeleton variant="line" />
</MessageQuotedPreviewLoading>
<MessageQuotedPreviewUnavailable />Use a hash-prefixed channel label for channel permalinks. RenderMessageQuotedPreviewThread only when the permalink includes a thread parent; attachment chips remain in the content region.
Pair the recipient name with DirectMessageIcon for DMs instead of the channel hash. Thread, author meta, and attachments are optional; render those parts only when the quoted target has that data. Use MessageQuotedPreviewLoading while resolving the target and MessageQuotedPreviewUnavailable when it is missing or inaccessible.
DM permalinks pair DirectMessageIcon with the recipient name. A DM can also target a thread reply, in which case render the same thread marker beside that label.
Quoted text clamps to two lines. Wrap attachment chips inMessageQuotedPreviewAttachments after MessageQuotedPreviewTextso files remain visible with a long excerpt.
Archive policy stays caller-owned. Compose the channel's archived label from an existing Badge alongside the channel and timestamp.
Use MessageQuotedPreviewLoading while resolving the target. Its skeleton structure remains caller-owned.
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Quoted message card root. Compose inside MessageItemEmbedded; use render for button/link shells. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Quoted excerpt region for text and optional attachment chips. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Header row for author identity, channel, optional thread, and trailing timestamp. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Header channel or direct-message label. The caller owns icon and label content. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Optional header thread marker. The caller owns its icon and label content. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Header timestamp aligned to the trailing edge. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Quoted text excerpt, visually clamped to two lines. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | One quoted attachment chip. The caller owns its filename or media label. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Wrapping attachment-chip region within the quoted content. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Loading-state container; compose it with Skeleton parts for the target context. |