refactor: 简化附加btn的CSS写法

assets/custom.css

@@ -251,53 +251,34 @@ ol:not(.options), ul:not(.options) {
     display: none;
 }
 
-.copy-bot-btn {
+
+.chuanhu-btn {
     border-radius: 5px;
     /* background-color: #E6E6E6 !important; */
     color: rgba(120, 120, 120, 0.64) !important;
     padding: 4px !important;
     position: absolute;
     right: -22px;
-    bottom: 0;
     cursor: pointer !important;
     transition: color .2s ease, background-color .2s ease;
 }
-.copy-bot-btn:hover {
+.chuanhu-btn:hover {
     background-color: rgba(167, 167, 167, 0.25) !important;
     color: unset !important;
 }
-.copy-bot-btn:active {
+.chuanhu-btn:active {
     background-color: rgba(167, 167, 167, 0.5) !important;
 }
-.copy-bot-btn:focus {
+.chuanhu-btn:focus {
     outline: none;
 }
-
-.toggle-btn {
-    border-radius: 5px;
-    color: rgba(120, 120, 120, 0.64) !important;
-    padding: 4px !important;
-    position: absolute;
-    right: -22px;
-    bottom: 18px;
-    cursor: pointer !important;
-    transition: color .2s ease, background-color .2s ease;
-}
-
-.toggle-btn:hover {
-    background-color: rgba(167, 167, 167, 0.25) !important;
-    color: unset !important;
-}
-
-.toggle-btn:active {
-    background-color: rgba(167, 167, 167, 0.5) !important;
+.copy-bot-btn {
+    bottom: 0;
 }
-
-.toggle-btn:focus {
-    outline: none;
+.toggle-md-btn {
+    bottom: 18px;
 }
-
-.raw-message {
+/* .raw-message {
     display: none;
     top: -18px;
     left: 0;
@@ -306,9 +287,9 @@ ol:not(.options), ul:not(.options) {
     padding: 8px;
     border-radius: 5px;
     box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
-  }
+  } */
 
-.raw-message:before {
+/* .raw-message:before {
 content: "Source Text";
 display: block;
 font-size: 12px;
@@ -317,7 +298,7 @@ left: 8px;
 padding: 2px 5px;
 border-radius: 3px;
 opacity: 0.8;
-}
+} */
 
 .message-wrap>div img{
     border-radius: 10px !important;

assets/custom.js

@@ -276,13 +276,13 @@ const copyIcon   = '<span><svg stroke="currentColor" fill="none" stroke-width="2
 const copiedIcon = '<span><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>';
 const toggleIcon = '<span><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><circle cx="8" cy="12" r="2"></circle><circle cx="16" cy="12" r="2"></circle></svg></span>';
 
-function addCopyBotButton(botElement) {
+function addChuanhuButton(botElement) {
     var copyButton = null;
     var toggleButton = null;
     var rawMessage = null;
     rawMessage = botElement.querySelector('.raw-message');
     copyButton = botElement.querySelector('button.copy-bot-btn');
-    toggleButton = botElement.querySelector('button.toggle-btn');
+    toggleButton = botElement.querySelector('button.toggle-md-btn');
     if (!rawMessage) return;
     if (copyButton) {
         copyButton.remove();
@@ -292,6 +292,7 @@ function addCopyBotButton(botElement) {
     }
     rawMessage.style.display = "none";
     var copyButton = document.createElement('button');
+    copyButton.classList.add('chuanhu-btn');
     copyButton.classList.add('copy-bot-btn');
     copyButton.setAttribute('aria-label', 'Copy');
     copyButton.innerHTML = copyIcon;
@@ -311,7 +312,8 @@ function addCopyBotButton(botElement) {
 
     // Toggle button
     var toggleButton = document.createElement('button');
-    toggleButton.classList.add('toggle-btn');
+    toggleButton.classList.add('chuanhu-btn');
+    toggleButton.classList.add('toggle-md-btn');
     toggleButton.setAttribute('aria-label', 'Toggle');
     toggleButton.innerHTML = toggleIcon;
     toggleButton.addEventListener('click', () => {
@@ -408,7 +410,7 @@ var mObserver = new MutationObserver(function (mutationsList) {
                         renderMathJax();
                         mathjaxUpdated = false;
                     }
-                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addCopyBotButton);
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
                     saveHistoryHtml();
                 }, 500);
             }
@@ -438,7 +440,7 @@ function loadHistoryHtml() {
     if (!historyLoaded) {
         var tempDiv = document.createElement('div');
         tempDiv.innerHTML = historyHtml;
-        var buttons = tempDiv.querySelectorAll('button.copy-bot-btn');
+        var buttons = tempDiv.querySelectorAll('button.chuanhu-btn');
         for (var i = 0; i < buttons.length; i++) {
             buttons[i].parentNode.removeChild(buttons[i]);
         }