Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- Footer API
Common Examples
import { Footer } from "@servicetitan/anvil2-ext-atlas";
function BasicFooter() {
const [message, setMessage] = useState("");
const handleSubmit = () => {
console.log("Sending:", message);
setMessage("");
};
return (
<Footer
message={message}
onMessageChange={setMessage}
onSubmit={handleSubmit}
/>
);
}
With Loading State
Disable input during message processing:import { Footer } from "@servicetitan/anvil2-ext-atlas";
function FooterWithLoading() {
const [message, setMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
const handleSubmit = async () => {
setIsLoading(true);
await sendMessage(message);
setMessage("");
setIsLoading(false);
};
return (
<Footer
message={message}
onMessageChange={setMessage}
onSubmit={handleSubmit}
isLoading={isLoading}
/>
);
}
With Additional Actions
Enable file upload and voice dictation:import { Footer } from "@servicetitan/anvil2-ext-atlas";
function FooterWithActions() {
const [message, setMessage] = useState("");
return (
<Footer
message={message}
onMessageChange={setMessage}
onSubmit={handleSubmit}
onUploadFile={() => openFileDialog()}
onDictateMessage={() => startVoiceInput()}
/>
);
}
Custom Placeholder
import { Footer } from "@servicetitan/anvil2-ext-atlas";
function FooterWithCustomPlaceholder() {
const [message, setMessage] = useState("");
return (
<Footer
message={message}
onMessageChange={setMessage}
onSubmit={handleSubmit}
placeholder="Type your question here..."
/>
);
}
<Footer
message={message}
onMessageChange={setMessage}
onSubmit={handleSubmit}
isLoading={false}
placeholder="Ask Atlas"
onUploadFile={handleUpload}
onDictateMessage={handleDictate}
/>
Footer Props
string
required
The current value of the message input.
(value: string) => void
required
Callback fired when the message input value changes.
() => void
required
Callback fired when the user submits a message.
string
Additional CSS class name for custom styling.
boolean
default:"false"
When true, disables the input and prevents submission.
() => void
Callback for the “Dictate message” menu action. Menu item only renders when provided.
() => void
Callback for the “Upload file” menu action. Menu item only renders when provided.
string
default:"Ask Atlas"
Placeholder text displayed in the input when empty.
Test ID Props
string
Test ID for the privacy policy link.
string
Test ID for the message input element.
string
Test ID for the send button.