@candor-ui/react 1.3.0 → 1.7.0

package/dist/chat/citation.d.ts

@@ -31,14 +31,14 @@ declare function SourceDetail({ source, }: {
  */
 declare function Citation({ source, marker, }: {
     /** The source this marker points to; without it the marker says it's unknown. */
-    source?: MessageSource;
+    source?: MessageSource | undefined;
     /** The number to show when there's no source. */
-    marker?: number;
+    marker?: number | undefined;
 }): import("react").JSX.Element;
 /** The sources under a reply, as chips that open the same detail. */
 declare function SourceList({ sources, className, }: {
     /** Every source the reply used, in marker order. */
     sources: MessageSource[];
-    className?: string;
+    className?: string | undefined;
 }): import("react").JSX.Element | null;
 export { Citation, SourceList, SourceDetail };

package/dist/chat/citation.js

@@ -40,7 +40,9 @@ const kindOf = (kind, t) => {
 function SourceDetail({ source, }) {
     const t = useStrings("citation", citationStrings);
     const { Icon, noun } = kindOf(source.kind, t);
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-3" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium leading-snug", children: source.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: source.origin ?? noun })] })] }), source.snippet && (_jsx("blockquote", { className: "max-h-40 overflow-auto rounded-md bg-sunken px-2.5 py-2 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground", children: source.snippet })), source.provisional && (_jsx("p", { className: "text-xs text-provisional", children: t("notVerified") }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-3" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium leading-snug", children: source.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: source.origin ?? noun })] })] }), source.snippet && (
+            // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            _jsx("blockquote", { tabIndex: 0, className: "max-h-40 overflow-auto rounded-md bg-sunken outline-none focus-visible:ring-[3px] focus-visible:ring-ring/80 focus-visible:ring-inset px-2.5 py-2 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground", children: source.snippet })), source.provisional && (_jsx("p", { className: "text-xs text-provisional", children: t("notVerified") }))] }));
 }
 /**
  * An inline [n]. Opens the source in a popover on click or Enter, so evidence is
@@ -52,9 +54,9 @@ function Citation({ source, marker, }) {
     if (!source) {
         return _jsxs("sup", { className: "text-faint-foreground", children: ["[", marker ?? "?", "]"] });
     }
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("sourceLabel", { marker: source.marker, label: source.label }), className: cn("mx-0.5 inline-flex h-4 min-w-4 -translate-y-px items-center justify-center rounded-sm px-1 align-middle text-2xs font-semibold tabular-nums transition-colors duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40", source.provisional
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("sourceLabel", { marker: source.marker, label: source.label }), className: cn("mx-0.5 inline-flex h-4 min-w-4 -translate-y-px items-center justify-center rounded-sm px-1 align-middle text-2xs font-semibold tabular-nums transition-colors duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/80", source.provisional
                         ? "border border-dashed border-provisional/60 text-provisional hover:bg-muted"
-                        : "bg-accent-weak text-accent-text hover:bg-primary hover:text-primary-foreground"), children: source.marker }) }), _jsx(PopoverContent, { align: "start", className: "w-80 p-3", children: _jsx(SourceDetail, { source: source }) })] }));
+                        : "bg-accent-weak text-accent-text hover:bg-primary hover:text-primary-foreground"), children: source.marker }) }), _jsx(PopoverContent, { align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-3", children: _jsx(SourceDetail, { source: source }) })] }));
 }
 /** The sources under a reply, as chips that open the same detail. */
 function SourceList({ sources, className, }) {
@@ -65,7 +67,7 @@ function SourceList({ sources, className, }) {
                 .sort((a, b) => a.marker - b.marker)
                 .map((s) => {
                 const { Icon } = kindOf(s.kind, t);
-                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("inline-flex max-w-56 items-center gap-1.5 rounded-md border bg-card py-0.5 pe-2 ps-1 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", s.provisional && "border-dashed"), children: [_jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-sm bg-muted px-1 text-2xs font-semibold tabular-nums", children: s.marker }), _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: s.label })] }) }), _jsx(PopoverContent, { align: "start", className: "w-80 p-3", children: _jsx(SourceDetail, { source: s }) })] }, s.id));
+                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex max-w-56 items-center gap-1.5 rounded-md border bg-card py-0.5 pe-2 ps-1 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/80", s.provisional && "border-dashed"), children: [_jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-sm bg-muted px-1 text-2xs font-semibold tabular-nums", children: s.marker }), _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: s.label })] }) }), _jsx(PopoverContent, { align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-3", children: _jsx(SourceDetail, { source: s }) })] }, s.id));
             })] }));
 }
 export { Citation, SourceList, SourceDetail };

