updated

src/gui.py

@@ -1,28 +1,23 @@
-# app.py
 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")
 
-# Conversation history
+# Keep conversation history
 history = []
 
 def chatbot_response(user_input):
-    """Professional chat UI with bubbles, timestamps, and scrolling."""
+    """Generates chat HTML with typing animation for bot."""
     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]
-
+    # User message
     timestamp = datetime.datetime.now().strftime("%H:%M")
-    
-    # Add user message
     history.append({
         "sender": "You",
         "message": user_input,
@@ -30,8 +25,33 @@ def chatbot_response(user_input):
         "color": "#DCF8C6",
         "align": "right"
     })
+
+    # Bot typing animation
+    bot_reply = responses.get(model.predict([clean_text(user_input)])[0], ["Sorry, I don't understand."])[0]
+    typing_html = """
+    <div style="text-align:left; margin:8px 0;">
+        <div style="display:inline-block; background:#FFFFFF; padding:10px 15px; border-radius:20px; max-width:70%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); font-style:italic; color:gray;">
+            Bot is typing...
+        </div>
+    </div>
+    """
+    # Render chat with typing bubble
+    chat_html = render_chat(typing=True)
     
-    # Add bot message
+    # Simulate typing
+    for i in range(len(bot_reply)+1):
+        history.append({
+            "sender": "Bot",
+            "message": bot_reply[:i],
+            "time": timestamp,
+            "color": "#FFFFFF",
+            "align": "left"
+        })
+        chat_html = render_chat()
+        time.sleep(0.03)
+        history.pop()  # remove last partial message to update in next loop
+
+    # Add final bot message
     history.append({
         "sender": "Bot",
         "message": bot_reply,
@@ -40,7 +60,9 @@ def chatbot_response(user_input):
         "align": "left"
     })
     
-    # Generate HTML chat
+    return render_chat()
+
+def render_chat(typing=False):
     chat_html = """
     <div style="font-family:Helvetica, Arial; background:#F0F0F0; padding:15px; height:400px; overflow-y:auto; border-radius:10px; border:1px solid #ccc">
     """
@@ -53,6 +75,14 @@ def chatbot_response(user_input):
             </div>
         </div>
         """
+    if typing:
+        chat_html += """
+        <div style="text-align:left; margin:8px 0;">
+            <div style="display:inline-block; background:#FFFFFF; padding:10px 15px; border-radius:20px; max-width:70%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); font-style:italic; color:gray;">
+                Bot is typing...
+            </div>
+        </div>
+        """
     chat_html += "</div>"
     return chat_html
 
@@ -62,7 +92,7 @@ demo = gr.Interface(
     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."
+    description="Ask anything about your LMS. Automatic reply with typing animation!"
 )
 
 if __name__ == "__main__":