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()
 
-# Enhanced Professional CSS Theme with Better Layout
+# Enhanced Professional CSS Theme with Fixed Layout
 professional_css = """
 /* Global Styles */
 * {
@@ -296,22 +296,25 @@ professional_css = """
     font-weight: 400 !important;
 }
 
-/* Main Layout - Two Column */
+/* Main Layout - Side by Side */
 .main-layout {
     display: flex !important;
     gap: 1.5rem !important;
     height: 100% !important;
     align-items: stretch !important;
+    flex-direction: row !important;
 }
 
-/* Sidebar */
+/* Sidebar - Fixed Width */
 .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;
+    flex-shrink: 0 !important;
     box-shadow: 0 8px 32px rgba(220, 38, 38, 0.1) !important;
 }
 
@@ -380,7 +383,7 @@ professional_css = """
     box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
 }
 
-/* Chat Container */
+/* Chat Container - Takes remaining space */
 .chat-container {
     background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%) !important;
     border: 1px solid #262626 !important;
@@ -390,6 +393,7 @@ professional_css = """
     flex-direction: column !important;
     overflow: hidden !important;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
+    min-height: 600px !important;
 }
 
 /* Chat Interface */
@@ -397,7 +401,7 @@ professional_css = """
     background: transparent !important;
     border: none !important;
     flex: 1 !important;
-    min-height: 500px !important;
+    min-height: 400px !important;
     max-height: 500px !important;
     overflow-y: auto !important;
     padding: 1rem !important;
@@ -409,32 +413,27 @@ professional_css = """
     height: 100% !important;
 }
 
-/* Compact File Upload */
-.file-upload-compact {
+/* File Upload Section */
+.file-upload-section {
     background: #1a1a1a !important;
     border: 1px solid #404040 !important;
     border-radius: 10px !important;
-    padding: 0.75rem !important;
+    padding: 1rem !important;
     margin: 1rem !important;
     transition: all 0.3s ease !important;
 }
 
-.file-upload-compact:hover {
+.file-upload-section:hover {
     border-color: #dc2626 !important;
     background: #262626 !important;
 }
 
-/* Input Section */
+/* Input Section - Bottom of Chat */
 .input-section {
     background: #1a1a1a !important;
     border-top: 1px solid #262626 !important;
     padding: 1rem !important;
-}
-
-.input-row {
-    display: flex !important;
-    gap: 0.75rem !important;
-    align-items: flex-end !important;
+    margin-top: auto !important;
 }
 
 .message-input {
@@ -447,7 +446,8 @@ professional_css = """
     line-height: 1.4 !important;
     resize: vertical !important;
     transition: all 0.3s ease !important;
-    flex: 1 !important;
+    width: 100% !important;
+    margin-bottom: 1rem !important;
 }
 
 .message-input:focus {
@@ -460,6 +460,13 @@ professional_css = """
     color: #6b7280 !important;
 }
 
+.button-row {
+    display: flex !important;
+    gap: 0.75rem !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+}
+
 /* Buttons */
 .primary-button {
     background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
@@ -552,6 +559,7 @@ professional_css = """
     }
     
     .sidebar {
+        width: 100% !important;
         min-width: auto !important;
         max-width: none !important;
         order: 2 !important;
@@ -575,7 +583,7 @@ professional_css = """
         padding: 1rem !important;
     }
     
-    .input-row {
+    .button-row {
         flex-direction: column !important;
         gap: 0.5rem !important;
     }
@@ -656,11 +664,11 @@ with gr.Blocks(css=professional_css, title="Coding Copilot Pro", theme=gr.themes
     </div>
     """)
     
-    # Main layout with two columns
+    # Main layout with two columns side by side
     with gr.Row(elem_classes=["main-layout"]):
         
-        # Sidebar with capabilities and quick actions
-        with gr.Column(elem_classes=["sidebar"]):
+        # Left Sidebar - Fixed width
+        with gr.Column(elem_classes=["sidebar"], scale=0):
             
             # Capabilities Section
             gr.HTML('<div class="sidebar-section">')
@@ -701,12 +709,12 @@ with gr.Blocks(css=professional_css, title="Coding Copilot Pro", theme=gr.themes
             
             gr.HTML('</div>')
         
-        # Chat container
-        with gr.Column(elem_classes=["chat-container"]):
+        # Right Chat Container - Takes remaining space
+        with gr.Column(elem_classes=["chat-container"], scale=1):
             
             # Chat interface
             chatbot = gr.Chatbot(
-                height=500,
+                height=400,
                 show_label=False,
                 container=False,
                 bubble_full_width=False,
@@ -714,13 +722,12 @@ with gr.Blocks(css=professional_css, title="Coding Copilot Pro", theme=gr.themes
                 elem_classes=["chat-interface"]
             )
             
-            # Compact file upload section
-            with gr.Row(elem_classes=["file-upload-compact"]):
+            # 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"],
-                    scale=1,
                     show_label=True,
                     container=True
                 )
@@ -729,22 +736,20 @@ with gr.Blocks(css=professional_css, title="Coding Copilot Pro", theme=gr.themes
             download_status = gr.HTML("", visible=True)
             download_file = gr.File(label="📥 Download Generated Code", visible=False)
             
-            # 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"])
+            # 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.",
+                    show_label=False,
+                    lines=3,
+                    max_lines=5,
+                    elem_classes=["message-input"]
+                )
+                
+                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([])
@@ -823,7 +828,5 @@ if __name__ == "__main__":
         server_name="0.0.0.0",
         server_port=7860,
         share=True,
-        show_error=True,
-        show_api=False,
-        inbrowser=True
+        show_error=True
     )