veryfront 0.1.1048 → 0.1.1049

package/esm/src/react/components/chat/agent-picker-context.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { COMPONENT_ERROR } from "../../../errors/error-registry.js";
+export const AgentPickerContext = React.createContext(null);
+/** Read the enclosing `AgentPicker` state. */
+export function useAgentPicker() {
+    const context = React.useContext(AgentPickerContext);
+    if (!context) {
+        throw COMPONENT_ERROR.create({
+            detail: "useAgentPicker must be used within an AgentPicker",
+        });
+    }
+    return context;
+}

package/esm/src/react/components/chat/agent-picker.d.ts

@@ -13,7 +13,11 @@
  *
  * @module react/components/chat/agent-picker
  */
-import * as React from "../../../../react/react.js";
+import * as React from "react";
+import { type AgentPickerContextValue, useAgentPicker } from "./agent-picker-context.js";
+import { type AgentPickerActionProps, AgentPickerCreate, AgentPickerManage } from "./agent-picker-actions.js";
+export type { AgentPickerActionProps, AgentPickerContextValue };
+export { useAgentPicker };
 /** A selectable agent entry. */
 export interface AgentOption {
     /** Stable identifier — used as the selection value. */
@@ -31,15 +35,6 @@ export interface AgentPickerSection {
     label?: string;
     agents: AgentOption[];
 }
-/**
- * Icon overrides for {@link AgentPicker}. Each defaults to the built-in glyph.
- */
-export interface AgentPickerIcons {
-    check?: React.ReactNode;
-    chevron?: React.ReactNode;
-    create?: React.ReactNode;
-    more?: React.ReactNode;
-}
 /** Props accepted by `<AgentPicker>`. */
 export interface AgentPickerProps {
     /** Agents shown in the default (top) group. */
@@ -64,58 +59,53 @@ export interface AgentPickerProps {
     isLoading?: boolean;
     /** Additional class names for the trigger. */
     className?: string;
-    /** Override any of the picker icons. */
-    icons?: AgentPickerIcons;
     /**
      * Compose your own menu from `AgentPicker.Trigger` / `Content` / `List` /
      * `Item`. When omitted, the default data-driven preset is rendered.
      */
     children?: React.ReactNode;
 }
-/** Shared selection + open state exposed to `AgentPicker.*` sub-parts. */
-export interface AgentPickerContextValue {
-    /** Selected agent id. */
-    value?: string;
-    /** Select an agent by id (also closes the menu). */
-    onSelect: (id: string) => void;
-    /** Popover open state. */
-    open: boolean;
-    /** Set the popover open state (notifies `onOpenChange`). */
-    setOpen: (open: boolean) => void;
-    /** Icon overrides passed to the picker. */
-    icons?: AgentPickerIcons;
-}
-/**
- * Read the enclosing `AgentPicker` selection + open state. Throws when used
- * outside an `<AgentPicker>`.
- */
-export declare function useAgentPicker(): AgentPickerContextValue;
 /** Props for `AgentPicker.Trigger` — the pill/input combobox button. */
 export interface AgentPickerTriggerProps {
     /** Render as an input-style field instead of a pill. */
     inputStyle?: boolean;
     /** Mark the input-style trigger invalid. */
     invalid?: boolean;
+    /** Override the trailing chevron glyph. */
+    icon?: React.ReactNode;
     /** Override the trigger contents; defaults to the selected agent's row. */
     children?: React.ReactNode;
     className?: string;
 }
 /** The pill (or input-style) combobox trigger. Toggles the popover. */
-declare function AgentPickerTrigger({ inputStyle, invalid, children, className }: AgentPickerTriggerProps): React.ReactElement;
+declare function AgentPickerTrigger({ inputStyle, invalid, icon, children, className }: AgentPickerTriggerProps): React.ReactElement;
 declare namespace AgentPickerTrigger {
     var displayName: string;
 }
+/** Props for `AgentPicker.Search` — the addressable search input leaf. */
+export interface AgentPickerSearchProps {
+    /** Search input placeholder. */
+    placeholder?: string;
+    className?: string;
+}
+/**
+ * The search input row. An addressable leaf so a consumer composing
+ * `AgentPicker.Content` can place / restyle / omit it. Reads the filter query
+ * state straight from the enclosing `Command` context (via `CommandInput`) —
+ * no prop-drilling. This is the same markup `AgentPicker.Content` renders for
+ * its default (search-gated) anatomy.
+ */
+declare function AgentPickerSearch({ placeholder, className }: AgentPickerSearchProps): React.ReactElement;
+declare namespace AgentPickerSearch {
+    var displayName: string;
+}
 /** Props for `AgentPicker.Content` — the popover surface + `Command` shell. */
 export interface AgentPickerContentProps {
-    /** Show the search input above the list. */
-    showSearch?: boolean;
-    /** Search input placeholder. */
-    searchPlaceholder?: string;
     children?: React.ReactNode;
     className?: string;
 }
 /** The popover surface wrapping a `Command` (search + list region). */
-declare function AgentPickerContent({ showSearch, searchPlaceholder, children, className, }: AgentPickerContentProps): React.ReactElement;
+declare function AgentPickerContent({ children, className }: AgentPickerContentProps): React.ReactElement;
 declare namespace AgentPickerContent {
     var displayName: string;
 }
@@ -133,10 +123,12 @@ export interface AgentPickerItemProps {
     agent: AgentOption;
     /** Force selected styling; defaults to matching the context `value`. */
     selected?: boolean;
+    /** Override the selection-check glyph. */
+    icon?: React.ReactNode;
     className?: string;
 }
 /** A single agent row (Avatar + name + selection check). */
-declare function AgentPickerItem({ agent, selected, className }: AgentPickerItemProps): React.ReactElement;
+declare function AgentPickerItem({ agent, selected, icon, className }: AgentPickerItemProps): React.ReactElement;
 declare namespace AgentPickerItem {
     var displayName: string;
 }
@@ -145,22 +137,23 @@ declare namespace AgentPickerItem {
  * renders the default data-driven preset; pass children to recompose from
  * `AgentPicker.Trigger` / `Content` / `List` / `Item`.
  */
-declare function AgentPickerRoot({ agents, value, onValueChange, sections, onManage, onCreate, onOpenChange, inputStyle, invalid, isLoading, className, icons, children, }: AgentPickerProps): React.ReactElement;
+declare function AgentPickerRoot({ agents, value, onValueChange, sections, onManage, onCreate, onOpenChange, inputStyle, invalid, isLoading, className, children, }: AgentPickerProps): React.ReactElement;
 declare namespace AgentPickerRoot {
     var displayName: string;
 }
 /**
  * AgentPicker — render `<AgentPicker agents={...} .../>` for the default
- * data-driven combobox, or compose `AgentPicker.Trigger` / `Content` / `List` /
- * `Item` for a custom menu. Mirrors the `ToolCall` compound: render it, or
- * compose it.
+ * data-driven combobox, or compose `AgentPicker.Trigger`, `Content`, `Search`,
+ * `List`, `Item`, `Create`, and `Manage` for a custom menu.
  */
 export declare const AgentPicker: typeof AgentPickerRoot & {
     Root: typeof AgentPickerRoot;
     Trigger: typeof AgentPickerTrigger;
     Content: typeof AgentPickerContent;
+    Search: typeof AgentPickerSearch;
     List: typeof AgentPickerList;
     Item: typeof AgentPickerItem;
+    Create: typeof AgentPickerCreate;
+    Manage: typeof AgentPickerManage;
 };
-export {};
 //# sourceMappingURL=agent-picker.d.ts.map

package/esm/src/react/components/chat/agent-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-picker.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/chat/agent-picker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"agent-picker.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/chat/agent-picker.tsx"],"names":[],"mappings":"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"}

package/esm/src/react/components/chat/agent-picker.js

@@ -13,14 +13,16 @@
  *
  * @module react/components/chat/agent-picker
  */
-import * as React from "../../../../react/react.js";
+import * as React from "react";
 import { cn } from "./theme.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../ui/command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
 import { Pill } from "../ui/pill.js";
 import { Avatar } from "../ui/avatar.js";
-import { CheckIcon, ChevronDownIcon, PlusIcon, SparklesIcon } from "../ui/icons/index.js";
-import { COMPONENT_ERROR } from "../../../errors/error-registry.js";
+import { CheckIcon, ChevronDownIcon } from "../ui/icons/index.js";
+import { AgentPickerContext, useAgentPicker, } from "./agent-picker-context.js";
+import { AgentPickerCreate, AgentPickerManage, } from "./agent-picker-actions.js";
+export { useAgentPicker };
 /** Search box appears once the combined agent count crosses this. */
 const SEARCH_THRESHOLD = 5;
 const LOADING_ROW_WIDTHS = ["w-3/5", "w-3/4", "w-2/3"];
@@ -48,23 +50,9 @@ function AgentPickerLoadingRows() {
             React.createElement("div", { className: "size-5 shrink-0 rounded-full bg-[var(--accent)] animate-pulse" }),
             React.createElement("div", { className: cn("h-3 rounded-md bg-[var(--accent)] animate-pulse", widthClass) }))))));
 }
