@candor-ui/react 1.5.0 → 1.8.0

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: "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" }))] }));
+    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: "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/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 };

package/dist/chat/message.js

@@ -26,7 +26,8 @@ export 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.
@@ -35,8 +36,13 @@ export 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`.
  */
-function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry, onContinue, rating, onRate, reviewedBy, actions, className, }) {
+function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry, onContinue, rating, onRate, reviewedBy, footer, actions, meta, timeFormat, density = "default", bareCode, className, }) {
     const { author } = message;
     const roleOf = useAgentRoles();
     const t = useStrings("message", messageStrings);
@@ -44,24 +50,24 @@ function Message({ message, onOpenEntity, onNavigate, onOpenAttachment, onRetry,
         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 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 })] }))] })] }) }));
+        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, bareCode: bareCode, className: "gap-2" }) }), meta === undefined ? (_jsxs("span", { "data-slot": "message-meta", className: "px-1 text-2xs text-faint-foreground", children: [author.name ?? t("you"), message.createdAt && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: message.createdAt, format: timeFormat })] }))] })) : (meta)] }) }));
     }
     if (author.role === "person") {
-        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" })] })] }));
+        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, timeFormat: timeFormat, density: density }), _jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, bareCode: bareCode, 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 })] })] })] }));
+    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, timeFormat: timeFormat, density: density }), _jsxs("div", { className: "mt-1 flex flex-col gap-3", children: [_jsx(MessageBody, { message: message, onOpenEntity: onOpenEntity, onNavigate: onNavigate, onOpenAttachment: onOpenAttachment, bareCode: bareCode }), _jsx(MessageFooter, { message: message, onRetry: onRetry, onContinue: onContinue, rating: rating, onRate: onRate, reviewedBy: reviewedBy, footer: footer, actions: actions, timeFormat: timeFormat })] })] })] }));
 }
 /** 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] }));
+function MessageHeader({ name, detail, createdAt, timeFormat, density = "default", children, className, }) {
+    return (_jsxs("header", { "data-slot": "message-header", "data-density": density, className: cn("flex items-center gap-2", density === "compact" ? "h-6" : "h-7", className), children: [_jsx("span", { className: cn("font-semibold", density === "compact" ? "text-xs" : "text-sm"), children: name }), detail && _jsx("span", { className: cn("truncate text-muted-foreground", density === "compact" ? "text-2xs" : "text-xs"), children: detail }), createdAt && (_jsx("span", { className: cn("text-faint-foreground", density === "compact" ? "text-2xs" : "text-xs"), children: _jsx(RelativeTime, { date: createdAt, format: timeFormat }) })), 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, }) {
+function MessageBody({ message, onOpenEntity, onNavigate, onOpenAttachment, bareCode, className, }) {
     const streaming = message.status === "streaming";
     const thinking = streaming && message.blocks.length === 0;
-    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" })] }))] }));
+    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, bareCode: bareCode }), 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, }) {
@@ -75,11 +81,11 @@ function MessageAttribution({ attribution, className, }) {
  * 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, }) {
+function MessageFooter({ message, onRetry, onContinue, rating, onRate, reviewedBy, footer, actions, timeFormat, 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("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: "relative after:absolute after:inset-x-0 after:-inset-y-1 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 })] }));
+    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: "relative after:absolute after:inset-x-0 after:-inset-y-1 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, format: timeFormat })] }))] })), footer, 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, MessageHeader, MessageBody, MessageFooter, MessageAttribution };

package/dist/chat/payload.d.ts

@@ -23,11 +23,11 @@ declare function Payload({ language, text, title, bare, highlight, className, }:
     /** The code or query, shown as text. */
     text: string;
     /** What it is, e.g. "The query I ran". Not shown when `bare`. */
-    title?: string;
+    title?: string | undefined;
     /** Just the code: no border, language label or copy button, for inside something that has them. */
-    bare?: boolean;
+    bare?: boolean | undefined;
     /** Colour the code by its syntax. Left out, it follows the nearest `data-syntax` attribute (off by default). */
-    highlight?: boolean;
-    className?: string;
+    highlight?: boolean | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { Payload };

package/dist/chat/payload.js

@@ -42,9 +42,9 @@ function Payload({ language, text, title, bare = false, highlight, className, })
         return (
         // It scrolls on its own, so it takes focus: keyboard users can scroll long output.
         // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        _jsx("pre", { "data-slot": "payload", "data-bare": "", "data-language": language, "data-syntax": syntax, tabIndex: 0, className: cn("max-h-80 overflow-auto rounded-md bg-sunken outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40 focus-visible:ring-inset px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground", className), children: code }));
+        _jsx("pre", { "data-slot": "payload", "data-bare": "", "data-language": language, "data-syntax": syntax, tabIndex: 0, className: cn("max-h-80 overflow-auto rounded-md bg-sunken outline-none focus-visible:ring-[3px] focus-visible:ring-ring/80 focus-visible:ring-inset px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground", className), children: code }));
     }
-    return (_jsxs("figure", { "data-slot": "payload", "data-language": language, "data-syntax": syntax, className: cn("overflow-hidden rounded-lg border bg-sunken", className), children: [_jsxs("figcaption", { className: "flex items-center justify-between gap-2 border-b px-3 py-1.5", children: [_jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: languageLabel(language, t) }), title && _jsxs("span", { children: [" \u00B7 ", title] })] }), _jsx("button", { type: "button", onClick: () => copy(text), "aria-live": "polite", className: "relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: state === "copied" ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-3 text-success-text" }), " ", t("copied")] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "size-3 text-destructive-text" }), " ", t("copyFailed")] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " ", t("copy")] })) })] }), _jsx("pre", { tabIndex: 0, className: "max-h-80 overflow-auto px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40 focus-visible:ring-inset", children: code })] }));
+    return (_jsxs("figure", { "data-slot": "payload", "data-language": language, "data-syntax": syntax, className: cn("overflow-hidden rounded-lg border bg-sunken", className), children: [_jsxs("figcaption", { className: "flex items-center justify-between gap-2 border-b px-3 py-1.5", children: [_jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: languageLabel(language, t) }), title && _jsxs("span", { children: [" \u00B7 ", title] })] }), _jsx("button", { type: "button", onClick: () => copy(text), "aria-live": "polite", className: "relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/80", children: state === "copied" ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-3 text-success-text" }), " ", t("copied")] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "size-3 text-destructive-text" }), " ", t("copyFailed")] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " ", t("copy")] })) })] }), _jsx("pre", { tabIndex: 0, className: "max-h-80 overflow-auto px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground outline-none focus-visible:ring-[3px] focus-visible:ring-ring/80 focus-visible:ring-inset", children: code })] }));
 }
 /** The code as token spans. Each token is a text child, so nothing in it is parsed as markup. */
 function Code({ text, language }) {

package/dist/chat/permission-prompt.d.ts

@@ -51,20 +51,20 @@ export type PermissionSuggestion = {
     /** What it covers, as the source writes it: `Bash(npm test:*)`, a mode's name, directories. Shown as code. */
     what: string;
     /** Where it's kept: "session", "local" (this project, this computer), "project" (shared), "user", or the source's own word. */
-    scope?: string;
+    scope?: string | undefined;
 };
 /** A question the agent asks through the prompt: pick one or more labels, or answer in its own words. */
 export type PermissionQuestion = {
     id: string;
     prompt: string;
-    tag?: string;
+    tag?: string | undefined;
     options: {
         id: string;
         label: string;
-        detail?: string;
+        detail?: string | undefined;
     }[];
     multiple: boolean;
-    other?: boolean;
+    other?: boolean | undefined;
 };
 /** A tool call waiting on a person, in the shape the adapters give (ClaudeApproval fits it). */
 export type PermissionRequest = {
@@ -72,35 +72,35 @@ export type PermissionRequest = {
     tool: string;
     input: unknown;
     /** The source's own sentence for the request: "Claude wants to run npm test". */
-    title?: string;
-    description?: string;
+    title?: string | undefined;
+    description?: string | undefined;
     /** Why it reached a person (no rule allowed it, a safety check, a path outside the project). */
-    reason?: string;
-    blockedPath?: string;
+    reason?: string | undefined;
+    blockedPath?: string | undefined;
     /** Put the focus on Deny: the request grants more than it looks. */
-    defaultToNo?: boolean;
+    defaultToNo?: boolean | undefined;
     /** Set when a subagent asked. */
-    agentId?: string;
+    agentId?: string | undefined;
     mcpServer?: {
         name: string;
         source: string;
-    };
+    } | undefined;
     /** The questions, when the request is the agent asking rather than a tool to allow. */
-    questions?: PermissionQuestion[];
+    questions?: PermissionQuestion[] | undefined;
     /** False when the server won't accept an edited input for this call: no Edit is offered, whatever `editable` says. */
-    editable?: boolean;
+    editable?: boolean | undefined;
 };
 export type PermissionAnswer = {
     /** The input as edited, when the person changed it. */
-    updatedInput?: Record<string, unknown>;
+    updatedInput?: Record<string, unknown> | undefined;
     /** The suggestions the person ticked, by index. */
-    alwaysAllow?: number[];
+    alwaysAllow?: number[] | undefined;
     /** Answers to `questions`. */
     answers?: {
         questionId: string;
-        choice?: string[];
-        text?: string;
-    }[];
+        choice?: string[] | undefined;
+        text?: string | undefined;
+    }[] | undefined;
 };
 /**
  * A tool call waiting for a person's go-ahead: what it will do, why it reached them, and the permission mode the
@@ -113,17 +113,17 @@ declare function PermissionPrompt({ request, mode, suggestions, editable, onAllo
     /** The waiting request. */
     request: PermissionRequest;
     /** The run's permission mode, as the SDK names it ("default", "acceptEdits", "plan", "auto"…). Left out, it isn't shown. */
-    mode?: string;
+    mode?: string | undefined;
     /** "Don't ask again" rules to offer. None is ticked. */
-    suggestions?: PermissionSuggestion[];
+    suggestions?: PermissionSuggestion[] | undefined;
     /** Let the person edit the input as JSON before allowing it. */
-    editable?: boolean;
+    editable?: boolean | undefined;
     /** Called with the edited input, the ticked rules or the answers. */
     onAllow: (answer: PermissionAnswer) => void;
     /** Called when the person denies it (or won't answer the questions). */
     onDeny: () => void;
     /** The answer is being sent: both buttons wait. */
-    busy?: boolean;
-    className?: string;
+    busy?: boolean | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { PermissionPrompt };

package/dist/chat/prompt-suggestions.d.ts

@@ -14,11 +14,11 @@ declare function PromptSuggestions({ suggestions, onChoose, label: labelProp, lo
     /** Called with the chosen one; put it in the composer to edit rather than sending it. */
     onChoose: (suggestion: PromptSuggestion) => void;
     /** The heading above the suggestions; "Try asking" by default. */
-    label?: string;
+    label?: string | undefined;
     /** Shows placeholders while suggestions load. */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /** Compact chips, or larger cards for an empty thread. */
-    variant?: "chips" | "cards";
-    className?: string;
+    variant?: "chips" | "cards" | undefined;
+    className?: string | undefined;
 }): import("react").JSX.Element | null;
 export { PromptSuggestions };

package/dist/chat/prompt-suggestions.js

@@ -20,6 +20,6 @@ function PromptSuggestions({ suggestions, onChoose, label: labelProp, loading =
         return null;
     return (_jsxs("section", { "data-slot": "prompt-suggestions", "aria-label": label, className: cn("flex flex-col gap-2", className), children: [_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(Sparkles, { "aria-hidden": true, className: "size-3" }), " ", label] }), _jsx("div", { className: cn(variant === "cards" ? "grid gap-2 sm:grid-cols-2" : "flex flex-wrap gap-1.5"), children: loading
                     ? Array.from({ length: variant === "cards" ? 4 : 3 }, (_, i) => (_jsx(Skeleton, { className: variant === "cards" ? "h-16 rounded-xl" : "h-8 w-44 rounded-lg" }, i)))
-                    : suggestions.map((s) => variant === "cards" ? (_jsxs("button", { type: "button", onClick: () => onChoose(s), className: "group/suggestion flex items-start justify-between gap-3 rounded-xl border bg-card p-3 text-start text-sm transition-[border-color,box-shadow,transform] duration-150 ease-standard outline-none hover:border-border-strong hover:shadow-raised active:scale-[0.99] focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx("span", { children: s.text }), _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-faint-foreground transition-colors group-hover/suggestion:text-accent-text" })] }, s.id)) : (_jsx("button", { type: "button", onClick: () => onChoose(s), className: "rounded-lg border bg-card px-3 py-1.5 text-sm 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", children: s.text }, s.id))) })] }));
+                    : suggestions.map((s) => variant === "cards" ? (_jsxs("button", { type: "button", onClick: () => onChoose(s), className: "group/suggestion flex items-start justify-between gap-3 rounded-xl border bg-card p-3 text-start text-sm transition-[border-color,box-shadow,transform] duration-150 ease-standard outline-none hover:border-border-strong hover:shadow-raised active:scale-[0.99] focus-visible:ring-[3px] focus-visible:ring-ring/80", children: [_jsx("span", { children: s.text }), _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-faint-foreground transition-colors group-hover/suggestion:text-accent-text" })] }, s.id)) : (_jsx("button", { type: "button", onClick: () => onChoose(s), className: "rounded-lg border bg-card px-3 py-1.5 text-sm 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", children: s.text }, s.id))) })] }));
 }
 export { PromptSuggestions };