klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added indication in the desktop UI for back-end connectivity (#711)

Browse Source 
* Changed the styling of the link that takes a user to the settings page into a button
* added an indicator that shows if a user is connected to the server or not
* made a class name more descriptive and also made the text in first run message more intuitive
* changed the command to install dependencies in the README.md
* changed the class name of the first run message text to be more descriptive
* added icons in the desktop UI that shows if a file is synced successfully or not
* made the link class name in the homepage more descriptive
* fixed the hover issue on status box in the chat header pane
* fixed hovering issue on status box on macOS
This commit is contained in:
Olatoyan George
2024-04-23 12:13:48 +01:00
committed by GitHub
parent 419b044ac5
commit ad59180fb8
8 changed files with 140 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/interface/desktop/README.md
View File

@@ -1,17 +1,25 @@
# Run it locally
## Prerequisites
Install the runtime dependencies. This command should install all dev dependencies.
```bash
yarn add
yarn install
```
Run the application
```bash
yarn start
```
# Deploying the Electron App
## Prerequisites
Install the ToDesktop CLI. Full documentation can be found here: https://www.npmjs.com/package/@todesktop/cli
```bash
yarn global add @todesktop/cli
```

9
src/interface/desktop/assets/icons/file-not-synced.svg Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0">
<rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#ffad9f" strokewidth="0"/>
</g>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

9
src/interface/desktop/assets/icons/file-synced.svg Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#16ba00">
<g id="SVGRepo_bgCarrier" stroke-width="0">
<rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#7aff00" strokewidth="0"/>
</g>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

30
src/interface/desktop/assets/khoj.css
View File

@@ -89,8 +89,38 @@ nav.khoj-nav {
grid-auto-flow: column;
grid-gap: 32px;
justify-self: right;
align-items: center;
}
.khoj-status-box {
display: flex;
align-items: center;
justify-content: center;
min-width: 52px;
gap: 4px;
-webkit-app-region: no-drag;
}
.khoj-status-box .khoj-status-connected {
height: 12px;
width: 12px;
border-radius: 50%;
background-color: rgb(90, 235, 90);
}
.khoj-status-box .khoj-status-not-connected {
height: 12px;
width: 12px;
border-radius: 50%;
background-color: rgb(235, 90, 90);
}
.khoj-status-box .khoj-status-text {
display: none;
}
.khoj-status-box:hover .khoj-status-text {
display: block;
}
a.khoj-nav {
display: flex;
align-items: center;

55
src/interface/desktop/chat.html
View File

@@ -888,10 +888,10 @@
}
function renderFirstRunSetupMessage() {
first_run_message = `Hi 👋🏾, to get started:
first_run_message = `<p class="first-run-message-heading">Hi 👋🏾, to get started:<p>
<ol>
<li>Generate an API token in the <a class='inline-chat-link' href="#" onclick="window.navigateAPI.navigateToWebSettings()">Khoj Web settings</a></li>
<li>Paste it into the API Key field in the <a class='inline-chat-link' href="#" onclick="window.navigateAPI.navigateToSettings()">Khoj Desktop settings</a></li>
<li class="first-run-message-text">Generate an API token <a class='first-run-message-link' href="#" onclick="window.navigateAPI.navigateToWebSettings()">Khoj Web settings</a></li>
<li class="first-run-message-text">Paste it into the API Key field <a class='first-run-message-link' href="#" onclick="window.navigateAPI.navigateToSettings()">Khoj Desktop settings</a></li>
</ol>`
.trim()
.replace(/(\r\n|\n|\r)/gm, "");
@@ -1715,10 +1715,53 @@
box-shadow: 0 0 16px var(--primary);
}
.first-run-message-heading {
font-size: 20px;
font-weight: 300;
line-height: 1.5em;
color: var(--main-text-color);
margin: 0;
padding: 10px;
}
.first-run-message-text {
font-size: 18px;
font-weight: 300;
line-height: 1.5em;
color: var(--main-text-color);
margin: 0;
padding-bottom: 25px;
}
a.inline-chat-link {
color: #475569;
text-decoration: none;
border-bottom: 1px dotted #475569;
display: block;
text-align: center;
font-size: 14px;
color: #fff;
padding: 6px 15px;
border-radius: 999px;
text-decoration: none;
background-color: rgba(71, 85, 105, 0.6);
transition: background-color 0.3s ease-in-out;
}
a.inline-chat-link:hover {
background-color: #475569;
}
a.first-run-message-link {
display: block;
text-align: center;
font-size: 14px;
color: #fff;
padding: 6px 15px;
border-radius: 999px;
text-decoration: none;
background-color: rgba(71, 85, 105, 0.6);
transition: background-color 0.3s ease-in-out;
}
a.first-run-message-link:hover {
background-color: #475569;
}
a.reference-link {

8
src/interface/desktop/config.html
View File

@@ -316,6 +316,14 @@
div.remove-button-container {
text-align: right;
display: flex;
margin-left: auto;
gap: 8px;
}
.file-synced-image{
width: 20px;
display: none;
}
button.remove-folder-button,

15
src/interface/desktop/renderer.js
View File

@@ -69,12 +69,15 @@ function makeFileElement(file) {
let buttonContainer = document.createElement("div");
buttonContainer.classList.add("remove-button-container");
let removeFileButton = document.createElement("button");
let fileSyncedImage = document.createElement("img")
fileSyncedImage.classList.add("file-synced-image");
removeFileButton.classList.add("remove-file-button");
removeFileButton.innerHTML = "🗑️";
removeFileButton.addEventListener("click", () => {
removeFile(file.path);
});
buttonContainer.appendChild(removeFileButton);
buttonContainer.insertAdjacentElement("afterbegin",fileSyncedImage);
fileElement.appendChild(buttonContainer);
return fileElement;
}
@@ -150,6 +153,7 @@ async function handleFileOpen(type) {
}
window.updateStateAPI.onUpdateState((event, state) => {
const fileSyncedImage = document.querySelectorAll(".file-synced-image");
console.log("state was updated", state);
loadingBar.style.display = 'none';
let syncStatusElement = document.getElementById("sync-status");
@@ -157,8 +161,19 @@ window.updateStateAPI.onUpdateState((event, state) => {
nextSyncTime = new Date();
nextSyncTime.setMinutes(Math.ceil((nextSyncTime.getMinutes() + 1) / 10) * 10);
if (state.completed == false) {
fileSyncedImage.forEach((image)=> {
image.style.display = "block"
image.src = "./assets/icons/file-not-synced.svg"
})
if (state.error) syncStatusElement.innerHTML = state.error;
return;
} else {
fileSyncedImage.forEach((image)=> {
image.style.display = "block"
image.src = "./assets/icons/file-synced.svg"
})
}
const options = { hour: '2-digit', minute: '2-digit' };
syncStatusElement.innerHTML = `⏱️ Synced at ${currentTime.toLocaleTimeString(undefined, options)}. Next sync at ${nextSyncTime.toLocaleTimeString(undefined, options)}.`;

11
src/interface/desktop/utils.js
View File

@@ -59,6 +59,17 @@ async function populateHeaderPane() {
<img class="khoj-logo" src="./assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
</a>
<nav class="khoj-nav">
${
userInfo && userInfo.email
? `<div class="khoj-status-box">
<span class="khoj-status-connected"></span>
<span class="khoj-status-text">Connected to server</span>
</div>`
: `<div class="khoj-status-box">
<span class="khoj-status-not-connected"></span>
<span class="khoj-status-text">Not connected to server</span>
</div>`
}
<a id="chat-nav" class="khoj-nav" href="./chat.html">
<img class="nav-icon" src="./assets/icons/chat.svg" alt="Chat">
<span class="khoj-nav-item-text">Chat</span>