From 836a868abcca409eb9c7f8539dad1b8942b204c2 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Thu, 19 Dec 2024 12:21:28 -0800 Subject: [PATCH 01/15] UI: improve the heading fonts --- css/html_instruct_style.css | 19 ++++-------- css/main.css | 58 +++++++++++++++++++++++++++++++++---- 2 files changed, 58 insertions(+), 19 deletions(-) diff --git a/css/html_instruct_style.css b/css/html_instruct_style.css index f6ceb932..5591f7d1 100644 --- a/css/html_instruct_style.css +++ b/css/html_instruct_style.css @@ -17,28 +17,19 @@ line-height: 28px !important; } -.dark .chat .message-body p, -.dark .chat .message-body li, -.dark .chat .message-body q { +.dark .chat .message-body :is(p, li, q, h1, h2, h3, h4, h5, h6) { color: #d1d5db !important; } -.chat .message-body p, -.chat .message-body ul, -.chat .message-body ol { - margin-top: 1.25em !important; - margin-bottom: 1.25em !important; +.chat .message-body :is(p, ul, ol) { + margin: 1.25em 0 !important; } -.chat .message-body p:first-child, -.chat .message-body ul:first-child, -.chat .message-body ol:first-child { +.chat .message-body :is(p, ul, ol):first-child { margin-top: 0 !important; } -.chat .message-body p:last-child, -.chat .message-body ul:last-child, -.chat .message-body ol:last-child { +.chat .message-body :is(p, ul, ol):last-child { margin-bottom: 0 !important; } diff --git a/css/main.css b/css/main.css index fef3d3f1..7b3910f9 100644 --- a/css/main.css +++ b/css/main.css @@ -433,12 +433,60 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { padding-top: 20px; } -.message-body h1, -.message-body h2, -.message-body h3, +.message-body { + font-size: 16px; +} + +.message-body :is(h1, h2, h3, h4, h5, h6) { + color: black !important; +} + +.dark .message-body :is(h1, h2, h3, h4, h5, h6) { + color: white !important; +} + +.message-body h1 { + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; +} + +.message-body h2 { + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; +} + +.message-body h3 { + font-weight: 600; + font-size: 1.25em; + margin-top: 0; + margin-bottom: 0.6em; + line-height: 1.6; +} + .message-body h4 { - color: var(--body-text-color); - margin: 20px 0 10px; + font-weight: 600; + font-size: 1em; + margin-top: 0; + margin-bottom: 0.5em; + line-height: 1.5; +} + +.message-body h5 { + font-weight: normal; + font-size: 1em; + margin: 0; +} + +.message-body h6 { + font-weight: normal; + font-size: 1em; + margin: 0; } .dark .message q { From 24a4c98d42a60283df1bc7e583604be222de4626 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Thu, 19 Dec 2024 12:23:03 -0800 Subject: [PATCH 02/15] UI: improve the style of links in messages --- css/main.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/main.css b/css/main.css index 7b3910f9..637dbae5 100644 --- a/css/main.css +++ b/css/main.css @@ -501,6 +501,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { list-style-position: outside; } +.message-body a { + font-weight: 500; +} + .chat .message-body ul, .chat .message-body ol { padding-inline-start: 2em; } From c8ddb86c22e8c8a2b56d161e4acf311c79fb1c17 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Thu, 19 Dec 2024 12:23:21 -0800 Subject: [PATCH 03/15] UI: improve some light mode colors --- css/html_instruct_style.css | 2 +- css/main.css | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/css/html_instruct_style.css b/css/html_instruct_style.css index 5591f7d1..14fd919d 100644 --- a/css/html_instruct_style.css +++ b/css/html_instruct_style.css @@ -51,13 +51,13 @@ } .chat .user-message { + background: #f4f4f4; padding: 1.5rem 1rem; border-radius: 0; border-bottom-right-radius: 0; } .chat .assistant-message { - background: #f4f4f4; padding: 1.5rem 1rem; border-radius: 0; border: 0; diff --git a/css/main.css b/css/main.css index 637dbae5..ec118911 100644 --- a/css/main.css +++ b/css/main.css @@ -437,10 +437,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { font-size: 16px; } -.message-body :is(h1, h2, h3, h4, h5, h6) { - color: black !important; -} - .dark .message-body :is(h1, h2, h3, h4, h5, h6) { color: white !important; } 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 04/15] 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