Add export / import conversations

g4f/gui/client/css/style.css

@@ -15,7 +15,7 @@
     margin: auto;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: var(--inner-gap);
     max-width: 200px;
     padding: var(--section-gap);
     overflow: none;
@@ -183,7 +183,8 @@ body {
 .conversations {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: var(--inner-gap);
+    padding: var(--inner-gap);
 }
 
 .conversations .title {
@@ -573,7 +574,7 @@ label[for="camera"] {
     height: fit-content;
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: var(--inner-gap);
 }
 
 .field .about {
@@ -657,10 +658,15 @@ select {
     font-size: 14px;
 }
 
+.bottom_buttons button a {
+    color: var(--colour-3);
+    font-weight: 500;
+}
+
 .conversations .top {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: var(--inner-gap);
     overflow: auto;
 }
 

g4f/gui/client/html/index.html

@@ -94,11 +94,10 @@
                     <i class="fa-regular fa-trash"></i>
                     <span>Clear Conversations</span>
                 </button>
-                <div class="info">
-                    <i class="fa-brands fa-telegram"></i>
-                    <span class="convo-title">tele ~ <a href="https://t.me/g4f_official">@g4f_official</a>
-                    </span>
-                </div>
+                <button onclick="save_storage()">
+                    <i class="fa-solid fa-download"></i>
+                    <a href="" onclick="return false;">Export Conversations</a>
+                </button>
                 <div class="info">
                     <i class="fa-brands fa-github"></i>
                     <span class="convo-title">github ~ <a href="https://github.com/xtekky/gpt4free">@gpt4free</a>
@@ -161,7 +160,7 @@
                         <option value="gemini-pro">gemini-pro</option>
                         <option value="">----</option>
                     </select>
-                    <select name="model2" id="model2" class="hidden">
+                    <select name="model2" id="model2" class="hidden"></select>
                 </div>
                 <div class="field">
                     <select name="jailbreak" id="jailbreak" style="display: none;">

g4f/gui/client/js/chat.v1.js

@@ -913,8 +913,21 @@ fileInput.addEventListener('change', async (event) => {
         }
         fileInput.dataset.type = type
         const reader = new FileReader();
-        reader.addEventListener('load', (event) => {
+        reader.addEventListener('load', async (event) => {
             fileInput.dataset.text = event.target.result;
+            if (type == "json") {
+                const data = JSON.parse(event.target.result);
+                if ("g4f" in data.options) {
+                    Object.keys(data).forEach(key => {
+                        if (key != "options" && !localStorage.getItem(key)) {
+                            appStorage.setItem(key, JSON.stringify(data[key]));
+                        } 
+                    });
+                    fileInput.value = "";
+                    delete fileInput.dataset.text;
+                    await load_conversations();
+                }
+            }
         });
         reader.readAsText(fileInput.files[0]);
     } else {
@@ -953,4 +966,31 @@ async function load_provider_models() {
         modelSelect.classList.remove("hidden");
     }
 };
-providerSelect.addEventListener("change", load_provider_models)
+providerSelect.addEventListener("change", load_provider_models)
+
+function save_storage() {
+    let filename = new Date().toLocaleString()
+    filename += ".json"
+    let data = {"options": {"g4f": ""}};
+    for (let i = 0; i < appStorage.length; i++){
+        let key = appStorage.key(i);
+        let item = appStorage.getItem(key);
+        if (key.startsWith("conversation:")) {
+            data[key] = JSON.parse(item);
+        } else {
+            data["options"][key] = item;
+        }
+    }
+    data = JSON.stringify(data, null, 4);
+    const blob = new Blob([data], {type: 'text/csv'});
+    if(window.navigator.msSaveOrOpenBlob) {
+        window.navigator.msSaveBlob(blob, filename);
+    } else{
+        const elem = window.document.createElement('a');
+        elem.href = window.URL.createObjectURL(blob);
+        elem.download = filename;        
+        document.body.appendChild(elem);
+        elem.click();        
+        document.body.removeChild(elem);
+    }
+}