From 8a219b6e9c9ac7c5021ee3dd613ea7f57913cc11 Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Wed, 21 Feb 2024 19:27:52 +0530 Subject: [PATCH] Improve styling of chat message bubble in Desktop, Web app - 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 --- src/interface/desktop/assets/khoj.css | 2 +- src/interface/desktop/chat.html | 17 +++++++++++++++-- src/khoj/interface/web/assets/khoj.css | 2 +- src/khoj/interface/web/chat.html | 17 +++++++++++++++-- 4 files changed, 32 insertions(+), 6 deletions(-) diff --git a/src/interface/desktop/assets/khoj.css b/src/interface/desktop/assets/khoj.css index b8157bcc..c2a7d367 100644 --- a/src/interface/desktop/assets/khoj.css +++ b/src/interface/desktop/assets/khoj.css @@ -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"]) { diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html index d404a517..1611aa63 100644 --- a/src/interface/desktop/chat.html +++ b/src/interface/desktop/chat.html @@ -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; diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css index 0aa11d78..4ee3bf24 100644 --- a/src/khoj/interface/web/assets/khoj.css +++ b/src/khoj/interface/web/assets/khoj.css @@ -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"]) { diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html index c83be7f1..a942541a 100644 --- a/src/khoj/interface/web/chat.html +++ b/src/khoj/interface/web/chat.html @@ -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;