veryfront 0.1.997 → 0.1.998

package/esm/src/react/components/chat/chat/composition/chat-empty-state.js

@@ -0,0 +1,63 @@
+/**
+ * ChatEmptyState — the conversation idle / empty view: an agent avatar, a
+ * heading, and a row of suggestion chips. Ported 1:1 from Veryfront Studio's
+ * `ChatIdleView` family (`ChatIdleView` + `…Avatar` + `…Heading` +
+ * `Suggestions`/`SuggestionItem`), restyled onto the chat primitives.
+ *
+ * Composed via children — every part is a small, focused piece you arrange
+ * yourself, so there is no monolithic prop surface:
+ *
+ * ```tsx
+ * <ChatEmptyState.Root>
+ *   <ChatEmptyState.Avatar src={agent.avatarUrl} alt={agent.name} />
+ *   <ChatEmptyState.Heading>{agent.name}</ChatEmptyState.Heading>
+ *   <ChatEmptyState.Suggestions>
+ *     <ChatEmptyState.Suggestion onClick={() => send("Create a plan")}>
+ *       Create a plan
+ *     </ChatEmptyState.Suggestion>
+ *   </ChatEmptyState.Suggestions>
+ * </ChatEmptyState.Root>
+ * ```
+ *
+ * @module react/components/chat/composition/chat-empty-state
+ */
+import * as React from "../../../../../../react/react.js";
+import { cn } from "../../theme.js";
+import { Avatar, Button } from "../../ui/index.js";
+/** Centered container for the empty-state pieces. */
+function Root({ className, children, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, className: cn("flex flex-1 flex-col items-center justify-center gap-3.5 px-4", className), ...props }, children));
+}
+/**
+ * Hero agent avatar (64px). Renders the generic {@link Avatar} in `muted`
+ * tone — the agent's image when `src` resolves, otherwise its initial. Same as
+ * Studio's `ChatIdleView` avatar: agent identity comes from the data, not a
+ * bespoke component.
+ */
+function EmptyStateAvatar({ className, isCreating, src, alt = "Veryfront Agent", ...props }) {
+    return (React.createElement(Avatar, { name: alt, avatarSrc: src, tone: "muted", className: cn("size-16!", isCreating && "animate-pulse", className), ...props }));
+}
+/** Balanced, centered title (e.g. the agent name). */
+function Heading({ level = 2, className, children, ref, ...props }) {
+    const Tag = `h${level}`;
+    return (React.createElement(Tag, { ref: ref, className: cn("text-[1.375rem] font-semibold text-balance text-center leading-[1.2] tracking-normal text-[var(--foreground)]", className), ...props }, children));
+}
+/** Wrapping, centered row of suggestion chips. */
+function Suggestions({ className, role = "group", children, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, role: role, className: cn("mt-4 flex flex-wrap justify-center gap-2", className), ...props }, children));
+}
+/** A single filled suggestion chip. */
+function Suggestion({ className, size = "sm", children, ...props }) {
+    return (React.createElement(Button, { variant: "tertiary", size: size, className: cn("h-9! rounded-md! px-3.5", className), ...props }, children));
+}
+/**
+ * Compound empty state. Use the namespaced parts to compose the view:
+ * `Root`, `Avatar`, `Heading`, `Suggestions`, `Suggestion`.
+ */
+export const ChatEmptyState = {
+    Root,
+    Avatar: EmptyStateAvatar,
+    Heading,
+    Suggestions,
+    Suggestion,
+};

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

@@ -1,5 +1,8 @@
 /**
- * ChatEmpty — Empty state for the chat conversation.
+ * ChatEmpty — the preset's empty state, composed from the `ChatEmptyState`
+ * primitive (`Root` + `Avatar`/icon + `Heading` + `Suggestions`/`Suggestion`)
+ * plus optional `QuickActions`. Prop-driven wrapper so `<Chat>` can render an
+ * empty state from data; drop to `ChatEmptyState.*` directly for full control.
  *
  * @module react/components/chat/composition/chat-empty
  */

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

