From 879fa3d8c43ad1fab8bbb407a5ab6c8aa44aefc0 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Sat, 14 Jun 2025 07:14:22 -0700 Subject: [PATCH] Improve the wpp style & simplify the code --- css/chat_style-wpp.css | 96 +++++++++++++++++++++++++++++---------- modules/html_generator.py | 60 ------------------------ 2 files changed, 71 insertions(+), 85 deletions(-) diff --git a/css/chat_style-wpp.css b/css/chat_style-wpp.css index 353201c2..8ff82c6c 100644 --- a/css/chat_style-wpp.css +++ b/css/chat_style-wpp.css @@ -1,57 +1,103 @@ .message { - padding-bottom: 22px; - padding-top: 3px; + display: block; + padding-top: 0; + padding-bottom: 21px; font-size: 15px; font-family: 'Noto Sans', Helvetica, Arial, sans-serif; line-height: 1.428571429; + grid-template-columns: none; } -.text-you { - background-color: #d9fdd3; - border-radius: 15px; - padding: 10px; - padding-top: 5px; +.circle-you, .circle-bot { + display: none; +} + +.text { + max-width: 65%; + border-radius: 18px; + padding: 12px 16px; + margin-bottom: 8px; + clear: both; + box-shadow: 0 1px 2px rgb(0 0 0 / 10%); +} + +.username { + font-weight: 600; + margin-bottom: 8px; + opacity: 0.65; + padding-left: 4px; +} + +/* User messages - right aligned, WhatsApp green */ +.circle-you + .text { + background-color: #dcf8c6; float: right; + margin-left: auto; + margin-right: 8px; } -.text-bot { - background-color: #f2f2f2; - border-radius: 15px; - padding: 10px; - padding-top: 5px; +.circle-you + .text .username { + display: none; } -.dark .text-you { - background-color: #005c4b; - color: #111b21; +/* Bot messages - left aligned, white */ +.circle-bot + .text { + background-color: #fff; + float: left; + margin-right: auto; + margin-left: 8px; + border: 1px solid #e5e5e5; } -.dark .text-bot { - background-color: #1f2937; - color: #111b21; +.circle-bot + .text .message-actions { + bottom: -25px !important; } -.text-bot p, .text-you p { - margin-top: 5px; +/* Dark theme colors */ +.dark .circle-you + .text { + background-color: #056162; + color: #e4e6ea; + box-shadow: 0 1px 2px rgb(0 0 0 / 30%); +} + +.dark .circle-bot + .text { + background-color: #202c33; + color: #e4e6ea; + border: 1px solid #3c4043; + box-shadow: 0 1px 2px rgb(0 0 0 / 30%); +} + +.dark .username { + opacity: 0.7; } .message-body img { max-width: 300px; max-height: 300px; - border-radius: 20px; + border-radius: 12px; } .message-body p { margin-bottom: 0 !important; + margin-top: 2px !important; font-size: 15px !important; - line-height: 1.428571429 !important; - font-weight: 500; + line-height: 1.4 !important; + font-weight: 400; +} + +.message-body p:first-child { + margin-top: 0 !important; } .dark .message-body p em { - color: rgb(138 138 138) !important; + color: rgb(170 170 170) !important; } .message-body p em { - color: rgb(110 110 110) !important; + color: rgb(100 100 100) !important; +} + +/* Message actions positioning */ +.message-actions { + margin-top: 8px; } diff --git a/modules/html_generator.py b/modules/html_generator.py index af64894e..11572fc6 100644 --- a/modules/html_generator.py +++ b/modules/html_generator.py @@ -595,64 +595,6 @@ def generate_cai_chat_html(history, name1, name2, style, character, reset_cache= return output -def generate_chat_html(history, name1, name2, reset_cache=False, last_message_only=False): - if not last_message_only: - output = f'
' - else: - output = "" - - def create_message(role, content, raw_content): - """Inner function for WPP-style messages.""" - text_class = "text-you" if role == "user" else "text-bot" - - # Get role-specific data - timestamp = format_message_timestamp(history, role, i) - attachments = format_message_attachments(history, role, i) - - # Create info button if timestamp exists - info_message = "" - if timestamp: - tooltip_text = get_message_tooltip(history, role, i) - info_message = info_button.replace('title="message"', f'title="{html.escape(tooltip_text)}"') - - return ( - f'
' - f'
' - f'
{content}
' - f'{attachments}' - f'{actions_html(history, i, role, info_message)}' - f'
' - f'
' - ) - - # Determine range - start_idx = len(history['visible']) - 1 if last_message_only else 0 - end_idx = len(history['visible']) - - for i in range(start_idx, end_idx): - row_visible = history['visible'][i] - row_internal = history['internal'][i] - - # Convert content - if last_message_only: - converted_visible = [None, convert_to_markdown_wrapped(row_visible[1], message_id=i, use_cache=i != len(history['visible']) - 1)] - else: - converted_visible = [convert_to_markdown_wrapped(entry, message_id=i, use_cache=i != len(history['visible']) - 1) for entry in row_visible] - - # Generate messages - if not last_message_only and converted_visible[0]: - output += create_message("user", converted_visible[0], row_internal[0]) - - output += create_message("assistant", converted_visible[1], row_internal[1]) - - if not last_message_only: - output += "
" - - return output - - def time_greeting(): current_hour = datetime.datetime.now().hour if 5 <= current_hour < 12: @@ -669,8 +611,6 @@ def chat_html_wrapper(history, name1, name2, mode, style, character, reset_cache result = f'
{greeting}
' elif mode == 'instruct': result = generate_instruct_html(history, last_message_only=last_message_only) - elif style == 'wpp': - result = generate_chat_html(history, name1, name2, last_message_only=last_message_only) else: result = generate_cai_chat_html(history, name1, name2, style, character, reset_cache=reset_cache, last_message_only=last_message_only)