Export chats feature

We developed exporting feature. \nby clicking export button a popup will appear, contains 2 exporting options (JSON, txt) files

ZChatGPT/assets/javascript/app.js

@@ -21,7 +21,7 @@ const donateClose = document.querySelector('#donateClose');
 
 
 const recentVesrion = window.localStorage.recentVesrion || (window.localStorage.recentVesrion = '');
-const currentVersion = '1.3.0';
+const currentVersion = '1.3.1';
 
 
 const today = (new Date).toLocaleDateString();
@@ -39,6 +39,12 @@ const settings = window.localStorage.settings ? JSON.parse(window.localStorage.s
     "mode": "light",
 }));
 
+const exportPop = document.querySelector("#exportPop");
+const exportOpen = document.querySelector("#exportBtn");
+const exportClose = document.querySelector('#exportClose');
+const jsonFormateExport = document.querySelector('#jsonFormateExport');
+const txtFormateExport = document.querySelector('#txtFormateExport');
+
 
 
 const welcomeMsgs = ["I am here to assit you.", "Welcome human, Finally I met one🥳.", "Please donate me by clicking 'support us' button.💖", 
@@ -144,22 +150,35 @@ async function newUpadate(){
     chatSettings.addEventListener('click', toggleChatBar);
 
     donateOpen.addEventListener('click', ()=>{
-        showPopUp(donationPop)
+        showPopUp(donationPop);
     });
     donateClose.addEventListener('click', ()=>{
-        hidePopUp(donationPop)
+        hidePopUp(donationPop);
     });
 
     settingsOpen.addEventListener('click', ()=>{
-        showPopUp(settingsPop)
+        showPopUp(settingsPop);
     });
     settingsClose.addEventListener('click', ()=>{
-        hidePopUp(settingsPop)
+        hidePopUp(settingsPop);
     });
     modeCheckBox.addEventListener('click', ()=>{
-        saveSettings()
+        saveSettings();
     })
 
+    exportOpen.addEventListener('click', ()=>{
+        showPopUp(exportPop);
+    });
+    exportClose.addEventListener('click', ()=>{
+        hidePopUp(exportPop);
+    });
+    jsonFormateExport.addEventListener('click', ()=>{
+        msgsJSONgenerateDownload();
+    });
+    txtFormateExport.addEventListener('click', ()=>{
+        msgsTXTgenerateDownload();
+    });
+
     rangeInputs.forEach((ele)=>{
         ele.addEventListener('input', ()=>{
             valueChange(ele);
@@ -200,7 +219,7 @@ const userMsgDom = function(msg){
 
     let msgBoxChild = document.createElement('div');
     msgBoxChild.textContent = msg;
-    msgBoxChild.classList.add('you',"msg");
+    msgBoxChild.classList.add('user',"msg");
     msgItem.appendChild(msgBoxChild);
 }
 
@@ -281,6 +300,73 @@ const saveSettings = composer(checkModeChange, setMode)
 
 
 
+const collectMsgs = ()=>{
+    let allMsgs = [...document.querySelectorAll(".msg")]
+    return allMsgs
+}
+
+const startJSON = (msgs)=>{
+    let jsonObject = {
+        chat: [],
+        version: 1
+    }
+    return {msgs, jsonObject}
+}
+const startTxt = (msgs)=>{
+    let txtObject = [];
+    return {msgs, txtObject}
+}
+
+const jsonFormate = (obj)=>{
+    obj.msgs.forEach((ele)=>{
+        obj.jsonObject.chat.push({
+            type: ele.classList[0].toUpperCase(),
+            msg: ele.textContent
+        })        
+    })
+    return obj.jsonObject
+}
+const txtFormate = (obj)=>{
+    obj.msgs.forEach((ele)=>{
+        obj.txtObject.push(`${ele.classList[0].toUpperCase().padEnd(4)}${":".padEnd(3)} ${ele.textContent}\n`);
+    })
+    return obj.txtObject
+}
+
+const makeJSONfile = (jsonF)=>{
+    let blob = new Blob([JSON.stringify(jsonF)], {type: "json"});
+    return blob
+}
+const makeTXTfile = (txtF)=>{
+    let blob = new Blob(txtF, {type: "txt"});
+    return blob
+}
+
+const downloadMsgsFile = (file)=>{
+    let url = URL.createObjectURL(file);
+    let currentTime = (new Date).getTime();
+
+    let downloadEle = document.createElement('a');
+    downloadEle.href = url;
+    downloadEle.download = `chatExport${currentTime}.${file.type}`;
+
+    document.body.appendChild(downloadEle);
+    downloadEle.click();
+
+    return {url, downloadEle}
+}
+const clearAfterDownlod = (objToDel)=>{
+    URL.revokeObjectURL(objToDel.url);
+    objToDel.downloadEle.remove();
+}
+const msgsJSONgenerateDownload = composer(collectMsgs, startJSON, jsonFormate, makeJSONfile, downloadMsgsFile, clearAfterDownlod)
+const msgsTXTgenerateDownload = composer(collectMsgs, startTxt, txtFormate, makeTXTfile, downloadMsgsFile, clearAfterDownlod)
+
+
+
+
+
+
 const pushTmsgCont = composer(gptMsgTaker, gptMsgDom);
 function apiFetcher(APIurl, key, mthd, msg, fun){
     async function fetchAPI(apiURL){

ZChatGPT/assets/javascript/update.json

@@ -1,12 +1,13 @@
 {
-    "title": "A new update is HERE❗",
-    "version": "<span class='is-size-6'>1st Jun</span> <span class='is-size-5'>Version</span> 1.3.0",
+    "title": "🎊Congrats, Your ZChatGPT is now UpToDate!🥳",
+    "version": "<span class='is-size-6'>1st Jun</span> <span class='is-size-5'>Version</span> 1.3.1",
     "note": "Every Month There Is A Major Update",
     "newNote": "See What Is New:👇",
     "features": [
-        "Settings popup. click settings the above button to see it!",
-        "Now you can use ZChatGPT in Dark mode. by enabling it from settigns Popup"
+        "Settings popup. click settings the above button to see it!⚙️",
+        "Dark mode. Enable it from settigns Popup🌚",
+        "Export your chats using the Download button📥"
     ],
     "contact": "For problems and sugessions contact us on <span class='has-text-success'>[email protected]</span>",
-    "buttonMsg": "I'll Use Dark mode Now"
+    "buttonMsg": "Light Mode is Bad, Welcome Export"
 }

ZChatGPT/assets/style/main.css

@@ -76,13 +76,13 @@ body,html{
     font-size: 14px;
     white-space: pre-wrap;
 }
-.msg.you {
+.msg.user {
     background-color: var(--gLightbg);
     position: relative;
     margin-right: 10px;
     direction: ltr;
 }
-.msg.you::after {
+.msg.user::after {
     position: absolute;
     content: "";
     top: 0;
@@ -385,6 +385,19 @@ input:checked + .slider:before {
     border-radius: 50%;
 }
 
+.flex-half{
+    padding: 5px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.boxHalf{
+    background-color: var(--graybg);
+    padding: 10px 5px;
+    border-radius: 5px;
+    border: 2px solid var(--gLightbg);
+    cursor: pointer;
+    color: var(--gLightbg);
+}
 
 
 
@@ -450,7 +463,7 @@ input:checked + .slider:before {
     transform: translate(-50%, -50%) rotate(0deg);
 }
 .update{
-    background: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.35);
     border-radius: 16px;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(15px);
@@ -466,7 +479,7 @@ input:checked + .slider:before {
     transition: 0.5s;
 }
 .update.chrome{
-    background: rgba(255, 255, 255, 0.75);
+    background: rgba(255, 255, 255, 0.45);
 }
 .update a{
     text-decoration: underline !important;
@@ -628,7 +641,9 @@ body.dark .has-text-danger-dark {
 body.dark .controler textarea::placeholder, body.dark .controler textarea{
     color: var(--gray50) !important;
 }
-
+body.dark .boxHalf{
+    background-color: var(--darkBg);
+}
 
 
 

ZChatGPT/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "ZChatGPT",
     "description": "A simple extension to allow browser users to use ChatGPT in any tab without the need to open ChatGPT or having an account.",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "icons":{
         "16": "/assets/logo/icon16.png",
         "48": "/assets/logo/icon48.png",

ZChatGPT/popup.html

@@ -22,6 +22,7 @@
         <div class="innerContainer is-flex is-justify-content-space-between is-align-items-center">
             <div class="button is-primary is-small donate" id="donateBtn">Support us <i class="fa-solid fa-circle-dollar-to-slot donate"></i></div>
             <div class="is-flex">
+                <div class="btn" id="exportBtn" role="button"><i class="fa-solid fa-download has-text-primary is-size-4"></i></div>
                 <div class="btn" id="settingsBtn" role="button"><i class="fa-solid fa-gears has-text-primary is-size-4"></i></div>
             </div>
         </div>
@@ -139,6 +140,30 @@ <h1 class="heada">How your donation will help?</h1>
         </div>
     </div>
 
+    <div class="full-shadowBg trans" id="exportPop">
+        <div class="is-relative popup">
+            <div class="popupbar">
+                <i class="fa-solid fa-xmark xmark" id="exportClose"></i>
+                <p class="title is-5 has-text-centered has-text-grey is-marginless">Choose Export Method</p>
+                <div class="is-flex is-justify-content-space-between is-align-items-center">
+                    <div class="is-flex-grow-1 flex-half" role="button">
+                        <div class="has-text-centered boxHalf" id="jsonFormateExport">
+                            <i class="fa-regular fa-file-code is-size-3"></i>
+                            <p class="is-size-5 has-text-weight-semibold">JSON</p>
+                        </div>
+                    </div>
+                    <div class="is-flex-grow-1 flex-half" role="button">
+                        <div class="has-text-centered boxHalf" id="txtFormateExport">
+                            <i class="fa-regular fa-file-lines is-size-3"></i>
+                            <p class="is-size-5 has-text-weight-semibold">Text</p>
+                        </div>
+                    </div>
+                </div>
+                <p class="is-size-65 has-text-centered has-text-grey">Exporting in JSON will allow you import it here in future</p>
+            </div>
+        </div>
+    </div>
+
     <div class="doNoti succ has-text-centered">
         <p>Please donate to help us pay for OpenAI costs.😊</p>
         <div class="border"></div>