Update app.py

app.py

@@ -2,51 +2,272 @@ import streamlit as st
 from datetime import datetime
 from chatbot_backend import ask_bot
 
-st.set_page_config(page_title="AI Chatbot", layout="wide")
+# --- Page Configuration and Custom CSS ---
+st.set_page_config(
+    page_title="AI Customer Service Bot",
+    page_icon="🤖",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
 
-# --- Minimal CSS ---
 st.markdown("""
 <style>
-.stApp { background: #0f1419; color: #fff; font-family: sans-serif; }
-.chat-container { max-height:70vh; overflow-y:auto; padding:10px; margin-bottom:10px; }
-.user-message, .bot-message { padding:0.6rem 1rem; border-radius:15px; max-width:70%; margin:0.4rem 0; }
-.user-message { background:#4facfe; margin-left:auto; color:#fff; }
-.bot-message { background:#667eea; margin-right:auto; color:#fff; }
-.quick-questions { display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; }
-.quick-questions .stButton>button { border-radius:15px; padding:4px 10px; font-size:12px; background:#667eea33; color:#667eea; border:1px solid #667eea; white-space:nowrap; }
-.quick-questions .stButton>button:hover { background:#667eea55; }
+/* General app background */
+.stApp { background-color: #0f1419; color: #ffffff; }
+
+/* Header styling */
+.chat-header {
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* Message bubble styling */
+.user-message, .bot-message {
+    padding: 0.75rem 1rem;
+    border-radius: 15px;
+    font-size: 14px;
+    line-height: 1.4;
+    margin: 0.25rem 0;
+    max-width: 75%;
+    word-wrap: break-word;
+}
+
+.user-message {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    color: white;
+    margin-left: auto;
+    border-radius: 15px 15px 5px 15px;
+    box-shadow: 0 2px 10px rgba(79, 172, 254, 0.2);
+}
+
+.bot-message {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    margin-right: auto;
+    border-radius: 15px 15px 15px 5px;
+    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
+}
+
+.message-time {
+    font-size: 0.65rem;
+    opacity: 0.6;
+    margin-top: 0.25rem;
+}
+.user-time { text-align: right; }
+.bot-time { text-align: left; }
+
+/* Input and button styling */
+.stTextInput > div > div > input {
+    background-color: #1a1a1a;
+    color: white;
+    border: 1px solid #333;
+    border-radius: 20px;
+    padding: 10px 15px;
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+.stTextInput > div > div > input:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 5px rgba(102, 126, 234, 0.2);
+}
+
+.stButton > button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 40px;
+    padding: 0.5rem 1.5rem;
+    font-weight: 600;
+    font-size: 14px;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
+}
+
+.stButton > button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+/* Sidebar styling */
+.sidebar .stButton > button {
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
+    width: 100%;
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+
+/* Chat stats */
+.chat-stats {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.75rem;
+    border-radius: 8px;
+    margin: 0.5rem 0;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 12px;
+}
+
+/* Quick Questions */
+.quick-questions-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-bottom: 10px;
+}
+
+.quick-questions-container .stButton > button {
+    background: rgba(102, 126, 234, 0.1) !important;
+    border: 1px solid #667eea !important;
+    color: #667eea !important;
+    border-radius: 15px !important;
+    padding: 5px 10px !important;
+    font-size: 12px !important;
+    transition: all 0.3s ease !important;
+    flex-grow: 1;
+    min-width: fit-content;
+}
+
+.quick-questions-container .stButton > button:hover {
+    background: rgba(102, 126, 234, 0.2) !important;
+    transform: translateY(-1px) !important;
+}
 </style>
 """, unsafe_allow_html=True)
 
 # --- Session State ---
-if "messages" not in st.session_state:
-    st.session_state.messages = [{"role":"assistant","content":"Hello! Ask me anything.","timestamp":datetime.now().strftime("%H:%M")}]
-if "counter" not in st.session_state:
-    st.session_state.counter = 0
-
-# --- Display Messages ---
-st.markdown('<div class="chat-container">', unsafe_allow_html=True)
-for msg in st.session_state.messages:
-    if msg["role"]=="user":
-        st.markdown(f'<div class="user-message">💭 {msg["content"]} <br><small>{msg["timestamp"]}</small></div>', unsafe_allow_html=True)
-    else:
-        st.markdown(f'<div class="bot-message">🤖 {msg["content"]} <br><small>{msg["timestamp"]}</small></div>', unsafe_allow_html=True)
-st.markdown('</div>', unsafe_allow_html=True)
-
-# --- Quick Questions ---
-quick_questions = ["Services","Pricing","Business Hours","Contact","Refund Policy"]
-st.markdown('<div class="quick-questions">', unsafe_allow_html=True)
-for i,q in enumerate(quick_questions):
-    if st.button(q, key=f"q{i}"):
-        st.session_state.messages.append({"role":"user","content":q,"timestamp":datetime.now().strftime("%H:%M")})
-        st.session_state.messages.append({"role":"assistant","content":ask_bot(q),"timestamp":datetime.now().strftime("%H:%M")})
-st.markdown('</div>', unsafe_allow_html=True)
-
-# --- User Input ---
-user_input = st.text_input("💬 Type your question here...", key=f"input_{st.session_state.counter}")
-if st.button("Send"):
-    if user_input.strip():
-        st.session_state.messages.append({"role":"user","content":user_input,"timestamp":datetime.now().strftime("%H:%M")})
-        st.session_state.messages.append({"role":"assistant","content":ask_bot(user_input),"timestamp":datetime.now().strftime("%H:%M")})
-        st.session_state.counter += 1
-        st.experimental_rerun()
+def initialize_session_state():
+    if "messages" not in st.session_state:
+        st.session_state.messages = []
+        welcome = """🎉 Welcome to AI Customer Service!
+I'm your intelligent assistant, ready to help you with any questions or concerns.
+Feel free to ask me anything! 💬"""
+        st.session_state.messages.append({
+            "role": "assistant",
+            "content": welcome,
+            "timestamp": datetime.now().strftime("%H:%M")
+        })
+    if "input_counter" not in st.session_state:
+        st.session_state.input_counter = 0
+
+# --- Display chat messages ---
+def display_chat_messages():
+    for message in st.session_state.messages:
+        if message["role"] == "user":
+            st.markdown(f"""
+                <div class="user-message">
+                    💭 {message["content"]}
+                    <div class="message-time user-time">You • {message["timestamp"]}</div>
+                </div>
+            """, unsafe_allow_html=True)
+        else:
+            st.markdown(f"""
+                <div class="bot-message">
+                    🤖 {message["content"]}
+                    <div class="message-time bot-time">AI Assistant • {message["timestamp"]}</div>
+                </div>
+            """, unsafe_allow_html=True)
+        st.markdown("", unsafe_allow_html=True)
+
+# --- Handle input ---
+def handle_user_input():
+    col1, col2 = st.columns([4, 1])
+    with col1:
+        user_input = st.text_input(
+            "",
+            placeholder="💬 Type your question here...",
+            key=f"user_input_{st.session_state.input_counter}",
+            label_visibility="collapsed"
+        )
+    with col2:
+        send_clicked = st.button("Send ➤", type="primary")
+    if (send_clicked or user_input) and user_input.strip():
+        process_message(user_input.strip())
+
+def process_message(user_message):
+    st.session_state.messages.append({
+        "role": "user",
+        "content": user_message,
+        "timestamp": datetime.now().strftime("%H:%M")
+    })
+    with st.spinner("🤖 AI is thinking..."):
+        try:
+            bot_response = ask_bot(user_message)
+        except Exception as e:
+            bot_response = f"❌ Sorry, I encountered an error: {str(e)}"
+    st.session_state.messages.append({
+        "role": "assistant",
+        "content": bot_response,
+        "timestamp": datetime.now().strftime("%H:%M")
+    })
+    st.session_state.input_counter += 1
+    st.rerun()
+
+# --- Sidebar ---
+def create_sidebar():
+    with st.sidebar:
+        st.markdown("## 🎛️ Chat Controls")
+        if st.button("🗑️ Clear Chat", type="secondary"):
+            st.session_state.messages = []
+            st.session_state.input_counter = 0
+            welcome = """🎉 Welcome to AI Customer Service!
+I'm your intelligent assistant, ready to help you with any questions or concerns.
+Feel free to ask me anything! 💬"""
+            st.session_state.messages.append({
+                "role": "assistant",
+                "content": welcome,
+                "timestamp": datetime.now().strftime("%H:%M")
+            })
+            st.rerun()
+
+        st.markdown("---")
+        st.markdown("## ⚡ Quick Questions")
+        quick_questions = [
+            "What services do you provide?",
+            "What are your pricing packages?",
+            "What are your business hours?",
+            "How can I contact support?",
+            "What is your refund policy?"
+        ]
+
+        cols = st.columns(2)
+        for i, question in enumerate(quick_questions):
+            with cols[i % 2]:
+                if st.button(f"💡 {question}", key=f"quick_{i}"):
+                    process_message(question)
+
+        st.markdown("---")
+        st.markdown("## 📊 Chat Statistics")
+        st.markdown(f"""
+            <div class="chat-stats">
+                <strong>Total Messages:</strong> {len(st.session_state.messages)}<br>
+                <strong>Your Questions:</strong> {len([m for m in st.session_state.messages if m['role'] == 'user'])}<br>
+                <strong>AI Responses:</strong> {len([m for m in st.session_state.messages if m['role'] == 'assistant'])}
+            </div>
+        """, unsafe_allow_html=True)
+
+# --- Main ---
+def main():
+    initialize_session_state()
+    st.markdown('<h1 class="chat-header">🤖 AI Customer Service Assistant</h1>', unsafe_allow_html=True)
+    create_sidebar()
+    chat_container = st.container()
+    with chat_container:
+        st.markdown("---")
+        display_chat_messages()
+    st.markdown("---")
+    handle_user_input()
+    st.markdown(
+        "<div style='text-align: center; color: #666; padding: 0.5rem;'>"
+        "🤖 Powered by AI • Built with Streamlit • Always here to help!"
+        "</div>", 
+        unsafe_allow_html=True
+    )
+
+if __name__ == "__main__":
+    main()