Skip to main content

Common Examples

Basic Usage

Display rich markdown content:
import { MarkdownMessage } from "@servicetitan/ext-atlas";

function MarkdownMessageExample() {
  return (
    <MarkdownMessage
      message="Here are some options:\n\n1. **Option A** - First choice\n2. **Option B** - Second choice"
    />
  );
}

With Toolbox Actions

Enable user feedback and actions:
import { MarkdownMessage } from "@servicetitan/ext-atlas";

function MarkdownWithToolbox() {
  return (
    <MarkdownMessage
      message="Here is a detailed response with **formatting**."
      toolboxProps={{
        onLike: () => handleLike(),
        onDislike: () => handleDislike(),
        onRetry: () => handleRetry(),
      }}
    />
  );
}

Custom Branding

Use custom icon and assistant name:
import { MarkdownMessage } from "@servicetitan/ext-atlas";
import CustomLogo from "./custom-logo.svg";

function CustomBrandedMessage() {
  return (
    <MarkdownMessage
      message="Hello from the custom assistant!"
      svgIcon={CustomLogo}
      assistant="My Assistant"
    />
  );
}
Last modified on February 12, 2026