package/dist/chat/composer.d.ts

@@ -22,7 +22,12 @@ export type ComposerState = "ready" | "sending" | "streaming" | {
     reason: string;
 } | {
     kind: "offline";
-    reason?: string;
+    reason?: string | undefined;
+}
+/** Typing stays open, but sending waits, and the box says why: "Your partner is still thinking". */
+ | {
+    kind: "held";
+    reason: string;
 };
 /**
  * Where a person asks. Mentions (@) attach things in the user's system as chips the agent
@@ -33,9 +38,11 @@ export type ComposerState = "ready" | "sending" | "streaming" | {
  * Enter sends, Shift+Enter breaks a line. While an agent replies the send button
  * becomes Stop. A locked composer says why; an offline one says so. With
  * `onAttach`, files can also be pasted or dropped onto it. `tools` adds your
- * own controls to the toolbar, such as a dictation button.
+ * own controls to the toolbar, such as a dictation button. A held composer
+ * (`{ kind: "held", reason }`) keeps typing open and says why sending waits.
+ * `textareaRef` focuses the box from outside, e.g. after a new project starts.
  */
-declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onScopeClick, mentions, commands, references, onReferencesChange, attachments, onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, className, }: {
+declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onScopeClick, mentions, commands, references, onReferencesChange, attachments, onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, textareaRef, sendShape, className, }: {
     /** The text in the box. */
     value: string;
     /** Called with the new text as the person types. */
@@ -43,38 +50,42 @@ declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onS
     /** Called on send with the text and the entities mentioned. */
     onSubmit: (value: string, references: EntityRef[]) => void;
     /** Shown as Stop while a reply is streaming. */
-    onStop?: () => void;
-    /** ready, sending, streaming, locked (with a reason) or offline. */
-    state?: ComposerState;
+    onStop?: (() => void) | undefined;
+    /** ready, sending, streaming, locked (with a reason), held (typing open, sending waits, with a reason) or offline. */
+    state?: ComposerState | undefined;
     /** Where the next message's work lands; production turns the pill to a warning. */
-    scope?: ComposerScope;
+    scope?: ComposerScope | undefined;
     /** Makes the scope pill a button, e.g. to change environment. */
-    onScopeClick?: () => void;
+    onScopeClick?: (() => void) | undefined;
     /** What @ can insert, grouped under their headings. */
-    mentions?: MentionOption[];
+    mentions?: MentionOption[] | undefined;
     /** What / can run, only at the start of a message. */
-    commands?: SlashCommand[];
+    commands?: SlashCommand[] | undefined;
     /** Entities already attached, shown as chips. */
-    references?: EntityRef[];
+    references?: EntityRef[] | undefined;
     /** Called when a chip is added or removed. */
-    onReferencesChange?: (references: EntityRef[]) => void;
+    onReferencesChange?: ((references: EntityRef[]) => void) | undefined;
     /** Files attached, with upload progress or an error. */
-    attachments?: Attachment[];
+    attachments?: Attachment[] | undefined;
     /** Shows an attach button; called with the chosen files. */
-    onAttach?: (files: File[]) => void;
+    onAttach?: ((files: File[]) => void) | undefined;
     /**
      * Which files the attach button's picker offers, as for `<input accept>` (e.g. "image/*,.pdf"). Files pasted or
      * dropped arrive as they are, so check types where you upload.
      */
-    accept?: string;
+    accept?: string | undefined;
     /** Called when a file is removed. */
-    onRemoveAttachment?: (id: string) => void;
+    onRemoveAttachment?: ((id: string) => void) | undefined;
     /** Shown in the empty box; "Ask a question, or describe a change" by default. */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /** The accessible name of the text box; "Message" by default. */
-    label?: string;
+    label?: string | undefined;
     /** Your own controls in the toolbar, after the attach button: a dictation button, a model picker. */
-    tools?: React.ReactNode;
-    className?: string;
+    tools?: React.ReactNode | undefined;
+    /** The text box, to focus it or read its selection from outside. */
+    textareaRef?: React.Ref<HTMLTextAreaElement> | undefined;
+    /** The send button's shape: "square" (the default, rounded corners) or "round". */
+    sendShape?: "square" | "round" | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { Composer };

package/dist/chat/composer.js

@@ -48,24 +48,28 @@ const hasFiles = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files"
  * Enter sends, Shift+Enter breaks a line. While an agent replies the send button
  * becomes Stop. A locked composer says why; an offline one says so. With
  * `onAttach`, files can also be pasted or dropped onto it. `tools` adds your
- * own controls to the toolbar, such as a dictation button.
+ * own controls to the toolbar, such as a dictation button. A held composer
+ * (`{ kind: "held", reason }`) keeps typing open and says why sending waits.
+ * `textareaRef` focuses the box from outside, e.g. after a new project starts.
  */
-function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, onScopeClick, mentions = [], commands = [], references = [], onReferencesChange, attachments = [], onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, className, }) {
+function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, onScopeClick, mentions = [], commands = [], references = [], onReferencesChange, attachments = [], onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, textareaRef, sendShape = "square", className, }) {
     const kindOf = useEntityKinds();
     const t = useStrings("composer", composerStrings);
     const placeholder = placeholderProp ?? t("placeholder");
     const label = labelProp ?? t("label");
     const id = React.useId();
     const textarea = React.useRef(null);
+    React.useImperativeHandle(textareaRef, () => textarea.current, []);
     // Files dragged over the composer: a count of enter/leave pairs, since child elements fire their own.
     const [dragDepth, setDragDepth] = React.useState(0);
     const fileInput = React.useRef(null);
     const [trigger, setTrigger] = React.useState(null);
     const [active, setActive] = React.useState(0);
-    const locked = typeof state === "object" ? state : null;
+    const held = typeof state === "object" && state.kind === "held" ? state : null;
+    const locked = typeof state === "object" && state.kind !== "held" ? state : null;
     const canAttach = Boolean(onAttach) && !locked;
     const busy = state === "sending" || state === "streaming";
-    const canSend = !locked && !busy && (value.trim().length > 0 || references.length > 0);
+    const canSend = !locked && !held && !busy && (value.trim().length > 0 || references.length > 0);
     const items = React.useMemo(() => {
         if (!trigger)
             return [];
@@ -207,11 +211,11 @@ function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, o
                             onAttach(files);
                             if (!e.clipboardData.getData("text/plain"))
                                 e.preventDefault();
-                        }, "aria-controls": menuOpen ? listId : undefined, "aria-activedescendant": menuOpen ? optionId(active) : undefined, "aria-autocomplete": "list", "aria-describedby": locked ? `${id}-locked` : undefined, className: cn("block max-h-60 min-h-12 w-full resize-none bg-transparent px-4 pt-3 pb-1 text-prose leading-relaxed outline-none [field-sizing:content] placeholder:text-faint-foreground disabled:cursor-not-allowed", locked && !value && "min-h-0 h-3 pt-3 pb-0") }), locked && (_jsx("p", { id: `${id}-locked`, className: "flex items-center gap-1.5 px-4 pb-1 text-sm text-muted-foreground", children: locked.kind === "offline" ? locked.reason ?? t("offline") : locked.reason })), _jsxs("div", { className: "flex items-center gap-1.5 px-2 pt-1 pb-2", children: [onAttach && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInput, type: "file", multiple: true, accept: accept, tabIndex: -1, "aria-label": t("attachFiles"), className: "hidden", onChange: (e) => {
+                        }, "aria-controls": menuOpen ? listId : undefined, "aria-activedescendant": menuOpen ? optionId(active) : undefined, "aria-autocomplete": "list", "aria-describedby": locked ? `${id}-locked` : held ? `${id}-held` : undefined, className: cn("block max-h-60 min-h-12 w-full resize-none bg-transparent px-4 pt-3 pb-1 text-prose leading-relaxed outline-none [field-sizing:content] placeholder:text-faint-foreground disabled:cursor-not-allowed", locked && !value && "min-h-0 h-3 pt-3 pb-0") }), locked && (_jsx("p", { id: `${id}-locked`, className: "flex items-center gap-1.5 px-4 pb-1 text-sm text-muted-foreground", children: locked.kind === "offline" ? locked.reason ?? t("offline") : locked.reason })), held && (_jsx("p", { id: `${id}-held`, "data-slot": "composer-held", className: "px-4 pb-1 text-sm text-muted-foreground", children: held.reason })), _jsxs("div", { className: "flex items-center gap-1.5 px-2 pt-1 pb-2", children: [onAttach && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInput, type: "file", multiple: true, accept: accept, tabIndex: -1, "aria-label": t("attachFiles"), className: "hidden", onChange: (e) => {
                                             const files = Array.from(e.target.files ?? []);
                                             if (files.length)
                                                 onAttach(files);
                                             e.target.value = "";
-                                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("attachFiles"), disabled: Boolean(locked), onClick: () => fileInput.current?.click(), className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:opacity-40", children: _jsx(Paperclip, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: t("attachFiles") })] })] })), tools, scope && (_jsxs("button", { type: "button", onClick: onScopeClick, disabled: !onScopeClick, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs transition-colors duration-150 enabled:hover:bg-accent", production ? "bg-warning-weak text-warning-text enabled:hover:bg-warning-weak" : "text-muted-foreground"), children: [production ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3 shrink-0" }) : _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-success" }), _jsxs("span", { className: "truncate", children: [scope.environment, " \u00B7 ", production ? t("production") : (scope.detail ?? t("nonProduction"))] })] })), _jsxs("span", { className: "ms-auto hidden text-2xs text-faint-foreground @lg:inline", children: [_jsx("kbd", { className: "font-sans", children: "\u21B5" }), " ", t("hintSend"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "\u21E7\u21B5" }), " ", t("hintNewLine"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "@" }), " ", t("hintMention")] }), state === "streaming" && onStop ? (_jsx("button", { type: "button", "aria-label": t("stop"), onClick: onStop, className: "ms-auto flex size-8 items-center justify-center rounded-lg bg-foreground text-background transition-transform duration-150 active:scale-95 @lg:ms-1", children: _jsx(Square, { className: "size-3 fill-current" }) })) : (_jsx("button", { type: "button", "aria-label": t("send"), onClick: submit, disabled: !canSend, "aria-busy": state === "sending", className: "ms-auto flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-[background-color,opacity,transform] duration-150 enabled:hover:bg-primary-hover active:scale-95 disabled:opacity-30 @lg:ms-1", children: state === "sending" ? _jsx(LoaderCircle, { className: "size-4 animate-spin" }) : _jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 }) }))] })] })] }));
+                                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("attachFiles"), disabled: Boolean(locked), onClick: () => fileInput.current?.click(), className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:opacity-40", children: _jsx(Paperclip, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: t("attachFiles") })] })] })), tools, scope && (_jsxs("button", { type: "button", onClick: onScopeClick, disabled: !onScopeClick, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs transition-colors duration-150 enabled:hover:bg-accent", production ? "bg-warning-weak text-warning-text enabled:hover:bg-warning-weak" : "text-muted-foreground"), children: [production ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3 shrink-0" }) : _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-success" }), _jsxs("span", { className: "truncate", children: [scope.environment, " \u00B7 ", production ? t("production") : (scope.detail ?? t("nonProduction"))] })] })), _jsxs("span", { className: "ms-auto hidden text-2xs text-faint-foreground @lg:inline", children: [_jsx("kbd", { className: "font-sans", children: "\u21B5" }), " ", t("hintSend"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "\u21E7\u21B5" }), " ", t("hintNewLine"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "@" }), " ", t("hintMention")] }), state === "streaming" && onStop ? (_jsx("button", { type: "button", "aria-label": t("stop"), onClick: onStop, className: cn("ms-auto flex size-8 items-center justify-center bg-foreground text-background transition-transform duration-150 active:scale-95 @lg:ms-1", sendShape === "round" ? "rounded-full" : "rounded-lg"), children: _jsx(Square, { className: "size-3 fill-current" }) })) : (_jsx("button", { type: "button", "aria-label": t("send"), onClick: submit, disabled: !canSend, "aria-busy": state === "sending", className: cn("ms-auto flex size-8 items-center justify-center bg-primary text-primary-foreground transition-[background-color,opacity,transform] duration-150 enabled:hover:bg-primary-hover active:scale-95 disabled:opacity-30 @lg:ms-1", sendShape === "round" ? "rounded-full" : "rounded-lg"), children: state === "sending" ? _jsx(LoaderCircle, { className: "size-4 animate-spin" }) : _jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 }) }))] })] })] }));
 }
 export { Composer };