-const AgentPickerContext = React.createContext(null);
-/**
- * Read the enclosing `AgentPicker` selection + open state. Throws when used
- * outside an `<AgentPicker>`.
- */
-export function useAgentPicker() {
-    const ctx = React.useContext(AgentPickerContext);
-    if (!ctx) {
-        throw COMPONENT_ERROR.create({
-            detail: "useAgentPicker must be used within a AgentPicker",
-        });
-    }
-    return ctx;
-}
 /** The pill (or input-style) combobox trigger. Toggles the popover. */
-function AgentPickerTrigger({ inputStyle = false, invalid = false, children, className }) {
-    const { value, icons } = useAgentPicker();
+function AgentPickerTrigger({ inputStyle = false, invalid = false, icon, children, className }) {
+    const { value } = useAgentPicker();
     const sections = React.useContext(AgentDataContext);
     const selected = sections ? findAgent(value, sections.agents, sections.sections) : undefined;
     const triggerLabel = selected?.name ?? "Select agent";
@@ -72,21 +60,29 @@ function AgentPickerTrigger({ inputStyle = false, invalid = false, children, cla
         selected && (React.createElement(Avatar, { name: selected.name, avatarSrc: selected.avatarSrc, tone: "muted", "aria-hidden": "true", className: "size-5! bg-[var(--background)]" })),
         React.createElement("span", { className: "min-w-0 truncate" }, triggerLabel),
         inputStyle
-            ? (icons?.chevron ??
-                React.createElement(ChevronDownIcon, { className: "ml-auto size-3.5 opacity-50" }))
-            : (icons?.chevron ?? React.createElement(ChevronDownIcon, { className: "ml-auto" }))));
+            ? (icon ?? React.createElement(ChevronDownIcon, { className: "ml-auto size-3.5 opacity-50" }))
+            : (icon ?? React.createElement(ChevronDownIcon, { className: "ml-auto" }))));
     const trigger = inputStyle
         ? (React.createElement("button", { type: "button", "data-invalid": invalid || undefined, className: cn("flex w-full items-center gap-2.5 rounded-md border border-[var(--input-border)] bg-[var(--input-bg)] h-[50px] px-3 text-base text-[var(--foreground)]", "data-[invalid=true]:border-[var(--status-error)]", className) }, content))
         : (React.createElement(Pill, { className: cn("min-w-0 max-w-full", className) }, content));
     return React.createElement(PopoverTrigger, { asChild: true }, trigger);
 }
 AgentPickerTrigger.displayName = "AgentPicker.Trigger";
