From afcd22d30c1b6b9e07b886d907812e24ef865029 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Tue, 7 May 2024 16:05:50 -0700
Subject: [PATCH] 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
---
 src/interface/obsidian/styles.css | 18 ++++++++++--------
 src/khoj/interface/web/chat.html  | 10 +++-------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css
index e98dd753..7b7b71d0 100644
--- a/src/interface/obsidian/styles.css
+++ b/src/interface/obsidian/styles.css
@@ -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 {
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index bcffc254..ae6d9b9b 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -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();