Update app.py

app.py

@@ -251,7 +251,7 @@ Provide a thorough and helpful response. If suggesting code changes, provide com
 # Initialize the copilot
 copilot = CodingCopilot()
 
-# Professional Black & Red CSS Theme
+# Enhanced Professional CSS Theme with Better Layout
 professional_css = """
 /* Global Styles */
 * {
@@ -259,21 +259,23 @@ professional_css = """
 }
 
 .gradio-container {
-    max-width: 1400px !important;
+    max-width: 1600px !important;
     margin: 0 auto !important;
     background: #0a0a0a !important;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
     color: #ffffff !important;
+    padding: 1rem !important;
 }
 
 /* Header Styles */
 .header-container {
     background: linear-gradient(135deg, #1a1a1a 0%, #2d1b1b 50%, #1a1a1a 100%) !important;
     border: 1px solid #dc2626 !important;
-    border-radius: 12px !important;
+    border-radius: 16px !important;
     padding: 2rem !important;
-    margin-bottom: 2rem !important;
-    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.1) !important;
+    margin-bottom: 1.5rem !important;
+    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.15) !important;
+    text-align: center !important;
 }
 
 .header-title {
@@ -281,7 +283,6 @@ professional_css = """
     font-size: 2.5rem !important;
     font-weight: 700 !important;
     margin: 0 !important;
-    text-align: center !important;
     background: linear-gradient(135deg, #ffffff 0%, #dc2626 100%) !important;
     -webkit-background-clip: text !important;
     -webkit-text-fill-color: transparent !important;
@@ -291,86 +292,162 @@ professional_css = """
 .header-subtitle {
     color: #a1a1aa !important;
     font-size: 1.1rem !important;
-    text-align: center !important;
     margin: 0.5rem 0 0 0 !important;
     font-weight: 400 !important;
 }
 
-/* Main Layout */
-.main-container {
-    background: #111111 !important;
-    border-radius: 16px !important;
-    border: 1px solid #262626 !important;
-    overflow: hidden !important;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
+/* Main Layout - Two Column */
+.main-layout {
+    display: flex !important;
+    gap: 1.5rem !important;
+    height: 100% !important;
+    align-items: stretch !important;
 }
 
 /* Sidebar */
 .sidebar {
     background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
-    border-right: 1px solid #dc2626 !important;
+    border: 1px solid #dc2626 !important;
+    border-radius: 16px !important;
     padding: 2rem !important;
-    height: 100% !important;
-    min-height: 700px !important;
+    min-width: 350px !important;
+    max-width: 350px !important;
+    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.1) !important;
+}
+
+.sidebar-section {
+    margin-bottom: 2rem !important;
 }
 
 .sidebar-title {
     color: #dc2626 !important;
     font-weight: 700 !important;
     font-size: 1.2rem !important;
-    margin-bottom: 1.5rem !important;
+    margin-bottom: 1rem !important;
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
 }
 
-.sidebar-content {
+.capabilities-list {
     color: #d1d5db !important;
     font-size: 0.9rem !important;
     line-height: 1.6 !important;
+    margin-bottom: 0 !important;
 }
 
-.sidebar-content strong {
+.capabilities-list strong {
     color: #ffffff !important;
+    display: block !important;
+    margin-bottom: 0.3rem !important;
 }
 
-/* Chat Interface */
+.capability-item {
+    margin-bottom: 1rem !important;
+    padding: 0.5rem 0 !important;
+    border-bottom: 1px solid #262626 !important;
+}
+
+.capability-item:last-child {
+    border-bottom: none !important;
+}
+
+/* Quick Action Buttons */
+.quick-action-button {
+    background: #1a1a1a !important;
+    color: #dc2626 !important;
+    border: 1px solid #dc2626 !important;
+    border-radius: 10px !important;
+    padding: 0.75rem 1rem !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    margin-bottom: 0.5rem !important;
+    width: 100% !important;
+    text-align: left !important;
+    font-size: 0.9rem !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+}
+
+.quick-action-button:hover {
+    background: #dc2626 !important;
+    color: #ffffff !important;
+    transform: translateX(4px) !important;
+    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
+}
+
+/* Chat Container */
 .chat-container {
-    background: #0f0f0f !important;
-    border-radius: 0 !important;
+    background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%) !important;
+    border: 1px solid #262626 !important;
+    border-radius: 16px !important;
+    flex: 1 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Chat Interface */
+.chat-interface {
+    background: transparent !important;
     border: none !important;
-    min-height: 600px !important;
-    max-height: 600px !important;
+    flex: 1 !important;
+    min-height: 500px !important;
+    max-height: 500px !important;
     overflow-y: auto !important;
+    padding: 1rem !important;
 }
 
 .chatbot {
     background: transparent !important;
     border: none !important;
+    height: 100% !important;
 }
 
-/* Input Area */
+/* Compact File Upload */
+.file-upload-compact {
+    background: #1a1a1a !important;
+    border: 1px solid #404040 !important;
+    border-radius: 10px !important;
+    padding: 0.75rem !important;
+    margin: 1rem !important;
+    transition: all 0.3s ease !important;
+}
+
+.file-upload-compact:hover {
+    border-color: #dc2626 !important;
+    background: #262626 !important;
+}
+
+/* Input Section */
 .input-section {
     background: #1a1a1a !important;
     border-top: 1px solid #262626 !important;
-    padding: 1.5rem !important;
+    padding: 1rem !important;
 }
 
 .input-row {
     display: flex !important;
-    gap: 1rem !important;
+    gap: 0.75rem !important;
     align-items: flex-end !important;
 }
 
 .message-input {
     background: #262626 !important;
     border: 1px solid #404040 !important;
-    border-radius: 12px !important;
+    border-radius: 10px !important;
     color: #ffffff !important;
-    padding: 1rem !important;
-    font-size: 1rem !important;
-    line-height: 1.5 !important;
+    padding: 0.75rem !important;
+    font-size: 0.95rem !important;
+    line-height: 1.4 !important;
     resize: vertical !important;
     transition: all 0.3s ease !important;
+    flex: 1 !important;
 }
 
 .message-input:focus {
@@ -388,15 +465,16 @@ professional_css = """
     background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
     color: white !important;
     border: none !important;
-    border-radius: 12px !important;
-    padding: 1rem 2rem !important;
+    border-radius: 10px !important;
+    padding: 0.75rem 1.5rem !important;
     font-weight: 600 !important;
-    font-size: 1rem !important;
+    font-size: 0.9rem !important;
     cursor: pointer !important;
     transition: all 0.3s ease !important;
     box-shadow: 0 4px 16px rgba(220, 38, 38, 0.2) !important;
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
+    min-width: 80px !important;
 }
 
 .primary-button:hover {
@@ -409,7 +487,7 @@ professional_css = """
     background: #262626 !important;
     color: #ffffff !important;
     border: 1px solid #404040 !important;
-    border-radius: 12px !important;
+    border-radius: 10px !important;
     padding: 0.75rem 1.5rem !important;
     font-weight: 500 !important;
     cursor: pointer !important;
@@ -417,6 +495,7 @@ professional_css = """
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
     font-size: 0.9rem !important;
+    min-width: 80px !important;
 }
 
 .secondary-button:hover {
@@ -425,55 +504,13 @@ professional_css = """
     transform: translateY(-1px) !important;
 }
 
-.quick-action-button {
-    background: #1a1a1a !important;
-    color: #dc2626 !important;
-    border: 1px solid #dc2626 !important;
-    border-radius: 8px !important;
-    padding: 0.75rem 1rem !important;
-    font-weight: 500 !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    margin-bottom: 0.5rem !important;
-    width: 100% !important;
-    text-align: left !important;
-    font-size: 0.9rem !important;
-}
-
-.quick-action-button:hover {
-    background: #dc2626 !important;
-    color: #ffffff !important;
-    transform: translateX(4px) !important;
-}
-
-/* File Upload */
-.file-upload {
-    background: #1a1a1a !important;
-    border: 2px dashed #404040 !important;
-    border-radius: 12px !important;
-    padding: 1.5rem !important;
-    text-align: center !important;
-    transition: all 0.3s ease !important;
-    color: #d1d5db !important;
-}
-
-.file-upload:hover {
-    border-color: #dc2626 !important;
-    background: #262626 !important;
-}
-
-.file-upload-text {
-    color: #9ca3af !important;
-    font-size: 0.9rem !important;
-}
-
 /* Download Section */
 .download-section {
     background: #1a1a1a !important;
-    border: 1px solid #262626 !important;
-    border-radius: 12px !important;
+    border: 1px solid #dc2626 !important;
+    border-radius: 10px !important;
     padding: 1rem !important;
-    margin-top: 1rem !important;
+    margin: 1rem !important;
 }
 
 .download-title {
@@ -483,53 +520,16 @@ professional_css = """
     font-size: 1rem !important;
 }
 
-/* Status Messages */
-.status-success {
-    background: linear-gradient(135deg, #065f46 0%, #047857 100%) !important;
-    border: 1px solid #10b981 !important;
-    border-radius: 8px !important;
-    padding: 1rem !important;
-    color: #ffffff !important;
-    font-size: 0.9rem !important;
-    margin: 0.5rem 0 !important;
-}
-
-.status-error {
-    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
-    border: 1px solid #dc2626 !important;
-    border-radius: 8px !important;
-    padding: 1rem !important;
-    color: #ffffff !important;
-    font-size: 0.9rem !important;
-    margin: 0.5rem 0 !important;
-}
-
-/* Code Blocks */
-pre {
-    background: #0a0a0a !important;
-    border: 1px solid #262626 !important;
-    border-radius: 8px !important;
-    padding: 1rem !important;
-    color: #ffffff !important;
-    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
-    font-size: 0.9rem !important;
-    line-height: 1.4 !important;
-    overflow-x: auto !important;
-}
-
-code {
-    background: #1a1a1a !important;
-    color: #dc2626 !important;
-    padding: 0.2rem 0.4rem !important;
-    border-radius: 4px !important;
-    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
-    font-size: 0.9rem !important;
+/* Icons */
+.emoji-icon {
+    font-size: 1.2rem !important;
+    margin-right: 0.3rem !important;
 }
 
 /* Scrollbar */
 ::-webkit-scrollbar {
-    width: 8px !important;
-    height: 8px !important;
+    width: 6px !important;
+    height: 6px !important;
 }
 
 ::-webkit-scrollbar-track {
@@ -538,7 +538,7 @@ code {
 
 ::-webkit-scrollbar-thumb {
     background: #404040 !important;
-    border-radius: 4px !important;
+    border-radius: 3px !important;
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -546,9 +546,25 @@ code {
 }
 
 /* Mobile Responsiveness */
+@media (max-width: 1024px) {
+    .main-layout {
+        flex-direction: column !important;
+    }
+    
+    .sidebar {
+        min-width: auto !important;
+        max-width: none !important;
+        order: 2 !important;
+    }
+    
+    .chat-container {
+        order: 1 !important;
+    }
+}
+
 @media (max-width: 768px) {
     .gradio-container {
-        padding: 1rem !important;
+        padding: 0.5rem !important;
     }
     
     .header-title {
@@ -556,16 +572,15 @@ code {
     }
     
     .sidebar {
-        min-height: auto !important;
         padding: 1rem !important;
     }
     
     .input-row {
         flex-direction: column !important;
-        gap: 1rem !important;
+        gap: 0.5rem !important;
     }
     
-    .primary-button {
+    .primary-button, .secondary-button {
         width: 100% !important;
     }
 }
@@ -588,6 +603,7 @@ code {
     text-align: center !important;
     color: #6b7280 !important;
     margin-top: 2rem !important;
+    border-radius: 12px !important;
 }
 
 .footer strong {
@@ -635,108 +651,100 @@ with gr.Blocks(css=professional_css, title="Coding Copilot Pro", theme=gr.themes
     # Header
     gr.HTML("""
     <div class="header-container">
-        <h1 class="header-title">⚡ CODING COPILOT PRO</h1>
+        <h1 class="header-title">🚀 CODING COPILOT PRO</h1>
         <p class="header-subtitle">Advanced AI-Powered Development Assistant • Powered by Claude 3 Haiku</p>
     </div>
     """)
     
-    # Main interface
-    with gr.Row(equal_height=True):
-        # Sidebar
-        with gr.Column(scale=1, min_width=300):
-            gr.HTML('<div class="sidebar">')
-            
-            gr.HTML('<h3 class="sidebar-title">🚀 CAPABILITIES</h3>')
-            gr.Markdown("""
-            <div class="sidebar-content">
-            
-            **💻 Code Generation:**
-            • Complete applications & modules
-            • Production-ready implementations
-            • Custom algorithms & data structures
-            • API integrations & web services
-            
-            **🔧 Code Analysis:**
-            • Comprehensive code reviews
-            • Performance optimization
-            • Security vulnerability detection
-            • Architecture recommendations
-            
-            **🐛 Debugging & Testing:**
-            • Error detection & fixes
-            • Unit test generation
-            • Code refactoring
-            • Best practices enforcement
+    # Main layout with two columns
+    with gr.Row(elem_classes=["main-layout"]):
+        
+        # Sidebar with capabilities and quick actions
+        with gr.Column(elem_classes=["sidebar"]):
             
-            **📚 Documentation:**
-            • Comprehensive docstrings
-            • API documentation
-            • Code explanations
-            • Technical specifications
+            # Capabilities Section
+            gr.HTML('<div class="sidebar-section">')
+            gr.HTML('<h3 class="sidebar-title"><span class="emoji-icon">🎯</span>CAPABILITIES</h3>')
             
+            gr.HTML("""
+            <div class="capabilities-list">
+                <div class="capability-item">
+                    <strong>💻 Code Generation</strong>
+                    Complete applications, modules, algorithms & APIs
+                </div>
+                <div class="capability-item">
+                    <strong>🔍 Code Analysis</strong>
+                    Reviews, optimization, security & architecture
+                </div>
+                <div class="capability-item">
+                    <strong>🐛 Debug & Test</strong>
+                    Error fixes, unit tests & refactoring
+                </div>
+                <div class="capability-item">
+                    <strong>📚 Documentation</strong>
+                    Docstrings, API docs & explanations
+                </div>
             </div>
-            """, elem_classes=["sidebar-content"])
+            """)
+            gr.HTML('</div>')
             
-            gr.HTML('<h3 class="sidebar-title">⚡ QUICK ACTIONS</h3>')
+            # Quick Actions Section
+            gr.HTML('<div class="sidebar-section">')
+            gr.HTML('<h3 class="sidebar-title"><span class="emoji-icon">⚡</span>QUICK ACTIONS</h3>')
             
-            with gr.Column():
-                quick_review = gr.Button("📋 COMPREHENSIVE REVIEW", elem_classes=["quick-action-button"])
-                quick_debug = gr.Button("🐛 DEBUG & FIX", elem_classes=["quick-action-button"])
-                quick_optimize = gr.Button("⚡ OPTIMIZE CODE", elem_classes=["quick-action-button"])
-                quick_explain = gr.Button("📖 EXPLAIN & DOCUMENT", elem_classes=["quick-action-button"])
-                quick_generate = gr.Button("🔥 GENERATE NEW CODE", elem_classes=["quick-action-button"])
-                quick_test = gr.Button("🧪 CREATE TESTS", elem_classes=["quick-action-button"])
+            quick_review = gr.Button("📋 Comprehensive Review", elem_classes=["quick-action-button"])
+            quick_debug = gr.Button("🐛 Debug & Fix", elem_classes=["quick-action-button"])
+            quick_optimize = gr.Button("⚡ Optimize Code", elem_classes=["quick-action-button"])
+            quick_explain = gr.Button("📖 Explain & Document", elem_classes=["quick-action-button"])
+            quick_generate = gr.Button("🔥 Generate New Code", elem_classes=["quick-action-button"])
+            quick_test = gr.Button("🧪 Create Tests", elem_classes=["quick-action-button"])
             
             gr.HTML('</div>')
         
-        # Main chat area
-        with gr.Column(scale=3):
-            gr.HTML('<div class="main-container">')
+        # Chat container
+        with gr.Column(elem_classes=["chat-container"]):
             
             # Chat interface
             chatbot = gr.Chatbot(
-                height=600,
+                height=500,
                 show_label=False,
                 container=False,
                 bubble_full_width=False,
                 avatar_images=("👨‍💻", "🤖"),
-                elem_classes=["chat-container"]
+                elem_classes=["chat-interface"]
             )
             
-            # Download section
-            download_status = gr.HTML("", visible=True)
-            download_file = gr.File(label="📥 Download Generated Code", visible=False)
-            
-            # Input section
-            gr.HTML('<div class="input-section">')
-            
-            # File upload
-            with gr.Row():
+            # Compact file upload section
+            with gr.Row(elem_classes=["file-upload-compact"]):
                 files = gr.File(
                     label="📎 Upload Code Files (.py, .ipynb)",
                     file_count="multiple",
                     file_types=[".py", ".ipynb"],
-                    elem_classes=["file-upload"]
+                    scale=1,
+                    show_label=True,
+                    container=True
                 )
             
-            # Message input and buttons
-            with gr.Row(elem_classes=["input-row"]):
-                msg = gr.Textbox(
-                    label="",
-                    placeholder="Describe what you want to build, analyze, or improve... Type 'continue' to extend previous code.",
-                    show_label=False,
-                    lines=2,
-                    max_lines=4,
-                    scale=4,
-                    elem_classes=["message-input"]
-                )
-                
-                with gr.Column(scale=1):
-                    submit = gr.Button("SEND", variant="primary", elem_classes=["primary-button"])
-                    clear = gr.Button("CLEAR", variant="secondary", elem_classes=["secondary-button"])
+            # Download section
+            download_status = gr.HTML("", visible=True)
+            download_file = gr.File(label="📥 Download Generated Code", visible=False)
             
-            gr.HTML('</div>')
-            gr.HTML('</div>')
+            # Input section
+            with gr.Row(elem_classes=["input-section"]):
+                with gr.Column(scale=1):
+                    with gr.Row(elem_classes=["input-row"]):
+                        msg = gr.Textbox(
+                            label="",
+                            placeholder="Describe what you want to build, analyze, or improve... Type 'continue' to extend previous code.",
+                            show_label=False,
+                            lines=2,
+                            max_lines=4,
+                            elem_classes=["message-input"]
+                        )
+                        
+                        with gr.Column(min_width=100):
+                            submit = gr.Button("SEND", variant="primary", elem_classes=["primary-button"])
+                            clear = gr.Button("CLEAR", variant="secondary", elem_classes=["secondary-button"])
     
     # Hidden state
     chat_history = gr.State([])
@@ -804,7 +812,7 @@ with gr.Blocks(css=professional_css, title="Coding Copilot Pro", theme=gr.themes
     # Footer
     gr.HTML("""
     <div class="footer">
-        <p><strong>CODING COPILOT PRO</strong> • Professional Development Assistant</p>
+        <p><strong>🚀 CODING COPILOT PRO</strong> • Professional Development Assistant</p>
         <p>Upload your code files and start building • Advanced AI • Secure & Private</p>
     </div>
     """)