@@ -1 +1 @@
-{"version":3,"file":"chat-empty.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/chat-empty.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,gCAAgC,CAAC;AAEhF,oCAAoC;AACpC,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAyB;AACzB,eAAO,MAAM,SAAS,uFAoDrB,CAAC"}
+{"version":3,"file":"chat-empty.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/chat-empty.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAE1D,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,gCAAgC,CAAC;AAEhF,oCAAoC;AACpC,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAyB;AACzB,eAAO,MAAM,SAAS,uFAgDrB,CAAC"}

package/esm/src/react/components/chat/chat/composition/chat-empty.js

@@ -1,24 +1,25 @@
 /**
- * ChatEmpty — Empty state for the chat conversation.
+ * ChatEmpty — the preset's empty state, composed from the `ChatEmptyState`
+ * primitive (`Root` + `Avatar`/icon + `Heading` + `Suggestions`/`Suggestion`)
+ * plus optional `QuickActions`. Prop-driven wrapper so `<Chat>` can render an
+ * empty state from data; drop to `ChatEmptyState.*` directly for full control.
  *
  * @module react/components/chat/composition/chat-empty
  */
 import * as React from "../../../../../../react/react.js";
-import { cn } from "../../theme.js";
-import { ConversationEmptyState, Suggestion, Suggestions } from "../components/empty-state.js";
+import { ChatEmptyState } from "./chat-empty-state.js";
 import { QuickActions } from "../components/quick-actions.js";
 /** Render chat empty. */
 export const ChatEmpty = React.forwardRef(function ChatEmpty({ icon, title = "What can I help with?", description, suggestions, onSuggestionClick, quickActions, onQuickAction, className, children, }, ref) {
     const showSuggestions = (suggestions?.length ?? 0) > 0;
     const showQuickActions = (quickActions?.length ?? 0) > 0;
-    return (React.createElement("div", { ref: ref, className: cn("flex flex-col items-center justify-center h-full px-4", className) },
-        React.createElement("div", { className: "flex-1" }),
-        React.createElement(ConversationEmptyState, { icon: icon, title: title, description: description }),
-        showSuggestions && (React.createElement("div", { className: "w-full max-w-2xl mt-6" },
-            React.createElement(Suggestions, { layout: "grid" }, suggestions?.map((suggestion) => (React.createElement(Suggestion, { key: suggestion, suggestion: suggestion, onClick: onSuggestionClick })))))),
+    return (React.createElement(ChatEmptyState.Root, { ref: ref, className: className },
+        icon,
+        React.createElement(ChatEmptyState.Heading, null, title),
+        description && (React.createElement("p", { className: "max-w-md text-center text-sm text-[var(--foreground)]" }, description)),
+        showSuggestions && (React.createElement(ChatEmptyState.Suggestions, null, suggestions?.map((suggestion) => (React.createElement(ChatEmptyState.Suggestion, { key: suggestion, onClick: () => onSuggestionClick?.(suggestion) }, suggestion))))),
         showQuickActions && (React.createElement("div", { className: "mt-4" },
             React.createElement(QuickActions, { actions: quickActions, onActionClick: onQuickAction }))),
-        children,
-        React.createElement("div", { className: "flex-1" })));
+        children));
 });
 ChatEmpty.displayName = "ChatEmpty";

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

@@ -1,8 +1,9 @@
 /**
- * ChatMessageList — Message rendering loop with component injection.
+ * ChatMessageList — Message rendering loop, composed from the `Message` primitive.
  *
- * Renders user and assistant messages with support for branching, editing,
- * feedback, sources, reasoning, tool calls, and step indicators.
+ * Every turn renders through `<Message message={…} />` so the `<Chat>` transcript
+ * is identical to the standalone `Message` component (header, reasoning, tools,
+ * sources, tokens, hover actions). Pass `renderMessage` to override a row.
  *
  * @module react/components/chat/composition/chat-message-list
  */
