@camelai/agent-runtime-react 0.0.0 → 0.10.0

package/dist/ui/composer.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { useAgentStatus, useSend } from "../index.js";
+import { cx, useUI } from "./context.js";
+/**
+ * The message box: Enter sends, Shift+Enter makes a new line, Escape stops the agent. While the agent
+ * works, an empty box offers Stop; typing turns it back into Send.
+ */
+export const Composer = forwardRef(function Composer({ placeholder, autoFocus, whileRunning, data, className, onSend }, ref) {
+    const { labels } = useUI();
+    const send = useSend();
+    const { isRunning, stop } = useAgentStatus();
+    const [text, setText] = useState("");
+    const area = useRef(null);
+    useImperativeHandle(ref, () => ({ focus: () => area.current?.focus(), setText }), []);
+    // Grow with the text, up to the height the stylesheet allows.
+    useLayoutEffect(() => {
+        const element = area.current;
+        if (!element || typeof CSS !== "undefined" && CSS.supports?.("field-sizing", "content"))
+            return;
+        element.style.height = "auto";
+        element.style.height = `${element.scrollHeight}px`;
+    }, [text]);
+    const submit = (event) => {
+        event?.preventDefault();
+        const message = text.trim();
+        if (!message) {
+            if (isRunning)
+                void stop();
+            return;
+        }
+        setText("");
+        const extra = typeof data === "function" ? data() : data;
+        void send(message, { ...(extra !== undefined ? { data: extra } : {}), ...(whileRunning ? { whileRunning } : {}) });
+        onSend?.(message);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+            event.preventDefault();
+            submit();
+        }
+        else if (event.key === "Escape" && isRunning) {
+            event.preventDefault();
+            void stop();
+        }
+    };
+    const stopping = isRunning && !text.trim();
+    return (_jsxs("form", { className: cx("agent-chat__composer", className), onSubmit: submit, children: [_jsx("textarea", { ref: area, rows: 1, value: text, autoFocus: autoFocus, placeholder: placeholder ?? labels.placeholder, "aria-label": labels.composer, onChange: event => setText(event.currentTarget.value), onKeyDown: onKeyDown }), _jsx("button", { type: "submit", className: cx("agent-chat__send", stopping && "agent-chat__send--stop"), disabled: !stopping && !text.trim(), "aria-label": stopping ? labels.stop : labels.send, children: _jsx("span", { "aria-hidden": "true", className: "agent-chat__send-icon" }) })] }));
+});

package/dist/ui/context.d.ts

@@ -0,0 +1,87 @@
+import { type ComponentType, type ReactNode } from "react";
+import type { AssistantChatMessage, ChatInput, FilePart, ToolPart, UserChatMessage } from "@camelai/agent-runtime/chat";
+import type { ToolRenderers } from "../index.tsx";
+/** Every string the components show, for translation or tone. */
+export interface Labels {
+    placeholder: string;
+    send: string;
+    stop: string;
+    composer: string;
+    conversation: string;
+    thinking: string;
+    reasoning: string;
+    responding: string;
+    replied: string;
+    needsInput: string;
+    jumpToLatest: string;
+    loadOlder: string;
+    loadingOlder: string;
+    emptyTitle: string;
+    approve: string;
+    deny: string;
+    submit: string;
+    skip: string;
+    other: string;
+    open: string;
+    done: string;
+    cancel: string;
+    retry: string;
+    reconnecting: string;
+    sending: string;
+    failed: string;
+    stopped: string;
+    copy: string;
+    copied: string;
+    download: string;
+    toolRunning: (name: string) => string;
+    toolDone: (name: string) => string;
+    toolFailed: (name: string) => string;
+    toolWaiting: (name: string) => string;
+    arguments: string;
+    result: string;
+}
+export declare const defaultLabels: Labels;
+/** Parts of the chat you can replace with your own components. */
+export interface AgentChatComponents {
+    /** Renders a message's markdown. Swap in react-markdown or Streamdown if you like. */
+    Markdown: ComponentType<{
+        text: string;
+        streaming: boolean;
+        className?: string;
+    }>;
+    UserMessage: ComponentType<{
+        message: UserChatMessage;
+    }>;
+    AssistantMessage: ComponentType<{
+        message: AssistantChatMessage;
+    }>;
+    /** A tool call with no renderer of its own. */
+    ToolFallback: ComponentType<{
+        part: ToolPart;
+    }>;
+    /** What the agent waits on: an approval, questions, a form or a link to open. */
+    InputCard: ComponentType<{
+        input: ChatInput;
+    }>;
+    FilePreview: ComponentType<{
+        part: FilePart;
+    }>;
+    /** Shown before the first message. */
+    EmptyState: ComponentType<{
+        suggestions: string[];
+        send(text: string): void;
+    }>;
+}
+export interface UIContextValue {
+    labels: Labels;
+    components: AgentChatComponents;
+    tools?: ToolRenderers;
+    allowImages: boolean;
+    showReasoning: boolean;
+}
+export declare const UIContext: import("react").Context<UIContextValue | null>;
+export declare function useUI(): UIContextValue;
+export declare const cx: (...names: (string | false | null | undefined)[]) => string;
+export type Children = {
+    children?: ReactNode;
+};

