Improve markdown to html rendering

Mozilla-Ocho · Nov 9, 2024 · fa1c98f · fa1c98f
1 parent fb4b3e6
commit fa1c98f
Show file tree

Hide file tree

Showing 9 changed files with 436 additions and 70 deletions.
diff --git a/llamafile/server/www/chatbot.css b/llamafile/server/www/chatbot.css
@@ -49,6 +49,37 @@ p {
   padding: 1rem;
 }
 
+ol,
+ul {
+  margin: 0.5rem 0;
+  padding-left: 2rem;
+}
+
+ol li,
+ul li {
+  padding: 0.25rem 0;
+  margin: 0;
+}
+
+ol li::marker {
+  color: #666;
+  font-weight: 500;
+}
+
+ul li::marker {
+  color: #666;
+}
+
+ol li:last-child,
+ul li:last-child {
+  padding-bottom: 0;
+}
+
+ol li:first-child,
+ul li:first-child {
+  padding-top: 0;
+}
+
 .message {
   margin-bottom: 1rem;
   padding: 0.75rem;
@@ -86,6 +117,40 @@ p {
   border-radius: 6px;
   font-size: 1rem;
   outline: none;
+  resize: none;
+  max-height: 200px;
+  min-height: 44px;
+  line-height: 1.5;
+  font-family: inherit;
+  overflow-y: auto;
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: #cbd5e1 transparent; /* Firefox */
+}
+
+/* Chrome, Edge, and Safari */
+.chat-input::-webkit-scrollbar {
+  width: 8px;
+  background: transparent;
+}
+
+.chat-input::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-input::-webkit-scrollbar-thumb {
+  background-color: #cbd5e1;
+  border-radius: 20px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+/* Only show scrollbar when needed */
+.chat-input::-webkit-scrollbar-thumb:vertical {
+  min-height: 30px;
+}
+
+.chat-input:not(:hover)::-webkit-scrollbar-thumb {
+  background-color: transparent;
 }
 
 .chat-input:focus {

diff --git a/llamafile/server/www/chatbot.js b/llamafile/server/www/chatbot.js
@@ -19,7 +19,7 @@ const chatMessages = document.getElementById("chat-messages");
 const chatInput = document.getElementById("chat-input");
 const sendButton = document.getElementById("send-button");
 const typingIndicator = document.getElementById("typing-indicator");
-const stopButton = document.getElementById('stop-button');
+const stopButton = document.getElementById("stop-button");
 
 let abortController = null;
 let streamingMessageContent = [];
@@ -51,12 +51,17 @@ function setTypingIndicatorVisibility(visible) {
   typingIndicator.style.display = visible ? "flex" : "none";
 }
 
+function onChatInput() {
+  chatInput.style.height = "auto";  // computes scrollHeight
+  chatInput.style.height = Math.min(chatInput.scrollHeight, 200) + "px";
+}
+
 function cleanupAfterMessage() {
   setTypingIndicatorVisibility(false);
   chatMessages.scrollTop = chatMessages.scrollHeight;
   chatInput.disabled = false;
-  sendButton.style.display = 'inline-block';
-  stopButton.style.display = 'none';
+  sendButton.style.display = "inline-block";
+  stopButton.style.display = "none";
   abortController = null;
   chatInput.focus();
 }
@@ -102,7 +107,7 @@ async function handleChatStream(response) {
       buffer = lines[lines.length - 1];
     }
   } catch (error) {
-    if (error.name !== 'AbortError') {
+    if (error.name !== "AbortError") {
       console.error("Error reading stream:", error);
     }
   } finally {
@@ -125,7 +130,8 @@ async function sendMessage() {
   // disable input while processing
   chatInput.value = "";
   chatInput.disabled = true;
-  sendButton.style.display = 'none';
+  onChatInput();
+  sendButton.style.display = "none";
   stopButton.style.display = "inline-block";
   stopButton.focus();
   abortController = new AbortController();
@@ -164,11 +170,11 @@ async function sendMessage() {
     await handleChatStream(response);
 
     // update chat history with response
-    const lastMessage = streamingMessageContent.join('');
+    const lastMessage = streamingMessageContent.join("");
     chatHistory.push({ role: "assistant", content: lastMessage });
 
   } catch (error) {
-    if (error.name !== 'AbortError') {
+    if (error.name !== "AbortError") {
       console.error("Error:", error);
       const errorMessage = createMessageElement(
         "Sorry, there was an error processing your request.",
@@ -189,7 +195,8 @@ for (let i = 0; i < chatHistory.length; i++) {
 // setup events
 sendButton.addEventListener("click", sendMessage);
 stopButton.addEventListener("click", stopMessage);
-chatInput.addEventListener("keypress", (e) => {
+chatInput.addEventListener("input", onChatInput);
+chatInput.addEventListener("keydown", function(e) {
   if (e.key === "Enter" && !e.shiftKey) {
     e.preventDefault();
     sendMessage();

diff --git a/llamafile/server/www/highlight.js b/llamafile/server/www/highlight.js
@@ -45,32 +45,18 @@ class HighlightDom extends Highlight {
 
   feed(s) {
     for (let i = 0; i < s.length; ++i) {
-      if (s[i] == '\n') {
-        let classes = [];
+      this.text += s[i];
+      if (isspace(s[i])) {
         this.flushText();
-        while (this.currentElement.tagName == 'SPAN') {
-          classes.push([this.currentElement.tagName,
-                        this.currentElement.className]);
-          this.currentElement = this.currentElement.parentNode;
-        }
-        this.currentElement.appendChild(document.createElement('br'));
-        while (classes.length) {
-          let c = classes.pop();
-          this.push(c[0], c[1]);
-        }
-      } else {
-        this.text += s[i];
-        if (isspace(s[i])) {
-          this.flushText();
-        }
       }
     }
   }
 
   push(tagName, className) {
     this.flushText();
     const elem = document.createElement(tagName);
-    elem.className = className;
+    if (className)
+      elem.className = className;
     this.currentElement.appendChild(elem);
     this.currentElement = elem;
     return elem;