123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- let currentFileName = null; // Store the current file name
- let trajectoryDirectory = ""; // Global variable to store the directory
- let timeoutIds = []; // Store timeout IDs for pending operations
- function getBaseUrl() {
- const protocol = window.location.protocol;
- const host = window.location.hostname;
- const port = window.location.port;
- // Use the default port if the port number is empty (for standard HTTP/HTTPS)
- const defaultPort =
- protocol === "http:" && !port
- ? "80"
- : protocol === "https:" && !port
- ? "443"
- : port;
- return `${protocol}//${host}:${defaultPort}`;
- }
- function fetchFiles() {
- const baseUrl = getBaseUrl();
- fetch(`${baseUrl}/files`)
- .then((response) => response.json())
- .then((files) => {
- const fileList = document.getElementById("fileList");
- fileList.innerHTML = "";
- files.forEach((file) => {
- const fileElement = document.createElement("li");
- fileElement.textContent = file;
- fileElement.onclick = () => viewFile(file.split(" ")[0]);
- fileList.appendChild(fileElement);
- });
- });
- }
- // translate item.role to what we show the user
- const roleMap = {
- user: "Environment",
- assistant: "SWE-Agent",
- subroutine: "SWE-Agent subroutine",
- default: "Default",
- system: "System",
- demo: "Demonstration",
- };
- function getRoleText(role) {
- return roleMap[role] || role;
- }
- function viewFile(fileName) {
- // Clear any pending message loading from previous files
- timeoutIds.forEach((timeoutId) => clearTimeout(timeoutId));
- timeoutIds = []; // Reset the list of timeout IDs
- const baseUrl = getBaseUrl();
- fetch(`${baseUrl}/trajectory/${fileName}`)
- .then((response) => {
- if (!response.ok) {
- throw new Error("Network response was not ok");
- }
- return response.json();
- })
- .then((content) => {
- const container = document.getElementById("fileContent");
- container.innerHTML = ""; // Clear existing content
- if (content.history && Array.isArray(content.history)) {
- let delay = 200; // Initial delay
- const delayIncrement = 50; // Delay between each message, in milliseconds
- content.history.forEach((item, index) => {
- const timeoutId = setTimeout(() => {
- const contentText = item.content
- ? item.content.replace(/</g, "<").replace(/>/g, ">")
- : "";
- let roleClass =
- item.agent && item.agent !== "primary"
- ? "subroutine"
- : item.role
- ? item.role.toLowerCase().replaceAll(" ", "-")
- : "default";
- const elementId = "historyItem" + index;
- const historyItem = document.createElement("div");
- historyItem.className = `history-item ${roleClass} fade-in`;
- historyItem.id = elementId;
- if (contentText.includes("--- DEMONSTRATION ---")) {
- item.role = "demo";
- } else if ("is_demo" in item && item.is_demo === true) {
- item.role += "[demo]";
- }
- historyItem.innerHTML = `
- <div class="role-bar ${roleClass}">
- <strong>
- <span>${getRoleText(item.role)}</span>
- </strong>
- </div>
- <div class="content-container">
- <pre>${contentText}</pre>
- </div>
- <div class="shadow"></div>
- `;
- container.appendChild(historyItem);
- }, delay);
- delay += delayIncrement; // Increment delay for the next message
- timeoutIds.push(timeoutId); // Store the timeout ID
- });
- } else {
- container.textContent = "No history content found.";
- }
- })
- .catch((error) => {
- console.error("Error fetching file:", error);
- document.getElementById("fileContent").textContent =
- "Error loading content. " + error;
- });
- // Highlight the selected file in the list
- document.querySelectorAll("#fileList li").forEach((li) => {
- li.classList.remove("selected");
- if (li.textContent.split(" ")[0] === fileName) {
- li.classList.add("selected");
- }
- });
- }
- function refreshCurrentFile() {
- if (currentFileName) {
- const currentScrollPosition =
- document.documentElement.scrollTop || document.body.scrollTop;
- viewFile(currentFileName.split(" ")[0]); // Reload the current file
- // Restore the scroll position after the content is loaded
- setTimeout(() => {
- window.scrollTo(0, currentScrollPosition);
- }, 100);
- }
- }
- function fetchDirectoryInfo() {
- const baseUrl = getBaseUrl();
- fetch(`${baseUrl}/directory_info`)
- .then((response) => response.json())
- .then((data) => {
- if (data.directory) {
- trajectoryDirectory = data.directory; // Store the directory
- document.title = `Trajectory Viewer: ${data.directory}`;
- document.querySelector("h1").textContent =
- `Trajectory Viewer: ${data.directory}`;
- }
- })
- .catch((error) => console.error("Error fetching directory info:", error));
- }
- window.onload = function () {
- fetchFiles();
- fetchDirectoryInfo();
- };
|