@candor-ui/react 1.0.0 → 1.1.0

package/dist/chat/context-meter.js

@@ -1,6 +1,17 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { useFormat, useStrings } from "../blocks/locale.js";
+/** ContextMeter's fixed words; override them under `contextMeter` in LocaleProvider's `strings`. */
+export const contextMeterStrings = {
+    /** A token count in thousands; `{n}` is already formatted. */
+    thousands: "{n}k",
+    label: "Context: {used} of {limit} tokens used",
+    context: "Context",
+    usage: "{used} / {limit} tokens",
+    nearlyFull: "Nearly full. Older thread turns will be summarised to make room.",
+};
 const kindColor = {
     system: "var(--chart-5)",
     instructions: "var(--chart-1)",
@@ -9,8 +20,11 @@ const kindColor = {
     tools: "var(--chart-3)",
     files: "var(--faint-foreground)",
 };
-function k(n) {
-    return n >= 1000 ? `${(n / 1000).toFixed(n >= 10_000 ? 0 : 1)}k` : String(n);
+function k(n, format, thousands) {
+    if (n < 1000)
+        return format(n, { useGrouping: false });
+    const digits = n >= 10_000 ? 0 : 1;
+    return thousands(format(n / 1000, { minimumFractionDigits: digits, maximumFractionDigits: digits, useGrouping: false }));
 }
 /**
  * What fills the model's context budget, as a ring in the composer that
@@ -18,13 +32,16 @@ function k(n) {
  * Counts are the service's own token counts; the ring warns past 80%.
  */
 function ContextMeter({ segments, limit, className, }) {
+    const t = useStrings("contextMeter", contextMeterStrings);
+    const fmt = useFormat();
+    const tokens = (n) => k(n, fmt.number, (v) => t("thousands", { n: v }));
     const used = segments.reduce((n, s) => n + s.tokens, 0);
     const pct = Math.min(1, used / limit);
     const warn = pct > 0.8;
     const r = 7;
     const c = 2 * Math.PI * r;
-    return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { "aria-label": `Context: ${k(used)} of ${k(limit)} tokens used`, className: cn("inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-2xs tabular-nums outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", warn ? "text-warning-text" : "text-muted-foreground", className), children: [_jsxs("svg", { viewBox: "0 0 18 18", className: "size-4 -rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: "var(--muted)", strokeWidth: "2.5" }), _jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: warn ? "var(--warning)" : "var(--primary)", strokeWidth: "2.5", strokeDasharray: `${pct * c} ${c}`, strokeLinecap: "round" })] }), Math.round(pct * 100), "%"] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-3", children: [_jsxs("p", { className: "flex items-baseline justify-between text-sm font-medium", children: ["Context ", _jsxs("span", { className: "text-xs font-normal text-muted-foreground tabular-nums", children: [k(used), " / ", k(limit), " tokens"] })] }), _jsx("div", { "aria-hidden": true, className: "mt-2 flex h-2 overflow-hidden rounded-full bg-muted", children: segments.map((s) => (_jsx("span", { style: { width: `${(s.tokens / limit) * 100}%`, background: kindColor[s.kind] } }, s.label))) }), _jsx("ul", { className: "mt-3 flex flex-col gap-1.5", children: [...segments]
+    return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { "aria-label": t("label", { used: tokens(used), limit: tokens(limit) }), className: cn("inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-2xs tabular-nums outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", warn ? "text-warning-text" : "text-muted-foreground", className), children: [_jsxs("svg", { viewBox: "0 0 18 18", className: "size-4 -rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: "var(--muted)", strokeWidth: "2.5" }), _jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: warn ? "var(--warning)" : "var(--primary)", strokeWidth: "2.5", strokeDasharray: `${pct * c} ${c}`, strokeLinecap: "round" })] }), fmt.number(Math.round(pct * 100) / 100, { style: "percent" })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-3", children: [_jsxs("p", { className: "flex items-baseline justify-between text-sm font-medium", children: [t("context"), " ", _jsx("span", { className: "text-xs font-normal text-muted-foreground tabular-nums", children: t("usage", { used: tokens(used), limit: tokens(limit) }) })] }), _jsx("div", { "aria-hidden": true, className: "mt-2 flex h-2 overflow-hidden rounded-full bg-muted", children: segments.map((s) => (_jsx("span", { style: { width: `${(s.tokens / limit) * 100}%`, background: kindColor[s.kind] } }, s.label))) }), _jsx("ul", { className: "mt-3 flex flex-col gap-1.5", children: [...segments]
                             .sort((a, b) => b.tokens - a.tokens)
-                            .map((s) => (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { "aria-hidden": true, className: "size-2 rounded-xs", style: { background: kindColor[s.kind] } }), _jsx("span", { className: "flex-1", children: s.label }), _jsx("span", { className: "text-muted-foreground tabular-nums", children: k(s.tokens) })] }, s.label))) }), warn && _jsx("p", { className: "mt-3 text-xs text-warning-text", children: "Nearly full. Older thread turns will be summarised to make room." })] })] }));
+                            .map((s) => (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { "aria-hidden": true, className: "size-2 rounded-xs", style: { background: kindColor[s.kind] } }), _jsx("span", { className: "flex-1", children: s.label }), _jsx("span", { className: "text-muted-foreground tabular-nums", children: tokens(s.tokens) })] }, s.label))) }), warn && _jsx("p", { className: "mt-3 text-xs text-warning-text", children: t("nearlyFull") })] })] }));
 }
 export { ContextMeter };

