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()
 
-# COMPLETELY FIXED CSS - Proper scrolling and visibility
+# FIXED CSS - Proper layout and visible input area
 fixed_css = """
 /* Reset and base styles */
 * {
@@ -261,13 +261,11 @@ fixed_css = """
 .gradio-container {
     max-width: none !important;
     width: 100% !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
     background: #0a0a0a !important;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
     color: #ffffff !important;
     padding: 1rem !important;
-    overflow: hidden !important;
+    min-height: 100vh !important;
 }
 
 /* Header */
@@ -279,7 +277,6 @@ fixed_css = """
     margin-bottom: 1rem !important;
     box-shadow: 0 8px 32px rgba(220, 38, 38, 0.15) !important;
     text-align: center !important;
-    flex-shrink: 0 !important;
 }
 
 .header-title {
@@ -300,19 +297,16 @@ fixed_css = """
     font-weight: 400 !important;
 }
 
-/* Main layout - FIXED with stable height */
+/* Main layout */
 .main-layout {
     display: flex !important;
     flex-direction: row !important;
     gap: 1.5rem !important;
     width: 100% !important;
-    height: calc(100vh - 200px) !important;
-    max-height: calc(100vh - 200px) !important;
     min-height: calc(100vh - 200px) !important;
-    flex-shrink: 0 !important;
 }
 
-/* Sidebar - FIXED width and scrolling */
+/* Sidebar */
 .sidebar {
     background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
     border: 1px solid #dc2626 !important;
@@ -321,14 +315,13 @@ fixed_css = """
     width: 320px !important;
     min-width: 320px !important;
     max-width: 320px !important;
-    height: 100% !important;
-    max-height: 100% !important;
-    flex-shrink: 0 !important;
     box-shadow: 0 8px 32px rgba(220, 38, 38, 0.1) !important;
     overflow-y: auto !important;
+    height: fit-content !important;
+    max-height: calc(100vh - 200px) !important;
 }
 
-/* Chat area - FIXED with stable height */
+/* Chat area */
 .chat-area {
     background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%) !important;
     border: 1px solid #262626 !important;
@@ -336,36 +329,26 @@ fixed_css = """
     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;
-    height: 100% !important;
-    max-height: 100% !important;
-    min-height: 100% !important;
+    min-height: 600px !important;
 }
 
-/* Chat content area - FIXED height */
+/* Chat content area */
 .chat-content {
     flex: 1 !important;
-    overflow-y: auto !important;
     padding: 1.5rem !important;
-    height: calc(100% - 280px) !important;
-    max-height: calc(100% - 280px) !important;
-    min-height: 300px !important;
+    overflow-y: auto !important;
+    min-height: 400px !important;
+    max-height: 500px !important;
 }
 
-/* Input section - FIXED height to prevent movement */
+/* Input section - FIXED to be visible */
 .input-section {
-    flex-shrink: 0 !important;
     background: #1a1a1a !important;
     border-top: 1px solid #262626 !important;
     padding: 1.5rem !important;
-    display: flex !important;
-    flex-direction: column !important;
-    gap: 1rem !important;
-    height: 280px !important;
-    max-height: 280px !important;
-    min-height: 280px !important;
-    overflow-y: auto !important;
+    border-radius: 0 0 16px 16px !important;
+    min-height: 300px !important;
 }
 
 /* Quick Actions */
@@ -442,7 +425,6 @@ fixed_css = """
     border-radius: 8px !important;
     padding: 1rem !important;
     margin-bottom: 1rem !important;
-    flex-shrink: 0 !important;
 }
 
 /* File upload */
@@ -453,8 +435,6 @@ fixed_css = """
     padding: 1rem !important;
     margin-bottom: 1rem !important;
     transition: all 0.3s ease !important;
