Update app.py

app.py

@@ -12,42 +12,117 @@ st.set_page_config(
 )
 
 # -----------------------
-# CUSTOM CSS (Modern UI)
+# MOBILE RESPONSIVE UI 🔥
 # -----------------------
 st.markdown("""
 <style>
+
+/* Main background */
+.stApp {
+    background-color: #0E1117;
+}
+
+/* Container padding (mobile fix) */
+.block-container {
+    padding-top: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    max-width: 100%;
+}
+
+/* Title */
+.title {
+    text-align: center;
+    font-size: 28px;
+    font-weight: bold;
+    color: white;
+}
+
+/* Subtitle */
+.subtitle {
+    text-align: center;
+    color: #AAAAAA;
+    font-size: 14px;
+    margin-bottom: 15px;
+}
+
+/* Chat container */
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+/* User bubble */
+.chat-row-user {
+    display: flex;
+    justify-content: flex-end;
+}
+
 .chat-bubble-user {
-    background-color: #DCF8C6;
-    padding: 12px 16px;
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 14px;
     border-radius: 15px;
-    margin: 8px 0;
-    text-align: right;
-    font-size: 16px;
+    font-size: 14px;
+    max-width: 85%;
+    word-wrap: break-word;
+}
+
+/* Bot bubble */
+.chat-row-bot {
+    display: flex;
+    justify-content: flex-start;
 }
+
 .chat-bubble-bot {
-    background-color: #F1F0F0;
-    padding: 12px 16px;
+    background-color: #2A2F3A;
+    color: white;
+    padding: 10px 14px;
     border-radius: 15px;
-    margin: 8px 0;
-    text-align: left;
-    font-size: 16px;
+    font-size: 14px;
+    max-width: 85%;
+    word-wrap: break-word;
 }
-.title {
-    text-align: center;
-    font-size: 34px;
-    font-weight: bold;
+
+/* Input box fix */
+textarea {
+    color: white !important;
+}
+
+/* -----------------------
+   MOBILE OPTIMIZATION 📱
+----------------------- */
+@media (max-width: 600px) {
+
+    .title {
+        font-size: 22px;
+    }
+
+    .chat-bubble-user,
+    .chat-bubble-bot {
+        font-size: 13px;
+        padding: 8px 12px;
+        max-width: 90%;
+    }
+
+    .block-container {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
 }
+
 </style>
 """, unsafe_allow_html=True)
 
 # -----------------------
-# TITLE
+# HEADER
 # -----------------------
 st.markdown('<div class="title">💬 Krish AI Chatbot</div>', unsafe_allow_html=True)
-st.write("🚀 Smart, Fast & Beautiful AI Chat Experience")
+st.markdown('<div class="subtitle">Smart, Fast & Beautiful AI Chat 🚀</div>', unsafe_allow_html=True)
 
 # -----------------------
-# API KEY (HF Secrets + Local fallback)
+# API KEY (Secrets + fallback)
 # -----------------------
 api_key = os.getenv("GROQ_API_KEY")
 
@@ -55,33 +130,41 @@ if not api_key:
     api_key = st.sidebar.text_input("Enter Groq API Key 🔑", type="password")
 
 if not api_key:
-    st.warning("Please enter your Groq API Key ⚠️")
+    st.warning("Please enter your Groq API key")
     st.stop()
 
 client = Groq(api_key=api_key)
 
 # -----------------------
-# MODEL (UPDATED ✅)
+# MODEL
 # -----------------------
 MODEL = "llama-3.1-8b-instant"
 
 # -----------------------
-# SESSION STATE (CHAT MEMORY)
+# SESSION STATE
 # -----------------------
 if "messages" not in st.session_state:
     st.session_state.messages = []
 
 # -----------------------
-# DISPLAY CHAT HISTORY
+# DISPLAY CHAT
 # -----------------------
 for msg in st.session_state.messages:
     if msg["role"] == "user":
-        st.markdown(f'<div class="chat-bubble-user">{msg["content"]}</div>', unsafe_allow_html=True)
+        st.markdown(f"""
+        <div class="chat-row-user">
+            <div class="chat-bubble-user">{msg["content"]}</div>
+        </div>
+        """, unsafe_allow_html=True)
     else:
-        st.markdown(f'<div class="chat-bubble-bot">{msg["content"]}</div>', unsafe_allow_html=True)
+        st.markdown(f"""
+        <div class="chat-row-bot">
+            <div class="chat-bubble-bot">{msg["content"]}</div>
+        </div>
+        """, unsafe_allow_html=True)
 
 # -----------------------
-# USER INPUT
+# INPUT
 # -----------------------
 user_input = st.chat_input("Type your message...")
 
@@ -89,16 +172,17 @@ if user_input:
     # Save user message
     st.session_state.messages.append({"role": "user", "content": user_input})
 
-    # Display user instantly
-    st.markdown(f'<div class="chat-bubble-user">{user_input}</div>', unsafe_allow_html=True)
+    # Show instantly
+    st.markdown(f"""
+    <div class="chat-row-user">
+        <div class="chat-bubble-user">{user_input}</div>
+    </div>
+    """, unsafe_allow_html=True)
 
-    # Placeholder for bot response (for streaming)
-    response_placeholder = st.empty()
+    # Placeholder for streaming
+    placeholder = st.empty()
     full_response = ""
 
-    # -----------------------
-    # STREAMING RESPONSE 🔥
-    # -----------------------
     try:
         stream = client.chat.completions.create(
             model=MODEL,
@@ -109,18 +193,21 @@ if user_input:
         for chunk in stream:
             content = chunk.choices[0].delta.content or ""
             full_response += content
-            response_placeholder.markdown(
-                f'<div class="chat-bubble-bot">{full_response}▌</div>',
-                unsafe_allow_html=True
-            )
-
-        # Final response (remove cursor)
-        response_placeholder.markdown(
-            f'<div class="chat-bubble-bot">{full_response}</div>',
-            unsafe_allow_html=True
-        )
 
-        # Save assistant message
+            placeholder.markdown(f"""
+            <div class="chat-row-bot">
+                <div class="chat-bubble-bot">{full_response}▌</div>
+            </div>
+            """, unsafe_allow_html=True)
+
+        # Final message
+        placeholder.markdown(f"""
+        <div class="chat-row-bot">
+            <div class="chat-bubble-bot">{full_response}</div>
+        </div>
+        """, unsafe_allow_html=True)
+
+        # Save
         st.session_state.messages.append(
             {"role": "assistant", "content": full_response}
         )