Update app.py

app.py

@@ -917,15 +917,15 @@ def create_gradio_app():
     :root {
         --primary-color: #FF000C;
         --secondary-color: #212832;
-        --background-color: var(--body-background-fill);
-        --card-color: var(--block-background-fill);
+        --background-color: white;
+        --card-color: white;
         --text-color: var(--body-text-color);
         --border-radius: 12px;
         --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
     
     .app-header {
-        background-color: var(--secondary-color);
+        background-color: white;
         padding: 20px;
         border-radius: var(--border-radius);
         margin-bottom: 20px;
@@ -940,14 +940,14 @@ def create_gradio_app():
     }
     
     .app-title {
-        color: white;
+        color: var(--primary-color);
         margin: 0;
         font-size: 24px;
         font-weight: 600;
     }
     
     .status-card, .catalog-card, .chat-card {
-        background-color: var(--card-color);
+        background-color: white;
         border-radius: var(--border-radius);
         padding: 15px;
         margin-bottom: 20px;
@@ -972,9 +972,10 @@ def create_gradio_app():
     }
     
     .bot-message {
-        background-color: #f0f0f0;
+        background-color: white;
         color: var(--text-color);
         margin-right: auto;
+        border: 1px solid #e0e0e0;
     }
     
     .footer {
@@ -997,14 +998,60 @@ def create_gradio_app():
     .action-button:hover {
         opacity: 0.9;
     }
-
+    
     .product-recommendation {
-        background-color: #f8f9fa;
+        background-color: white;
         border-left: 4px solid var(--primary-color);
         padding: 15px;
         margin-top: 20px;
         border-radius: 8px;
     }
+    
+    .quick-tips {
+        margin-bottom: 30px;
+    }
+    
+    .quick-tips h2 {
+        font-size: 20px;
+        margin-bottom: 16px;
+        border-bottom: 1px solid #e0e0e0;
+        padding-bottom: 8px;
+    }
+    
+    .tip-card {
+        background-color: white;
+        border: 1px solid #e0e0e0;
+        border-radius: var(--border-radius);
+        margin-bottom: 12px;
+        padding: 16px;
+        display: flex;
+        align-items: flex-start;
+    }
+    
+    .tip-icon {
+        flex-shrink: 0;
+        margin-right: 16px;
+        width: 24px;
+        height: 24px;
+    }
+    
+    .tip-content h3 {
+        margin: 0 0 8px 0;
+        font-size: 16px;
+        color: #212832;
+    }
+    
+    .tip-content p {
+        margin: 0;
+        font-size: 14px;
+        color: #666;
+        line-height: 1.5;
+    }
+    
+    /* Added to ensure the sidebar is placed correctly */
+    .sidebar {
+        height: 100%;
+    }
     """
     
     # Create Gradio interface
@@ -1024,49 +1071,62 @@ def create_gradio_app():
             # Chat Tab
             with gr.Tab("Chat"):
                 with gr.Row():
-                    with gr.Column(scale=3):
-                        # Chat interface with custom styling
-                        gr.HTML('<div class="content-card">')
-                        
-                        chatbot = gr.Chatbot(
-                            value=[],
-                            elem_id="chatbot",
-                            height=500,
-                            show_copy_button=True,
-                            avatar_images=[
-                                "https://ui-avatars.com/api/?name=You&background=0D8ABC&color=fff",
-                                "https://ui-avatars.com/api/?name=Ginnie&background=FF000C&color=fff"
-                            ]
-                        )
-                        
-                        with gr.Row():
-                            msg = gr.Textbox(
-                                placeholder="Ask about ABB products...",
-                                scale=8,
-                                show_label=False
-                            )
-                            send_btn = gr.Button("Send", elem_classes="action-button", scale=1)
-                            clear_btn = gr.Button("Clear", elem_classes="action-button", scale=1)
-                        
-                        product_gallery = gr.HTML()
-                        
-                        gr.HTML('</div>')
-                    
-                    with gr.Column(scale=1):
-                        # Quick tips card
-                        gr.HTML('<div class="status-card">')
-                        gr.HTML('''
-                        <h3>Quick Tips</h3>
-                        <ul>
-                            <li>Ask about specific ABB products</li>
-                            <li>Inquire about technical specifications</li>
-                            <li>Ask about installation and maintenance</li>
-                            <li>Get help with troubleshooting</li>
-                            <li>S3 Bucket Name=agent-product-discovery</li>
-                            <li>ABB Ability™ System 800xA® 6.2.pdf, Enclosed Softstarters.pdf, Ex-Solutions.pdf, Low_power_UPS_catalogue_EN.pdf</li>
-                        </ul>
-                        ''')
-                        gr.HTML('</div>')
+                    with gr.Column(scale=1, elem_classes="sidebar"):
+                        # Quick Tips
+                        gr.HTML("""
+                        <div class="quick-tips">
+                          <h2>Quick Tips</h2>
+                          <div class="tip-card">
+                            <div class="tip-icon search-icon">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" stroke="#FF000C" stroke-width="2" d="M15 15l6 6M10 17a7 7 0 100-14 7 7 0 000 14z"></path></svg>
+                            </div>
+                            <div class="tip-content">
+                              <h3>Product Search</h3>
+                              <p>Ask about specific products like "Tell me about circuit breakers" or "What are the specifications of motor starters?"</p>
+                            </div>
+                          </div>
+                          
+                          <div class="tip-card">
+                            <div class="tip-icon warning-icon">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" stroke="#FF000C" stroke-width="2" d="M12 9v4M12 17.5v.5M6.6 18h10.8a1 1 0 00.9-1.45L13.2 6.55a1 1 0 00-1.8 0L6.3 16.55A1 1 0 006.6 18z"></path></svg>
+                            </div>
+                            <div class="tip-content">
+                              <h3>Troubleshooting</h3>
+                              <p>Get help with issues: "How do I troubleshoot a circuit breaker that keeps tripping?" or "Common problems with contactors"</p>
+                            </div>
+                          </div>
+                          
+                          <div class="tip-card">
+                            <div class="tip-icon doc-icon">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" stroke="#FF000C" stroke-width="2" d="M14 3v4h4M9 3h8l4 4v12a2 2 0 01-2 2H9a2 2 0 01-2-2V5a2 2 0 012-2zm1 8h6m-6 4h6"></path></svg>
+                            </div>
+                            <div class="tip-content">
+                              <h3>Documentation</h3>
+                              <p>Find documentation: "Where can I find the manual for X product?" or "Show me installation instructions for Y"</p>
+                            </div>
+                          </div>
+                          
+                          <div class="tip-card">
+                            <div class="tip-icon image-icon">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" stroke="#FF000C" stroke-width="2" d="M5 3h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2zm0 16l4-4 2 2 4-4 4 4M8 10a2 2 0 100-4 2 2 0 000 4z"></path></svg>
+                            </div>
+                            <div class="tip-content">
+                              <h3>Images</h3>
+                              <p>Ask to see product images: "Show me images of circuit breakers" or "What does product X look like?"</p>
+                            </div>
+                          </div>
+                          
+                          <div class="tip-card">
+                            <div class="tip-icon settings-icon">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" stroke="#FF000C" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><circle cx="12" cy="12" r="3" stroke="#FF000C" stroke-width="2" fill="none"></circle></svg>
+                            </div>
+                            <div class="tip-content">
+                              <h3>Settings</h3>
+                              <p>Visit the Settings page to configure your API credentials, database settings, and image folder path.</p>
+                            </div>
+                          </div>
+                        </div>
+                        """)
                         
                         # Admin settings
                         with gr.Accordion("Admin Settings", open=False):
@@ -1091,14 +1151,41 @@ def create_gradio_app():
                                 process_url_btn = gr.Button("Process PDF from URL", elem_classes="action-button")
                                 result_text = gr.Textbox(label="Processing Result")
                         
-                        # Analytics tab
+                        # Analytics dashboard
                         with gr.Accordion("Analytics Dashboard", open=False):
                             # Product query distribution chart
                             product_chart = gr.Plot(label="Product Query Distribution")
-                            
                             # Daily query trend chart
                             trend_chart = gr.Plot(label="Daily Query Trend")
-            
+                    
+                    with gr.Column(scale=3):
+                        # Chat interface with custom styling
+                        gr.HTML('<div class="content-card">')
+                        
+                        chatbot = gr.Chatbot(
+                            value=[],
+                            elem_id="chatbot",
+                            height=500,
+                            show_copy_button=True,
+                            avatar_images=[
+                                "https://ui-avatars.com/api/?name=You&background=0D8ABC&color=fff",
+                                "https://ui-avatars.com/api/?name=Ginnie&background=FF000C&color=fff"
+                            ]
+                        )
+                        
+                        with gr.Row():
+                            msg = gr.Textbox(
+                                placeholder="Ask about ABB products...",
+                                scale=8,
+                                show_label=False
+                            )
+                            send_btn = gr.Button("Send", elem_classes="action-button", scale=1)
+                            clear_btn = gr.Button("Clear", elem_classes="action-button", scale=1)
+                        
+                        product_gallery = gr.HTML()
+                        
+                        gr.HTML('</div>')
+           
             # Guided Product Discovery Tab
             with gr.Tab("Guided Product Discovery"):
                 with gr.Row():