package/dist/chat/context-meter.d.ts

@@ -18,6 +18,6 @@ declare function ContextMeter({ segments, limit, className, }: {
     segments: ContextSegment[];
     /** The model's context window, in tokens. */
     limit: number;
-    className?: string;
+    className?: string | undefined;
 }): import("react").JSX.Element;
 export { ContextMeter };

package/dist/chat/context-meter.js

@@ -40,7 +40,7 @@ function ContextMeter({ segments, limit, className, }) {
     const warn = pct > 0.8;
     const r = 7;
     const c = 2 * Math.PI * r;
-    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]
+    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/80", 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: tokens(s.tokens) })] }, s.label))) }), warn && _jsx("p", { className: "mt-3 text-xs text-warning-text", children: t("nearlyFull") })] })] }));
 }

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

@@ -48,9 +48,9 @@ declare function EntityChip({ entity, onOpen, onRemove, className, }: {
     /** The thing to show: its kind, identifier and optional label. */
     entity: EntityRef;
     /** Makes the chip a button that opens the thing. */
-    onOpen?: (entity: EntityRef) => void;
+    onOpen?: ((entity: EntityRef) => void) | undefined;
     /** Adds a remove button, e.g. in the composer. */
-    onRemove?: (entity: EntityRef) => void;
-    className?: string;
+    onRemove?: ((entity: EntityRef) => void) | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { EntityChip, EntityKindsProvider, useEntityKinds };

package/dist/chat/entity-chip.js

@@ -81,6 +81,6 @@ function EntityChip({ entity, onOpen, onRemove, className, }) {
         : 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": 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" }))] }));