+/**
+ * The search input row. An addressable leaf so a consumer composing
+ * `AgentPicker.Content` can place / restyle / omit it. Reads the filter query
+ * state straight from the enclosing `Command` context (via `CommandInput`) —
+ * no prop-drilling. This is the same markup `AgentPicker.Content` renders for
+ * its default (search-gated) anatomy.
+ */
+function AgentPickerSearch({ placeholder = "Search agents...", className }) {
+    return React.createElement(CommandInput, { placeholder: placeholder, className: className });
+}
+AgentPickerSearch.displayName = "AgentPicker.Search";
 /** The popover surface wrapping a `Command` (search + list region). */
-function AgentPickerContent({ showSearch = false, searchPlaceholder = "Search agents...", children, className, }) {
+function AgentPickerContent({ children, className }) {
     return (React.createElement(PopoverContent, { align: "start", className: cn("min-w-[280px] p-0! rounded-lg", className) },
-        React.createElement(Command, { className: "bg-transparent" },
-            showSearch && React.createElement(CommandInput, { placeholder: searchPlaceholder }),
-            children)));
+        React.createElement(Command, { className: "bg-transparent" }, children)));
 }
 AgentPickerContent.displayName = "AgentPicker.Content";
 /** The scrollable `Command` list region. */
@@ -95,14 +91,14 @@ function AgentPickerList({ children, className }) {
 }
 AgentPickerList.displayName = "AgentPicker.List";
 /** A single agent row (Avatar + name + selection check). */