-    width: 100% !important;
-    flex-shrink: 0 !important;
 }
 
 .file-upload:hover {
@@ -462,7 +442,7 @@ fixed_css = """
     background: #262626 !important;
 }
 
-/* Message input - FIXED size */
+/* Message input */
 .msg-input {
     background: #262626 !important;
     border: 1px solid #404040 !important;
@@ -475,10 +455,7 @@ fixed_css = """
     transition: all 0.3s ease !important;
     width: 100% !important;
     margin-bottom: 1rem !important;
-    height: 80px !important;
-    max-height: 120px !important;
-    min-height: 60px !important;
-    flex-shrink: 0 !important;
+    min-height: 100px !important;
 }
 
 .msg-input:focus {
@@ -491,13 +468,12 @@ fixed_css = """
     color: #6b7280 !important;
 }
 
-/* Buttons - FIXED positioning */
+/* Button row */
 .btn-row {
     display: flex !important;
     gap: 1rem !important;
     align-items: center !important;
     justify-content: flex-end !important;
-    flex-shrink: 0 !important;
 }
 
 .btn-primary {
@@ -514,7 +490,6 @@ fixed_css = """
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
     min-width: 80px !important;
-    flex-shrink: 0 !important;
 }
 
 .btn-primary:hover {
@@ -536,7 +511,6 @@ fixed_css = """
     letter-spacing: 0.5px !important;
     font-size: 0.9rem !important;
     min-width: 80px !important;
-    flex-shrink: 0 !important;
 }
 
 .btn-secondary:hover {
@@ -544,18 +518,15 @@ fixed_css = """
     border-color: #dc2626 !important;
 }
 
-/* Chatbot - FIXED container */
+/* Chatbot container */
 .chatbot-container {
-    height: 100% !important;
-    min-height: 100% !important;
-    max-height: 100% !important;
     border: none !important;
     background: transparent !important;
     overflow-y: auto !important;
     scroll-behavior: smooth !important;
 }
 
