- Implementation
- SingleRecommendationCard API
- Shared Types
Common Examples
Basic Usage
Present a single-select choice:Copy
Ask AI
import { SingleRecommendationCard } from "@servicetitan/ext-atlas";
function SingleSelectExample() {
const handleSubmit = (response) => {
console.log("Selected:", response.optionIds[0]);
console.log("Action:", response.actionId);
};
return (
<SingleRecommendationCard
recommendationId="rec-123"
message="Which service would you like to schedule?"
options={[
{ id: "opt-1", label: "HVAC Maintenance", description: "Annual checkup and filter replacement" },
{ id: "opt-2", label: "Plumbing Inspection", description: "Full system evaluation" },
{ id: "opt-3", label: "Electrical Review", description: "Safety inspection and testing" },
]}
actions={[
{ id: "confirm", name: "Schedule", type: "primary" },
{ id: "cancel", name: "Cancel", type: "ghost" },
]}
onSubmit={handleSubmit}
/>
);
}
Submitted State
Show previously selected values:Copy
Ask AI
import { SingleRecommendationCard } from "@servicetitan/ext-atlas";
function SubmittedExample() {
return (
<SingleRecommendationCard
recommendationId="rec-123"
message="Which service would you like?"
options={options}
actions={actions}
onSubmit={() => {}}
submitted={true}
selected={["opt-2"]}
/>
);
}
Copy
Ask AI
<SingleRecommendationCard
recommendationId="rec-123"
message="Select an option"
options={[
{ id: "opt-1", label: "Option 1", description: "Description" },
]}
actions={[
{ id: "submit", name: "Submit", type: "primary" },
]}
onSubmit={handleSubmit}
submitted={false}
selected={[]}
/>
SingleRecommendationCard Props
Array of action buttons with
id, name, and optional type.The prompt message to display above the options.
Callback fired when an action button is clicked. Receives
sourceMessageId, optionIds, and actionId.Array of selectable options with
id, label, and optional description.Unique identifier for this recommendation, included in the submit response.
Array of selected option IDs to display when
submitted is true.When true, disables all inputs and shows the selected state.
Options Interface
Copy
Ask AI
interface Options {
id: string;
label: string;
description?: string;
value?: string;
}
RecommendationAction Interface
Copy
Ask AI
interface RecommendationAction {
id: string;
name: string;
type?: "primary" | "secondary" | "ghost" | "danger" | "link";
url?: string;
}
ConfirmationResponse Interface
Copy
Ask AI
interface ConfirmationResponse {
sourceMessageId?: string;
optionIds: string[];
actionId: string;
parameters?: Record<string, string | number | undefined>;
}