-function AgentPickerItem({ agent, selected, className }) {
-    const { value, onSelect, icons } = useAgentPicker();
+function AgentPickerItem({ agent, selected, icon, className }) {
+    const { value, onSelect } = useAgentPicker();
     const isSelected = selected ?? agent.id === value;
     return (React.createElement(CommandItem, { value: agent.name, disabled: agent.disabled, onSelect: () => onSelect(agent.id), className: className },
         React.createElement(Avatar, { name: agent.name, avatarSrc: agent.avatarSrc, tone: "muted", "aria-hidden": "true", className: "size-5! bg-[var(--background)]" }),
         React.createElement("span", { className: "min-w-0 flex-1 truncate" }, agent.name),
         isSelected &&
-            (icons?.check ?? React.createElement(CheckIcon, { className: "ml-auto opacity-70" }))));
+            (icon ?? React.createElement(CheckIcon, { className: "ml-auto opacity-70" }))));
 }
 AgentPickerItem.displayName = "AgentPicker.Item";
 /**
@@ -112,7 +108,8 @@ AgentPickerItem.displayName = "AgentPicker.Item";
  */
 const AgentDataContext = React.createContext(null);
 /** The default preset body — the data-driven groups + action rows. */
-function AgentPickerPresetBody({ agents, value, sections, onManage, onCreate, isLoading, icons, }) {
+function AgentPickerPresetBody({ agents, value, sections, isLoading, }) {
+    const { onCreate, onManage } = useAgentPicker();
     const hasSectionAgents = sections.some((section) => section.agents.length > 0);
     const showLoading = isLoading && !hasSectionAgents;
     return (React.createElement(React.Fragment, null,
@@ -121,19 +118,15 @@ function AgentPickerPresetBody({ agents, value, sections, onManage, onCreate, is
         showLoading && React.createElement(AgentPickerLoadingRows, null),
         sections.map((section, index) => (React.createElement(CommandGroup, { key: section.label ?? `section-${index}`, heading: section.label }, section.agents.map((agent) => (React.createElement(AgentPickerItem, { key: agent.id, agent: agent, selected: agent.id === value })))))),
         (onCreate || onManage) && (React.createElement(CommandGroup, null,
-            onCreate && (React.createElement(CommandItem, { value: "Create Agent", onSelect: onCreate },
-                icons?.create ?? React.createElement(PlusIcon, null),
-                "Create Agent")),
-            onManage && (React.createElement(CommandItem, { value: "Manage Agents", onSelect: onManage },
-                icons?.more ?? React.createElement(SparklesIcon, null),
-                "Manage Agents"))))));
+            React.createElement(AgentPickerCreate, null),
+            React.createElement(AgentPickerManage, null)))));
 }
 /**
  * `AgentPicker.Root` — context provider + the popover shell. No children
  * renders the default data-driven preset; pass children to recompose from
  * `AgentPicker.Trigger` / `Content` / `List` / `Item`.
  */
