Update app.py

app.py

@@ -130,19 +130,13 @@ def display_history(history):
     return formatted_history
 
 
-# Define the UI layout with the system prompt in the sidebar
+# Define the UI layout with additional features
 with gr.Blocks() as demo:
     gr.Markdown("# 🧠 AI Chatbot Interface")
     gr.Markdown("### Customize your AI Chatbot's behavior and responses.")
 
     with gr.Row():
-        with gr.Column(scale=3):  # Main chat area (larger)
-            chatbot = gr.Chatbot()
-            message = gr.Textbox(label="Your message:", lines=1)
-            submit_btn = gr.Button("Send")
-            clear_btn = gr.Button("Clear Chat")
-
-        with gr.Column(scale=1):  # Sidebar (smaller)
+        with gr.Column():
             system_message = gr.Textbox(
                 value="You are a helpful assistant knowledgeable in various topics. Provide clear, concise, and friendly responses.",
                 label="System message",
@@ -158,7 +152,13 @@ with gr.Blocks() as demo:
             temperature.change(fn=update_settings, inputs=[max_tokens, temperature, top_p], outputs=settings_output)
             top_p.change(fn=update_settings, inputs=[max_tokens, temperature, top_p], outputs=settings_output)
 
-            # Sample prompts
+    with gr.Row():
+        chatbot = gr.Chatbot()
+        # Display chat history in a separate area
+        history_output = gr.Textbox(label="Chat History", lines=10, interactive=False)
+
+    with gr.Row():
+        with gr.Column():
             sample_prompt = gr.Dropdown(
                 choices=[
                     "Can you explain the theory of relativity?",
@@ -171,18 +171,18 @@ with gr.Blocks() as demo:
                 value="Can you explain the theory of relativity?",
                 type="value"
             )
-            sample_prompt.change(fn=lambda prompt: prompt, inputs=sample_prompt, outputs=message)
-
-    # Display chat history below the main chat area
-    with gr.Row():
-        history_output = gr.Textbox(label="Chat History", lines=10, interactive=False)
+            message = gr.Textbox(label="Your message:", lines=1)
+            submit_btn = gr.Button("Send")
+            clear_btn = gr.Button("Clear Chat")
+            feedback = gr.Textbox(label="Feedback:", lines=1)
+            submit_feedback = gr.Button("Submit Feedback")
 
-    # Feedback section below the history
-    with gr.Row():
-        feedback = gr.Textbox(label="Feedback:", lines=1)
-        submit_feedback = gr.Button("Submit Feedback")
+    # Handle sample prompt selection
+    def update_message(prompt: str) -> str:
+        return prompt
 
-    # --- Event Handlers ---
+    sample_prompt.change(fn=update_message, inputs=sample_prompt, outputs=message)
+    
     # Update the chatbot with the new message and response
     def handle_send(message: str, system_message: str, max_tokens: int, temperature: float, top_p: float):
         history = load_chat_history()
@@ -213,7 +213,6 @@ with gr.Blocks() as demo:
 
     submit_feedback.click(fn=submit_user_feedback, inputs=feedback, outputs=[gr.Textbox(value="Feedback submitted! Thank you.", lines=1, placeholder="")])
 
-
 # Launch the Gradio interface
 if __name__ == "__main__":
     demo.launch()