Add About page for Khoj to Desktop app. Expose it via system tray

- Pass current khoj version from package.json to about page via electron IPC between backend js and frontend page - Update Khoj information in default About screen as well, in case it's exposed anywhere else
2026-03-03 21:29:08 +00:00 · 2023-11-03 20:56:27 -07:00
parent a327294ee9
commit a19cbde2d7
4 changed files with 149 additions and 5 deletions
--- a/src/interface/desktop/about.html
+++ b/src/interface/desktop/about.html
@@ -0,0 +1,88 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
+        <title>Khoj - About</title>
+
+        <link rel="icon" type="image/png" sizes="128x128" href="./assets/icons/favicon-128x128.png">
+        <link rel="manifest" href="/static/khoj_chat.webmanifest">
+        <link rel="stylesheet" href="./assets/khoj.css">
+     </head>
+    <script type="text/javascript" src="./utils.js"></script>
+    <style>
+        html, body {
+            height: 100%;
+            width: 100%;
+            padding: 0px;
+            margin: 0px;
+        }
+        body {
+            display: grid;
+            grid-template-rows: auto;
+            background: var(--background-color);
+            color: var(--main-text-color);
+            text-align: center;
+            font-family: roboto, karma, segoe ui, sans-serif;
+            font-size: small;
+            font-weight: 300;
+            line-height: 1.5em;
+        }
+        header > *,
+        body > * {
+            padding: 0px;
+            margin: 0px;
+        }
+        header > * {
+            margin-top: 20px;
+        }
+
+        img {
+            width: 100px;
+            height: 100px;
+            margin-top: 32px;
+        }
+
+        p {
+            font-size: 14px;
+        }
+        #about-page-version {
+            margin: 0;
+        }
+
+        .button {
+            display: block;
+            width: 60%;
+            padding: 10px 16px;
+            margin: 10px auto;
+            background-color: var(--primary);
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .button:hover {
+            background-color: var(--primary-hover);
+        }
+
+        footer {
+            font-size: 10px;
+            color: slategray;
+            margin-top: 10px;
+        }
+    </style>
+    <body>
+        <header>
+            <img id="logo" src="./assets/icons/favicon-128x128.png" alt="Khoj Logo">
+            <p id="about-page-title"><b>Khoj for Desktop</b>
+            <p id="about-page-version"></p>
+        </header>
+        <div class="action">
+            <button class="button" onclick="window.open('https://khoj.dev/terms-of-service', '_blank')">Terms of Service</button>
+            <button class="button" onclick="window.open('https://khoj.dev/privacy-policy', '_blank')">Privacy Policy</button>
+        </div>
+        <footer>
+            © 2023 Khoj Inc. All rights reserved.
+        </footer>
+    </body>
+</html>
--- a/src/interface/desktop/main.js
+++ b/src/interface/desktop/main.js
@@ -1,5 +1,6 @@
-const { app, BrowserWindow, ipcMain, Tray, Menu, nativeImage } = require('electron');
+const { app, BrowserWindow, ipcMain, Tray, Menu, nativeImage, shell } = require('electron');
 const todesktop = require("@todesktop/runtime");
+const khojPackage = require('./package.json');

 todesktop.init();

@@ -390,11 +391,12 @@ app.whenReady().then(() => {

    app.setAboutPanelOptions({
        applicationName: "Khoj",
-        applicationVersion: "0.0.1",
-        version: "0.0.1",
-        authors: "Khoj Team",
+        applicationVersion: khojPackage.version,
+        version: khojPackage.version,
+        authors: "Saba Imran, Debanjum Singh Solanky and contributors",
        website: "https://khoj.dev",
-        iconPath: path.join(__dirname, 'assets', 'khoj.png')
+        copyright: "GPL v3",
+        iconPath: path.join(__dirname, 'assets', 'icons', 'favicon-128x128.png')
    });

    app.on('ready', async() => {
@@ -418,6 +420,43 @@ app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
 })

+/*
+** About Page
+*/
+
+let aboutWindow;
+
+function openAboutWindow() {
+    if (aboutWindow) { aboutWindow.focus(); return; }
+
+    aboutWindow = new BrowserWindow({
+        width: 400,
+        height: 400,
+        titleBarStyle: 'hidden',
+        show: false,
+        webPreferences: {
+            preload: path.join(__dirname, 'preload.js'),
+            nodeIntegration: true,
+        },
+    });
+
+    aboutWindow.loadFile('about.html');
+
+    // Pass OS, Khoj version to About page
+    aboutWindow.webContents.on('did-finish-load', () => {
+        aboutWindow.webContents.send('appInfo', { version: khojPackage.version, platform: process.platform });
+    });
+
+    // Open links in external browser
+    aboutWindow.webContents.setWindowOpenHandler(({ url }) => {
+        shell.openExternal(url);
+        return { action: 'deny' };
+    });
+
+    aboutWindow.once('ready-to-show', () => { aboutWindow.show(); });
+    aboutWindow.on('closed', () => { aboutWindow = null; });
+}
+
 /*
 **  System Tray Icon
 */
@@ -441,6 +480,7 @@ app.whenReady().then(() => {
        { label: 'Search', type: 'normal', click: () => { openWindow('search.html') }},
        { label: 'Configure', type: 'normal', click: () => { openWindow('config.html') }},
        { type: 'separator' },
+        { label: 'About Khoj', type: 'normal', click: () => { openAboutWindow(); } },
        { label: 'Quit', type: 'normal', click: () => { app.quit() } }
    ])

--- a/src/interface/desktop/preload.js
+++ b/src/interface/desktop/preload.js
@@ -52,3 +52,7 @@ contextBridge.exposeInMainWorld('tokenAPI', {
    setToken: (token) => ipcRenderer.invoke('setToken', token),
    getToken: () => ipcRenderer.invoke('getToken')
 })
+
+contextBridge.exposeInMainWorld('appInfoAPI', {
+    getInfo: (callback) => ipcRenderer.on('appInfo', callback)
+})
--- a/src/interface/desktop/utils.js
+++ b/src/interface/desktop/utils.js
@@ -12,3 +12,15 @@ I am ✨Khoj✨, your open-source, personal AI copilot.
 See my source code at https://github.com/khoj-ai/khoj
 Read my operating manual at https://docs.khoj.dev
 `);
+
+
+window.appInfoAPI.getInfo((_, info) => {
+    let khojVersionElement = document.getElementById("about-page-version");
+    if (khojVersionElement) {
+        khojVersionElement.innerHTML = `<code>${info.version}</code>`;
+    }
+    let khojTitleElement = document.getElementById("about-page-title");
+    if (khojTitleElement) {
+        khojTitleElement.innerHTML = '<b>Khoj for ' + (info.platform === 'win32' ? 'Windows' : info.platform === 'darwin' ? 'macOS' : 'Linux') + '</b>';
+    }
+});