agentic-ui-kit 0.3.0 → 0.5.0

package/dist/types/react/src/primitives/menu.d.ts

@@ -25,6 +25,8 @@ export interface MenuItemProps extends Omit<AriaMenuItemProps, "className" | "ch
     icon?: ReactNode;
     /** Second line under the label ("For complex work and everyday tasks"). */
     description?: ReactNode;
+    /** "below" (default) puts the description under the label; "beside" puts it after it on one line. */
+    descriptionPlacement?: "below" | "beside";
     /** Right-aligned detail: the current value of a submenu ("Medium") or a badge. */
     detail?: ReactNode;
     /** Keyboard shortcut shown on the right ("⌘U", "P"). */
@@ -33,7 +35,7 @@ export interface MenuItemProps extends Omit<AriaMenuItemProps, "className" | "ch
     tone?: "default" | "danger";
     className?: string;
 }
-export declare function MenuItem({ children, icon, description, detail, shortcut, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuItem({ children, icon, description, descriptionPlacement, detail, shortcut, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;
 export interface MenuSectionProps {
     children: ReactNode;
     title?: ReactNode;

package/dist/types/react/src/primitives/segmented-control.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+export interface SegmentedOption<T extends string = string> {
+    id: T;
+    label: string;
+    icon?: ReactNode;
+    /** Show only the icon; the label becomes its accessible name and tooltip. */
+    iconOnly?: boolean;
+}
+export interface SegmentedControlProps<T extends string = string> {
+    /** Accessible name of the group, e.g. "Mode". */
+    label: string;
+    options: readonly SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    className?: string;
+}
+/**
+ * One of a few options, side by side on a track, like claude.ai's Chat / Cowork switch. Themed with
+ * `--chat-segment-track` (default: a shade darker than the surface it sits on) and `--chat-segment-selected`
+ * (default `--chat-raised`).
+ */
+export declare function SegmentedControl<T extends string>({ label, options, value, onChange, className }: SegmentedControlProps<T>): import("react").JSX.Element;

package/dist/types/react/src/views/chat-view.d.ts

@@ -2,7 +2,7 @@ import type { Message, Part } from "../../../core/src/index.js";
 import { type CSSProperties, type ReactNode } from "react";
 import type { PendingApproval } from "../hooks/use-chat";
 import { type ComposerProps } from "../components/composer";
-import type { Feedback } from "../components/messages";
+import type { Feedback, MessageActions } from "../components/messages";
 import { type WidgetHost } from "../components/widget-frame";
 export type Density = "full" | "panel" | "inline";
 /**
@@ -22,6 +22,10 @@ export interface ChatViewProps {
     onRetry?: (assistantId: string) => void;
     onEdit?: (userId: string) => void;
     onFeedback?: (assistantId: string, feedback: Feedback) => void;
+    /** Read aloud button on assistant messages. */
+    onReadAloud?: (assistantId: string) => void;
+    /** Add your own buttons to each message's action row, or hide copy and the time. */
+    messageActions?: MessageActions;
     renderPart?: (part: Part) => ReactNode;
     /**
      * What widgets (sandboxed visuals) may do: the domains they may load, and their callbacks. A widget's
@@ -40,6 +44,11 @@ export interface ChatViewProps {
     emptyState?: (composer: ReactNode) => ReactNode;
     /** Small print under the composer. */
     disclaimer?: ReactNode;
+    /**
+     * Wraps the composer, on the empty screen and docked under the chat, to put things outside its box:
+     * buttons above or beside it, a row of chips under it. `where` says which of the two it is.
+     */
+    renderComposer?: (composer: ReactNode, where: "empty" | "docked") => ReactNode;
     /** "full": a page. "panel": a docked side panel. "inline": a small area inside a form. */
     density?: Density;
     /** Width of the message column, e.g. "48rem". Users can change it in settings. */
@@ -49,11 +58,14 @@ export interface ChatViewProps {
     className?: string;
 }
 /** A whole chat: header, the conversation, the docked composer. An empty chat shows `emptyState`. */
-export declare function ChatView({ messages, busy, onSend, onStop, approvals, onApprove, onRetry, onEdit, onFeedback, renderPart, widgets, header, composer, emptyState, disclaimer, density, contentWidth, contentPadding, className, }: ChatViewProps): import("react").JSX.Element;
+export declare function ChatView({ messages, busy, onSend, onStop, approvals, onApprove, onRetry, onEdit, onFeedback, onReadAloud, messageActions, renderPart, widgets, header, composer, emptyState, disclaimer, renderComposer, density, contentWidth, contentPadding, className, }: ChatViewProps): import("react").JSX.Element;
 export interface EmptyStateProps {
     /** "Good evening, Alex". */
     greeting: ReactNode;
-    /** Mark left of the greeting, e.g. a logo. */
+    /**
+     * Mark left of the greeting, e.g. a logo. Its currentColor is --chat-empty-icon (default the accent), for
+     * one-color marks; a multi-color logo sets its own fills.
+     */
     icon?: ReactNode;
     /** The centered composer. */
     children: ReactNode;

package/dist/types/react/src/views/sidebar.d.ts

@@ -2,6 +2,8 @@ import type { ReactNode } from "react";
 export interface SidebarProps {
     /** Name or logo at the top left; hidden when collapsed. */
     brand?: ReactNode;
+    /** A logo mark left of `brand`, sized 1.25rem. It stays at the top of the collapsed rail. */
+    brandIcon?: ReactNode;
     /** Buttons at the top right next to the collapse toggle, e.g. a mode switch. */
     headerActions?: ReactNode;
     /** Fixed items under the header: New chat, Search, Projects… (`SidebarItem`s). */
@@ -13,7 +15,7 @@ export interface SidebarProps {
     className?: string;
 }
 /** The claude.ai sidebar frame. Collapses to an icon rail inside `AppShell`; a drawer on phones. */
-export declare function Sidebar({ brand, headerActions, nav, children, footer, className }: SidebarProps): import("react").JSX.Element;
+export declare function Sidebar({ brand, brandIcon, headerActions, nav, children, footer, className }: SidebarProps): import("react").JSX.Element;
 export interface SidebarItemProps {
     icon: ReactNode;
     label: string;

package/dist/{ui-markup-6xbP-myu.js → ui-markup-CG9Lednh.js}

@@ -422,6 +422,25 @@ function parseMessage(text) {
 	if (data.length === 0) return void 0;
 	return JSON.parse(data.join("\n"));
 }
+// ../core/src/replaces.ts
+/**
+* Updating a visual in place: the drawing tools (show_widget, show_ui, render_ui) take an optional
+* `replaces`, the id of an earlier call of theirs. The kit draws the new call where the old one was (same
+* reply) or folds the old one into a link to the new one (earlier reply). The model sees its own call ids in
+* the history, so keep tool call ids when you send the history back.
+*/
+/** The `replaces` input property, shared by the drawing tools. */
+const replacesProperty = {
+	type: "string",
+	description: "Id of an earlier call of this tool whose visual this one updates in place: after a fix, or when the user asks for a change. Leave it out for a new visual."
+};
+/** One line for a drawing tool's description or guide. */
+const replacesGuide = "To change a visual you already drew (a fix, or the user asks for a change), call the tool again with `replaces` set to that call's id: it is redrawn in place. Never draw a second copy without it.";
+/** The id a drawing tool call replaces, from its (streaming) input; undefined if none. */
+function replacedId(input) {
+	const r = input?.replaces;
+	return typeof r === "string" && r ? r : void 0;
+}
 // ../core/src/ui-tree.ts
 /**
 * Host-registered components: instead of HTML, the model writes a small tree of components the host
@@ -557,6 +576,7 @@ function renderUiTool(components) {
 Write a tree: { "root": { "component": "<name>", "props": { ... }, "children": [ ...nodes ] }, "state": { ... } }.
 "root" is a JSON object, never a string. Only these components exist; a node with an unknown component or
 props that don't fit is not shown. One visual per answer: don't also draw the same thing another way.
+${replacesGuide}
 ${list}
 
 Actions: a prop the schema marks as an action takes one of
@@ -577,7 +597,8 @@ Set apart what you added or changed from what was already there.`,
 				state: {
 					type: "object",
 					description: "Starting values of the widget's state."
-				}
+				},
+				replaces: replacesProperty
 			},
 			required: ["root"]
 		}
@@ -658,7 +679,7 @@ function checkUiTree(input, components, options = {}) {
 	return {
 		ok,
 		errors,
-		feedback: ok ? "Shown to the user." : `${bad === 0 ? "Not shown as written" : `Only part of it is shown: ${bad} of ${total} nodes were left out`}. Fix these and call ${toolName} again:\n` + errors.slice(0, 20).map((e) => `- ${e}`).join("\n") + (errors.length > 20 ? `\n- ...and ${errors.length - 20} more` : "")
+		feedback: ok ? "Shown to the user." : `${bad === 0 ? "Not shown as written" : `Only part of it is shown: ${bad} of ${total} nodes were left out`}. Fix these and call ${toolName} again with "replaces" set to this call's id, without remarking on the fix to the user:\n` + errors.slice(0, 20).map((e) => `- ${e}`).join("\n") + (errors.length > 20 ? `\n- ...and ${errors.length - 20} more` : "")
 	};
 }
 // ../core/src/ui-markup.ts
@@ -1039,13 +1060,16 @@ const showUiToolName = "show_ui";
 function showUiTool(components, name = showUiToolName) {
 	return {
 		name,
-		description: "Show interactive UI inline in your reply, built from the app's components: options to compare, a plan, a checklist, numbers at a glance. Write JSX in `markup`. Keep explaining in text around it; one call per answer unless the user asks for more.\n\n" + markupRules(components),
+		description: "Show interactive UI inline in your reply, built from the app's components: options to compare, a plan, a checklist, numbers at a glance. Write JSX in `markup`. Keep explaining in text around it; one call per answer unless the user asks for more. " + replacesGuide + "\n\n" + markupRules(components),
 		inputSchema: {
 			type: "object",
-			properties: { markup: {
-				type: "string",
-				description: "JSX of the components above, e.g. <Card title=\"Plan\"><Metric label=\"Total\" value=\"€184\" /></Card>"
-			} },
+			properties: {
+				markup: {
+					type: "string",
+					description: "JSX of the components above, e.g. <Card title=\"Plan\"><Metric label=\"Total\" value=\"€184\" /></Card>"
+				},
+				replaces: replacesProperty
+			},
 			required: ["markup"]
 		}
 	};
@@ -1065,7 +1089,7 @@ function checkUiMarkupCode(markup, components, toolName = showUiToolName) {
 	return {
 		ok,
 		errors,
-		feedback: ok ? "Shown to the user." : `Not all of it is shown. Fix these and call ${toolName} again:\n` + list(errors)
+		feedback: ok ? "Shown to the user." : `Not all of it is shown. Fix these and call ${toolName} again with "replaces" set to this call's id, without remarking on the fix to the user:\n` + list(errors)
 	};
 }
 /**
@@ -1079,4 +1103,4 @@ When a visual helps more than text (options to compare, a plan, a checklist, num
 ${markupRules(components)}
 - Keep explaining in text around the block. One block per answer, unless the user asks for more.`;
 }
-export { salvageJson as A, awaitingToolCalls as C, resolveEffort as D, reduceEvents as E, settleToolCall as O, applyEvent as S, outputTokens as T, formatEvent as _, readUiValue as a, toBlocks as b, uiMarkupGuide as c, isStateRef as d, matchesSchema as f, uiActionSchema as g, schemaErrors as h, parseUiMarkup as i, parsePartialJson as k, uiMarkupLanguage as l, renderUiToolName as m, checkUiMarkupCode as n, showUiTool as o, renderUiTool as p, findUiBlocks as r, showUiToolName as s, checkUiMarkup as t, checkUiTree as u, readEventStream as v, estimateTokens as w, activityTokens as x, isActivityPart as y };
+export { resolveEffort as A, toBlocks as C, estimateTokens as D, awaitingToolCalls as E, parsePartialJson as M, salvageJson as N, outputTokens as O, isActivityPart as S, applyEvent as T, replacedId as _, readUiValue as a, formatEvent as b, uiMarkupGuide as c, isStateRef as d, matchesSchema as f, uiActionSchema as g, schemaErrors as h, parseUiMarkup as i, settleToolCall as j, reduceEvents as k, uiMarkupLanguage as l, renderUiToolName as m, checkUiMarkupCode as n, showUiTool as o, renderUiTool as p, findUiBlocks as r, showUiToolName as s, checkUiMarkup as t, checkUiTree as u, replacesGuide as v, activityTokens as w, readEventStream as x, replacesProperty as y };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-ui-kit",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "React UI kit for LLM chat and agentic apps: streaming messages, tool calls, approvals, themable with CSS variables.",
   "license": "MIT",
   "type": "module",