<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>