Upload app.py

app.py

@@ -1,3 +1,4 @@
+from turtle import color
 import gradio as gr
 import requests
 import os
@@ -119,12 +120,23 @@ custom_css = f"""
     }}
     
     /* Description text */
-    .description {{
-        color: {TEXT_COLOR} !important;
+    #descr p{{
+        color: black !important;
         font-size: 16px !important;
         margin-bottom: 20px !important;
     }}
     
+    #disclaimer {{
+        background-color: {PRIMARY_COLOR} !important;
+        color: white !important;
+        font-size: 16px !important;
+        border: 2px solid {SECONDARY_COLOR} !important;
+        border-radius: 8px !important;        
+    }}
+    #disclaimer p {{
+        color: white !important;        
+    }}
+
     /* User messages */
     #chatbot-window .message.user {{
         background-color: {SECONDARY_COLOR}  !important;
@@ -148,10 +160,30 @@ custom_css = f"""
      #chatbot-window .message.bot p{{
         color:  white !important;
     }}
-    
+    /* All text inside bot messages, avoids changes from browser theme */
+    #chatbot-window .message.bot *,
+    #chatbot-window .message.bot li {{
+        color: white !important;
+    }}
     /* Input textbox */
-      #input-textbox {{
+    #input-textbox {{
         background-color: {BACKGROUND_COLOR} !important;
+        
+    }}
+
+    /* this gets the text box and send button to align */
+    #component-4 {{
+    display: flex;          /* ensure it's a flex container */
+    align-items: center;    /* vertically centers children */
+    gap: 10px;              /* optional spacing between textbox & button */
+    }}
+
+    /* this removes the text box border that was unnecessary */
+    div.form {{
+    --block-border-width: 0px !important;
+    --block-shadow: none !important;
+    --block-radius: 0px !important;
+    padding: 0 !important;   
     }}
 
     #input-textbox textarea{{
@@ -171,6 +203,7 @@ custom_css = f"""
     button {{
         border-radius: 8px !important;
         font-weight: 600 !important;
+        
     }}
     
     
@@ -179,6 +212,7 @@ custom_css = f"""
         background-color: {PRIMARY_COLOR} !important;
         color: white !important;
         border: none !important;
+      
     }}
     
     #send-button:hover {{
@@ -223,9 +257,14 @@ with gr.Blocks(css=custom_css, analytics_enabled=False) as chatui:
     # Description
     gr.Markdown(
         "Ask Cosmo the cougar questions related to Crown Pointe Academy policies.",
-        elem_classes="description"
+        elem_classes="description",
+        elem_id="descr"
     )
     
+    #Diclaimer 
+    gr.HTML("<p> I am an AI guide on school policies, not the official source. I may " \
+    "generate misinformation. Verify all results with official school documents. </p>", elem_id="disclaimer")
+
     # Chatbot component - MUST use type='messages'
     chatbot = gr.Chatbot(
         type='messages',
@@ -238,7 +277,7 @@ with gr.Blocks(css=custom_css, analytics_enabled=False) as chatui:
     with gr.Row():
         msg = gr.Textbox(
             label="",
-            placeholder="Type your message here...",
+            placeholder="Type your question here...",
             scale=4,
             show_label=False,
             elem_id="input-textbox"
@@ -253,8 +292,9 @@ with gr.Blocks(css=custom_css, analytics_enabled=False) as chatui:
     # Example buttons
     gr.Examples(
         examples=[
-            "Summarize the school's uniform policy",
-            "Can a student wear earrings?"
+            "What is the dress code for students?",
+            "How do I report an absence?",
+            "What is the policy on cell phones?"
         ],
         inputs=msg,
         label="Try these examples:",