Update app.py

app.py

@@ -3,7 +3,7 @@ import requests
 import re
 import uuid
 
-# Backend URL - Update this with your actual Hugging Face Space URL
+# Backend URL - Hugging Face Space API endpoint
 BACKEND_URL = "https://shiva9876-code-gen-backend.hf.space"
 
 # Page Config with Logo
@@ -16,13 +16,10 @@ st.set_page_config(
 # Custom CSS for Logo & UI
 st.markdown("""
     <style>
-        /* Full Center Alignment */
-        .main-container {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 90vh;
+        /* Remove default padding */
+        .main .block-container {
+            padding-bottom: 120px;
+            max-height: calc(100vh - 140px);
         }
 
         /* Logo Centered */
@@ -40,6 +37,13 @@ st.markdown("""
             font-size: 28px;
             font-weight: bold;
             color: #03dac6;
+            margin-bottom: 20px;
+        }
+
+        /* Chat messages container - scrollable area */
+        .chat-messages {
+            margin-bottom: 20px;
+            padding-bottom: 10px;
         }
 
         /* Chatbox UI */
@@ -56,42 +60,43 @@ st.markdown("""
         .ai-message { border-left: 5px solid #ff9800; padding-left: 10px; }
         pre { white-space: pre-wrap; word-wrap: break-word; }
 
+        /* Fixed Input Container */
+        .fixed-input-container {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: #0e1117;
+            padding: 15px 20px;
+            border-top: 2px solid #262626;
+            z-index: 999;
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
+        }
+
+        /* Adjust for sidebar */
+        section[data-testid="stSidebar"] ~ .main .fixed-input-container {
+            left: calc(21rem);
+        }
+
+        @media (max-width: 768px) {
+            section[data-testid="stSidebar"] ~ .main .fixed-input-container {
+                left: 0;
+            }
+        }
+
         /* Search Bar Styling */
         .search-container {
             display: flex;
             align-items: center;
             width: 100%;
-            max-width: 600px;
+            max-width: 800px;
             margin: auto;
         }
 
-        .search-input {
-            flex-grow: 1;
-            padding: 12px 15px;
-            border-radius: 25px;
-            border: 2px solid #03dac6;
-            background-color: #262626;
-            color: white;
-            font-size: 16px;
-            outline: none;
-        }
-
-        /* Search Button */
-        .search-button {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            border: none;
-            background-color: #00ffcc;
-            color: black;
-            font-size: 16px;
-            cursor: pointer;
-            transition: 0.3s;
-            text-align: center;
-        }
-
-        .search-button:hover {
-            background-color: #02c2ad;
+        /* Hide default streamlit form */
+        .stForm {
+            border: none !important;
+            padding: 0 !important;
         }
 
         /* Clear Chat Button */
@@ -107,6 +112,35 @@ st.markdown("""
         .stButton>button:hover {
             background-color: #cc0000;
         }
+
+        /* Input field styling */
+        .stTextInput>div>div>input {
+            background-color: #262626;
+            color: white;
+            border: 2px solid #03dac6;
+            border-radius: 25px;
+            padding: 12px 15px;
+        }
+
+        .stTextInput>div>div>input:focus {
+            border-color: #00ffcc;
+            box-shadow: 0 0 0 0.2rem rgba(0, 255, 204, 0.25);
+        }
+
+        /* Form submit button */
+        .stFormSubmitButton>button {
+            background-color: #00ffcc !important;
+            color: black !important;
+            border-radius: 25px !important;
+            padding: 10px 30px !important;
+            border: none !important;
+            font-weight: bold !important;
+            transition: 0.3s !important;
+        }
+
+        .stFormSubmitButton>button:hover {
+            background-color: #02c2ad !important;
+        }
     </style>
 """, unsafe_allow_html=True)
 
@@ -126,26 +160,30 @@ if "messages" not in st.session_state:
 if "session_id" not in st.session_state:
     st.session_state.session_id = str(uuid.uuid4())
 
-# Display chat history
-for msg in st.session_state.messages:
-    if msg["role"] == "user":
-        st.markdown(f'<div class="chat-container user-message"><b>You:</b><br>{msg["content"]}</div>',
-                    unsafe_allow_html=True)
-    elif msg["role"] == "ai":
-        content = msg["content"]
-        
-        # Check if it's a conversational response or code response
-        if isinstance(content, tuple):
-            explanation, code = content
-            if explanation:
-                st.markdown(f'<div class="chat-container ai-message"><b>AI:</b><br>{explanation}</div>', 
+# Chat messages container (scrollable)
+chat_container = st.container()
+
+with chat_container:
+    # Display chat history
+    for msg in st.session_state.messages:
+        if msg["role"] == "user":
+            st.markdown(f'<div class="chat-container user-message"><b>You:</b><br>{msg["content"]}</div>',
+                        unsafe_allow_html=True)
+        elif msg["role"] == "ai":
+            content = msg["content"]
+            
+            # Check if it's a conversational response or code response
+            if isinstance(content, tuple):
+                explanation, code = content
+                if explanation:
+                    st.markdown(f'<div class="chat-container ai-message"><b>AI:</b><br>{explanation}</div>', 
+                               unsafe_allow_html=True)
+                if code:
+                    st.code(code, language="python")
+            else:
+                # Simple text response (for conversational messages)
+                st.markdown(f'<div class="chat-container ai-message"><b>AI:</b><br>{content}</div>', 
                            unsafe_allow_html=True)
-            if code:
-                st.code(code, language="python")
-        else:
-            # Simple text response (for conversational messages)
-            st.markdown(f'<div class="chat-container ai-message"><b>AI:</b><br>{content}</div>', 
-                       unsafe_allow_html=True)
 
 # Sidebar with options
 with st.sidebar:
@@ -175,18 +213,22 @@ with st.sidebar:
     st.divider()
     st.caption("💡 Tip: Ask coding questions or request code generation!")
 
-# Input Form
-st.markdown('<div class="search-container">', unsafe_allow_html=True)
-
-with st.form(key="input_form"):
-    user_input = st.text_input(
-        "Your Prompt:", 
-        key="user_prompt", 
-        placeholder="e.g., Write a function to sort a list or just say Hi!"
-    )
+# Fixed Input Form at the bottom
+st.markdown('<div class="fixed-input-container">', unsafe_allow_html=True)
 
-    # Single send button
-    submit_button = st.form_submit_button("SEND ↗️")
+with st.form(key="input_form", clear_on_submit=True):
+    col1, col2 = st.columns([5, 1])
+    
+    with col1:
+        user_input = st.text_input(
+            "Your Prompt:", 
+            key="user_prompt", 
+            placeholder="e.g., Write a function to sort a list or just say Hi!",
+            label_visibility="collapsed"
+        )
+    
+    with col2:
+        submit_button = st.form_submit_button("SEND ↗️", use_container_width=True)
 
 st.markdown("</div>", unsafe_allow_html=True)
 
@@ -278,11 +320,4 @@ if submit_button:
             except Exception as e:
                 st.error(f"❌ Unexpected error: {str(e)}")
     else:
-        st.warning("⚠️ Please enter a prompt before sending.")
-
-# Footer
-st.markdown("---")
-st.markdown(
-    '<div style="text-align: center; color: #888;">Powered by Groq AI | Built with ❤️ using Streamlit</div>',
-    unsafe_allow_html=True
-)
+        st.warning("⚠️ Please enter a prompt before sending.")