Update app.py

app.py

@@ -130,13 +130,19 @@ def display_history(history):
     return formatted_history
 
 
-# Define the UI layout with additional features
+# Define the UI layout with the system prompt in the sidebar
 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():
+        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)
             system_message = gr.Textbox(
                 value="You are a helpful assistant knowledgeable in various topics. Provide clear, concise, and friendly responses.",
                 label="System message",
@@ -152,13 +158,7 @@ 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)
 
-    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 prompts
             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"
             )
-            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")
+            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)
 
-    # Handle sample prompt selection
-    def update_message(prompt: str) -> str:
-        return prompt
+    # Feedback section below the history
+    with gr.Row():
+        feedback = gr.Textbox(label="Feedback:", lines=1)
+        submit_feedback = gr.Button("Submit Feedback")
 
-    sample_prompt.change(fn=update_message, inputs=sample_prompt, outputs=message)
-    
+    # --- Event Handlers ---
     # 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,6 +213,7 @@ 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()