Update scripts/main.py

scripts/main.py

@@ -73,26 +73,18 @@ def chat_response(message, history):
     except:
         return "Contact 4AT: +1 703 665 4255 | info@consult-4at.com"
 
-# ULTRA CLEAN CSS - NO BLUE BOXES!
-ultra_clean_css = """
-/* Reset everything */
-* {
-    margin: 0 !important;
-    padding: 0 !important;
-    box-sizing: border-box !important;
-}
-
+# ULTRA CLEAN CSS - REMOVE ALL BLUE BOXES!
+clean_no_boxes_css = """
 /* Clean container */
 .gradio-container {
     background: #1a1a1a !important;
     color: #ffffff !important;
     font-family: system-ui, -apple-system, sans-serif !important;
-    padding: 15px !important;
-    min-height: 100vh !important;
+    padding: 20px !important;
 }
 
 /* Clean title */
-.gradio-container h1 {
+h1 {
     color: #ffffff !important;
     font-size: 24px !important;
     text-align: center !important;
@@ -101,192 +93,145 @@ ultra_clean_css = """
 }
 
 /* Clean description */
-.gradio-container p {
+p {
     color: #cccccc !important;
     text-align: center !important;
     font-size: 14px !important;
     margin: 0 0 20px 0 !important;
 }
 
-/* CLEAN CHAT CONTAINER - NO BULK */
-.chatbot, .chat-interface {
+/* CLEAN CHAT CONTAINER */
+.chatbot {
     background: #2a2a2a !important;
     border: 1px solid #404040 !important;
-    border-radius: 8px !important;
-    max-width: 600px !important;
+    border-radius: 10px !important;
+    max-width: 700px !important;
     margin: 0 auto !important;
-    padding: 0 !important;
     min-height: 400px !important;
 }
 
-/* SMALL CLEAN MESSAGES - NO BIG BLUE BOXES */
+/* SMALL CLEAN MESSAGES */
 .message {
-    background: transparent !important;
-    border: none !important;
-    padding: 6px 10px !important;
-    margin: 3px 8px !important;
-    border-radius: 12px !important;
+    padding: 8px 12px !important;
+    margin: 5px 10px !important;
+    border-radius: 15px !important;
     font-size: 14px !important;
-    line-height: 1.3 !important;
-    max-width: 70% !important;
-    word-wrap: break-word !important;
+    line-height: 1.4 !important;
+    max-width: 75% !important;
 }
 
-/* Clean user message - small and neat */
+/* User message */
 .message.user {
     background: #0066cc !important;
     color: white !important;
     margin-left: auto !important;
-    margin-right: 8px !important;
-    text-align: right !important;
+    margin-right: 10px !important;
 }
 
-/* Clean bot message - small and neat */
+/* Bot message */
 .message.bot {
     background: #404040 !important;
     color: #ffffff !important;
     margin-right: auto !important;
-    margin-left: 8px !important;
-}
-
-/* Clean input area */
-.input-container {
-    background: #2a2a2a !important;
-    border-top: 1px solid #404040 !important;
-    padding: 10px !important;
+    margin-left: 10px !important;
 }
 
+/* Clean input */
 textarea {
     background: #404040 !important;
     border: 1px solid #606060 !important;
     color: #ffffff !important;
-    border-radius: 20px !important;
-    padding: 8px 15px !important;
+    border-radius: 25px !important;
+    padding: 10px 15px !important;
     font-size: 14px !important;
-    resize: none !important;
-    font-family: inherit !important;
 }
 
 textarea::placeholder {
     color: #888888 !important;
 }
 
-textarea:focus {
-    outline: none !important;
-    border-color: #0066cc !important;
-}
-
-/* Clean send button */
+/* Send button */
 button {
     background: #0066cc !important;
     border: none !important;
     color: white !important;
     border-radius: 50% !important;
-    width: 35px !important;
-    height: 35px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    cursor: pointer !important;
+    width: 40px !important;
+    height: 40px !important;
 }
 
-button:hover {
-    background: #0052a3 !important;
-}
-
-/* CLEAN EXAMPLES - NO BIG BOXES */
+/* HIDE ALL EXAMPLE BOXES - NO MORE BLUE BOXES! */
 .examples {
-    display: flex !important;
-    flex-wrap: wrap !important;
-    gap: 6px !important;
-    padding: 10px !important;
-    justify-content: center !important;
+    display: none !important;
 }
 
 .example {
-    background: #404040 !important;
-    color: #ffffff !important;
-    padding: 4px 8px !important;
-    border-radius: 12px !important;
-    font-size: 12px !important;
-    cursor: pointer !important;
-    border: none !important;
-    transition: background 0.2s !important;
+    display: none !important;
 }
 
-.example:hover {
-    background: #0066cc !important;
+.examples-container {
+    display: none !important;
 }
 
-/* Hide all unnecessary elements */
-.retry-btn, .undo-btn, .clear-btn, .share-btn, .duplicate-btn {
+/* Hide example buttons completely */
+.chatbot .examples,
+.chat-interface .examples,
+[class*="example"] {
     display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    width: 0 !important;
+    overflow: hidden !important;
 }
 
-/* Clean footer */
-.footer {
-    text-align: center !important;
-    margin: 15px auto 0 auto !important;
-    max-width: 600px !important;
-    padding: 10px !important;
-    color: #888888 !important;
-    font-size: 12px !important;
+/* Hide all unnecessary buttons */
+.retry-btn, .undo-btn, .clear-btn, .share-btn, .duplicate-btn {
+    display: none !important;
 }
 
 /* Mobile responsive */
 @media (max-width: 768px) {
-    .gradio-container {
-        padding: 10px !important;
-    }
-    
     .chatbot {
-        margin: 0 !important;
         max-width: 100% !important;
+        margin: 0 !important;
     }
     
     .message {
         max-width: 85% !important;
-        font-size: 13px !important;
     }
 }
 
-/* Remove gradio branding */
-.gradio-container footer {
-    display: none !important;
-}
-
-/* Smooth scrolling */
-.chatbot {
-    scroll-behavior: smooth !important;
-}
-
-/* Remove extra margins from gradio */
-.gradio-container > div {
-    gap: 10px !important;
+/* Remove any remaining blue elements */
+.chatbot > div,
+.chat-interface > div,
+.gradio-container > div > div {
+    background: transparent !important;
 }
 
-.gradio-container .block {
-    border: none !important;
-    background: transparent !important;
+/* Ensure no floating elements */
+.chatbot *[style*="position: absolute"],
+.chatbot *[style*="position: fixed"] {
+    display: none !important;
 }
 """
 
-# Create ultra clean interface
+# Create interface WITHOUT examples (no blue boxes!)
 demo = gr.ChatInterface(
     fn=chat_response,
     title="4AT Professional Assistant",
     description="Expert AI for Accounting, Audit, Advisory & Technology Services",
-    examples=[
-        "test",
-        "What is 4AT?",
-        "Who founded 4AT?",
-        "What services do you offer?",
-        "Who are your clients?",
-        "How to contact 4AT?"
-    ],
-    css=ultra_clean_css,
+    # NO EXAMPLES = NO BLUE BOXES!
+    css=clean_no_boxes_css,
     theme=gr.themes.Base()
 )
 
+# Add simple footer
+with demo:
+    gr.HTML("""
+        <div style="text-align: center; margin-top: 20px; color: #888; font-size: 12px;">
+            📞 +1 703 665 4255 | 📧 info@consult-4at.com | 🌍 USA • India • Australia
+        </div>
+    """)
+
 if __name__ == "__main__":
     demo.launch(debug=False)