From beb95f5fe29a4f309268297fdced6614bcb62922 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Sun, 16 Apr 2023 16:44:50 -0300
Subject: [PATCH] Add a style for the "chat" mode

---
 css/html_bubble_chat_style.css | 86 ++++++++++++++++++++++++++++++++++
 modules/html_generator.py      | 35 +++++++++++++-
 2 files changed, 119 insertions(+), 2 deletions(-)
 create mode 100644 css/html_bubble_chat_style.css

diff --git a/css/html_bubble_chat_style.css b/css/html_bubble_chat_style.css
new file mode 100644
index 00000000..b9dfe87d
--- /dev/null
+++ b/css/html_bubble_chat_style.css
@@ -0,0 +1,86 @@
+.chat {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 800px;
+    height: 66.67vh;
+    overflow-y: auto;
+    padding-right: 20px;
+    display: flex;
+    flex-direction: column-reverse;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+}
+
+.message {
+    padding-bottom: 25px;
+    font-size: 15px;
+    font-family: Helvetica, Arial, sans-serif;
+    line-height: 1.428571429;
+}
+
+.text-you {
+  background-color: #d9fdd3;
+  border-radius: 15px;
+  padding: 10px;
+  padding-top: 5px;
+  float: right;
+}
+
+.text-bot {
+  background-color: #f2f2f2;
+  border-radius: 15px;
+  padding: 10px;
+  padding-top: 5px;
+}
+
+.dark .text-you {
+  background-color: #005c4b;
+  color: #111b21;
+}
+
+.dark .text-bot {
+  background-color: #202c33;
+  color: #111b21;
+}
+
+.text-bot p, .text-you p {
+  margin-top: 5px;
+}
+
+.message-body {}
+
+.message-body img {
+    max-width: 300px;
+    max-height: 300px;
+    border-radius: 20px;
+}
+
+.message-body p {
+    margin-bottom: 0 !important;
+    font-size: 15px !important;
+    line-height: 1.428571429 !important;
+}
+
+.message-body li {
+    margin-top: 0.5em !important;
+    margin-bottom: 0.5em !important;
+}
+
+.message-body li > p {
+    display: inline !important;
+}
+
+.message-body code {
+    overflow-x: auto;
+}
+.message-body :not(pre) > code {
+    white-space: normal !important;
+}
+
+.dark .message-body p em {
+    color: rgb(138, 138, 138) !important;
+}
+
+.message-body p em {
+    color: rgb(110, 110, 110) !important;
+}
\ No newline at end of file
diff --git a/modules/html_generator.py b/modules/html_generator.py
index 7a1f2825..860efbfc 100644
--- a/modules/html_generator.py
+++ b/modules/html_generator.py
@@ -21,6 +21,8 @@ with open(Path(__file__).resolve().parent / '../css/html_4chan_style.css', 'r')
     _4chan_css = css_f.read()
 with open(Path(__file__).resolve().parent / '../css/html_cai_style.css', 'r') as f:
     cai_css = f.read()
+with open(Path(__file__).resolve().parent / '../css/html_bubble_chat_style.css', 'r') as f:
+    bubble_chat_css = f.read()
 with open(Path(__file__).resolve().parent / '../css/html_instruct_style.css', 'r') as f:
     instruct_css = f.read()
 
@@ -210,8 +212,37 @@ def generate_cai_chat_html(history, name1, name2, reset_cache=False):
     return output
 
 
-def generate_chat_html(history, name1, name2):
-    return generate_cai_chat_html(history, name1, name2)
+def generate_chat_html(history, name1, name2, reset_cache=False):
+    output = f'<style>{bubble_chat_css}</style><div class="chat" id="chat">'
+
+    for i, _row in enumerate(history[::-1]):
+        row = [convert_to_markdown(entry) for entry in _row]
+
+        output += f"""
+              <div class="message">
+                <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="text-you">
+                  <div class="message-body">
+                    {row[0]}
+                  </div>
+                </div>
+              </div>
+            """
+
+    output += "</div>"
+    return output
 
 
 def chat_html_wrapper(history, name1, name2, mode, reset_cache=False):