updated

app.py

@@ -2,19 +2,18 @@ import gradio as gr
 import joblib
 from src.preprocess import clean_text
 import datetime
+import time
 
 # Load model & responses
 model = joblib.load("models/lms_chatbot.joblib")
 responses = joblib.load("models/responses.joblib")
 
-# Keep conversation history
 history = []
 
 def chatbot_response(user_input):
     if not user_input.strip():
         return ""
 
-    # Add user message
     timestamp = datetime.datetime.now().strftime("%H:%M")
     history.append({
         "sender": "You",
@@ -28,7 +27,14 @@ def chatbot_response(user_input):
     tag = model.predict([clean_text(user_input)])[0]
     bot_reply = responses.get(tag, ["Sorry, I don't understand."])[0]
 
-    # Add bot message
+    # Animate bot typing
+    display = render_chat(typing=True)
+    for i in range(len(bot_reply)+1):
+        temp_msg = bot_reply[:i]
+        display = render_chat(temp_msg)
+        time.sleep(0.02)
+
+    # Add final bot message
     timestamp = datetime.datetime.now().strftime("%H:%M")
     history.append({
         "sender": "Bot",
@@ -38,13 +44,10 @@ def chatbot_response(user_input):
         "align": "left"
     })
 
-    # Render chat
     return render_chat()
 
-def render_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;">
-    """
+def render_chat(temp_bot_msg=""):
+    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;">
@@ -54,16 +57,23 @@ def render_chat():
             </div>
         </div>
         """
+    if temp_bot_msg:
+        chat_html += f"""
+        <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;">
+                {temp_bot_msg}
+            </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...", label="Your Message"),
-    outputs=gr.HTML(label="Chat"),
+    inputs=gr.Textbox(lines=2, placeholder="Type your message here..."),
+    outputs=gr.HTML(),
     title="🟢 LMS Chatbot",
-    description="Ask anything about your LMS. Automatic reply with chat bubbles and timestamps!"
+    description="Ask anything about your LMS. Automatic reply with chat bubbles!"
 )
 
 if __name__ == "__main__":