Artifact Card – Code

import { ArtifactCard } from "@servicetitan/anvil2-ext-atlas";

function ArtifactTrigger() {
  return (
    <ArtifactCard
      title="Insights for Invoice #10492"
      description="Single-visit industrial install, closed under quote with a 40% margin."
      artifactId="insight-1"
      onClick={() => openPanel("insight-1")}
    />
  );
}

import { ArtifactCard } from "@servicetitan/anvil2-ext-atlas";

function ActiveTrigger({ openId, onOpen }) {
  return (
    <ArtifactCard
      title="Customer note draft"
      description="Plain-language summary of the variance."
      artifactId="insight-2"
      active={openId === "insight-2"}
      onClick={() => onOpen("insight-2")}
    />
  );
}

import { useState } from "react";
import { ArtifactCard, ArtifactPanel } from "@servicetitan/anvil2-ext-atlas";

function ChatWithArtifact() {
  const [activeId, setActiveId] = useState<string | null>(null);
  return (
    <>
      <ArtifactCard
        title="Insights for Invoice #10492"
        description="Single-visit industrial install."
        artifactId="insight-1"
        active={activeId === "insight-1"}
        onClick={() => setActiveId("insight-1")}
      />
      <ArtifactPanel
        isOpen={activeId !== null}
        onOpenChange={(open) => {
          if (!open) setActiveId(null);
        }}
        title="Insight details"
        triggerKey={activeId ?? undefined}
      >
        {/* artifact content */}
      </ArtifactPanel>
    </>
  );
}