@alexkroman1/aai-ui 6.10.1 → 7.0.0

package/README.md

@@ -1,6 +1,6 @@
 # @alexkroman1/aai-ui
 
-The browser client for aai voice agents: React 19 components, hooks, and a
+The browser client for aai agents: React 19 components, hooks, and a
 framework-agnostic session core (WebSocket + microphone + playback).
 
 ```sh
@@ -11,7 +11,13 @@ Every agent gets this UI for free — `aai dev` and deployed agents serve a
 default client built from this package. Install it directly when the agent
 has its own `client.tsx`.
 
-## A custom client
+**Two front doors, two mounts.** A voice agent's page calls `client()` and
+talks to a live session. A workflow app's page (`workflowApp()`, or
+`agent({ page: "static" })`) calls `page()` and talks to the workflow HTTP
+API — no session, no socket, no microphone. Both are still `client.tsx`,
+still React, still the same theme tokens.
+
+## A custom voice client
 
 `client()` mounts the default chat shell with your sidebar, or replaces the
 whole UI with a custom component:
@@ -41,11 +47,106 @@ function OrderSidebar() {
 client({ sidebar: OrderSidebar });
 ```
 
+## A workflow app
+
+`page()` mounts a form over the agent's workflows. `<WorkflowFields>` renders
+one control per scalar property of the workflow's own input schema, so adding
+a field to the schema adds it to the page:
+
+```tsx
+import "@alexkroman1/aai-ui/styles.css";
+import {
+  Form,
+  page,
+  SubmitButton,
+  UploadProgressBar,
+  useWorkflowSubmit,
+  WorkflowFields,
+  WorkflowProgress,
+} from "@alexkroman1/aai-ui";
+
+function App() {
+  const { submit, run, pending, upload, error } = useWorkflowSubmit("digest");
+  return (
+    <main className="mx-auto flex max-w-2xl flex-col gap-6 p-8">
+      <Form onSubmit={submit} error={error}>
+        <WorkflowFields workflow="digest" />
+        <SubmitButton pending={pending}>Summarize</SubmitButton>
+      </Form>
+      {/* The upload is its own wait: the run does not exist until the bytes
+          are in, so nothing else on the page can describe it. */}
+      <UploadProgressBar upload={upload} />
+      {/* What the run has SAID, from `report()` in its steps. */}
+      <WorkflowProgress runId={run?.runId} />
+      {run?.status === "completed" && <pre>{JSON.stringify(run.output)}</pre>}
+    </main>
+  );
+}
+
+page({ name: "Digest", component: App });
+```
+
+`WorkflowOutputOf<typeof myWorkflow>` is what makes
+`run.status === "completed"` narrow to a typed `run.output` — a type-only
+import of `agent.ts` is erased, so it pulls no server code into the bundle.
+
+## What is in the package
+
+The reference below groups by TypeScript kind. This is the same surface
+grouped by what it is for.
+
+**Mounts** — `client()`, `page()`, the config each takes and the handle each
+returns (`ClientConfig`, `ClientHandle`, `PageConfig`, `PageHandle`).
+`fetchClientConfig()` reads the agent's declared `name`/`greeting` on a page,
+which `client()` does for itself.
+
+**The live call** — `useSession()` for the whole snapshot,
+`useSessionSelector()` for one slice, `useUserTranscript()` for the caller's
+in-progress turn. `createSessionCore()` is the same session as a plain store,
+for a non-React client. `SessionSnapshot`, `AgentState`, `ChatMessage`,
+`ToolCallInfo`, `SessionError` and `SessionErrorCode` come with it.
+
+**What the agent pushes** — `useAgentState()` (the `syncState` projection),
+`useToolResult()` / `useToolCallStart()` (tool calls as they run), and
+`useEvent()` (custom events from `ctx.send`).
+
+**Chat chrome** — `ChatView` is the whole surface; `MessageList`, `Controls`,
+`Markdown`, `ToolCallRow`, `StartScreen`, `SidebarLayout`, `AutoScroll` and
+`Button` are its parts, exported so a custom chrome reuses them rather than
+approximating them. `AutoScroll` is the one to reach for directly: it is the
+only scroll-pinning implementation here, and it needs a **bounded height**.
+
+**Forms** — `Form` collects typed values off the DOM on submit. `Field`,
+`TextField`, `NumberField`, `TextAreaField`, `SelectField`, `CheckboxField`,
+`FileField` and `SubmitButton` are the controls; `WorkflowFields` generates
+them from a schema. A plain `<input name="x">` works identically.
+
+**Workflows** — `createWorkflowApi()` is the client;
+`useWorkflowSubmit()` / `useWorkflowStream()` (start one and watch it),
+`useWorkflowRun()` (watch one by id), `useWorkflowRuns()` (the history),
+`useWorkflowProgress()` (what a run has written), `useWorkflows()` (the
+listing). `<WorkflowProgress>` and `<UploadProgressBar>` are the rendered
+halves. `WorkflowRun`, `WorkflowSummary`, `WorkflowOutputOf` and
+`isTerminal()` are the vocabulary.
+
+**Theme** — `useTheme()` and `ClientTheme`.
+
+## Other subpaths
+
+The root export is the whole client API. Two subpaths sit beside it, neither
+of them something a `client.tsx` reaches for:
+
+| Subpath | Reach for it when |
+| --- | --- |
+| `/client-dir` | serving the prebuilt default client from Node — `defaultClientDir()`, the filesystem path `createServer({ clientDir })` wants |
+| `/internal` | never, from application code: the plumbing `client()` installs for itself (the session and theme providers, the default shell's URL chips, the tool-config context, the pre-connection lookup). Not a public API and not covered by semver |
+
 ## Hooks
 
 Inside components rendered by `client()`:
 
-- `useSession()` — connection state, transcript, `connect`/`disconnect`.
+- `useSession()` — connection state, transcript, and the call controls:
+  `start`, `toggle`, `cancel`, `reset`, `resetState`, `disconnect`, `end`.
 - `useAgentState<T>()` — the agent's `syncState` projection, live.
 - `useToolResult(name, cb)` / `useToolCallStart(name, cb)` — observe tool
   calls as they run (e.g. to render a card per result).

package/dist/_run-controls.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The two things a page does TO a run it started, bound to the run it has.
+ *
+ * `useWorkflowSubmit` and `useWorkflowStream` both hold a run id and neither
+ * handed it back, so a page that wanted "send it now" or "stop" had to hold an
+ * `api` of its own purely to write `api.wake(runId)` — which is the whole reason
+ * the two raw-primitive template pages keep a client at module scope. That is a
+ * page carrying the transport to make up for a hook withholding its own state.
+ *
+ * Both calls answer rather than fail when there is nothing to act on — `0`
+ * sleeps ended, `false` this call did not end it — which is the SDK's own
+ * contract for them (two tabs pressing Stop is ordinary), and it is what lets
+ * the no-run case be the same answer rather than a special one a caller has to
+ * branch on.
+ */
+import type { WorkflowApi } from "./workflow-client.ts";
+/** What {@link useRunControls} returns — see {@link WorkflowSubmission}. */
+export type RunControls = {
+    /** End the run's `sleep()` early; resolves how many sleeps it interrupted. */
+    wake: () => Promise<number>;
+    /** Stop the run; resolves whether this call is what ended it. */
+    cancel: () => Promise<boolean>;
+};
+/**
+ * Bind `wake` and `cancel` to whatever run the hook is currently following.
+ *
+ * @param runId - The live run, or `undefined` before one exists.
+ * @param getClient - The stable getter from `useWorkflowApiRef`.
+ * @returns Two callbacks, stable while `runId` is.
+ *
+ * @internal
+ */
+export declare function useRunControls(runId: string | undefined, getClient: () => WorkflowApi): RunControls;

package/dist/{chat-view-ByQFf94G.js → chat-view-BKsFfFZJ.js}

@@ -1,9 +1,9 @@
-import { t as MessageList } from "./message-list-CpPV7dGx.js";
+import { t as MessageList } from "./message-list-DHddO4QC.js";
 import { useSessionSelector, useTheme } from "./context.js";
 import { n as THINKING_COLOR, r as inkTint, t as ERROR_COLOR } from "./_colors-CcAi2FOU.js";
 import { t as AaiLogo } from "./aai-logo-9xRBGVFl.js";
 import { t as Eyebrow } from "./eyebrow-C6ZFuiz6.js";
-import { t as Controls } from "./controls-CjG91QJ4.js";
+import { Controls } from "./components/controls.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region components/console-shell.tsx
@@ -28,13 +28,61 @@ function stateColor(state, primary, idle) {
 	}
 }
 /**
-* The design-system "console" chrome for the chat shell:
-* a 760px column on the cream page with a header
-* (logo + live-status eyebrow), an optional error banner, the main content
-* on a raised white card, and a footer row beneath it.
+* The design-system "console" chrome: a 760px column on the themed page with a
+* header (icon + live-status eyebrow), an announced error banner, the main
+* content on a raised card, and a footer row beneath it.
 *
+* {@link ChatView} is this shell with `<MessageList>` inside it and
+* `<Controls>` under it, and until now that was the only way to get it — the
+* shell itself was internal, so a client wanting its own conversation markup
+* had to rebuild the chrome as well. Each one that did re-derived the error
+* banner WITHOUT `role="alert"`, which is the one part of this component a
+* reviewer cannot see is missing: per the `fatalError` latch in
+* `session-core.ts`, the banner is the only remaining signal once the state
+* eyebrow goes back to reading like a live session, and a screen reader is
+* never told an unannounced one appeared.
 *
-* @internal
+* Reach for it when the conversation is yours and the frame is not. Reach for
+* `<ChatView>` when both are ours.
+*
+* Must be rendered inside the providers `client()` installs.
+*
+* @example A custom conversation in the stock chrome
+* ```tsx
+* import {
+*   ConsoleShell,
+*   Controls,
+*   useConversation,
+*   useSessionSelector,
+* } from "@alexkroman1/aai-ui";
+*
+* function Console() {
+*   const state = useSessionSelector((s) => s.state);
+*   const error = useSessionSelector((s) => s.error);
+*   const { items } = useConversation();
+*   return (
+*     <ConsoleShell
+*       title="Dispatch"
+*       state={state}
+*       pulsing={state === "listening"}
+*       error={error?.message}
+*       footer={<Controls />}
+*     >
+*       <ul>
+*         {items.map((item) => (
+*           <li key={item.kind === "message" ? item.message.id : item.toolCall.callId}>
+*             {item.kind === "message" ? item.message.content : item.toolCall.name}
+*           </li>
+*         ))}
+*       </ul>
+*     </ConsoleShell>
+*   );
+* }
+* ```
+*
+* @param props - See {@link ConsoleShellProps}.
+*
+* @public
 */
 function ConsoleShell({ icon, title, state, pulsing, error, children, footer, className }) {
 	const theme = useTheme();
@@ -113,9 +161,7 @@ const PULSING_STATES = /* @__PURE__ */ new Set(["listening", "speaking"]);
 * }
 * ```
 *
-* @param icon - Optional element rendered in place of the logo in the header.
-* @param title - Optional title string for the header.
-* @param className - Additional CSS class names applied to the root element.
+* @param props - Chat surface props.
 *
 * @public
 */
@@ -134,4 +180,4 @@ function ChatView({ icon, title, className }) {
 	});
 }
 //#endregion
-export { ChatView as t };
+export { ConsoleShell as n, ChatView as t };

package/dist/client-config-B4nznRvH.js

@@ -0,0 +1,134 @@
+import { CLIENT_CONFIG_PATH, ClientConfigResponseSchema } from "@alexkroman1/aai/protocol";
+//#region client-config.ts
+/**
+* Pre-connection client-config lookup.
+*
+* `GET client-config` (relative to the agent's base URL — see
+* `sdk/client-config.ts` in `@alexkroman1/aai`) gives the default client the
+* agent's display name and greeting before any connection exists. For that
+* use every failure path — network error, 404 from an older server,
+* malformed body — degrades to the empty default (`fetchClientConfig`), so
+* the lookup can never break an existing agent.
+*
+* The session's broker decision needs the opposite: `loadClientConfig`
+* keeps "the lookup failed" (`null`) distinct from "the server answered and
+* named no sessionUrl" (`{}`). See its doc comment.
+*/
+/**
+* Resolve a relative endpoint path against the agent's base URL.
+*
+* @internal
+*/
+function buildAgentUrl(platformUrl, endpointPath) {
+	return new URL(endpointPath, platformUrl.endsWith("/") ? platformUrl : `${platformUrl}/`);
+}
+const AGENT_DEFAULT = {};
+/**
+* Per-attempt deadline for the `client-config` lookup.
+*
+* A request issued while the platform is restarting or saturated can HANG
+* rather than fail — the proxy holds the socket open — and a browser fetch
+* has no timeout of its own. Every other failure here is already handled
+* (`null`, then the same-origin fallback), but a hang is not a failure: the
+* promise simply never settles.
+*
+* That is unrecoverable rather than merely slow, because this lookup runs
+* inside the session's WebSocket URL *provider*. partysocket awaits the
+* provider under `_connectLock` and arms its own `connectionTimeout` only
+* AFTER the URL resolves, so a hung lookup means no socket is ever
+* constructed, no `error`/`close` ever fires, and none of the 10 reconnect
+* attempts ever happen — the session sits on "connecting" forever, and stays
+* there long after the server is back. Reproduced: zero sockets opened.
+*
+* A timed-out attempt therefore degrades exactly like any other failed one —
+* `null`, so `serverIsBroker` stays unlatched and the attempt falls through
+* to the same-origin `websocket` path, whose failure re-enters the normal
+* backoff and re-fetches this on the next attempt.
+*
+* Sized well above the real work (one same-origin JSON GET that reads the
+* agent's row) and well under a user's patience — the same 10s the studio's
+* gating reads use for the identical hazard.
+*
+* @internal
+*/
+const CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS = 1e4;
+/**
+* Fetch the agent's client config, reporting `null` when the lookup did not
+* produce an answer (network error, non-2xx, unparsable body).
+*
+* The distinction from `fetchClientConfig` matters for exactly one caller:
+* the session's per-attempt broker decision. A config that ARRIVED and named
+* no `sessionUrl` means "this server is not a broker" (`aai dev`, an older
+* server) — a durable fact worth latching. A lookup that FAILED means
+* nothing about the server, and treating the two alike is how a single 503
+* (a sandbox mid-boot, or one that failed to start) pinned a session to the
+* platform's `/:slug/websocket` — a WebSocket redirect browsers don't
+* follow, so every retry failed with no re-brokering even after the agent
+* recovered.
+*
+* @internal
+*/
+async function loadClientConfig(platformUrl, fetchFn) {
+	const doFetch = fetchFn ?? ((input, init) => globalThis.fetch(input, init));
+	try {
+		const resp = await doFetch(buildAgentUrl(platformUrl, CLIENT_CONFIG_PATH).href, { signal: AbortSignal.timeout(CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS) });
+		if (!resp.ok) return null;
+		const parsed = ClientConfigResponseSchema.safeParse(await resp.json());
+		return parsed.success ? parsed.data : null;
+	} catch {
+		return null;
+	}
+}
+/**
+* Fetch the agent's declared `name`, `greeting` and front door; any failure
+* yields the agent default (`{}`).
+*
+* **This is what a workflow app calls instead of receiving the config.**
+* `client()` fetches `GET client-config` for itself before it renders the
+* default chat shell, so a voice client never has to. `page()` mounts no
+* session and makes no such request — deliberately, since a page has no shell
+* to put a name in — so a page that wants the agent's own `name` or `greeting`
+* asks for them here.
+*
+* Every failure path degrades to the empty default rather than throwing: a
+* network error, a 404 from a server older than the endpoint, a malformed
+* body, and a lookup that hangs past
+* `CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS` all read as "the agent declared nothing".
+* So a page may render straight from the result and never needs a `catch` —
+* treat every field as optional, because an agent that declared none is a
+* normal agent.
+*
+* @param platformUrl - The agent's base URL. On a deployed page that is the
+* page's own origin and path (`location.origin + location.pathname`); the
+* endpoint is resolved relative to it.
+* @param fetchFn - Fetch implementation, for tests and for a caller that
+* supplies its own credentials. Defaults to the global `fetch`.
+* @returns The agent's config, or `{}` when the lookup produced no answer.
+*
+* @example
+* ```tsx
+* import { fetchClientConfig, page } from "@alexkroman1/aai-ui";
+*
+* const { name, greeting } = await fetchClientConfig(
+*   location.origin + location.pathname,
+* );
+*
+* function App() {
+*   return (
+*     <main>
+*       <h1>{name ?? "Workflows"}</h1>
+*       {greeting ? <p>{greeting}</p> : null}
+*     </main>
+*   );
+* }
+*
+* page({ name: name ?? "Workflows", component: App });
+* ```
+*
+* @public
+*/
+async function fetchClientConfig(platformUrl, fetchFn) {
+	return await loadClientConfig(platformUrl, fetchFn) ?? AGENT_DEFAULT;
+}
+//#endregion
+export { fetchClientConfig as n, loadClientConfig as r, buildAgentUrl as t };

package/dist/client-config.d.ts

@@ -68,8 +68,51 @@ export declare const CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS = 10000;
  */
 export declare function loadClientConfig(platformUrl: string, fetchFn?: typeof globalThis.fetch): Promise<ClientConfigResponse | null>;
 /**
- * Fetch the agent's client config; any failure yields the agent default.
+ * Fetch the agent's declared `name`, `greeting` and front door; any failure
+ * yields the agent default (`{}`).
  *
- * @internal
+ * **This is what a workflow app calls instead of receiving the config.**
+ * `client()` fetches `GET client-config` for itself before it renders the
+ * default chat shell, so a voice client never has to. `page()` mounts no
+ * session and makes no such request — deliberately, since a page has no shell
+ * to put a name in — so a page that wants the agent's own `name` or `greeting`
+ * asks for them here.
+ *
+ * Every failure path degrades to the empty default rather than throwing: a
+ * network error, a 404 from a server older than the endpoint, a malformed
+ * body, and a lookup that hangs past
+ * `CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS` all read as "the agent declared nothing".
+ * So a page may render straight from the result and never needs a `catch` —
+ * treat every field as optional, because an agent that declared none is a
+ * normal agent.
+ *
+ * @param platformUrl - The agent's base URL. On a deployed page that is the
+ * page's own origin and path (`location.origin + location.pathname`); the
+ * endpoint is resolved relative to it.
+ * @param fetchFn - Fetch implementation, for tests and for a caller that
+ * supplies its own credentials. Defaults to the global `fetch`.
+ * @returns The agent's config, or `{}` when the lookup produced no answer.
+ *
+ * @example
+ * ```tsx
+ * import { fetchClientConfig, page } from "@alexkroman1/aai-ui";
+ *
+ * const { name, greeting } = await fetchClientConfig(
+ *   location.origin + location.pathname,
+ * );
+ *
+ * function App() {
+ *   return (
+ *     <main>
+ *       <h1>{name ?? "Workflows"}</h1>
+ *       {greeting ? <p>{greeting}</p> : null}
+ *     </main>
+ *   );
+ * }
+ *
+ * page({ name: name ?? "Workflows", component: App });
+ * ```
+ *
+ * @public
  */
 export declare function fetchClientConfig(platformUrl: string, fetchFn?: typeof globalThis.fetch): Promise<ClientConfigResponse>;

package/dist/client-dir.d.ts

@@ -10,6 +10,8 @@
  * serving the default UI has to write them — `aai-cli`'s dev server had its own
  * copy, as did every self-hosted example. Three places that would all silently
  * serve nothing if the build output moved.
+ *
+ * @module client-dir
  */
 /**
  * Absolute path to the prebuilt browser client's static files — pass it to
@@ -27,7 +29,7 @@
  * @example
  * ```ts
  * import { agent } from "@alexkroman1/aai";
