# MessageForwardedBundle
> A card under a message that holds one or more messages forwarded from another conversation, with their authors, times and attachments, folded when it runs long.
Source: https://raft-design.botiverse.build/components/message-forwarded-bundle. Generated from the current release; where it differs from what you remember, this page is right.
A card with the messages someone forwarded: a Forwarded header with the count and where they came from, then each message with its author, time, text and attachments. It is built on [MessageEmbed](https://raft-design.botiverse.build/components/message-embed.md) and sits in `MessageItemEmbedded`, under the body of the message that forwarded it ([MessageItem](https://raft-design.botiverse.build/components/message-item.md)). Long bundles fold on their own.
```tsx
import { useCallback, useState } from "react";
import {
MESSAGE_FIXTURE_AVATAR_SRC,
MESSAGE_EXAMPLE_HREFS,
} from "#/modules/message-item/message-item.fixtures.ts";
import {
Avatar,
AvatarFallback,
AvatarImage,
MessageItem,
MessageItemAvatarSlot,
MessageItemBody,
MessageItemContent,
MessageItemEmbedded,
MessageItemHeader,
MessageItemMeta,
MessageItemSender,
MessageItemTime,
} from "@botiverse/raft-ui";
import { Markdown } from "#/lib/markdown/markdown.tsx";
import { ChevronDown, ChevronUp, FileText, Forward } from "lucide-react";
import {
MessageForwardedBundle,
MessageForwardedBundleAttachment,
MessageForwardedBundleAttachmentMeta,
MessageForwardedBundleAttachmentName,
MessageForwardedBundleAttachments,
MessageForwardedBundleFooter,
MessageForwardedBundleGallery,
MessageForwardedBundleGalleryTile,
MessageForwardedBundleHeader,
MessageForwardedBundleHeaderContent,
MessageForwardedBundleHeaderCount,
MessageForwardedBundleHeaderLabel,
MessageForwardedBundleItem,
MessageForwardedBundleItemAuthor,
MessageForwardedBundleItemContent,
MessageForwardedBundleItemMeta,
MessageForwardedBundleItems,
MessageForwardedBundleSource,
MessageForwardedBundleFooterAction,
} from "@botiverse/raft-ui";
export type ForwardedBundleCompositionItem = {
id: string;
author: string;
createdAt: string;
createdAtDateTime?: string;
content: string;
attachment?: { name: string; meta: string };
images?: readonly string[];
};
const FORWARDED_FIXTURE_IMAGES = [
"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%3E%3Crect%20width='96'%20height='96'%20fill='%23dbeafe'/%3E%3Ccircle%20cx='48'%20cy='46'%20r='20'%20fill='%2360a5fa'/%3E%3C/svg%3E",
"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%3E%3Crect%20width='96'%20height='96'%20fill='%23dcfce7'/%3E%3Crect%20x='26'%20y='26'%20width='44'%20height='44'%20fill='%234ade80'/%3E%3C/svg%3E",
"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%3E%3Crect%20width='96'%20height='96'%20fill='%23fef3c7'/%3E%3Cpath%20d='M48%2028l20%2036H28z'%20fill='%23f59e0b'/%3E%3C/svg%3E",
"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%3E%3Crect%20width='96'%20height='96'%20fill='%23fce7f3'/%3E%3Ccircle%20cx='36'%20cy='40'%20r='14'%20fill='%23ec4899'/%3E%3Ccircle%20cx='62'%20cy='58'%20r='14'%20fill='%23f9a8d4'/%3E%3C/svg%3E",
];
export type ForwardedBundleEmbeddedCompositionProps = {
items?: readonly ForwardedBundleCompositionItem[];
sourceLabel?: string;
sourceHref?: string | null;
sourceAriaLabel?: string;
sourceTitle?: string;
collapsible?: boolean;
};
const DEFAULT_FORWARDED_ITEMS: readonly ForwardedBundleCompositionItem[] = [
{
id: "rollout",
author: "Ada",
createdAt: "Jul 15, 2:05 PM",
createdAtDateTime: "2026-07-15T06:05:00.000Z",
content: "Rollout is clear for the message reference migration.",
},
{
id: "attachment-context",
author: "Will",
createdAt: "Jul 15, 2:09 PM",
createdAtDateTime: "2026-07-15T06:09:00.000Z",
content: "Keep the source case with its attachment context.",
attachment: { name: "release-notes.md", meta: "markdown" },
},
{
id: "review-context",
author: "Mia",
createdAt: "Jul 15, 2:12 PM",
createdAtDateTime: "2026-07-15T06:12:00.000Z",
content: "Keep the original context available to reviewers.",
images: FORWARDED_FIXTURE_IMAGES,
},
{
id: "thread-contract",
author: "Nia",
createdAt: "Jul 15, 2:16 PM",
createdAtDateTime: "2026-07-15T06:16:00.000Z",
content: "Follow the same message state contract in the thread.",
},
];
function ForwardedBundleItemsContent({
items,
}: {
items: readonly ForwardedBundleCompositionItem[];
}) {
return (
<>
{items.map((item) => (
@{item.author}·{item.content}
{item.images?.length || item.attachment ? (
{item.images?.length ? (
{item.images.map((src, index) => (
))}
) : null}
{item.attachment ? (
{item.attachment.name}
· {item.attachment.meta}
) : null}
) : null}
))}
);
}
export function ForwardedBundleEmbeddedComposition({
items = DEFAULT_FORWARDED_ITEMS,
sourceLabel = "release-notes",
sourceHref = MESSAGE_EXAMPLE_HREFS.releaseNotesThread,
sourceAriaLabel = "Open source thread in release-notes",
sourceTitle = "Open source message",
collapsible = true,
}: ForwardedBundleEmbeddedCompositionProps = {}) {
const [expanded, setExpanded] = useState(false);
const handleToggleExpanded = useCallback(() => {
setExpanded((current) => !current);
}, []);
return (
Forwarded
{items.length} messages
: undefined}
>
from #{sourceLabel}
{collapsible ? (
{expanded ? : }
{expanded ? "Collapse" : `Show all ${items.length} messages`}
) : null}
);
}
```
## When to use
| Situation | Use |
| -------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| One or more messages passed on from another conversation | MessageForwardedBundle |
| A link to one message, shown as an excerpt | [MessageQuotedPreview](https://raft-design.botiverse.build/components/message-quoted-preview.md) |
| A link to a message or a channel, inline in the text | A reference chip ([MessageItem](https://raft-design.botiverse.build/components/message-item.md#in-the-body)) |
| A quote typed into the message | A Markdown blockquote ([MessageItem](https://raft-design.botiverse.build/components/message-item.md#in-the-body)) |
## Anatomy
- `MessageForwardedBundle`: the card. Required.
- `MessageForwardedBundleHeader`: the top row; it wraps on a narrow column. Required.
- `MessageForwardedBundleHeaderContent`, with `MessageForwardedBundleHeaderLabel` (an icon and Forwarded) and `MessageForwardedBundleHeaderCount` (in Space Mono, `foreground-hint`).
- The source, at the end of the row: `MessageForwardedBundleSource` when it can be opened, `MessageForwardedBundleSourceLabel` when it can't. Optional.
- `MessageForwardedBundleItems`: the list of messages, and the part that folds. Required.
- `MessageForwardedBundleItem`: one forwarded message. At least 1.
- `MessageForwardedBundleItemMeta`: `MessageForwardedBundleItemAuthor`, then the time in Space Mono.
- `MessageForwardedBundleItemContent`: the text. Required: the fold measures only this part.
- `MessageForwardedBundleAttachments`: `MessageForwardedBundleAttachment` chips (`MessageForwardedBundleAttachmentName`, `MessageForwardedBundleAttachmentMeta`), and `MessageForwardedBundleGallery` with a `MessageForwardedBundleGalleryTile` per image. Optional.
- `MessageForwardedBundleFooter` with `MessageForwardedBundleFooterAction`: the action that unfolds the list. Optional.
## Variants
| Variant | Use for |
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| A few short messages | The common case: shown in full, with no footer |
| Long content | Text beyond the fold limit: the list folds and the footer appears |
| Source that opens (`MessageForwardedBundleSource`) | A source the person can open, such as a public channel or a thread in one |
| Static source (`MessageForwardedBundleSourceLabel`) | A source that can't be opened, such as a preview in the composer or a message that no longer exists |
| `fullWidth` | A place where the card fills the column instead of keeping its maximum width |
```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@botiverse/raft-ui";
import {
MessageForwardedBundle,
MessageForwardedBundleHeader,
MessageForwardedBundleHeaderContent,
MessageForwardedBundleHeaderCount,
MessageForwardedBundleHeaderLabel,
MessageForwardedBundleItem,
MessageForwardedBundleItemAuthor,
MessageForwardedBundleItemContent,
MessageForwardedBundleItemMeta,
MessageForwardedBundleItems,
} from "@botiverse/raft-ui";
import { Markdown } from "#/lib/markdown/markdown.tsx";
import { MESSAGE_FIXTURE_AVATAR_SRC } from "#/modules/message-item/message-item.fixtures.ts";
import { Forward } from "lucide-react";
import {
MessageItem,
MessageItemAvatarSlot,
MessageItemBody,
MessageItemContent,
MessageItemEmbedded,
MessageItemHeader,
MessageItemMeta,
MessageItemSender,
MessageItemTime,
} from "@botiverse/raft-ui";
export function ForwardedBundleCompactComposition() {
return (
ATAtlasowner2:25 PMForwarded 2 messages
Forwarded
2 messages@AdaRollout is clear for the message reference migration.@WillKeep the source case with its attachment context.
);
}
```
```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@botiverse/raft-ui";
import {
MessageForwardedBundle,
MessageForwardedBundleAttachment,
MessageForwardedBundleAttachmentMeta,
MessageForwardedBundleAttachmentName,
MessageForwardedBundleAttachments,
MessageForwardedBundleFooter,
MessageForwardedBundleHeader,
MessageForwardedBundleHeaderContent,
MessageForwardedBundleHeaderCount,
MessageForwardedBundleHeaderLabel,
MessageForwardedBundleItem,
MessageForwardedBundleItemAuthor,
MessageForwardedBundleItemContent,
MessageForwardedBundleItemMeta,
MessageForwardedBundleItems,
MessageForwardedBundleFooterAction,
} from "@botiverse/raft-ui";
import { Markdown } from "#/lib/markdown/markdown.tsx";
import { MESSAGE_FIXTURE_AVATAR_SRC } from "#/modules/message-item/message-item.fixtures.ts";
import { ChevronDown, ChevronUp, FileText, Forward } from "lucide-react";
import {
MessageItem,
MessageItemAvatarSlot,
MessageItemBody,
MessageItemContent,
MessageItemEmbedded,
MessageItemHeader,
MessageItemMeta,
MessageItemSender,
MessageItemTime,
} from "@botiverse/raft-ui";
function LongForwardedItem() {
return (
@Nia{`Before we cut over, keep the read model running against both event streams and validate account, workspace, and channel permissions in staging.
The migration needs an explicit rollback checkpoint after the first production cohort, plus a documented handoff for reconciliation and replay.
Review the operational checklist with the owners of notifications, search, and thread state before scheduling the final rollout window.
Also decide the dual-write window up front: how long both writers stay live, who watches the divergence dashboard, and which metrics gate the next cohort.
Finally, write down what "done" means for the old path — read-only, disconnected, or deleted — and add a dated note to the runbook so the next person on call can find the decision.`}
migration-checklist.md
· markdown
webhook-cutover-plan.pdf
· pdf
);
}
export function ForwardedBundleLongContentComposition() {
return (
ATAtlasowner2:27 PMForwarded 1 message
Forwarded
message
Collapse
}
>
Show all 1 message
);
}
```
```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@botiverse/raft-ui";
import {
MessageForwardedBundle,
MessageForwardedBundleHeader,
MessageForwardedBundleHeaderContent,
MessageForwardedBundleHeaderCount,
MessageForwardedBundleHeaderLabel,
MessageForwardedBundleItem,
MessageForwardedBundleItemAuthor,
MessageForwardedBundleItemContent,
MessageForwardedBundleItemMeta,
MessageForwardedBundleItems,
MessageForwardedBundleSource,
} from "@botiverse/raft-ui";
import { Markdown } from "#/lib/markdown/markdown.tsx";
import {
MESSAGE_FIXTURE_AVATAR_SRC,
MESSAGE_EXAMPLE_HREFS,
} from "#/modules/message-item/message-item.fixtures.ts";
import { Forward } from "lucide-react";
import {
MessageItem,
MessageItemAvatarSlot,
MessageItemBody,
MessageItemContent,
MessageItemEmbedded,
MessageItemHeader,
MessageItemMeta,
MessageItemSender,
MessageItemTime,
} from "@botiverse/raft-ui";
export function ForwardedBundleThreadComposition() {
return (
ATAtlasowner2:26 PMForwarded 1 message
Forwarded
message
}
>
from #release-notes · thread
@MiaFollow the same message state contract in the thread.
);
}
```
```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@botiverse/raft-ui";
import {
MessageForwardedBundle,
MessageForwardedBundleHeader,
MessageForwardedBundleHeaderContent,
MessageForwardedBundleHeaderCount,
MessageForwardedBundleHeaderLabel,
MessageForwardedBundleItem,
MessageForwardedBundleItemAuthor,
MessageForwardedBundleItemContent,
MessageForwardedBundleItemMeta,
MessageForwardedBundleItems,
MessageForwardedBundleSourceLabel,
} from "@botiverse/raft-ui";
import { Markdown } from "#/lib/markdown/markdown.tsx";
import { MESSAGE_FIXTURE_AVATAR_SRC } from "#/modules/message-item/message-item.fixtures.ts";
import { Forward } from "lucide-react";
import {
MessageItem,
MessageItemAvatarSlot,
MessageItemBody,
MessageItemContent,
MessageItemEmbedded,
MessageItemHeader,
MessageItemMeta,
MessageItemSender,
MessageItemTime,
} from "@botiverse/raft-ui";
export function ForwardedBundleStaticSourceComposition() {
return (
ATAtlasowner2:28 PMForwarded 1 message
Forwarded
message
from #release-notes
@KaiThe original message is no longer available to open.
);
}
```
## Behavior
- The card is at most 544px wide, and narrower when the column is.
- By default the bundle folds itself: when the text of all items together runs past `foldLineLimit` lines (8), the list is cut at that height and fades out at the bottom into `layer-card`.
- The footer shows only while the list is folded. Its action unfolds the list and folds it again; `expandedContent` is its label while unfolded.
- The bundle measures again when content arrives or the width changes. Once the person has folded or unfolded it, it stays as they left it, unless the content no longer needs folding.
- Pass `collapsed` to `MessageForwardedBundleItems` to control the fold yourself, as a detail view that shows everything does. The footer then always renders, and you label it.
- To make the footer action open a detail view instead of unfolding, call `preventDefault` in its `onClick`.
- `MessageForwardedBundleGallery` lays images in rows of 3, and 4 images as 2 rows of 2, at the sizes of a message's own gallery ([MessageAttachment](https://raft-design.botiverse.build/components/message-attachment.md)).
## Content
- Label the header Forwarded, and give the count in Space Mono: "3 messages".
- Write the source as "from #launch-week", with "· thread" when it is a thread.
- Show a source only when the person may see it; leave it out for a direct message, a private channel or a missing source.
- Name each author by their display name, not a handle ([Writing](https://raft-design.botiverse.build/content/writing.md#voice)).
- Label the footer action with what it does, in Title Case: Show All 6 Messages, then Collapse.
- Give each attachment chip its file name and type: "release-notes.md · markdown".
- An attachment chip takes 5.5px before its icon and 6.5px after its text, 12px in all as before: a file icon is drawn 1.75px inside its box, so its ink and the last letter both sit about 7.2px from the edges ([Alignment](https://raft-design.botiverse.build/foundations/alignment.md#chips)).
## Accessibility
- The parts are plain elements built with Base UI `useRender`; each `MessageForwardedBundleItem` is an ``.
- `MessageForwardedBundleSource` is a `