-function AgentPickerRoot({ agents, value, onValueChange, sections = [], onManage, onCreate, onOpenChange, inputStyle = false, invalid = false, isLoading = false, className, icons, children, }) {
+function AgentPickerRoot({ agents, value, onValueChange, sections = [], onManage, onCreate, onOpenChange, inputStyle = false, invalid = false, isLoading = false, className, children, }) {
     const [open, setOpen] = React.useState(false);
     const showSearch = totalAgentCount(agents, sections) > SEARCH_THRESHOLD;
     const handleOpenChange = React.useCallback((nextOpen) => {
@@ -144,40 +137,56 @@ function AgentPickerRoot({ agents, value, onValueChange, sections = [], onManage
         handleOpenChange(false);
         onValueChange?.(id);
     }, [handleOpenChange, onValueChange]);
-    const handleManage = () => {
+    const handleManage = React.useCallback(() => {
         handleOpenChange(false);
         onManage?.();
-    };
-    const handleCreate = () => {
+    }, [handleOpenChange, onManage]);
+    const handleCreate = React.useCallback(() => {
         handleOpenChange(false);
         onCreate?.();
-    };
-    const context = {
+    }, [handleOpenChange, onCreate]);
+    // Memoized so consumers don't re-render on every parent render (F-3). The
+    // callbacks are already stable (useCallback above).
+    const context = React.useMemo(() => ({
         value,
         onSelect: handleSelect,
         open,
         setOpen: handleOpenChange,
-        icons,
-    };
+        onCreate: onCreate ? handleCreate : undefined,
+        onManage: onManage ? handleManage : undefined,
+    }), [
+        value,
+        handleSelect,
+        open,
+        handleOpenChange,
+        onCreate,
+        handleCreate,
+        onManage,
+        handleManage,
+    ]);
+    const agentData = React.useMemo(() => ({ agents, sections }), [agents, sections]);
     return (React.createElement(AgentPickerContext.Provider, { value: context },
-        React.createElement(AgentDataContext.Provider, { value: { agents, sections } },
+        React.createElement(AgentDataContext.Provider, { value: agentData },
             React.createElement(Popover, { open: open, onOpenChange: handleOpenChange }, children ?? (React.createElement(React.Fragment, null,
                 React.createElement(AgentPickerTrigger, { inputStyle: inputStyle, invalid: invalid, className: className }),
-                React.createElement(AgentPickerContent, { showSearch: showSearch },
+                React.createElement(AgentPickerContent, null,
+                    showSearch && React.createElement(AgentPickerSearch, null),
                     React.createElement(AgentPickerList, null,
-                        React.createElement(AgentPickerPresetBody, { agents: agents, value: value, sections: sections, onManage: onManage ? handleManage : undefined, onCreate: onCreate ? handleCreate : undefined, isLoading: isLoading, icons: icons })))))))));
+                        React.createElement(AgentPickerPresetBody, { agents: agents, value: value, sections: sections, isLoading: isLoading })))))))));
 }
 AgentPickerRoot.displayName = "AgentPicker.Root";
 /**
  * AgentPicker — render `<AgentPicker agents={...} .../>` for the default
- * data-driven combobox, or compose `AgentPicker.Trigger` / `Content` / `List` /
- * `Item` for a custom menu. Mirrors the `ToolCall` compound: render it, or
- * compose it.
+ * data-driven combobox, or compose `AgentPicker.Trigger`, `Content`, `Search`,
+ * `List`, `Item`, `Create`, and `Manage` for a custom menu.
  */
 export const AgentPicker = Object.assign(AgentPickerRoot, {
     Root: AgentPickerRoot,
     Trigger: AgentPickerTrigger,
     Content: AgentPickerContent,
+    Search: AgentPickerSearch,
     List: AgentPickerList,
     Item: AgentPickerItem,
+    Create: AgentPickerCreate,
+    Manage: AgentPickerManage,
 });