- * import { createAgentServer } from "@alexkroman1/aai/runtime";
+ * import { createAgentServer } from "@alexkroman1/aai-runtime";
  * import { defaultClientDir } from "@alexkroman1/aai-ui/client-dir";
  *
  * const server = createAgentServer({

package/dist/client-dir.js

@@ -13,6 +13,8 @@ import path from "node:path";
 * serving the default UI has to write them — `aai-cli`'s dev server had its own
 * copy, as did every self-hosted example. Three places that would all silently
 * serve nothing if the build output moved.
+*
+* @module client-dir
 */
 const require = createRequire(import.meta.url);
 /**
@@ -31,7 +33,7 @@ const require = createRequire(import.meta.url);
 * @example
 * ```ts
 * import { agent } from "@alexkroman1/aai";
-* import { createAgentServer } from "@alexkroman1/aai/runtime";
+* import { createAgentServer } from "@alexkroman1/aai-runtime";
 * import { defaultClientDir } from "@alexkroman1/aai-ui/client-dir";
 *
 * const server = createAgentServer({

package/dist/components/auto-scroll.d.ts

@@ -36,28 +36,39 @@ import type { CSSProperties, ReactNode } from "react";
  * }
  * ```
  *
- * @param children - The scrollable content.
- * @param className - Classes for the outer container. It must be given a
- *   bounded height (`flex-1 min-h-0`, `h-full`, a fixed height) — an unbounded
- *   one grows with its content and never scrolls, so nothing pins.
- * @param contentClassName - Classes for the inner content element, where
- *   padding and the children's own layout belong.
- * @param scrollClassName - Classes for the scrolling element itself. Defaults
- *   to hiding the scrollbar; pass `"overflow-y-auto"` to show a native one.
- * @param style - Inline styles for the outer container.
- * @param initial - Scroll behavior on mount. Defaults to `"instant"` (start at
- *   the latest content without animating a scroll the reader did not ask for).
- * @param resize - Scroll behavior when pinned content grows. Defaults to
- *   `"smooth"`.
+ * @param props - Scroll container props.
  *
  * @public
  */
 export declare function AutoScroll({ children, className, contentClassName, scrollClassName, style, initial, resize, }: {
+    /** The scrollable content. */
     children: ReactNode;
+    /**
+     * Classes for the outer container, appended to its own.
+     *
+     * **The container must end up with a bounded height** (`flex-1 min-h-0`,
+     * `h-full`, a fixed height). This is the one constraint callers get wrong:
+     * an unbounded container grows with its content and never scrolls, so
+     * nothing pins and the component silently does nothing.
+     */
     className?: string | undefined;
+    /**
+     * Classes for the inner content element, where padding and the children's
+     * own layout belong.
+     */
     contentClassName?: string | undefined;
+    /**
+     * Classes for the scrolling element itself. Defaults to hiding the
+     * scrollbar; pass `"overflow-y-auto"` to show a native one.
+     */
     scrollClassName?: string | undefined;
+    /** Inline styles for the outer container. */
     style?: CSSProperties | undefined;
+    /**
+     * Scroll behavior on mount. Defaults to `"instant"` — start at the latest
+     * content without animating a scroll the reader did not ask for.
+     */
     initial?: "instant" | "smooth" | undefined;
+    /** Scroll behavior when pinned content grows. Defaults to `"smooth"`. */
     resize?: "instant" | "smooth" | undefined;
 }): ReactNode;

package/dist/components/button.d.ts

@@ -39,16 +39,20 @@ export type ButtonSize = "default" | "lg";
  * }
  * ```
  *
- * @param variant - Visual style (`"default"` | `"secondary"` | `"ghost"`). Defaults to `"default"`.
- * @param size - Size preset (`"default"` | `"lg"`). Defaults to `"default"`.
- * @param className - Additional CSS class names.
- * @param children - Button label / content.
+ * @param props - Button props: `variant` (visual style — see
+ * {@link ButtonVariant}, defaults to `"default"`), `size` (see
+ * {@link ButtonSize}, defaults to `"default"`), `className` (appended to the
+ * button's own classes), `children` (the label), and any `<button>` attribute.
  *
  * @public
  */
 export declare function Button({ variant, size, className, children, style, ...rest }: {
+    /** Visual style. Defaults to `"default"`. */
     variant?: ButtonVariant;
+    /** Size preset. Defaults to `"default"`. */
     size?: ButtonSize;
+    /** Additional CSS class names, appended to the button's own. */
     className?: string;
+    /** Button label / content. */
     children?: ReactNode;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">): import("react").JSX.Element;

package/dist/components/button.js

@@ -53,10 +53,10 @@ function variantColors(variant, theme) {
 * }
 * ```
 *
-* @param variant - Visual style (`"default"` | `"secondary"` | `"ghost"`). Defaults to `"default"`.
-* @param size - Size preset (`"default"` | `"lg"`). Defaults to `"default"`.
-* @param className - Additional CSS class names.
-* @param children - Button label / content.
+* @param props - Button props: `variant` (visual style — see
+* {@link ButtonVariant}, defaults to `"default"`), `size` (see
+* {@link ButtonSize}, defaults to `"default"`), `className` (appended to the
+* button's own classes), `children` (the label), and any `<button>` attribute.
 *
 * @public
 */

package/dist/components/chat-view.d.ts

@@ -21,14 +21,15 @@ import type { ReactNode } from "react";
  * }
  * ```
  *
- * @param icon - Optional element rendered in place of the logo in the header.
- * @param title - Optional title string for the header.
- * @param className - Additional CSS class names applied to the root element.
+ * @param props - Chat surface props.
  *
  * @public
  */
 export declare function ChatView({ icon, title, className, }: {
+    /** Element rendered in place of the logo in the header. */
     icon?: ReactNode | undefined;
+    /** Title string for the header. Defaults to the agent's declared name. */
     title?: string | undefined;
+    /** Additional CSS class names for the root element, appended to its own. */
     className?: string | undefined;
 }): ReactNode;

package/dist/components/chat-view.js

@@ -1,3 +1,3 @@
 import "../context.js";
-import { t as ChatView } from "../chat-view-ByQFf94G.js";
+import { t as ChatView } from "../chat-view-BKsFfFZJ.js";
 export { ChatView };