veryfront 0.1.997 → 0.1.998

package/esm/src/react/components/chat/chat/composition/message.js

@@ -18,21 +18,25 @@
  * @module react/components/chat/composition/message
  */
 import * as React from "../../../../../../react/react.js";
-import { cn } from "../../theme.js";
+import { cn, defaultChatTheme } from "../../theme.js";
 import { Markdown } from "../../markdown.js";
 import { MessageItem } from "../../../../primitives/index.js";
 import { MessageContextProvider, useMessageContext } from "../contexts/message-context.js";
 import { useChatContextOptional } from "../contexts/chat-context.js";
-import { MessageActions as ActionsImpl } from "../components/message-actions.js";
+import { useClipboard } from "../hooks/use-clipboard.js";
+import { Slot } from "../../ui/slot.js";
+import { CheckIcon, CopyIcon, PencilIcon, RefreshCwIcon } from "../../icons/index.js";
 import { MessageFeedback as FeedbackImpl } from "../components/message-feedback.js";
 import { BranchPicker as BranchPickerImpl } from "../components/branch-picker.js";
 import { ReasoningCard } from "../components/reasoning.js";
-import { SkillBadge } from "../components/skill-badge.js";
+import { Shimmer } from "../../ui/shimmer.js";
 import { ToolCallCard } from "../components/tool-ui.js";
 import { StepIndicator } from "../components/step-indicator.js";
+import { AttachmentPill } from "../components/attachment-pill.js";
 import { Sources as SourcesImpl } from "../components/sources.js";
 import { AgentAvatar as AvatarImpl } from "./agent-avatar.js";
-import { extractSourcesFromParts, getAnswerPartsForRendering, getTextContentFromParts, groupPartsInOrder, isSkillToolPart, } from "../utils/message-parts.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { extractSourcesFromParts, getAnswerPartsForRendering, getTextContentFromParts, groupPartsInOrder, } from "../utils/message-parts.js";
 // ---------------------------------------------------------------------------
 // Message.Root
 // ---------------------------------------------------------------------------