package/esm/src/react/components/chat/chat/app-mode-chat.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { ChatProps } from "./chat-props.js";
+/**
+ * App-mode `<Chat>` with conversation-thread lifecycle when a
+ * `ConversationsProvider` is present: keys by the active id so switching threads
+ * remounts `UncontrolledChat` (fresh `useChat` seed), and holds the skeleton
+ * while the active thread's messages load from the store. No provider → renders
+ * `UncontrolledChat` unchanged.
+ */
+export declare function ConversationBoundChat(props: ChatProps): React.ReactElement;
+export declare namespace ConversationBoundChat {
+    var displayName: string;
+}
+//# sourceMappingURL=app-mode-chat.d.ts.map

package/esm/src/react/components/chat/chat/app-mode-chat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-mode-chat.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/chat/app-mode-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA2KjD;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAY1E;yBAZe,qBAAqB"}

package/esm/src/react/components/chat/chat/app-mode-chat.js

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { useAgentMetadata } from "../../../../agent/react/use-agent-metadata.js";
+import { AgentAvatar } from "./composition/agent-avatar.js";
+import { ChatMessagesSkeleton } from "./components/chat-messages-skeleton.js";
+import { useUpload } from "./hooks/use-upload.js";
+import { useConversationsContextOptional } from "./contexts/conversations-context.js";
+import { useConversationChat } from "./hooks/use-conversation-chat.js";
+import { ControlledChat } from "./controlled-chat.js";
+import { attachmentsToFileParts, hasPendingAttachments } from "./chat-attachments.js";
+/**
+ * Map agent-metadata suggestions to `{ label, prompt }`. The chip shows the
+ * short `title` ("Triage login issue") while the click sends the full `prompt`
+ * ("Triage a customer who cannot sign in after a release.") — so the empty
+ * state stays scannable without truncating what the agent actually receives.
+ */
+function agentSuggestionItems(suggestions) {
+    const list = suggestions?.suggestions;
+    if (!Array.isArray(list))
+        return [];
+    return list.flatMap((s) => {
+        if (s.type !== "prompt" || !("prompt" in s) || !s.prompt)
+            return [];
+        const title = s.title;
+        const label = typeof title === "string" && title.length > 0 ? title : s.prompt;
+        return [{ label, prompt: s.prompt }];
+    });
+}
+function UncontrolledChat({ agentId, api = "/api/ag-ui", initialMessages, onError, onUpdate, agent: userAgent, suggestions: suggestionsProp, onSuggestionClick, emptyState, 
+// Attachments: default-wired through `useUpload` unless the caller
+// controls them. With no `uploadApi`, files inline as base64 `data:` URLs
+// (guest mode — zero backend). Set `uploadApi` to POST to a durable
+// upload endpoint (multipart `file` → `{ url }`) for real users + a project.
+uploadApi, onAttach: userOnAttach, onDrop: userOnDrop, attachments: userAttachments, onRemoveAttachment: userOnRemoveAttachment, ref, ...rest }) {
+    // Seed + persistence are the library's job, not app code's: `useConversationChat`
+    // does `useChat` + conversation seeding + the persist bridge internally (the
+    // §2.3 anti-pattern lifted into a reusable hook). This component stays a dumb
+    // presenter of the resulting session.
+    const { chat, resolvedAgentId } = useConversationChat({
+        api,
+        agentId,
+        initialMessages,
+        onError,
+        onUpdate,
+    });
+    const { agent, error: agentError } = useAgentMetadata(resolvedAgentId);
+    // App mode owns the loading signal: from the very first paint until the
+    // agent resolves (or errors) we render the skeleton — never flash an idle
+    // placeholder first. Keyed off "agent not yet here" rather than the hook's
+    // `isLoading` flag so there's no one-frame gap on mount. Works out of the
+    // box — no `isLoading` wiring from the consumer.
+    const agentInitializing = Boolean(resolvedAgentId) && !agent && !agentError;
+    // Agent-driven empty state: avatar + name + description, shown once the
+    // agent resolves (the skeleton covers the load, so the generic
+    // "What can I help with?" placeholder never flashes). A consumer-supplied
+    // `emptyState` still wins.
+    const derivedEmptyState = React.useMemo(() => {
+        if (emptyState)
+            return emptyState;
+        if (!agent)
+            return undefined;
+        return {
+            icon: (React.createElement(AgentAvatar, { name: agent.name, avatarUrl: agent.avatarUrl ?? undefined, className: "size-12" })),
+            title: agent.name,
+            description: agent.description ?? undefined,
+        };
+    }, [emptyState, agent]);
+    // Chips show the short `title`; the click sends the full `prompt`.
+    const suggestionItems = React.useMemo(() => agentSuggestionItems(agent?.suggestions), [agent]);
+    const derivedSuggestions = suggestionsProp ??
+        (suggestionItems.length > 0 ? suggestionItems.map((s) => s.label) : undefined);
+    const resolvedAgent = agent || userAgent
+        ? {
+            ...(agent
+                ? {
+                    name: agent.name,
+                    avatarUrl: agent.avatarUrl ?? undefined,
+                    description: agent.description ?? undefined,
+                }
+                : {}),
+            ...userAgent,
+        }
+        : undefined;
+    const handleSuggestion = onSuggestionClick ??
+        ((label) => {
+            const item = suggestionItems.find((s) => s.label === label);
+            void chat.sendMessage({ text: item?.prompt ?? label });
+        });
+    // Batteries-included attachments: unless the caller controls them, files
+    // uploaded via the `+` menu / drag land here, ride along on submit as
+    // `file` parts, and clear once sent.
+    const upload = useUpload({ api: uploadApi });
+    const attachControlled = userOnAttach !== undefined ||
+        userOnDrop !== undefined ||
+        userAttachments !== undefined ||
+        userOnRemoveAttachment !== undefined;
+    const manageAttachments = !attachControlled;
+    const submitWithAttachments = React.useCallback((e) => {
+        e?.preventDefault();
+        if (chat.isLoading)
+            return;
+        // Never send while a file is still uploading: the fold below only
+        // carries resolved urls, so submitting now would silently drop the
+        // pending attachment (and `clear()` would abort its upload).
+        if (hasPendingAttachments(upload.attachments))
+            return;
+        const text = chat.input.trim();
+        const files = attachmentsToFileParts(upload.attachments);
+        if (!text && files.length === 0)
+            return;
+        chat.setInput("");
+        upload.clear();
+        void chat.sendMessage({ text, files });
+    }, [chat, upload]);
+    return (React.createElement(ControlledChat, { ...rest, ref: ref, chat: chat, submit: manageAttachments ? submitWithAttachments : chat.handleSubmit, emptyState: derivedEmptyState, agent: resolvedAgent, initializing: agentInitializing, suggestions: derivedSuggestions, onSuggestionClick: handleSuggestion, onAttach: manageAttachments ? upload.upload : userOnAttach, onDrop: manageAttachments ? upload.upload : userOnDrop, attachments: manageAttachments ? upload.attachments : userAttachments, onRemoveAttachment: manageAttachments ? upload.remove : userOnRemoveAttachment }));
+}
+UncontrolledChat.displayName = "UncontrolledChat";
+/**
+ * App-mode `<Chat>` with conversation-thread lifecycle when a
+ * `ConversationsProvider` is present: keys by the active id so switching threads
+ * remounts `UncontrolledChat` (fresh `useChat` seed), and holds the skeleton
+ * while the active thread's messages load from the store. No provider → renders
+ * `UncontrolledChat` unchanged.
+ */
+export function ConversationBoundChat(props) {
+    const conversations = useConversationsContextOptional();
+    if (!conversations || conversations.activeId == null) {
+        return React.createElement(UncontrolledChat, { ref: props.ref, ...props });
+    }
+    const { active, activeId } = conversations;
+    // Wait for the active thread's messages before mounting, so `useChat` seeds
+    // from the right thread rather than a still-loading one.
+    if (active?.id !== activeId) {
+        return React.createElement(React.Fragment, null, props.skeleton ?? React.createElement(ChatMessagesSkeleton, null));
+    }
+    return React.createElement(UncontrolledChat, { key: activeId, ref: props.ref, ...props });
+}
+ConversationBoundChat.displayName = "ConversationBoundChat";

