Fix chat message order (#3461)

This commit is contained in:
missionfloyd 2023-08-05 10:53:54 -06:00 committed by GitHub
parent 44f31731af
commit 5134878344
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 55 deletions

View File

@ -79,6 +79,11 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding-top: 1px; padding-top: 1px;
} }
.chat > .messages {
display: flex;
flex-direction: column;
}
.message-body li { .message-body li {
margin-top: 0.5em !important; margin-top: 0.5em !important;
margin-bottom: 0.5em !important; margin-bottom: 0.5em !important;

View File

@ -168,10 +168,21 @@ def get_image_cache(path):
def generate_instruct_html(history): def generate_instruct_html(history):
output = f'<style>{instruct_css}</style><div class="chat pretty_scrollbar" id="chat">' output = f'<style>{instruct_css}</style><div class="chat pretty_scrollbar" id="chat"><div class="messages">'
for i, _row in enumerate(history[::-1]): for i, _row in enumerate(history):
row = [convert_to_markdown(entry) for entry in _row] row = [convert_to_markdown(entry) for entry in _row]
if row[0]: # don't display empty user messages
output += f"""
<div class="user-message">
<div class="text">
<div class="message-body">
{row[0]}
</div>
</div>
</div>
"""
output += f""" output += f"""
<div class="assistant-message"> <div class="assistant-message">
<div class="text"> <div class="text">
@ -182,34 +193,38 @@ def generate_instruct_html(history):
</div> </div>
""" """
if len(row[0]) == 0: # don't display empty user messages output += "</div></div>"
continue
output += f"""
<div class="user-message">
<div class="text">
<div class="message-body">
{row[0]}
</div>
</div>
</div>
"""
output += "</div>"
return output return output
def generate_cai_chat_html(history, name1, name2, style, reset_cache=False): def generate_cai_chat_html(history, name1, name2, style, reset_cache=False):
output = f'<style>{chat_styles[style]}</style><div class="chat pretty_scrollbar" id="chat">' output = f'<style>{chat_styles[style]}</style><div class="chat pretty_scrollbar" id="chat"><div class="messages">'
# We use ?name2 and ?time.time() to force the browser to reset caches # We use ?name2 and ?time.time() to force the browser to reset caches
img_bot = f'<img src="file/cache/pfp_character.png?{name2}">' if Path("cache/pfp_character.png").exists() else '' img_bot = f'<img src="file/cache/pfp_character.png?{name2}">' if Path("cache/pfp_character.png").exists() else ''
img_me = f'<img src="file/cache/pfp_me.png?{time.time() if reset_cache else ""}">' if Path("cache/pfp_me.png").exists() else '' img_me = f'<img src="file/cache/pfp_me.png?{time.time() if reset_cache else ""}">' if Path("cache/pfp_me.png").exists() else ''
for i, _row in enumerate(history[::-1]): for i, _row in enumerate(history):
row = [convert_to_markdown(entry) for entry in _row] row = [convert_to_markdown(entry) for entry in _row]
if row[0]: # don't display empty user messages
output += f"""
<div class="message">
<div class="circle-you">
{img_me}
</div>
<div class="text">
<div class="username">
{name1}
</div>
<div class="message-body">
{row[0]}
</div>
</div>
</div>
"""
output += f""" output += f"""
<div class="message"> <div class="message">
<div class="circle-bot"> <div class="circle-bot">
@ -226,49 +241,18 @@ def generate_cai_chat_html(history, name1, name2, style, reset_cache=False):
</div> </div>
""" """
if len(row[0]) == 0: # don't display empty user messages output += "</div></div>"
continue
output += f"""
<div class="message">
<div class="circle-you">
{img_me}
</div>
<div class="text">
<div class="username">
{name1}
</div>
<div class="message-body">
{row[0]}
</div>
</div>
</div>
"""
output += "</div>"
return output return output
def generate_chat_html(history, name1, name2, reset_cache=False): def generate_chat_html(history, name1, name2, reset_cache=False):
output = f'<style>{chat_styles["wpp"]}</style><div class="chat pretty_scrollbar" id="chat">' output = f'<style>{chat_styles["wpp"]}</style><div class="chat pretty_scrollbar" id="chat"><div class="messages">'
for i, _row in enumerate(history[::-1]): for i, _row in enumerate(history):
row = [convert_to_markdown(entry) for entry in _row] row = [convert_to_markdown(entry) for entry in _row]
output += f""" if row[0]: # don't display empty user messages
<div class="message"> output += f"""
<div class="text-bot">
<div class="message-body">
{row[1]}
</div>
</div>
</div>
"""
if len(row[0]) == 0: # don't display empty user messages
continue
output += f"""
<div class="message"> <div class="message">
<div class="text-you"> <div class="text-you">
<div class="message-body"> <div class="message-body">
@ -278,7 +262,17 @@ def generate_chat_html(history, name1, name2, reset_cache=False):
</div> </div>
""" """
output += "</div>" output += f"""
<div class="message">
<div class="text-bot">
<div class="message-body">
{row[1]}
</div>
</div>
</div>
"""
output += "</div></div>"
return output return output