From e2fb86e5df464b671984762e2445108b15c9145c Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Thu, 19 Dec 2024 13:42:17 -0800
Subject: [PATCH] UI: further improve the style of lists and headings

---
 css/html_instruct_style.css |  5 ----
 css/main.css                | 30 ++++++++++-------------
 modules/html_generator.py   | 49 +++++++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/css/html_instruct_style.css b/css/html_instruct_style.css
index 14fd919d..7f74bf88 100644
--- a/css/html_instruct_style.css
+++ b/css/html_instruct_style.css
@@ -33,11 +33,6 @@
     margin-bottom: 0 !important;
 }
 
-.chat .message-body li {
-    margin-top: 1.25em !important;
-    margin-bottom: 1.25em !important;
-}
-
 .user-message, .assistant-message {
     font-family: Inter, Helvetica, Arial, sans-serif;
 }
diff --git a/css/main.css b/css/main.css
index ec118911..2ea7b960 100644
--- a/css/main.css
+++ b/css/main.css
@@ -460,7 +460,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 .message-body h3 {
     font-weight: 600;
     font-size: 1.25em;
-    margin-top: 0;
+    margin-top: 1.6em;
     margin-bottom: 0.6em;
     line-height: 1.6;
 }
@@ -468,7 +468,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 .message-body h4 {
     font-weight: 600;
     font-size: 1em;
-    margin-top: 0;
+    margin-top: 1.5em;
     margin-bottom: 0.5em;
     line-height: 1.5;
 }
@@ -495,6 +495,14 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 
 .message-body li {
     list-style-position: outside;
+    margin-top: 0.5em !important;
+    margin-bottom: 0.5em !important;
+}
+
+.message-body ul.long-list li,
+.message-body ol.long-list li {
+    margin-top: 1.25em !important;
+    margin-bottom: 1.25em !important;
 }
 
 .message-body a {
@@ -505,23 +513,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     padding-inline-start: 2em;
 }
 
-.chat .message-body li:not(:last-child) {
-    margin-top: 0;
-    margin-bottom: 2px;
-}
-
-.chat .message-body li:last-child {
-    margin-bottom: 0 !important;
-}
-
 .message-body li > p {
     display: inline !important;
 }
 
-.message-body ul, .message-body ol {
-    font-size: 15px !important;
-}
-
 .message-body ul {
     list-style-type: disc !important;
 }
@@ -834,8 +829,9 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     padding-bottom: 80px !important;
 }
 
-.chat ol, .chat ul {
-    margin-top: 6px !important;
+.message-body ol, .message-body ul {
+    margin-top: 0 !important;
+    margin-bottom: 1.25em !important;
 }
 
 /* ----------------------------------------------
diff --git a/modules/html_generator.py b/modules/html_generator.py
index 01b20866..57eac1b1 100644
--- a/modules/html_generator.py
+++ b/modules/html_generator.py
@@ -69,6 +69,52 @@ def replace_blockquote(m):
     return m.group().replace('\n', '\n> ').replace('\\begin{blockquote}', '').replace('\\end{blockquote}', '')
 
 
+def add_long_list_class(html):
+    '''
+    Adds a long-list class to <ul> or <ol> containing long <li> items.
+    These will receive a smaller margin/padding in the CSS.
+    '''
+
+    # Helper function to check if a tag is within <pre> or <code>
+    def is_within_block(start_idx, end_idx, block_matches):
+        return any(start < start_idx < end or start < end_idx < end for start, end in block_matches)
+
+    # Find all <pre>...</pre> and <code>...</code> blocks
+    pre_blocks = [(m.start(), m.end()) for m in re.finditer(r'<pre.*?>.*?</pre>', html, re.DOTALL)]
+    code_blocks = [(m.start(), m.end()) for m in re.finditer(r'<code.*?>.*?</code>', html, re.DOTALL)]
+    all_blocks = pre_blocks + code_blocks
+
+    # Pattern to find <ul>...</ul> and <ol>...</ol> blocks and their contents
+    list_pattern = re.compile(r'(<[uo]l.*?>)(.*?)(</[uo]l>)', re.DOTALL)
+    li_pattern = re.compile(r'<li.*?>(.*?)</li>', re.DOTALL)
+
+    def process_list(match):
+        start_idx, end_idx = match.span()
+        if is_within_block(start_idx, end_idx, all_blocks):
+            return match.group(0)  # Leave the block unchanged if within <pre> or <code>
+
+        opening_tag = match.group(1)
+        list_content = match.group(2)
+        closing_tag = match.group(3)
+
+        # Find all list items within this list
+        li_matches = li_pattern.finditer(list_content)
+        has_long_item = any(len(li_match.group(1).strip()) > 128 for li_match in li_matches)
+
+        if has_long_item:
+            # Add class="long-list" to the opening tag if it doesn't already have a class
+            if 'class=' not in opening_tag:
+                opening_tag = opening_tag[:-1] + ' class="long-list">'
+            else:
+                # If there's already a class, append long-list to it
+                opening_tag = re.sub(r'class="([^"]*)"', r'class="\1 long-list"', opening_tag)
+
+        return opening_tag + list_content + closing_tag
+
+    # Process HTML and replace list blocks
+    return list_pattern.sub(process_list, html)
+
+
 @functools.lru_cache(maxsize=None)
 def convert_to_markdown(string):
 
@@ -168,6 +214,9 @@ def convert_to_markdown(string):
     pattern = re.compile(r'<code[^>]*>(.*?)</code>', re.DOTALL)
     html_output = pattern.sub(lambda x: html.unescape(x.group()), html_output)
 
+    # Add "long-list" class to <ul> or <ol> containing a long <li> item
+    html_output = add_long_list_class(html_output)
+
     return html_output