Fix Linux Desktop Application (#491)

* Use separate functions for adding files and folders to configuration for indexing
* Add a loading bar while data is syncing
* Bump the minor version for the application

src/interface/desktop/config.html

@@ -48,6 +48,12 @@
                 <div class="card-description-row">
                     <div id="current-files"></div>
                 </div>
+                <div class="card-action-row">
+                    <button id="update-file" class="card-button">
+                        Add
+                        <img class="add-files-icon" src="./assets/icons/circular-add.svg" alt="Add">
+                    </button>
+                </div>
                 <div class="card-title-row">
                     <img class="card-icon" src="./assets/icons/folder.svg" alt="Folder">
                     <h3 class="card-title">
@@ -61,7 +67,7 @@
                     <div id="current-folders"></div>
                 </div>
                 <div class="card-action-row">
-                    <button id="update-data" class="card-button">
+                    <button id="update-folder" class="card-button">
                         Add
                         <img class="add-files-icon" src="./assets/icons/circular-add.svg" alt="Add">
                     </button>
@@ -73,6 +79,8 @@
                     <input id="sync-force" type="checkbox" name="sync-force" value="force">
                     <label for="sync-force">Force Sync</label>
                 </div>
+                <div id="loading-bar" style="display: none;">
+                </div>
                 <div class="card-description-row">
                     <div id="sync-status"></div>
                 </div>
@@ -131,6 +139,34 @@
             text-align: center;
         }
 
+        #loading-bar {
+            height: 10px;
+            width: 100%;
+            background-color: #ddd;
+            position: relative;
+            overflow: hidden;
+        }
+
+        #loading-bar:before {
+            content: "";
+            display: block;
+            position: absolute;
+            left: -200px;
+            width: 200px;
+            height: 100%;
+            background-color: #2980b9;
+            animation: loading-bar 2s linear infinite;
+        }
+
+        @keyframes loading-bar {
+            0% {
+                left: -200px;
+            }
+            100% {
+                left: 100%;
+            }
+        }
+
         #khoj-host-url {
             padding: 4px;
             box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);

src/interface/desktop/main.js

@@ -193,8 +193,13 @@ function pushDataToKhoj (regenerate = false) {
 
 pushDataToKhoj();
 
-async function handleFileOpen (event, key) {
+async function handleFileOpen (type) {
-    const { canceled, filePaths } = await dialog.showOpenDialog({properties: ['openFile', 'openDirectory'], filters: [{ name: "Valid Khoj Files", extensions: validFileTypes}] });
+    let { canceled, filePaths } = {canceled: true, filePaths: []};
+    if (type === 'file') {
+        ({ canceled, filePaths } = await dialog.showOpenDialog({properties: ['openFile' ], filters: [{ name: "Valid Khoj Files", extensions: validFileTypes}] }));
+    } else if (type === 'folder') {
+        ({ canceled, filePaths } = await dialog.showOpenDialog({properties: ['openDirectory' ]}));
+    }
     if (!canceled) {
         const files = store.get('files') || [];
         const folders = store.get('folders') || [];
@@ -310,7 +315,9 @@ const createWindow = () => {
 app.whenReady().then(() => {
     ipcMain.on('set-title', handleSetTitle);
 
-    ipcMain.handle('getStoreValue', handleFileOpen);
+    ipcMain.handle('handleFileOpen', (event, type) => {
+        return handleFileOpen(type);
+    });
 
     ipcMain.on('update-state', (event, arg) => {
         console.log(arg);

src/interface/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "Khoj",
   "homepage": ".",
   "productName": "Khoj",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Scaffolding for the desktop entrypoint to Khoj",
   "main": "main.js",
   "repository": "\"https://github.com/khoj-ai/khoj\"",
@@ -10,7 +10,7 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
-    "electron": "26.1.0"
+    "electron": "25.0.0"
   },
   "scripts": {
     "start": "yarn electron ."

src/interface/desktop/preload.js

@@ -16,7 +16,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
 })
 
 contextBridge.exposeInMainWorld('storeValueAPI', {
-    getStoreValue: (key) => ipcRenderer.invoke('getStoreValue', key)
+    handleFileOpen: (key) => ipcRenderer.invoke('handleFileOpen', key)
 })
 
 contextBridge.exposeInMainWorld('getFilesAPI', {

src/interface/desktop/renderer.js

@@ -1,5 +1,7 @@
-const getButton = document.getElementById('update-data')
+const setFolderButton = document.getElementById('update-folder');
+const setFileButton = document.getElementById('update-file');
 const showKey = document.getElementById('show-key');
+const loadingBar = document.getElementById('loading-bar');
 
 async function removeFile(filePath) {
     const updatedFiles = await window.removeFileAPI.removeFile(filePath);
@@ -115,9 +117,16 @@ function makeFolderElement(folder) {
     }
 })();
 
-getButton.addEventListener('click', async () => {
+setFolderButton.addEventListener('click', async () => {
-    const key = 'foo';
+    await handleFileOpen('folder');
-    const value = await window.storeValueAPI.getStoreValue(key);
+});
+
+setFileButton.addEventListener('click', async () => {
+    await handleFileOpen('file');
+});
+
+async function handleFileOpen(type) {
+    const value = await window.storeValueAPI.handleFileOpen(type);
     console.log(value);
     let currentFilesElement = document.getElementById("current-files");
     let currentFoldersElement = document.getElementById("current-folders");
@@ -137,10 +146,11 @@ getButton.addEventListener('click', async () => {
             currentFoldersElement.appendChild(folderElement);
         });
     }
-});
+}
 
 window.updateStateAPI.onUpdateState((event, state) => {
     console.log("state was updated", state);
+    loadingBar.style.display = 'none';
     let syncStatusElement = document.getElementById("sync-status");
     const currentTime = new Date();
     if (state.completed == false) {
@@ -174,6 +184,7 @@ urlInput.addEventListener('blur', async () => {
 const syncButton = document.getElementById('sync-data');
 const syncForceToggle = document.getElementById('sync-force');
 syncButton.addEventListener('click', async () => {
+    loadingBar.style.display = 'block';
     const regenerate = syncForceToggle.checked;
     await window.syncDataAPI.syncData(regenerate);
 });

src/interface/desktop/yarn.lock

@@ -379,10 +379,10 @@ electron-updater@^4.6.1:
     lodash.isequal "^4.5.0"
     semver "^7.3.5"
 
-electron@^26.1.0:
+electron@25.0.0:
-  version "26.1.0"
+  version "25.0.0"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-26.1.0.tgz#d26fefba5a5c68069b07a117d87aee1c4e5d172d"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-25.0.0.tgz#3c7cb7e74a271ebc183acaeefc4dd09f2eb079e5"
-  integrity sha512-qEh19H09Pysn3ibms5nZ0haIh5pFoOd7/5Ww7gzmAwDQOulRi8Sa2naeueOyIb1GKpf+6L4ix3iceYRAuA5r5Q==
+  integrity sha512-8Bjlpw52XW447RKjYGaaizWI4x0dv4gATNn7ssuonySbDgeJNqUnIJQGBrpXyB3VUROVmhXnTWB9VWRzv6uVlA==
   dependencies:
     "@electron/get" "^2.0.0"
     "@types/node" "^18.11.18"