package/dist/chat/entity-chip.d.ts

@@ -1,6 +1,25 @@
 import * as React from "react";
 import { type LucideIcon } from "lucide-react";
 import type { EntityRef } from "../lib/chat.js";
+/** EntityChip's fixed words; override them under `entityChip` in LocaleProvider's `strings`. */
+export declare const entityChipStrings: {
+    record: string;
+    document: string;
+    file: string;
+    table: string;
+    field: string;
+    person: string;
+    link: string;
+    code: string;
+    workflow: string;
+    report: string;
+    dashboard: string;
+    /** An unregistered kind. */
+    item: string;
+    title: string;
+    titleIn: string;
+    remove: string;
+};
 export type EntityKindInfo = {
     Icon: LucideIcon;
     noun: string;

package/dist/chat/entity-chip.js

@@ -3,6 +3,30 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from "react";
 import { Box, Braces, ChartColumn, File, FileText, Gauge, Link, Table2, TextCursorInput, UserRound, Waypoints, } from "lucide-react";
 import { cn } from "../lib/utils.js";
+import { useStrings } from "../blocks/locale.js";
+/** EntityChip's fixed words; override them under `entityChip` in LocaleProvider's `strings`. */
+export const entityChipStrings = {
+    record: "Record",
+    document: "Document",
+    file: "File",
+    table: "Table",
+    field: "Field",
+    person: "Person",
+    link: "Link",
+    code: "Code",
+    workflow: "Workflow",
+    report: "Report",
+    dashboard: "Dashboard",
+    /** An unregistered kind. */
+    item: "Item",
+    title: "{noun}: {name}",
+    titleIn: "{noun}: {name} in {location}",
+    remove: "Remove {name}",
+};
+const baseKindNames = {
+    record: 1, document: 1, file: 1, table: 1, field: 1, person: 1, link: 1, code: 1, workflow: 1, report: 1, dashboard: 1,
+};
+const isBaseKind = (kind) => Object.hasOwn(baseKindNames, kind);
 /** Kinds most apps have. Add your own (or a preset) with EntityKindsProvider. */
 export const baseKinds = {
     record: { Icon: FileText, noun: "Record" },
@@ -32,7 +56,14 @@ function EntityKindsProvider({ kinds, children, }) {
 /** Look up a kind's icon and noun; unknown kinds read as "Item". */
 function useEntityKinds() {
     const kinds = React.useContext(KindsContext);
-    return React.useCallback((kind) => kinds[kind] ?? unknownKind, [kinds]);
+    const t = useStrings("entityChip", entityChipStrings);
+    return React.useCallback((kind) => {
+        const info = kinds[kind];
+        if (!info)
+            return { ...unknownKind, noun: t("item") };
+        // Built-in kinds take their noun from the strings table; an app's own kinds keep theirs.
+        return isBaseKind(kind) && info === baseKinds[kind] ? { ...info, noun: t(kind) } : info;
+    }, [kinds, t]);
 }
 /**
  * A thing in the user's system (a record, a table, a field, a workflow…) named
@@ -43,10 +74,13 @@ function useEntityKinds() {
  */
 function EntityChip({ entity, onOpen, onRemove, className, }) {
     const { Icon, noun } = useEntityKinds()(entity.kind);
+    const t = useStrings("entityChip", entityChipStrings);
     const shown = entity.label ?? entity.name;
-    const title = `${noun}: ${entity.name}${entity.location ? ` in ${entity.location}` : ""}`;
+    const title = entity.location
+        ? t("titleIn", { noun, name: entity.name, location: entity.location })
+        : t("title", { noun, name: entity.name });
     const body = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: shown }), _jsxs("span", { className: "sr-only", children: [" (", title, ")"] })] }));
     const base = "inline-flex max-w-full items-center gap-1 rounded-sm border bg-card px-1.5 py-px align-baseline font-mono text-[0.92em] leading-[1.35] text-foreground";
-    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer transition-colors duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": `Remove ${shown}`, onClick: () => onRemove(entity), className: "-ml-px rounded-r-sm border border-l-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
+    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer transition-colors duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: shown }), onClick: () => onRemove(entity), className: "-ms-px rounded-e-sm border border-s-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
 }
 export { EntityChip, EntityKindsProvider, useEntityKinds };

