Update app.py

app.py

@@ -251,18 +251,22 @@ Provide a thorough and helpful response. If suggesting code changes, provide com
 # Initialize the copilot
 copilot = CodingCopilot()
 
-# FIXED CSS - Proper targeting and visibility
-desktop_css = """
-/* Base container */
+# COMPLETELY FIXED CSS - Proper scrolling and visibility
+fixed_css = """
+/* Reset and base styles */
+* {
+    box-sizing: border-box !important;
+}
+
 .gradio-container {
     max-width: none !important;
-    width: 100vw !important;
-    height: 100vh !important;
+    width: 100% !important;
+    min-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-x: hidden !important;
 }
 
 /* Header */
@@ -294,32 +298,32 @@ desktop_css = """
     font-weight: 400 !important;
 }
 
-/* Main layout container */
-.main-content {
+/* Main layout - FIXED to be flexible */
+.main-layout {
     display: flex !important;
     flex-direction: row !important;
     gap: 1.5rem !important;
-    height: calc(100vh - 200px) !important;
-    min-height: 700px !important;
+    width: 100% !important;
+    min-height: calc(100vh - 250px) !important;
 }
 
-/* Sidebar */
-.sidebar-container {
+/* Sidebar - FIXED width and scrolling */
+.sidebar {
     background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
     border: 1px solid #dc2626 !important;
     border-radius: 16px !important;
     padding: 1.5rem !important;
-    width: 350px !important;
-    min-width: 350px !important;
-    max-width: 350px !important;
+    width: 320px !important;
+    min-width: 320px !important;
+    max-width: 320px !important;
     flex-shrink: 0 !important;
     box-shadow: 0 8px 32px rgba(220, 38, 38, 0.1) !important;
     overflow-y: auto !important;
-    height: 100% !important;
+    max-height: calc(100vh - 250px) !important;
 }
 
-/* Chat container */
-.chat-container {
+/* Chat area - FIXED to be flexible and scrollable */
+.chat-area {
     background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%) !important;
     border: 1px solid #262626 !important;
     border-radius: 16px !important;
@@ -328,19 +332,19 @@ desktop_css = """
     flex-direction: column !important;
     overflow: hidden !important;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
-    height: 100% !important;
+    min-height: calc(100vh - 250px) !important;
 }
 
