Update app.py

app.py

@@ -251,20 +251,19 @@ Provide a thorough and helpful response. If suggesting code changes, provide com
 # Initialize the copilot
 copilot = CodingCopilot()
 
-# Enhanced Professional CSS Theme with Fixed Layout
-professional_css = """
-/* Global Styles */
-* {
-    box-sizing: border-box;
-}
-
+# Fixed Desktop Layout CSS
+desktop_css = """
+/* Force desktop layout */
 .gradio-container {
-    max-width: 1600px !important;
-    margin: 0 auto !important;
+    max-width: none !important;
+    width: 100vw !important;
+    height: 100vh !important;
     background: #0a0a0a !important;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
     color: #ffffff !important;
     padding: 1rem !important;
+    box-sizing: border-box !important;
+    overflow: hidden !important;
 }
 
 /* Header Styles */
@@ -272,15 +271,15 @@ professional_css = """
     background: linear-gradient(135deg, #1a1a1a 0%, #2d1b1b 50%, #1a1a1a 100%) !important;
     border: 1px solid #dc2626 !important;
     border-radius: 16px !important;
-    padding: 2rem !important;
-    margin-bottom: 1.5rem !important;
+    padding: 1.5rem !important;
+    margin-bottom: 1rem !important;
     box-shadow: 0 8px 32px rgba(220, 38, 38, 0.15) !important;
     text-align: center !important;
 }
 
 .header-title {
     color: #ffffff !important;
-    font-size: 2.5rem !important;
+    font-size: 2.2rem !important;
     font-weight: 700 !important;
     margin: 0 !important;
     background: linear-gradient(135deg, #ffffff 0%, #dc2626 100%) !important;
@@ -291,41 +290,76 @@ professional_css = """
 
 .header-subtitle {
     color: #a1a1aa !important;
-    font-size: 1.1rem !important;
+    font-size: 1rem !important;
     margin: 0.5rem 0 0 0 !important;
     font-weight: 400 !important;
 }
 
