feat: 更新信息窗口加入交互

assets/custom.css

@@ -46,10 +46,11 @@ footer {
 #toast-update {
     position: absolute;
     display: flex;
-    top: -20px;
+    top: -500px;
     width: 100%;
     justify-content: center;
     z-index: var(--layer-top);
+    transition: top 0.5s ease-in-out;
 }
 #check-chuanhu-update {
     position: absolute;
@@ -68,7 +69,7 @@ footer {
     overflow: hidden;
     pointer-events: auto;
 }
-.version-info-title {
+#version-info-title {
     font-size: 1.2em;
     font-weight: bold;
     text-align: start;
@@ -82,6 +83,9 @@ footer {
     overflow: auto;
     padding: 0 8px;
 }
+#release-note-wrap.hideK {
+    display: none;
+}
 .btn-update-group {
     display: flex;
     justify-content: space-between;
@@ -90,6 +94,9 @@ footer {
     width: 100%;
     padding-top: 10px;
 }
+.btn-update-group.hideK {
+    display: none;
+}
 /* user_info */
 #user_info {
     white-space: nowrap;

assets/custom.js

@@ -18,10 +18,12 @@ var apSwitch = null;
 var messageBotDivs = null;
 var loginUserForm = null;
 var logginUser = null;
+var updateToast = null;
 
 var userLogged = false;
 var usernameGotten = false;
 var historyLoaded = false;
+var updateInfoGotten = false;
 
 var ga = document.getElementsByTagName("gradio-app");
 var targetNode = ga[0];
@@ -61,6 +63,7 @@ function gradioLoaded(mutations) {
             chatbot = document.querySelector('#chuanhu_chatbot');
             chatbotWrap = document.querySelector('#chuanhu_chatbot > .wrap');
             apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
+            updateToast = document.querySelector("#toast-update");
 
             if (loginUserForm) {
                 localStorage.setItem("userLogged", true);
@@ -85,10 +88,14 @@ function gradioLoaded(mutations) {
             if (chatbotWrap) {
                 if (!historyLoaded) {
                     loadHistoryHtml();
-                    updateLatestVersion();
                 }
                 setChatbotScroll();
             }
+            if (updateToast) {
+                if (!updateInfoGotten) {
+                    updateLatestVersion();
+                }
+            }
         }
     }
 }
@@ -498,23 +505,71 @@ function clearHistoryHtml() {
 }
 
 async function getLatestRelease() {
-    const response = await fetch('https://api.github.com/repos/gaizhenbiao/chuanhuchatgpt/releases/latest');
-    const data = await response.json();
-    return data;
+    try {
+        const response = await fetch('https://api.github.com/repos/gaizhenbiao/chuanhuchatgpt/releases/latest');
+        if (!response.ok) {
+            console.log(`Error: ${response.status} - ${response.statusText}`);
+            updateInfoGotten = true;
+            return null;
+          }
+        const data = await response.json();
+        updateInfoGotten = true;
+        return data;
+    } catch (error) {
+        console.log(`Error: ${error}`);
+        updateInfoGotten = true;
+        return null;
+    }
 }
 async function updateLatestVersion() {
+    const currentVersionElement = document.getElementById('current-version');
     const latestVersionElement = document.getElementById('latest-version-title');
     const releaseNoteElement = document.getElementById('release-note-content');
+    const currentVersion = currentVersionElement.textContent;
+    // const currentVersion = '20230619'; // for debugging
+    updateInfoGotten = true; //无论成功与否都只执行一次，否则容易api超限...
     try {
         const data = await getLatestRelease();
-        const latestVersion = data.tag_name;
-        latestVersionElement.textContent = latestVersion;
         const releaseNote = data.body;
-        releaseNoteElement.innerHTML = marked.parse(releaseNote);
+        if (releaseNote) {
+            releaseNoteElement.innerHTML = marked.parse(releaseNote);
+        }
+        const latestVersion = data.tag_name;
+        if (latestVersion) {
+            latestVersionElement.textContent = latestVersion;
+            if (currentVersion !== latestVersion) {
+                if (!isInIframe) {openUpdateToast();}      
+            } else {
+                noUpdate();
+            }
+        }
     } catch (error) {
         console.error(error);
     }
 }
+function getUpdate() {
+    window.open('https://github.com/gaizhenbiao/chuanhuchatgpt/releases/latest', '_blank');
+    closeUpdateToast();
+}
+function cancelUpdate() {
+    closeUpdateToast();
+}
+function openUpdateToast() {
+    updateToast.style.setProperty('top', '-20px');
+}
+function closeUpdateToast() {
+    updateToast.style.setProperty('top', '-500px');
+}
+function noUpdate() {
+    const versionInfoElement = document.getElementById('version-info-title');
+    const releaseNoteWrap = document.getElementById('release-note-wrap');
+    const gotoUpdateBtn = document.getElementById('goto-update-btn');
+    const closeUpdateBtn = document.getElementById('close-update-btn');
+    versionInfoElement.textContent = 'You are using the latest version!';
+    releaseNoteWrap.style.setProperty('display', 'none');
+    gotoUpdateBtn.classList.add('hideK');
+    closeUpdateBtn.classList.remove('hideK');
+}
 
 // 监视页面内部 DOM 变动
 var observer = new MutationObserver(function (mutations) {

assets/html/update.html

@@ -1,20 +1,24 @@
 <div id="toast-update">
     <div id="check-chuanhu-update">
-        <!-- <p style="font-size: 1em;">
-            当前版本: <span id="currentVersion">{current_version}</span>
-        </p> -->
-        <p class="version-info-title">
+        <p style="display:none">
+            <span id="current-version">{current_version}</span>
+        </p>
+        <p id="version-info-title">
             Latest Version: <a href="https://github.com/gaizhenbiao/chuanhuchatgpt/releases/latest" target="_blank"
                 id="latest-version-title" style="text-decoration: none;">getting latest version...</a>
         </p>
         <div id="release-note-wrap">
             <div class="release-note-content" id="release-note-content">
-                Release Note...
+                Getting Release Note...
             </div>
         </div>
-        <div class="btn-update-group">
+        <div id="goto-update-btn" class="btn-update-group">
             <button class="btn-update lg secondary svelte-1ipelgc" id="cancel-button" onclick="cancelUpdate()">Cancel</button>
             <button class="btn-update lg primary svelte-1ipelgc" id="update-button" onclick="getUpdate()">Update</button>
         </div>
+        <div id="close-update-btn" class="btn-update-group hideK">
+            <button class="btn-update lg secondary svelte-1ipelgc" id="update-button" onclick="getUpdate()">What's new</button>
+            <button class="btn-update lg primary svelte-1ipelgc" id="cancel-button" onclick="cancelUpdate()">OK</button>
+        </div>
     </div>
 </div>