mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-12-19 02:57:10 +00:00
Merge pull request #994 from khoj-ai/features/update-desktop-app
Simplify the desktop app - Make the desktop app mainly a file-syncing client for users who have lots of documents that they need to share with Khoj. This is because the web app provides a fairly robust chat client which can be used by anyone on their computer. - The chat client in the desktop app had significantly drifted from our current brand / them, and didn't provide enough value add to update. Later, we will make it easier to install the existing web app as a desktop PWA.
This commit is contained in:
sabaimran
GitHub
commit
6ed051d631
34 changed files with 446 additions and 2809 deletions
BIN
documentation/assets/img/chrome_pwa_alt.png
Normal file
BIN
documentation/assets/img/chrome_pwa_alt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 500 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 298 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 333 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
BIN
documentation/assets/img/pwa_install_desktop.png
Normal file
BIN
documentation/assets/img/pwa_install_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -4,22 +4,13 @@ sidebar_position: 1
|
||||||
|
|
||||||
# Desktop
|
# Desktop
|
||||||
|
|
||||||
> Query your Second Brain from your machine
|
> Upload your knowledge base to Khoj and chat with your whole corpus
|
||||||
|
|
||||||
Use the Desktop app to chat and search with Khoj.
|
## Companion App
|
||||||
You can also share your files, folders with Khoj using the app.
|
|
||||||
|
Share your files, folders with Khoj using the app.
|
||||||
Khoj will keep these files in sync to provide contextual responses when you search or chat.
|
Khoj will keep these files in sync to provide contextual responses when you search or chat.
|
||||||
|
|
||||||
## Features
|
|
||||||
- **Chat**
|
|
||||||
- **Faster answers**: Find answers quickly, from your private notes or the public internet
|
|
||||||
- **Assisted creativity**: Smoothly weave across retrieving answers and generating content
|
|
||||||
- **Iterative discovery**: Iteratively explore and re-discover your notes
|
|
||||||
- **Quick access**: Use [Khoj Mini](/features/khoj_mini) on the desktop to quickly pull up a mini chat module for quicker answers
|
|
||||||
- **Search**
|
|
||||||
- **Natural**: Advanced natural language understanding using Transformer based ML Models
|
|
||||||
- **Incremental**: Incremental search for a fast, search-as-you-type experience
|
|
||||||
|
|
||||||
## Setup
|
## Setup
|
||||||
:::info[Self Hosting]
|
:::info[Self Hosting]
|
||||||
If you are self-hosting the Khoj server, update the *Settings* page on the Khoj Desktop app to:
|
If you are self-hosting the Khoj server, update the *Settings* page on the Khoj Desktop app to:
|
||||||
|
|
@ -34,7 +25,20 @@ If you are self-hosting the Khoj server, update the *Settings* page on the Khoj
|
||||||
4. [Optional] Add any files, folders you'd like Khoj to be aware of on the *Settings* page and Click *Save*.
|
4. [Optional] Add any files, folders you'd like Khoj to be aware of on the *Settings* page and Click *Save*.
|
||||||
These files and folders will be automatically kept in sync for you
|
These files and folders will be automatically kept in sync for you
|
||||||
|
|
||||||
## Interface
|
# Main App
|
||||||
| Chat | Search |
|
|
||||||
|:----:|:------:|
|
You can also install the Khoj application on your desktop as a progressive web app.
|
||||||
|  |  |
|
|
||||||
|
1. Open the [Khoj Web App](https://app.khoj.dev) in Chrome.
|
||||||
|
2. Click on the install button in the address bar to install the app. You must be logged into your Chrome browser for this to work.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Alternatively, you can also install using this route:
|
||||||
|
|
||||||
|
1. Open the three-dot menu in the top right corner of the browser.
|
||||||
|
2. Go to 'Cast, Save, and Share' option.
|
||||||
|
3. Click on the "Open in Khoj" option.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="800px"
|
|
||||||
height="800px"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
version="1.1">
|
|
||||||
<path
|
|
||||||
d="m 14.024348,9.8497703 0.04627,1.9750167"
|
|
||||||
stroke="#1c274c"
|
|
||||||
stroke-width="1.77073"
|
|
||||||
stroke-linecap="round" />
|
|
||||||
<path
|
|
||||||
d="m 9.6453624,9.7953624 0.046275,1.9750166"
|
|
||||||
stroke="#1c274c"
|
|
||||||
stroke-width="1.77072"
|
|
||||||
stroke-linecap="round" />
|
|
||||||
<path
|
|
||||||
d="m 11.90538,2.3619994 c -5.4939109,0 -9.6890976,4.0608185 -9.6890976,9.8578926 0,1.477202 0.2658016,2.542848 0.6989332,3.331408 0.433559,0.789293 1.0740097,1.372483 1.9230615,1.798517 1.7362861,0.87132 4.1946007,1.018626 7.0671029,1.018626 0.317997,0 0.593711,0.167879 0.784844,0.458501 0.166463,0.253124 0.238617,0.552748 0.275566,0.787233 0.07263,0.460801 0.05871,1.030165 0.04785,1.474824 v 4.8e-5 l -2.26e-4,0.0091 c -0.0085,0.348246 -0.01538,0.634247 -0.0085,0.861186 0.105589,-0.07971 0.227925,-0.185287 0.36735,-0.31735 0.348613,-0.330307 0.743513,-0.767362 1.176607,-1.246635 l 0.07837,-0.08673 c 0.452675,-0.500762 0.941688,-1.037938 1.41216,-1.473209 0.453774,-0.419787 0.969948,-0.822472 1.476003,-0.953853 1.323661,-0.343655 2.330132,-0.904027 3.005749,-1.76381 0.658957,-0.838568 1.073167,-2.051868 1.073167,-3.898667 0,-5.7970748 -4.195186,-9.8578946 -9.689097,-9.8578946 z M 0.92440678,12.219892 c 0,-7.0067939 5.05909412,-11.47090892 10.98097322,-11.47090892 5.921878,0 10.980972,4.46411502 10.980972,11.47090892 0,2.172259 -0.497596,3.825405 -1.442862,5.028357 -0.928601,1.181693 -2.218843,1.837914 -3.664937,2.213334 -0.211641,0.05502 -0.53529,0.268579 -0.969874,0.670658 -0.417861,0.386604 -0.865628,0.876836 -1.324566,1.384504 l -0.09131,0.101202 c -0.419252,0.464136 -0.849637,0.94059 -1.239338,1.309807 -0.210187,0.199169 -0.425281,0.383422 -0.635348,0.523424 -0.200911,0.133819 -0.449635,0.263369 -0.716376,0.281474 -0.327812,0.02226 -0.61539,-0.149209 -0.804998,-0.457293 -0.157614,-0.255993 -0.217622,-0.557143 -0.246564,-0.778198 -0.0542,-0.414027 -0.04101,-0.933065 -0.03027,-1.355183 l 0.0024,-0.0922 c 0.01099,-0.463865 0.01489,-0.820507 -0.01611,-1.06842 C 8.9434608,19.975238 6.3139711,19.828758 4.356743,18.84659 3.3355029,18.334136 2.4624526,17.578678 1.8500164,16.463713 1.2372016,15.348029 0.92459928,13.943803 0.92459928,12.219967 Z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
stroke-width="0.360886"
|
|
||||||
fill="#1c274c"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
fill-opacity="1" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,5 +0,0 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
|
||||||
<path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 580 B |
1
src/interface/desktop/assets/icons/clock.svg
Normal file
1
src/interface/desktop/assets/icons/clock.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="128 80 128 128 168 152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="184 104 224 104 224 64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M188.4,192a88,88,0,1,1,1.83-126.23C202,77.69,211.72,88.93,224,104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
|
||||||
|
After Width: | Height: | Size: 573 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><defs><style>.cls-1{fill:#00a912;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#fff;}</style></defs><title>confirm</title><path class="cls-1" d="M61.44,0A61.44,61.44,0,1,1,0,61.44,61.44,61.44,0,0,1,61.44,0Z"/><path class="cls-2" d="M42.37,51.68,53.26,62,79,35.87c2.13-2.16,3.47-3.9,6.1-1.19l8.53,8.74c2.8,2.77,2.66,4.4,0,7L58.14,85.34c-5.58,5.46-4.61,5.79-10.26.19L28,65.77c-1.18-1.28-1.05-2.57.24-3.84l9.9-10.27c1.5-1.58,2.7-1.44,4.22,0Z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 549 B |
|
|
@ -1,9 +1 @@
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="48" y1="40" x2="208" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M193.89,200.49A79.66,79.66,0,0,1,160,208H72A56,56,0,1,1,85.92,97.74" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M112.63,63.52A80,80,0,0,1,219.68,181.28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M80,128A79.68,79.68,0,0,1,91.07,87.37" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
|
||||||
<!-- 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>
|
|
||||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<g id="SVGRepo_iconCarrier"> <path d="M22 12.3529C22 15.0599 20.0726 17.3221 17.5 17.8722M6.28571 18C3.91878 18 2 16.1038 2 13.7647C2 11.4256 3.91878 9.52941 6.28571 9.52941C6.56983 9.52941 6.8475 9.55673 7.11616 9.60887M14.381 7.02721C14.9767 6.81911 15.6178 6.70588 16.2857 6.70588C16.9404 6.70588 17.5693 6.81468 18.1551 7.01498M7.11616 9.60887C6.88706 8.9978 6.7619 8.33687 6.7619 7.64706C6.7619 4.52827 9.32028 2 12.4762 2C15.4159 2 17.8371 4.19371 18.1551 7.01498M7.11616 9.60887C7.68059 9.71839 8.20528 9.9374 8.66667 10.2426M18.1551 7.01498C18.8381 7.24853 19.4623 7.60648 20 8.06141" stroke="#d42400" stroke-width="1.5" stroke-linecap="round"/> <path d="M8.5 17C8.5 15.5858 8.5 14.8787 8.93934 14.4393C9.37868 14 10.0858 14 11.5 14H12.5C13.9142 14 14.6213 14 15.0607 14.4393C15.5 14.8787 15.5 15.5858 15.5 17V19C15.5 20.4142 15.5 21.1213 15.0607 21.5607C14.6213 22 13.9142 22 12.5 22H11.5C10.0858 22 9.37868 22 8.93934 21.5607C8.5 21.1213 8.5 20.4142 8.5 19V17Z" stroke="#d42400" stroke-width="1.5"/> <path d="M11 18H13" stroke="#d42400" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </g>
|
|
||||||
</svg>
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 729 B |
|
|
@ -1,9 +1 @@
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M80,128a80,80,0,1,1,80,80H72A56,56,0,1,1,85.92,97.74" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="120 136 144 160 192 112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
|
||||||
<!-- 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>
|
|
||||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<g id="SVGRepo_iconCarrier"> <path d="M22 13.3529C22 16.0599 20.0726 18.3221 17.5 18.8722M6.28571 19C3.91878 19 2 17.1038 2 14.7647C2 12.4256 3.91878 10.5294 6.28571 10.5294C6.56983 10.5294 6.8475 10.5567 7.11616 10.6089M14.381 8.02721C14.9767 7.81911 15.6178 7.70588 16.2857 7.70588C16.9404 7.70588 17.5693 7.81468 18.1551 8.01498M7.11616 10.6089C6.88706 9.9978 6.7619 9.33687 6.7619 8.64706C6.7619 5.52827 9.32028 3 12.4762 3C15.4159 3 17.8371 5.19371 18.1551 8.01498M7.11616 10.6089C7.68059 10.7184 8.20528 10.9374 8.66667 11.2426M18.1551 8.01498C18.8381 8.24853 19.4623 8.60648 20 9.06141" stroke="#16ba00" stroke-width="1.5" stroke-linecap="round"/> <path d="M10 19.8L11.1429 21L14 18" stroke="#16ba00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </g>
|
|
||||||
</svg>
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 419 B |
|
|
@ -1,28 +0,0 @@
|
||||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
||||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
||||||
viewBox="0 0 512 512" xml:space="preserve">
|
|
||||||
<path id="SVGCleanerId_0" style="fill:#FFC36E;" d="M183.295,123.586H55.05c-6.687,0-12.801-3.778-15.791-9.76l-12.776-25.55
|
|
||||||
l12.776-25.55c2.99-5.982,9.103-9.76,15.791-9.76h128.246c6.687,0,12.801,3.778,15.791,9.76l12.775,25.55l-12.776,25.55
|
|
||||||
C196.096,119.808,189.983,123.586,183.295,123.586z"/>
|
|
||||||
<g>
|
|
||||||
<path id="SVGCleanerId_0_1_" style="fill:#FFC36E;" d="M183.295,123.586H55.05c-6.687,0-12.801-3.778-15.791-9.76l-12.776-25.55
|
|
||||||
l12.776-25.55c2.99-5.982,9.103-9.76,15.791-9.76h128.246c6.687,0,12.801,3.778,15.791,9.76l12.775,25.55l-12.776,25.55
|
|
||||||
C196.096,119.808,189.983,123.586,183.295,123.586z"/>
|
|
||||||
</g>
|
|
||||||
<path style="fill:#EFF2FA;" d="M485.517,70.621H26.483c-4.875,0-8.828,3.953-8.828,8.828v44.138h476.69V79.448
|
|
||||||
C494.345,74.573,490.392,70.621,485.517,70.621z"/>
|
|
||||||
<rect x="17.655" y="105.931" style="fill:#E1E6F2;" width="476.69" height="17.655"/>
|
|
||||||
<path style="fill:#FFD782;" d="M494.345,88.276H217.318c-3.343,0-6.4,1.889-7.895,4.879l-10.336,20.671
|
|
||||||
c-2.99,5.982-9.105,9.76-15.791,9.76H55.05c-6.687,0-12.801-3.778-15.791-9.76L28.922,93.155c-1.495-2.99-4.552-4.879-7.895-4.879
|
|
||||||
h-3.372C7.904,88.276,0,96.18,0,105.931v335.448c0,9.751,7.904,17.655,17.655,17.655h476.69c9.751,0,17.655-7.904,17.655-17.655
|
|
||||||
V105.931C512,96.18,504.096,88.276,494.345,88.276z"/>
|
|
||||||
<path style="fill:#FFC36E;" d="M485.517,441.379H26.483c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828
|
|
||||||
h459.034c4.875,0,8.828,3.953,8.828,8.828l0,0C494.345,437.427,490.392,441.379,485.517,441.379z"/>
|
|
||||||
<path style="fill:#EFF2FA;" d="M326.621,220.69h132.414c4.875,0,8.828-3.953,8.828-8.828v-70.621c0-4.875-3.953-8.828-8.828-8.828
|
|
||||||
H326.621c-4.875,0-8.828,3.953-8.828,8.828v70.621C317.793,216.737,321.746,220.69,326.621,220.69z"/>
|
|
||||||
<path style="fill:#C7CFE2;" d="M441.379,167.724h-97.103c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828
|
|
||||||
h97.103c4.875,0,8.828,3.953,8.828,8.828l0,0C450.207,163.772,446.254,167.724,441.379,167.724z"/>
|
|
||||||
<path style="fill:#D7DEED;" d="M441.379,203.034h-97.103c-4.875,0-8.828-3.953-8.828-8.828l0,0c0-4.875,3.953-8.828,8.828-8.828
|
|
||||||
h97.103c4.875,0,8.828,3.953,8.828,8.828l0,0C450.207,199.082,446.254,203.034,441.379,203.034z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,4 +0,0 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 8.29344C22 11.7692 19.1708 14.5869 15.6807 14.5869C15.0439 14.5869 13.5939 14.4405 12.8885 13.8551L12.0067 14.7333C11.4883 15.2496 11.6283 15.4016 11.8589 15.652C11.9551 15.7565 12.0672 15.8781 12.1537 16.0505C12.1537 16.0505 12.8885 17.075 12.1537 18.0995C11.7128 18.6849 10.4783 19.5045 9.06754 18.0995L8.77362 18.3922C8.77362 18.3922 9.65538 19.4167 8.92058 20.4412C8.4797 21.0267 7.30403 21.6121 6.27531 20.5876L5.2466 21.6121C4.54119 22.3146 3.67905 21.9048 3.33616 21.6121L2.45441 20.7339C1.63143 19.9143 2.1115 19.0264 2.45441 18.6849L10.0963 11.0743C10.0963 11.0743 9.3615 9.90338 9.3615 8.29344C9.3615 4.81767 12.1907 2 15.6807 2C19.1708 2 22 4.81767 22 8.29344ZM15.681 10.4889C16.8984 10.4889 17.8853 9.50601 17.8853 8.29353C17.8853 7.08105 16.8984 6.09814 15.681 6.09814C14.4635 6.09814 13.4766 7.08105 13.4766 8.29353C13.4766 9.50601 14.4635 10.4889 15.681 10.4889Z" fill="#1C274C"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
BIN
src/interface/desktop/assets/icons/khoj_logo.png
Normal file
BIN
src/interface/desktop/assets/icons/khoj_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -1,4 +0,0 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9.16488 17.6505C8.92513 17.8743 8.73958 18.0241 8.54996 18.1336C7.62175 18.6695 6.47816 18.6695 5.54996 18.1336C5.20791 17.9361 4.87912 17.6073 4.22153 16.9498C3.56394 16.2922 3.23514 15.9634 3.03767 15.6213C2.50177 14.6931 2.50177 13.5495 3.03767 12.6213C3.23514 12.2793 3.56394 11.9505 4.22153 11.2929L7.04996 8.46448C7.70755 7.80689 8.03634 7.47809 8.37838 7.28062C9.30659 6.74472 10.4502 6.74472 11.3784 7.28061C11.7204 7.47809 12.0492 7.80689 12.7068 8.46448C13.3644 9.12207 13.6932 9.45086 13.8907 9.7929C14.4266 10.7211 14.4266 11.8647 13.8907 12.7929C13.7812 12.9825 13.6314 13.1681 13.4075 13.4078M10.5919 10.5922C10.368 10.8319 10.2182 11.0175 10.1087 11.2071C9.57284 12.1353 9.57284 13.2789 10.1087 14.2071C10.3062 14.5492 10.635 14.878 11.2926 15.5355C11.9502 16.1931 12.279 16.5219 12.621 16.7194C13.5492 17.2553 14.6928 17.2553 15.621 16.7194C15.9631 16.5219 16.2919 16.1931 16.9495 15.5355L19.7779 12.7071C20.4355 12.0495 20.7643 11.7207 20.9617 11.3787C21.4976 10.4505 21.4976 9.30689 20.9617 8.37869C20.7643 8.03665 20.4355 7.70785 19.7779 7.05026C19.1203 6.39267 18.7915 6.06388 18.4495 5.8664C17.5212 5.3305 16.3777 5.3305 15.4495 5.8664C15.2598 5.97588 15.0743 6.12571 14.8345 6.34955" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M192 0C139 0 96 43 96 96V256c0 53 43 96 96 96s96-43 96-96V96c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 89.1 66.2 162.7 152 174.4V464H120c-13.3 0-24 10.7-24 24s10.7 24 24 24h72 72c13.3 0 24-10.7 24-24s-10.7-24-24-24H216V430.4c85.8-11.7 152-85.3 152-174.4V216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 70.7-57.3 128-128 128s-128-57.3-128-128V216z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 616 B |
1
src/interface/desktop/assets/icons/open-link.svg
Normal file
1
src/interface/desktop/assets/icons/open-link.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="216 104 215.99 40.01 152 40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="136" y1="120" x2="216" y2="40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M184,136v72a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8h72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
|
||||||
|
After Width: | Height: | Size: 574 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100px" height="100px"><path fill="#fefdef" d="M29.614,12.307h-1.268c-4.803,0-8.732,3.93-8.732,8.732v61.535c0,4.803,3.93,8.732,8.732,8.732h43.535c4.803,0,8.732-3.93,8.732-8.732v-50.02C72.74,24.68,68.241,20.182,60.367,12.307H41.614"/><path fill="#1f212b" d="M71.882,92.307H28.347c-5.367,0-9.732-4.366-9.732-9.732V21.04c0-5.367,4.366-9.732,9.732-9.732h1.268c0.552,0,1,0.448,1,1s-0.448,1-1,1h-1.268c-4.264,0-7.732,3.469-7.732,7.732v61.535c0,4.264,3.469,7.732,7.732,7.732h43.535c4.264,0,7.732-3.469,7.732-7.732V32.969L59.953,13.307H41.614c-0.552,0-1-0.448-1-1s0.448-1,1-1h18.752c0.265,0,0.52,0.105,0.707,0.293l20.248,20.248c0.188,0.188,0.293,0.442,0.293,0.707v50.02C81.614,87.941,77.248,92.307,71.882,92.307z"/><path fill="#fef6aa" d="M60.114,12.807v10.986c0,4.958,4.057,9.014,9.014,9.014h11.986"/><path fill="#1f212b" d="M81.114 33.307H69.129c-5.247 0-9.515-4.268-9.515-9.515V12.807c0-.276.224-.5.5-.5s.5.224.5.5v10.985c0 4.695 3.82 8.515 8.515 8.515h11.985c.276 0 .5.224.5.5S81.391 33.307 81.114 33.307zM75.114 51.307c-.276 0-.5-.224-.5-.5v-3c0-.276.224-.5.5-.5s.5.224.5.5v3C75.614 51.083 75.391 51.307 75.114 51.307zM75.114 59.307c-.276 0-.5-.224-.5-.5v-6c0-.276.224-.5.5-.5s.5.224.5.5v6C75.614 59.083 75.391 59.307 75.114 59.307zM67.956 86.307H32.272c-4.223 0-7.658-3.45-7.658-7.689V25.955c0-2.549 1.264-4.931 3.382-6.371.228-.156.54-.095.695.132.155.229.096.54-.132.695-1.844 1.254-2.944 3.326-2.944 5.544v52.663c0 3.688 2.987 6.689 6.658 6.689h35.685c3.671 0 6.658-3.001 6.658-6.689V60.807c0-.276.224-.5.5-.5s.5.224.5.5v17.811C75.614 82.857 72.179 86.307 67.956 86.307z"/><path fill="#1f212b" d="M39.802 14.307l-.117 11.834c0 2.21-2.085 3.666-4.036 3.666-1.951 0-4.217-1.439-4.217-3.649l.037-12.58c0-1.307 1.607-2.451 2.801-2.451 1.194 0 2.345 1.149 2.345 2.456l.021 10.829c0 0-.083.667-1.005.645-.507-.012-1.145-.356-1.016-.906v-9.843h-.813l-.021 9.708c0 1.38.54 1.948 1.875 1.948s1.959-.714 1.959-2.094V13.665c0-2.271-1.36-3.5-3.436-3.5s-3.564 1.261-3.564 3.532l.032 12.11c0 3.04 2.123 4.906 4.968 4.906 2.845 0 5-1.71 5-4.75V14.307H39.802zM53.114 52.307h-23c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h23c.276 0 .5.224.5.5S53.391 52.307 53.114 52.307zM44.114 59.307h-14c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h14c.276 0 .5.224.5.5S44.391 59.307 44.114 59.307zM70.114 59.307h-24c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h24c.276 0 .5.224.5.5S70.391 59.307 70.114 59.307zM61.114 66.307h-11c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h11c.276 0 .5.224.5.5S61.391 66.307 61.114 66.307zM71.114 66.307h-8c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h8c.276 0 .5.224.5.5S71.391 66.307 71.114 66.307zM48.114 66.307h-18c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h18c.276 0 .5.224.5.5S48.391 66.307 48.114 66.307zM70.114 73.307h-13c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h13c.276 0 .5.224.5.5S70.391 73.307 70.114 73.307zM54.114 73.307h-24c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h24c.276 0 .5.224.5.5S54.391 73.307 54.114 73.307z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><path fill-rule="nonzero" d="M256 0c70.69 0 134.7 28.66 181.02 74.98C483.34 121.31 512 185.31 512 256c0 70.69-28.66 134.7-74.98 181.02C390.7 483.34 326.69 512 256 512c-70.69 0-134.69-28.66-181.02-74.98C28.66 390.7 0 326.69 0 256c0-70.69 28.66-134.69 74.98-181.02C121.31 28.66 185.31 0 256 0zm-21.49 301.51v-2.03c.16-13.46 1.48-24.12 4.07-32.05 2.54-7.92 6.19-14.37 10.97-19.25 4.77-4.92 10.51-9.39 17.22-13.46 4.31-2.74 8.22-5.78 11.68-9.18 3.45-3.36 6.19-7.27 8.23-11.69 2.02-4.37 3.04-9.24 3.04-14.62 0-6.4-1.52-11.94-4.57-16.66-3-4.68-7.06-8.28-12.04-10.87-5.03-2.54-10.61-3.81-16.76-3.81-5.53 0-10.81 1.11-15.89 3.45-5.03 2.29-9.25 5.89-12.55 10.77-3.3 4.87-5.23 11.12-5.74 18.74h-32.91c.51-12.95 3.81-23.92 9.85-32.91 6.1-8.99 14.13-15.8 24.08-20.42 10.01-4.62 21.08-6.9 33.16-6.9 13.31 0 24.89 2.43 34.84 7.41 9.96 4.93 17.73 11.83 23.27 20.67 5.48 8.84 8.28 19.1 8.28 30.88 0 8.08-1.27 15.34-3.81 21.79-2.54 6.45-6.1 12.24-10.77 17.27-4.68 5.08-10.21 9.54-16.71 13.41-6.15 3.86-11.12 7.82-14.88 11.93-3.81 4.11-6.56 8.99-8.28 14.58-1.73 5.63-2.69 12.59-2.84 20.92v2.03h-30.94zm16.36 65.82c-5.94-.04-11.02-2.13-15.29-6.35-4.26-4.21-6.35-9.34-6.35-15.33 0-5.89 2.09-10.97 6.35-15.19 4.27-4.21 9.35-6.35 15.29-6.35 5.84 0 10.92 2.14 15.18 6.35 4.32 4.22 6.45 9.3 6.45 15.19 0 3.96-1.01 7.62-2.99 10.87-1.98 3.3-4.57 5.94-7.82 7.87-3.25 1.93-6.86 2.9-10.82 2.94zM417.71 94.29C376.33 52.92 319.15 27.32 256 27.32c-63.15 0-120.32 25.6-161.71 66.97C52.92 135.68 27.32 192.85 27.32 256c0 63.15 25.6 120.33 66.97 161.71 41.39 41.37 98.56 66.97 161.71 66.97 63.15 0 120.33-25.6 161.71-66.97 41.37-41.38 66.97-98.56 66.97-161.71 0-63.15-25.6-120.32-66.97-161.71z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,25 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="800px"
|
|
||||||
height="800px"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
version="1.1">
|
|
||||||
<path
|
|
||||||
d="m 18.562765,17.147843 c 1.380497,-1.679442 2.307667,-4.013099 2.307667,-6.330999 C 20.870432,5.3951476 16.353958,1 10.782674,1 5.2113555,1 0.69491525,5.3951476 0.69491525,10.816844 c 0,5.421663 4.51644025,9.816844 10.08775875,9.816844 2.381867,0 4.570922,-0.803307 6.296712,-2.14673 0.508475,-0.508475 4.514633,4.192839 4.514633,4.192839 1.036377,1.008544 2.113087,-0.02559 1.07671,-1.034139 z m -7.780091,1.925408 c -4.3394583,0 -8.6708434,-4.033489 -8.6708434,-8.256407 0,-4.2229187 4.3313851,-8.2564401 8.6708434,-8.2564401 4.339458,0 8.670809,4.2369112 8.670809,8.4598301 0,4.222918 -4.331351,8.053017 -8.670809,8.053017 z"
|
|
||||||
fill="#1c274c"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
fill-opacity="1"
|
|
||||||
stroke-width="1.10519"
|
|
||||||
stroke-dasharray="none" />
|
|
||||||
<path
|
|
||||||
d="m 13.337351,9.3402647 0.05184,2.1532893"
|
|
||||||
stroke="#1c274c"
|
|
||||||
stroke-width="1.95702"
|
|
||||||
stroke-linecap="round" />
|
|
||||||
<path
|
|
||||||
d="M 8.431347,9.2809457 8.483191,11.434235"
|
|
||||||
stroke="#1c274c"
|
|
||||||
stroke-width="1.95701"
|
|
||||||
stroke-linecap="round" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,37 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 384 512"
|
|
||||||
version="1.1"
|
|
||||||
id="svg1"
|
|
||||||
sodipodi:docname="stop-solid.svg"
|
|
||||||
inkscape:version="1.3 (0e150ed, 2023-07-21)"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
|
||||||
<defs
|
|
||||||
id="defs1" />
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="namedview1"
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#000000"
|
|
||||||
borderopacity="0.25"
|
|
||||||
inkscape:showpageshadow="2"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pagecheckerboard="0"
|
|
||||||
inkscape:deskcolor="#d1d1d1"
|
|
||||||
inkscape:zoom="0.4609375"
|
|
||||||
inkscape:cx="192"
|
|
||||||
inkscape:cy="256"
|
|
||||||
inkscape:window-width="1312"
|
|
||||||
inkscape:window-height="449"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="88"
|
|
||||||
inkscape:window-maximized="0"
|
|
||||||
inkscape:current-layer="svg1" />
|
|
||||||
<!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
|
|
||||||
<path
|
|
||||||
d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"
|
|
||||||
id="path1"
|
|
||||||
style="fill:#aa0000" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1 +1 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="216" y1="56" x2="40" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="24" x2="168" y2="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 503 B After Width: | Height: | Size: 547 B |
1
src/interface/desktop/assets/icons/upload.svg
Normal file
1
src/interface/desktop/assets/icons/upload.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M176,128h48a8,8,0,0,1,8,8v64a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V136a8,8,0,0,1,8-8H80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="128" x2="128" y2="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="80 72 128 24 176 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="188" cy="168" r="12"/></svg>
|
||||||
|
After Width: | Height: | Size: 618 B |
|
|
@ -8,13 +8,12 @@
|
||||||
--primary-hover: #fee285;
|
--primary-hover: #fee285;
|
||||||
--primary-focus: rgba(255, 179, 0, 0.125);
|
--primary-focus: rgba(255, 179, 0, 0.125);
|
||||||
--primary-inverse: rgba(0, 0, 0, 0.75);
|
--primary-inverse: rgba(0, 0, 0, 0.75);
|
||||||
--background-color: #f5f4f3;
|
--background-color: #fff;
|
||||||
--main-text-color: #475569;
|
--main-text-color: #475569;
|
||||||
--summer-sun: #fcc50b;
|
--summer-sun: #fcc50b;
|
||||||
--water: #44b9da;
|
--water: #44b9da;
|
||||||
--leaf: #7b990a;
|
--leaf: #7b990a;
|
||||||
--flower: #d1684e;
|
--flower: #d1684e;
|
||||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Amber Dark scheme (Auto) */
|
/* Amber Dark scheme (Auto) */
|
||||||
|
|
@ -25,13 +24,12 @@
|
||||||
--primary-hover: #fee285;
|
--primary-hover: #fee285;
|
||||||
--primary-focus: rgba(255, 179, 0, 0.25);
|
--primary-focus: rgba(255, 179, 0, 0.25);
|
||||||
--primary-inverse: rgba(0, 0, 0, 0.75);
|
--primary-inverse: rgba(0, 0, 0, 0.75);
|
||||||
--background-color: #f5f4f3;
|
--background-color: #fff;
|
||||||
--main-text-color: #475569;
|
--main-text-color: #475569;
|
||||||
--summer-sun: #fcc50b;
|
--summer-sun: #fcc50b;
|
||||||
--water: #44b9da;
|
--water: #44b9da;
|
||||||
--leaf: #7b990a;
|
--leaf: #7b990a;
|
||||||
--flower: #d1684e;
|
--flower: #d1684e;
|
||||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* Amber Dark scheme (Forced) */
|
/* Amber Dark scheme (Forced) */
|
||||||
|
|
@ -41,13 +39,12 @@
|
||||||
--primary-hover: #fcc50b;
|
--primary-hover: #fcc50b;
|
||||||
--primary-focus: rgba(255, 179, 0, 0.25);
|
--primary-focus: rgba(255, 179, 0, 0.25);
|
||||||
--primary-inverse: rgba(0, 0, 0, 0.75);
|
--primary-inverse: rgba(0, 0, 0, 0.75);
|
||||||
--background-color: #f5f4f3;
|
--background-color: #fff;
|
||||||
--main-text-color: #475569;
|
--main-text-color: #475569;
|
||||||
--summer-sun: #fcc50b;
|
--summer-sun: #fcc50b;
|
||||||
--water: #44b9da;
|
--water: #44b9da;
|
||||||
--leaf: #7b990a;
|
--leaf: #7b990a;
|
||||||
--flower: #d1684e;
|
--flower: #d1684e;
|
||||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
|
||||||
}
|
}
|
||||||
/* Amber (Common styles) */
|
/* Amber (Common styles) */
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -95,30 +92,40 @@ nav.khoj-nav {
|
||||||
.khoj-status-box {
|
.khoj-status-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
padding: 8px 12px;
|
||||||
min-width: 52px;
|
border-radius: 16px;
|
||||||
gap: 4px;
|
font-size: 14px;
|
||||||
-webkit-app-region: no-drag;
|
font-weight: 500;
|
||||||
|
background-color: #f5f5f5; /* Neutral background */
|
||||||
|
color: #333; /* Neutral text color */
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.khoj-status-box .khoj-status-connected {
|
.khoj-status-connected {
|
||||||
height: 12px;
|
width: 10px;
|
||||||
width: 12px;
|
height: 10px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: rgb(90, 235, 90);
|
background-color: #4CAF50; /* Green for connected */
|
||||||
}
|
margin-right: 8px;
|
||||||
.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 {
|
.khoj-status-not-connected {
|
||||||
display: none;
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #F44336; /* Red for not connected */
|
||||||
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.khoj-status-box:hover .khoj-status-text {
|
|
||||||
display: block;
|
.khoj-status-text {
|
||||||
|
color: #333; /* Neutral text color */
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.khoj-status-box:hover {
|
||||||
|
background-color: #e0e0e0; /* Slightly darker background on hover */
|
||||||
|
color: #000; /* Darker text on hover */
|
||||||
}
|
}
|
||||||
|
|
||||||
a.khoj-nav {
|
a.khoj-nav {
|
||||||
|
|
@ -188,18 +195,18 @@ img.khoj-logo {
|
||||||
.khoj-nav-dropdown-content.show {
|
.khoj-nav-dropdown-content.show {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
border-radius: 20px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
.khoj-nav-dropdown-content a {
|
.khoj-nav-dropdown-content a {
|
||||||
color: black;
|
color: black;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 20px;
|
|
||||||
}
|
}
|
||||||
.khoj-nav-dropdown-content a:hover {
|
.khoj-nav-dropdown-content a:hover {
|
||||||
background-color: var(--primary-hover);
|
background-color: hsla(24.6 95% 53.1% / 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
.khoj-nav-username {
|
.khoj-nav-username {
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -233,6 +240,17 @@ img.khoj-logo {
|
||||||
border: 3px solid var(--primary-hover);
|
border: 3px solid var(--primary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.khoj-nav-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.khoj-nav-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
.khoj-nav-dropdown-content {
|
.khoj-nav-dropdown-content {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -440,7 +440,7 @@ let titleBarStyle = process.platform === 'win32' ? 'default' : 'hidden';
|
||||||
const {globalShortcut, clipboard} = require('electron'); // global shortcut and clipboard dependencies for shortcut window
|
const {globalShortcut, clipboard} = require('electron'); // global shortcut and clipboard dependencies for shortcut window
|
||||||
const openShortcutWindowKeyBind = 'CommandOrControl+Shift+K'
|
const openShortcutWindowKeyBind = 'CommandOrControl+Shift+K'
|
||||||
|
|
||||||
const createWindow = (tab = 'chat.html') => {
|
const createWindow = (tab = 'settings.html') => {
|
||||||
win = new BrowserWindow({
|
win = new BrowserWindow({
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 800,
|
height: 800,
|
||||||
|
|
@ -602,6 +602,14 @@ app.whenReady().then(() => {
|
||||||
});
|
});
|
||||||
ipcMain.handle('deleteAllFiles', deleteAllFiles);
|
ipcMain.handle('deleteAllFiles', deleteAllFiles);
|
||||||
|
|
||||||
|
ipcMain.handle('openFile', async (_, path) => {
|
||||||
|
try {
|
||||||
|
await shell.openPath(path);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error opening file:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const mainWindow = createWindow();
|
const mainWindow = createWindow();
|
||||||
|
|
||||||
app.setAboutPanelOptions({
|
app.setAboutPanelOptions({
|
||||||
|
|
@ -652,7 +660,7 @@ app.whenReady().then(() => {
|
||||||
globalShortcut.unregister('Escape');
|
globalShortcut.unregister('Escape');
|
||||||
});
|
});
|
||||||
ipcMain.on('continue-conversation-button-clicked', () => {
|
ipcMain.on('continue-conversation-button-clicked', () => {
|
||||||
openWindow('chat.html');
|
openWindow('settings.html');
|
||||||
if (shortcutWin && !shortcutWin.isDestroyed()) {
|
if (shortcutWin && !shortcutWin.isDestroyed()) {
|
||||||
shortcutWin.close();
|
shortcutWin.close();
|
||||||
}
|
}
|
||||||
|
|
@ -727,8 +735,6 @@ app.whenReady().then(() => {
|
||||||
tray = new Tray(icon)
|
tray = new Tray(icon)
|
||||||
|
|
||||||
const contextMenu = Menu.buildFromTemplate([
|
const contextMenu = Menu.buildFromTemplate([
|
||||||
{ label: 'Chat', type: 'normal', click: () => { openWindow('chat.html'); }},
|
|
||||||
{ label: 'Search', type: 'normal', click: () => { openWindow('search.html') }},
|
|
||||||
{ label: 'Configure', type: 'normal', click: () => { openWindow('settings.html') }},
|
{ label: 'Configure', type: 'normal', click: () => { openWindow('settings.html') }},
|
||||||
{ type: 'separator' },
|
{ type: 'separator' },
|
||||||
{ label: 'About Khoj', type: 'normal', click: () => { openAboutWindow(); } },
|
{ label: 'About Khoj', type: 'normal', click: () => { openAboutWindow(); } },
|
||||||
|
|
|
||||||
|
|
@ -83,4 +83,9 @@ contextBridge.exposeInMainWorld('appInfoAPI', {
|
||||||
contextBridge.exposeInMainWorld('navigateAPI', {
|
contextBridge.exposeInMainWorld('navigateAPI', {
|
||||||
navigateToSettings: () => ipcRenderer.send('navigate', 'settings.html'),
|
navigateToSettings: () => ipcRenderer.send('navigate', 'settings.html'),
|
||||||
navigateToWebSettings: () => ipcRenderer.send('navigateToWebApp', 'settings'),
|
navigateToWebSettings: () => ipcRenderer.send('navigateToWebApp', 'settings'),
|
||||||
|
navigateToWebHome: () => ipcRenderer.send('navigateToWebApp', ''),
|
||||||
})
|
})
|
||||||
|
|
||||||
|
contextBridge.exposeInMainWorld('openFileAPI', {
|
||||||
|
openFile: (path) => ipcRenderer.invoke('openFile', path)
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -26,37 +26,10 @@ async function removeFolder(folderPath) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleFilesButton = document.getElementById('toggle-files');
|
|
||||||
const currentFiles = document.getElementById('current-files');
|
const currentFiles = document.getElementById('current-files');
|
||||||
|
|
||||||
const toggleFilesSVG = document.getElementById('toggle-files-svg');
|
|
||||||
|
|
||||||
toggleFilesButton.addEventListener('click', () => {
|
|
||||||
if (currentFiles.style.display === 'none') {
|
|
||||||
currentFiles.style.display = 'block';
|
|
||||||
toggleFilesSVG.style.transform = 'rotate(0deg)';
|
|
||||||
} else {
|
|
||||||
currentFiles.style.display = 'none';
|
|
||||||
toggleFilesSVG.style.transform = 'rotate(180deg)';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const toggleFoldersButton = document.getElementById('toggle-folders');
|
|
||||||
const currentFolders = document.getElementById('current-folders');
|
const currentFolders = document.getElementById('current-folders');
|
||||||
|
|
||||||
const toggleFoldersSVG = document.getElementById('toggle-folders-svg');
|
|
||||||
|
|
||||||
|
|
||||||
toggleFoldersButton.addEventListener('click', () => {
|
|
||||||
if (currentFolders.style.display === 'none') {
|
|
||||||
currentFolders.style.display = 'block';
|
|
||||||
toggleFoldersSVG.style.transform = 'rotate(0deg)';
|
|
||||||
} else {
|
|
||||||
currentFolders.style.display = 'none';
|
|
||||||
toggleFoldersSVG.style.transform = 'rotate(180deg)';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function makeFileElement(file) {
|
function makeFileElement(file) {
|
||||||
let fileElement = document.createElement("div");
|
let fileElement = document.createElement("div");
|
||||||
fileElement.classList.add("file-element");
|
fileElement.classList.add("file-element");
|
||||||
|
|
@ -64,18 +37,32 @@ function makeFileElement(file) {
|
||||||
let fileNameElement = document.createElement("div");
|
let fileNameElement = document.createElement("div");
|
||||||
fileNameElement.classList.add("content-name");
|
fileNameElement.classList.add("content-name");
|
||||||
fileNameElement.innerHTML = file.path;
|
fileNameElement.innerHTML = file.path;
|
||||||
|
fileNameElement.style.cursor = "pointer";
|
||||||
|
|
||||||
|
fileNameElement.addEventListener("click", () => {
|
||||||
|
window.openFileAPI.openFile(file.path);
|
||||||
|
});
|
||||||
|
|
||||||
fileElement.appendChild(fileNameElement);
|
fileElement.appendChild(fileNameElement);
|
||||||
|
|
||||||
let buttonContainer = document.createElement("div");
|
let buttonContainer = document.createElement("div");
|
||||||
buttonContainer.classList.add("remove-button-container");
|
buttonContainer.classList.add("remove-button-container");
|
||||||
let removeFileButton = document.createElement("button");
|
let removeFileButton = document.createElement("button");
|
||||||
let fileSyncedImage = document.createElement("img")
|
let fileSyncedImage = document.createElement("img");
|
||||||
fileSyncedImage.classList.add("file-synced-image");
|
fileSyncedImage.classList.add("file-synced-image");
|
||||||
|
fileSyncedImage.src = "./assets/icons/file-synced.svg";
|
||||||
|
|
||||||
|
// Create trash icon image
|
||||||
|
let trashIcon = document.createElement("img");
|
||||||
|
trashIcon.src = "./assets/icons/trash-solid.svg";
|
||||||
|
trashIcon.classList.add("trash-icon");
|
||||||
|
|
||||||
removeFileButton.classList.add("remove-file-button");
|
removeFileButton.classList.add("remove-file-button");
|
||||||
removeFileButton.innerHTML = "🗑️";
|
removeFileButton.appendChild(trashIcon);
|
||||||
removeFileButton.addEventListener("click", () => {
|
removeFileButton.addEventListener("click", () => {
|
||||||
removeFile(file.path);
|
removeFile(file.path);
|
||||||
});
|
});
|
||||||
|
|
||||||
buttonContainer.appendChild(removeFileButton);
|
buttonContainer.appendChild(removeFileButton);
|
||||||
buttonContainer.insertAdjacentElement("afterbegin", fileSyncedImage);
|
buttonContainer.insertAdjacentElement("afterbegin", fileSyncedImage);
|
||||||
fileElement.appendChild(buttonContainer);
|
fileElement.appendChild(buttonContainer);
|
||||||
|
|
@ -89,13 +76,26 @@ function makeFolderElement(folder) {
|
||||||
let folderNameElement = document.createElement("div");
|
let folderNameElement = document.createElement("div");
|
||||||
folderNameElement.classList.add("content-name");
|
folderNameElement.classList.add("content-name");
|
||||||
folderNameElement.innerHTML = folder.path;
|
folderNameElement.innerHTML = folder.path;
|
||||||
|
folderNameElement.style.cursor = "pointer";
|
||||||
|
|
||||||
|
folderNameElement.addEventListener("click", () => {
|
||||||
|
window.openFileAPI.openFile(folder.path);
|
||||||
|
});
|
||||||
|
|
||||||
folderElement.appendChild(folderNameElement);
|
folderElement.appendChild(folderNameElement);
|
||||||
|
|
||||||
let buttonContainer = document.createElement("div");
|
let buttonContainer = document.createElement("div");
|
||||||
buttonContainer.classList.add("remove-button-container");
|
buttonContainer.classList.add("remove-button-container");
|
||||||
let removeFolderButton = document.createElement("button");
|
let removeFolderButton = document.createElement("button");
|
||||||
removeFolderButton.classList.add("remove-folder-button");
|
removeFolderButton.classList.add("remove-folder-button");
|
||||||
removeFolderButton.innerHTML = "🗑️";
|
|
||||||
|
// Create trash icon image
|
||||||
|
let trashIcon = document.createElement("img");
|
||||||
|
trashIcon.src = "./assets/icons/trash-solid.svg";
|
||||||
|
trashIcon.classList.add("trash-icon");
|
||||||
|
|
||||||
|
removeFolderButton.appendChild(trashIcon);
|
||||||
|
|
||||||
removeFolderButton.addEventListener("click", () => {
|
removeFolderButton.addEventListener("click", () => {
|
||||||
removeFolder(folder.path);
|
removeFolder(folder.path);
|
||||||
});
|
});
|
||||||
|
|
@ -157,6 +157,7 @@ window.updateStateAPI.onUpdateState((event, state) => {
|
||||||
console.log("state was updated", state);
|
console.log("state was updated", state);
|
||||||
loadingBar.style.display = 'none';
|
loadingBar.style.display = 'none';
|
||||||
let syncStatusElement = document.getElementById("sync-status");
|
let syncStatusElement = document.getElementById("sync-status");
|
||||||
|
syncStatusElement.innerHTML = '';
|
||||||
const currentTime = new Date();
|
const currentTime = new Date();
|
||||||
nextSyncTime = new Date();
|
nextSyncTime = new Date();
|
||||||
nextSyncTime.setMinutes(Math.ceil((nextSyncTime.getMinutes() + 1) / 10) * 10);
|
nextSyncTime.setMinutes(Math.ceil((nextSyncTime.getMinutes() + 1) / 10) * 10);
|
||||||
|
|
@ -176,7 +177,15 @@ window.updateStateAPI.onUpdateState((event, state) => {
|
||||||
|
|
||||||
}
|
}
|
||||||
const options = { hour: '2-digit', minute: '2-digit' };
|
const options = { hour: '2-digit', minute: '2-digit' };
|
||||||
syncStatusElement.innerHTML = `⏱️ Synced at ${currentTime.toLocaleTimeString(undefined, options)}. Next sync at ${nextSyncTime.toLocaleTimeString(undefined, options)}.`;
|
|
||||||
|
const clockElement = document.createElement("div");
|
||||||
|
const clockIcon = document.createElement("img");
|
||||||
|
clockIcon.src = "./assets/icons/clock.svg";
|
||||||
|
clockIcon.classList.add("clock-icon");
|
||||||
|
|
||||||
|
clockElement.appendChild(clockIcon);
|
||||||
|
syncStatusElement.appendChild(clockElement);
|
||||||
|
syncStatusElement.innerHTML += ` Synced at ${currentTime.toLocaleTimeString(undefined, options)}. Next sync at ${nextSyncTime.toLocaleTimeString(undefined, options)}.`;
|
||||||
});
|
});
|
||||||
|
|
||||||
window.needsSubscriptionAPI.onNeedsSubscription((event, needsSubscription) => {
|
window.needsSubscriptionAPI.onNeedsSubscription((event, needsSubscription) => {
|
||||||
|
|
|
||||||
|
|
@ -1,458 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
|
|
||||||
<meta property="og:image" content="https://assets.khoj.dev/khoj_hero.png">
|
|
||||||
<title>Khoj - Search</title>
|
|
||||||
|
|
||||||
<link rel="icon" type="image/png" sizes="128x128" href="./assets/icons/favicon-128x128.png">
|
|
||||||
<link rel="manifest" href="./khoj.webmanifest">
|
|
||||||
<link rel="stylesheet" href="./assets/khoj.css">
|
|
||||||
</head>
|
|
||||||
<script type="text/javascript" src="./assets/org.min.js"></script>
|
|
||||||
<script type="text/javascript" src="./assets/markdown-it.min.js"></script>
|
|
||||||
<script src="./utils.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function render_image(item) {
|
|
||||||
return `
|
|
||||||
<div class="results-image">
|
|
||||||
<a href="${item.entry}" class="image-link">
|
|
||||||
<img id=${item.score} src="${item.entry}?${Math.random()}"
|
|
||||||
title="Effective Score: ${item.score}, Meta: ${item.additional.metadata_score}, Image: ${item.additional.image_score}"
|
|
||||||
class="image">
|
|
||||||
</a>
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function render_org(query, data, classPrefix="") {
|
|
||||||
return data.map(function (item) {
|
|
||||||
var orgParser = new Org.Parser();
|
|
||||||
var orgDocument = orgParser.parse(item.entry);
|
|
||||||
var orgHTMLDocument = orgDocument.convert(Org.ConverterHTML, { htmlClassPrefix: classPrefix, suppressNewLines: true });
|
|
||||||
return `<div class="results-org">` + orgHTMLDocument.toString() + `</div>`;
|
|
||||||
}).join("\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
function render_markdown(query, data) {
|
|
||||||
var md = window.markdownit();
|
|
||||||
return data.map(function (item) {
|
|
||||||
let rendered = "";
|
|
||||||
if (item.additional.file.startsWith("http")) {
|
|
||||||
lines = item.entry.split("\n");
|
|
||||||
rendered = md.render(`${lines[0]}\t[*](${item.additional.file})\n${lines.slice(1).join("\n")}`);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
rendered = md.render(`${item.entry}`);
|
|
||||||
}
|
|
||||||
return `<div class="results-markdown">` + rendered + `</div>`;
|
|
||||||
}).join("\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
function render_pdf(query, data) {
|
|
||||||
return data.map(function (item) {
|
|
||||||
let compiled_lines = item.additional.compiled.split("\n");
|
|
||||||
let filename = compiled_lines.shift();
|
|
||||||
let text_match = compiled_lines.join("\n")
|
|
||||||
return `<div class="results-pdf">` + `<h2>${filename}</h2>\n<p>${text_match}</p>` + `</div>`;
|
|
||||||
}).join("\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
function render_html(query, data) {
|
|
||||||
return data.map(function (item) {
|
|
||||||
let document = new DOMParser().parseFromString(item.entry, "text/html");
|
|
||||||
// Scrub the HTML to remove any script tags and associated content
|
|
||||||
let script_tags = document.querySelectorAll("script");
|
|
||||||
for (let i = 0; i < script_tags.length; i++) {
|
|
||||||
script_tags[i].remove();
|
|
||||||
}
|
|
||||||
// Scrub the HTML to remove any style tags and associated content
|
|
||||||
let style_tags = document.querySelectorAll("style");
|
|
||||||
for (let i = 0; i < style_tags.length; i++) {
|
|
||||||
style_tags[i].remove();
|
|
||||||
}
|
|
||||||
// Scrub the HTML to remove any noscript tags and associated content
|
|
||||||
let noscript_tags = document.querySelectorAll("noscript");
|
|
||||||
for (let i = 0; i < noscript_tags.length; i++) {
|
|
||||||
noscript_tags[i].remove();
|
|
||||||
}
|
|
||||||
// Scrub the HTML to remove any iframe tags and associated content
|
|
||||||
let iframe_tags = document.querySelectorAll("iframe");
|
|
||||||
for (let i = 0; i < iframe_tags.length; i++) {
|
|
||||||
iframe_tags[i].remove();
|
|
||||||
}
|
|
||||||
// Scrub the HTML to remove any object tags and associated content
|
|
||||||
let object_tags = document.querySelectorAll("object");
|
|
||||||
for (let i = 0; i < object_tags.length; i++) {
|
|
||||||
object_tags[i].remove();
|
|
||||||
}
|
|
||||||
// Scrub the HTML to remove any embed tags and associated content
|
|
||||||
let embed_tags = document.querySelectorAll("embed");
|
|
||||||
for (let i = 0; i < embed_tags.length; i++) {
|
|
||||||
embed_tags[i].remove();
|
|
||||||
}
|
|
||||||
let scrubbedHTML = document.body.outerHTML;
|
|
||||||
return `<div class="results-html">` + scrubbedHTML + `</div>`;
|
|
||||||
}).join("\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
function render_xml(query, data) {
|
|
||||||
return data.map(function (item) {
|
|
||||||
return `<div class="results-xml">` +
|
|
||||||
`<b><a href="${item.additional.file}">${item.additional.heading}</a></b>` +
|
|
||||||
`<xml>${item.entry}</xml>` +
|
|
||||||
`</div>`
|
|
||||||
}).join("\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
function render_multiple(query, data, type) {
|
|
||||||
let html = "";
|
|
||||||
data.forEach(item => {
|
|
||||||
if (item.additional.file.endsWith(".org")) {
|
|
||||||
html += render_org(query, [item], "org-");
|
|
||||||
} else if (
|
|
||||||
item.additional.file.endsWith(".md") ||
|
|
||||||
item.additional.file.endsWith(".markdown") ||
|
|
||||||
(item.additional.file.includes("issues") && item.additional.source === "github") ||
|
|
||||||
(item.additional.file.includes("commit") && item.additional.source === "github")
|
|
||||||
)
|
|
||||||
{
|
|
||||||
html += render_markdown(query, [item]);
|
|
||||||
} else if (item.additional.file.endsWith(".pdf")) {
|
|
||||||
html += render_pdf(query, [item]);
|
|
||||||
} else if (item.additional.source == "notion") {
|
|
||||||
html += `<div class="results-notion">` + `<b><a href="${item.additional.file}">${item.additional.heading}</a></b>` + `<p>${item.entry}</p>` + `</div>`;
|
|
||||||
} else if (item.additional.file.endsWith(".html")) {
|
|
||||||
html += render_html(query, [item]);
|
|
||||||
} else if (item.additional.file.endsWith(".xml")) {
|
|
||||||
html += render_xml(query, [item])
|
|
||||||
} else {
|
|
||||||
html += `<div class="results-plugin">` + `<b><a href="${item.additional.file}">${item.additional.heading}</a></b>` + `<p>${item.entry}</p>` + `</div>`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
|
|
||||||
function render_results(data, query, type) {
|
|
||||||
let results = "";
|
|
||||||
if (type === "markdown") {
|
|
||||||
results = render_markdown(query, data);
|
|
||||||
} else if (type === "org") {
|
|
||||||
results = render_org(query, data, "org-");
|
|
||||||
} else if (type === "image") {
|
|
||||||
results = data.map(render_image).join('');
|
|
||||||
} else if (type === "pdf") {
|
|
||||||
results = render_pdf(query, data);
|
|
||||||
} else if (type === "github" || type === "all" || type === "notion") {
|
|
||||||
results = render_multiple(query, data, type);
|
|
||||||
} else {
|
|
||||||
results = data.map((item) => `<div class="results-plugin">` + `<p>${item.entry}</p>` + `</div>`).join("\n")
|
|
||||||
}
|
|
||||||
|
|
||||||
// Any POST rendering goes here.
|
|
||||||
|
|
||||||
let renderedResults = document.createElement("div");
|
|
||||||
renderedResults.id = `results-${type}`;
|
|
||||||
renderedResults.innerHTML = results;
|
|
||||||
|
|
||||||
// For all elements that are of type img in the results html and have a src with 'avatar' in the URL, add the class 'avatar'
|
|
||||||
// This is used to make the avatar images round
|
|
||||||
let images = renderedResults.querySelectorAll("img[src*='avatar']");
|
|
||||||
for (let i = 0; i < images.length; i++) {
|
|
||||||
images[i].classList.add("avatar");
|
|
||||||
}
|
|
||||||
|
|
||||||
return renderedResults.outerHTML;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function search(rerank=false) {
|
|
||||||
// Extract required fields for search from form
|
|
||||||
query = document.getElementById("query").value.trim();
|
|
||||||
type = 'all';
|
|
||||||
results_count = localStorage.getItem("khojResultsCount") || 5;
|
|
||||||
console.log(`Query: ${query}, Type: ${type}, Results Count: ${results_count}`);
|
|
||||||
|
|
||||||
// Short circuit on empty query
|
|
||||||
if (query.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If set query field in url query param on rerank
|
|
||||||
if (rerank)
|
|
||||||
setQueryFieldInUrl(query);
|
|
||||||
|
|
||||||
// Execute Search and Render Results
|
|
||||||
url = await createRequestUrl(query, type, results_count || 5, rerank);
|
|
||||||
const khojToken = await window.tokenAPI.getToken();
|
|
||||||
const headers = { 'Authorization': `Bearer ${khojToken}` };
|
|
||||||
|
|
||||||
fetch(url, { headers })
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
document.getElementById("results").innerHTML = render_results(data, query, type);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let debounceTimeout;
|
|
||||||
function incrementalSearch(event) {
|
|
||||||
// Run incremental search only after waitTime passed since the last key press
|
|
||||||
let waitTime = 300;
|
|
||||||
clearTimeout(debounceTimeout);
|
|
||||||
debounceTimeout = setTimeout(() => {
|
|
||||||
type = 'all';
|
|
||||||
// Search with reranking on 'Enter'
|
|
||||||
let should_rerank = event.key === 'Enter';
|
|
||||||
search(rerank=should_rerank);
|
|
||||||
}, waitTime);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function populate_type_dropdown() {
|
|
||||||
const hostURL = await window.hostURLAPI.getURL();
|
|
||||||
const khojToken = await window.tokenAPI.getToken();
|
|
||||||
const headers = { 'Authorization': `Bearer ${khojToken}` };
|
|
||||||
|
|
||||||
// Populate type dropdown field with enabled content types only
|
|
||||||
fetch(`${hostURL}/api/content/types`, { headers })
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(enabled_types => {
|
|
||||||
// Show warning if no content types are enabled
|
|
||||||
if (enabled_types.detail) {
|
|
||||||
document.getElementById("results").innerHTML = "<div id='results-error'>To use Khoj search, setup your content plugins on the Khoj <a class='inline-chat-link' href='/settings'>settings page</a>.</div>";
|
|
||||||
document.getElementById("query").setAttribute("disabled", "disabled");
|
|
||||||
document.getElementById("query").setAttribute("placeholder", "Configure Khoj to enable search");
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
return enabled_types;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function createRequestUrl(query, type, results_count, rerank) {
|
|
||||||
// Generate Backend API URL to execute Search
|
|
||||||
const hostURL = await window.hostURLAPI.getURL();
|
|
||||||
|
|
||||||
let url = `${hostURL}/api/search?q=${encodeURIComponent(query)}&n=${results_count}&client=web`;
|
|
||||||
// If type is not 'all', append type to URL
|
|
||||||
if (type !== 'all')
|
|
||||||
url += `&t=${type}`;
|
|
||||||
// Rerank is only supported by text types
|
|
||||||
if (type !== "image")
|
|
||||||
url += `&r=${rerank}`;
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setQueryFieldInUrl(query) {
|
|
||||||
var url = new URL(window.location.href);
|
|
||||||
url.searchParams.set("q", query);
|
|
||||||
window.history.pushState({}, "", url.href);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", async() => {
|
|
||||||
// Setup the header pane
|
|
||||||
document.getElementById("khoj-header").innerHTML = await populateHeaderPane();
|
|
||||||
// Setup the nav menu
|
|
||||||
document.getElementById("profile-picture").addEventListener("click", toggleNavMenu);
|
|
||||||
// Set the active nav pane
|
|
||||||
document.getElementById("search-nav")?.classList.add("khoj-nav-selected");
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
window.addEventListener("load", async function() {
|
|
||||||
// Dynamically populate type dropdown based on enabled content types and type passed as URL query parameter
|
|
||||||
await populate_type_dropdown();
|
|
||||||
|
|
||||||
// Fill query field with value passed in URL query parameters, if any.
|
|
||||||
var query_via_url = new URLSearchParams(window.location.search).get("q");
|
|
||||||
if (query_via_url)
|
|
||||||
document.getElementById("query").value = query_via_url;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!--Add Header Logo and Nav Pane-->
|
|
||||||
<div id="khoj-header" class="khoj-header"></div>
|
|
||||||
|
|
||||||
<!--Add Text Box To Enter Query, Trigger Incremental Search OnChange -->
|
|
||||||
<input type="text" id="query" class="option" onkeyup=incrementalSearch(event) autofocus="autofocus" placeholder="Search your knowledge base using natural language">
|
|
||||||
|
|
||||||
<!-- Section to Render Results -->
|
|
||||||
<div id="results"></div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@media only screen and (max-width: 600px) {
|
|
||||||
body {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: 1fr auto auto auto minmax(80px, 100%);
|
|
||||||
font-size: small!important;
|
|
||||||
}
|
|
||||||
body > * {
|
|
||||||
grid-column: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width: 600px) {
|
|
||||||
body {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr min(70vw, 100%) 1fr;
|
|
||||||
grid-template-rows: 1fr auto auto auto minmax(80px, 100%);
|
|
||||||
padding-top: 60vw;
|
|
||||||
}
|
|
||||||
body > * {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
background: var(--background-color);
|
|
||||||
color: var(--main-text-color);
|
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: small;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
body > * {
|
|
||||||
padding: 10px;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
#options {
|
|
||||||
padding: 0;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
#options > * {
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid #475569;
|
|
||||||
background: #f9fafc
|
|
||||||
}
|
|
||||||
.option:hover {
|
|
||||||
box-shadow: 0 0 11px #aaa;
|
|
||||||
}
|
|
||||||
#options > button {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#query {
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
#results {
|
|
||||||
font-size: small;
|
|
||||||
margin: 0px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
.results-image {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
}
|
|
||||||
.image-link {
|
|
||||||
place-self: center;
|
|
||||||
}
|
|
||||||
.image {
|
|
||||||
width: 20vw;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid #475569;
|
|
||||||
}
|
|
||||||
#json {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
.results-pdf,
|
|
||||||
.results-notion,
|
|
||||||
.results-html,
|
|
||||||
.results-plugin {
|
|
||||||
text-align: left;
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
.results-markdown,
|
|
||||||
.results-github {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.results-org {
|
|
||||||
text-align: left;
|
|
||||||
/* white-space: pre-line; */
|
|
||||||
}
|
|
||||||
.results-org h3 {
|
|
||||||
margin: 20px 0 0 0;
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
span.org-task-status {
|
|
||||||
color: white;
|
|
||||||
padding: 3.5px 3.5px 0;
|
|
||||||
margin-right: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #eab308;
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
span.org-task-status.todo {
|
|
||||||
background-color: #3b82f6
|
|
||||||
}
|
|
||||||
span.org-task-status.done {
|
|
||||||
background-color: #22c55e;
|
|
||||||
}
|
|
||||||
span.org-task-tag {
|
|
||||||
color: white;
|
|
||||||
padding: 3.5px 3.5px 0;
|
|
||||||
margin-right: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid #475569;
|
|
||||||
background-color: #ef4444;
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
max-width: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #3b82f6;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.avatar {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
div#results-error,
|
|
||||||
div.results-markdown,
|
|
||||||
div.results-notion,
|
|
||||||
div.results-org,
|
|
||||||
div.results-plugin,
|
|
||||||
div.results-html,
|
|
||||||
div.results-pdf {
|
|
||||||
text-align: left;
|
|
||||||
box-shadow: 2px 2px 2px var(--primary-hover);
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 10px 0;
|
|
||||||
border: 4px solid rgb(229, 229, 229);
|
|
||||||
}
|
|
||||||
|
|
||||||
div#results-error {
|
|
||||||
box-shadow: 2px 2px 2px #FF5722;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradient {
|
|
||||||
0% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 100% 50%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.khoj-logo {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,13 +1,261 @@
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
<head>
|
<html lang="en">
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
|
|
||||||
<title>Khoj - Settings</title>
|
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Khoj - Settings</title>
|
||||||
<link rel="icon" type="image/png" sizes="128x128" href="./assets/icons/favicon-128x128.png">
|
<link rel="icon" type="image/png" sizes="128x128" href="./assets/icons/favicon-128x128.png">
|
||||||
<link rel="manifest" href="./khoj.webmanifest">
|
|
||||||
<link rel="stylesheet" href="./assets/khoj.css">
|
<link rel="stylesheet" href="./assets/khoj.css">
|
||||||
</head>
|
<style>
|
||||||
|
:root {
|
||||||
|
--background-color: #f9fafb;
|
||||||
|
--primary-color: hsla(24.6 95% 53.1%);
|
||||||
|
--secondary-color: #f3f4f6;
|
||||||
|
--text-color: #111827;
|
||||||
|
--card-bg: #ffffff;
|
||||||
|
--card-border: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: var(--font-family);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Content */
|
||||||
|
.main-content {
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border: 1px solid var(--card-border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-input {
|
||||||
|
width: -webkit-fill-available;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid var(--card-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-button {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-button:hover {
|
||||||
|
background-color: hsla(24.6 95% 53.1% / 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button:hover {
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-data {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.folder-element,
|
||||||
|
div.file-element {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.file-synced-image {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.remove-button-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: right;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.remove-folder-button,
|
||||||
|
button.remove-file-button {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.remove-folder-button:hover,
|
||||||
|
button.remove-file-button:hover {
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#sync-status {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#big-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#big-actions button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-name:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sync-icon,
|
||||||
|
.clock-icon,
|
||||||
|
.trash-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(90deg,
|
||||||
|
hsla(24.6 95% 53.1% / 0.2) 0%,
|
||||||
|
var(--primary-color) 50%,
|
||||||
|
hsla(24.6 95% 53.1% / 0.2) 100%);
|
||||||
|
border-radius: 2px;
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: loading 1.5s infinite;
|
||||||
|
margin: 10px 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loading {
|
||||||
|
0% {
|
||||||
|
background-position: 200% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: -200% 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-bar[style*="display: none"] {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-bar {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.collapsible {
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border: 1px solid var(--card-border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.collapsible:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.collapsible summary {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.collapsible summary::after {
|
||||||
|
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
|
||||||
|
font-size: 0.8em;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.collapsible[open] summary::after {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
details.collapsible .content {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<script src="./utils.js"></script>
|
<script src="./utils.js"></script>
|
||||||
<script>
|
<script>
|
||||||
window.addEventListener("DOMContentLoaded", async () => {
|
window.addEventListener("DOMContentLoaded", async () => {
|
||||||
|
|
@ -19,358 +267,54 @@
|
||||||
document.getElementById("settings-nav")?.classList.add("khoj-nav-selected");
|
document.getElementById("settings-nav")?.classList.add("khoj-nav-selected");
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!--Add Header Logo and Nav Pane-->
|
<!-- Main Content -->
|
||||||
|
<div class="main-content">
|
||||||
<div id="khoj-header" class="khoj-header"></div>
|
<div id="khoj-header" class="khoj-header"></div>
|
||||||
<div class="section-cards">
|
<div class="section-cards">
|
||||||
<div class="card-description-row">
|
<!-- Replace the server URL and API key cards with: -->
|
||||||
<div class="card configuration">
|
<details class="collapsible">
|
||||||
<div class="card-title-row">
|
<summary>Server URL</summary>
|
||||||
<img class="card-icon" src="./assets/icons/link.svg" alt="Khoj Server URL">
|
<div class="content">
|
||||||
<h3 class="card-title">
|
<input type="text" class="card-input" id="khoj-host-url" placeholder="Enter server URL">
|
||||||
Server URL
|
|
||||||
</h3>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card-description-row">
|
</details>
|
||||||
<input id="khoj-host-url" class="card-input" type="text">
|
|
||||||
|
<details class="collapsible">
|
||||||
|
<summary>API Key</summary>
|
||||||
|
<div class="content">
|
||||||
|
<input type="text" class="card-input" id="khoj-access-key" placeholder="Enter API key">
|
||||||
</div>
|
</div>
|
||||||
<div class="card-title-row">
|
</details>
|
||||||
<img class="card-icon" src="./assets/icons/key.svg" alt="Khoj Access Key">
|
<div class="card">
|
||||||
<h3 class="card-title">
|
<div class="card-title">Files</div>
|
||||||
API Key
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div class="card-description-row">
|
|
||||||
<input id="khoj-access-key" class="card-input" type="text" placeholder="Enter API key to access your Khoj">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-description-row">
|
|
||||||
<div class="card configuration">
|
|
||||||
<div class="card-title-row">
|
|
||||||
<img class="card-icon" src="./assets/icons/plaintext.svg" alt="File">
|
|
||||||
<h3 class="card-title">
|
|
||||||
Files
|
|
||||||
<button id="toggle-files" class="card-button">
|
|
||||||
<svg id="toggle-files-svg" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12l7 7 7-7"></path></svg>
|
|
||||||
</button>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div class="card-description-row">
|
|
||||||
<div id="current-files"></div>
|
<div id="current-files"></div>
|
||||||
|
<button class="secondary-button" id="update-file" title="Add a file to be indexed to your Khoj knowledge base. Will be synced automatically.">Add File</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-action-row">
|
<div class="card">
|
||||||
<button id="update-file" class="card-button">
|
<div class="card-title">Folders</div>
|
||||||
Add
|
|
||||||
<img class="add-files-icon" src="./assets/icons/circular-add.svg" alt="Add">
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-description-row">
|
|
||||||
<div class="card configuration">
|
|
||||||
<div class="card-title-row">
|
|
||||||
<img class="card-icon" src="./assets/icons/folder.svg" alt="Folder">
|
|
||||||
<h3 class="card-title">
|
|
||||||
Folders
|
|
||||||
<button id="toggle-folders" class="card-button">
|
|
||||||
<svg id="toggle-folders-svg" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12l7 7 7-7"></path></svg>
|
|
||||||
</button>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div class="card-description-row">
|
|
||||||
<div id="current-folders"></div>
|
<div id="current-folders"></div>
|
||||||
|
<button class="secondary-button" id="update-folder" title="Add a folder to be indexed to your Khoj knowledge base. All valid files will be synced automatically.">Add Folder</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-action-row">
|
<div class="sync-data">
|
||||||
<button id="update-folder" class="card-button">
|
<div id="loading-bar" style="display: none;"></div>
|
||||||
Add
|
<div id="sync-status"></div>
|
||||||
<img class="add-files-icon" src="./assets/icons/circular-add.svg" alt="Add">
|
<div id="big-actions">
|
||||||
|
<button class="card-button" id="sync-force" title="Delete and re-index all configured files and folders">
|
||||||
|
<img src="./assets/icons/upload.svg" class="sync-icon" alt="Sync">
|
||||||
|
Force Sync
|
||||||
|
</button>
|
||||||
|
<button class="card-button" id="delete-all" title="Remove all indexed content from Khoj">
|
||||||
|
<img src="./assets/icons/trash-solid.svg" class="trash-icon" alt="Delete All">
|
||||||
|
Delete All
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="section-action-row">
|
|
||||||
<div class="card-description-row">
|
|
||||||
<button id="sync-force" class="sync-data">💾 Save</button>
|
|
||||||
</div>
|
|
||||||
<div class="card-description-row">
|
|
||||||
<button id="delete-all" class="sync-data">🗑️ Delete All</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="loading-bar" style="display: none;"></div>
|
|
||||||
<div class="card-description-row">
|
|
||||||
<div id="sync-status"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<style>
|
|
||||||
@media only screen and (max-width: 600px) {
|
|
||||||
body {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: 1fr auto;
|
|
||||||
font-size: small!important;
|
|
||||||
}
|
|
||||||
body > * {
|
|
||||||
grid-column: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width: 600px) {
|
|
||||||
body {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr min(70vw, 100%) 1fr;
|
|
||||||
grid-template-rows: 80px auto;
|
|
||||||
}
|
|
||||||
body > * {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
body, input {
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
background: var(--background-color);
|
|
||||||
color: #475569;
|
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: small;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
body > * {
|
|
||||||
padding: 10px;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
transition: transform 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.khoj-logo {
|
|
||||||
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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-input {
|
|
||||||
padding: 4px;
|
|
||||||
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
|
|
||||||
border: none;
|
|
||||||
width: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
display: grid;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 24px 16px;
|
|
||||||
width: 450px;
|
|
||||||
background: var(--background-color);
|
|
||||||
border: 1px solid rgb(229, 229, 229);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-cards {
|
|
||||||
display: grid;
|
|
||||||
gap: 16px;
|
|
||||||
justify-items: center;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.section-action-row {
|
|
||||||
display: grid;
|
|
||||||
grid-auto-flow: column;
|
|
||||||
gap: 16px;
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-title-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto 1fr;
|
|
||||||
padding: 0;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.card-icon {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
}
|
|
||||||
.add-files-icon {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
.card-title {
|
|
||||||
font-size: medium;
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
.card-title-text {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.card-description {
|
|
||||||
margin: 0;
|
|
||||||
color: grey;
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
.card-button-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.card-button {
|
|
||||||
border: none;
|
|
||||||
font-weight: bold;
|
|
||||||
color: rgb(64,64,64);
|
|
||||||
background: transparent;
|
|
||||||
font-size: small;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
height: 32px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.primary-button {
|
|
||||||
border: none;
|
|
||||||
color: var(--background-color);
|
|
||||||
padding: 15px 32px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.card-button.disabled {
|
|
||||||
color: var(--flower);
|
|
||||||
background: transparent;
|
|
||||||
font-size: small;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
height: 32px;
|
|
||||||
text-align: right;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.card-button.happy {
|
|
||||||
color: var(--leaf);
|
|
||||||
}
|
|
||||||
|
|
||||||
img.configured-icon {
|
|
||||||
max-width: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.card-action-row.enabled{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.configured-icon.enabled {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.card-action-row.disabled,
|
|
||||||
img.configured-icon.disabled {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.file-element,
|
|
||||||
div.folder-element {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto 1fr;
|
|
||||||
border: 1px solid rgb(229, 229, 229);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.8);
|
|
||||||
padding: 4px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content-name {
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
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,
|
|
||||||
button.remove-file-button {
|
|
||||||
background-color: rgb(253 214 214);
|
|
||||||
border-radius: 3px;
|
|
||||||
border: none;
|
|
||||||
color: var(--flower);
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.remove-folder-button:hover,
|
|
||||||
button.remove-file-button:hover {
|
|
||||||
background-color: rgb(255 235 235);
|
|
||||||
border-radius: 3px;
|
|
||||||
border: none;
|
|
||||||
color: var(--flower);
|
|
||||||
padding: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
button.sync-data {
|
|
||||||
background-color: var(--primary-hover);
|
|
||||||
border: none;
|
|
||||||
color: var(--main-text-color);
|
|
||||||
padding: 12px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
box-shadow: 0px 5px 0px var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
button.sync-data:hover {
|
|
||||||
background-color: var(--summer-sun);
|
|
||||||
box-shadow: 0px 3px 0px var(--background-color);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.sync-force-toggle {
|
|
||||||
align-content: center;
|
|
||||||
display: grid;
|
|
||||||
grid-auto-flow: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="./renderer.js"></script>
|
<script src="./renderer.js"></script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -56,11 +56,10 @@ async function populateHeaderPane() {
|
||||||
// Populate the header element with the navigation pane
|
// Populate the header element with the navigation pane
|
||||||
return `
|
return `
|
||||||
<a class="khoj-logo" href="/">
|
<a class="khoj-logo" href="/">
|
||||||
<img class="khoj-logo" src="./assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
|
<img class="khoj-logo" src="./assets/icons/khoj_logo.png" alt="Khoj"></img>
|
||||||
</a>
|
</a>
|
||||||
<nav class="khoj-nav">
|
<nav class="khoj-nav">
|
||||||
${
|
${userInfo && userInfo.email
|
||||||
userInfo && userInfo.email
|
|
||||||
? `<div class="khoj-status-box">
|
? `<div class="khoj-status-box">
|
||||||
<span class="khoj-status-connected"></span>
|
<span class="khoj-status-connected"></span>
|
||||||
<span class="khoj-status-text">Connected to server</span>
|
<span class="khoj-status-text">Connected to server</span>
|
||||||
|
|
@ -70,11 +69,6 @@ async function populateHeaderPane() {
|
||||||
<span class="khoj-status-text">Not connected to server</span>
|
<span class="khoj-status-text">Not connected to server</span>
|
||||||
</div>`
|
</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>
|
|
||||||
</a>
|
|
||||||
${has_documents ? '<a id="search-nav" class="khoj-nav" href="./search.html"><img class="nav-icon" src="./assets/icons/search.svg" alt="Search"> <span class="khoj-nav-item-text">Search</span></a>' : ''}
|
|
||||||
${username ? `
|
${username ? `
|
||||||
<div id="khoj-nav-menu-container" class="khoj-nav dropdown">
|
<div id="khoj-nav-menu-container" class="khoj-nav dropdown">
|
||||||
${user_photo && user_photo != "None" ? `
|
${user_photo && user_photo != "None" ? `
|
||||||
|
|
@ -84,7 +78,10 @@ async function populateHeaderPane() {
|
||||||
`}
|
`}
|
||||||
<div id="khoj-nav-menu" class="khoj-nav-dropdown-content">
|
<div id="khoj-nav-menu" class="khoj-nav-dropdown-content">
|
||||||
<div class="khoj-nav-username"> ${username} </div>
|
<div class="khoj-nav-username"> ${username} </div>
|
||||||
<a id="settings-nav" class="khoj-nav" href="./settings.html">⚙️ Settings</a>
|
<a onclick="window.navigateAPI.navigateToWebHome()" class="khoj-nav-link">
|
||||||
|
<img class="khoj-nav-icon" src="./assets/icons/open-link.svg" alt="Open Host Url"></img>
|
||||||
|
Open App
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
` : ''}
|
` : ''}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue