Message bubble text formatting improvements.

Adjusted formatted of text to not end up with as much extra padding around the edge of the message bubble.

also updated formatting logic to replace newlines with <br> tags for better readability. Except for when within a <li> or <ul> element.

Author: TannerMidd

src/components/conversations-dialog.vue

@@ -234,7 +234,7 @@ $icon-color: rgb(187, 187, 187);
 
     .new-conversation-option {
         text-align: left;
-        background-color: #0B302E;
+        background-color: #0d3937;
         color: #FFFFFF;
         font-weight: bold;
         border-radius: 5px;
@@ -245,7 +245,7 @@ $icon-color: rgb(187, 187, 187);
         position: relative;
 
         &:hover {
-            background-color: #082625;
+            background-color: #104745;
         }
 
         .new-icon {
@@ -272,7 +272,7 @@ $icon-color: rgb(187, 187, 187);
         user-select: none;
 
         &:hover {
-            background-color: #251e1e;
+            background-color: #114335;
         }
 
         &.selected {
@@ -288,7 +288,6 @@ $icon-color: rgb(187, 187, 187);
             display: inline-block;
             margin-right: 10px;
             color: #4cae4c; // Green color for the checkmark
-
         }
 
         @keyframes pulse {
@@ -303,7 +302,7 @@ $icon-color: rgb(187, 187, 187);
             }
 
             100% {
-                background-color: #07302e;
+                background-color: #324343;
                 transform: scale(1);
             }
         }

src/components/message-item.vue

@@ -30,9 +30,17 @@ const md = MarkdownIt({
 });
 
 function formatMessage(content) {
-    let renderedMessage = wrapCodeSnippets(content);
+    let renderedMessage = md.render(content);
 
-    renderedMessage = md.render(content);
+    // Replace newlines inside <ul> and <li> tags with spaces
+    renderedMessage = renderedMessage.replace(/<(ul|li)>\s*\n/g, '<$1> ');
+    renderedMessage = renderedMessage.replace(/\n\s*<\/(ul|li)>/g, ' </$1>');
+
+    // Replace newlines with <br>
+    renderedMessage = renderedMessage.replace(/\n/g, '<br>');
+
+    // Remove first and last <br>
+    renderedMessage = renderedMessage.replace(/^<br\s*\/?>|<br\s*\/?>\s*$/g, '');
 
     return renderedMessage;
 }
@@ -42,8 +50,6 @@ function messageClass(role) {
     return role === 'user' ? 'user message' : 'gpt message';
 };
 
-
-
 function copyText(text) {
     const textarea = document.createElement('textarea');
     textarea.value = text.content;