<html>
  <head>
    <title>sketch-timeline-message demo</title>
    <link rel="stylesheet" href="demo.css" />
    <script type="module" src="../sketch-timeline-message.ts"
    ></script>

    <script>
      const messages = [
        {
          type: "agent",
          content: "an agent message",
        },
        {
          type: "user",
          content: "a user message",
        },
        {
          type: "tool",
          content: "a tool use message",
        },
        {
          type: "commit",
          end_of_turn: false,
          content: "",
          commits: [
            {
              hash: "ece101c103ec231da87f4df05c1b5e6a24e13add",
              subject: "Add README.md for web components directory",
              body: "This adds documentation for the web components used in the Loop UI,\nincluding a description of each component, usage examples, and\ndevelopment guidelines.\n\nCo-Authored-By: sketch\nadd README.md for loop/webui/src/web-components",
              pushed_branch:
                "sketch/create-readmemd-for-web-components-directory",
            },
          ],
          timestamp: "2025-04-14T16:39:33.639533919Z",
          conversation_id: "",
          idx: 17,
        },
        {
          type: "agent",
          content: "an end-of-turn agent message",
          end_of_turn: true,
        },
      ];
      document.addEventListener("DOMContentLoaded", () => {
        messages.forEach((msg, idx) => {
          const jsonEl = document.createElement("pre");
          jsonEl.innerText = `.message property: ${JSON.stringify(msg)}`;
          document.body.append(jsonEl);
          const messageEl = document.createElement("sketch-timeline-message");
          messageEl.message = msg;
          document.body.appendChild(messageEl);
        });
        window.addEventListener("show-commit-diff", (evt) => {
          console.log("show-commit-diff", evt);
        });
      });
    </script>
  </head>
  <body>
    <h1>sketch-timeline-message demo</h1>
  </body>
</html>