package/dist/chat/folded-turns.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+/** FoldedTurns' fixed words; override them under `foldedTurns` in LocaleProvider's `strings`. */
+export declare const foldedTurnsStrings: {
+    show: {
+        one: string;
+        other: string;
+    };
+    hide: {
+        one: string;
+        other: string;
+    };
+};
+/**
+ * A run of turns folded into one line, for long agent work a reader doesn't need to see step by step: "Drafted three
+ * versions and compared them". The line says how many turns are inside and opens them in place; `summary` is yours
+ * (a sentence, a count of tool calls, a cost). Folding never hides that the turns happened.
+ */
+declare function FoldedTurns({ count, summary, defaultOpen, open, onOpenChange, children, className, }: {
+    /** How many turns are inside, for the button ("Show 12 turns"). */
+    count: number;
+    /** What happened in them, shown on the folded line: text or your own small summary. */
+    summary?: React.ReactNode;
+    /** Start open. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when a person opens or closes it. */
+    onOpenChange?: (open: boolean) => void;
+    /** The turns, usually Messages. */
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export { FoldedTurns };

package/dist/chat/folded-turns.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { useStrings } from "../blocks/locale.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+/** FoldedTurns' fixed words; override them under `foldedTurns` in LocaleProvider's `strings`. */
+export const foldedTurnsStrings = {
+    show: { one: "Show {count} turn", other: "Show {count} turns" },
+    hide: { one: "Hide {count} turn", other: "Hide {count} turns" },
+};
+/**
+ * A run of turns folded into one line, for long agent work a reader doesn't need to see step by step: "Drafted three
+ * versions and compared them". The line says how many turns are inside and opens them in place; `summary` is yours
+ * (a sentence, a count of tool calls, a cost). Folding never hides that the turns happened.
+ */
+function FoldedTurns({ count, summary, defaultOpen = false, open, onOpenChange, children, className, }) {
+    const t = useStrings("foldedTurns", foldedTurnsStrings);
+    const [own, setOwn] = React.useState(defaultOpen);
+    const isOpen = open ?? own;
+    const set = (next) => {
+        if (open === undefined)
+            setOwn(next);
+        onOpenChange?.(next);
+    };
+    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: set, "data-slot": "folded-turns", className: cn("group/folded flex flex-col gap-7", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border border-dashed px-3 py-2 text-sm", children: [summary && _jsx("div", { className: "min-w-0 flex-1 text-muted-foreground", children: summary }), _jsxs(CollapsibleTrigger, { className: "ms-auto inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent-text outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 transition-transform duration-200 group-data-[state=open]/folded:[transform:rotate(90deg)]" }), t(isOpen ? "hide" : "show", { count })] })] }), _jsx(CollapsibleContent, { className: "flex flex-col gap-7", children: children })] }));
+}
+export { FoldedTurns };

package/dist/chat/message-actions.d.ts

@@ -1,4 +1,13 @@
 import * as React from "react";
+/** MessageActions' fixed words; override them under `messageActions` in LocaleProvider's `strings`. */
+export declare const messageActionsStrings: {
+    copy: string;
+    copied: string;
+    copyFailed: string;
+    retry: string;
+    good: string;
+    bad: string;
+};
 export type Rating = "up" | "down" | null;
 /**
  * Copy, retry and rate under an agent's reply. Each action appears only when

package/dist/chat/message-actions.js

@@ -5,6 +5,16 @@ import { Check, Copy, RotateCw, ThumbsDown, ThumbsUp, X } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { useCopy } from "../lib/use-copy.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { useStrings } from "../blocks/locale.js";
+/** MessageActions' fixed words; override them under `messageActions` in LocaleProvider's `strings`. */
+export const messageActionsStrings = {
+    copy: "Copy",
+    copied: "Copied",
+    copyFailed: "Couldn’t copy",
+    retry: "Retry",
+    good: "Good answer",
+    bad: "Bad answer",
+};
 function ActionButton({ label, onClick, pressed, children, }) {
     return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, "aria-pressed": pressed, onClick: onClick, className: "flex size-7 items-center justify-center rounded-md text-faint-foreground transition-colors duration-150 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 aria-pressed:text-accent-text [&_svg]:size-3.5", children: children }) }), _jsx(TooltipContent, { children: label })] }));
 }
