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

Improve spacing, colors of chat message references and buttons

Browse Source 
Works better with dark modes. References have more spacing and adhere
to background color of the chat message itself
This commit is contained in:
Debanjum Singh Solanky
2024-05-07 16:05:50 -07:00
parent bd4931e70b
commit afcd22d30c
2 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/interface/obsidian/styles.css
View File

@@ -155,14 +155,14 @@ div.expanded.reference-section {
grid-auto-flow: row; grid-auto-flow: row;
grid-column-gap: 10px; grid-column-gap: 10px;
grid-row-gap: 10px; grid-row-gap: 10px;
margin: 10px; margin: 10px 0;
} }
button.reference-button { button.reference-button {
background: var(--color-base-00); background: var(--khoj-winter-sun);
color: var(--color-base-100); color: var(--khoj-storm-grey);
border: 1px solid var(--khoj-storm-grey); border: 1px solid var(--khoj-storm-grey);
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 4px;
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
line-height: 1.5em; line-height: 1.5em;
@@ -192,11 +192,12 @@ button.reference-button[aria-expanded="true"]::before {
transform: rotate(90deg); transform: rotate(90deg);
} }
button.reference-expand-button { button.reference-expand-button {
background: var(--color-base-00); background: var(--khoj-winter-sun);
color: var(--color-base-100); color: var(--khoj-storm-grey);
border: 1px solid var(--khoj-storm-grey); border: 1px solid var(--khoj-storm-grey);
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 8px;
margin-top: 8px;
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
line-height: 1.5em; line-height: 1.5em;
@@ -206,7 +207,7 @@ button.reference-expand-button {
} }
button.reference-expand-button:hover { button.reference-expand-button:hover {
background: var(--khoj-sun); background: var(--khoj-sun);
color: var(--color-base-00); color: var(--khoj-storm-grey);
} }
a.inline-chat-link { a.inline-chat-link {
color: #475569; color: #475569;
@@ -426,6 +427,7 @@ button.copy-button {
transition: all 0.5s; transition: all 0.5s;
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
margin-top: 8px;
float: right; float: right;
} }
button.copy-button span { button.copy-button span {

10
src/khoj/interface/web/chat.html
View File

@@ -355,7 +355,7 @@ To get started, just start typing below. You can also type / to see a list of co
// Replace LaTeX delimiters with placeholders // Replace LaTeX delimiters with placeholders
newHTML = newHTML.replace(/\\\(/g, 'LEFTPAREN').replace(/\\\)/g, 'RIGHTPAREN') newHTML = newHTML.replace(/\\\(/g, 'LEFTPAREN').replace(/\\\)/g, 'RIGHTPAREN')
.replace(/\\\[/g, 'LEFTBRACKET').replace(/\\\]/g, 'RIGHTBRACKET'); .replace(/\\\[/g, 'LEFTBRACKET').replace(/\\\]/g, 'RIGHTBRACKET');
// Remove any text between <s>[INST] and </s> tags. These are spurious instructions for the AI chat model. // Remove any text between <s>[INST] and </s> tags. These are spurious instructions for the AI chat model.
newHTML = newHTML.replace(/<s>\[INST\].+(<\/s>)?/g, ''); newHTML = newHTML.replace(/<s>\[INST\].+(<\/s>)?/g, '');
@@ -376,7 +376,7 @@ To get started, just start typing below. You can also type / to see a list of co
// Replace placeholders with LaTeX delimiters // Replace placeholders with LaTeX delimiters
newHTML = newHTML.replace(/LEFTPAREN/g, '\\(').replace(/RIGHTPAREN/g, '\\)') newHTML = newHTML.replace(/LEFTPAREN/g, '\\(').replace(/RIGHTPAREN/g, '\\)')
.replace(/LEFTBRACKET/g, '\\[').replace(/RIGHTBRACKET/g, '\\]'); .replace(/LEFTBRACKET/g, '\\[').replace(/RIGHTBRACKET/g, '\\]');
// Set rendered markdown to HTML DOM element // Set rendered markdown to HTML DOM element
let element = document.createElement('div'); let element = document.createElement('div');
@@ -1039,11 +1039,7 @@ To get started, just start typing below. You can also type / to see a list of co
} }
} }
function sendMessageViaWebSocket(event) { function sendMessageViaWebSocket() {
if (event) {
event.preventDefault();
}
let chatBody = document.getElementById("chat-body"); let chatBody = document.getElementById("chat-body");
var query = document.getElementById("chat-input").value.trim(); var query = document.getElementById("chat-input").value.trim();