Update app.py

app.py

@@ -552,69 +552,11 @@ gradio-chatbot {
     box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
 }
 
-/* CHAT CONTAINER - MUCH LARGER */
-.chat-main {
-    flex: 1 !important;
-    display: flex !important;
-    flex-direction: column !important;
-    height: 100% !important;
-    overflow: hidden !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;
-}
-
-/* LARGER CHATBOT */
-.chatbot {
-    height: 600px !important;
-    min-height: 600px !important;
-}
-
-.chat-input-area {
-    flex-shrink: 0 !important;
-    background: #1a1a1a !important;
-    border-top: 1px solid #262626 !important;
-    padding: 1.5rem !important;
-    max-height: 300px !important;
-}
-
-/* File Upload Styling */
-.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;
-}
-
 .file-upload-area:hover {
     border-color: #dc2626 !important;
     background: #262626 !important;
 }
 
-/* Input Styling - Larger */
-.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;
@@ -625,14 +567,6 @@ gradio-chatbot {
     color: #6b7280 !important;
 }
 
-/* Button Row */
-.button-row {
-    display: flex !important;
-    gap: 1rem !important;
-    align-items: center !important;
-    justify-content: flex-end !important;
-}
-
 /* Buttons - Larger */
 .primary-button {
     background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
@@ -866,67 +800,66 @@ with gr.Blocks(css=desktop_css, title="Coding Copilot Pro - Desktop", theme=gr.t
                 </div>
                 """)
         
-        # Right Chat Container - MUCH LARGER and properly aligned
-        # 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"]
-            )
-            
-            # 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
-            )
+        # Right Chat Container - PROPERLY INDENTED AND FIXED
+        with gr.Column(elem_classes=["desktop-chat"], scale=1, 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"],
+            with gr.Column(elem_classes=["chat-main"], visible=True):
+                # MUCH LARGER Chat messages area
+                chatbot = gr.Chatbot(
+                    height=600,
+                    show_label=False,
+                    container=True,
+                    type='messages',
+                    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"]
+                    )
+                    
+                    # 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
+                        )
     
     # Hidden state
     chat_history = gr.State([])