-/* Main Layout - Side by Side */
-.main-layout {
+/* FORCE DESKTOP LAYOUT - Critical CSS */
+.desktop-layout {
     display: flex !important;
+    flex-direction: row !important;
     gap: 1.5rem !important;
-    height: 100% !important;
+    height: calc(100vh - 200px) !important;
+    width: 100% !important;
     align-items: stretch !important;
-    flex-direction: row !important;
+    min-height: 600px !important;
 }
 
-/* Sidebar - Fixed Width */
-.sidebar {
+/* Force sidebar to stay on left */
+.desktop-sidebar {
     background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
     border: 1px solid #dc2626 !important;
     border-radius: 16px !important;
-    padding: 2rem !important;
-    width: 350px !important;
-    min-width: 350px !important;
-    max-width: 350px !important;
+    padding: 1.5rem !important;
+    width: 320px !important;
+    min-width: 320px !important;
+    max-width: 320px !important;
     flex-shrink: 0 !important;
+    flex-grow: 0 !important;
     box-shadow: 0 8px 32px rgba(220, 38, 38, 0.1) !important;
+    overflow-y: auto !important;
+    height: 100% !important;
+}
+
+/* Force chat to stay on right and take remaining space */
+.desktop-chat {
+    background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%) !important;
+    border: 1px solid #262626 !important;
+    border-radius: 16px !important;
+    flex: 1 !important;
+    flex-grow: 1 !important;
+    flex-shrink: 1 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
+    height: 100% !important;
+    min-width: 0 !important;
 }
 
+/* Override Gradio's column behavior */
+.desktop-layout > .block:first-child {
+    width: 320px !important;
+    min-width: 320px !important;
+    max-width: 320px !important;
+    flex: none !important;
+}
+
+.desktop-layout > .block:last-child {
+    flex: 1 !important;
+    min-width: 0 !important;
+}
+
+/* Sidebar content */
 .sidebar-section {
-    margin-bottom: 2rem !important;
+    margin-bottom: 1.5rem !important;
 }
 
 .sidebar-title {
     color: #dc2626 !important;
     font-weight: 700 !important;
-    font-size: 1.2rem !important;
+    font-size: 1.1rem !important;
     margin-bottom: 1rem !important;
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
@@ -336,9 +370,8 @@ professional_css = """
 
 .capabilities-list {
     color: #d1d5db !important;
-    font-size: 0.9rem !important;
-    line-height: 1.6 !important;
-    margin-bottom: 0 !important;
+    font-size: 0.85rem !important;
+    line-height: 1.5 !important;
 }
 
 .capabilities-list strong {
@@ -362,104 +395,91 @@ professional_css = """
     background: #1a1a1a !important;
     color: #dc2626 !important;
     border: 1px solid #dc2626 !important;
-    border-radius: 10px !important;
-    padding: 0.75rem 1rem !important;
+    border-radius: 8px !important;
+    padding: 0.6rem 0.8rem !important;
     font-weight: 500 !important;
     cursor: pointer !important;
     transition: all 0.3s ease !important;
-    margin-bottom: 0.5rem !important;
+    margin-bottom: 0.4rem !important;
     width: 100% !important;
     text-align: left !important;
-    font-size: 0.9rem !important;
+    font-size: 0.8rem !important;
     display: flex !important;
     align-items: center !important;
-    gap: 0.5rem !important;
+    gap: 0.4rem !important;
 }
 
 .quick-action-button:hover {
     background: #dc2626 !important;
     color: #ffffff !important;
-    transform: translateX(4px) !important;
+    transform: translateX(3px) !important;
     box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
 }
 
-/* Chat Container - Takes remaining space */
-.chat-container {
-    background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%) !important;
-    border: 1px solid #262626 !important;
-    border-radius: 16px !important;
+/* Chat Container Layout */
+.chat-main {
     flex: 1 !important;
     display: flex !important;
     flex-direction: column !important;
+    height: 100% !important;
     overflow: hidden !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
-    min-height: 600px !important;
 }
 
-/* Chat Interface */
-.chat-interface {
-    background: transparent !important;
-    border: none !important;
+.chat-messages {
     flex: 1 !important;
-    min-height: 400px !important;
-    max-height: 500px !important;
     overflow-y: auto !important;
     padding: 1rem !important;
+    height: 0 !important; /* Force flex child to respect parent height */
 }
 
-.chatbot {
-    background: transparent !important;
-    border: none !important;
-    height: 100% !important;
+.chat-input-area {
+    flex-shrink: 0 !important;
+    background: #1a1a1a !important;
+    border-top: 1px solid #262626 !important;
+    padding: 1rem !important;
 }
 
-/* File Upload Section */
-.file-upload-section {
+/* File Upload Styling */
+.file-upload-area {
     background: #1a1a1a !important;
-    border: 1px solid #404040 !important;
-    border-radius: 10px !important;
-    padding: 1rem !important;
-    margin: 1rem !important;
+    border: 1px dashed #404040 !important;
+    border-radius: 8px !important;
+    padding: 0.8rem !important;
+    margin-bottom: 1rem !important;
     transition: all 0.3s ease !important;
 }
 
-.file-upload-section:hover {
+.file-upload-area:hover {
     border-color: #dc2626 !important;
     background: #262626 !important;
 }
 
-/* Input Section - Bottom of Chat */
-.input-section {
-    background: #1a1a1a !important;
-    border-top: 1px solid #262626 !important;
-    padding: 1rem !important;
-    margin-top: auto !important;
-}
-
+/* Input Styling */
 .message-input {
     background: #262626 !important;
     border: 1px solid #404040 !important;
-    border-radius: 10px !important;
+    border-radius: 8px !important;
     color: #ffffff !important;
     padding: 0.75rem !important;
-    font-size: 0.95rem !important;
+    font-size: 0.9rem !important;
     line-height: 1.4 !important;
     resize: vertical !important;
     transition: all 0.3s ease !important;
     width: 100% !important;
-    margin-bottom: 1rem !important;
+    margin-bottom: 0.8rem !important;
 }
 
 .message-input:focus {
     outline: none !important;
     border-color: #dc2626 !important;
-    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
+    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1) !important;
 }
 
 .message-input::placeholder {
     color: #6b7280 !important;
 }
 
+/* Button Row */
 .button-row {
     display: flex !important;
     gap: 0.75rem !important;
@@ -472,71 +492,57 @@ professional_css = """
     background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
     color: white !important;
     border: none !important;
-    border-radius: 10px !important;
-    padding: 0.75rem 1.5rem !important;
+    border-radius: 8px !important;
+    padding: 0.7rem 1.2rem !important;
     font-weight: 600 !important;
-    font-size: 0.9rem !important;
+    font-size: 0.85rem !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;
+    min-width: 70px !important;
 }
 
 .primary-button:hover {
     background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3) !important;
 }
 
 .secondary-button {
     background: #262626 !important;
     color: #ffffff !important;
     border: 1px solid #404040 !important;
-    border-radius: 10px !important;
-    padding: 0.75rem 1.5rem !important;
+    border-radius: 8px !important;
+    padding: 0.7rem 1.2rem !important;
     font-weight: 500 !important;
     cursor: pointer !important;
     transition: all 0.3s ease !important;
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
-    font-size: 0.9rem !important;
-    min-width: 80px !important;
+    font-size: 0.85rem !important;
+    min-width: 70px !important;
 }
 
 .secondary-button:hover {
     background: #404040 !important;
     border-color: #dc2626 !important;
-    transform: translateY(-1px) !important;
 }
 
 /* Download Section */
 .download-section {
     background: #1a1a1a !important;
     border: 1px solid #dc2626 !important;
-    border-radius: 10px !important;
-    padding: 1rem !important;
-    margin: 1rem !important;
-}
-
-.download-title {
-    color: #dc2626 !important;
-    font-weight: 600 !important;
-    margin-bottom: 0.5rem !important;
-    font-size: 1rem !important;
-}
-
-/* Icons */
-.emoji-icon {
-    font-size: 1.2rem !important;
-    margin-right: 0.3rem !important;
+    border-radius: 8px !important;
+    padding: 0.8rem !important;
+    margin-bottom: 1rem !important;
 }
 
 /* Scrollbar */
 ::-webkit-scrollbar {
-    width: 6px !important;
-    height: 6px !important;
+    width: 4px !important;
+    height: 4px !important;
 }
 
 ::-webkit-scrollbar-track {
@@ -545,78 +551,54 @@ professional_css = """
 
 ::-webkit-scrollbar-thumb {
     background: #404040 !important;
-    border-radius: 3px !important;
+    border-radius: 2px !important;
 }
 
 ::-webkit-scrollbar-thumb:hover {
     background: #dc2626 !important;
 }
 
-/* Mobile Responsiveness */
-@media (max-width: 1024px) {
-    .main-layout {
-        flex-direction: column !important;
-    }
-    
-    .sidebar {
-        width: 100% !important;
-        min-width: auto !important;
-        max-width: none !important;
-        order: 2 !important;
-    }
-    
-    .chat-container {
-        order: 1 !important;
-    }
-}
-
-@media (max-width: 768px) {
-    .gradio-container {
-        padding: 0.5rem !important;
-    }
-    
-    .header-title {
-        font-size: 2rem !important;
-    }
-    
-    .sidebar {
-        padding: 1rem !important;
+/* Force no mobile responsiveness for desktop view */
+@media (min-width: 1px) {
+    .desktop-layout {
+        flex-direction: row !important;
     }
     
-    .button-row {
-        flex-direction: column !important;
-        gap: 0.5rem !important;
+    .desktop-sidebar {
+        width: 320px !important;
+        min-width: 320px !important;
+        max-width: 320px !important;
     }
     
-    .primary-button, .secondary-button {
-        width: 100% !important;
+    .desktop-chat {
+        flex: 1 !important;
     }
 }
 
-/* Animations */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.chat-message {
-    animation: fadeIn 0.3s ease-out !important;
-}
-
 /* Footer */
 .footer {
     background: #0a0a0a !important;
     border-top: 1px solid #262626 !important;
-    padding: 2rem !important;
+    padding: 1rem !important;
     text-align: center !important;
     color: #6b7280 !important;
-    margin-top: 2rem !important;
-    border-radius: 12px !important;
+    margin-top: 1rem !important;
+    border-radius: 8px !important;
+    font-size: 0.8rem !important;
 }
 
 .footer strong {
     color: #dc2626 !important;
 }
+
+/* Override any Gradio responsive behavior */
+.gradio-container .block {
+    width: auto !important;
+}
+
+.gradio-container .contain {
+    padding: 0 !important;
+}
 """
 
 def process_chat_message(message, files, history):
@@ -653,8 +635,8 @@ def quick_action(action_text):
     """Handle quick action buttons."""
     return action_text
 
-# Create the main interface
-with gr.Blocks(css=professional_css, title="Coding Copilot Pro", theme=gr.themes.Base()) as app:
+# Create the main interface with FORCED desktop layout
+with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.themes.Base()) as app:
     
     # Header
     gr.HTML("""
@@ -664,14 +646,13 @@ with gr.Blocks(css=professional_css, title="Coding Copilot Pro", theme=gr.themes
     </div>
     """)
     
-    # Main layout with two columns side by side
-    with gr.Row(elem_classes=["main-layout"]):
+    # FORCE Desktop Layout - Critical Structure
+    with gr.Row(elem_classes=["desktop-layout"]):
         
-        # Left Sidebar - Fixed width
-        with gr.Column(elem_classes=["sidebar"], scale=0):
+        # Left Sidebar - FORCED width and position
+        with gr.Column(elem_classes=["desktop-sidebar"], scale=0, min_width=320):
             
             # Capabilities Section
-            gr.HTML('<div class="sidebar-section">')
             gr.HTML('<h3 class="sidebar-title"><span class="emoji-icon">🎯</span>CAPABILITIES</h3>')
             
             gr.HTML("""
@@ -694,62 +675,60 @@ with gr.Blocks(css=professional_css, title="Coding Copilot Pro", theme=gr.themes
                 </div>
             </div>
             """)
-            gr.HTML('</div>')
             
             # Quick Actions Section
-            gr.HTML('<div class="sidebar-section">')
             gr.HTML('<h3 class="sidebar-title"><span class="emoji-icon">⚡</span>QUICK ACTIONS</h3>')
             
-            quick_review = gr.Button("📋 Comprehensive Review", elem_classes=["quick-action-button"])
+            quick_review = gr.Button("📋 Code 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_optimize = gr.Button("⚡ Optimize", elem_classes=["quick-action-button"])
+            quick_explain = gr.Button("📖 Explain", elem_classes=["quick-action-button"])
+            quick_generate = gr.Button("🔥 Generate", elem_classes=["quick-action-button"])
             quick_test = gr.Button("🧪 Create Tests", elem_classes=["quick-action-button"])
-            
-            gr.HTML('</div>')
         
-        # Right Chat Container - Takes remaining space
-        with gr.Column(elem_classes=["chat-container"], scale=1):
-            
-            # Chat interface
-            chatbot = gr.Chatbot(
-                height=400,
-                show_label=False,
-                container=False,
-                bubble_full_width=False,
-                avatar_images=("👨‍💻", "🤖"),
-                elem_classes=["chat-interface"]
-            )
-            
-            # File upload section
-            with gr.Row(elem_classes=["file-upload-section"]):
-                files = gr.File(
-                    label="📎 Upload Code Files (.py, .ipynb)",
-                    file_count="multiple",
-                    file_types=[".py", ".ipynb"],
-                    show_label=True,
-                    container=True
-                )
-            
-            # Download section
-            download_status = gr.HTML("", visible=True)
-            download_file = gr.File(label="📥 Download Generated Code", visible=False)
+        # Right Chat Container - FORCED to take remaining space
+        with gr.Column(elem_classes=["desktop-chat"], scale=1):
             
-            # Input section at bottom of chat
-            with gr.Column(elem_classes=["input-section"]):
-                msg = gr.Textbox(
-                    label="",
-                    placeholder="Describe what you want to build, analyze, or improve... Type 'continue' to extend previous code.",
+            with gr.Column(elem_classes=["chat-main"]):
+                # Chat messages area
+                chatbot = gr.Chatbot(
+                    height=400,
                     show_label=False,
-                    lines=3,
-                    max_lines=5,
-                    elem_classes=["message-input"]
+                    container=False,
+                    bubble_full_width=False,
+                    avatar_images=("👨‍💻", "🤖"),
+                    elem_classes=["chat-messages"]
                 )
                 
-                with gr.Row(elem_classes=["button-row"]):
-                    clear = gr.Button("CLEAR", variant="secondary", elem_classes=["secondary-button"])
-                    submit = gr.Button("SEND", variant="primary", elem_classes=["primary-button"])
+                # Input area at bottom
+                with gr.Column(elem_classes=["chat-input-area"]):
+                    # File upload
+                    files = gr.File(
+                        label="📎 Upload Code Files (.py, .ipynb)",
+                        file_count="multiple",
+                        file_types=[".py", ".ipynb"],
+                        container=True,
+                        elem_classes=["file-upload-area"]
+                    )
+                    
+                    # Download status
+                    download_status = gr.HTML("", visible=True)
+                    download_file = gr.File(label="📥 Download Generated Code", visible=False)
+                    
+                    # Message input
+                    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"]
+                    )
+                    
+                    # Button row
+                    with gr.Row(elem_classes=["button-row"]):
+                        clear = gr.Button("CLEAR", variant="secondary", elem_classes=["secondary-button"])
+                        submit = gr.Button("SEND", variant="primary", elem_classes=["primary-button"])
     
     # Hidden state
     chat_history = gr.State([])