Update app.py

app.py

@@ -12,8 +12,131 @@ from langchain_community.vectorstores import Chroma
 from langchain.chains import RetrievalQA
 import re
 
+# Custom CSS Injection
+def inject_custom_css():
+    st.markdown("""
+        <style>
+            /* Main container */
+            .stApp {
+                background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
+                color: #e0e0e0;
+            }
+            
+            /* Chat containers */
+            .stChatMessage {
+                padding: 1.5rem;
+                border-radius: 15px;
+                margin: 1rem 0;
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            }
+            
+            /* User message styling */
+            [data-testid="stChatMessage"][aria-label="user"] {
+                background-color: #2d2d2d;
+                border: 1px solid #3d3d3d;
+                margin-left: 10%;
+            }
+            
+            /* Assistant message styling */
+            [data-testid="stChatMessage"][aria-label="assistant"] {
+                background-color: #004d40;
+                border: 1px solid #00695c;
+                margin-right: 10%;
+            }
+            
+            /* Sidebar styling */
+            [data-testid="stSidebar"] {
+                background: #121212 !important;
+                border-right: 2px solid #2d2d2d;
+                padding: 1rem;
+            }
+            
+            /* Button styling */
+            .stButton>button {
+                background: linear-gradient(45deg, #00695c, #004d40);
+                color: white !important;
+                border: none;
+                border-radius: 8px;
+                padding: 0.8rem 1.5rem;
+                transition: all 0.3s;
+                font-weight: 500;
+            }
+            
+            .stButton>button:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+            }
+            
+            /* File uploader */
+            [data-testid="stFileUploader"] {
+                border: 2px dashed #3d3d3d;
+                border-radius: 10px;
+                padding: 1rem;
+                background: #2d2d2d;
+            }
+            
+            /* Input field */
+            .stTextInput>div>div>input {
+                background-color: #2d2d2d;
+                color: white;
+                border: 1px solid #3d3d3d;
+                border-radius: 8px;
+                padding: 0.8rem;
+            }
+            
+            /* Spinner color */
+            .stSpinner>div>div {
+                border-color: #00bcd4 transparent transparent transparent;
+            }
+            
+            /* Custom title styling */
+            .title-text {
+                background: linear-gradient(45deg, #00bcd4, #00695c);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                font-family: 'Roboto', sans-serif;
+                font-size: 2.8rem;
+                text-align: center;
+                margin-bottom: 2rem;
+                letter-spacing: -0.5px;
+                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+            }
+            
+            /* Similar questions buttons */
+            .stButton>button.similar-q {
+                background: #2d2d2d;
+                border: 1px solid #00bcd4;
+                color: #00bcd4 !important;
+                white-space: normal;
+                height: auto;
+                min-height: 3rem;
+                transition: all 0.3s;
+            }
+            
+            /* Hover effects */
+            .stButton>button.similar-q:hover {
+                background: #004d40 !important;
+                transform: scale(1.02);
+            }
+            
+            /* Source text styling */
+            .source-text {
+                color: #00bcd4;
+                font-size: 0.9rem;
+                margin-top: 1rem;
+                padding-top: 0.5rem;
+                border-top: 1px solid #3d3d3d;
+            }
+        </style>
+    """, unsafe_allow_html=True)
+
 # Page Configuration
-st.set_page_config(page_title="Pakistan Law AI Agent", page_icon="⚖️")
+st.set_page_config(
+    page_title="AI Law Agent",
+    page_icon="⚖️",
+    layout="centered",
+    initial_sidebar_state="expanded"
+)
 
 # Constants
 DEFAULT_GROQ_API_KEY = os.getenv("GROQ_API_KEY")