Update app.py

app.py

@@ -102,9 +102,7 @@ def respond(message, api_key, max_tokens, top_p, temperature):
         return history, "Error: " + response.json().get("error", "Unknown error occurred.")
 
 def render_message(history):
-    messages_html = """
-    <div id="chatbox-container" class="chatbox">
-        <div id="messages" style="scroll-behavior: smooth;">"""  
+    messages_html = ""
 
     for user_message, assistant_message, user_profile, assistant_profile, user_pic, assistant_pic in history:
         if user_message:
@@ -119,21 +117,28 @@ def render_message(history):
                 messages_html += f"<img src='{assistant_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>"
             messages_html += f"{assistant_message}</div><br>"
 
-    messages_html += """
-        </div>
-    </div>
+    return messages_html
+
+def append_new_message(new_message):
+    return f"""
     <script>
+        var chatbox = document.getElementById('messages');
+        chatbox.innerHTML += `{new_message}`;
         var chatboxContainer = document.getElementById('chatbox-container');
         chatboxContainer.scrollTop = chatboxContainer.scrollHeight;
     </script>
-    """  
+    """
 
-    return messages_html
 
 
-with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;}") as demo:
-
-    with gr.Column(visible=True) as auth_view:
+with gr.Blocks() as demo:
+    
+    with gr.Column():
+        chatbot_output = gr.HTML(elem_id="chatbox-container", value="""
+            <div id="chatbox-container" class="chatbox" style="height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;">
+                <div id="messages"></div>
+            </div>
+        """) 
         gr.Markdown("## P-MSQ Authorization")
         gr.Markdown("P-MSQ is in closed alpha test! The model, api and more are subject to change. Even though the space is public, P-MSQ is restricted for public use, available for testers.")
         api_user_input = gr.Textbox(placeholder="snowflake", label="UserID", type='email')