package/esm/src/react/components/chat/chat/chat-attachments.d.ts

@@ -0,0 +1,7 @@
+import type { ChatFilePart } from "../../../../agent/react/index.js";
+import type { AttachmentInfo } from "./components/attachment-pill.js";
+/** Map resolved attachments to file message parts. */
+export declare function attachmentsToFileParts(items: AttachmentInfo[]): ChatFilePart[];
+/** Return true while an attachment is still resolving its URL. */
+export declare function hasPendingAttachments(items: AttachmentInfo[]): boolean;
+//# sourceMappingURL=chat-attachments.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-attachments.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/chat/chat-attachments.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEtE,sDAAsD;AACtD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAU9E;AAED,kEAAkE;AAClE,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,OAAO,CAEtE"}

package/esm/src/react/components/chat/chat/chat-attachments.js

@@ -0,0 +1,16 @@
+/** Map resolved attachments to file message parts. */
+export function attachmentsToFileParts(items) {
+    return items
+        .filter((item) => Boolean(item.url))
+        .map((item) => ({
+        type: "file",
+        mediaType: item.type ?? "application/octet-stream",
+        url: item.url,
+        filename: item.name,
+        ...(item.size != null ? { size: item.size } : {}),
+    }));
+}
+/** Return true while an attachment is still resolving its URL. */
+export function hasPendingAttachments(items) {
+    return items.some((item) => item.state === "uploading" || item.state === "processing");
+}

