<html>
  <head>
    <title>sketch-timeline demo</title>
    <link rel="stylesheet" href="demo.css" />
    <script type="module" src="../sketch-timeline.ts"></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",
        },
        {
          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", () => {
        const appShell = document.querySelector(".app-shell");
        const timelineEl = document.querySelector("sketch-timeline");
        timelineEl.messages = messages;
        timelineEl.scrollContainer = appShell;
        const addMessagesCheckbox = document.querySelector("#addMessages");
        addMessagesCheckbox.addEventListener("change", toggleAddMessages);

        let addingMessages = false;
        const addNewMessagesInterval = 1000;

        function addNewMessages() {
          if (!addingMessages) {
            return;
          }
          const n = new Date().getMilliseconds() % messages.length;
          const msgToDup = messages[n];
          const dup = JSON.parse(JSON.stringify(msgToDup));
          dup.idx = messages.length;
          dup.timestamp = new Date().toISOString();
          messages.push(dup);
          timelineEl.messages = messages.concat();
          timelineEl.prop;
          timelineEl.requestUpdate();
        }

        let addMessagesHandler = setInterval(
          addNewMessages,
          addNewMessagesInterval,
        );

        function toggleAddMessages() {
          addingMessages = !addingMessages;
          if (addingMessages) {
          } else {
          }
        }
      });
    </script>
    <style>
      .app-shell {
        display: block;
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        color: rgb(51, 51, 51);
        line-height: 1.4;
        min-height: 100vh;
        width: 100%;
        position: relative;
        overflow-x: hidden;
      }
      .app-header {
        flex-grow: 0;
      }
      .view-container {
        flex-grow: 2;
      }
    </style>
  </head>
  <body>
    <div class="app-shell">
      <div class="app-header">
        <h1>sketch-timeline demo</h1>
        <input
          type="checkbox"
          id="addMessages"
          title="Automatically add new messages"
        /><label for="addMessages">Automatically add new messages</label>
      </div>
      <div class="view-container">
        <div class="chat-view view-active">
          <sketch-timeline></sketch-timeline>
        </div>
      </div>
    </div>
  </body>
</html>