Merge branch 'main' into 1050-featuds-add-uds-badge-task-and-workflow

defenseunicorns · Sep 30, 2024 · 4ea8b75 · 4ea8b75
2 parents 2119cf6 + b6fff15
commit 4ea8b75
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git 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
@@ -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} />