@@ -15,6 +25,7 @@ function ActionButton({ label, onClick, pressed, children, }) {
  */
 function MessageActions({ text, onRetry, rating, onRate, meta, className, }) {
     const { state, copy } = useCopy();
-    return (_jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-0.5", className), children: [text !== undefined && (_jsx(ActionButton, { label: state === "copied" ? "Copied" : state === "failed" ? "Couldn’t copy" : "Copy", onClick: () => copy(text), children: state === "copied" ? _jsx(Check, { className: "text-success-text" }) : state === "failed" ? _jsx(X, { className: "text-destructive-text" }) : _jsx(Copy, {}) })), onRetry && (_jsx(ActionButton, { label: "Retry", onClick: onRetry, children: _jsx(RotateCw, {}) })), onRate && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: "Good answer", pressed: rating === "up", onClick: () => onRate(rating === "up" ? null : "up"), children: _jsx(ThumbsUp, { className: cn(rating === "up" && "fill-current") }) }), _jsx(ActionButton, { label: "Bad answer", pressed: rating === "down", onClick: () => onRate(rating === "down" ? null : "down"), children: _jsx(ThumbsDown, { className: cn(rating === "down" && "fill-current") }) })] })), meta && _jsx("span", { className: "ml-1.5 truncate text-xs text-faint-foreground", children: meta })] }));
+    const t = useStrings("messageActions", messageActionsStrings);
+    return (_jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-0.5", className), children: [text !== undefined && (_jsx(ActionButton, { label: state === "copied" ? t("copied") : state === "failed" ? t("copyFailed") : t("copy"), onClick: () => copy(text), children: state === "copied" ? _jsx(Check, { className: "text-success-text" }) : state === "failed" ? _jsx(X, { className: "text-destructive-text" }) : _jsx(Copy, {}) })), onRetry && (_jsx(ActionButton, { label: t("retry"), onClick: onRetry, children: _jsx(RotateCw, {}) })), onRate && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: t("good"), pressed: rating === "up", onClick: () => onRate(rating === "up" ? null : "up"), children: _jsx(ThumbsUp, { className: cn(rating === "up" && "fill-current") }) }), _jsx(ActionButton, { label: t("bad"), pressed: rating === "down", onClick: () => onRate(rating === "down" ? null : "down"), children: _jsx(ThumbsDown, { className: cn(rating === "down" && "fill-current") }) })] })), meta && _jsx("span", { className: "ms-1.5 truncate text-xs text-faint-foreground", children: meta })] }));
 }
 export { MessageActions };

package/dist/chat/message-content.d.ts

@@ -1,5 +1,12 @@
 import * as React from "react";
-import type { EntityRef, InlineNode, MessageBlock, MessageSource } from "../lib/chat.js";
+import type { Attachment, EntityRef, InlineNode, MessageBlock, MessageSource } from "../lib/chat.js";
+/** MessageContent's fixed words; override them under `messageContent` in LocaleProvider's `strings`. */
+export declare const messageContentStrings: {
+    measured: string;
+    measuredFrom: string;
+    notVerified: string;
+    provisional: string;
+};
 /**
  * Inline nodes. Every string here may come from a model or the user's system, so it is
  * only ever rendered as a React text child: no markdown parsing, no HTML.
@@ -9,8 +16,8 @@ declare function Inline({ nodes, }: {
     nodes: InlineNode[];
 }): React.JSX.Element;
 /** A message's blocks, in order. */
-declare function MessageContent({ blocks, sources, onOpenEntity, onNavigate, className, }: {
-    /** The reply as typed blocks: paragraphs, lists, payloads, tool calls, cards. */
+declare function MessageContent({ blocks, sources, onOpenEntity, onNavigate, onOpenAttachment, className, }: {
+    /** The reply as typed blocks: paragraphs, lists, payloads, tool calls, cards, attachments. */
     blocks: MessageBlock[];
     /** Sources the blocks cite by marker. */
     sources?: MessageSource[];
@@ -18,6 +25,8 @@ declare function MessageContent({ blocks, sources, onOpenEntity, onNavigate, cla
     onOpenEntity?: (entity: EntityRef) => void;
     /** Follows in-app links; links from a model are never rendered. */
     onNavigate?: (to: string) => void;
+    /** Makes attachment tiles buttons that open their file. */
+    onOpenAttachment?: (attachment: Attachment) => void;
     className?: string;
 }): React.JSX.Element;
 /** Plain text of a message, for copy. Citations become [n]; entities their API name. */

package/dist/chat/message-content.js

@@ -9,7 +9,16 @@ import { Citation } from "./citation.js";
 import { EntityChip } from "./entity-chip.js";
 import { Card } from "./card-registry.js";
 import { Payload } from "./payload.js";
+import { AttachmentList } from "./attachment-preview.js";
 import { ToolCallGroup } from "./tool-call.js";
+import { useStrings } from "../blocks/locale.js";
+/** MessageContent's fixed words; override them under `messageContent` in LocaleProvider's `strings`. */
+export const messageContentStrings = {
+    measured: "From the {environment}",
+    measuredFrom: "From the {environment}: {source}",
+    notVerified: " (not verified)",
+    provisional: "The agent hasn’t verified this against the {environment}.",
+};
 const ContentContext = React.createContext({ sources: new Map() });
 /**
  * Inline nodes. Every string here may come from a model or the user's system, so it is
@@ -17,6 +26,7 @@ const ContentContext = React.createContext({ sources: new Map() });
  */
 function Inline({ nodes, }) {
     const terms = useTerms();
+    const t = useStrings("messageContent", messageContentStrings);
     const ctx = React.useContext(ContentContext);
     return (_jsx(_Fragment, { children: nodes.map((n, i) => {
             switch (n.kind) {
@@ -28,10 +38,11 @@ function Inline({ nodes, }) {
                     return _jsx("em", { children: n.text }, i);
                 case "code":
                     return (_jsx("code", { className: "rounded-xs bg-muted px-1 py-px font-mono text-[0.88em]", children: n.text }, i));
+                case "measured":
                 case "orgData":
-                    return (_jsx("span", { title: n.source ? `From the ${terms.environment}: ${n.source}` : `From the ${terms.environment}`, className: "font-medium tabular-nums text-foreground", children: n.text }, i));
+                    return (_jsx("span", { title: n.source ? t("measuredFrom", { environment: terms.environment, source: n.source }) : t("measured", { environment: terms.environment }), className: "font-medium tabular-nums text-foreground", children: n.text }, i));
                 case "provisional":
-                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-provisional": true, className: "inline rounded-xs text-left text-provisional underline decoration-provisional/50 decoration-dotted underline-offset-[3px] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Inline, { nodes: n.nodes }), _jsx("span", { className: "sr-only", children: " (not verified)" })] }) }), _jsx(TooltipContent, { children: n.reason ?? `The agent hasn’t verified this against the ${terms.environment}.` })] }, i));
+                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-provisional": true, className: "inline rounded-xs text-start text-provisional underline decoration-provisional/50 decoration-dotted underline-offset-[3px] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Inline, { nodes: n.nodes }), _jsx("span", { className: "sr-only", children: t("notVerified") })] }) }), _jsx(TooltipContent, { children: n.reason ?? t("provisional", { environment: terms.environment }) })] }, i));
                 case "citation":
                     return _jsx(Citation, { source: ctx.sources.get(n.sourceId) }, i);
                 case "entity":
