Update app.py

app.py

@@ -22,37 +22,43 @@ openai.api_key = api_key
 
 # Custom CSS for better styling
 custom_css = """
-.gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-    font-family: 'Inter', sans-serif;
+html, body, .gradio-container {
     height: 100vh !important;
-    overflow-y: auto !important;
+    min-height: 100vh !important;
+    max-width: 100vw !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    font-family: 'Inter', sans-serif;
+    overflow: auto !important;
+    background: #fafbfc;
 }
+
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
     height: 100%;
 }
-.chat-container {
-    border: 1px solid #e0e0e0;
+
+.chat-container, .file-upload, .audio-recorder {
+    box-sizing: border-box;
     border-radius: 16px;
-    padding: 24px;
     background: white;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.07);
     margin-bottom: 20px;
-    height: calc(100vh - 200px);
-    overflow-y: auto;
+    width: 100%;
 }
+
+.chat-container {
+    border: 1px solid #e0e0e0;
+    padding: 24px;
+}
+
 .file-upload {
     border: 2px dashed #e0e0e0;
-    border-radius: 16px;
     padding: 24px;
     text-align: center;
-    background: #f8f9fa;
     transition: all 0.3s ease;
-    margin-bottom: 20px;
 }
 .file-upload:hover {
     border-color: #4CAF50;
@@ -60,13 +66,11 @@ custom_css = """
     transform: translateY(-2px);
 }
 .audio-recorder {
-    background: #f8f9fa;
-    border-radius: 16px;
     padding: 24px;
     text-align: center;
     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-    margin-bottom: 20px;
 }
+
 .record-button {
     background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
     color: white;
@@ -129,8 +133,9 @@ custom_css = """
     border-radius: 12px !important;
     border: 2px solid #e0e0e0 !important;
     padding: 16px !important;
-    height: calc(100vh - 300px) !important;
-    overflow-y: auto !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+    background: #fff !important;
 }
 @keyframes pulse {
     0% { transform: scale(1); box-shadow: 0 4px 6px rgba(244, 67, 54, 0.2); }
@@ -138,41 +143,17 @@ custom_css = """
     100% { transform: scale(1); box-shadow: 0 4px 6px rgba(244, 67, 54, 0.2); }
 }
 
-/* Fix for Gradio's internal scrolling */
-#component-0 {
-    height: 100% !important;
-    overflow-y: auto !important;
-}
-#component-1 {
-    height: 100% !important;
-    overflow-y: auto !important;
-}
-#component-2 {
-    height: 100% !important;
-    overflow-y: auto !important;
-}
-
-/* Ensure the chat interface takes full height */
-#chat-interface {
-    height: 100% !important;
-    display: flex !important;
-    flex-direction: column !important;
-}
-
-/* Make sure the chat messages container scrolls */
-#chat-messages {
-    flex: 1 !important;
-    overflow-y: auto !important;
-    padding: 20px !important;
+/* Remove extra scrollbars and ensure only one main scroll */
+body, .gradio-container, #root, #app {
+    overflow: auto !important;
+    height: 100vh !important;
 }
 
-/* Ensure the input area stays at the bottom */
-#chat-input {
-    position: sticky !important;
-    bottom: 0 !important;
-    background: white !important;
-    padding: 20px !important;
-    border-top: 1px solid #e0e0e0 !important;
+/* Remove scroll from inner components */
+#component-0, #component-1, #component-2, .chatbot, .chat-container {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
 }
 """
 
@@ -281,12 +262,12 @@ class AdvancedRAG:
             if not self.thread_id:
                 self.create_thread()
 
-            # Add the file to the thread with the required tools field
+            # Add the file to the thread with the required tools object
             openai.beta.threads.messages.create(
                 thread_id=self.thread_id,
                 role="user",
                 content="I have uploaded a document. Please analyze it.",
-                attachments=[{"file_id": file_obj.id, "tools": ["file_search"]}]
+                attachments=[{"file_id": file_obj.id, "tools": [{"type": "file_search"}]}]
             )
 
             return file_obj.id