Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- Content API
Common Examples
import { Content, UserMessage, MarkdownMessage } from "@servicetitan/anvil2-ext-atlas";
function ChatContent() {
const messages = [
{ id: 1, type: "user", content: "Hello!" },
{ id: 2, type: "assistant", content: "Hi! How can I help you?" },
];
return (
<Content itemsLength={messages.length}>
{messages.map((msg) =>
msg.type === "user" ? (
<UserMessage key={msg.id} message={msg.content} />
) : (
<MarkdownMessage key={msg.id} message={msg.content} />
)
)}
</Content>
);
}
With Loading State
Display a loading spinner while fetching initial messages:import { Content } from "@servicetitan/anvil2-ext-atlas";
function LoadingContent() {
const [loading, setLoading] = useState(true);
const [messages, setMessages] = useState([]);
useEffect(() => {
fetchMessages().then((data) => {
setMessages(data);
setLoading(false);
});
}, []);
return (
<Content itemsLength={messages.length} loading={loading}>
{messages.map((msg) => (
<Message key={msg.id} {...msg} />
))}
</Content>
);
}
Auto-Scroll Behavior
The component automatically scrolls to the bottom when new messages are added:import { Content, UserMessage } from "@servicetitan/anvil2-ext-atlas";
function AutoScrollContent() {
const [messages, setMessages] = useState([]);
const addMessage = (text) => {
setMessages((prev) => [
...prev,
{ id: Date.now(), content: text },
]);
// Content will automatically smooth-scroll to show new message
};
return (
<Content itemsLength={messages.length}>
{messages.map((msg) => (
<UserMessage key={msg.id} message={msg.content} />
))}
</Content>
);
}
<Content
itemsLength={messages.length}
loading={false}
className="custom-content"
>
{messages.map((msg) => (
<Message key={msg.id} {...msg} />
))}
</Content>
Content Props
number
required
The current number of items (messages) in the content. Used to determine when to trigger auto-scroll behavior.
ReactNode
The content to render, typically message components.
string
Additional CSS class name for custom styling.
boolean
default:"false"
When true, displays a Spinner instead of the children content.