<html>
  <head>
    <title>sketch-timeline demo</title>
    <link rel="stylesheet" href="demo.css" />
    <script
      src="/dist/web-components/sketch-timeline.js"
      type="module"
    ></script>

    <script>
      const messages = [
        {
          type: "user",
          content: "a user message",
        },
        {
          type: "agent",
          content: "an agent message",
        },
        {
          type: "agent",
          content: "an agent message",
        },
        {
          type: "agent",
          content: "an agent message",
        },
        {
          type: "user",
          content: "a user message",
        },
        {
          type: "user",
          content: "a user message",
        },
      ];
      document.addEventListener("DOMContentLoaded", () => {
        const timelineEl = document.querySelector("sketch-timeline");
        timelineEl.messages = messages;
      });
    </script>
  </head>
  <body>
    <h1>sketch-timeline demo</h1>

    <sketch-timeline></sketch-timeline>
  </body>
</html>