updated

app.py

@@ -1,9 +1,10 @@
-# app.py
 import gradio as gr
 import joblib
 from src.preprocess import clean_text
+import time
+import datetime
 
-# Load trained model and responses
+# Load model and responses
 model = joblib.load("models/lms_chatbot.joblib")
 responses = joblib.load("models/responses.joblib")
 
@@ -11,27 +12,87 @@ responses = joblib.load("models/responses.joblib")
 history = []
 
 def chatbot_response(user_input):
-    clean_input = clean_text(user_input)
-    tag = model.predict([clean_input])[0]
-    bot_reply = responses.get(tag, ["Sorry, I don't understand."])[0]
+    """Generates chat HTML with typing animation for bot."""
+    if not user_input.strip():
+        return ""
     
-    # Append to history
-    history.append((user_input, bot_reply))
+    # User message
+    timestamp = datetime.datetime.now().strftime("%H:%M")
+    history.append({
+        "sender": "You",
+        "message": user_input,
+        "time": timestamp,
+        "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)
     
-    # Format chat history nicely
-    formatted_history = ""
-    for user_msg, bot_msg in history:
-        formatted_history += f"**You:** {user_msg}\n**Bot:** {bot_msg}\n\n"
+    # 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,
+        "time": timestamp,
+        "color": "#FFFFFF",
+        "align": "left"
+    })
     
-    return formatted_history
+    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">
+    """
+    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>
+        """
+    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
 
-# Gradio Interface
+# Gradio interface
 demo = gr.Interface(
     fn=chatbot_response,
-    inputs=gr.Textbox(lines=2, placeholder="Type your message here..."),
-    outputs=gr.Markdown(),
-    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 LMS. Automatic reply with typing animation!"
 )
 
 if __name__ == "__main__":