@@ -23,6 +24,11 @@ export interface ChatMessageListProps {
     showSources?: boolean;
     showSteps?: boolean;
     showScrollButton?: boolean;
+    /** Override the scroll-to-bottom button; receives the click handler + pin state. */
+    renderScrollButton?: (opts: {
+        onClick: () => void;
+        isAtBottom: boolean;
+    }) => React.ReactNode;
     onSourceClick?: (source: Source, index: number) => void;
     inferenceMode?: InferenceMode;
     editMessage?: (messageId: string, newText: string) => Promise<void>;
@@ -30,6 +36,8 @@ export interface ChatMessageListProps {
     switchBranch?: (messageId: string, branchIndex: number) => void;
     onFeedback?: (messageId: string, feedback: FeedbackValue) => void;
     className?: string;
+    /** Classes for the inner centered content column (default `max-w-[850px]`). */
+    contentClassName?: string;
     children?: React.ReactNode;
 }
 /** Render chat message list. */

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

@@ -1 +1 @@
-{"version":3,"file":"chat-message-list.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/chat-message-list.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAE1D,OAAO,KAAK,EACV,UAAU,EACV,mBAAmB,EACnB,WAAW,EACX,YAAY,EACZ,aAAa,EACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAgBhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAIvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AA4BvE,2CAA2C;AAC3C,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAGlB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,GAAG,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,aAAa,CAAC;IAG9B,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;IAElE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gCAAgC;AAChC,eAAO,MAAM,eAAe,6FA0G3B,CAAC"}
+{"version":3,"file":"chat-message-list.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/chat-message-list.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAE1D,OAAO,KAAK,EACV,UAAU,EACV,mBAAmB,EACnB,WAAW,EACX,YAAY,EACZ,aAAa,EACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAMvE,2CAA2C;AAC3C,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAGlB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,GAAG,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oFAAoF;IACpF,kBAAkB,CAAC,EAAE,CACnB,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAC/C,KAAK,CAAC,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,aAAa,CAAC;IAG9B,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;IAElE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gCAAgC;AAChC,eAAO,MAAM,eAAe,6FA4J3B,CAAC"}

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

@@ -1,123 +1,93 @@
 /**
- * ChatMessageList — Message rendering loop with component injection.
+ * ChatMessageList — Message rendering loop, composed from the `Message` primitive.
  *
- * Renders user and assistant messages with support for branching, editing,
- * feedback, sources, reasoning, tool calls, and step indicators.
+ * Every turn renders through `<Message message={…} />` so the `<Chat>` transcript
+ * is identical to the standalone `Message` component (header, reasoning, tools,
+ * sources, tokens, hover actions). Pass `renderMessage` to override a row.
  *
  * @module react/components/chat/composition/chat-message-list
  */
 import * as React from "../../../../../../react/react.js";
-import { MessageItem, MessageList } from "../../../../primitives/index.js";
+import { MessageList } from "../../../../primitives/index.js";
 import { cn } from "../../theme.js";
-import { Markdown } from "../../markdown.js";
-import { extractSourcesFromParts, getTextContent, groupPartsInOrder, isSkillToolPart, } from "../utils/message-parts.js";
 import { ConversationScrollButton } from "../components/empty-state.js";
-import { MessageActions } from "../components/message-actions.js";
-import { ReasoningCard } from "../components/reasoning.js";
-import { SkillBadge } from "../components/skill-badge.js";
-import { ToolCallCard } from "../components/tool-ui.js";
-import { Sources } from "../components/sources.js";
-import { MessageEditForm } from "../components/message-edit-form.js";
-import { BranchPicker } from "../components/branch-picker.js";
-import { MessageFeedback } from "../components/message-feedback.js";
-import { StepIndicator } from "../components/step-indicator.js";
-import { AgentAvatar } from "./agent-avatar.js";
-import { ModelAvatar } from "./model-avatar.js";
-function metadataString(metadata, key) {
-    const value = metadata?.[key];
-    return typeof value === "string" && value.trim().length > 0 ? value : undefined;
-}
-function getAssistantIdentity(message) {
-    return {
-        model: metadataString(message.metadata, "model"),
-        agentName: metadataString(message.metadata, "agentName") ??
-            metadataString(message.metadata, "agentId"),
-        agentAvatarUrl: metadataString(message.metadata, "agentAvatarUrl"),
-    };
-}
+import { useStickToBottom } from "../hooks/use-stick-to-bottom.js";
+import { PendingMessage } from "./pending-message.js";
+import { Message } from "./message.js";
 /** Render chat message list. */
-export const ChatMessageList = React.forwardRef(function ChatMessageList({ messages, isLoading, theme, renderMessage, renderTool, model, showMessageActions = true, showSources = false, showSteps = false, showScrollButton = false, onSourceClick, inferenceMode: _inferenceMode, editMessage, getBranches, switchBranch, onFeedback, className, children, }, ref) {
-    const messagesEndRef = React.useRef(null);
-    const [editingMessageId, setEditingMessageId] = React.useState(null);
-    const [feedbackMap, setFeedbackMap] = React.useState({});
-    const handleFeedback = React.useCallback((msgId, value) => {
-        setFeedbackMap((prev) => ({ ...prev, [msgId]: value }));
-        onFeedback?.(msgId, value);
-    }, [onFeedback]);
-    const messageCount = messages.length;
+export const ChatMessageList = React.forwardRef(function ChatMessageList({ messages, isLoading, renderMessage, renderTool, showSources = false, showSteps = false, showScrollButton = false, renderScrollButton, onSourceClick, inferenceMode: _inferenceMode, editMessage, getBranches, switchBranch, onFeedback, className, contentClassName, children, }, ref) {
+    // Stick-to-bottom: auto-scroll on new messages only while pinned, and drive
+    // the scroll-to-bottom button's visibility off `isAtBottom`.
+    const { scrollRef, contentRef, isAtBottom, scrollToBottom } = useStickToBottom(messages.length);
+    // Fade the top edge once the user scrolls down, so messages dissolve under
+    // whatever sits above the list (e.g. a borderless header) instead of a hard
+    // cut. Top-only: the bottom is never masked, so nothing is clipped at rest.
+    const [topFaded, setTopFaded] = React.useState(false);
     React.useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, [messageCount]);
-    return (React.createElement(MessageList, { ref: ref, className: cn("flex-1 min-h-0 overflow-y-auto relative", className) },
-        React.createElement("div", { className: "max-w-2xl mx-auto px-4 py-6 space-y-6" },
-            messages.map((msg) => {
-                if (renderMessage) {
-                    return React.createElement(React.Fragment, { key: msg.id }, renderMessage(msg));
-                }
-                if (msg.role === "user") {
-                    return (React.createElement(UserMessage, { key: msg.id, message: msg, theme: theme, isEditing: editingMessageId === msg.id, onStartEdit: () => setEditingMessageId(msg.id), onCancelEdit: () => setEditingMessageId(null), editMessage: editMessage, getBranches: getBranches, switchBranch: switchBranch }));
-                }
-                return (React.createElement(AssistantMessage, { key: msg.id, message: msg, theme: theme, renderTool: renderTool, showMessageActions: showMessageActions, showSources: showSources, showSteps: showSteps, onSourceClick: onSourceClick, onFeedback: onFeedback ? handleFeedback : undefined, feedbackMap: feedbackMap }));
-            }),
-            isLoading && messages[messages.length - 1]?.role !== "assistant" && (React.createElement("div", { className: "flex items-start gap-3" },
-                React.createElement(ModelAvatar, { model: model }),
-                React.createElement("div", { className: "flex gap-1.5 items-center py-3" },
-                    React.createElement("span", { className: cn(theme?.loading) }),
-                    React.createElement("span", { className: cn(theme?.loading), style: { animationDelay: "0.15s" } }),
-                    React.createElement("span", { className: cn(theme?.loading), style: { animationDelay: "0.3s" } })))),
-            React.createElement("div", { ref: messagesEndRef })),
-        children,
-        showScrollButton && (React.createElement(ConversationScrollButton, { onClick: () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }))));
+        const el = scrollRef.current;
+        if (!el)
+            return undefined;
+        const onScroll = () => setTopFaded(el.scrollTop > 8);
+        onScroll();
+        el.addEventListener("scroll", onScroll, { passive: true });
+        return () => el.removeEventListener("scroll", onScroll);
+    }, [scrollRef]);
+    // Merge the forwarded ref with the stick-to-bottom scroll container ref.
+    const setListRef = React.useCallback((node) => {
+        scrollRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref, scrollRef]);
+    const lastMessage = messages[messages.length - 1];
+    // Force-scroll to the bottom when the user submits a new message, even if
+    // they'd scrolled up into history. `useStickToBottom` only *follows* growth
+    // while already pinned, so a fresh user turn from a scrolled-up position
+    // would otherwise stay off-screen. Scrolling re-pins the view (the scroll
+    // listener flips `isAtBottom` back to true), so the streaming response then
+    // follows normally.
+    const lastUserIdRef = React.useRef(undefined);
+    React.useEffect(() => {
+        if (lastMessage?.role !== "user")
+            return;
+        if (lastMessage.id === lastUserIdRef.current)
+            return;
+        lastUserIdRef.current = lastMessage.id;
+        scrollToBottom("smooth");
+    }, [lastMessage, scrollToBottom]);
+    return (
+    // The scroll button must overlay the *visible* viewport, so it lives in a
+    // non-scrolling `relative` wrapper as a sibling of the scroll container —
+    // not inside it, where `absolute bottom-4` would anchor to the bottom of
+    // the full scrollable content and scroll away with the messages.
+    React.createElement("div", { className: cn("relative flex-1 min-h-0 flex flex-col", className) },
+        React.createElement(MessageList, { ref: setListRef, className: cn("flex-1 min-h-0 overflow-y-auto", topFaded && "[mask-image:linear-gradient(to_bottom,transparent,black_1.5rem)]") },
+            React.createElement("div", { ref: contentRef, className: cn("max-w-[850px] mx-auto px-9 py-6 space-y-6", contentClassName) },
+                messages.map((msg) => {
+                    if (renderMessage) {
+                        return (React.createElement(React.Fragment, { key: msg.id }, renderMessage(msg)));
+                    }
+                    // The last assistant turn shimmers while a response is streaming.
+                    const isStreaming = Boolean(isLoading && msg === lastMessage && msg.role === "assistant");
+                    return (React.createElement(Message, { key: msg.id, message: msg, isStreaming: isStreaming, showSources: showSources, showSteps: showSteps, editMessage: editMessage, getBranches: getBranches, switchBranch: switchBranch, onFeedback: onFeedback }, renderTool
+                        ? (React.createElement(React.Fragment, null,
+                            React.createElement(Message.Header, null),
+                            React.createElement(Message.Content, { showSources: showSources, showSteps: showSteps, renderTool: renderTool, onSourceClick: onSourceClick }),
+                            React.createElement(Message.Continuing, null),
+                            React.createElement("div", { className: "mt-1.5 flex items-center gap-0.5" },
+                                React.createElement(Message.Actions, null),
+                                React.createElement(Message.Tokens, null))))
+                        : undefined));
+                }),
+                isLoading && lastMessage?.role !== "assistant" && React.createElement(PendingMessage, null)),
+            children),
+        showScrollButton && (renderScrollButton
+            ? renderScrollButton({
+                onClick: () => scrollToBottom("smooth"),
+                isAtBottom,
+            })
+            : (!isAtBottom && React.createElement(ConversationScrollButton, { onClick: () => scrollToBottom("smooth") })))));
 });
 ChatMessageList.displayName = "ChatMessageList";
