src/gui.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")

# Keep conversation history
history = []

def chatbot_response(user_input):
    """Generates chat HTML with typing animation for bot."""
    if not user_input.strip():
        return ""
    
    # 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)
    
    # 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 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
demo = gr.Interface(
    fn=chatbot_response,
    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__":
    demo.launch()