From b6fff15b061a1d692fc2b4f7811f72e746c25efc Mon Sep 17 00:00:00 2001
From: Andrew Risse <52644157+andrewrisse@users.noreply.github.com>
Date: Mon, 30 Sep 2024 08:18:49 -0600
Subject: [PATCH] fix(ui): bullets item styling

---
 src/leapfrogai_ui/src/app.css                  | 11 +++++++++++
 .../src/lib/components/Message.svelte          | 18 ++++++++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/leapfrogai_ui/src/app.css b/src/leapfrogai_ui/src/app.css
index b1f6ef61b..1afa8ffdd 100644
--- a/src/leapfrogai_ui/src/app.css
+++ b/src/leapfrogai_ui/src/app.css
@@ -9,6 +9,17 @@
   scrollbar-color: #4b5563 #1f2937;
 }
 
+/* Override TailwindCSS default Preflight styles for lists in messages */
+#message-content-container {
+  ul {
+    margin: revert;
+    padding: revert;
+    li {
+      list-style: square;
+    }
+  }
+}
+
 /*TODO - can we get rid of some of these?*/
 @layer utilities {
   .content {
diff --git a/src/leapfrogai_ui/src/lib/components/Message.svelte b/src/leapfrogai_ui/src/lib/components/Message.svelte
index 0af165b1f..d59a5e448 100644
--- a/src/leapfrogai_ui/src/lib/components/Message.svelte
+++ b/src/leapfrogai_ui/src/lib/components/Message.svelte
@@ -178,14 +178,16 @@
             {#if message.role !== 'user' && !messageText}
               <MessagePendingSkeleton size="sm" class="mt-4" darkColor="bg-gray-500" />
             {:else}
-              <!--eslint-disable-next-line svelte/no-at-html-tags -- We use DomPurity to sanitize the code snippet-->
-              {@html DOMPurify.sanitize(md.render(messageText), {
-                CUSTOM_ELEMENT_HANDLING: {
-                  tagNameCheck: /^code-block$/,
-                  attributeNameCheck: /^(code|language)$/,
-                  allowCustomizedBuiltInElements: false
-                }
-              })}
+              <div id="message-content-container">
+                <!--eslint-disable-next-line svelte/no-at-html-tags -- We use DomPurity to sanitize the code snippet-->
+                {@html DOMPurify.sanitize(md.render(messageText), {
+                  CUSTOM_ELEMENT_HANDLING: {
+                    tagNameCheck: /^code-block$/,
+                    attributeNameCheck: /^(code|language)$/,
+                    allowCustomizedBuiltInElements: false
+                  }
+                })}
+              </div>
               <div class="flex flex-col items-start">
                 {#each getCitations(message, $page.data.files) as { component: Component, props }}
                   <svelte:component this={Component} {...props} />