+ onFooterAction?.(id)}
+ onBeforeAction={onBeforeFooterAction}
+ />
+
+ ) : null}
- {
- console.log("Decision prompt action:", actionId);
-
- if (actionId === "install" || actionId === "send") {
- await new Promise((resolve) => setTimeout(resolve, 1500));
- }
-
- setSelectedAction(actionId);
- }}
- onMultiAction={async (actionIds) => {
- console.log("Decision prompt multi-action:", actionIds);
-
- await new Promise((resolve) => setTimeout(resolve, 1500));
-
- setSelectedActions(actionIds);
- }}
- />
-
- )}
- renderCodePanel={(loading) => (
-
+ {
+ console.log("OptionList confirmed:", sel);
+ alert(`Selection confirmed: ${JSON.stringify(sel)}`);
+ }}
+ />
+
+ )}
+ renderCodePanel={() => (
+
-
-
-
-
diff --git a/app/docs/option-list/content.mdx b/app/docs/option-list/content.mdx
new file mode 100644
index 0000000..00c171f
--- /dev/null
+++ b/app/docs/option-list/content.mdx
@@ -0,0 +1,155 @@
+import { DocsHeader } from "../_components/docs-header";
+import { OptionList } from "@/components/tool-ui/option-list";
+
+
+
+
+
+ ```tsx
+ import { OptionList } from "@/components/tool-ui/option-list";
+
+ export function Example() {
+ return (
+ console.log(selection)}
+ />
+ );
+ }
+ ```
+
+
+
+## When to Use Option List
+
+- **Good for:** File format selection, preference choices, confirmation prompts
+- **Not for:** Long lists (use DataTable), complex forms, free-text input
+
+## Key Features
+
+- **Single or multi-select**: Radio-style or checkbox-style selection
+- **Selection constraints**: Min/max selection limits
+- **Configurable actions**: Customizable footer buttons
+- **Controlled or uncontrolled**: Works with or without external state
+
+## Source and Install
+
+Copy `components/option-list` into your project next to your shadcn/ui components:
+
+
+
+
+
+
+
+
+
+
+### Download
+
+- [**Source on GitHub**](https://github.com/assistant-ui/tool-ui/tree/main/components/option-list)
+- [**Quick download (ZIP)**](https://download-directory.github.io/?url=https://github.com/assistant-ui/tool-ui/tree/main/components/option-list)
+
+## Usage
+
+```tsx
+// Backend tool
+import { tool } from 'ai';
+import { z } from 'zod';
+import { serializableOptionListSchema } from '@tool-ui/option-list';
+
+const selectFormat = tool({
+ description: 'Let user select export format(s)',
+ inputSchema: z.object({ formats: z.array(z.string()) }),
+ outputSchema: serializableOptionListSchema,
+ async execute({ formats }) {
+ return {
+ options: formats.map(f => ({ id: f, label: f.toUpperCase() })),
+ selectionMode: 'multi',
+ maxSelections: 2,
+ };
+ },
+});
+
+// Frontend with assistant-ui
+import { makeAssistantToolUI } from '@assistant-ui/react';
+import { OptionList } from '@tool-ui/option-list';
+
+export const SelectFormatUI = makeAssistantToolUI({
+ toolName: 'selectFormat',
+ render: ({ result }) => (
+ {
+ console.log('Selected formats:', selection);
+ }}
+ />
+ ),
+});
+```
+
+## Props
+
+ void" },
+onConfirm: { description: "Confirm button handler", type: "(value) => void | Promise" },
+onCancel: { description: "Cancel/clear handler", type: "() => void" },
+}}
+/>
+
+## Option Schema
+
+({
onSortChange,
className,
locale,
+ footerActions,
+ onFooterAction,
+ onBeforeFooterAction,
}: DataTableProps) {
/**
* Resolved locale with explicit default.
@@ -149,6 +153,11 @@ export function DataTable({
: "";
}, [columns, sortBy, sortDirection]);
+ const normalizedFooterActions = React.useMemo(
+ () => normalizeActionsConfig(footerActions),
+ [footerActions],
+ );
+
return (
);
diff --git a/components/tool-ui/data-table/types.ts b/components/tool-ui/data-table/types.ts
index 99dfabb..43c52fc 100644
--- a/components/tool-ui/data-table/types.ts
+++ b/components/tool-ui/data-table/types.ts
@@ -1,3 +1,4 @@
+import type { ActionsProp } from "../shared";
import type { FormatConfig } from "./formatters";
/**
@@ -246,6 +247,10 @@ export interface DataTableClientProps
+
+ ({
{sortAnnouncement}
)}
+
+ {normalizedFooterActions ? (
+
+ onFooterAction?.(id)}
+ onBeforeAction={onBeforeFooterAction}
+ />
+
+ ) : null}
- {actions.map((action) => {
- const isConfirming = confirmingActionId === action.id;
- const isExecuting = executingActionId === action.id;
- const isLoading = action.loading || isExecuting;
- const isDisabled =
- action.disabled || (executingActionId !== null && !isExecuting);
-
- // Determine label: use confirmLabel if in confirm state
- const label =
- isConfirming && action.confirmLabel
- ? action.confirmLabel
- : action.label;
-
- // Determine variant: make destructive actions more prominent in confirm state
- const variant = action.variant || "default";
-
- return (
-
- );
- })}
-
- );
-}
diff --git a/components/tool-ui/decision-prompt/decision-prompt.tsx b/components/tool-ui/decision-prompt/decision-prompt.tsx
deleted file mode 100644
index c39c089..0000000
--- a/components/tool-ui/decision-prompt/decision-prompt.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client";
-
-import type { DecisionPromptProps } from "./schema";
-import { DecisionPromptActions } from "./actions";
-import { MultiSelectActions } from "./multi-select-actions";
-import { DecisionPromptReceipt } from "./receipt";
-import { cn } from "./_cn";
-
-export function DecisionPrompt({
- prompt: _prompt,
- actions,
- selectedAction,
- selectedActions,
- description: _description,
- onAction = () => {},
- onMultiAction = () => {},
- onBeforeAction,
- confirmTimeout = 3000,
- align = "right",
- layout = "inline",
- multiSelect = false,
- confirmLabel = "Confirm",
- cancelLabel = "Cancel",
- minSelections = 1,
- maxSelections,
- className,
-}: DecisionPromptProps) {
- const isCompleted = multiSelect
- ? selectedActions && selectedActions.length > 0
- : !!selectedAction;
-
- return (
-
- {isCompleted ? (
-
- );
-}
diff --git a/components/tool-ui/decision-prompt/index.tsx b/components/tool-ui/decision-prompt/index.tsx
deleted file mode 100644
index cd566a5..0000000
--- a/components/tool-ui/decision-prompt/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export { DecisionPrompt } from "./decision-prompt";
-export type {
- DecisionPromptAction,
- DecisionPromptProps,
- SerializableDecisionPrompt,
-} from "./schema";
-export {
- DecisionPromptActionSchema,
- DecisionPromptPropsSchema,
- SerializableDecisionPromptSchema,
-} from "./schema";
-export { parseSerializableDecisionPrompt } from "./schema";
diff --git a/components/tool-ui/decision-prompt/multi-select-actions.tsx b/components/tool-ui/decision-prompt/multi-select-actions.tsx
deleted file mode 100644
index 8c803e3..0000000
--- a/components/tool-ui/decision-prompt/multi-select-actions.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-"use client";
-
-import { useState, useCallback } from "react";
-import type { DecisionPromptAction } from "./schema";
-import { Button } from "./_ui";
-import { cn } from "./_cn";
-import { Check } from "lucide-react";
-
-interface MultiSelectActionsProps {
- actions: DecisionPromptAction[];
- onConfirm: (actionIds: string[]) => void | Promise
-
- );
-}
diff --git a/components/tool-ui/decision-prompt/receipt.tsx b/components/tool-ui/decision-prompt/receipt.tsx
deleted file mode 100644
index 8b9f00c..0000000
--- a/components/tool-ui/decision-prompt/receipt.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-
-import { CheckCircle2 } from "lucide-react";
-import type { DecisionPromptAction } from "./schema";
-import { Badge } from "./_ui";
-import { cn } from "./_cn";
-
-interface DecisionPromptReceiptProps {
- selectedAction?: string;
- selectedActions?: string[];
- actions: DecisionPromptAction[];
- align?: "left" | "center" | "right";
- multiSelect?: boolean;
- className?: string;
-}
-
-export function DecisionPromptReceipt({
- selectedAction,
- selectedActions,
- actions,
- align = "right",
- multiSelect = false,
- className,
-}: DecisionPromptReceiptProps) {
- const alignClass = {
- left: "justify-start",
- center: "justify-center",
- right: "justify-end",
- }[align];
-
- // Multi-select mode
- if (multiSelect && selectedActions && selectedActions.length > 0) {
- const selectedActionObjs = actions.filter((a) =>
- selectedActions.includes(a.id),
- );
-
- return (
-
- {actions.map((action) => {
- const isSelected = selectedIds.has(action.id);
- const isDisabled = Boolean(
- action.disabled ||
- isExecuting ||
- (!isSelected &&
- maxSelections &&
- selectedIds.size >= maxSelections),
- );
-
- return (
-
- );
- })}
-
-
-
-
-
-
-
- {selectedActionObjs.map((action) => (
-
-
- ))}
-
- );
- }
-
- // Single-select mode
- const action = actions.find((a) => a.id === selectedAction);
-
- if (!action) {
- return null;
- }
-
- return (
-
-
-
-
- );
-}
diff --git a/components/tool-ui/decision-prompt/schema.ts b/components/tool-ui/decision-prompt/schema.ts
deleted file mode 100644
index 41ff7e4..0000000
--- a/components/tool-ui/decision-prompt/schema.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { z } from "zod";
-import type { ReactNode } from "react";
-
-export const DecisionPromptActionSchema = z.object({
- id: z.string().min(1),
- label: z.string().min(1),
- confirmLabel: z.string().optional(),
- variant: z
- .enum(["default", "destructive", "secondary", "ghost", "outline"])
- .optional(),
- icon: z.custom
+ {selectionMode === "multi" && isSelected &&
+ );
+
+ return (
+
+
+ );
+}
diff --git a/components/tool-ui/option-list/schema.ts b/components/tool-ui/option-list/schema.ts
new file mode 100644
index 0000000..2cfc6dd
--- /dev/null
+++ b/components/tool-ui/option-list/schema.ts
@@ -0,0 +1,68 @@
+import { z } from "zod";
+import type { ReactNode } from "react";
+import type { ActionsProp } from "../shared";
+import {
+ ActionSchema,
+ SerializableActionSchema,
+ SerializableActionsConfigSchema,
+} from "../shared";
+
+export const OptionListOptionSchema = z.object({
+ id: z.string().min(1),
+ label: z.string().min(1),
+ description: z.string().optional(),
+ icon: z.custom
+ {options.map((option, index) => {
+ const isSelected = selectedIds.has(option.id);
+ const isSelectionLocked =
+ selectionMode === "multi" &&
+ effectiveMaxSelections !== undefined &&
+ selectedCount >= effectiveMaxSelections &&
+ !isSelected;
+ const isDisabled = option.disabled || isSelectionLocked;
+
+ return (
+
+ {index > 0 && (
+
+ );
+ })}
+
+
+
+
+
+ {resolvedActions.map((action) => {
+ const label = action.currentLabel;
+ const variant = action.variant || "default";
+
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/components/tool-ui/shared/actions-config.ts b/components/tool-ui/shared/actions-config.ts
new file mode 100644
index 0000000..e3f1696
--- /dev/null
+++ b/components/tool-ui/shared/actions-config.ts
@@ -0,0 +1,23 @@
+import type { Action, ActionsConfig } from "./schema";
+
+export type ActionsProp = ActionsConfig | Action[];
+
+export function normalizeActionsConfig(
+ actions?: ActionsProp,
+): ActionsConfig | null {
+ if (!actions) return null;
+
+ const resolved = Array.isArray(actions)
+ ? { items: actions }
+ : {
+ items: actions.items ?? [],
+ align: actions.align,
+ confirmTimeout: actions.confirmTimeout,
+ };
+
+ if (!resolved.items || resolved.items.length === 0) {
+ return null;
+ }
+
+ return resolved;
+}
diff --git a/components/tool-ui/shared/index.ts b/components/tool-ui/shared/index.ts
new file mode 100644
index 0000000..7d27135
--- /dev/null
+++ b/components/tool-ui/shared/index.ts
@@ -0,0 +1,22 @@
+export { ActionButtons } from "./action-buttons";
+export type { ActionButtonsProps } from "./action-buttons";
+export { useActionButtons } from "./use-action-buttons";
+export type {
+ UseActionButtonsOptions,
+ UseActionButtonsResult,
+} from "./use-action-buttons";
+export type {
+ Action,
+ SerializableAction,
+ ActionsConfig,
+ SerializableActionsConfig,
+} from "./schema";
+export type { ActionsProp } from "./actions-config";
+export { normalizeActionsConfig } from "./actions-config";
+export {
+ ActionSchema,
+ SerializableActionSchema,
+ ActionButtonsPropsSchema,
+ SerializableActionsSchema,
+ SerializableActionsConfigSchema,
+} from "./schema";
diff --git a/components/tool-ui/shared/schema.ts b/components/tool-ui/shared/schema.ts
new file mode 100644
index 0000000..bc6e0c4
--- /dev/null
+++ b/components/tool-ui/shared/schema.ts
@@ -0,0 +1,48 @@
+import { z } from "zod";
+import type { ReactNode } from "react";
+
+export const ActionSchema = z.object({
+ id: z.string().min(1),
+ label: z.string().min(1),
+ confirmLabel: z.string().optional(),
+ variant: z
+ .enum(["default", "destructive", "secondary", "ghost", "outline"])
+ .optional(),
+ icon: z.custom