-function UserMessage({ message: msg, theme, isEditing, onStartEdit, onCancelEdit, editMessage, getBranches, switchBranch, }) {
-    const content = getTextContent(msg);
-    const branches = getBranches?.(msg.id);
-    const hasBranches = branches && branches.total > 1;
-    return (React.createElement(MessageItem, { role: msg.role, className: cn("flex flex-col items-end", "group/msg") },
-        isEditing
-            ? (React.createElement("div", { className: "w-full max-w-md" },
-                React.createElement(MessageEditForm, { initialContent: content, onSave: (text) => {
-                        onCancelEdit();
-                        editMessage?.(msg.id, text);
-                    }, onCancel: onCancelEdit })))
-            : (React.createElement("div", { className: theme?.message?.user },
-                React.createElement("p", { className: "whitespace-pre-wrap text-[15px] leading-relaxed" }, content))),
-        !isEditing && (React.createElement("div", { className: "flex items-center gap-2 mt-1" },
-            hasBranches && (React.createElement(BranchPicker, { current: branches.current, total: branches.total, onPrev: () => switchBranch?.(msg.id, branches.current - 2), onNext: () => switchBranch?.(msg.id, branches.current) })),
-            editMessage && React.createElement(MessageActions, { content: content, onEdit: onStartEdit })))));
-}
-function AssistantMessage({ message: msg, theme, renderTool, showMessageActions = true, showSources = false, showSteps = false, onSourceClick, onFeedback, feedbackMap, }) {
-    const partGroups = groupPartsInOrder(msg.parts);
-    const stepCount = partGroups.filter((g) => g.type === "step").length;
-    const textContent = getTextContent(msg);
-    const messageSources = showSources ? extractSourcesFromParts(msg.parts) : [];
-    const identity = getAssistantIdentity(msg);
-    return (React.createElement(MessageItem, { role: msg.role, className: cn("flex items-start gap-3", "justify-start", "group/msg") },
-        React.createElement(AgentAvatar, { name: identity.agentName, avatarUrl: identity.agentAvatarUrl, model: identity.model }),
-        React.createElement("div", { className: cn(theme?.message?.assistant, "flex-1 min-w-0") },
-            identity.agentName && (React.createElement("div", { className: "mb-1 text-xs font-medium text-[var(--muted-foreground)]" }, identity.agentName)),
-            partGroups.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 })));
-            }),
-            (showMessageActions || onFeedback) && textContent && (React.createElement("div", { className: "flex items-center gap-1 mt-1" },
-                showMessageActions && React.createElement(MessageActions, { content: textContent }),
-                onFeedback && (React.createElement(MessageFeedback, { messageId: msg.id, feedback: feedbackMap[msg.id], onFeedback: onFeedback })))),
-            messageSources.length > 0 && (React.createElement(Sources, { sources: messageSources, onSourceClick: onSourceClick })))));
-}

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

