Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- SystemMessage API
Common Examples
Basic Usage
Interactive prompt with radio options:import { SystemMessage } from "@servicetitan/anvil2-ext-atlas";
function SystemMessageExample() {
const [selected, setSelected] = useState("");
return (
<SystemMessage
message="How would you like to proceed?"
radioOptions={[
{ value: "continue", label: "Continue", description: "Proceed with current settings" },
{ value: "modify", label: "Modify", description: "Change the settings first" },
]}
selectedValue={selected}
onRadioChange={setSelected}
buttonText="Confirm"
onSubmit={() => handleSubmit(selected)}
/>
);
}
With Disabled Submit
Disable submit until selection is made:import { SystemMessage } from "@servicetitan/anvil2-ext-atlas";
function SystemMessageDisabled() {
const [selected, setSelected] = useState("");
return (
<SystemMessage
message="Choose an option to continue"
radioOptions={options}
selectedValue={selected}
onRadioChange={setSelected}
buttonText="Continue"
onSubmit={() => handleSubmit(selected)}
buttonDisabled={!selected}
/>
);
}
<SystemMessage
message="Select an option"
radioOptions={options}
selectedValue={selected}
onRadioChange={setSelected}
buttonText="Confirm"
onSubmit={handleSubmit}
buttonDisabled={false}
/>
SystemMessage Props
string
required
Text to display on the submit button.
string
required
The prompt message to display.
(value: string) => void
required
Callback fired when the selected option changes.
() => void
required
Callback fired when the submit button is clicked.
Array<{ label: string; description?: string; value: string }>
required
Array of options to display as radio buttons.
string
required
The currently selected option value.
boolean
default:"false"
When true, disables the submit button.
string
Additional CSS class name for custom styling.