From 93b8c9e88af8f953c6af0a6a6d0ee1ce2f31365d Mon Sep 17 00:00:00 2001 From: thinkwee Date: Tue, 12 Sep 2023 12:39:23 +0800 Subject: [PATCH] add copy button for online log & add color for ChatChain Visualizaer --- online_log/static/chain_visualizer.html | 29 ++++++++++---- online_log/static/css/style.css | 51 ++++++++++++++++--------- online_log/static/js/main.js | 34 +++++++++++++++++ online_log/static/replay/js/app.js | 2 +- 4 files changed, 91 insertions(+), 25 deletions(-) diff --git a/online_log/static/chain_visualizer.html b/online_log/static/chain_visualizer.html index ee50449d..f66ad24f 100644 --- a/online_log/static/chain_visualizer.html +++ b/online_log/static/chain_visualizer.html @@ -11,23 +11,36 @@ align-items: center; height: 100vh; } - + #visualization { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 1800px; + max-height: 1600px; margin: 20px; } - + .card { margin-right: 10px; - background-color: #f0f0f0; display: inline-block; - min-width: 350px; + min-width: 300px; /* Reduced card width */ vertical-align: top; + font-size: 14px; /* Reduced font size */ } - + + .simple-phase { + background-color: #E8ECEB; /* Light Blue for SimplePhase */ + } + + .composed-phase { + background-color: #A3B4C8; /* Light Red for ComposedPhase */ + } + + .nested-simple-phase { + background-color: #E3DCD2; /* Light Yellow for SimplePhase within ComposedPhase */ + } + .card-content { padding: 10px; } @@ -78,7 +91,6 @@ const phase = document.createElement('span'); phase.innerHTML = `PhaseName: ${element.phase || 'No PhaseName'}`; - const phaseType = document.createElement('p'); phaseType.innerHTML = `PhaseType: ${element.phaseType || 'No phaseType'}`; @@ -114,13 +126,16 @@ nestedCardWrapper.style.marginTop = '10px'; nestedCards.forEach(nestedCard => { + nestedCard.classList.add('nested-simple-phase'); // Apply the color for nested SimplePhase nestedCardWrapper.appendChild(nestedCard); }); + card.classList.add('composed-phase'); // Apply the color for ComposedPhase card.appendChild(nestedCardWrapper); visualization.appendChild(card); } else { const card = createCard(element); + card.classList.add('simple-phase'); // Apply the color for SimplePhase visualization.appendChild(card); } }); @@ -128,4 +143,4 @@ - \ No newline at end of file + diff --git a/online_log/static/css/style.css b/online_log/static/css/style.css index 9917cc78..7e9c6f9a 100644 --- a/online_log/static/css/style.css +++ b/online_log/static/css/style.css @@ -20,7 +20,7 @@ .message-text { - background-color: lightgray; + background-color: #D2D4D3; border-radius: 10px; padding: 8px; margin-left: 40px; @@ -63,18 +63,6 @@ display: block; /* Add this to ensure line numbers are displayed */ } -.copy-button { - position: absolute; - top: 1px; - right: 0px; - background-color: #7a7c7f; - color: #f8f8f2; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; -} - .code-block-header { background-color: #5b5656; color: #ffffff; @@ -107,14 +95,43 @@ th, td { .expand-button { position: absolute; - top: 2px; - right: 2px; + top: 3px; + right: 65px; border-radius: 4px; - background-color: transparent; + background-color: #95A1A1; + color: #f8f8f2; border: none; padding: 5px; cursor: pointer; font-size: 8px; + width: 50px; + height: 20px; + line-height: 10px; font-weight: bold; - color: rgb(108, 99, 99); +} + +.expand-button:hover { + background-color: #6B9297; +} + +.copy-button { + position: absolute; + top: 3px; + right: 3px; + background-color: #A9A9A7; + color: #f8f8f2; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; + width: 55px; + height: 20px; + line-height: 10px; + font-size: 8px; + font-weight: bold; + transition: background-color 0.3s ease; +} + +.copy-button:hover { + background-color: #866753; } diff --git a/online_log/static/js/main.js b/online_log/static/js/main.js index 97763f62..9db603b6 100644 --- a/online_log/static/js/main.js +++ b/online_log/static/js/main.js @@ -13,10 +13,28 @@ function append_message(role, text, avatarUrl) { message_container.append(role_element); message_container.append(avatar_element); + var parsedText = role === 'System' ? parseSystemMessage(text) : parseCodeBlocks(text, role); message_container.append(parsedText); + var copyButton = $("") + .addClass("copy-button") + .text("Copy") + .click(function () { + copyToClipboard(parsedText); // Call the copyToClipboard function + }); + + copyButton.click(function () { + copyToClipboard(parsedText); + copyButton.text("Copied"); + setTimeout(function () { + copyButton.text("Copy"); + }, 5000); + }); + + message_container.append(copyButton); // Append the copy button + $("#chat-box").append(message_container); } @@ -95,6 +113,21 @@ function parseSystemMessage(text) { return message; } +function copyToClipboard(element) { + // Create a temporary textarea element to hold the text + var tempTextArea = document.createElement("textarea"); + tempTextArea.value = element.text(); + document.body.appendChild(tempTextArea); + + // Select and copy the text from the textarea + tempTextArea.select(); + document.execCommand("copy"); + + // Remove the temporary textarea + document.body.removeChild(tempTextArea); +} + + $(document).ready(function () { get_new_messages(); @@ -103,3 +136,4 @@ $(document).ready(function () { }, 1000); }); + diff --git a/online_log/static/replay/js/app.js b/online_log/static/replay/js/app.js index cbf3a01a..9d7d060b 100644 --- a/online_log/static/replay/js/app.js +++ b/online_log/static/replay/js/app.js @@ -572,4 +572,4 @@ async function printCommand(paragraph, command) { } await Promise.all(tasks); return 1; -} +} \ No newline at end of file