@@ -46,13 +57,26 @@ function Inline({ nodes, }) {
             }
         }) }));
 }
+function AttachmentBlock({ files }) {
+    const ctx = React.useContext(ContentContext);
+    return _jsx(AttachmentList, { attachments: files, onOpen: ctx.onOpenAttachment });
+}
 function Block({ block, }) {
     switch (block.kind) {
         case "paragraph":
             return (_jsx("p", { children: _jsx(Inline, { nodes: block.nodes }) }));
+        case "plain":
+            return _jsx("p", { className: "whitespace-pre-wrap break-words", children: block.text });
+        case "heading": {
+            // Levels are relative to the message: the thread page owns h1 and h2.
+            // Blocks can arrive as JSON, so an out-of-range level is clamped rather than trusted.
+            const level = Math.min(Math.max(Math.round(block.level) || 1, 1), 3);
+            const H = ["h3", "h4", "h5"][level - 1];
+            return (_jsx(H, { className: cn("font-semibold tracking-tight text-foreground", level === 1 ? "mt-1 text-lg" : level === 2 ? "mt-1 text-base" : "text-sm"), children: _jsx(Inline, { nodes: block.nodes }) }));
+        }
         case "list": {
             const List = block.ordered ? "ol" : "ul";
-            return (_jsx(List, { className: cn("flex flex-col gap-1 pl-5", block.ordered ? "list-decimal" : "list-disc marker:text-faint-foreground"), children: block.items.map((item, i) => (_jsx("li", { className: "pl-0.5", children: _jsx(Inline, { nodes: item }) }, i))) }));
+            return (_jsx(List, { className: cn("flex flex-col gap-1 ps-5", block.ordered ? "list-decimal" : "list-disc marker:text-faint-foreground"), children: block.items.map((item, i) => (_jsx("li", { className: "ps-0.5", children: _jsx(Inline, { nodes: item }) }, i))) }));
         }
         case "payload":
             return _jsx(Payload, { language: block.language, text: block.text, title: block.title });
@@ -62,12 +86,14 @@ function Block({ block, }) {
             return _jsx(DegradedPanel, { reason: block.reason, missing: block.missing });
         case "card":
             return _jsx(Card, { name: block.card, props: block.props, summary: block.summary });
+        case "attachments":
+            return _jsx(AttachmentBlock, { files: block.files });
     }
 }
 /** A message's blocks, in order. */
-function MessageContent({ blocks, sources = [], onOpenEntity, onNavigate, className, }) {
-    const ctx = React.useMemo(() => ({ sources: new Map(sources.map((s) => [s.id, s])), onOpenEntity, onNavigate }), [sources, onOpenEntity, onNavigate]);
-    return (_jsx(ContentContext.Provider, { value: ctx, children: _jsx("div", { "data-slot": "message-content", className: cn("flex flex-col gap-3 text-base leading-relaxed", className), children: blocks.map((b, i) => (_jsx(Block, { block: b }, i))) }) }));
+function MessageContent({ blocks, sources = [], onOpenEntity, onNavigate, onOpenAttachment, className, }) {
+    const ctx = React.useMemo(() => ({ sources: new Map(sources.map((s) => [s.id, s])), onOpenEntity, onNavigate, onOpenAttachment }), [sources, onOpenEntity, onNavigate, onOpenAttachment]);
+    return (_jsx(ContentContext.Provider, { value: ctx, children: _jsx("div", { "data-slot": "message-content", className: cn("flex flex-col gap-3 text-prose leading-relaxed", className), children: blocks.map((b, i) => (_jsx(Block, { block: b }, i))) }) }));
 }
 /** Plain text of a message, for copy. Citations become [n]; entities their API name. */
 export function blocksToText(blocks, sources = []) {
@@ -90,7 +116,10 @@ export function blocksToText(blocks, sources = []) {
         .map((b) => {
         switch (b.kind) {
             case "paragraph":
+            case "heading":
                 return inline(b.nodes);
+            case "plain":
+                return b.text;
             case "list":
                 return b.items.map((it, i) => `${b.ordered ? `${i + 1}.` : "-"} ${inline(it)}`).join("\n");
             case "payload":
@@ -99,6 +128,8 @@ export function blocksToText(blocks, sources = []) {
                 return b.reason;
             case "card":
                 return b.summary;
+            case "attachments":
+                return b.files.map((f) => f.name).join("\n");
             case "tools":
                 return "";
         }

package/dist/chat/message.d.ts

@@ -1,5 +1,18 @@
-import type { EntityRef, Message as MessageData } from "../lib/chat.js";
+import type * as React from "react";
+import type { Attachment, EntityRef, Message as MessageData } from "../lib/chat.js";
 import { type Rating } from "./message-actions.js";
+/** Message's fixed words; override them under `message` in LocaleProvider's `strings`. */
+export declare const messageStrings: {
+    you: string;
+    personLabel: string;
+    agentLabel: string;
+    interrupted: string;
+    continue: string;
+    failed: string;
+    failedMissing: string;
+    checkedBy: string;
+    editedBy: string;
+};
 /**
  * One message in a thread.
  *
@@ -13,13 +26,15 @@ import { type Rating } from "./message-actions.js";
  * - A reply a person checked (or edited) before it went out can say so in a
  *   caption under it, so a reader knows a person stood behind it.
  */
-declare function Message({ message, onOpenEntity, onNavigate, onRetry, onContinue, rating, onRate, reviewedBy, className, }: {
+declare function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }: {
     /** The message: author, status, blocks, and optional reasoning, sources and attribution. */
     message: MessageData;
     /** Makes entity chips open their thing. */
     onOpenEntity?: (entity: EntityRef) => void;
     /** Follows in-app links. */
     onNavigate?: (to: string) => void;
+    /** Makes attachment tiles buttons that open their file. */
+    onOpenAttachment?: (attachment: Attachment) => void;
     /** Shows Retry on a failed or finished reply. */
     onRetry?: () => void;
     /** Shows Continue on an interrupted reply. */
@@ -34,6 +49,68 @@ declare function Message({ message, onOpenEntity, onNavigate, onRetry, onContinu
         at?: string;
         edited?: boolean;
     };
+    /**
+     * The row under an agent reply (copy, retry, rating). `false` hides it; a node replaces it, e.g. your own buttons.
+     * Model and cost still show, on their own line. To rebuild a message, use MessageHeader, MessageBody and
+     * MessageFooter.
+     */
+    actions?: false | React.ReactNode;
     className?: string;
-}): import("react").JSX.Element;
-export { Message };
+}): React.JSX.Element;
+/** The row above a reply: who sent it, a detail (their specialty or team), and when. */
+declare function MessageHeader({ name, detail, createdAt, children, className, }: {
+    /** The sender's displayed name. */
+    name: string;
+    /** A quieter detail after the name: an agent's specialty, a person's team. */
+    detail?: string;
+    /** When it was sent; shown as a relative time. */
+    createdAt?: string;
+    /** Anything else for the row, after the time (a badge, a menu). */
+    children?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** A reply's content: its reasoning, then its blocks, with a caret after the last one while it streams. */
+declare function MessageBody({ message, onOpenEntity, onNavigate, onOpenAttachment, className, }: {
+    /** The message whose reasoning and blocks to show. */
+    message: MessageData;
+    /** Makes entity chips open their thing. */
+    onOpenEntity?: (entity: EntityRef) => void;
+    /** Follows in-app links. */
+    onNavigate?: (to: string) => void;
+    /** Makes attachment tiles buttons that open their file. */
+    onOpenAttachment?: (attachment: Attachment) => void;
+    className?: string;
+}): React.JSX.Element;
+/** Model and cost, on a line of their own: what the actions row shows, for when it's hidden or replaced. */
+declare function MessageAttribution({ attribution, className, }: {
+    /** The service's measured values; nothing shows when both are absent. */
+    attribution?: MessageData["attribution"];
+    className?: string;
+}): React.JSX.Element | null;
+/**
+ * What sits under a reply: that it stopped or failed, its sources, who checked it, then the actions row with model
+ * and cost. `actions={false}` hides the row and a node replaces it; either way the model and cost stay, on their own
+ * line, because a reader should always see what produced the answer.
+ */
+declare function MessageFooter({ message, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }: {
+    /** The message the footer belongs to. */
+    message: MessageData;
+    /** Shows Retry on a failed or finished reply. */
+    onRetry?: () => void;
+    /** Shows Continue on an interrupted reply. */
+    onContinue?: () => void;
+    /** The current rating. */
+    rating?: Rating;
+    /** Shows thumbs up and down. */
+    onRate?: (rating: Rating) => void;
+    /** A person who checked the reply before it was sent. */
+    reviewedBy?: {
+        name: string;
+        at?: string;
+        edited?: boolean;
+    };
+    /** `false` hides the actions row, a node replaces it; model and cost still show. */
+    actions?: false | React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export { Message, MessageHeader, MessageBody, MessageFooter, MessageAttribution };

package/dist/chat/message.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CircleStop, Info, UserCheck, UserRound } from "lucide-react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleStop, UserCheck, UserRound } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { DegradedPanel } from "../blocks/degraded-panel.js";
 import { RelativeTime } from "../blocks/relative-time.js";
@@ -9,6 +9,20 @@ import { SourceList } from "./citation.js";
 import { blocksToText, MessageContent } from "./message-content.js";
 import { MessageActions } from "./message-actions.js";
 import { Reasoning } from "./reasoning.js";
+import { ThreadEvent } from "./thread-event.js";
+import { useStrings } from "../blocks/locale.js";
+/** Message's fixed words; override them under `message` in LocaleProvider's `strings`. */
+export const messageStrings = {
+    you: "You",
+    personLabel: "{name}, {team}",
+    agentLabel: "{name}, {noun} agent",
+    interrupted: "Stopped before it finished. What arrived is kept.",
+    continue: "Continue",
+    failed: "The agent couldn’t finish this reply.",
+    failedMissing: "The rest of the answer",
+    checkedBy: "Checked by {name} before sending",
+    editedBy: "Edited by {name} before sending",
+};
 /**
  * One message in a thread.
  *
@@ -22,23 +36,50 @@ import { Reasoning } from "./reasoning.js";
  * - A reply a person checked (or edited) before it went out can say so in a
  *   caption under it, so a reader knows a person stood behind it.
  */
-function Message({ message, onOpenEntity, onNavigate, onRetry, onContinue, rating, onRate, reviewedBy, className, }) {
+function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }) {
     const { author } = message;
     const roleOf = useAgentRoles();
+    const t = useStrings("message", messageStrings);
     if (author.role === "system") {
-        return (_jsxs("div", { "data-slot": "message", "data-role": "system", className: cn("flex items-center justify-center gap-1.5 py-1 text-xs text-faint-foreground", className), children: [_jsx(Info, { "aria-hidden": true, className: "size-3" }), _jsx(MessageContent, { blocks: message.blocks, className: "text-xs leading-normal" })] }));
+        return (_jsx(ThreadEvent, { "data-slot": "message", "data-role": "system", className: className, children: _jsx(MessageContent, { blocks: message.blocks, className: "text-xs leading-normal" }) }));
     }
     if (author.role === "user") {
-        return (_jsx("div", { "data-slot": "message", "data-role": "user", className: cn("flex justify-end pl-10 sm:pl-24 animate-rise-in", className), children: _jsxs("div", { className: "flex max-w-full flex-col items-end gap-1", children: [_jsx("div", { className: "rounded-xl rounded-br-sm bg-surface-user px-3.5 py-2.5", children: _jsx(MessageContent, { blocks: message.blocks, onOpenEntity: onOpenEntity, onNavigate: onNavigate, className: "gap-2" }) }), _jsxs("span", { className: "px-1 text-2xs text-faint-foreground", children: [author.name ?? "You", message.createdAt && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: message.createdAt })] }))] })] }) }));
+        return (_jsx("div", { "data-slot": "message", "data-role": "user", className: cn("flex justify-end ps-10 sm:ps-24 animate-rise-in", className), children: _jsxs("div", { className: "flex max-w-full flex-col items-end gap-1", children: [_jsx("div", { className: "rounded-xl rounded-ee-sm bg-surface-user px-3.5 py-2.5", children: _jsx(MessageContent, { blocks: message.blocks, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, className: "gap-2" }) }), _jsxs("span", { className: "px-1 text-2xs text-faint-foreground", children: [author.name ?? t("you"), message.createdAt && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: message.createdAt })] }))] })] }) }));
     }
     if (author.role === "person") {
-        return (_jsxs("article", { "data-slot": "message", "data-role": "person", "aria-label": author.team ? `${author.name}, ${author.team}` : author.name, className: cn("flex gap-3 animate-rise-in", className), children: [_jsx("span", { "aria-hidden": true, className: "mt-px flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(UserRound, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("header", { className: "flex h-7 items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold", children: author.name }), author.team && _jsx("span", { className: "truncate text-xs text-muted-foreground", children: author.team }), message.createdAt && (_jsx("span", { className: "text-xs text-faint-foreground", children: _jsx(RelativeTime, { date: message.createdAt }) }))] }), _jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, className: "mt-1" })] })] }));
+        return (_jsxs("article", { "data-slot": "message", "data-role": "person", "aria-label": author.team ? t("personLabel", { name: author.name, team: author.team }) : author.name, className: cn("flex gap-3 animate-rise-in", className), children: [_jsx("span", { "aria-hidden": true, className: "mt-px flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(UserRound, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(MessageHeader, { name: author.name, detail: author.team, createdAt: message.createdAt }), _jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, className: "mt-1" })] })] }));
     }
     const { agent } = author;
+    const streaming = message.status === "streaming";
+    return (_jsxs("article", { "data-slot": "message", "data-role": "agent", "data-status": message.status, "aria-busy": streaming, "aria-label": t("agentLabel", { name: agent.name, noun: roleOf(agent.role).noun }), className: cn("group/message flex gap-3 animate-rise-in", className), children: [_jsx(AgentAvatar, { agent: agent, className: "mt-px" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(MessageHeader, { name: agent.name, detail: agent.specialty, createdAt: message.createdAt }), _jsxs("div", { className: "mt-1 flex flex-col gap-3", children: [_jsx(MessageBody, { message: message, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment }), _jsx(MessageFooter, { message: message, onRetry: onRetry, onContinue: onContinue, rating: rating, onRate: onRate, reviewedBy: reviewedBy, actions: actions })] })] })] }));
+}
+/** The row above a reply: who sent it, a detail (their specialty or team), and when. */
+function MessageHeader({ name, detail, createdAt, children, className, }) {
+    return (_jsxs("header", { "data-slot": "message-header", className: cn("flex h-7 items-center gap-2", className), children: [_jsx("span", { className: "text-sm font-semibold", children: name }), detail && _jsx("span", { className: "truncate text-xs text-muted-foreground", children: detail }), createdAt && (_jsx("span", { className: "text-xs text-faint-foreground", children: _jsx(RelativeTime, { date: createdAt }) })), children] }));
+}
+/** A reply's content: its reasoning, then its blocks, with a caret after the last one while it streams. */
+function MessageBody({ message, onOpenEntity, onNavigate, onOpenAttachment, className, }) {
     const streaming = message.status === "streaming";
     const thinking = streaming && message.blocks.length === 0;
-    const text = blocksToText(message.blocks, message.sources);
+    return (_jsxs("div", { "data-slot": "message-body", className: cn("flex flex-col gap-3", className), children: [message.reasoning && message.reasoning.length > 0 && _jsx(Reasoning, { entries: message.reasoning, thinking: thinking, thoughtFor: message.thoughtFor }), message.blocks.length > 0 && (_jsxs("div", { className: "relative", children: [_jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment }), streaming && _jsx("span", { "aria-hidden": true, className: "ms-0.5 inline-block h-[1.05em] w-[2px] translate-y-[0.18em] rounded-full bg-primary animate-caret" })] }))] }));
+}
+/** Model and cost, on a line of their own: what the actions row shows, for when it's hidden or replaced. */
+function MessageAttribution({ attribution, className, }) {
+    const meta = [attribution?.model, attribution?.cost].filter(Boolean).join(" · ");
+    if (!meta)
+        return null;
+    return (_jsx("p", { "data-slot": "message-attribution", className: cn("text-xs text-faint-foreground", className), children: meta }));
+}
+/**
+ * What sits under a reply: that it stopped or failed, its sources, who checked it, then the actions row with model
+ * and cost. `actions={false}` hides the row and a node replaces it; either way the model and cost stay, on their own
+ * line, because a reader should always see what produced the answer.
+ */
+function MessageFooter({ message, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }) {
+    const t = useStrings("message", messageStrings);
+    const streaming = message.status === "streaming";
+    const settled = !streaming && message.status !== "failed";
     const meta = [message.attribution?.model, message.attribution?.cost].filter(Boolean).join(" · ");
-    return (_jsxs("article", { "data-slot": "message", "data-role": "agent", "data-status": message.status, "aria-busy": streaming, "aria-label": `${agent.name}, ${roleOf(agent.role).noun} agent`, className: cn("group/message flex gap-3 animate-rise-in", className), children: [_jsx(AgentAvatar, { agent: agent, className: "mt-px" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("header", { className: "flex h-7 items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold", children: agent.name }), agent.specialty && _jsx("span", { className: "truncate text-xs text-muted-foreground", children: agent.specialty }), message.createdAt && (_jsx("span", { className: "text-xs text-faint-foreground", children: _jsx(RelativeTime, { date: message.createdAt }) }))] }), _jsxs("div", { className: "mt-1 flex flex-col gap-3", children: [message.reasoning && message.reasoning.length > 0 && (_jsx(Reasoning, { entries: message.reasoning, thinking: thinking, thoughtFor: message.thoughtFor })), message.blocks.length > 0 && (_jsxs("div", { className: "relative", children: [_jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate }), streaming && (_jsx("span", { "aria-hidden": true, className: "ml-0.5 inline-block h-[1.05em] w-[2px] translate-y-[0.18em] rounded-full bg-primary animate-caret" }))] })), message.status === "interrupted" && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [_jsx(CircleStop, { "aria-hidden": true, className: "size-3.5" }), "Stopped before it finished. What arrived is kept.", onContinue && (_jsx("button", { type: "button", onClick: onContinue, className: "font-medium text-accent-text hover:underline", children: "Continue" }))] })), message.status === "failed" && (_jsx(DegradedPanel, { reason: "The agent couldn\u2019t finish this reply.", missing: "The rest of the answer", onRetry: onRetry })), !streaming && message.sources && message.sources.length > 0 && _jsx(SourceList, { sources: message.sources }), reviewedBy && (_jsxs("p", { "data-slot": "message-reviewed", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(UserCheck, { "aria-hidden": true, className: "size-3.5" }), reviewedBy.edited ? "Edited" : "Checked", " by ", reviewedBy.name, " before sending", reviewedBy.at && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: reviewedBy.at })] }))] })), !streaming && message.status !== "failed" && (_jsx(MessageActions, { text: text, onRetry: onRetry, rating: rating, onRate: onRate, meta: meta || undefined, className: "-ml-1.5 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:opacity-100" }))] })] })] }));
+    return (_jsxs("div", { "data-slot": "message-footer", className: cn("flex flex-col gap-3 empty:hidden", className), children: [message.status === "interrupted" && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [_jsx(CircleStop, { "aria-hidden": true, className: "size-3.5" }), t("interrupted"), onContinue && (_jsx("button", { type: "button", onClick: onContinue, className: "font-medium text-accent-text hover:underline", children: t("continue") }))] })), message.status === "failed" && _jsx(DegradedPanel, { reason: t("failed"), missing: t("failedMissing"), onRetry: onRetry }), !streaming && message.sources && message.sources.length > 0 && _jsx(SourceList, { sources: message.sources }), reviewedBy && (_jsxs("p", { "data-slot": "message-reviewed", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(UserCheck, { "aria-hidden": true, className: "size-3.5" }), t(reviewedBy.edited ? "editedBy" : "checkedBy", { name: reviewedBy.name }), reviewedBy.at && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: reviewedBy.at })] }))] })), settled && actions === undefined && (_jsx(MessageActions, { text: blocksToText(message.blocks, message.sources), onRetry: onRetry, rating: rating, onRate: onRate, meta: meta || undefined, className: "-ms-1.5 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:opacity-100" })), settled && actions !== undefined && actions !== false && actions, settled && actions !== undefined && _jsx(MessageAttribution, { attribution: message.attribution })] }));
 }
-export { Message };
+export { Message, MessageHeader, MessageBody, MessageFooter, MessageAttribution };