Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- MultipleRecommendationCard API
- Shared Types
Common Examples
Basic Usage
Present a multi-select choice:import { MultipleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function MultiSelectExample() {
const handleSubmit = (response) => {
console.log("Selected options:", response.optionIds);
};
return (
<MultipleRecommendationCard
recommendationId="rec-456"
message="Select the issues you're experiencing:"
options={[
{ id: "opt-1", label: "Water heater issues" },
{ id: "opt-2", label: "Low water pressure" },
{ id: "opt-3", label: "Drainage problems" },
{ id: "opt-4", label: "Fixture leaks" },
]}
actions={[
{ id: "submit", name: "Submit", type: "primary" },
]}
onSubmit={handleSubmit}
/>
);
}
With Multiple Actions
Include cancel option:import { MultipleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function MultiSelectWithCancel() {
return (
<MultipleRecommendationCard
recommendationId="rec-456"
message="Select all that apply:"
options={options}
actions={[
{ id: "submit", name: "Submit", type: "primary" },
{ id: "skip", name: "Skip", type: "ghost" },
]}
onSubmit={handleSubmit}
/>
);
}
Submitted State
Show previously selected values:import { MultipleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function SubmittedExample() {
return (
<MultipleRecommendationCard
recommendationId="rec-456"
message="Select the issues:"
options={options}
actions={actions}
onSubmit={() => {}}
submitted={true}
selected={["opt-1", "opt-3"]}
/>
);
}
<MultipleRecommendationCard
recommendationId="rec-456"
message="Select options"
options={[
{ id: "opt-1", label: "Option 1" },
{ id: "opt-2", label: "Option 2" },
]}
actions={[
{ id: "submit", name: "Submit", type: "primary" },
]}
onSubmit={handleSubmit}
submitted={false}
selected={[]}
/>
MultipleRecommendationCard Props
RecommendationAction[]
required
Array of action buttons with
id, name, and optional type.string
required
The prompt message to display above the options.
(response: ConfirmationResponse) => void
required
Callback fired when an action button is clicked. Receives
sourceMessageId, optionIds, and actionId.Options[]
required
Array of selectable options with
id, label, and optional description.string
Unique identifier for this recommendation, included in the submit response.
string[]
Array of selected option IDs to display when
submitted is true.boolean
default:"false"
When true, disables all inputs and shows the selected state.
Options Interface
interface Options {
id: string;
label: string;
description?: string;
value?: string;
}
RecommendationAction Interface
interface RecommendationAction {
id: string;
name: string;
type?: "primary" | "secondary" | "ghost" | "danger" | "link";
url?: string;
}
ConfirmationResponse Interface
interface ConfirmationResponse {
sourceMessageId?: string;
optionIds: string[];
actionId: string;
parameters?: Record<string, string | number | undefined>;
}