Update app.py

app.py

@@ -164,6 +164,9 @@ custom_css = """
     font-family: 'Arial', sans-serif;
     height: 400px;
     overflow-y: auto;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 15px;
 }
 .gr-button {
     background-color: #4CAF50 !important;
@@ -193,12 +196,83 @@ h1 {
     margin: auto;
     padding: 20px;
 }
+.info-panel {
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 20px;
+    border-left: 4px solid #2196F3;
+}
+.info-header {
+    color: #2C3E50;
+    font-weight: bold;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+.info-header i {
+    margin-right: 8px;
+    font-size: 18px;
+}
+.info-content {
+    margin-left: 26px;
+}
+.example-btn {
+    margin-bottom: 5px;
+}
 """
 
 with gr.Blocks(css=custom_css, title=f"{BUSINESS_CONFIG['name']} Support") as demo:
     with gr.Column(elem_id="container"):
         gr.Markdown(f"# 🤖 {BUSINESS_CONFIG['name']} Support Chat")
-        gr.Markdown("### How can I help you with our products and services today?")
+        
+        # Information panel with abilities, limitations, and usage instructions
+        with gr.Row():
+            with gr.Column(scale=3):
+                with gr.Box(elem_classes="info-panel"):
+                    gr.Markdown("""
+                    <div class="info-header"><i>💡</i> How to Use This Chatbot</div>
+                    <div class="info-content">
+                    This AI assistant can help you with product information, store policies, technical support, and more. 
+                    Just type your question in the chat box or click on any of the example questions to get started.
+                    </div>
+                    """)
+                
+                with gr.Box(elem_classes="info-panel"):
+                    gr.Markdown("""
+                    <div class="info-header"><i>✅</i> What I Can Help With</div>
+                    <div class="info-content">
+                    • Product information, specifications, and pricing<br>
+                    • Store hours, location, and contact information<br>
+                    • Shipping options and return policies<br>
+                    • Technical support and troubleshooting<br>
+                    • Product comparisons and recommendations<br>
+                    • Service information and repair options
+                    </div>
+                    """)
+                
+                with gr.Box(elem_classes="info-panel"):
+                    gr.Markdown("""
+                    <div class="info-header"><i>⚠️</i> Limitations</div>
+                    <div class="info-content">
+                    • I can't process orders or payments directly<br>
+                    • I don't have access to your personal account information<br>
+                    • For complex issues, I may connect you with a human specialist<br>
+                    • My knowledge is based on information available up to my last training
+                    </div>
+                    """)
+            
+            with gr.Column(scale=2):
+                gr.Markdown("### 🏪 Store Information")
+                gr.Markdown(f"""
+                **Hours**: {BUSINESS_CONFIG['hours']}  
+                **Address**: {BUSINESS_CONFIG['address']}  
+                **Phone**: {BUSINESS_CONFIG['phone']}  
+                **Email**: {BUSINESS_CONFIG['email']}  
+                **Shipping**: {BUSINESS_CONFIG['shipping']}
+                """)
+        
+        gr.Markdown("---")
         
         with gr.Row():
             with gr.Column(scale=2):
@@ -232,17 +306,9 @@ with gr.Blocks(css=custom_css, title=f"{BUSINESS_CONFIG['name']} Support") as de
                         ["What payment methods do you accept?"]
                     ],
                     inputs=msg,
-                    label="Click any question to try it!"
+                    label="Click any question to try it!",
+                    examples_per_page=7
                 )
-                
-                gr.Markdown("### 🏪 Store Information")
-                gr.Markdown(f"""
-                - **Hours**: {BUSINESS_CONFIG['hours']}
-                - **Address**: {BUSINESS_CONFIG['address']}
-                - **Phone**: {BUSINESS_CONFIG['phone']}
-                - **Email**: {BUSINESS_CONFIG['email']}
-                - **Shipping**: {BUSINESS_CONFIG['shipping']}
-                """)
         
         # Event handlers
         msg.submit(chat_with_bot, [msg, chatbot], [msg, chatbot])