Improved css

app.py

@@ -14,13 +14,19 @@ from chatarena.message import Message
 
 css = """#col-container {max-width: 90%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column;}
 #header {text-align: center;}
-#col-chatbox {flex: 1; max-height: min(750px, 100%); display: flex;}
-#chatbox {height: min(750px, 100%); max-height: 750px; display:flex;}
+#col-chatbox {flex: 1; max-height: min(750px, 100%);}
 #label {font-size: 2em; padding: 0.5em; margin: 0;}
+.scroll-hide {overflow-y: scroll; max-height: 100px;}
+.wrap {max-height: 680px;}
 .message {font-size: 1.2em;}
-.wrap {min-width: min(640px, 100vh)}
 .message-wrap {max-height: min(700px, 100vh);}
 """
+# .wrap {min-width: min(640px, 100vh)}
+# #env-desc {max-height: 100px; overflow-y: auto;}
+# .textarea {height: 100px; max-height: 100px;}
+#chatbot-tab-all {height: 750px; max-height: min(750px, 100%);}
+#chatbox {height: min(750px, 100%); max-height: min(750px, 100%);}
+#chatbox.block {height: 730px}
 
 DEBUG = False
 
@@ -51,7 +57,7 @@ def get_moderator_components(visible=True):
     with gr.Row():
         with gr.Column():
             role_desc = gr.Textbox(label="Moderator role", lines=1, visible=visible, interactive=True,
-                                   placeholder=f"Enter the role description for {name}")
+                                   placeholder=f"Enter the role description for {name}").style(resize="both", max_height="85px")
             terminal_condition = gr.Textbox(show_label=False, lines=1, visible=visible, interactive=True,
                                             placeholder="Enter the end criteria for the conversation")
         with gr.Column():
@@ -94,12 +100,12 @@ with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
         gr.Markdown("""# 🏟 ChatArena️<br>
 Prompting multiple AI agents to play games in a language-driven environment. 
-**[Project Homepage](https://github.com/chatarena/chatarena)**
-### Due to the high volume of requests, our OpenAI API Token exceeded the billing limit. We are approaching OpenAI to get the research access at the moment. We encourage users to run the demo locally following [this instruction](https://github.com/chatarena/chatarena#launch-the-demo-locally).""", elem_id="header")
+**[Project Homepage](https://github.com/chatarena/chatarena)**""", elem_id="header")
+        # ## Due to the high volume of requests, our OpenAI API Token exceeded the billing limit. We are approaching OpenAI to get the research access at the moment. We encourage users to run the demo locally following [this instruction](https://github.com/chatarena/chatarena#launch-the-demo-locally).""", elem_id="header")
 
         with gr.Row():
             env_selector = gr.Dropdown(choices=list(ENV_REGISTRY.keys()), value=DEFAULT_ENV, interactive=True,
-                                       label="Environment Type", show_label=True)
+                                       label="Environment Type", show_label=True, elem_id="env-desc")
             example_selector = gr.Dropdown(choices=list(EXAMPLE_REGISTRY.keys()), interactive=True,
                                            label="Select Example", show_label=True)
 
@@ -111,13 +117,13 @@ Prompting multiple AI agents to play games in a language-driven environment.
 
         with gr.Row():
             with gr.Column(elem_id="col-chatbox"):
-                with gr.Tab("All"):
+                with gr.Tab("All", elem_id='chatbot-tab-all', visible=True):
                     chatbot = gr.Chatbot(elem_id="chatbox", visible=True, show_label=False)
 
                 player_chatbots = []
                 for i in range(MAX_NUM_PLAYERS):
                     player_name = f"Player {i + 1}"
-                    with gr.Tab(player_name, visible=(i < DEFAULT_NUM_PLAYERS)):
+                    with gr.Tab(player_name, elem_id=f'chatbot-tab-{i}', visible=(i < DEFAULT_NUM_PLAYERS)):
                         player_chatbot = gr.Chatbot(elem_id=f"chatbox-{i}", visible=i < DEFAULT_NUM_PLAYERS,
                                                     label=player_name, show_label=False)
                         player_chatbots.append(player_chatbot)
@@ -244,7 +250,7 @@ Prompting multiple AI agents to play games in a language-driven environment.
     def step_game(all_comps: dict):
         yield {btn_step: gr.update(value="Running...", interactive=False),
                btn_restart: gr.update(interactive=False)}
-        sleep(2)  # control the rate of requests
+        sleep(0.5)  # control the rate of requests
 
         cur_state = all_comps[state]