package/dist/ui/context.js

@@ -0,0 +1,46 @@
+import { createContext, useContext } from "react";
+export const defaultLabels = {
+    placeholder: "Message the agent…",
+    send: "Send",
+    stop: "Stop",
+    composer: "Message",
+    conversation: "Conversation",
+    thinking: "Thinking…",
+    reasoning: "Reasoning",
+    responding: "The assistant is responding.",
+    replied: "The assistant replied:",
+    needsInput: "The assistant needs your input.",
+    jumpToLatest: "Jump to latest",
+    loadOlder: "Load earlier messages",
+    loadingOlder: "Loading…",
+    emptyTitle: "How can I help?",
+    approve: "Approve",
+    deny: "Deny",
+    submit: "Submit",
+    skip: "Skip",
+    other: "Other",
+    open: "Open",
+    done: "Done",
+    cancel: "Cancel",
+    retry: "Retry",
+    reconnecting: "Reconnecting…",
+    sending: "Sending…",
+    failed: "Not sent.",
+    stopped: "Stopped.",
+    copy: "Copy",
+    copied: "Copied",
+    download: "Download",
+    toolRunning: name => `Running ${name}…`,
+    toolDone: name => `Used ${name}`,
+    toolFailed: name => `${name} failed`,
+    toolWaiting: name => `${name} is waiting for you`,
+    arguments: "Arguments",
+    result: "Result",
+};
+export const UIContext = createContext(null);
+/** Outside <AgentChat> (a Markdown of your own, say): the default labels, and no images. */
+const OUTSIDE = { labels: defaultLabels, allowImages: false, showReasoning: true };
+export function useUI() {
+    return useContext(UIContext) ?? OUTSIDE;
+}
+export const cx = (...names) => names.filter(Boolean).join(" ");

package/dist/ui/file.d.ts

@@ -0,0 +1,9 @@
+import type { FilePart } from "@camelai/agent-runtime/chat";
+/**
+ * A file the agent handed over: an image inline, anything else as a download. Its signed link comes
+ * with the stream when it is presented; for older files it is fetched through your handler, and
+ * fetched again before a click once it is about to expire.
+ */
+export declare const FilePreview: import("react").MemoExoticComponent<({ part }: {
+    part: FilePart;
+}) => import("react").JSX.Element>;