+    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/80 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: "relative after:absolute after:-inset-1 -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

@@ -15,19 +15,24 @@ export declare const foldedTurnsStrings: {
  * 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, }: {
+declare function FoldedTurns({ count, summary, defaultOpen, open, onOpenChange, header, 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;
+    summary?: React.ReactNode | undefined;
     /** Start open. */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /** Controlled open state. */
-    open?: boolean;
+    open?: boolean | undefined;
     /** Called when a person opens or closes it. */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Your own folded line instead of the dashed one: a card with a title, how it ended, its cost, actions. The
+     * Show/Hide button follows it, so the turns can still be opened.
+     */
+    header?: React.ReactNode | undefined;
     /** The turns, usually Messages. */
     children: React.ReactNode;
-    className?: string;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { FoldedTurns };

package/dist/chat/folded-turns.js

@@ -15,7 +15,7 @@ export const foldedTurnsStrings = {
  * 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, }) {
+function FoldedTurns({ count, summary, defaultOpen = false, open, onOpenChange, header, children, className, }) {
     const t = useStrings("foldedTurns", foldedTurnsStrings);
     const [own, setOwn] = React.useState(defaultOpen);
     const isOpen = open ?? own;
@@ -24,6 +24,6 @@ function FoldedTurns({ count, summary, defaultOpen = false, open, onOpenChange,
             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 })] }));
