Upload 4 files

assets/custom.css

@@ -1,6 +1,12 @@
 :root {
-    --chatbot-color-light: #F3F3F3;
-    --chatbot-color-dark: #121111;
+    --chatbot-color-light: #000000;
+    --chatbot-color-dark: #FFFFFF;
+    --chatbot-background-color-light: #F3F3F3;
+    --chatbot-background-color-dark: #121111;
+    --message-user-background-color-light: #95EC69;
+    --message-user-background-color-dark: #26B561;
+    --message-bot-background-color-light: #FFFFFF;
+    --message-bot-background-color-dark: #2C2C2C;
 }
 
 #app_title {
@@ -13,13 +19,15 @@
 }
 #description {
     text-align: center;
-    margin:16px 0
+    margin: 32px 0 4px 0;
 }
 
-/* 覆盖gradio的页脚信息QAQ */
-/* footer {
-    display: none !important;
-} */
+/* gradio的页脚信息 */
+footer {
+    /* display: none !important; */
+    margin-top: .2em !important;
+    font-size: 85%;
+}
 #footer {
     text-align: center;
 }
@@ -28,7 +36,7 @@
 }
 #footer .versions{
     font-size: 85%;
-    opacity: 0.85;
+    opacity: 0.60;
 }
 
 #float_display {
@@ -70,7 +78,8 @@
 }
 #status_display p {
     font-size: .85em;
-    font-family: monospace;
+    font-family: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", "Microsoft Yahei UI", "Microsoft Yahei", monospace;
+    /* Windows下中文的monospace会fallback为新宋体，实在太丑，这里折中使用微软雅黑 */
     color: var(--body-text-color-subdued);
 }
 
@@ -102,7 +111,7 @@
 }
 .progress-bar {
     background-color: var(--input-background-fill);;
-    margin: 0 1em;
+    margin: .5em 0 !important;
     height: 20px;
     border-radius: 10px;
     overflow: hidden;
@@ -135,7 +144,7 @@
     display: none !important;
 }
 .apSlider {
-    background-color: var(--block-label-background-fill);
+    background-color: var(--neutral-200);
     bottom: 0;
     cursor: pointer;
     left: 0;
@@ -154,13 +163,47 @@
     content: "🌞";
 }
 input:checked + .apSlider {
-    background-color: var(--block-label-background-fill);
+    background-color: var(--primary-600);
 }
 input:checked + .apSlider::before {
     transform: translateX(23px);
     content:"🌚";
 }
 
+/* Override Slider Styles (for webkit browsers like Safari and Chrome)
+ * 好希望这份提案能早日实现 https://github.com/w3c/csswg-drafts/issues/4410
+ * 进度滑块在各个平台还是太不统一了
+ */
+input[type="range"] {
+    -webkit-appearance: none;
+    height: 4px;
+    background: var(--input-background-fill);
+    border-radius: 5px;
+    background-image: linear-gradient(var(--primary-500),var(--primary-500));
+    background-size: 0% 100%;
+    background-repeat: no-repeat;
+}
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    border: solid 0.5px #ddd;
+    background-color: white;
+    cursor: ew-resize;
+    box-shadow: var(--input-shadow);
+    transition: background-color .1s ease;
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+    background: var(--neutral-50);
+}
+input[type=range]::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    box-shadow: none;
+    border: none;
+    background: transparent;
+}
+
 #submit_btn, #cancel_btn {
     height: 42px !important;
 }
@@ -179,25 +222,25 @@ ol:not(.options), ul:not(.options) {
 
 /* 亮色（默认） */
 #chuanhu_chatbot {
-    background-color: var(--chatbot-color-light) !important;
-    color: #000000 !important;
+    background-color: var(--chatbot-background-color-light) !important;
+    color: var(--chatbot-color-light) !important;
 }
 [data-testid = "bot"] {
-    background-color: #FFFFFF !important;
+    background-color: var(--message-bot-background-color-light) !important;
 }
 [data-testid = "user"] {
-    background-color: #95EC69 !important;
+    background-color: var(--message-user-background-color-light) !important;
 }
 /* 暗色 */
 .dark #chuanhu_chatbot {
