sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-27 17:35:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve styling of chat message bubble in Desktop, Web app

Browse source 
- Respect newline with pre-line but not for bullets to improve
  formatting of responses by Khoj
- Respect bold font by loading tajawal font with other weights
- Reduce bottom margin in chat message bubble, its taking too much space
This commit is contained in:
Debanjum Singh Solanky 2024-02-21 19:27:52 +05:30
parent 57dce91c91
commit 8a219b6e9c
4 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/interface/desktop/assets/khoj.css
View file

@ -1,6 +1,6 @@
/* Amber Light scheme (Default) */
/* Can be forced with data-theme="light" */
@import url('https://fonts.googleapis.com/css2?family=Tajawal&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;500;700&display=swap');
[data-theme="light"],
:root:not([data-theme="dark"]) {

17
src/interface/desktop/chat.html
View file

@ -133,7 +133,6 @@
let message_time = formatDate(dt ?? new Date());
let by_name = by == "khoj" ? "🏮 Khoj" : "🤔 You";
let formattedMessage = formatHTMLMessage(message, raw);
let chatBody = document.getElementById("chat-body");
// Create a new div for the chat message
let chatMessage = document.createElement('div');
@ -152,6 +151,7 @@
}
// Append chat message div to chat body
let chatBody = document.getElementById("chat-body");
chatBody.appendChild(chatMessage);
// Scroll to bottom of chat-body element
@ -285,9 +285,12 @@
// Render markdown
newHTML = raw ? newHTML : md.render(newHTML);
// Get any elements with a class that starts with "language"
// Set rendered markdown to HTML DOM element
let element = document.createElement('div');
element.innerHTML = newHTML;
element.className = "chat-message-text-response";
// Get any elements with a class that starts with "language"
let codeBlockElements = element.querySelectorAll('[class^="language-"]');
// For each element, add a parent div with the class "programmatic-output"
codeBlockElements.forEach((codeElement) => {
@ -1227,6 +1230,7 @@
display: inline-block;
max-width: 80%;
text-align: left;
white-space: pre-line;
}
/* color chat bubble by khoj blue */
.chat-message-text.khoj {
@ -1234,6 +1238,15 @@
background: var(--primary);
margin-left: auto;
}
.chat-message-text ol,
.chat-message-text ul {
white-space: normal;
margin: 0;
}
.chat-message-text-response {
margin-bottom: -16px;
}
/* Spinner symbol when the chat message is loading */
.spinner {
border: 4px solid #f3f3f3;

2
src/khoj/interface/web/assets/khoj.css
View file

@ -1,6 +1,6 @@
/* Amber Light scheme (Default) */
/* Can be forced with data-theme="light" */
@import url('https://fonts.googleapis.com/css2?family=Tajawal&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;500;700&display=swap');
[data-theme="light"],
:root:not([data-theme="dark"]) {

17
src/khoj/interface/web/chat.html
View file

@ -145,7 +145,6 @@ To get started, just start typing below. You can also type / to see a list of co
let message_time = formatDate(dt ?? new Date());
let by_name = by == "khoj" ? "🏮 Khoj" : "🤔 You";
let formattedMessage = formatHTMLMessage(message, raw);
let chatBody = document.getElementById("chat-body");
// Create a new div for the chat message
let chatMessage = document.createElement('div');
@ -164,6 +163,7 @@ To get started, just start typing below. You can also type / to see a list of co
}
// Append chat message div to chat body
let chatBody = document.getElementById("chat-body");
chatBody.appendChild(chatMessage);
// Scroll to bottom of chat-body element
@ -297,9 +297,12 @@ To get started, just start typing below. You can also type / to see a list of co
// Render markdown
newHTML = raw ? newHTML : md.render(newHTML);
// Get any elements with a class that starts with "language"
// Set rendered markdown to HTML DOM element
let element = document.createElement('div');
element.innerHTML = newHTML;
element.className = "chat-message-text-response";
// Get any elements with a class that starts with "language"
let codeBlockElements = element.querySelectorAll('[class^="language-"]');
// For each element, add a parent div with the class "programmatic-output"
codeBlockElements.forEach((codeElement) => {
@ -1291,6 +1294,7 @@ To get started, just start typing below. You can also type / to see a list of co
display: inline-block;
max-width: 80%;
text-align: left;
white-space: pre-line;
}
/* color chat bubble by khoj blue */
.chat-message-text.khoj {
@ -1298,6 +1302,15 @@ To get started, just start typing below. You can also type / to see a list of co
background: var(--primary);
margin-left: auto;
}
.chat-message-text ol,
.chat-message-text ul {
white-space: normal;
margin: 0;
}
.chat-message-text-response {
margin-bottom: -16px;
}
/* Spinner symbol when the chat message is loading */
.spinner {
border: 4px solid #f3f3f3;