+    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: set, "data-slot": "folded-turns", className: cn("group/folded flex flex-col gap-7", className), children: [_jsxs("div", { "data-slot": "folded-turns-line", className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 text-sm", header ? "flex-col items-stretch" : "rounded-lg border border-dashed px-3 py-2"), children: [header ?? (summary && _jsx("div", { className: "min-w-0 flex-1 text-muted-foreground", children: summary })), _jsxs(CollapsibleTrigger, { className: cn("relative after:absolute after:inset-x-0 after:-inset-y-0.5 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/80", header && "self-end"), 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

@@ -16,15 +16,15 @@ export type Rating = "up" | "down" | null;
  */
 declare function MessageActions({ text, onRetry, rating, onRate, meta, className, }: {
     /** What Copy copies; without it there's no Copy. */
-    text?: string;
+    text?: string | undefined;
     /** Shows Retry. */
-    onRetry?: () => void;
+    onRetry?: (() => void) | undefined;
     /** The current rating: up, down or none. */
-    rating?: Rating;
+    rating?: Rating | undefined;
     /** Shows thumbs up and down. */
-    onRate?: (rating: Rating) => void;
+    onRate?: ((rating: Rating) => void) | undefined;
     /** Facts after the actions, e.g. the model and cost. */
-    meta?: React.ReactNode;
-    className?: string;
+    meta?: React.ReactNode | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { MessageActions };

package/dist/chat/message-actions.js

@@ -16,7 +16,7 @@ export const messageActionsStrings = {
     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 })] }));
