组件 · 消息
MessageQuotedPreview
A two-line excerpt of the message a link points to, with its author, place and time, shown under the message that links to it.
也叫 Quoted message, Message preview, Permalink preview
import { MessageQuotedPreview } from "@botiverse/raft-ui";When a message links to another message, the quoted preview shows what that message says: its author, where it was posted, when, and the first 2 lines of its text. It sits in MessageItemEmbedded, under the body that holds the link (MessageItem), and opens the quoted message.
When to use
| Situation | Use |
|---|---|
| A message links to another message | MessageQuotedPreview, under the reference chip |
| Several messages passed on in full | MessageForwardedBundle |
| A link to a page outside Raft | A link card (MessageEmbed) |
| A quote typed into the message | A Markdown blockquote (MessageItem) |
| The replies to a message | MessageReplies |
Anatomy
MessageQuotedPreview: the preview: a 2pxline-seambar on the left, no fill,foreground-mutedtext. Required.MessageQuotedPreviewHeader: one line. Required.MessageQuotedPreviewAuthor: anxsAvatar,MessageQuotedPreviewAuthorNameand an optionalMessageQuotedPreviewAuthorMeta(a role).MessageQuotedPreviewAuthorDelegatedByfollows the name when an assistant sent the quoted message for its author: "(sent by Friday)". It is experimental, exported from@botiverse/raft-ui/wip.MessageQuotedPreviewChannel: where it was posted.MessageQuotedPreviewThread: a thread marker. Optional.MessageQuotedPreviewTimestamp: at the end of the line, in Space Mono.
MessageQuotedPreviewContent: required.MessageQuotedPreviewText: the excerpt, intext-callout, cut at 2 lines.MessageQuotedPreviewAttachmentswithMessageQuotedPreviewAttachmentchips. Optional.
MessageQuotedPreviewLoadingandMessageQuotedPreviewUnavailable: used in place of the preview while it loads, or when it can't be shown.
The bar is the same mark as a quote in a message (Shape).
Variants
| Variant | Use for |
|---|---|
| Channel message | A message in a channel, with MessageQuotedPreviewThread when it is a reply in a thread |
| Direct message | A message in a direct message, with the thread marker when it is a reply in a thread |
| Archived channel | A message in an archived channel: an Archived Badge after the channel name |
| With attachments | A message with files: a chip with the count stays visible under the 2 lines of text |
States
| State | Look |
|---|---|
| Loading | MessageQuotedPreviewLoading, pulsing, with a Skeleton of the header and 2 lines of text |
| Unavailable | MessageQuotedPreviewUnavailable: the bar and one line in foreground-hint that says why, when the message is deleted or the person can't see it |
Behavior
- The preview fills the width of the message column.
- Text past 2 lines is cut with an ellipsis; the attachment chips stay below it.
- "(sent by Friday)" never truncates; the author's name truncates instead. When the author and the label fill the line, as on a phone, the place and the time move to a second line: the words are what says the author didn't write it, so they can't be cut, and the face that says it in the timeline is too small to show on a 19px avatar (Identity and presence).
- Selecting the preview opens the quoted message.
Content
- Name a channel with its hash: "#launch-week".
- Name a direct message by the other person's display name, with
DirectMessageIconin place of the hash. - Label the thread marker Thread.
- Write the time in Space Mono, with the day: "Today · 8:24 AM", "May 4 · 3:16 PM".
- Give the number of attachments in the chip: "2 files".
- Say why the message can't be shown: "Message unavailable" (Feedback).
Accessibility
- The parts are plain elements built with Base UI
useRender;MessageQuotedPreviewis adiv. - When the preview opens the message, render it as an
<a>with anaria-labelthat names the message and where it is: "Open quoted message in #launch-week". It shows the focus ring on keyboard focus. - Give the author's avatar an empty
alt: the name beside it says who it is. - Give
MessageQuotedPreviewLoadingaria-busyand anaria-label, such as "Loading quoted message". - Don't render
MessageQuotedPreviewUnavailableas a link: there is nothing to open.
Rules
- Render only the parts the quoted message has data for: leave out the thread marker, the role and the attachments when there are none.
- Give the loading skeleton the shape of the preview, so nothing jumps when it loads (Feedback).
API
MessageQuotedPreview, MessageQuotedPreviewAttachments, MessageQuotedPreviewAttachment, MessageQuotedPreviewAuthor, MessageQuotedPreviewAuthorMeta, MessageQuotedPreviewAuthorName, MessageQuotedPreviewChannel, MessageQuotedPreviewContent, MessageQuotedPreviewHeader, MessageQuotedPreviewLoading, MessageQuotedPreviewText, MessageQuotedPreviewThread, MessageQuotedPreviewTimestamp, MessageQuotedPreviewUnavailable, MessageQuotedPreviewAuthorDelegatedBy
| Prop | 类型 | 默认值 |
|---|---|---|
| Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ReactElement | ((props, state) => ReactElement) |
Also takes the attributes of its element.
相关组件
改动
- 0.12.0 · AddedA message an assistant sent for its owner, from
@botiverse/raft-ui/wip:MessageItemDelegatedBy,MessageItemDelegatedByName,MessageItemDelegatedByButton,MessageItemDelegatedAvatar(withdeleted) andMessageQuotedPreviewAuthorDelegatedBy.