add copy button for online log & add color for ChatChain Visualizaer

online_log/static/chain_visualizer.html

@@ -17,15 +17,28 @@
             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 {
@@ -78,7 +91,6 @@
             const phase = document.createElement('span');
             phase.innerHTML = `<strong>PhaseName: </strong>${element.phase || 'No PhaseName'}`;
 
-
             const phaseType = document.createElement('p');
             phaseType.innerHTML = `<strong>PhaseType: </strong>${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);
                 }
             });

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;
+  top: 3px;
-  right: 2px;
+  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; 
 }

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 = $("<button></button>")
+    .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);
 });
 
+