-/* Chat messages area */
-.chat-messages-area {
+/* Chat content area */
+.chat-content {
     flex: 1 !important;
     overflow-y: auto !important;
     padding: 1.5rem !important;
-    min-height: 400px !important;
+    min-height: 300px !important;
 }
 
-/* Chat input area */
-.chat-input-container {
+/* Input section - FIXED to be visible */
+.input-section {
     flex-shrink: 0 !important;
     background: #1a1a1a !important;
     border-top: 1px solid #262626 !important;
@@ -351,7 +355,7 @@ desktop_css = """
 }
 
 /* Quick Actions */
-.quick-actions-section {
+.quick-actions {
     margin-bottom: 2rem !important;
     padding-bottom: 1.5rem !important;
     border-bottom: 1px solid #dc2626 !important;
@@ -369,7 +373,7 @@ desktop_css = """
     gap: 0.5rem !important;
 }
 
-.quick-action-button {
+.quick-btn {
     background: #1a1a1a !important;
     color: #dc2626 !important;
     border: 1px solid #dc2626 !important;
@@ -387,21 +391,21 @@ desktop_css = """
     gap: 0.6rem !important;
 }
 
-.quick-action-button:hover {
+.quick-btn: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 {
+/* Capabilities */
+.capabilities {
     color: #d1d5db !important;
     font-size: 0.85rem !important;
     line-height: 1.5 !important;
 }
 
-.capabilities-list strong {
+.capabilities strong {
     color: #ffffff !important;
     display: block !important;
     margin-bottom: 0.3rem !important;
@@ -434,6 +438,7 @@ desktop_css = """
     padding: 1rem !important;
     margin-bottom: 1rem !important;
     transition: all 0.3s ease !important;
+    width: 100% !important;
 }
 
 .file-upload:hover {
@@ -441,8 +446,8 @@ desktop_css = """
     background: #262626 !important;
 }
 
-/* Message input */
-.message-input {
+/* Message input - FIXED visibility */
+.msg-input {
     background: #262626 !important;
     border: 1px solid #404040 !important;
     border-radius: 8px !important;
@@ -457,25 +462,25 @@ desktop_css = """
     min-height: 80px !important;
 }
 
-.message-input:focus {
+.msg-input:focus {
     outline: none !important;
     border-color: #dc2626 !important;
     box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1) !important;
 }
 
-.message-input::placeholder {
+.msg-input::placeholder {
     color: #6b7280 !important;
 }
 
-/* Buttons */
-.button-row {
+/* Buttons - FIXED visibility */
+.btn-row {
     display: flex !important;
     gap: 1rem !important;
     align-items: center !important;
     justify-content: flex-end !important;
 }
 
-.primary-button {
+.btn-primary {
     background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
     color: white !important;
     border: none !important;
@@ -491,13 +496,13 @@ desktop_css = """
     min-width: 80px !important;
 }
 
-.primary-button:hover {
+.btn-primary:hover {
     background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
     transform: translateY(-1px) !important;
     box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3) !important;
 }
 
-.secondary-button {
+.btn-secondary {
     background: #262626 !important;
     color: #ffffff !important;
     border: 1px solid #404040 !important;
@@ -512,15 +517,15 @@ desktop_css = """
     min-width: 80px !important;
 }
 
-.secondary-button:hover {
+.btn-secondary:hover {
     background: #404040 !important;
     border-color: #dc2626 !important;
 }
 
-/* Chatbot specific */
-.chatbot {
+/* Chatbot */
+.chatbot-container {
     height: 100% !important;
-    min-height: 400px !important;
+    min-height: 300px !important;
     border: none !important;
     background: transparent !important;
 }
@@ -578,15 +583,28 @@ code {
     color: #dc2626 !important;
 }
 
-/* Force visibility of all components */
+/* Ensure all elements are visible */
 .gradio-container * {
     visibility: visible !important;
     opacity: 1 !important;
 }
 
-/* Ensure proper display */
-.block, .form, .wrap {
-    display: block !important;
+/* Responsive design */
+@media (max-width: 768px) {
+    .main-layout {
+        flex-direction: column !important;
+    }
+    
+    .sidebar {
+        width: 100% !important;
+        max-width: none !important;
+        min-width: auto !important;
+        max-height: 400px !important;
+    }
+    
+    .header-title {
+        font-size: 1.8rem !important;
+    }
 }
 """
 
@@ -625,7 +643,7 @@ def quick_action(action_text):
     return action_text
 
 # 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:
+with gr.Blocks(css=fixed_css, title="Coding Copilot Pro - Desktop", theme=gr.themes.Base()) as app:
     
     # Header
     gr.HTML("""
@@ -635,29 +653,29 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
     </div>
     """)
     
-    # Main content container - FIXED STRUCTURE
-    with gr.Row(elem_classes=["main-content"]):
+    # Main content container - COMPLETELY FIXED
+    with gr.Row(elem_classes=["main-layout"]):
         
         # Left Sidebar - FIXED
-        with gr.Column(elem_classes=["sidebar-container"], scale=0, min_width=350):
+        with gr.Column(elem_classes=["sidebar"], scale=0):
             
             # Quick Actions Section
-            with gr.Column(elem_classes=["quick-actions-section"]):
+            with gr.Column(elem_classes=["quick-actions"]):
                 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"])
-                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 Code", elem_classes=["quick-action-button"])
-                quick_test = gr.Button("🧪 Create Tests", elem_classes=["quick-action-button"])
+                quick_generate = gr.Button("🔥 Generate Code", elem_classes=["quick-btn"])
+                quick_review = gr.Button("📋 Code Review", elem_classes=["quick-btn"])
+                quick_debug = gr.Button("🐛 Debug & Fix", elem_classes=["quick-btn"])
+                quick_optimize = gr.Button("⚡ Optimize Code", elem_classes=["quick-btn"])
+                quick_explain = gr.Button("📖 Explain Code", elem_classes=["quick-btn"])
+                quick_test = gr.Button("🧪 Create Tests", elem_classes=["quick-btn"])
             
             # Capabilities Section
             with gr.Column():
                 gr.HTML('<h3 class="sidebar-title"><span>🎯</span>CAPABILITIES</h3>')
                 
                 gr.HTML("""
-                <div class="capabilities-list">
+                <div class="capabilities">
                     <div class="capability-item">
                         <strong>💻 Code Generation</strong>
                         Complete applications, modules, algorithms & APIs
@@ -678,30 +696,30 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
                 """)
         
         # Right Chat Container - COMPLETELY FIXED
-        with gr.Column(elem_classes=["chat-container"], scale=1):
+        with gr.Column(elem_classes=["chat-area"], scale=1):
             
             # Chat Messages Area - FIXED
-            with gr.Column(elem_classes=["chat-messages-area"]):
+            with gr.Column(elem_classes=["chat-content"]):
                 chatbot = gr.Chatbot(
-                    height=500,
+                    height=400,
                     show_label=False,
                     container=True,
                     avatar_images=("👨‍💻", "🤖"),
-                    elem_classes=["chatbot"]
+                    elem_classes=["chatbot-container"]
                 )
             
-            # Chat Input Container - FIXED AND VISIBLE
-            with gr.Column(elem_classes=["chat-input-container"]):
+            # Input Section - COMPLETELY FIXED AND VISIBLE
+            with gr.Column(elem_classes=["input-section"]):
                 
                 # Download section
-                download_status = gr.HTML("")
+                download_status = gr.HTML("", elem_classes=["download-section"])
                 download_file = gr.File(
                     label="📥 Download Generated Code", 
                     visible=False,
                     elem_classes=["download-section"]
                 )
                 
-                # File upload
+                # File upload - FIXED
                 files = gr.File(
                     label="📎 Upload Code Files (.py, .ipynb)",
                     file_count="multiple",
@@ -709,27 +727,27 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
                     elem_classes=["file-upload"]
                 )
                 
-                # Message input
+                # Message input - FIXED
                 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"]
+                    elem_classes=["msg-input"]
                 )
                 
-                # Button row
-                with gr.Row(elem_classes=["button-row"]):
+                # Button row - FIXED
+                with gr.Row(elem_classes=["btn-row"]):
                     clear = gr.Button(
                         "CLEAR", 
                         variant="secondary", 
-                        elem_classes=["secondary-button"]
+                        elem_classes=["btn-secondary"]
                     )
                     submit = gr.Button(
                         "SEND", 
                         variant="primary", 
-                        elem_classes=["primary-button"]
+                        elem_classes=["btn-primary"]
                     )
     
     # Hidden state
@@ -795,19 +813,60 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
         outputs=[chatbot, chat_history, download_file, download_status]
     )
     
-    # Footer
+    # Footer - Completing from where it ended
     gr.HTML("""
     <div class="footer">
-        <p><strong>🚀 CODING COPILOT PRO</strong> • Professional Development Assistant</p>
-        <p>Upload your code files and start building • Advanced AI • Secure & Private</p>
+        <p><strong>🚀 CODING COPILOT PRO</strong> - Advanced AI Development Assistant</p>
+        <p>Powered by <strong>Claude 3 Haiku</strong> via AWS Bedrock • Built with Gradio</p>
+        <p>💡 Upload your code files and describe what you want to build, analyze, or improve!</p>
     </div>
     """)
+    
+    # Show download file when available
+    def update_download_visibility(file_path, status):
+        if file_path:
+            return gr.File.update(visible=True, value=file_path), status
+        return gr.File.update(visible=False), status
+    
+    # Update download file visibility when status changes
+    download_status.change(
+        update_download_visibility,
+        inputs=[download_file, download_status],
+        outputs=[download_file, download_status]
+    )
 
 # Launch the app
 if __name__ == "__main__":
+    print("🚀 Starting Coding Copilot Pro...")
+    print("📋 Features:")
+    print("   • Complete code generation with continuation support")
+    print("   • File upload support for .py and .ipynb files")
+    print("   • Comprehensive code analysis and debugging")
+    print("   • Download generated code as files")
+    print("   • Quick action buttons for common tasks")
+    print("   • Dark theme with responsive design")
+    print()
+    print("🔧 Requirements:")
+    print("   • Set AWS_ACCESS_KEY_ID environment variable")
+    print("   • Set AWS_SECRET_ACCESS_KEY environment variable")
+    print("   • Ensure AWS Bedrock access to Claude 3 Haiku")
+    print()
+    
+    # Launch with optimized settings
     app.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        share=True,
-        show_error=True
+        share=False,
+        debug=False,
+        show_error=True,
+        quiet=False,
+        inbrowser=True,
+        show_tips=False,
+        height=800,
+        favicon_path=None,
+        ssl_verify=False,
+        app_kwargs={
+            "docs_url": None,
+            "redoc_url": None,
+        }
     )