@@ -43,28 +47,22 @@ function metadataString(metadata, key) {
 const MessageRoot = React.forwardRef(function MessageRoot({ message, isStreaming = false, children, className, ...overrides }, ref) {
     const chat = useChatContextOptional();
     const role = message.role;
-    const answerParts = React.useMemo(() => getAnswerPartsForRendering(message.parts, { isAssistant: role !== "user" }), [message.parts, role]);
-    const parts = React.useMemo(() => groupPartsInOrder(answerParts), [answerParts]);
+    const answerParts = React.useMemo(() => getAnswerPartsForRendering(message.parts, {
+        isAssistant: role !== "user",
+    }), [message.parts, role]);
+    const parts = React.useMemo(() => groupPartsInOrder(answerParts), [
+        answerParts,
+    ]);
     const textContent = React.useMemo(() => getTextContentFromParts(answerParts), [answerParts]);
     const editMessage = overrides.editMessage ?? chat?.editMessage;
     const getBranches = overrides.getBranches ?? chat?.getBranches;
     const switchBranch = overrides.switchBranch ?? chat?.switchBranch;
     const onFeedbackProp = overrides.onFeedback ?? chat?.onFeedback;
+    // Regenerate only applies to assistant turns (Studio `chat.regenerate()`).
+    const onReload = overrides.onReload ?? chat?.onReload;
     const branch = React.useMemo(() => getBranches?.(message.id) ?? null, [getBranches, message.id]);
-    const onCopy = React.useCallback(async () => {
-        try {
-            await navigator.clipboard.writeText(textContent);
-        }
-        catch (_) {
-            /* expected: clipboard API unavailable, using fallback */
-            const textarea = document.createElement("textarea");
-            textarea.value = textContent;
-            document.body.appendChild(textarea);
-            textarea.select();
-            document.execCommand("copy");
-            document.body.removeChild(textarea);
-        }
-    }, [textContent]);
+    const { copied, copy } = useClipboard();
+    const onCopy = React.useCallback(() => copy(textContent), [copy, textContent]);
     const contextValue = React.useMemo(() => ({
         message,
         role,
@@ -79,6 +77,7 @@ const MessageRoot = React.forwardRef(function MessageRoot({ message, isStreaming
             ? () => switchBranch(message.id, branch.current)
             : undefined,
         onCopy,
+        copied,
         onEdit: editMessage
             ? (content) => {
                 editMessage(message.id, content);
@@ -87,6 +86,7 @@ const MessageRoot = React.forwardRef(function MessageRoot({ message, isStreaming
         onFeedback: onFeedbackProp
             ? (value) => onFeedbackProp(message.id, value)
             : undefined,
+        onRegenerate: role !== "user" && onReload ? onReload : undefined,
         feedback: overrides.feedback,
     }), [
         message,
@@ -94,68 +94,250 @@ const MessageRoot = React.forwardRef(function MessageRoot({ message, isStreaming
         role,
         isStreaming,
         parts,
+        onReload,
         textContent,
         branch,
         switchBranch,
         onCopy,
+        copied,
         editMessage,
         onFeedbackProp,
         overrides.feedback,
     ]);
     const isUser = role === "user";
     return (React.createElement(MessageContextProvider, { value: contextValue },
-        React.createElement(MessageItem, { ref: ref, role: message.role, className: cn(isUser
-                ? "flex flex-col items-end group/msg"
-                : "flex items-start gap-3 justify-start group/msg", className) }, children)));
+        React.createElement(MessageItem, { ref: ref, role: message.role, 
+            // Studio `Message` anatomy: a full-width vertical column. Assistant
+            // turns are left-aligned with a header (avatar + name + timestamp) on
+            // top; user turns are right-aligned and capped at `max-w-[80%]`.
+            className: cn("group/msg flex w-full flex-col gap-1.5 text-[var(--foreground)]", isUser ? "ml-auto max-w-[80%] items-end" : "items-start", className) }, children)));
 });
 MessageRoot.displayName = "Message.Root";
 function MessageAvatar({ className }) {
     const { message, role } = useMessageContext();
+    const chat = useChatContextOptional();
     if (role === "user")
         return null;
     return (React.createElement(AvatarImpl, { name: metadataString(message.metadata, "agentName") ??
-            metadataString(message.metadata, "agentId"), avatarUrl: metadataString(message.metadata, "agentAvatarUrl"), model: metadataString(message.metadata, "model"), className: className }));
+            chat?.agent?.name ??
+            metadataString(message.metadata, "agentId"), avatarUrl: metadataString(message.metadata, "agentAvatarUrl") ??
+            chat?.agent?.avatarUrl, model: metadataString(message.metadata, "model"), className: className }));
 }
 MessageAvatar.displayName = "Message.Avatar";
-function MessageContent({ renderTool, showSteps = false, showSources = false, onSourceClick, className, }) {
+/** Format a timestamp as a short `HH:MM` label (matches Studio's meta line). */
+function formatTimestamp(createdAt) {
+    if (!createdAt)
+        return "";
+    const date = createdAt instanceof Date ? createdAt : new Date(createdAt);
+    if (Number.isNaN(date.getTime()))
+        return "";
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+/**
+ * Assistant message header — agent avatar (`size-8`) + name on the left, a
+ * right-aligned timestamp. Ported 1:1 from Studio's `ChatMessageHeader`
+ * (`pt-px pb-2`, `flex items-center gap-2`, name `font-medium`, timestamp
+ * `text-sm ml-auto`). User turns have no header.
+ */
+function MessageHeader({ className }) {
+    const { message, role } = useMessageContext();
+    const chat = useChatContextOptional();
+    if (role === "user")
+        return null;
+    // The avatar gets only REAL agent identity (like `Message.Avatar`): with no
+    // agent, `AgentAvatar` falls back to the provider logomark for
+    // `metadata.model`. Folding the "Assistant" placeholder into `name` would
+    // make that fallback unreachable — the label below still shows it.
+    const agentName = metadataString(message.metadata, "agentName") ??
+        chat?.agent?.name ??
+        metadataString(message.metadata, "agentId");
+    const displayName = agentName ?? "Assistant";
+    const avatarUrl = metadataString(message.metadata, "agentAvatarUrl") ??
+        chat?.agent?.avatarUrl;
+    const timestamp = formatTimestamp(message.createdAt);
+    return (
+    // `w-full` so the timestamp's `ml-auto` reaches the right edge — the Root
+    // is `items-start`, which would otherwise shrink the header to its content.
+    React.createElement("div", { className: cn("flex w-full items-center gap-2 pt-px pb-3", className) },
+        React.createElement(AvatarImpl, { name: agentName, avatarUrl: avatarUrl, model: metadataString(message.metadata, "model"), className: "size-8" }),
+        React.createElement("span", { className: "min-w-0 truncate font-medium" }, displayName),
+        timestamp && (React.createElement("span", { className: "ml-auto text-sm text-[var(--faint)]", suppressHydrationWarning: true }, timestamp))));
+}
+MessageHeader.displayName = "Message.Header";
+// ---------------------------------------------------------------------------
+// Message.Content
+// ---------------------------------------------------------------------------
+/** A stable React key for a grouped part (preserves streaming reconciliation). */
+function groupKey(group, index) {
+    switch (group.type) {
+        case "text":
+            return `text-${index}`;
+        case "reasoning":
+            return `reasoning-${index}`;
+        case "step":
+            return `step-${group.stepIndex}`;
+        case "file":
+            return `file-${index}`;
+        default:
+            return group.tool.toolCallId;
+    }
+}
+/**
+ * Render one grouped assistant part with the default anatomy. Extracted so both
+ * the default `Message.Content` loop and the `Message.Part` sub-part share one
+ * source of truth — the composed path never drifts from the preset.
+ */
+function renderAnswerPart(group, opts) {
+    if (group.type === "text") {
+        // `my-2` gives the answer text extra breathing room from an adjacent tool
+        // card. In the flex-col container the gap doesn't collapse with margins, so
+        // this widens text↔tool boundaries while tool↔tool stays at the base gap.
+        return (React.createElement(Markdown, { className: "my-2 text-[15px] leading-7", renderCodeBlock: opts.codeBlock, components: opts.markdownComponents }, group.content));
+    }
+    if (group.type === "reasoning") {
+        return React.createElement(ReasoningCard, { text: group.text, isStreaming: group.isStreaming });
+    }
+    if (group.type === "step") {
+        return opts.showSteps && opts.stepCount > 1
+            ? (React.createElement(StepIndicator, { stepIndex: group.stepIndex, isComplete: group.isComplete }))
+            : null;
+    }
+    if (group.type === "file") {
+        const isImage = group.file.mediaType.startsWith("image/");
+        return (React.createElement("div", { className: "my-1.5" },
+            React.createElement(AttachmentPill, { className: "w-[200px]", attachment: {
+                    id: "file",
+                    name: group.file.filename ?? "Attachment",
+                    type: group.file.mediaType,
+                    url: group.file.url,
+                    // No lifecycle `state`: this is a sent, read-only attachment, so
+                    // the pill shows the file type/size rather than an "Uploaded" badge.
+                    ...(group.file.size != null ? { size: group.file.size } : {}),
+                    preview: isImage ? group.file.url : undefined,
+                } })));
+    }
+    // ToolCall renders the compact skill row for skill tools and the full
+    // params/result card for everything else — one component either way.
+    return opts.renderTool ? opts.renderTool(group.tool) : React.createElement(ToolCallCard, { tool: group.tool });
+}
+function MessageContent({ renderTool, showSteps = false, showSources = false, onSourceClick, className, codeBlock, markdownComponents, children, }) {
     const { message, role, parts, textContent } = useMessageContext();
     const chat = useChatContextOptional();
     const shouldShowSources = showSources || chat?.showSources || false;
     const sourceClickHandler = onSourceClick ?? chat?.onSourceClick;
     if (role === "user") {
-        return (React.createElement("div", { className: cn(chat?.theme.message?.user, className) },
-            React.createElement("p", { className: "whitespace-pre-wrap text-[15px] leading-relaxed" }, textContent)));
+        const fileParts = message.parts.filter((p) => p.type === "file");
+        return (React.createElement("div", { className: cn(chat?.theme.message?.user ?? defaultChatTheme.message?.user, className) },
+            fileParts.length > 0 && (React.createElement("div", { className: "mb-2 flex flex-wrap justify-end gap-2" }, fileParts.map((file, index) => (React.createElement(AttachmentPill, { key: `file-${index}`, className: "w-[200px]", attachment: {
+                    id: `file-${index}`,
+                    name: file.filename ?? "Attachment",
+                    type: file.mediaType,
+                    url: file.url,
+                    // Read-only sent attachment → show type/size, not "Uploaded".
+                    ...(file.size != null ? { size: file.size } : {}),
+                    preview: file.mediaType.startsWith("image/") ? file.url : undefined,
+                } }))))),
+            textContent && (React.createElement("p", { className: "whitespace-pre-wrap text-[15px] leading-relaxed" }, textContent))));
     }
     const stepCount = parts.filter((g) => g.type === "step").length;
+    const compose = typeof children === "function";
     const messageSources = shouldShowSources ? extractSourcesFromParts(message.parts) : [];
-    return (React.createElement("div", { className: cn(chat?.theme.message?.assistant, "flex-1 min-w-0", className) },
-        parts.map((group, index) => {
-            if (group.type === "text") {
-                return (React.createElement(Markdown, { key: `text-${index}`, className: "text-[15px] leading-7" }, group.content));
-            }
-            if (group.type === "reasoning") {
-                return (React.createElement(ReasoningCard, { key: `reasoning-${index}`, text: group.text, isStreaming: group.isStreaming }));
-            }
-            if (group.type === "step") {
-                return showSteps && stepCount > 1
-                    ? (React.createElement(StepIndicator, { key: `step-${group.stepIndex}`, stepIndex: group.stepIndex, isComplete: group.isComplete }))
-                    : null;
-            }
-            const isSkill = isSkillToolPart(group.tool);
-            return (React.createElement("div", { key: group.tool.toolCallId, className: isSkill ? "my-2" : "my-3" }, renderTool
-                ? renderTool(group.tool)
-                : isSkill
-                    ? React.createElement(SkillBadge, { tool: group.tool })
-                    : React.createElement(ToolCallCard, { tool: group.tool })));
-        }),
-        messageSources.length > 0 && (React.createElement(SourcesImpl, { sources: messageSources, onSourceClick: sourceClickHandler }))));
+    return (React.createElement("div", { className: cn(chat?.theme.message?.assistant ?? defaultChatTheme.message?.assistant, 
+        // `w-full` because `Message.Root` is `items-start`, which would
+        // otherwise shrink this column to its widest child — a lone tool card
+        // (`w-full`) would render narrow until streamed text widened the
+        // column. Mirrors the same workaround on `Message.Header`.
+        // `flex flex-col gap-2.5` owns the spacing *between* parts (text,
+        // reasoning, tool cards) — gaps apply between siblings only, so there's
+        // no leading gap under the header and no per-part margins to juggle.
+        "flex w-full flex-col gap-2.5 flex-1 min-w-0", className) },
+        parts.map((group, index) => (React.createElement(React.Fragment, { key: groupKey(group, index) }, compose ? children(group, index) : renderAnswerPart(group, {
+            renderTool,
+            showSteps,
+            stepCount,
+            codeBlock,
+            markdownComponents,
+        })))),
+        !compose && messageSources.length > 0 && (React.createElement(SourcesImpl, { sources: messageSources, onSourceClick: sourceClickHandler }))));
 }
 MessageContent.displayName = "Message.Content";
-function MessageActionsWrapper({ className }) {
-    const { textContent, onEdit } = useMessageContext();
+/** Render a single grouped part with the default `Message.Content` anatomy. */
+function MessagePart({ part, renderTool, showSteps = true, codeBlock, markdownComponents, }) {
+    const { parts } = useMessageContext();
+    const stepCount = parts.filter((g) => g.type === "step").length;
+    return (React.createElement(React.Fragment, null, renderAnswerPart(part, {
+        renderTool,
+        showSteps,
+        stepCount,
+        codeBlock,
+        markdownComponents,
+    })));
+}
+MessagePart.displayName = "Message.Part";
+/** The inline citation sources extracted from this message's tool results. */
+function MessageSources({ onSourceClick, className }) {
+    const { message } = useMessageContext();
+    const chat = useChatContextOptional();
+    const sources = extractSourcesFromParts(message.parts);
+    if (sources.length === 0)
+        return null;
+    return (React.createElement(SourcesImpl, { sources: sources, onSourceClick: onSourceClick ?? chat?.onSourceClick, className: className }));
+}
+MessageSources.displayName = "Message.Sources";
+// ---------------------------------------------------------------------------
+// Message.Actions — the reference render-or-compose pattern.
+//
+// `<Message.Actions />` renders the default cluster (copy / regenerate); pass
+// children to compose your own bar from the individual action sub-parts
+// (`Message.CopyAction`, `Message.EditAction`, …), each of which reads its
+// handler + state from context. `Message.EditAction` stays available but is off
+// by default. Every sub-part accepts `icon`, `className`, `asChild`, and an
+// `onClick(e, next)` wrap-signature so you can log-then-run or fully replace the
+// default without ejecting.
+// ---------------------------------------------------------------------------
+const ACTION_BUTTON = "inline-flex items-center justify-center size-7 rounded-full text-[var(--faint)] transition-colors hover:bg-[var(--tertiary)] hover:text-[var(--foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]";
+/** Internal button shared by every action sub-part. */
+const ActionButton = React.forwardRef(function ActionButton({ icon, asChild, onClick, className, children, label, defaultIcon, action, ...props }, ref) {
+    const handleClick = (e) => onClick ? onClick(e, action) : action();
+    if (asChild) {
+        return (React.createElement(Slot, { ref: ref, ...props, className: cn(ACTION_BUTTON, className), onClick: handleClick }, children));
+    }
+    return (React.createElement("button", { ref: ref, type: "button", ...props, "aria-label": label, title: label, className: cn(ACTION_BUTTON, className), onClick: handleClick }, icon ?? defaultIcon));
+});
+ActionButton.displayName = "Message.ActionButton";
+/** Copy the message text. Reads `onCopy`/`copied`/`textContent` from context. */
+export const MessageCopyAction = React.forwardRef(function MessageCopyAction(props, ref) {
+    const { onCopy, copied, textContent } = useMessageContext();
     if (!textContent)
         return null;
-    return React.createElement(ActionsImpl, { content: textContent, onEdit: onEdit, className: className });
+    return (React.createElement(ActionButton, { ref: ref, ...props, label: copied ? "Copied!" : "Copy to clipboard", defaultIcon: copied
+            ? React.createElement(CheckIcon, { className: "size-3.5" })
+            : React.createElement(CopyIcon, { className: "size-3.5" }), action: () => void onCopy() }));
+});
+MessageCopyAction.displayName = "Message.CopyAction";
+/** Regenerate this turn. Renders only when `onRegenerate` is available. */
+export const MessageRegenerateAction = React.forwardRef(function MessageRegenerateAction(props, ref) {
+    const { onRegenerate } = useMessageContext();
+    if (!onRegenerate)
+        return null;
+    return (React.createElement(ActionButton, { ref: ref, ...props, label: "Regenerate response", defaultIcon: React.createElement(RefreshCwIcon, { className: "size-3.5" }), action: onRegenerate }));
+});
+MessageRegenerateAction.displayName = "Message.RegenerateAction";
+/** Edit this message. Renders only when `onEdit` is available. */
+export const MessageEditAction = React.forwardRef(function MessageEditAction(props, ref) {
+    const { onEdit, textContent } = useMessageContext();
+    if (!onEdit || !textContent)
+        return null;
+    return (React.createElement(ActionButton, { ref: ref, ...props, label: "Edit message", defaultIcon: React.createElement(PencilIcon, { className: "size-3.5" }), action: () => onEdit(textContent) }));
+});
+MessageEditAction.displayName = "Message.EditAction";
+function MessageActionsWrapper({ children, className, ...props }) {
+    const { textContent } = useMessageContext();
+    if (!textContent)
+        return null;
+    return (React.createElement("div", { ...props, className: cn("flex items-center gap-0.5 opacity-0 group-hover/msg:opacity-100 transition-all duration-200", className) }, children ?? (React.createElement(React.Fragment, null,
+        React.createElement(MessageCopyAction, null),
+        React.createElement(MessageRegenerateAction, null)))));
 }
 MessageActionsWrapper.displayName = "Message.Actions";
 function MessageFeedbackWrapper({ className }) {
@@ -165,6 +347,66 @@ function MessageFeedbackWrapper({ className }) {
     return (React.createElement(FeedbackImpl, { messageId: message.id, feedback: feedback, onFeedback: (_msgId, value) => onFeedback(value), className: className }));
 }
 MessageFeedbackWrapper.displayName = "Message.Feedback";
+/** Compact token count — `726`, `79.8k`. */
+function formatTokens(n) {
+    return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
+}
+function readUsage(metadata) {
+    const usage = metadata?.usage;
+    if (!usage || typeof usage !== "object")
+        return undefined;
+    const u = usage;
+    const num = (v) => (typeof v === "number" ? v : undefined);
+    return {
+        inputTokens: num(u.inputTokens),
+        outputTokens: num(u.outputTokens),
+        reasoningTokens: num(u.reasoningTokens),
+    };
+}
+function TokenRow({ label, value, bold }) {
+    return (React.createElement("div", { className: "flex items-center justify-between gap-6 text-sm" },
+        React.createElement("span", { className: "text-[var(--faint)]" }, label),
+        React.createElement("span", { className: cn("tabular-nums", bold ? "font-semibold" : "text-[var(--foreground)]") }, value)));
+}
+/**
+ * Token-usage popover. A subtle total count in the message footer opens a
+ * breakdown (Model · Input · Output · Total). Tightened vs Studio's
+ * `ChatTokenUsage` (smaller title, tighter rows, clearer hierarchy) and drops
+ * the "Credits used" row (not relevant to open-source chat). Renders nothing
+ * when the message carries no usage metadata.
+ */
+function MessageTokens({ className, renderRow }) {
+    const { message, role } = useMessageContext();
+    const [open, setOpen] = React.useState(false);
+    if (role === "user")
+        return null;
+    const usage = readUsage(message.metadata);
+    const input = usage?.inputTokens ?? 0;
+    const output = usage?.outputTokens ?? 0;
+    const reasoning = usage?.reasoningTokens ?? 0;
+    const total = input + output + reasoning;
+    if (total === 0)
+        return null;
+    const model = metadataString(message.metadata, "model");
+    const rows = [
+        ...(model ? [{ label: "Model", value: model }] : []),
+        { label: "Input", value: formatTokens(input) },
+        { label: "Output", value: formatTokens(output) },
+        { label: "Total", value: formatTokens(total), bold: true },
+    ];
+    return (React.createElement(Popover, { open: open, onOpenChange: setOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement("button", { type: "button", className: cn("inline-flex items-center rounded-full px-2 h-7 text-xs tabular-nums text-[var(--faint)] transition-all hover:bg-[var(--tertiary)] hover:text-[var(--foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)]", 
+                // Hidden until the message is hovered — matching the action
+                // buttons — but stays visible while its popover is open.
+                "opacity-0 transition-opacity group-hover/msg:opacity-100 focus-visible:opacity-100", open && "opacity-100", className), "aria-label": `Token usage: ${total} total` }, formatTokens(total))),
+        React.createElement(PopoverContent, { align: "start", className: "min-w-[200px] rounded-lg p-3" },
+            React.createElement("p", { className: "mb-2 text-xs font-medium text-[var(--faint)]" }, "Token usage"),
+            React.createElement("div", { className: "flex flex-col gap-1.5" }, rows.map((row) => renderRow
+                ? React.createElement(React.Fragment, { key: row.label }, renderRow(row))
+                : React.createElement(TokenRow, { key: row.label, ...row }))))));
+}
+MessageTokens.displayName = "Message.Tokens";
 // ---------------------------------------------------------------------------
 // Message.BranchPicker
 // ---------------------------------------------------------------------------
@@ -175,12 +417,49 @@ function MessageBranchPicker() {
     return (React.createElement(BranchPickerImpl, { current: branch.current, total: branch.total, onPrev: onBranchPrev ?? (() => { }), onNext: onBranchNext ?? (() => { }) }));
 }
 MessageBranchPicker.displayName = "Message.BranchPicker";
-/** Message shape for message. */
-export const Message = Object.assign(MessageRoot, {
+// ---------------------------------------------------------------------------
+// Message.Continuing — "Continuing…" shimmer while the turn is still streaming
+// (Studio `ChatMessageView` showContinuing). Renders nothing when not streaming.
+// ---------------------------------------------------------------------------
+function MessageContinuing({ className, children }) {
+    const { isStreaming } = useMessageContext();
+    if (!isStreaming)
+        return null;
+    return (React.createElement("div", { className: cn("mt-3 text-sm", className) }, children ?? React.createElement(Shimmer, { duration: 1 }, "Continuing...")));
+}
+MessageContinuing.displayName = "Message.Continuing";
+/** The default anatomy rendered when `<Message>` gets no children. */
+function MessageDefault({ showSources = true, showSteps = true }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MessageHeader, null),
+        React.createElement(MessageContent, { showSources: showSources, showSteps: showSteps }),
+        React.createElement(MessageContinuing, null),
+        React.createElement("div", { className: "mt-1.5 flex items-center gap-0.5" },
+            React.createElement(MessageActionsWrapper, null),
+            React.createElement(MessageTokens, null))));
+}
+const MessageComponent = React.forwardRef(function Message({ children, showSources, showSteps, ...root }, ref) {
+    return (React.createElement(MessageRoot, { ref: ref, ...root }, children ??
+        React.createElement(MessageDefault, { showSources: showSources, showSteps: showSteps })));
+});
+MessageComponent.displayName = "Message";
+/**
+ * Message — render `<Message message={msg} />` for the default turn, or compose
+ * `Message.Root` + `Message.Header`/`Content`/`Actions`/… for a custom layout.
+ */
+export const Message = Object.assign(MessageComponent, {
     Root: MessageRoot,
     Avatar: MessageAvatar,
+    Header: MessageHeader,
     Content: MessageContent,
+    Part: MessagePart,
+    Sources: MessageSources,
     Actions: MessageActionsWrapper,
+    CopyAction: MessageCopyAction,
+    RegenerateAction: MessageRegenerateAction,
+    EditAction: MessageEditAction,
     Feedback: MessageFeedbackWrapper,
     BranchPicker: MessageBranchPicker,
+    Tokens: MessageTokens,
+    Continuing: MessageContinuing,
 });

package/esm/src/react/components/chat/chat/composition/model-avatar.d.ts

@@ -10,7 +10,12 @@ import * as React from "../../../../../../react/react.js";
 export interface ModelAvatarProps {
     model?: string;
     className?: string;
+    /**
+     * Fallback glyph shown when the provider can't be resolved to a brand logo.
+     * Defaults to the built-in {@link SparklesIcon}.
+     */
+    icon?: React.ReactNode;
 }
 /** Render model avatar. */
-export declare function ModelAvatar({ model, className }: ModelAvatarProps): React.ReactElement;
+export declare function ModelAvatar({ model, className, icon }: ModelAvatarProps): React.ReactElement;
 //# sourceMappingURL=model-avatar.d.ts.map

package/esm/src/react/components/chat/chat/composition/model-avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-avatar.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/model-avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAI1D,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+CD,2BAA2B;AAC3B,wBAAgB,WAAW,CACzB,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,GACrC,KAAK,CAAC,YAAY,CAsCpB"}
+{"version":3,"file":"model-avatar.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/model-avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAI1D,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AA+CD,2BAA2B;AAC3B,wBAAgB,WAAW,CACzB,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,gBAAgB,GAC3C,KAAK,CAAC,YAAY,CAsCpB"}

package/esm/src/react/components/chat/chat/composition/model-avatar.js

@@ -38,10 +38,10 @@ const PROVIDER_STYLES = {
     anthropic: "bg-[#181818]",
     openai: "bg-[var(--foreground)]",
     google: "bg-[var(--foreground)]",
-    unknown: "bg-[var(--muted-foreground)]",
+    unknown: "bg-[var(--faint)]",
 };
 /** Render model avatar. */
-export function ModelAvatar({ model, className }) {
+export function ModelAvatar({ model, className, icon }) {
     const provider = resolveProvider(model ?? "");
     const base = cn("mt-1 shrink-0 size-8 rounded-full flex items-center justify-center", PROVIDER_STYLES[provider], className);
     if (provider === "anthropic") {
@@ -56,6 +56,5 @@ export function ModelAvatar({ model, className }) {
         return (React.createElement("div", { className: base },
             React.createElement(GeminiLogo, { className: "size-4 text-[var(--background)]" })));
     }
-    return (React.createElement("div", { className: base },
-        React.createElement(SparklesIcon, { className: "size-4 text-[var(--background)]" })));
+    return (React.createElement("div", { className: base }, icon ?? React.createElement(SparklesIcon, { className: "size-4 text-[var(--background)]" })));
 }

package/esm/src/react/components/chat/chat/composition/pending-message.d.ts

@@ -0,0 +1,31 @@
+/**
+ * PendingMessage — the "waiting for a response" placeholder shown while the
+ * assistant turn hasn't started streaming yet.
+ *
+ * Rather than a floating avatar + bouncing dots, it mirrors the real assistant
+ * `Message.Header` anatomy: a `size-8` skeleton circle where the avatar sits
+ * (same size and position) and a skeleton bar where the agent name goes. When
+ * the first token arrives the real `Message` takes over in the same slot, so
+ * there's no layout jump.
+ *
+ * @module react/components/chat/composition/pending-message
+ */
+import * as React from "../../../../../../react/react.js";
+/** Props accepted by `<PendingMessage>`. */
+export interface PendingMessageProps {
+    className?: string;
+}
+/**
+ * Render the pending assistant header — a skeleton avatar + name. Matches
+ * `Message.Header`'s layout (`flex items-center gap-2 pt-px pb-1`) and the
+ * `AgentAvatar`'s `mt-1 size-8` so the skeleton circle lands exactly where the
+ * real avatar will.
+ *
+ * `!` overrides are required because the `Skeleton` primitive ships a base
+ * `h-4 w-full rounded-md` and `cn` does not tailwind-merge.
+ */
+export declare function PendingMessage({ className }: PendingMessageProps): React.ReactElement;
+export declare namespace PendingMessage {
+    var displayName: string;
+}
+//# sourceMappingURL=pending-message.d.ts.map

package/esm/src/react/components/chat/chat/composition/pending-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pending-message.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/pending-message.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAI1D,4CAA4C;AAC5C,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAC5B,EAAE,SAAS,EAAE,EAAE,mBAAmB,GACjC,KAAK,CAAC,YAAY,CAcpB;yBAhBe,cAAc"}

package/esm/src/react/components/chat/chat/composition/pending-message.js

@@ -0,0 +1,31 @@
+/**
+ * PendingMessage — the "waiting for a response" placeholder shown while the
+ * assistant turn hasn't started streaming yet.
+ *
+ * Rather than a floating avatar + bouncing dots, it mirrors the real assistant
+ * `Message.Header` anatomy: a `size-8` skeleton circle where the avatar sits
+ * (same size and position) and a skeleton bar where the agent name goes. When
+ * the first token arrives the real `Message` takes over in the same slot, so
+ * there's no layout jump.
+ *
+ * @module react/components/chat/composition/pending-message
+ */
+import * as React from "../../../../../../react/react.js";
+import { cn } from "../../theme.js";
+import { Skeleton } from "../../ui/skeleton.js";
+/**
+ * Render the pending assistant header — a skeleton avatar + name. Matches
+ * `Message.Header`'s layout (`flex items-center gap-2 pt-px pb-1`) and the
+ * `AgentAvatar`'s `mt-1 size-8` so the skeleton circle lands exactly where the
+ * real avatar will.
+ *
+ * `!` overrides are required because the `Skeleton` primitive ships a base
+ * `h-4 w-full rounded-md` and `cn` does not tailwind-merge.
+ */
+export function PendingMessage({ className }) {
+    return (React.createElement("output", { "aria-busy": "true", className: cn("flex w-full items-center gap-2 pt-px pb-1", className) },
+        React.createElement(Skeleton, { className: "mt-1 size-8! shrink-0 rounded-full! bg-[var(--edge)]!" }),
+        React.createElement(Skeleton, { className: "h-3.5! w-28! rounded-md! bg-[var(--edge)]!" }),
+        React.createElement("span", { className: "sr-only" }, "Waiting for a response...")));
+}
+PendingMessage.displayName = "PendingMessage";

package/esm/src/react/components/chat/chat/contexts/chat-context.d.ts

@@ -26,6 +26,10 @@ export interface ChatContextValue {
     model?: string;
     models: ModelOption[];
     onModelChange?: (modelId: string) => void;
+    agent?: {
+        name?: string;
+        avatarUrl?: string;
+    };
     attachments: AttachmentInfo[];
     onAttach?: (files: FileList) => void;
     onRemoveAttachment?: (id: string) => void;

package/esm/src/react/components/chat/chat/contexts/chat-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-context.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/contexts/chat-context.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEtE,kDAAkD;AAClD,MAAM,WAAW,gBAAgB;IAE/B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAGpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGlC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAGtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAG1C,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAG1C,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,UAAU,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAGhE,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAGlE,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGxD,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,IAAI,CAAC;IAG3B,KAAK,EAAE,SAAS,CAAC;CAClB;AAID,4BAA4B;AAC5B,wBAAgB,cAAc,IAAI,gBAAgB,CAQjD;AAED,4CAA4C;AAC5C,wBAAgB,sBAAsB,IAAI,gBAAgB,GAAG,IAAI,CAEhE;AAED,oCAAoC;AACpC,eAAO,MAAM,mBAAmB,yCAAuB,CAAC"}
+{"version":3,"file":"chat-context.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/contexts/chat-context.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEtE,kDAAkD;AAClD,MAAM,WAAW,gBAAgB;IAE/B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAGpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGlC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAGtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAK1C,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAG9C,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAG1C,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,UAAU,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAGhE,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAGlE,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGxD,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,IAAI,CAAC;IAG3B,KAAK,EAAE,SAAS,CAAC;CAClB;AAID,4BAA4B;AAC5B,wBAAgB,cAAc,IAAI,gBAAgB,CAQjD;AAED,4CAA4C;AAC5C,wBAAgB,sBAAsB,IAAI,gBAAgB,GAAG,IAAI,CAEhE;AAED,oCAAoC;AACpC,eAAO,MAAM,mBAAmB,yCAAuB,CAAC"}

package/esm/src/react/components/chat/chat/contexts/composer-context.d.ts

@@ -16,6 +16,7 @@ export interface ComposerContextValue {
     onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     attachments: AttachmentInfo[];
     onAttach?: (files: FileList) => void;
+    onSelectAttachment?: () => void;
     onRemoveAttachment?: (id: string) => void;
     attachAccept?: string;
     onSubmit: (e?: React.FormEvent) => void;