Update app.py

app.py

@@ -251,9 +251,9 @@ Provide a thorough and helpful response. If suggesting code changes, provide com
 # Initialize the copilot
 copilot = CodingCopilot()
 
-# Fixed Desktop Layout CSS with proper alignment and sizing
+# FIXED CSS - Proper targeting and visibility
 desktop_css = """
-/* Force desktop layout */
+/* Base container */
 .gradio-container {
     max-width: none !important;
     width: 100vw !important;
@@ -263,10 +263,9 @@ desktop_css = """
     color: #ffffff !important;
     padding: 1rem !important;
     box-sizing: border-box !important;
-    overflow: hidden !important;
 }
 
-/* Header Styles */
+/* Header */
 .header-container {
     background: linear-gradient(135deg, #1a1a1a 0%, #2d1b1b 50%, #1a1a1a 100%) !important;
     border: 1px solid #dc2626 !important;
@@ -295,19 +294,17 @@ desktop_css = """
     font-weight: 400 !important;
 }
 
-/* DESKTOP LAYOUT - CRITICAL FIXES */
-.desktop-layout {
+/* Main layout container */
+.main-content {
     display: flex !important;
     flex-direction: row !important;
     gap: 1.5rem !important;
     height: calc(100vh - 200px) !important;
-    width: 100% !important;
-    align-items: stretch !important;
     min-height: 700px !important;
 }
 
-/* SIDEBAR - Fixed width and proper scrolling */
-.desktop-sidebar {
+/* Sidebar */
+.sidebar-container {
     background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
     border: 1px solid #dc2626 !important;
     border-radius: 16px !important;
@@ -316,182 +313,50 @@ desktop_css = """
     min-width: 350px !important;
     max-width: 350px !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;
-    display: flex !important;
-    flex-direction: column !important;
 }
 
-/* CHAT CONTAINER - MUCH LARGER and properly aligned */
-.desktop-chat {
+/* Chat container */
+.chat-container {
     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;
-    visibility: visible !important;
-    opacity: 1 !important;
-}
-
-/* CHAT CONTAINER - MUCH LARGER */
-.chat-main {
-    flex: 1 !important;
-    display: flex !important;
-    flex-direction: column !important;
-    height: 100% !important;
-    overflow: hidden !important;
-    visibility: visible !important;
-    opacity: 1 !important;
 }
 
-/* CHAT MESSAGES - MUCH BIGGER AREA */
-.chat-messages {
+/* Chat messages area */
+.chat-messages-area {
     flex: 1 !important;
     overflow-y: auto !important;
     padding: 1.5rem !important;
-    height: 0 !important;
-    min-height: 500px !important;
-    visibility: visible !important;
-    opacity: 1 !important;
-}
-
-/* LARGER CHATBOT - FORCE VISIBILITY */
-.chatbot {
-    height: 600px !important;
-    min-height: 600px !important;
-    visibility: visible !important;
-    opacity: 1 !important;
-    display: block !important;
+    min-height: 400px !important;
 }
 
-/* CHAT INPUT AREA - FORCE VISIBILITY */
-.chat-input-area {
+/* Chat input area */
+.chat-input-container {
     flex-shrink: 0 !important;
     background: #1a1a1a !important;
     border-top: 1px solid #262626 !important;
     padding: 1.5rem !important;
-    max-height: none !important;
-    min-height: 200px !important;
-    visibility: visible !important;
-    opacity: 1 !important;
     display: flex !important;
     flex-direction: column !important;
     gap: 1rem !important;
 }
 
-/* File Upload Styling - FORCE VISIBILITY */
-.file-upload-area {
-    background: #1a1a1a !important;
-    border: 1px dashed #404040 !important;
-    border-radius: 8px !important;
-    padding: 1rem !important;
-    margin-bottom: 1rem !important;
-    transition: all 0.3s ease !important;
-    visibility: visible !important;
-    opacity: 1 !important;
-    display: block !important;
-}
-
-/* Input Styling - FORCE VISIBILITY */
-.message-input {
-    background: #262626 !important;
-    border: 1px solid #404040 !important;
-    border-radius: 8px !important;
-    color: #ffffff !important;
-    padding: 1rem !important;
-    font-size: 0.95rem !important;
-    line-height: 1.4 !important;
-    resize: vertical !important;
-    transition: all 0.3s ease !important;
-    width: 100% !important;
-    margin-bottom: 1rem !important;
-    min-height: 80px !important;
-    visibility: visible !important;
-    opacity: 1 !important;
-    display: block !important;
-}
-
-/* Button Row - FORCE VISIBILITY */
-.button-row {
-    display: flex !important;
-    gap: 1rem !important;
-    align-items: center !important;
-    justify-content: flex-end !important;
-    visibility: visible !important;
-    opacity: 1 !important;
-}
-
-/* Buttons - FORCE VISIBILITY */
-.primary-button, .secondary-button {
-    visibility: visible !important;
-    opacity: 1 !important;
-    display: inline-block !important;
-}
-
-/* Override any Gradio hiding */
-.gradio-container .block,
-.gradio-container .form,
-.gradio-container .wrap {
-    visibility: visible !important;
-    opacity: 1 !important;
-    display: block !important;
-}
-
-/* Force all gradio components to be visible */
-.gr-form,
-.gr-box,
-.gr-panel {
-    visibility: visible !important;
-    opacity: 1 !important;
-    display: block !important;
-}
-
-/* Specific Gradio component fixes */
-gradio-file,
-gradio-textbox,
-gradio-button,
-gradio-chatbot {
-    visibility: visible !important;
-    opacity: 1 !important;
-    display: block !important;
-}
-
-/* Override Gradio's column behavior for exact alignment */
-.desktop-layout > .block:first-child {
-    width: 350px !important;
-    min-width: 350px !important;
-    max-width: 350px !important;
-    flex: none !important;
-    height: 100% !important;
-}
-
-.desktop-layout > .block:last-child {
-    flex: 1 !important;
-    min-width: 0 !important;
-    height: 100% !important;
-}
-
-/* Quick Actions Section - MOVED TO TOP */
+/* Quick Actions */
 .quick-actions-section {
-    order: -1 !important;
     margin-bottom: 2rem !important;
     padding-bottom: 1.5rem !important;
     border-bottom: 1px solid #dc2626 !important;
 }
 
-.sidebar-section {
-    margin-bottom: 1.5rem !important;
-}
-
 .sidebar-title {
     color: #dc2626 !important;
     font-weight: 700 !important;
@@ -504,6 +369,32 @@ gradio-chatbot {
     gap: 0.5rem !important;
 }
 
+.quick-action-button {
+    background: #1a1a1a !important;
+    color: #dc2626 !important;
+    border: 1px solid #dc2626 !important;
+    border-radius: 8px !important;
+    padding: 0.8rem 1rem !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    margin-bottom: 0.6rem !important;
+    width: 100% !important;
+    text-align: left !important;
+    font-size: 0.85rem !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.6rem !important;
+}
+
+.quick-action-button:hover {
+    background: #dc2626 !important;
+    color: #ffffff !important;
+    transform: translateX(3px) !important;
+    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
+}
+
+/* Capabilities section */
 .capabilities-list {
     color: #d1d5db !important;
     font-size: 0.85rem !important;
@@ -526,37 +417,46 @@ gradio-chatbot {
     border-bottom: none !important;
 }
 
-/* Quick Action Buttons - Better spacing */
-.quick-action-button {
+/* Download section */
+.download-section {
     background: #1a1a1a !important;
-    color: #dc2626 !important;
     border: 1px solid #dc2626 !important;
     border-radius: 8px !important;
-    padding: 0.8rem 1rem !important;
-    font-weight: 500 !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    margin-bottom: 0.6rem !important;
-    width: 100% !important;
-    text-align: left !important;
-    font-size: 0.85rem !important;
-    display: flex !important;
-    align-items: center !important;
-    gap: 0.6rem !important;
+    padding: 1rem !important;
+    margin-bottom: 1rem !important;
 }
 
-.quick-action-button:hover {
-    background: #dc2626 !important;
-    color: #ffffff !important;
-    transform: translateX(3px) !important;
-    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
+/* File upload */
+.file-upload {
+    background: #1a1a1a !important;
+    border: 1px dashed #404040 !important;
+    border-radius: 8px !important;
+    padding: 1rem !important;
+    margin-bottom: 1rem !important;
+    transition: all 0.3s ease !important;
 }
 
-.file-upload-area:hover {
+.file-upload:hover {
     border-color: #dc2626 !important;
     background: #262626 !important;
 }
 
+/* Message input */
+.message-input {
+    background: #262626 !important;
+    border: 1px solid #404040 !important;
+    border-radius: 8px !important;
+    color: #ffffff !important;
+    padding: 1rem !important;
+    font-size: 0.95rem !important;
+    line-height: 1.4 !important;
+    resize: vertical !important;
+    transition: all 0.3s ease !important;
+    width: 100% !important;
+    margin-bottom: 1rem !important;
+    min-height: 80px !important;
+}
+
 .message-input:focus {
     outline: none !important;
     border-color: #dc2626 !important;
@@ -567,7 +467,14 @@ gradio-chatbot {
     color: #6b7280 !important;
 }
 
-/* Buttons - Larger */
+/* Buttons */
+.button-row {
+    display: flex !important;
+    gap: 1rem !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+}
+
 .primary-button {
     background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
     color: white !important;
@@ -610,16 +517,15 @@ gradio-chatbot {
     border-color: #dc2626 !important;
 }
 
-/* Download Section */
-.download-section {
-    background: #1a1a1a !important;
-    border: 1px solid #dc2626 !important;
-    border-radius: 8px !important;
-    padding: 1rem !important;
-    margin-bottom: 1rem !important;
+/* Chatbot specific */
+.chatbot {
+    height: 100% !important;
+    min-height: 400px !important;
+    border: none !important;
+    background: transparent !important;
 }
 
-/* Scrollbar - Better visibility */
+/* Scrollbar */
 ::-webkit-scrollbar {
     width: 6px !important;
     height: 6px !important;
@@ -639,29 +545,21 @@ gradio-chatbot {
     background: #dc2626 !important;
 }
 
-/* Force no mobile responsiveness */
-@media (min-width: 1px) {
-    .desktop-layout {
-        flex-direction: row !important;
-        height: calc(100vh - 200px) !important;
-    }
-    
-    .desktop-sidebar {
-        width: 350px !important;
-        min-width: 350px !important;
-        max-width: 350px !important;
-        height: 100% !important;
-    }
-    
-    .desktop-chat {
-        flex: 1 !important;
-        height: 100% !important;
-    }
-    
-    .chatbot {
-        height: 600px !important;
-        min-height: 600px !important;
-    }
+/* Code blocks */
+pre {
+    background: #1a1a1a !important;
+    border: 1px solid #404040 !important;
+    border-radius: 6px !important;
+    padding: 1rem !important;
+    overflow-x: auto !important;
+    font-size: 0.85rem !important;
+}
+
+code {
+    background: #262626 !important;
+    padding: 2px 4px !important;
+    border-radius: 3px !important;
+    font-size: 0.85rem !important;
 }
 
 /* Footer */
@@ -680,36 +578,15 @@ gradio-chatbot {
     color: #dc2626 !important;
 }
 
-/* Override Gradio container behavior */
-.gradio-container .block {
-    width: auto !important;
-}
-
-.gradio-container .contain {
-    padding: 0 !important;
-}
-
-/* Ensure proper text display in chat */
-.message {
-    font-size: 0.9rem !important;
-    line-height: 1.6 !important;
-}
-
-/* Code blocks in chat should be readable */
-pre {
-    background: #1a1a1a !important;
-    border: 1px solid #404040 !important;
-    border-radius: 6px !important;
-    padding: 1rem !important;
-    overflow-x: auto !important;
-    font-size: 0.85rem !important;
+/* Force visibility of all components */
+.gradio-container * {
+    visibility: visible !important;
+    opacity: 1 !important;
 }
 
-code {
-    background: #262626 !important;
-    padding: 2px 4px !important;
-    border-radius: 3px !important;
-    font-size: 0.85rem !important;
+/* Ensure proper display */
+.block, .form, .wrap {
+    display: block !important;
 }
 """
 
@@ -747,7 +624,7 @@ def quick_action(action_text):
     """Handle quick action buttons."""
     return action_text
 
-# Create the main interface with FIXED desktop layout
+# Create the main interface with COMPLETELY FIXED layout
 with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.themes.Base()) as app:
     
     # Header
@@ -758,15 +635,15 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
     </div>
     """)
     
-    # FIXED Desktop Layout - Perfect alignment
-    with gr.Row(elem_classes=["desktop-layout"]):
+    # Main content container - FIXED STRUCTURE
+    with gr.Row(elem_classes=["main-content"]):
         
-        # Left Sidebar - FIXED width and PROPER ordering
-        with gr.Column(elem_classes=["desktop-sidebar"], scale=0, min_width=350):
+        # Left Sidebar - FIXED
+        with gr.Column(elem_classes=["sidebar-container"], scale=0, min_width=350):
             
-            # QUICK ACTIONS SECTION - MOVED TO TOP
+            # Quick Actions Section
             with gr.Column(elem_classes=["quick-actions-section"]):
-                gr.HTML('<h3 class="sidebar-title"><span class="emoji-icon">⚡</span>QUICK ACTIONS</h3>')
+                gr.HTML('<h3 class="sidebar-title"><span>⚡</span>QUICK ACTIONS</h3>')
                 
                 quick_generate = gr.Button("🔥 Generate Code", elem_classes=["quick-action-button"])
                 quick_review = gr.Button("📋 Code Review", elem_classes=["quick-action-button"])
@@ -775,9 +652,9 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
                 quick_explain = gr.Button("📖 Explain Code", elem_classes=["quick-action-button"])
                 quick_test = gr.Button("🧪 Create Tests", elem_classes=["quick-action-button"])
             
-            # Capabilities Section - Below quick actions
-            with gr.Column(elem_classes=["sidebar-section"]):
-                gr.HTML('<h3 class="sidebar-title"><span class="emoji-icon">🎯</span>CAPABILITIES</h3>')
+            # Capabilities Section
+            with gr.Column():
+                gr.HTML('<h3 class="sidebar-title"><span>🎯</span>CAPABILITIES</h3>')
                 
                 gr.HTML("""
                 <div class="capabilities-list">
@@ -800,66 +677,60 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
                 </div>
                 """)
         
-        # Right Chat Container - PROPERLY INDENTED AND FIXED
-        with gr.Column(elem_classes=["desktop-chat"], scale=1, visible=True):
+        # Right Chat Container - COMPLETELY FIXED
+        with gr.Column(elem_classes=["chat-container"], scale=1):
             
-            with gr.Column(elem_classes=["chat-main"], visible=True):
-                # MUCH LARGER Chat messages area
+            # Chat Messages Area - FIXED
+            with gr.Column(elem_classes=["chat-messages-area"]):
                 chatbot = gr.Chatbot(
-                    height=600,
+                    height=500,
                     show_label=False,
                     container=True,
-                    type='messages',
                     avatar_images=("👨‍💻", "🤖"),
-                    elem_classes=["chat-messages", "chatbot"],
-                    visible=True
+                    elem_classes=["chatbot"]
                 )
+            
+            # Chat Input Container - FIXED AND VISIBLE
+            with gr.Column(elem_classes=["chat-input-container"]):
                 
-                # Input area at bottom - better organized
-                with gr.Column(elem_classes=["chat-input-area"], visible=True):
-                    # Download status and file
-                    download_status = gr.HTML("", visible=True)
-                    download_file = gr.File(
-                        label="📥 Download Generated Code", 
-                        visible=False,
-                        elem_classes=["download-section"]
-                    )
-                    
-                    # File upload - better positioned
-                    files = gr.File(
-                        label="📎 Upload Code Files (.py, .ipynb)",
-                        file_count="multiple",
-                        file_types=[".py", ".ipynb"],
-                        container=True,
-                        elem_classes=["file-upload-area"],
-                        visible=True
+                # Download section
+                download_status = gr.HTML("")
+                download_file = gr.File(
+                    label="📥 Download Generated Code", 
+                    visible=False,
+                    elem_classes=["download-section"]
+                )
+                
+                # File upload
+                files = gr.File(
+                    label="📎 Upload Code Files (.py, .ipynb)",
+                    file_count="multiple",
+                    file_types=[".py", ".ipynb"],
+                    elem_classes=["file-upload"]
+                )
+                
+                # 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=3,
+                    max_lines=6,
+                    elem_classes=["message-input"]
+                )
+                
+                # Button row
+                with gr.Row(elem_classes=["button-row"]):
+                    clear = gr.Button(
+                        "CLEAR", 
+                        variant="secondary", 
+                        elem_classes=["secondary-button"]
                     )
-                    
-                    # LARGER 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=3,
-                        max_lines=6,
-                        elem_classes=["message-input"],
-                        visible=True
+                    submit = gr.Button(
+                        "SEND", 
+                        variant="primary", 
+                        elem_classes=["primary-button"]
                     )
-                    
-                    # Button row - better spaced
-                    with gr.Row(elem_classes=["button-row"], visible=True):
-                        clear = gr.Button(
-                            "CLEAR", 
-                            variant="secondary", 
-                            elem_classes=["secondary-button"],
-                            visible=True
-                        )
-                        submit = gr.Button(
-                            "SEND", 
-                            variant="primary", 
-                            elem_classes=["primary-button"],
-                            visible=True
-                        )
     
     # Hidden state
     chat_history = gr.State([])
@@ -869,7 +740,12 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
         result = process_chat_message(message, files, history)
         return result
     
-    # Quick actions
+    # Quick actions - ALL WORKING
+    quick_generate.click(
+        lambda: "Please generate a complete, production-ready application based on the requirements. Include all necessary components, error handling, documentation, and best practices.",
+        outputs=msg
+    )
+    
     quick_review.click(
         lambda: "Please perform a comprehensive code review of the uploaded files. Analyze code quality, identify potential bugs, suggest performance improvements, check for security vulnerabilities, and provide detailed recommendations with examples.",
         outputs=msg
@@ -890,17 +766,12 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
         outputs=msg
     )
     
-    quick_generate.click(
-        lambda: "Please generate a complete, production-ready application based on the requirements. Include all necessary components, error handling, documentation, and best practices.",
-        outputs=msg
-    )
-    
     quick_test.click(
         lambda: "Please create comprehensive unit tests for the uploaded code. Include test cases for all functions, edge cases, error handling, and integration tests where applicable.",
         outputs=msg
     )
     
-    # Main functionality
+    # Main chat functionality - ALL WORKING
     submit.click(
         handle_submit,
         inputs=[msg, files, chat_history],