-    background-color: var(--chatbot-color-dark) !important;
-    color: #FFFFFF !important;
+    background-color: var(--chatbot-background-color-dark) !important;
+    color: var(--chatbot-color-dark) !important;
 }
 .dark [data-testid = "bot"] {
-    background-color: #2C2C2C !important;
+    background-color: var(--message-bot-background-color-dark) !important;
 }
 .dark [data-testid = "user"] {
-    background-color: #26B561 !important;
+    background-color: var(--message-user-background-color-dark) !important;
 }
 
 /* 屏幕宽度大于等于500px的设备 */
@@ -219,14 +262,17 @@ ol:not(.options), ul:not(.options) {
         max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
     }
     [data-testid = "bot"] {
-        max-width: 98% !important;
+        max-width: 95% !important;
     }
     #app_title h1{
         letter-spacing: -1px; font-size: 22px;
     }
 }
+#chuanhu_chatbot .wrap {
+    overflow-x: hidden;
+}
 /* 对话气泡 */
-[class *= "message"] {
+.message {
     border-radius: var(--radius-xl) !important;
     border: none;
     padding: var(--spacing-xl) !important;
@@ -244,6 +290,104 @@ ol:not(.options), ul:not(.options) {
     width: auto !important;
     border-bottom-right-radius: 0 !important;
 }
+
+.message p {
+    margin-top: 0.6em !important;
+    margin-bottom: 0.6em !important;
+}
+.message p:first-child { margin-top: 0 !important; }
+.message p:last-of-type { margin-bottom: 0 !important; }
+
+.message .md-message {
+    display: block;
+    padding: 0 !important;
+}
+.message .raw-message {
+    display: block;
+    padding: 0 !important;
+    white-space: pre-wrap;
+}
+.raw-message.hideM, .md-message.hideM {
+    display: none;
+}
+
+/* custom buttons */
+.chuanhu-btn {
+    border-radius: 5px;
+    /* background-color: #E6E6E6 !important; */
+    color: rgba(120, 120, 120, 0.64) !important;
+    padding: 4px !important;
+    position: absolute;
+    right: -22px;
+    cursor: pointer !important;
+    transition: color .2s ease, background-color .2s ease;
+}
+.chuanhu-btn:hover {
+    background-color: rgba(167, 167, 167, 0.25) !important;
+    color: unset !important;
+}
+.chuanhu-btn:active {
+    background-color: rgba(167, 167, 167, 0.5) !important;
+}
+.chuanhu-btn:focus {
+    outline: none;
+}
+.copy-bot-btn {
+    /* top: 18px; */
+    bottom: 0;
+}
+.toggle-md-btn {
+    /* top: 0; */
+    bottom: 20px;
+}
+.copy-code-btn {
+    position: relative;
+    float: right;
+    font-size: 1em;
+    cursor: pointer;
+}
+
+.message-wrap>div img{
+    border-radius: 10px !important;
+}
+
+/* history message */
+.wrap>.history-message {
+    padding: 10px !important;
+}
+.history-message {
+    /* padding: 0 !important; */
+    opacity: 80%;
+    display: flex;
+    flex-direction: column;
+}
+.history-message>.history-message {
+    padding: 0 !important;
+}
+.history-message>.message-wrap {
+    padding: 0 !important;
+    margin-bottom: 16px;
+}
+.history-message>.message {
+    margin-bottom: 16px;
+}
+.wrap>.history-message::after {
+    content: "";
+    display: block;
+    height: 2px;
+    background-color: var(--body-text-color-subdued);
+    margin-bottom: 10px;
+    margin-top: -10px;
+    clear: both;
+}
+.wrap>.history-message>:last-child::after {
+    content: "仅供查看";
+    display: block;
+    text-align: center;
+    color: var(--body-text-color-subdued);
+    font-size: 0.8em;
+}
+
 /* 表格 */
 table {
     margin: 1em 0;
@@ -277,10 +421,13 @@ pre code {
     background-color: hsla(0, 0%, 0%, 80%)!important;
     border-radius: 10px;
     padding: 1.4em 1.2em 0em 1.4em;
-    margin: 1.2em 2em 1.2em 0.5em;
+    margin: 0.6em 2em 1em 0.2em;
     color: #FFF;
     box-shadow: 6px 6px 16px hsla(0, 0%, 0%, 0.2);
 }
+.message pre {
+    padding: 0 !important;
+}
 /* 代码高亮样式 */
 .highlight .hll { background-color: #49483e }
 .highlight .c { color: #75715e } /* Comment */

assets/custom.js

@@ -13,22 +13,51 @@ var user_input_tb = null;
 var userInfoDiv = null;
 var appTitleDiv = null;
 var chatbot = null;
+var chatbotWrap = null;
 var apSwitch = null;
+var empty_botton = null;
+var messageBotDivs = null;
+// var renderLatex = null;
+var loginUserForm = null;
+var logginUser = null;
+
+var userLogged = false;
+var usernameGotten = false;
+var shouldRenderLatex = false;
+var historyLoaded = false;
 
 var ga = document.getElementsByTagName("gradio-app");
 var targetNode = ga[0];
 var isInIframe = (window.self !== window.top);
+var language = navigator.language.slice(0,2);
+
+var forView_i18n = {
+    'zh': "仅供查看",
+    'en': "For viewing only",
+    'ja': "閲覧専用",
+    'fr': "Pour consultation seulement",
+    'es': "Solo para visualización",
+};
 
 // gradio 页面加载好了么??? 我能动你的元素了么??
 function gradioLoaded(mutations) {
     for (var i = 0; i < mutations.length; i++) {
-        if (mutations[i].addedNodes.length) {  
+        if (mutations[i].addedNodes.length) {
+            loginUserForm = document.querySelector(".gradio-container > .main > .wrap > .panel > .form")
             gradioContainer = document.querySelector(".gradio-container");
             user_input_tb = document.getElementById('user_input_tb');
             userInfoDiv = document.getElementById("user_info");
             appTitleDiv = document.getElementById("app_title");
             chatbot = document.querySelector('#chuanhu_chatbot');
+            chatbotWrap = document.querySelector('#chuanhu_chatbot > .wrap');
             apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
+            // renderLatex = document.querySelector("#render_latex_checkbox > label > input");
+            empty_botton = document.getElementById("empty_btn")
+
+            if (loginUserForm) {
+                localStorage.setItem("userLogged", true);
+                userLogged = true;
+            }
 
             if (gradioContainer && apSwitch) {  // gradioCainter 加载出来了没?
                 adjustDarkMode();
@@ -37,15 +66,42 @@ function gradioLoaded(mutations) {
                 selectHistory();
             }
             if (userInfoDiv && appTitleDiv) {  // userInfoDiv 和 appTitleDiv 加载出来了没?
+                if (!usernameGotten) {
+                    getUserInfo();
+                }
                 setTimeout(showOrHideUserInfo(), 2000);
             }
             if (chatbot) {  // chatbot 加载出来了没?
-                setChatbotHeight()
+                setChatbotHeight();
+            }
+            if (chatbotWrap) {
+                if (!historyLoaded) {
+                    loadHistoryHtml();
+                }
+                setChatbotScroll();
+            }
+            // if (renderLatex) {  // renderLatex 加载出来了没?
+            //     shouldRenderLatex = renderLatex.checked;
+            //     updateMathJax();
+            // }
+            if (empty_botton) {
+                emptyHistory();
             }
         }
     }
 }
 
+function webLocale() {
+    console.log("webLocale", language);
+    if (forView_i18n.hasOwnProperty(language)) {
+        var forView = forView_i18n[language];
+        var forViewStyle = document.createElement('style');
+        forViewStyle.innerHTML = '.wrap>.history-message>:last-child::after { content: "' + forView + '"!important; }';
+        document.head.appendChild(forViewStyle);
+        // console.log("added forViewStyle", forView);
+    }
+}
+
 function selectHistory() {
     user_input_ta = user_input_tb.querySelector("textarea");
     if (user_input_ta) {
@@ -94,6 +150,34 @@ function selectHistory() {
     }
 }
 
+var username = null;
+function getUserInfo() {
+    if (usernameGotten) {
+        return;
+    }
+    userLogged = localStorage.getItem('userLogged');
+    if (userLogged) {
+        username = userInfoDiv.innerText;
+        if (username) {
+            if (username.includes("getting user info…")) {
+                setTimeout(getUserInfo, 500);
+                return;
+            } else if (username === " ") {
+                localStorage.removeItem("username");
+                localStorage.removeItem("userLogged")
+                userLogged = false;
+                usernameGotten = true;
+                return;
+            } else {
+                username = username.match(/User:\s*(.*)/)[1] || username;
+                localStorage.setItem("username", username);
+                usernameGotten = true;
+                clearHistoryHtml();
+            }
+        }
+    }
+}
+
 function toggleUserInfoVisibility(shouldHide) {
     if (userInfoDiv) {
         if (shouldHide) {
@@ -140,12 +224,12 @@ function showOrHideUserInfo() {
     appTitleDiv.ontouchend = function () {
         setTimeout(function () {
             toggleUserInfoVisibility(true);
-        }, 3000); 
+        }, 3000);
     };
     userInfoDiv.ontouchend = function () {
         setTimeout(function () {
             toggleUserInfoVisibility(true);
-        }, 3000); 
+        }, 3000);
     };
     sendBtn.ontouchend = function () {
         setTimeout(function () {
@@ -208,6 +292,297 @@ function setChatbotHeight() {
         }
     }
 }
+function setChatbotScroll() {
+    var scrollHeight = chatbotWrap.scrollHeight;
+    chatbotWrap.scrollTo(0,scrollHeight)
+}
+var rangeInputs = null;
+var numberInputs = null;
+function setSlider() {
+    rangeInputs = document.querySelectorAll('input[type="range"]');
+    numberInputs = document.querySelectorAll('input[type="number"]')
+    setSliderRange();
+    rangeInputs.forEach(rangeInput => {
+        rangeInput.addEventListener('input', setSliderRange);
+    });
+    numberInputs.forEach(numberInput => {
+        numberInput.addEventListener('input', setSliderRange);
+    })
+}
+function setSliderRange() {
+    var range = document.querySelectorAll('input[type="range"]');
+    range.forEach(range => {
+        range.style.backgroundSize = (range.value - range.min) / (range.max - range.min) * 100 + '% 100%';
+    });
+}
+
+function addChuanhuButton(botElement) {
+    var rawMessage = null;
+    var mdMessage = null;
+    rawMessage = botElement.querySelector('.raw-message');
+    mdMessage = botElement.querySelector('.md-message');
+    if (!rawMessage) {
+        var buttons = botElement.querySelectorAll('button.chuanhu-btn');
+        for (var i = 0; i < buttons.length; i++) {
+            buttons[i].parentNode.removeChild(buttons[i]);
+        }
+        return;
+    }
+    var copyButton = null;
+    var toggleButton = null;
+    copyButton = botElement.querySelector('button.copy-bot-btn');
+    toggleButton = botElement.querySelector('button.toggle-md-btn');
+    if (copyButton) copyButton.remove();
+    if (toggleButton) toggleButton.remove();
+
+    // Copy bot button
+    var copyButton = document.createElement('button');
+    copyButton.classList.add('chuanhu-btn');
+    copyButton.classList.add('copy-bot-btn');
+    copyButton.setAttribute('aria-label', 'Copy');
+    copyButton.innerHTML = copyIcon;
+    copyButton.addEventListener('click', () => {
+        const textToCopy = rawMessage.innerText;
+        navigator.clipboard
+            .writeText(textToCopy)
+            .then(() => {
+                copyButton.innerHTML = copiedIcon;
+                setTimeout(() => {
+                    copyButton.innerHTML = copyIcon;
+                }, 1500);
+            })
+            .catch(() => {
+                console.error("copy failed");
+            });
+    });
+    botElement.appendChild(copyButton);
+
+    // Toggle button
+    var toggleButton = document.createElement('button');
+    toggleButton.classList.add('chuanhu-btn');
+    toggleButton.classList.add('toggle-md-btn');
+    toggleButton.setAttribute('aria-label', 'Toggle');
+    var renderMarkdown = mdMessage.classList.contains('hideM');
+    toggleButton.innerHTML = renderMarkdown ? mdIcon : rawIcon;
+    toggleButton.addEventListener('click', () => {
+        renderMarkdown = mdMessage.classList.contains('hideM');
+        if (renderMarkdown){
+            renderMarkdownText(botElement);
+            toggleButton.innerHTML=rawIcon;
+        } else {
+            removeMarkdownText(botElement);
+            toggleButton.innerHTML=mdIcon;
+        }
+    });
+    botElement.insertBefore(toggleButton, copyButton);
+}
+
+function addCopyCodeButton(pre) {
+    var code = null;
+    var firstChild = null;
+    code = pre.querySelector('code');
+    if (!code) return;
+    firstChild = code.querySelector('div');
+    if (!firstChild) return;
+    var oldCopyButton = null;
+    oldCopyButton = code.querySelector('button.copy-code-btn');
+    // if (oldCopyButton) oldCopyButton.remove();
+    if (oldCopyButton) return; // 没太有用，新生成的对话中始终会被pre覆盖，导致按钮消失，这段代码不启用……
+    var codeButton = document.createElement('button');
+    codeButton.classList.add('copy-code-btn');
+    codeButton.textContent = '\uD83D\uDCCE';
+
+    code.insertBefore(codeButton, firstChild);
+    codeButton.addEventListener('click', function () {
+        var range = document.createRange();
+        range.selectNodeContents(code);
+        range.setStartBefore(firstChild);
+        navigator.clipboard
+            .writeText(range.toString())
+            .then(() => {
+                codeButton.textContent = '\u2714';
+                setTimeout(function () {
+                    codeButton.textContent = '\uD83D\uDCCE';
+                }, 2000);
+            })
+            .catch(e => {
+                console.error(e);
+                codeButton.textContent = '\u2716';
+            });
+    });
+}
+
+function renderMarkdownText(message) {
+    var mdDiv = message.querySelector('.md-message');
+    if (mdDiv) mdDiv.classList.remove('hideM');
+    var rawDiv = message.querySelector('.raw-message');
+    if (rawDiv) rawDiv.classList.add('hideM');
+}
+function removeMarkdownText(message) {
+    var rawDiv = message.querySelector('.raw-message');
+    if (rawDiv) rawDiv.classList.remove('hideM');
+    var mdDiv = message.querySelector('.md-message');
+    if (mdDiv) mdDiv.classList.add('hideM');
+}
+
+var rendertime = 0; // for debugging
+var mathjaxUpdated = false;
+
+function renderMathJax() {
+    messageBotDivs = document.querySelectorAll('.message.bot .md-message');
+    for (var i = 0; i < messageBotDivs.length; i++) {
+        var mathJaxSpan = messageBotDivs[i].querySelector('.MathJax_Preview');
+        if (!mathJaxSpan && shouldRenderLatex && !mathjaxUpdated) {
+            MathJax.Hub.Queue(["Typeset", MathJax.Hub, messageBotDivs[i]]);
+            rendertime +=1; // for debugging
+            // console.log("renderingMathJax", i)
+        }
+    }
+    mathjaxUpdated = true;
+    // console.log("MathJax Rendered")
+}
+
+function removeMathjax() {
+    // var jax = MathJax.Hub.getAllJax();
+    // for (var i = 0; i < jax.length; i++) {
+    //     // MathJax.typesetClear(jax[i]);
+    //     jax[i].Text(newmath)
+    //     jax[i].Reprocess()
+    // }
+    // 我真的不会了啊啊啊，mathjax并没有提供转换为原先文本的办法。
+    mathjaxUpdated = true;
+    // console.log("MathJax removed!");
+}
+
+function updateMathJax() {
+    // renderLatex.addEventListener("change", function() {
+    //     shouldRenderLatex = renderLatex.checked;
+    //     if (!mathjaxUpdated) {
+    //         if (shouldRenderLatex) {
+    //             renderMathJax();
+    //         } else {
+    //             console.log("MathJax Disabled")
+    //             removeMathjax();
+    //         }
+    //     } else {
+    //         if (!shouldRenderLatex) {
+    //             mathjaxUpdated = false; // reset
+    //         }
+    //     }
+    // });
+    if (shouldRenderLatex && !mathjaxUpdated) {
+        renderMathJax();
+    }
+    mathjaxUpdated = false;
+}
+
+let timeoutId;
+let isThrottled = false;
+var mmutation
+// 监听所有元素中 bot message 的变化，用来查找需要渲染的mathjax, 并为 bot 消息添加复制按钮。
+var mObserver = new MutationObserver(function (mutationsList) {
+    for (mmutation of mutationsList) {
+        if (mmutation.type === 'childList') {
+            for (var node of mmutation.addedNodes) {
+                if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
+                    if (shouldRenderLatex) {
+                        renderMathJax();
+                        mathjaxUpdated = false;
+                    }
+                    saveHistoryHtml();
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton);
+                }
+                if (node.tagName === 'INPUT' && node.getAttribute('type') === 'range') {
+                    setSlider();
+                }
+            }
+            for (var node of mmutation.removedNodes) {
+                if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
+                    if (shouldRenderLatex) {
+                        renderMathJax();
+                        mathjaxUpdated = false;
+                    }
+                    saveHistoryHtml();
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton);
+                }
+            }
+        } else if (mmutation.type === 'attributes') {
+            if (mmutation.target.nodeType === 1 && mmutation.target.classList.contains('message') && mmutation.target.getAttribute('data-testid') === 'bot') {
+                document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton); // 目前写的是有点问题的，会导致加button次数过多，但是bot对话内容生成时又是不断覆盖pre的……
+                if (isThrottled) break; // 为了防止重复不断疯狂渲染，加上等待_(:з」∠)_
+                isThrottled = true;
+                clearTimeout(timeoutId);
+                timeoutId = setTimeout(() => {
+                    isThrottled = false;
+                    if (shouldRenderLatex) {
+                        renderMathJax();
+                        mathjaxUpdated = false;
+                    }
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
+                    saveHistoryHtml();
+                }, 500);
+            }
+        }
+    }
+});
+mObserver.observe(document.documentElement, { attributes: true, childList: true, subtree: true });
+
+var loadhistorytime = 0; // for debugging
+function saveHistoryHtml() {
+    var historyHtml = document.querySelector('#chuanhu_chatbot > .wrap');
+    localStorage.setItem('chatHistory', historyHtml.innerHTML);
+    // console.log("History Saved")
+    historyLoaded = false;
+}
+function loadHistoryHtml() {
+    var historyHtml = localStorage.getItem('chatHistory');
+    if (!historyHtml) {
+        historyLoaded = true;
+        return; // no history, do nothing
+    }
+    userLogged = localStorage.getItem('userLogged');
+    if (userLogged){
+        historyLoaded = true;
+        return; // logged in, do nothing
+    }
+    if (!historyLoaded) {
+        var tempDiv = document.createElement('div');
+        tempDiv.innerHTML = historyHtml;
+        var buttons = tempDiv.querySelectorAll('button.chuanhu-btn');
+        for (var i = 0; i < buttons.length; i++) {
+            buttons[i].parentNode.removeChild(buttons[i]);
+        }
+        var fakeHistory = document.createElement('div');
+        fakeHistory.classList.add('history-message');
+        fakeHistory.innerHTML = tempDiv.innerHTML;
+        webLocale();
+        chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
+        // var fakeHistory = document.createElement('div');
+        // fakeHistory.classList.add('history-message');
+        // fakeHistory.innerHTML = historyHtml;
+        // chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
+        historyLoaded = true;
+        console.log("History Loaded");
+        loadhistorytime += 1; // for debugging
+    } else {
+        historyLoaded = false;
+    }
+}
+function clearHistoryHtml() {
+    localStorage.removeItem("chatHistory");
+    historyMessages = chatbotWrap.querySelector('.history-message');
+    if (historyMessages) {
+        chatbotWrap.removeChild(historyMessages);
+        console.log("History Cleared");
+    }
+}
+function emptyHistory() {
+    empty_botton.addEventListener("click", function () {
+        clearHistoryHtml();
+    });
+}
 
 // 监视页面内部 DOM 变动
 var observer = new MutationObserver(function (mutations) {
@@ -218,7 +593,15 @@ observer.observe(targetNode, { childList: true, subtree: true });
 // 监视页面变化
 window.addEventListener("DOMContentLoaded", function () {
     isInIframe = (window.self !== window.top);
+    historyLoaded = false;
+    shouldRenderLatex = !!document.querySelector('script[src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"]');
 });
 window.addEventListener('resize', setChatbotHeight);
 window.addEventListener('scroll', setChatbotHeight);
-window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);
+
+// button svg code
+const copyIcon   = '<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="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span>';
+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 mdIcon     = '<span><svg stroke="currentColor" fill="none" stroke-width="1" viewBox="0 0 14 18" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><g transform-origin="center" transform="scale(0.85)"><path d="M1.5,0 L12.5,0 C13.3284271,-1.52179594e-16 14,0.671572875 14,1.5 L14,16.5 C14,17.3284271 13.3284271,18 12.5,18 L1.5,18 C0.671572875,18 1.01453063e-16,17.3284271 0,16.5 L0,1.5 C-1.01453063e-16,0.671572875 0.671572875,1.52179594e-16 1.5,0 Z" stroke-width="1.8"></path><line x1="3.5" y1="3.5" x2="10.5" y2="3.5"></line><line x1="3.5" y1="6.5" x2="8" y2="6.5"></line></g><path d="M4,9 L10,9 C10.5522847,9 11,9.44771525 11,10 L11,13.5 C11,14.0522847 10.5522847,14.5 10,14.5 L4,14.5 C3.44771525,14.5 3,14.0522847 3,13.5 L3,10 C3,9.44771525 3.44771525,9 4,9 Z" stroke="none" fill="currentColor"></path></svg></span>';
+const rawIcon    = '<span><svg stroke="currentColor" fill="none" stroke-width="1.8" viewBox="0 0 18 14" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><g transform-origin="center" transform="scale(0.85)"><polyline points="4 3 0 7 4 11"></polyline><polyline points="14 3 18 7 14 11"></polyline><line x1="12" y1="0" x2="6" y2="14"></line></g></svg></span>';

assets/external-scripts.js

@@ -0,0 +1,2 @@
+
+// external javascript here