+    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/80 aria-pressed:text-accent-text [&_svg]:size-3.5", children: children }) }), _jsx(TooltipContent, { children: label })] }));
 }
 /**
  * Copy, retry and rate under an agent's reply. Each action appears only when

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

@@ -15,19 +15,25 @@ declare function Inline({ nodes, }: {
     /** Inline nodes: text, strong, code, entities, citations. */
     nodes: InlineNode[];
 }): React.JSX.Element;
-/** A message's blocks, in order. */
-declare function MessageContent({ blocks, sources, onOpenEntity, onNavigate, onOpenAttachment, className, }: {
+/**
+ * A message's blocks, in order. Build them from text with `plainBlocks(text)` for a person's words (newlines kept, no
+ * markdown) and `markdownBlocks(text)` for an agent's answer, both from `safe-markdown`, which installs with this item. Import them from there: they run on the server too. A
+ * model's links show as text, never as clickable links.
+ */
+declare function MessageContent({ blocks, sources, onOpenEntity, onNavigate, onOpenAttachment, bareCode, className, }: {
     /** The reply as typed blocks: paragraphs, lists, payloads, tool calls, cards, attachments. */
     blocks: MessageBlock[];
     /** Sources the blocks cite by marker. */
-    sources?: MessageSource[];
+    sources?: MessageSource[] | undefined;
     /** Makes entity chips open their thing. */
-    onOpenEntity?: (entity: EntityRef) => void;
+    onOpenEntity?: ((entity: EntityRef) => void) | undefined;
     /** Follows in-app links; links from a model are never rendered. */
-    onNavigate?: (to: string) => void;
+    onNavigate?: ((to: string) => void) | undefined;
     /** Makes attachment tiles buttons that open their file. */
-    onOpenAttachment?: (attachment: Attachment) => void;
-    className?: string;
+    onOpenAttachment?: ((attachment: Attachment) => void) | undefined;
+    /** Code and other payload blocks without their frame and title bar (Payload's `bare`). */
+    bareCode?: boolean | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 /** Plain text of a message, for copy. Citations become [n]; entities their API name. */
 export declare function blocksToText(blocks: MessageBlock[], sources?: MessageSource[]): string;

package/dist/chat/message-content.js

@@ -42,7 +42,7 @@ function Inline({ nodes, }) {
                 case "orgData":
                     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-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));
+                    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/80", 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":
@@ -62,6 +62,7 @@ function AttachmentBlock({ files }) {
     return _jsx(AttachmentList, { attachments: files, onOpen: ctx.onOpenAttachment });
 }
 function Block({ block, }) {
+    const { bareCode } = React.useContext(ContentContext);
     switch (block.kind) {
         case "paragraph":
             return (_jsx("p", { children: _jsx(Inline, { nodes: block.nodes }) }));
@@ -79,7 +80,7 @@ function Block({ block, }) {
             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 });
+            return _jsx(Payload, { language: block.language, text: block.text, title: block.title, bare: bareCode });
         case "tools":
             return _jsx(ToolCallGroup, { calls: block.calls });
         case "degraded":
@@ -90,9 +91,13 @@ function Block({ block, }) {
             return _jsx(AttachmentBlock, { files: block.files });
     }
 }
-/** A message's blocks, in order. */
-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]);
+/**
+ * A message's blocks, in order. Build them from text with `plainBlocks(text)` for a person's words (newlines kept, no
+ * markdown) and `markdownBlocks(text)` for an agent's answer, both from `safe-markdown`, which installs with this item. Import them from there: they run on the server too. A
+ * model's links show as text, never as clickable links.
+ */
+function MessageContent({ blocks, sources = [], onOpenEntity, onNavigate, onOpenAttachment, bareCode, className, }) {
+    const ctx = React.useMemo(() => ({ sources: new Map(sources.map((s) => [s.id, s])), onOpenEntity, onNavigate, onOpenAttachment, bareCode }), [sources, onOpenEntity, onNavigate, onOpenAttachment, bareCode]);
     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. */

package/dist/chat/message.d.ts

@@ -1,4 +1,5 @@
 import type * as React from "react";
+import type { DateStyle } from "../blocks/locale.js";
 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`. */
@@ -16,7 +17,8 @@ export declare const messageStrings: {
 /**
  * One message in a thread.
  *
- * - A person's message sits right, on the user surface.
+ * - A person's message sits right, on the user surface, with their name and
+ *   time under it (`meta` hides or replaces that line).
  * - An agent's sits left, under its avatar, name and role, with reasoning above
  *   the answer, sources and actions below. While streaming, a caret follows the
  *   last block; an interrupted reply keeps what arrived and says it stopped.
@@ -25,92 +27,117 @@ export declare const messageStrings: {
  * - A system line is centred and quiet.
  * - 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.
+ * - Times are relative ("5 minutes ago") unless `timeFormat` asks for an
+ *   absolute "time", "date" or "datetime" in the locale.
+ *
+ * Build `blocks` with `plainBlocks(text)` for a person's words and
+ * `markdownBlocks(text)` for an agent's, from `safe-markdown`.
  */
-declare function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }: {
+declare function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry, onContinue, rating, onRate, reviewedBy, footer, actions, meta, timeFormat, density, bareCode, className, }: {
     /** The message: author, status, blocks, and optional reasoning, sources and attribution. */
     message: MessageData;
     /** Makes entity chips open their thing. */
-    onOpenEntity?: (entity: EntityRef) => void;
+    onOpenEntity?: ((entity: EntityRef) => void) | undefined;
     /** Follows in-app links. */
-    onNavigate?: (to: string) => void;
+    onNavigate?: ((to: string) => void) | undefined;
     /** Makes attachment tiles buttons that open their file. */
-    onOpenAttachment?: (attachment: Attachment) => void;
+    onOpenAttachment?: ((attachment: Attachment) => void) | undefined;
     /** Shows Retry on a failed or finished reply. */
-    onRetry?: () => void;
+    onRetry?: (() => void) | undefined;
     /** Shows Continue on an interrupted reply. */
-    onContinue?: () => void;
+    onContinue?: (() => void) | undefined;
     /** The current rating of an agent reply. */
-    rating?: Rating;
+    rating?: Rating | undefined;
     /** Shows thumbs up and down under agent replies. */
-    onRate?: (rating: Rating) => void;
+    onRate?: ((rating: Rating) => void) | undefined;
     /** A person who checked this agent reply before it was sent: "Checked by Sam", or "Edited by Sam" when they changed it. */
     reviewedBy?: {
         name: string;
-        at?: string;
-        edited?: boolean;
-    };
+        at?: string | undefined;
+        edited?: boolean | undefined;
+    } | undefined;
+    /** More lines under an agent reply, after who checked it and above the actions row: e.g. MemoryUsed. */
+    footer?: React.ReactNode | undefined;
     /**
      * 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;
+    actions?: false | React.ReactNode | undefined;
+    /** The line under a person's own message: their name and when they sent it. `false` hides it; a node replaces it. */
+    meta?: false | React.ReactNode | undefined;
+    /** How times show: "relative" (the default, "5 minutes ago") or an absolute "time", "date" or "datetime" in the locale. */
+    timeFormat?: "relative" | DateStyle | undefined;
+    /** "compact" draws the header row smaller: a 12px name in a 24px row, for dense layouts. Defaults to "default". */
+    density?: "default" | "compact" | undefined;
+    /** Code and other payload blocks without their frame (Payload's `bare`). */
+    bareCode?: boolean | undefined;
+    className?: string | undefined;
 }): 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, }: {
+declare function MessageHeader({ name, detail, createdAt, timeFormat, density, 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;
+    detail?: string | undefined;
+    /** When it was sent; shown as a relative time unless `timeFormat` says otherwise. */
+    createdAt?: string | undefined;
+    /** "relative" (the default) or an absolute "time", "date" or "datetime" in the locale. */
+    timeFormat?: "relative" | DateStyle | undefined;
+    /** "compact": a 12px name in a 24px row. Defaults to "default" (14px in 28px). */
+    density?: "default" | "compact" | undefined;
     /** Anything else for the row, after the time (a badge, a menu). */
-    children?: React.ReactNode;
-    className?: string;
+    children?: React.ReactNode | undefined;
+    className?: string | undefined;
 }): 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, }: {
+declare function MessageBody({ message, onOpenEntity, onNavigate, onOpenAttachment, bareCode, className, }: {
     /** The message whose reasoning and blocks to show. */
     message: MessageData;
     /** Makes entity chips open their thing. */
-    onOpenEntity?: (entity: EntityRef) => void;
+    onOpenEntity?: ((entity: EntityRef) => void) | undefined;
     /** Follows in-app links. */
-    onNavigate?: (to: string) => void;
+    onNavigate?: ((to: string) => void) | undefined;
     /** Makes attachment tiles buttons that open their file. */
-    onOpenAttachment?: (attachment: Attachment) => void;
-    className?: string;
+    onOpenAttachment?: ((attachment: Attachment) => void) | undefined;
+    /** Code and other payload blocks without their frame. */
+    bareCode?: boolean | undefined;
+    className?: string | undefined;
 }): 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;
+    attribution?: MessageData["attribution"] | undefined;
+    className?: string | undefined;
 }): 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, }: {
+declare function MessageFooter({ message, onRetry, onContinue, rating, onRate, reviewedBy, footer, actions, timeFormat, className, }: {
     /** The message the footer belongs to. */
     message: MessageData;
     /** Shows Retry on a failed or finished reply. */
-    onRetry?: () => void;
+    onRetry?: (() => void) | undefined;
     /** Shows Continue on an interrupted reply. */
-    onContinue?: () => void;
+    onContinue?: (() => void) | undefined;
     /** The current rating. */
-    rating?: Rating;
+    rating?: Rating | undefined;
     /** Shows thumbs up and down. */
-    onRate?: (rating: Rating) => void;
+    onRate?: ((rating: Rating) => void) | undefined;
     /** A person who checked the reply before it was sent. */
     reviewedBy?: {
         name: string;
-        at?: string;
-        edited?: boolean;
-    };
+        at?: string | undefined;
+        edited?: boolean | undefined;
+    } | undefined;
+    /** More lines after who checked it and above the actions row: e.g. MemoryUsed. */
+    footer?: React.ReactNode | undefined;
     /** `false` hides the actions row, a node replaces it; model and cost still show. */
-    actions?: false | React.ReactNode;
-    className?: string;
+    actions?: false | React.ReactNode | undefined;
+    /** How the reviewer's time shows: "relative" (the default) or an absolute "time", "date" or "datetime". */
+    timeFormat?: "relative" | DateStyle | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { Message, MessageHeader, MessageBody, MessageFooter, MessageAttribution };