@mast-ai/react-ui 0.2.0 → 0.4.0

package/dist/components/ConversationPanel.d.ts

@@ -9,11 +9,11 @@ import type { GetToolLabel } from './ToolLabelContext.js';
  */
 export interface ConversationPanelProps {
     /**
-     * Forces a theme regardless of the user's `prefers-color-scheme` setting.
-     * When omitted, the panel follows the OS preference via the default
-     * stylesheet's media query.
+     * Selects the panel's theme. Defaults to `'light'`. Pass `'dark'` to force
+     * the dark palette regardless of OS preference, or `'auto'` to follow the
+     * user's `prefers-color-scheme` setting.
      */
-    theme?: 'light' | 'dark';
+    theme?: 'light' | 'dark' | 'auto';
     /** Optional class added to the root `[data-mast-root]` element. */
     className?: string;
     /**
@@ -54,8 +54,12 @@ export interface ConversationPanelProps {
  *
  * Internally renders {@link MessageList} and {@link ChatInput} inside a
  * `[data-mast-root]` div so the default stylesheet's CSS custom properties
- * resolve. Sets `data-mast-theme` from the optional `theme` prop, which the
- * default stylesheet uses to override the OS-driven dark mode preference.
+ * resolve. The same div carries `mast-panel` so the bundled chrome (border,
+ * padding, flex column, `height: 100%`) is applied; consumers composing
+ * primitives manually opt into chrome by adding the class themselves (see
+ * USAGE.md §8). `data-mast-theme` is set from the optional `theme` prop;
+ * the default stylesheet uses it to select between light, dark, and an
+ * OS-following auto mode.
  *
  * Must be rendered inside an `<AgentProvider>`.
  */

package/dist/components/MessageList.d.ts

@@ -49,8 +49,10 @@ export interface MessageListProps {
  * `virtualizer.measureElement`, so messages with long tool call results or
  * large markdown blocks expand the viewport correctly.
  *
- * Auto-scrolls to the bottom whenever a new entry is appended or the last
- * entry's `text` grows during streaming.
+ * Auto-scrolls to the bottom whenever the content grows (new entry, streaming
+ * text deltas, thinking/tool blocks expanding) **only if** the user is already
+ * at the bottom of the list. If the user has scrolled up to read an earlier
+ * message, their scroll position is preserved until they scroll back down.
  *
  * Reads `messages` from `useAgent()`, so this component must be rendered
  * inside an `<AgentProvider>`.

package/dist/context.d.ts

@@ -35,8 +35,13 @@ export interface AgentProviderProps {
      * {@link import('./approval.js').INLINE_APPROVAL} to defer to the inline
      * approval queue exposed via `useAgent().pendingApprovals`.
      *
-     * Not called when no tool requires approval, and not called when the prop
-     * is omitted — in which case `requiresApproval: true` tools execute silently.
+     * Defaults to a callback that returns `INLINE_APPROVAL` for every call when
+     * omitted, so tools marked `requiresApproval: true` always pause for user
+     * confirmation by default. Apps that already render `<InlineApproval>` (or
+     * read `useAgent().pendingApprovals`) get a working approval flow with no
+     * additional wiring. Provide a custom callback to plug in a different
+     * confirmation UI, auto-approve specific tools, inject canned results, or
+     * short-circuit cancellations.
      */
     onApprovalRequired?: OnApprovalRequired;
     /**
@@ -66,18 +71,28 @@ export interface AgentProviderProps {
      */
     onConversationChange?: (history: Message[], entries: ConversationEntry[]) => void;
     /**
-     * Forces a theme on the auto-rendered `[data-mast-root]` wrapper. When
-     * omitted, the panel follows the OS preference via the default stylesheet's
-     * `prefers-color-scheme` media query. Ignored when `disableRoot` is `true`.
+     * Selects the theme on the auto-rendered `[data-mast-root]` wrapper.
+     * Defaults to `'light'`. Pass `'dark'` to force the dark palette or
+     * `'auto'` to follow the OS `prefers-color-scheme` preference. Only
+     * meaningful when `disableRoot` is explicitly `false` (so the provider
+     * actually renders the wrapper); when omitted or `true`, this prop has no
+     * effect and consumers should set `data-mast-theme` themselves on whatever
+     * element carries `data-mast-root`.
      */
-    theme?: 'light' | 'dark';
+    theme?: 'light' | 'dark' | 'auto';
     /**
-     * Disable the auto-rendered `<div data-mast-root>` wrapper around `children`.
-     * Use this when you want to place `data-mast-root` somewhere else in the
-     * tree yourself, e.g. on a chat sidebar's outer container so additional
-     * non-library UI inside also picks up the library's CSS variables.
+     * Controls whether the provider renders an auto wrapper `<div data-mast-root>`
+     * around `children`.
      *
-     * Default: `false` (the wrapper is rendered).
+     * Default: `true` — the provider is transparent in the DOM and consumers
+     * are responsible for placing `data-mast-root` themselves (typically on the
+     * outermost container, or implicitly via `<ConversationPanel>` which carries
+     * its own `data-mast-root`). This avoids the auto wrapper's panel chrome
+     * (border, padding, `height: 100%`) leaking onto whatever subtree the
+     * provider wraps, including app-root mounts.
+     *
+     * Set to `false` to opt back into the auto wrapper for zero-config setups
+     * that compose primitives directly without their own root container.
      */
     disableRoot?: boolean;
 }