Restructure to allow clearing of the chat when switching models

app.py

@@ -8,7 +8,7 @@ from utils import COMMUNITY_POSTFIX_URL, get_model_config, log_message, check_fo
 print(f"Gradio version: {gr.__version__}")
 
 DEFAULT_MODEL_NAME = "Apriel-Nemotron-15b-Thinker"
-
+BUTTON_WIDTH = 160
 
 chat_start_count = 0
 model_config = None
@@ -41,6 +41,11 @@ def chat_fn(message, history):
     log_message(f"chat_fn() --> Message: {message}")
     log_message(f"chat_fn() --> History: {history}")
 
+    # Check if the message is empty
+    if not message.strip():
+        gr.Warning("Please enter a message before sending.")
+        return history
+
     global chat_start_count
     chat_start_count = chat_start_count + 1
     print(
@@ -146,6 +151,13 @@ description = None
 with gr.Blocks(theme=gr.themes.Default(primary_hue="green")) as demo:
     gr.HTML("""
     <style>
+        .html-container:has(.css-styles) {
+            padding: 0;
+            margin: 0;
+        }
+        
+        .css-styles { height: 0; }
+        
         .model-message {
             text-align: end;
         }
@@ -194,7 +206,14 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="green")) as demo:
                 max-height: 400px;
             }
         }
-    """)
+    """ + f"""
+        @media (min-width: 1024px) {{
+            .send-button-container, .clear-button-container {{
+                max-width: {BUTTON_WIDTH}px;
+            }}
+        }}
+    </style>
+    """, elem_classes="css-styles")
 
     with gr.Row(variant="panel", elem_classes="responsive-row"):
         with gr.Column(scale=1, min_width=400, elem_classes="model-dropdown-container"):
@@ -216,30 +235,56 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="green")) as demo:
         elem_classes="chatbot",
     )
 
-    chat_interface = gr.ChatInterface(
-        chat_fn,
-        description="",
-        type="messages",
-        chatbot=chatbot,
-        fill_height=True,
+    # chat_interface = gr.ChatInterface(
+    #     chat_fn,
+    #     description="",
+    #     type="messages",
+    #     chatbot=chatbot,
+    #     fill_height=True,
+    # )
+
+    with gr.Row():
+        with gr.Column(scale=10, min_width=400, elem_classes="user-input-container"):
+            user_input = gr.Textbox(
+                show_label=False,
+                placeholder="Type your message here and press Enter",
+                container=False,
+            )
+        with gr.Column(scale=1, min_width=BUTTON_WIDTH * 2 + 20):
+            with gr.Row():
+                with gr.Column(scale=1, min_width=BUTTON_WIDTH, elem_classes="send-button-container"):
+                    send_btn = gr.Button("Send", variant="primary")
+                with gr.Column(scale=1, min_width=BUTTON_WIDTH, elem_classes="clear-button-container"):
+                    clear_btn = gr.ClearButton(chatbot, value="New Chat", variant="secondary")
+
+    # on Enter: stream into the chatbot, then clear the textbox
+    user_input.submit(
+        fn=chat_fn,
+        inputs=[user_input, chatbot],
+        outputs=[chatbot]
     )
+    user_input.submit(lambda: "", None, user_input, queue=False)
 
-    # Add this line to ensure the model is reset to default on page reload
+    send_btn.click(
+        fn=chat_fn,
+        inputs=[user_input, chatbot],
+        outputs=[chatbot]
+    )
+    send_btn.click(lambda: "", None, user_input, queue=False)
+
+    # Ensure the model is reset to default on page reload
     demo.load(lambda: setup_model(DEFAULT_MODEL_NAME, intial=False), [], [description_html])
 
 
     def update_model_and_clear(model_name):
-        # Remove the "Model: " prefix to get the actual model name
         actual_model_name = model_name.replace("Model: ", "")
         desc = setup_model(actual_model_name)
-        chatbot.clear()  # Critical line
-        return desc
-
+        return desc, []
 
     model_dropdown.change(
         fn=update_model_and_clear,
         inputs=[model_dropdown],
-        outputs=[description_html]
+        outputs=[description_html, chatbot]
     )
 
 demo.launch(ssr_mode=False)