Update app.py

app.py

@@ -10,8 +10,8 @@ from langchain_huggingface import HuggingFaceEmbeddings
 from langchain_community.document_loaders import UnstructuredMarkdownLoader
 from langchain_text_splitters import MarkdownHeaderTextSplitter
 from langchain_community.vectorstores import Chroma
-from langchain_classic.chains.combine_documents import create_stuff_documents_chain
-from langchain_classic.chains.retrieval import create_retrieval_chain
+from langchain.chains.combine_documents import create_stuff_documents_chain
+from langchain.chains.retrieval import create_retrieval_chain
 from langchain_core.prompts import PromptTemplate
 from huggingface_hub import InferenceClient
 from langchain_core.language_models.llms import LLM
@@ -53,11 +53,8 @@ except FileNotFoundError:
 # Create prompt template
 template = """
 {system_prompt}
-
 Context: {context}
-
 Question: {input}
-
 Answer:"""
 
 prompt = PromptTemplate(
@@ -119,14 +116,14 @@ def chat_with_portfolio(message, history):
     except Exception as e:
         return f"Error: {str(e)}"
 
-# Aesthetics
-# Purple Gradient
-# Modern Glassmorphism CSS for Gradio 5
+# Aesthetics - Fixed CSS for proper icon sizing
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap');
 
 /* Global Font and Body */
-* { font-family: 'Quicksand', sans-serif !important; }
+* { 
+    font-family: 'Quicksand', sans-serif !important; 
+}
 
 /* The Main Background */
 .gradio-container {
@@ -135,52 +132,96 @@ custom_css = """
 }
 
 /* Glassmorphism for the Chat bubbles */
-.message {
+.message-wrap {
     background: rgba(255, 255, 255, 0.15) !important;
     backdrop-filter: blur(12px) !important;
     -webkit-backdrop-filter: blur(12px) !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
     border-radius: 20px !important;
-    color: white !important;
 }
 
-/* Fix the Input Box so it's also Glassy */
-footer { display: none !important; } /* Hides the 'built with Gradio' footer */
+.message {
+    color: white !important;
+}
 
-#input-box textarea {
+/* Input Box Styling */
+.input-wrap textarea, 
+textarea {
     background: rgba(255, 255, 255, 0.1) !important;
     backdrop-filter: blur(8px) !important;
     color: white !important;
     border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    border-radius: 12px !important;
 }
 
-/* IMPORTANT: Fixes the "Giant Icon" bug by containing the button size */
-button.primary {
-    max-width: 150px !important;
-    height: auto !important;
+textarea::placeholder {
+    color: rgba(255, 255, 255, 0.6) !important;
 }
 
-/* Glass effect for the examples buttons */
-.load-example-btn {
+/* FIX FOR HUGE ICONS - Constrain all buttons and icons */
+button {
+    max-width: 100px !important;
+    max-height: 44px !important;
+    min-width: 40px !important;
+    padding: 8px 16px !important;
+}
+
+button svg {
+    width: 20px !important;
+    height: 20px !important;
+    max-width: 20px !important;
+    max-height: 20px !important;
+}
+
+/* Specific fix for send button */
+.submit-btn, 
+button[aria-label="Submit"] {
+    max-width: 60px !important;
+    width: 60px !important;
+}
+
+/* Example buttons styling */
+.examples button {
     background: rgba(255, 255, 255, 0.1) !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
     color: white !important;
+    max-width: 100% !important;
+    border-radius: 12px !important;
+}
+
+.examples button:hover {
+    background: rgba(255, 255, 255, 0.2) !important;
+}
+
+/* Hide Gradio footer */
+footer { 
+    display: none !important; 
+}
+
+/* Chatbot container styling */
+.chatbot {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border-radius: 20px !important;
 }
 """
 
 with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
     # Title with specific white color for contrast
-    gr.Markdown("<h1 style='text-align: center; color: white;'>🐈‍⬛ Chat with Adda-Bot</h1>")
+    gr.Markdown(
+        "<h1 style='text-align: center; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);'>🐈‍⬛ Chat with Adda-Bot</h1>"
+    )
     
     gr.ChatInterface(
         fn=chat_with_portfolio,
-        description="<span style='color: white;'>Ask me anything about Adda's portfolio!</span>",
+        description="<span style='color: white; font-weight: 600;'>Ask me anything about Adda's portfolio!</span>",
         examples=[
             "What is Adda's experience with Python?",
             "Tell me about her education.",
             "What projects has Adda worked on?"
         ],
-        type="messages", # Ensures modern formatting
+        type="messages",
+        textbox=gr.Textbox(placeholder="Ask about Adda's portfolio...", scale=7),
+        submit_btn="Send",
     )
 
 if __name__ == "__main__":