package/dist/ui/file.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useState } from "react";
+import { useAgent } from "../index.js";
+import { useUI } from "./context.js";
+const size = (bytes) => bytes === undefined ? "" : bytes < 1024 ? `${bytes} B` : bytes < 1024 ** 2 ? `${(bytes / 1024).toFixed(1)} KB` : `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+/**
+ * A file the agent handed over: an image inline, anything else as a download. Its signed link comes
+ * with the stream when it is presented; for older files it is fetched through your handler, and
+ * fetched again before a click once it is about to expire.
+ */
+export const FilePreview = memo(function FilePreview({ part }) {
+    const chat = useAgent();
+    const { labels } = useUI();
+    const [url, setUrl] = useState(part.url);
+    const [failed, setFailed] = useState(false);
+    const refresh = useCallback(() => {
+        chat.fileUrl(part.path).then(link => { setUrl(link); setFailed(false); }, () => setFailed(true));
+    }, [chat, part.path]);
+    useEffect(() => { if (part.url)
+        setUrl(part.url);
+    else
+        refresh(); }, [part.url, refresh]);
+    const image = part.contentType?.startsWith("image/") && part.contentType !== "image/svg+xml";
+    return (_jsxs("figure", { className: "agent-chat__file", "data-kind": image ? "image" : "file", children: [image && url && !failed && _jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { src: url, alt: part.caption ?? part.name, loading: "lazy", onError: () => setFailed(true) }) }), _jsxs("figcaption", { children: [_jsxs("a", { className: "agent-chat__file-link", href: url, target: "_blank", rel: "noopener noreferrer", download: part.name, onMouseEnter: refresh, onFocus: refresh, "aria-disabled": !url || undefined, children: [_jsx("span", { className: "agent-chat__file-name", children: part.name }), _jsx("span", { className: "agent-chat__file-meta", children: [size(part.size), labels.download].filter(Boolean).join(" · ") })] }), part.caption && _jsx("span", { className: "agent-chat__file-caption", children: part.caption })] })] }));
+});

package/dist/ui/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * A prebuilt chat with the user's agent: messages that stream in as markdown, tool cards (or your own
+ * components per tool), the agent's questions and approvals, files it hands over, a composer with
+ * stop, and scrolling that follows the reply. Themed with CSS variables; import the stylesheet once:
+ *
+ *   import { AgentChat } from "@camelai/agent-runtime-react/ui";
+ *   import "@camelai/agent-runtime-react/styles.css";
+ *
+ *   <AgentChat endpoint="/api/agent" suggestions={["Where is my order?"]} />
+ */
+import { type CSSProperties, type ReactNode } from "react";
+import type { AgentChat as Chat } from "@camelai/agent-runtime/chat";
+import { type ToolRenderers, type UseAgentChatOptions } from "../index.tsx";
+import { Composer, type ComposerHandle, type ComposerProps } from "./composer.tsx";
+import { defaultLabels, type AgentChatComponents, type Labels } from "./context.tsx";
+import { FilePreview } from "./file.tsx";
+import { Markdown } from "./markdown.tsx";
+import { AssistantMessage, EmptyState, MessageList, UserMessage } from "./messages.tsx";
+import { InputCard, ToolCard, ToolView } from "./tool.tsx";
+export { Composer, FilePreview, InputCard, Markdown, MessageList, ToolCard, ToolView, UserMessage, AssistantMessage, EmptyState, defaultLabels };
+export type { AgentChatComponents, ComposerHandle, ComposerProps, Labels };
+export interface AgentChatProps extends Partial<UseAgentChatOptions> {
+    /** A chat you made (`useAgentChat`); else `endpoint`; else the nearest <AgentProvider>'s. */
+    chat?: Chat;
+    /** Your own components for tool calls, by tool name (generative UI). */
+    tools?: ToolRenderers;
+    /** Replace parts of the chat: Markdown, UserMessage, AssistantMessage, ToolFallback, InputCard, FilePreview, EmptyState. */
+    components?: Partial<AgentChatComponents>;
+    labels?: Partial<Labels>;
+    placeholder?: string;
+    /** Prompts offered before the first message. */
+    suggestions?: string[];
+    /** "light", "dark", or "system" (default: the page's `prefers-color-scheme`, or a `.dark` ancestor). */
+    theme?: "light" | "dark" | "system";
+    /** Show images the agent links in its markdown (off by default: loading them tells their server about the reader). */
+    allowImages?: boolean;
+    /** Show the model's reasoning, collapsed (default true). */
+    showReasoning?: boolean;
+    autoFocus?: boolean;
+    /** JSON sent with each message, for your handler's `onSend`. */
+    data?: ComposerProps["data"];
+    /** Content above the messages (a title bar). */
+    header?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/** The whole chat. Inside an <AgentProvider> it uses that chat; with `endpoint` it makes its own. */
+export declare function AgentChat({ chat, endpoint, tools, ...props }: AgentChatProps): import("react").JSX.Element;
+/** The chat's layout, for the chat of the nearest <AgentProvider>. */
+export declare function AgentChatRoot({ tools, components, labels, placeholder, suggestions, theme, allowImages, showReasoning, autoFocus, data, header, className, style, whileRunning, }: Omit<AgentChatProps, "chat" | "endpoint">): import("react").JSX.Element;

package/dist/ui/index.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A prebuilt chat with the user's agent: messages that stream in as markdown, tool cards (or your own
+ * components per tool), the agent's questions and approvals, files it hands over, a composer with
+ * stop, and scrolling that follows the reply. Themed with CSS variables; import the stylesheet once:
+ *
+ *   import { AgentChat } from "@camelai/agent-runtime-react/ui";
+ *   import "@camelai/agent-runtime-react/styles.css";
+ *
+ *   <AgentChat endpoint="/api/agent" suggestions={["Where is my order?"]} />
+ */
+import { useMemo } from "react";
+import { AgentProvider, useAgent, useAgentSelector, useAgentStatus } from "../index.js";
+import { Composer } from "./composer.js";
+import { cx, defaultLabels, UIContext, useUI } from "./context.js";
+import { FilePreview } from "./file.js";
+import { Markdown } from "./markdown.js";
+import { AssistantMessage, EmptyState, MessageList, UserMessage } from "./messages.js";
+import { InputCard, ToolCard, ToolView } from "./tool.js";
+export { Composer, FilePreview, InputCard, Markdown, MessageList, ToolCard, ToolView, UserMessage, AssistantMessage, EmptyState, defaultLabels };
+/** The whole chat. Inside an <AgentProvider> it uses that chat; with `endpoint` it makes its own. */
+export function AgentChat({ chat, endpoint, tools, ...props }) {
+    const { thread, headers, credentials, whileRunning, watch, onEvent, onError, fetch, ...rest } = props;
+    if (chat || endpoint) {
+        const options = { thread, headers, credentials, whileRunning, watch, onEvent, onError, fetch };
+        const defined = Object.fromEntries(Object.entries(options).filter(([, value]) => value !== undefined));
+        return _jsx(AgentProvider, { chat: chat, endpoint: endpoint, ...defined, children: _jsx(AgentChatRoot, { tools: tools, whileRunning: whileRunning, ...rest }) });
+    }
+    return _jsx(AgentChatRoot, { tools: tools, whileRunning: whileRunning, ...rest });
+}
+const DEFAULT_COMPONENTS = { Markdown, UserMessage, AssistantMessage, ToolFallback: ToolCard, InputCard, FilePreview, EmptyState };
+/** The chat's layout, for the chat of the nearest <AgentProvider>. */
+export function AgentChatRoot({ tools, components, labels, placeholder, suggestions, theme = "system", allowImages = false, showReasoning = true, autoFocus, data, header, className, style, whileRunning, }) {
+    useAgent();
+    const value = useMemo(() => ({
+        labels: { ...defaultLabels, ...labels }, components: { ...DEFAULT_COMPONENTS, ...components }, tools, allowImages, showReasoning,
+    }), [labels, components, tools, allowImages, showReasoning]);
+    return (_jsx(UIContext.Provider, { value: value, children: _jsxs("div", { className: cx("agent-chat", className), style: style, "data-theme": theme === "system" ? undefined : theme, children: [header, _jsx(MessageList, { suggestions: suggestions }), _jsx(LooseInputs, {}), _jsx(ErrorBanner, {}), _jsx(Composer, { placeholder: placeholder, autoFocus: autoFocus, data: data, whileRunning: whileRunning })] }) }));
+}
+/** Inputs whose call is not on screen (its turn is on an older page, or a tool asked outside a call). */
+function LooseInputs() {
+    const { components } = useUI();
+    const loose = useAgentSelector(snapshot => {
+        const shown = new Set();
+        for (const message of snapshot.messages)
+            if (message.role === "assistant")
+                for (const part of message.parts)
+                    if (part.type === "tool" && part.input)
+                        shown.add(part.input.id);
+        const rest = snapshot.inputs.filter(input => !shown.has(input.id));
+        return rest.length ? rest : EMPTY;
+    }, { equal: (a, b) => a.length === b.length && a.every((input, at) => input === b[at]) });
+    if (!loose.length)
+        return null;
+    return _jsx("div", { className: "agent-chat__loose-inputs", children: loose.map(input => _jsx(components.InputCard, { input: input }, input.id)) });
+}
+const EMPTY = [];
+/** The chat's own trouble (a send's shows on its message): it could not start, or the stream is reconnecting. */
+function ErrorBanner() {
+    const { labels } = useUI();
+    const { error, status, connected } = useAgentStatus();
+    if (status === "error" && error)
+        return _jsx("div", { className: "agent-chat__error", role: "alert", children: error.message || labels.failed });
+    if (error?.code === "stream_error" && !connected)
+        return _jsx("div", { className: "agent-chat__error agent-chat__error--soft", role: "status", children: labels.reconnecting });
+    return null;
+}

package/dist/ui/markdown.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Markdown as the agent writes it, rendered with React elements (never HTML). Blocks that did not
+ * change are not rendered again while the last one streams. Images show as links unless the chat
+ * allows them (`allowImages`): loading an image the model chose tells its server about the reader.
+ */
+export declare const Markdown: import("react").MemoExoticComponent<({ text, streaming, className }: {
+    text: string;
+    streaming?: boolean;
+    className?: string;
+}) => import("react").JSX.Element>;

package/dist/ui/markdown.js

@@ -0,0 +1,71 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useState } from "react";
+import { inlineText, parseMarkdown } from "@camelai/agent-runtime/markdown";
+import { cx, useUI } from "./context.js";
+/**
+ * Markdown as the agent writes it, rendered with React elements (never HTML). Blocks that did not
+ * change are not rendered again while the last one streams. Images show as links unless the chat
+ * allows them (`allowImages`): loading an image the model chose tells its server about the reader.
+ */
+export const Markdown = memo(function Markdown({ text, streaming = false, className }) {
+    const blocks = useMemo(() => safely(text, streaming), [text, streaming]);
+    return _jsx("div", { className: cx("agent-chat__markdown", className), children: blocks.map((block, at) => _jsx(BlockView, { block: block, open: streaming && at === blocks.length - 1 }, at)) });
+});
+/** A block; `open`: the last block of text still streaming (it may parse differently once settled). */
+/** The blocks, or the text as one paragraph should parsing ever fail: a reply always shows. */
+function safely(text, streaming) {
+    try {
+        return parseMarkdown(text, { streaming });
+    }
+    catch {
+        return [{ type: "paragraph", children: [{ type: "text", text }], raw: text }];
+    }
+}
+const BlockView = memo(function BlockView({ block }) {
+    switch (block.type) {
+        case "paragraph": return _jsx("p", { children: _jsx(Inlines, { nodes: block.children }) });
+        case "heading": {
+            const Tag = `h${block.level}`;
+            return _jsx(Tag, { children: _jsx(Inlines, { nodes: block.children }) });
+        }
+        case "code": return _jsx(CodeBlock, { lang: block.lang, text: block.text });
+        case "blockquote": return _jsx("blockquote", { children: block.children.map((child, at) => _jsx(BlockView, { block: child }, at)) });
+        case "list": {
+            const items = block.items.map((item, at) => (_jsx("li", { children: item.length === 1 && item[0].type === "paragraph" ? _jsx(Inlines, { nodes: item[0].children }) : item.map((child, index) => _jsx(BlockView, { block: child }, index)) }, at)));
+            return block.ordered ? _jsx("ol", { start: block.start === 1 ? undefined : block.start, children: items }) : _jsx("ul", { children: items });
+        }
+        case "table": return (_jsx("div", { className: "agent-chat__table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: block.head.map((cell, at) => _jsx("th", { style: block.align[at] ? { textAlign: block.align[at] } : undefined, children: _jsx(Inlines, { nodes: cell }) }, at)) }) }), _jsx("tbody", { children: block.rows.map((row, index) => _jsx("tr", { children: row.map((cell, at) => _jsx("td", { style: block.align[at] ? { textAlign: block.align[at] } : undefined, children: _jsx(Inlines, { nodes: cell }) }, at)) }, index)) })] }) }));
+        case "hr": return _jsx("hr", {});
+    }
+}, (a, b) => a.block.raw === b.block.raw && a.block.type === b.block.type && a.open === b.open);
+function Inlines({ nodes }) {
+    return _jsx(_Fragment, { children: nodes.map((node, at) => _jsx(InlineView, { node: node }, at)) });
+}
+function InlineView({ node }) {
+    const { allowImages } = useUI();
+    switch (node.type) {
+        case "text": return node.text;
+        case "break": return _jsx("br", {});
+        case "code": return _jsx("code", { children: node.text });
+        case "strong": return _jsx("strong", { children: _jsx(Inlines, { nodes: node.children }) });
+        case "em": return _jsx("em", { children: _jsx(Inlines, { nodes: node.children }) });
+        case "del": return _jsx("del", { children: _jsx(Inlines, { nodes: node.children }) });
+        case "link": return _jsx("a", { href: node.href, target: "_blank", rel: "noopener noreferrer nofollow", children: _jsx(Inlines, { nodes: node.children }) });
+        case "image": return allowImages
+            ? _jsx("img", { src: node.src, alt: node.alt, loading: "lazy", referrerPolicy: "no-referrer" })
+            : _jsx("a", { href: node.src, target: "_blank", rel: "noopener noreferrer nofollow", children: node.alt || inlineText([node]) || node.src });
+    }
+}
+function CodeBlock({ lang, text }) {
+    const { labels } = useUI();
+    const [copied, setCopied] = useState(false);
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch { /* no clipboard */ }
+    };
+    return (_jsxs("div", { className: "agent-chat__code", children: [_jsxs("div", { className: "agent-chat__code-bar", children: [_jsx("span", { children: lang }), _jsx("button", { type: "button", className: "agent-chat__code-copy", onClick: copy, "aria-label": copied ? labels.copied : `${labels.copy}${lang ? ` ${lang}` : ""}`, children: copied ? labels.copied : labels.copy })] }), _jsx("pre", { children: _jsx("code", { "data-language": lang || undefined, children: text }) })] }));
+}

package/dist/ui/messages.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import type { AssistantChatMessage, UserChatMessage } from "@camelai/agent-runtime/chat";
+/** A user's message: its text, who sent it (in a shared chat), and whether it was sent. */
+export declare const UserMessage: import("react").MemoExoticComponent<({ message }: {
+    message: UserChatMessage;
+}) => import("react").JSX.Element>;
+/** The agent's turn: its text, reasoning, tool calls, questions and files, in order. */
+export declare const AssistantMessage: import("react").MemoExoticComponent<({ message }: {
+    message: AssistantChatMessage;
+}) => import("react").JSX.Element>;
+/**
+ * The conversation: follows the reply while you are at the bottom, stays put when you scroll up
+ * (with a button back to the latest), and keeps your place when older messages load above.
+ */
+export declare function MessageList({ className, children, suggestions }: {
+    className?: string;
+    children?: ReactNode;
+    suggestions?: string[];
+}): import("react").JSX.Element;
+export declare function EmptyState({ suggestions, send }: {
+    suggestions: string[];
+    send(text: string): void;
+}): import("react").JSX.Element;

package/dist/ui/messages.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useAgent, useAgentSelector, useAgentStatus, useLoadOlder, useMessages } from "../index.js";
+import { cx, useUI } from "./context.js";
+import { ToolView } from "./tool.js";
+/** A user's message: its text, who sent it (in a shared chat), and whether it was sent. */
+export const UserMessage = memo(function UserMessage({ message }) {
+    const { labels } = useUI();
+    const chat = useAgent();
+    return (_jsxs("div", { className: "agent-chat__message agent-chat__message--user", "data-status": message.status, children: [message.from?.name && _jsx("div", { className: "agent-chat__author", children: message.from.name }), _jsx("div", { className: "agent-chat__bubble", children: message.parts.map(part => part.type === "text"
+                    ? _jsx("p", { className: "agent-chat__user-text", children: part.text }, part.id)
+                    : _jsx("img", { src: part.url, alt: "", className: "agent-chat__user-image" }, part.id)) }), message.status === "sending" && _jsx("div", { className: "agent-chat__note", children: labels.sending }), message.status === "failed" && (_jsxs("div", { className: "agent-chat__note agent-chat__note--error", role: "alert", children: [message.error?.message ?? labels.failed, " ", _jsx("button", { type: "button", className: "agent-chat__link-button", onClick: () => void chat.retry(message.id), children: labels.retry })] }))] }));
+});
+/** The agent's turn: its text, reasoning, tool calls, questions and files, in order. */
+export const AssistantMessage = memo(function AssistantMessage({ message }) {
+    const { labels } = useUI();
+    const last = message.parts.at(-1);
+    return (_jsxs("div", { className: "agent-chat__message agent-chat__message--assistant", "data-streaming": message.streaming || undefined, children: [message.parts.map(part => _jsx(Part, { part: part, streaming: message.streaming && part === last }, part.id)), message.stopReason === "aborted" && _jsx("div", { className: "agent-chat__note", children: labels.stopped }), message.stopReason === "error" && _jsx("div", { className: "agent-chat__note agent-chat__note--error", children: message.error ?? labels.failed })] }));
+});
+const Part = memo(function Part({ part, streaming }) {
+    const { components, showReasoning, labels } = useUI();
+    switch (part.type) {
+        case "text": return _jsx(components.Markdown, { text: part.text, streaming: streaming && part.streaming });
+        case "reasoning": return showReasoning && !part.redacted ? (_jsxs("details", { className: "agent-chat__reasoning", "data-streaming": part.streaming || undefined, children: [_jsx("summary", { children: part.streaming ? labels.thinking : labels.reasoning }), _jsx("div", { className: "agent-chat__reasoning-text", children: part.text })] })) : null;
+        case "tool": return _jsx(ToolView, { part: part });
+        case "file": return _jsx(components.FilePreview, { part: part });
+        default: return null;
+    }
+});
+const Row = memo(function Row({ message }) {
+    const { components } = useUI();
+    return message.role === "user" ? _jsx(components.UserMessage, { message: message }) : _jsx(components.AssistantMessage, { message: message });
+});
+/** How close to the bottom (px) still counts as at the bottom. */
+const NEAR = 48;
+/**
+ * The conversation: follows the reply while you are at the bottom, stays put when you scroll up
+ * (with a button back to the latest), and keeps your place when older messages load above.
+ */
+export function MessageList({ className, children, suggestions = [] }) {
+    const { labels, components } = useUI();
+    const chat = useAgent();
+    const messages = useMessages();
+    const { status } = useAgentStatus();
+    const { hasOlder, loading, loadOlder } = useLoadOlder();
+    const scroller = useRef(null);
+    const content = useRef(null);
+    const atBottom = useRef(true);
+    const [showJump, setShowJump] = useState(false);
+    const anchor = useRef(null);
+    const toBottom = useCallback((smooth = false) => {
+        const element = scroller.current;
+        if (!element)
+            return;
+        element.scrollTo?.({ top: element.scrollHeight, behavior: smooth ? "smooth" : "auto" });
+        if (!element.scrollTo)
+            element.scrollTop = element.scrollHeight;
+        atBottom.current = true;
+        setShowJump(false);
+    }, []);
+    const onScroll = () => {
+        const element = scroller.current;
+        if (!element)
+            return;
+        atBottom.current = element.scrollHeight - element.scrollTop - element.clientHeight <= NEAR;
+        setShowJump(!atBottom.current);
+        if (element.scrollTop < 64 && hasOlder && !loading)
+            void older();
+    };
+    const older = async () => {
+        const element = scroller.current;
+        if (element)
+            anchor.current = { height: element.scrollHeight, top: element.scrollTop };
+        await loadOlder();
+    };
+    // After older messages land above, keep what was on screen where it was.
+    useLayoutEffect(() => {
+        const element = scroller.current, kept = anchor.current;
+        if (!element || !kept || loading)
+            return;
+        anchor.current = null;
+        element.scrollTop = kept.top + element.scrollHeight - kept.height;
+    }, [messages, loading]);
+    // Follow new content (and a message just sent) while at the bottom.
+    const lastId = messages.at(-1)?.id;
+    const lastIsMine = messages.at(-1)?.role === "user";
+    useLayoutEffect(() => { if (lastIsMine)
+        toBottom(); }, [lastId, lastIsMine, toBottom]);
+    useEffect(() => {
+        const element = content.current;
+        if (!element || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => { if (atBottom.current && !anchor.current)
+            toBottom(); });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [toBottom]);
+    useLayoutEffect(() => { if (atBottom.current && !anchor.current)
+        toBottom(); }, [messages, toBottom]);
+    const waiting = status === "submitted" && !messages.some(message => message.role === "assistant" && message.streaming);
+    const empty = !messages.length && status !== "connecting";
+    return (_jsxs("div", { className: cx("agent-chat__viewport", className), children: [_jsx("div", { ref: scroller, className: "agent-chat__messages", role: "log", "aria-label": labels.conversation, "aria-live": "off", tabIndex: 0, onScroll: onScroll, children: _jsxs("div", { ref: content, className: "agent-chat__content", children: [hasOlder && (_jsx("button", { type: "button", className: "agent-chat__older", onClick: () => void older(), disabled: loading, children: loading ? labels.loadingOlder : labels.loadOlder })), empty && _jsx(components.EmptyState, { suggestions: suggestions, send: text => void chat.send(text) }), messages.map(message => _jsx(Row, { message: message }, message.id)), waiting && _jsxs("div", { className: "agent-chat__thinking", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {}), _jsx("span", { className: "agent-chat__thinking-text", children: labels.thinking })] }), children] }) }), showJump && (_jsx("button", { type: "button", className: "agent-chat__jump", onClick: () => toBottom(true), children: labels.jumpToLatest })), _jsx(Announcer, {})] }));
+}
+/**
+ * Tells screen readers what happens without reading every streamed token: that the assistant is
+ * responding, then its finished reply, and when it needs input.
+ */
+function Announcer() {
+    const { labels } = useUI();
+    const status = useAgentSelector(snapshot => snapshot.status);
+    const lastReply = useAgentSelector(snapshot => {
+        const last = snapshot.messages.at(-1);
+        return last?.role === "assistant" && !last.streaming ? last : null;
+    });
+    const [text, setText] = useState("");
+    const previous = useRef(status);
+    const seen = useRef(lastReply?.id);
+    useEffect(() => {
+        const was = previous.current;
+        previous.current = status;
+        if (status === "streaming" && was !== "streaming")
+            setText(labels.responding);
+        else if (status === "input_required" && was !== "input_required")
+            setText(labels.needsInput);
+        else if (status === "ready" && lastReply && (was === "streaming" || was === "submitted") && seen.current !== lastReply.id + lastReply.parts.length) {
+            seen.current = lastReply.id + lastReply.parts.length;
+            const reply = lastReply.parts.flatMap(part => part.type === "text" ? [part.text] : []).join("\n").slice(0, 1000);
+            if (reply)
+                setText(`${labels.replied} ${reply}`);
+        }
+    }, [status, lastReply, labels]);
+    return _jsx("div", { className: "agent-chat__sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: text });
+}
+export function EmptyState({ suggestions, send }) {
+    const { labels } = useUI();
+    return (_jsxs("div", { className: "agent-chat__empty", children: [_jsx("p", { className: "agent-chat__empty-title", children: labels.emptyTitle }), suggestions.length > 0 && (_jsx("ul", { className: "agent-chat__suggestions", children: suggestions.map(suggestion => _jsx("li", { children: _jsx("button", { type: "button", className: "agent-chat__suggestion", onClick: () => send(suggestion), children: suggestion }) }, suggestion)) }))] }));
+}

package/dist/ui/tool.d.ts

@@ -0,0 +1,13 @@
+import type { ChatInput, ToolPart } from "@camelai/agent-runtime/chat";
+/** A tool call: its renderer (generative UI) if it has one, what it waits on, or the default card. */
+export declare const ToolView: import("react").MemoExoticComponent<({ part }: {
+    part: ToolPart;
+}) => import("react").JSX.Element>;
+/** The default card for a tool call: what it was called with, its progress, and its result. */
+export declare function ToolCard({ part }: {
+    part: ToolPart;
+}): import("react").JSX.Element;
+/** What the agent waits on: an approval, questions, a form, or a page to visit. */
+export declare const InputCard: import("react").MemoExoticComponent<({ input }: {
+    input: ChatInput;
+}) => import("react").JSX.Element>;