@@ -28,6 +28,10 @@ export interface ChatRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     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/composition/chat-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-root.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/chat-root.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;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;AAGhD,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;AAItE,mCAAmC;AACnC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAGrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGnC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAGtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAG1C,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,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,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGxD,KAAK,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAwB;AACxB,eAAO,MAAM,QAAQ,sFAkHpB,CAAC"}
+{"version":3,"file":"chat-root.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/chat-root.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;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;AAGhD,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;AAItE,mCAAmC;AACnC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAGrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGnC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAGtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAG1C,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAG9C,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,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,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGxD,KAAK,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAwB;AACxB,eAAO,MAAM,QAAQ,sFAqHpB,CAAC"}

package/esm/src/react/components/chat/chat/composition/chat-root.js

@@ -12,7 +12,7 @@ import { getDocumentNonce } from "../../csp-nonce.js";
 import { cn, defaultChatTheme, generateTokenCSS, mergeThemes } from "../../theme.js";
 import { ChatContextProvider } from "../contexts/chat-context.js";
 /** Render chat root. */
-export const ChatRoot = React.forwardRef(function ChatRoot({ children, messages, isLoading = false, error = null, input, setInput, onSubmit, onStop, onReload, model, models = [], onModelChange, attachments = [], onAttach, onRemoveAttachment, editMessage, getBranches, switchBranch, onFeedback, showSources = false, onSourceClick, theme: userTheme, maxHeight = "100%", className, style, ...containerProps }, ref) {
+export const ChatRoot = React.forwardRef(function ChatRoot({ children, messages, isLoading = false, error = null, input, setInput, onSubmit, onStop, onReload, model, models = [], onModelChange, agent, attachments = [], onAttach, onRemoveAttachment, editMessage, getBranches, switchBranch, onFeedback, showSources = false, onSourceClick, theme: userTheme, maxHeight = "100%", className, style, ...containerProps }, ref) {
     const theme = React.useMemo(() => mergeThemes(defaultChatTheme, userTheme), [userTheme]);
     const nonce = getDocumentNonce();
     const tokenCSS = React.useMemo(() => generateTokenCSS(), []);
@@ -36,6 +36,7 @@ export const ChatRoot = React.forwardRef(function ChatRoot({ children, messages,
         model,
         models,
         onModelChange,
+        agent,
         attachments,
         onAttach,
         onRemoveAttachment,
@@ -61,6 +62,7 @@ export const ChatRoot = React.forwardRef(function ChatRoot({ children, messages,
         model,
         models,
         onModelChange,
+        agent,
         attachments,
         onAttach,
         onRemoveAttachment,

package/esm/src/react/components/chat/chat/composition/error-banner.d.ts

@@ -9,6 +9,10 @@ export interface ErrorBannerProps {
     error: Error;
     onRetry?: () => void;
     className?: string;
+    /** Override the retry glyph. Defaults to the built-in refresh icon. */
+    icon?: React.ReactNode;
+    /** Label for the retry button. Defaults to "Retry". */
+    retryLabel?: string;
 }
 /** Render error banner. */
 export declare const ErrorBanner: React.ForwardRefExoticComponent<ErrorBannerProps & React.RefAttributes<HTMLDivElement>>;

package/esm/src/react/components/chat/chat/composition/error-banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-banner.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/error-banner.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAI1D,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,2BAA2B;AAC3B,eAAO,MAAM,WAAW,yFAoBvB,CAAC"}
+{"version":3,"file":"error-banner.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/composition/error-banner.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAM1D,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,2BAA2B;AAC3B,eAAO,MAAM,WAAW,yFAqBvB,CAAC"}

package/esm/src/react/components/chat/chat/composition/error-banner.js

@@ -6,13 +6,16 @@
 import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
 import { RefreshCwIcon } from "../../icons/index.js";
+import { Alert, AlertAction, AlertContent } from "../../ui/alert.js";
+import { Button } from "../../ui/button.js";
 /** Render error banner. */
-export const ErrorBanner = React.forwardRef(function ErrorBanner({ error, onRetry, className }, ref) {
-    return (React.createElement("div", { ref: ref, className: cn("max-w-2xl mx-auto px-4 pb-2", className) },
-        React.createElement("div", { className: "px-4 py-3 bg-red-50 rounded-2xl text-red-600 text-sm flex items-center justify-between gap-3 border border-red-100" },
-            React.createElement("span", null, error.message),
-            onRetry && (React.createElement("button", { type: "button", onClick: onRetry, className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-red-600 bg-red-100 hover:bg-red-200 rounded-full transition-colors" },
-                React.createElement(RefreshCwIcon, { className: "size-3" }),
-                "Retry")))));
+export const ErrorBanner = React.forwardRef(function ErrorBanner({ error, onRetry, className, icon, retryLabel = "Retry" }, ref) {
+    return (React.createElement("div", { ref: ref, className: cn("max-w-2xl mx-auto px-4 pb-3", className) },
+        React.createElement(Alert, { variant: "error" },
+            React.createElement(AlertContent, null, error.message),
+            onRetry && (React.createElement(AlertAction, null,
+                React.createElement(Button, { variant: "link", size: "sm", onClick: onRetry },
+                    icon ?? React.createElement(RefreshCwIcon, { className: "size-3.5" }),
+                    retryLabel))))));
 });
 ErrorBanner.displayName = "ErrorBanner";