-/* Footer - FIXED positioning */
+/* Footer */
 .footer {
     background: #0a0a0a !important;
     border-top: 1px solid #262626 !important;
@@ -564,8 +535,7 @@ fixed_css = """
     color: #6b7280 !important;
     border-radius: 8px !important;
     font-size: 0.8rem !important;
-    flex-shrink: 0 !important;
-    margin-top: auto !important;
+    margin-top: 2rem !important;
 }
 
 .footer strong {
@@ -609,38 +579,26 @@ code {
     font-size: 0.85rem !important;
 }
 
-/* Ensure all elements are visible */
-.gradio-container * {
-    visibility: visible !important;
-    opacity: 1 !important;
-}
-
 /* Responsive design */
 @media (max-width: 768px) {
     .main-layout {
         flex-direction: column !important;
-        height: calc(100vh - 150px) !important;
-        max-height: calc(100vh - 150px) !important;
     }
     
     .sidebar {
         width: 100% !important;
         max-width: none !important;
         min-width: auto !important;
-        height: 300px !important;
-        max-height: 300px !important;
-    }
-    
-    .chat-area {
-        height: calc(100% - 340px) !important;
-        max-height: calc(100% - 340px) !important;
+        height: auto !important;
+        max-height: 400px !important;
     }
     
     .header-title {
         font-size: 1.8rem !important;
     }
-}   
+}
 """
+
 def process_chat_message(message, files, history):
     """Process a new chat message with download support."""
     if not message.strip() and not files:
@@ -663,7 +621,7 @@ def process_chat_message(message, files, history):
     # Return download file info
     download_info = ""
     if download_file:
-        download_info = "📥 **Code generated successfully!** Download button available below."
+        download_info = "🎉 **Code generated successfully!** Click the download button below to save your code."
     
     return history, history, "", download_file, download_info
 
@@ -671,12 +629,23 @@ def clear_chat():
     """Clear the chat history."""
     return [], [], None, ""
 
-def quick_action(action_text):
-    """Handle quick action buttons."""
-    return action_text
+def update_download_file(response, history):
+    """Update download file when new response is generated."""
+    if not response:
+        return None, ""
+    
+    # Extract code blocks from the latest response
+    code_blocks = copilot.extract_code_blocks(response)
+    if code_blocks:
+        combined_code = "\n\n".join(code_blocks)
+        if len(combined_code.strip()) > 50:
+            download_file = copilot.create_download_file(combined_code)
+            return download_file, "🎉 **Code generated!** Download available below."
+    
+    return None, ""
 
-# Create the main interface with COMPLETELY FIXED layout
-with gr.Blocks(css=fixed_css, title="Coding Copilot Pro - Desktop", theme=gr.themes.Base()) as app:
+# Create the main interface
+with gr.Blocks(css=fixed_css, title="Coding Copilot Pro", theme=gr.themes.Base()) as app:
     
     # Header
     gr.HTML("""
@@ -686,10 +655,10 @@ with gr.Blocks(css=fixed_css, title="Coding Copilot Pro - Desktop", theme=gr.the
     </div>
     """)
     
-    # Main content container - COMPLETELY FIXED
+    # Main content container
     with gr.Row(elem_classes=["main-layout"]):
         
-        # Left Sidebar - FIXED
+        # Left Sidebar
         with gr.Column(elem_classes=["sidebar"], scale=0):
             
             # Quick Actions Section
@@ -728,10 +697,10 @@ with gr.Blocks(css=fixed_css, title="Coding Copilot Pro - Desktop", theme=gr.the
                 </div>
                 """)
         
-        # Right Chat Container - COMPLETELY FIXED
+        # Right Chat Container
         with gr.Column(elem_classes=["chat-area"], scale=1):
             
-            # Chat Messages Area - FIXED
+            # Chat Messages Area
             with gr.Column(elem_classes=["chat-content"]):
                 chatbot = gr.Chatbot(
                     height=400,
@@ -741,18 +710,22 @@ with gr.Blocks(css=fixed_css, title="Coding Copilot Pro - Desktop", theme=gr.the
                     elem_classes=["chatbot-container"]
                 )
             
-            # Input Section - COMPLETELY FIXED AND VISIBLE
+            # Input Section - COMPLETELY VISIBLE NOW
             with gr.Column(elem_classes=["input-section"]):
                 
-                # Download section
-                download_status = gr.HTML("", elem_classes=["download-section"])
-                download_file = gr.File(
-                    label="📥 Download Generated Code", 
-                    visible=False,
-                    elem_classes=["download-section"]
-                )
+                # Download section - Show status and file
+                with gr.Row():
+                    download_status = gr.HTML("", elem_classes=["download-section"])
                 
-                # File upload - FIXED
+                with gr.Row():
+                    download_file = gr.File(
+                        label="📥 Download Generated Code", 
+                        visible=True,
+                        interactive=False,
+                        elem_classes=["download-section"]
+                    )
+                
+                # File upload
                 files = gr.File(
                     label="📎 Upload Code Files (.py, .ipynb)",
                     file_count="multiple",
@@ -760,17 +733,17 @@ with gr.Blocks(css=fixed_css, title="Coding Copilot Pro - Desktop", theme=gr.the
                     elem_classes=["file-upload"]
                 )
                 
-                # Message input - FIXED
+                # Message input
                 msg = gr.Textbox(
-                    label="",
+                    label="Your Message",
                     placeholder="Describe what you want to build, analyze, or improve... Type 'continue' to extend previous code.",
-                    show_label=False,
-                    lines=3,
-                    max_lines=6,
+                    show_label=True,
+                    lines=4,
+                    max_lines=8,
                     elem_classes=["msg-input"]
                 )
                 
-                # Button row - FIXED
+                # Button row
                 with gr.Row(elem_classes=["btn-row"]):
                     clear = gr.Button(
                         "CLEAR", 
@@ -791,7 +764,7 @@ with gr.Blocks(css=fixed_css, title="Coding Copilot Pro - Desktop", theme=gr.the
         result = process_chat_message(message, files, history)
         return result
     
-    # Quick actions - ALL WORKING
+    # Quick action button handlers
     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
@@ -822,13 +795,13 @@ with gr.Blocks(css=fixed_css, title="Coding Copilot Pro - Desktop", theme=gr.the
         outputs=msg
     )
     
-    # Main chat functionality - ALL WORKING
+    # Main chat functionality
     submit.click(
         handle_submit,
         inputs=[msg, files, chat_history],
         outputs=[chatbot, chat_history, msg, download_file, download_status]
     ).then(
-        lambda: None,
+        lambda: None,  # Clear files after processing
         outputs=files
     )
     
@@ -837,7 +810,7 @@ with gr.Blocks(css=fixed_css, title="Coding Copilot Pro - Desktop", theme=gr.the
         inputs=[msg, files, chat_history],
         outputs=[chatbot, chat_history, msg, download_file, download_status]
     ).then(
-        lambda: None,
+        lambda: None,  # Clear files after processing
         outputs=files
     )