Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 from langchain.prompts import ChatPromptTemplate
 from langchain_huggingface import HuggingFaceEndpoint
-from langchain.schema import AIMessage, HumanMessage, SystemMessage
+from langchain.schema import HumanMessage, SystemMessage
 import os
 import time
 import logging
@@ -11,6 +11,8 @@ import re
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
+# Make sure to set your Hugging Face API token in your environment variables
+# For example: export HUGGINGFACEHUB_API_TOKEN='your_token_here'
 if "HUGGINGFACEHUB_API_TOKEN" not in os.environ:
     logger.warning("HUGGINGFACEHUB_API_TOKEN not set, the application may not work.")
 
@@ -54,7 +56,7 @@ Provide detailed, actionable advice with specific examples."""),
 study_template = ChatPromptTemplate.from_messages([
     ("system", """{system_message}
 
-You are a study skills coach. Help students with these types of tasks:
+You are a study skills coach. Help students with:
 - Effective study methods for different learning styles
 - Time management and scheduling techniques
 - Memory techniques and retention strategies
@@ -76,8 +78,8 @@ You are EduBot, a comprehensive AI learning assistant. You help students with:
 📚 Study strategies (effective learning techniques and exam preparation)
 🛠️ Educational tools (guidance on learning resources and technologies)
 
-Always be encouraging, patient, thorough, and comprehensive. You take a teach ratehr thna show appraoch with all topics, opting to explain how the user can learn to complete a project or task rather than doing it for them."""),
-    ("human", "Without telling me the answer right out, helpfully assist me with: {question}")
+Always be encouraging, patient, thorough, and comprehensive."""),
+    ("human", "{question}")
 ])
 
 # --- Core Logic Functions ---
@@ -155,16 +157,30 @@ custom_css = """
 .gradio-container {
     background-color: rgb(240, 236, 230) !important;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    height: 100vh !important;
+    overflow: hidden;
+}
+
+/* Main layout container */
+.main-container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
-/* Centered chat interface */
-.chat-container {
+/* Chat content area */
+.chat-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
     max-width: 800px;
     margin: 0 auto;
     padding: 1rem;
-    height: calc(100vh - 40px);
-    display: flex;
-    flex-direction: column;
+    padding-bottom: 0;
 }
 
 /* Model name title */
@@ -182,6 +198,7 @@ custom_css = """
     overflow-y: auto;
     border: none !important;
     background-color: transparent !important;
+    margin-bottom: 0 !important;
 }
 
 /* Message container styling */
@@ -220,12 +237,29 @@ custom_css = """
     display: none !important;
 }
 
-/* Input textbox styling */
+/* Full-width input container at bottom */
+.input-bottom {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgb(240, 236, 230);
+    padding: 1rem;
+    border-top: 1px solid rgba(28, 18, 5, 0.1);
+}
+
+/* Input textbox styling - full width */
+.input-container {
+    width: 100% !important;
+    max-width: none !important;
+}
+
 .input-container .wrap {
     background-color: rgb(242, 238, 233) !important;
     border: 2px solid rgb(28, 18, 5) !important;
     border-radius: 20px !important;
     box-shadow: none !important;
+    width: 100% !important;
 }
 
 .input-container textarea {
@@ -236,6 +270,8 @@ custom_css = """
     font-size: 16px !important;
     box-shadow: none !important;
     outline: none !important;
+    width: 100% !important;
+    resize: none !important;
 }
 
 .input-container textarea:focus {
@@ -249,20 +285,18 @@ custom_css = """
     display: none !important;
 }
 
-/* Remove any default margins/padding */
-.input-container {
-    margin-top: 1rem;
-}
-
-/* Clear button styling */
+/* Clear button styling - positioned in top right */
 .clear-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
     background-color: rgb(28, 18, 5) !important;
     color: white !important;
     border: none !important;
     border-radius: 10px !important;
     padding: 8px 16px !important;
-    margin-top: 0.5rem;
     cursor: pointer;
+    z-index: 1000;
 }
 
 .clear-btn:hover {
@@ -271,29 +305,33 @@ custom_css = """
 """
 
 with gr.Blocks(css=custom_css, title="EduBot") as demo:
-    with gr.Column(elem_classes=["chat-container"]):
-        # Model Name in the top-left corner
-        gr.HTML('<div class="model-name">🎓 EduBot</div>')
+    with gr.Column(elem_classes=["main-container"]):
+        # Clear button in top right
+        clear = gr.Button("Clear", elem_classes=["clear-btn"])
         
-        # The main chatbot interface
-        chatbot = gr.Chatbot(
-            type="messages",
-            height=500,
-            show_copy_button=False,
-            show_share_button=False,
-            avatar_images=None
-        )
+        # Chat content area
+        with gr.Column(elem_classes=["chat-content"]):
+            # Model Name in the top-left corner
+            gr.HTML('<div class="model-name">🎓 EduBot</div>')
+            
+            # The main chatbot interface
+            chatbot = gr.Chatbot(
+                type="messages",
+                height="100%",
+                show_copy_button=False,
+                show_share_button=False,
+                avatar_images=None
+            )
         
-        # The user input textbox
-        with gr.Row():
+        # Full-width input at bottom
+        with gr.Column(elem_classes=["input-bottom"]):
             msg = gr.Textbox(
                 placeholder="Ask me about math, research, study strategies, or any educational topic...",
                 show_label=False,
-                lines=4,
-                elem_classes=["input-container"],
-                scale=4
+                lines=1,
+                max_lines=4,
+                elem_classes=["input-container"]
             )
-            clear = gr.Button("Clear", elem_classes=["clear-btn"], scale=1)
 
     def respond_and_update(message, history):
         """Main function to handle user submission."""