Update app.py

app.py

@@ -324,7 +324,7 @@ desktop_css = """
     flex-direction: column !important;
 }
 
-/* CHAT CONTAINER - Much larger and properly aligned */
+/* CHAT CONTAINER - MUCH LARGER and properly aligned */
 .desktop-chat {
     background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%) !important;
     border: 1px solid #262626 !important;
@@ -338,6 +338,131 @@ desktop_css = """
     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 {
+    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;
+}
+
+/* CHAT INPUT AREA - FORCE VISIBILITY */
+.chat-input-area {
+    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 */
@@ -742,48 +867,66 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
                 """)
         
         # Right Chat Container - MUCH LARGER and properly aligned
-        with gr.Column(elem_classes=["desktop-chat"], scale=1):
+        # Right Chat Container - MUCH LARGER and properly aligned
+with gr.Column(elem_classes=["desktop-chat"], scale=1, visible=True):
+    
+    with gr.Column(elem_classes=["chat-main"], visible=True):
+        # MUCH LARGER Chat messages area
+        chatbot = gr.Chatbot(
+            height=600,
+            show_label=False,
+            container=True,
+            bubble_full_width=False,
+            avatar_images=("👨‍💻", "🤖"),
+            elem_classes=["chat-messages", "chatbot"],
+            visible=True
+        )
+        
+        # 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"]
+            )
             
-            with gr.Column(elem_classes=["chat-main"]):
-                # MUCH LARGER Chat messages area
-                chatbot = gr.Chatbot(
-                    height=600,
-                    show_label=False,
-                    container=False,
-                    bubble_full_width=False,
-                    avatar_images=("👨‍💻", "🤖"),
-                    elem_classes=["chat-messages", "chatbot"]
+            # 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
+            )
+            
+            # 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
+            )
+            
+            # 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
                 )
-                
-                # Input area at bottom - better organized
-                with gr.Column(elem_classes=["chat-input-area"]):
-                    # Download status and file
-                    download_status = gr.HTML("", visible=True)
-                    download_file = gr.File(label="📥 Download Generated Code", visible=False)
-                    
-                    # 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"]
-                    )
-                    
-                    # 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"]
-                    )
-                    
-                    # Button row - better spaced
-                    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([])