package/esm/src/react/components/chat/chat/chat-component.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+import type { ChatProps } from "./chat-props.js";
+import type { ChatMessagesSkeleton } from "./components/chat-messages-skeleton.js";
+import type { ChatEmpty } from "./composition/chat-empty.js";
+import type { ChatIf } from "./composition/chat-if.js";
+import type { ChatInput } from "./composition/chat-composer.js";
+import type { ErrorBanner } from "./composition/error-banner.js";
+import type { ChatMessageList } from "./composition/chat-message-list.js";
+import type { ChatRoot } from "./composition/chat-root.js";
+import type { Message } from "./composition/message.js";
+export type ChatComponent = ((props: ChatProps) => React.ReactElement) & {
+    Root: typeof ChatRoot;
+    MessageList: typeof ChatMessageList;
+    Input: typeof ChatInput;
+    Empty: typeof ChatEmpty;
+    Skeleton: typeof ChatMessagesSkeleton;
+    If: typeof ChatIf;
+    Message: typeof Message;
+    ErrorBanner: typeof ErrorBanner;
+};
+//# sourceMappingURL=chat-component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-component.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/chat/chat-component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC,YAAY,CAAC,GAAG;IACvE,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,WAAW,EAAE,OAAO,eAAe,CAAC;IACpC,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,QAAQ,EAAE,OAAO,oBAAoB,CAAC;IACtC,EAAE,EAAE,OAAO,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,WAAW,CAAC;CACjC,CAAC"}

package/esm/src/react/components/chat/chat/chat-component.js

@@ -0,0 +1 @@
+export {};