Improve spacing, colors of chat message references and buttons

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

View File

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

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
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.
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
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
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) {
if (event) {
event.preventDefault();
}
function sendMessageViaWebSocket() {
let chatBody = document.getElementById("chat-body");
var query = document.getElementById("chat-input").value.trim();