updated

src/gui.py

@@ -2,41 +2,67 @@
 import gradio as gr
 import joblib
 from src.preprocess import clean_text
-import time
+import datetime
 
 # Load model and responses
 model = joblib.load("models/lms_chatbot.joblib")
 responses = joblib.load("models/responses.joblib")
 
-# Keep chat history
+# Conversation history
 history = []
 
 def chatbot_response(user_input):
-    """Simulate Tkinter-style chat UI with bubbles."""
+    """Professional chat UI with bubbles, timestamps, and scrolling."""
+    if not user_input.strip():
+        return ""
+    
     clean_input = clean_text(user_input)
     tag = model.predict([clean_input])[0]
     bot_reply = responses.get(tag, ["Sorry, I don't understand."])[0]
 
-    # Add user and bot messages to history
-    history.append(("You", user_input))
-    history.append(("Bot", bot_reply))
-
-    # Format messages like chat bubbles
-    formatted_history = ""
-    for sender, msg in history:
-        if sender == "You":
-            formatted_history += f"<div style='background-color:#DCF8C6; padding:8px; border-radius:10px; margin:4px 0; width:fit-content; float:right; clear:both'>{msg}</div>"
-        else:
-            formatted_history += f"<div style='background-color:#FFFFFF; padding:8px; border-radius:10px; margin:4px 0; width:fit-content; float:left; clear:both'>{msg}</div>"
-    return formatted_history
+    timestamp = datetime.datetime.now().strftime("%H:%M")
+    
+    # Add user message
+    history.append({
+        "sender": "You",
+        "message": user_input,
+        "time": timestamp,
+        "color": "#DCF8C6",
+        "align": "right"
+    })
+    
+    # Add bot message
+    history.append({
+        "sender": "Bot",
+        "message": bot_reply,
+        "time": timestamp,
+        "color": "#FFFFFF",
+        "align": "left"
+    })
+    
+    # Generate HTML chat
+    chat_html = """
+    <div style="font-family:Helvetica, Arial; background:#F0F0F0; padding:15px; height:400px; overflow-y:auto; border-radius:10px; border:1px solid #ccc">
+    """
+    for msg in history:
+        chat_html += f"""
+        <div style="text-align:{msg['align']}; margin:8px 0;">
+            <div style="display:inline-block; background:{msg['color']}; padding:10px 15px; border-radius:20px; max-width:70%; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
+                {msg['message']}<br>
+                <span style="font-size:10px; color:gray; float:right;">{msg['time']}</span>
+            </div>
+        </div>
+        """
+    chat_html += "</div>"
+    return chat_html
 
 # Gradio interface
 demo = gr.Interface(
     fn=chatbot_response,
-    inputs=gr.Textbox(lines=2, placeholder="Type your message here..."),
-    outputs=gr.HTML(),
-    title="LMS Chatbot",
-    description="Ask anything about LMS and get automated responses."
+    inputs=gr.Textbox(lines=2, placeholder="Type your message here...", label="Your Message"),
+    outputs=gr.HTML(label="Chat"),
+    title="🟢 LMS Chatbot",
+    description="Ask anything about your Learning Management System and get instant automated responses. Chat bubbles with timestamps for a modern look."
 )
 
 if __name__ == "__main__":