Sync to Google Drive (ztjhz#233)

* google drive api

* fix: google-api

* GoogleCloudStorage

* list files api

* Google Cloud Storage

* move button to side menu

* sync status

* rename file

* show popup for those with cloud sync

* update button style

* auto close modal after logged in

* auto popup every 59min

* set as unauthenticated if update fails

* i18n

* add spin animation

* feat: Toast

* clear toast

* electron: desktop google drive integration

This update includes integration with Google Drive for desktop access,
but requires a new URL, which may cause existing chat data to be lost.
To minimize disruption, users can export their current chat data and
import it into the newer version.

* update note

* error handling

* support multiple drive files

* feat: delete drive file

* i18n

* change style

.env.example

@@ -2,4 +2,5 @@
 VITE_CUSTOM_API_ENDPOINT=
 VITE_DEFAULT_API_ENDPOINT=
 VITE_OPENAI_API_KEY=
-VITE_DEFAULT_SYSTEM_MESSAGE=     # Remove this line if you want to use the default system message of Better ChatGPT
+VITE_DEFAULT_SYSTEM_MESSAGE=     # Remove this line if you want to use the default system message of Better ChatGPT
+VITE_GOOGLE_CLIENT_ID=           # for syncing data with google drive

electron/index.cjs

@@ -6,6 +6,8 @@ const { autoUpdater } = require('electron-updater');
 
 if (require('electron-squirrel-startup')) app.quit();
 
+const PORT = isDev ? '5173' : '51735';
+
 function createWindow() {
   let iconPath = '';
   if (isDev) {
@@ -30,11 +32,9 @@ function createWindow() {
   win.maximize();
   win.show();
 
-  win.loadURL(
-    isDev
-      ? 'http://localhost:5173'
-      : `file://${path.join(__dirname, '../dist/index.html')}`
-  );
+  isDev || createServer();
+
+  win.loadURL(`http://localhost:${PORT}`);
 
   if (isDev) {
     win.webContents.openDevTools({ mode: 'detach' });
@@ -81,3 +81,67 @@ app.on('activate', () => {
     createWindow();
   }
 });
+
+const createServer = () => {
+  // Dependencies
+  const http = require('http');
+  const fs = require('fs');
+  const path = require('path');
+
+  // MIME types for different file extensions
+  const mimeTypes = {
+    '.html': 'text/html',
+    '.css': 'text/css',
+    '.js': 'text/javascript',
+    '.wasm': 'application/wasm',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.json': 'application/json',
+  };
+
+  // Create a http server
+  const server = http.createServer((request, response) => {
+    // Get the file path from the URL
+    let filePath =
+      request.url === '/' ? '../dist/index.html' : `../dist/${request.url}`;
+
+    // Get the file extension from the filePath
+    let extname = path.extname(filePath);
+
+    // Set the default MIME type to text/plain
+    let contentType = 'text/plain';
+
+    // Check if the file extension is in the MIME types object
+    if (extname in mimeTypes) {
+      contentType = mimeTypes[extname];
+    }
+
+    // Read the file from the disk
+    fs.readFile(filePath, (error, content) => {
+      if (error) {
+        // If file read error occurs
+        if (error.code === 'ENOENT') {
+          // File not found error
+          response.writeHead(404);
+          response.end('File Not Found');
+        } else {
+          // Server error
+          response.writeHead(500);
+          response.end(`Server Error: ${error.code}`);
+        }
+      } else {
+        // File read successful
+        response.writeHead(200, { 'Content-Type': contentType });
+        response.end(content, 'utf-8');
+      }
+    });
+  });
+
+  // Listen for request on port ${PORT}
+  server.listen(PORT, () => {
+    console.log(`Server listening on http://localhost:${PORT}/`);
+  });
+};

package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@dqbd/tiktoken": "^1.0.2",
+    "@react-oauth/google": "^0.9.0",
     "electron-is-dev": "^2.0.0",
     "electron-squirrel-startup": "^1.0.0",
     "electron-updater": "^5.3.0",

public/locales/da/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/en-US/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/en/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/es/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/fr/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/it/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/ja/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/ms/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/nb/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/sv/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/zh-CN/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/zh-HK/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

public/locales/zh-TW/drive.json

@@ -0,0 +1,16 @@
+{
+  "name": "Google Sync",
+  "tagline": "Effortlessly synchronize your chats and settings with Google Drive.",
+  "button": {
+    "sync": "Sync your chats",
+    "stop": "Stop syncing",
+    "create": "Create new file",
+    "confirm": "Confirm selection"
+  },
+  "notice": "Note: You will need to re-login on every visit or every hour. To avoid your cloud data being overwritten, do not use BetterChatGPT on more than one device at the same time.",
+  "privacy": "Your privacy is important to us, and to ensure it, Better ChatGPT only has non-sensitive access, meaning it can only create, view, and manage its own files and folders.",
+  "toast": {
+    "sync": "Sync successful!",
+    "stop": "Syncing stopped"
+  }
+}

src/App.tsx

@@ -9,6 +9,7 @@ import useInitialiseNewChat from '@hooks/useInitialiseNewChat';
 import { ChatInterface } from '@type/chat';
 import { Theme } from '@type/theme';
 import ApiPopup from '@components/ApiPopup';
+import Toast from '@components/Toast';
 
 function App() {
   const initialiseNewChat = useInitialiseNewChat();
@@ -78,6 +79,7 @@ function App() {
       <Menu />
       <Chat />
       <ApiPopup />
+      <Toast />
     </div>
   );
 }