Upload folder using huggingface_hub

app.py

@@ -55,6 +55,8 @@ def main():
         margin: 0 0 1rem 0 !important;
         font-weight: 400 !important;
         text-align: center !important;
+        width: 100% !important;
+        display: block !important;
     }
 
     /* Dataset card styling */

components/subscriptions.py

@@ -2,6 +2,7 @@ from datetime import datetime
 import json
 import os
 import html
+import base64
 
 # Get MCP server URL from environment
 MCP_SERVER_URL = os.getenv("MCP_SERVER_URL", "http://localhost:8000")
@@ -19,7 +20,9 @@ def create_subscriptions_html(subscriptions):
         """
 
     cards_html = ""
-    modals_html = ""
+    drawers_html = ""
+    # Store data for copy functionality
+    copy_data = {}
 
     for idx, sub in enumerate(subscriptions):
         # Determine subscription status
@@ -52,13 +55,13 @@ def create_subscriptions_html(subscriptions):
 
         dataset_id = sub.get('dataset_id', '')
         access_token = sub.get('access_token', '')
-        modal_id = f"modal-{idx}"
+        drawer_id = f"drawer-{idx}"
 
         # Connection details button for active subscriptions
         connection_btn_html = ""
         if is_active and access_token:
             connection_btn_html = f'''
-            <button class="btn-connect" onclick="document.getElementById('{modal_id}').classList.add('show')">
+            <button class="btn-connect" onclick="openDrawer('{drawer_id}')">
                 Connect
             </button>
             '''
@@ -78,25 +81,28 @@ def create_subscriptions_html(subscriptions):
             }
             mcp_config_json = json.dumps(mcp_config, indent=2)
             mcp_config_escaped = html.escape(mcp_config_json)
-            mcp_config_for_js = json.dumps(mcp_config_json)
 
             # Example prompt
             example_prompt = f"Query the dataset {dataset_id} and show me a summary of the data. What columns are available and how many rows are there?"
             example_prompt_escaped = html.escape(example_prompt)
-            example_prompt_for_js = json.dumps(example_prompt)
-
-            # Modal HTML with collapsible sections
-            modals_html += f'''
-            <div id="{modal_id}" class="modal-overlay" onclick="if(event.target===this) this.classList.remove('show')">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <div class="modal-header-info">
-                            <h3 class="modal-title">{html.escape(dataset_id)}</h3>
-                            <span class="modal-status {status_class}">{status_text}</span>
+
+            # Store data for copy buttons using base64 encoding to avoid JS escaping issues
+            copy_data[f"{drawer_id}-mcp"] = base64.b64encode(mcp_config_json.encode()).decode()
+            copy_data[f"{drawer_id}-prompt"] = base64.b64encode(example_prompt.encode()).decode()
+            copy_data[f"{drawer_id}-token"] = base64.b64encode(access_token.encode()).decode()
+
+            # Drawer HTML (slides in from right)
+            drawers_html += f'''
+            <div id="{drawer_id}" class="drawer-overlay" onclick="if(event.target===this) closeDrawer('{drawer_id}')">
+                <div class="drawer-panel">
+                    <div class="drawer-header">
+                        <div class="drawer-header-info">
+                            <h3 class="drawer-title">{html.escape(dataset_id)}</h3>
+                            <span class="drawer-status {status_class}">{status_text}</span>
                         </div>
-                        <button class="modal-close" onclick="document.getElementById('{modal_id}').classList.remove('show')">&times;</button>
+                        <button class="drawer-close" onclick="closeDrawer('{drawer_id}')">&times;</button>
                     </div>
-                    <div class="modal-body">
+                    <div class="drawer-body">
                         <!-- MCP Config - expanded by default -->
                         <details class="config-accordion" open>
                             <summary class="config-summary">
@@ -108,7 +114,7 @@ def create_subscriptions_html(subscriptions):
                                 <p class="config-desc">Add to your Claude Desktop config:</p>
                                 <div class="code-wrapper">
                                     <pre class="code-block">{mcp_config_escaped}</pre>
-                                    <button class="btn-copy" onclick="copyToClipboard({mcp_config_for_js}, this)">Copy</button>
+                                    <button class="btn-copy" data-copy-id="{drawer_id}-mcp">Copy</button>
                                 </div>
                             </div>
                         </details>
@@ -123,7 +129,7 @@ def create_subscriptions_html(subscriptions):
                             <div class="config-content">
                                 <div class="code-wrapper">
                                     <pre class="code-block prompt-block">{example_prompt_escaped}</pre>
-                                    <button class="btn-copy" onclick="copyToClipboard({example_prompt_for_js}, this)">Copy</button>
+                                    <button class="btn-copy" data-copy-id="{drawer_id}-prompt">Copy</button>
                                 </div>
                             </div>
                         </details>
@@ -138,7 +144,7 @@ def create_subscriptions_html(subscriptions):
                             <div class="config-content">
                                 <div class="code-wrapper">
                                     <code class="token-block">{html.escape(access_token)}</code>
-                                    <button class="btn-copy" onclick="copyToClipboard('{access_token}', this)">Copy</button>
+                                    <button class="btn-copy" data-copy-id="{drawer_id}-token">Copy</button>
                                 </div>
                             </div>
                         </details>
@@ -151,14 +157,8 @@ def create_subscriptions_html(subscriptions):
             </div>
             '''
 
-        # View on HF button for active subscriptions
+        # View on HF button removed - access only through MCP
         view_btn_html = ""
-        if is_active:
-            view_btn_html = f'''
-            <a href="https://huggingface.co/datasets/{dataset_id}" target="_blank" class="btn-link">
-                View on HF
-            </a>
-            '''
 
         # Determine plan display name
         plan_id = sub.get('plan_id', 'trial')
@@ -185,32 +185,91 @@ def create_subscriptions_html(subscriptions):
         </div>
         """
 
+    # Convert copy_data to JSON for embedding in script
+    copy_data_json = json.dumps(copy_data)
+
     result_html = f"""
     <div class="subscriptions-container">
         <div class="subscriptions-list">
             {cards_html}
         </div>
-        {modals_html}
+        {drawers_html}
     </div>
 
     <script>
-        function copyToClipboard(text, btn) {{
+        // Store copy data
+        var copyDataStore = {copy_data_json};
+
+        function openDrawer(id) {{
+            var drawer = document.getElementById(id);
+            if (drawer) {{
+                drawer.classList.add('show');
+                document.body.style.overflow = 'hidden';
+            }}
+        }}
+
+        function closeDrawer(id) {{
+            var drawer = document.getElementById(id);
+            if (drawer) {{
+                drawer.classList.remove('show');
+                document.body.style.overflow = '';
+            }}
+        }}
+
+        function copyFromDataAttr(btn) {{
+            var copyId = btn.getAttribute('data-copy-id');
+            if (!copyId || !copyDataStore[copyId]) {{
+                console.error('Copy data not found for:', copyId);
+                return;
+            }}
+            // Decode base64
+            var text = atob(copyDataStore[copyId]);
             navigator.clipboard.writeText(text).then(function() {{
-                const originalText = btn.textContent;
+                var originalText = btn.textContent;
                 btn.textContent = 'Copied!';
                 btn.classList.add('copied');
                 setTimeout(function() {{
                     btn.textContent = originalText;
                     btn.classList.remove('copied');
                 }}, 2000);
+            }}).catch(function(err) {{
+                console.error('Failed to copy:', err);
+                // Fallback for older browsers
+                var textarea = document.createElement('textarea');
+                textarea.value = text;
+                textarea.style.position = 'fixed';
+                textarea.style.opacity = '0';
+                document.body.appendChild(textarea);
+                textarea.select();
+                try {{
+                    document.execCommand('copy');
+                    var originalText = btn.textContent;
+                    btn.textContent = 'Copied!';
+                    btn.classList.add('copied');
+                    setTimeout(function() {{
+                        btn.textContent = originalText;
+                        btn.classList.remove('copied');
+                    }}, 2000);
+                }} catch (e) {{
+                    console.error('Fallback copy failed:', e);
+                }}
+                document.body.removeChild(textarea);
             }});
         }}
 
+        // Attach click handlers to copy buttons
+        document.addEventListener('click', function(e) {{
+            if (e.target.classList.contains('btn-copy')) {{
+                copyFromDataAttr(e.target);
+            }}
+        }});
+
         document.addEventListener('keydown', function(e) {{
             if (e.key === 'Escape') {{
-                document.querySelectorAll('.modal-overlay.show').forEach(function(modal) {{
-                    modal.classList.remove('show');
+                document.querySelectorAll('.drawer-overlay.show').forEach(function(drawer) {{
+                    drawer.classList.remove('show');
                 }});
+                document.body.style.overflow = '';
             }}
         }});
     </script>
@@ -302,71 +361,75 @@ def create_subscriptions_html(subscriptions):
         .btn-connect:hover {{
             background: #0056b3;
         }}
-        .btn-link {{
-            padding: 0.375rem 0.75rem;
-            border-radius: 6px;
-            font-size: 0.75rem;
-            font-weight: 500;
-            text-decoration: none;
-            color: var(--text-secondary, #a1a1a6);
-            background: var(--bg-tertiary, #2c2c2e);
-            transition: all 0.15s ease;
+
+        /* Drawer - slides from right */
+        .drawer-overlay {{
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(4px);
+            z-index: 99999;
+            margin: 0;
         }}
-        .btn-link:hover {{
-            background: var(--bg-hover, #3a3a3c);
-            color: var(--text-primary, #f5f5f7);
+        .drawer-overlay.show {{
+            display: block;
         }}
-
-        /* Modal - use !important to override Gradio styles */
-        .modal-overlay {{
-            display: none !important;
-            position: fixed !important;
-            top: 0 !important;
-            left: 0 !important;
-            right: 0 !important;
-            bottom: 0 !important;
-            width: 100vw !important;
-            height: 100vh !important;
-            background: rgba(0, 0, 0, 0.8) !important;
-            backdrop-filter: blur(8px) !important;
-            z-index: 99999 !important;
-            justify-content: center !important;
-            align-items: center !important;
-            padding: 1rem !important;
-            margin: 0 !important;
-        }}
-        .modal-overlay.show {{
-            display: flex !important;
-        }}
-        .modal-content {{
-            background: var(--bg-primary, #000) !important;
-            border: 1px solid var(--border-color, rgba(255,255,255,0.08)) !important;
-            border-radius: 14px !important;
-            max-width: 480px !important;
-            width: 100% !important;
-            max-height: 85vh !important;
-            overflow-y: auto !important;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
-            margin: auto !important;
-        }}
-        .modal-header {{
+        .drawer-panel {{
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 100%;
+            max-width: 420px;
+            height: 100vh;
+            background: var(--bg-primary, #000);
+            border-left: 1px solid var(--border-color, rgba(255,255,255,0.08));
+            box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
+            display: flex;
+            flex-direction: column;
+            transform: translateX(100%);
+            animation: slideIn 0.25s ease forwards;
+        }}
+        @keyframes slideIn {{
+            to {{
+                transform: translateX(0);
+            }}
+        }}
+        .drawer-overlay:not(.show) .drawer-panel {{
+            animation: slideOut 0.2s ease forwards;
+        }}
+        @keyframes slideOut {{
+            from {{
+                transform: translateX(0);
+            }}
+            to {{
+                transform: translateX(100%);
+            }}
+        }}
+        .drawer-header {{
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 1rem 1.25rem;
+            padding: 1.25rem 1.5rem;
             border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
             gap: 1rem;
+            flex-shrink: 0;
         }}
-        .modal-header-info {{
+        .drawer-header-info {{
             display: flex;
             align-items: center;
             gap: 0.625rem;
             min-width: 0;
             flex: 1;
         }}
-        .modal-title {{
+        .drawer-title {{
             margin: 0;
-            font-size: 0.875rem;
+            font-size: 0.9375rem;
             font-weight: 600;
             color: var(--text-primary, #f5f5f7);
             font-family: 'SF Mono', Monaco, monospace;
@@ -374,7 +437,7 @@ def create_subscriptions_html(subscriptions):
             overflow: hidden;
             text-overflow: ellipsis;
         }}
-        .modal-status {{
+        .drawer-status {{
             padding: 0.125rem 0.375rem;
             border-radius: 4px;
             font-size: 0.5625rem;
@@ -382,14 +445,14 @@ def create_subscriptions_html(subscriptions):
             text-transform: uppercase;
             flex-shrink: 0;
         }}
-        .modal-status.active {{
+        .drawer-status.active {{
             background: rgba(52, 199, 89, 0.15);
             color: #34c759;
         }}
-        .modal-close {{
+        .drawer-close {{
             background: none;
             border: none;
-            font-size: 1.25rem;
+            font-size: 1.5rem;
             color: var(--text-tertiary, #6e6e73);
             cursor: pointer;
             padding: 0;
@@ -397,25 +460,27 @@ def create_subscriptions_html(subscriptions):
             transition: color 0.15s;
             flex-shrink: 0;
         }}
-        .modal-close:hover {{
+        .drawer-close:hover {{
             color: var(--text-primary, #f5f5f7);
         }}
-        .modal-body {{
-            padding: 1rem 1.25rem;
+        .drawer-body {{
+            padding: 1.25rem 1.5rem;
+            overflow-y: auto;
+            flex: 1;
         }}
 
         /* Accordion sections */
         .config-accordion {{
             border: 1px solid var(--border-color, rgba(255,255,255,0.08));
             border-radius: 8px;
-            margin-bottom: 0.625rem;
+            margin-bottom: 0.75rem;
             overflow: hidden;
         }}
         .config-summary {{
             display: flex;
             align-items: center;
             gap: 0.5rem;
-            padding: 0.75rem 1rem;
+            padding: 0.875rem 1rem;
             cursor: pointer;
             user-select: none;
             background: var(--bg-secondary, #1c1c1e);
@@ -429,10 +494,10 @@ def create_subscriptions_html(subscriptions):
             background: var(--bg-tertiary, #2c2c2e);
         }}
         .config-icon {{
-            font-size: 0.875rem;
+            font-size: 1rem;
         }}
         .config-label {{
-            font-size: 0.8125rem;
+            font-size: 0.875rem;
             font-weight: 500;
             color: var(--text-primary, #f5f5f7);
             flex: 1;
@@ -449,25 +514,26 @@ def create_subscriptions_html(subscriptions):
             transform: rotate(180deg);
         }}
         .config-content {{
-            padding: 0.75rem 1rem;
+            padding: 0.875rem 1rem;
             border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
             background: var(--bg-primary, #000);
         }}
         .config-desc {{
-            font-size: 0.75rem;
+            font-size: 0.8125rem;
             color: var(--text-tertiary, #6e6e73);
-            margin: 0 0 0.5rem 0;
+            margin: 0 0 0.625rem 0;
         }}
         .code-wrapper {{
             position: relative;
         }}
         .code-block {{
-            padding: 0.75rem;
+            padding: 0.875rem;
+            padding-right: 4rem;
             background: var(--bg-secondary, #1c1c1e);
             border: 1px solid var(--border-color, rgba(255,255,255,0.08));
             border-radius: 6px;
             font-family: 'SF Mono', Monaco, monospace;
-            font-size: 0.6875rem;
+            font-size: 0.75rem;
             color: var(--text-primary, #f5f5f7);
             overflow-x: auto;
             white-space: pre;
@@ -480,12 +546,13 @@ def create_subscriptions_html(subscriptions):
         }}
         .token-block {{
             display: block;
-            padding: 0.5rem 0.75rem;
+            padding: 0.625rem 0.875rem;
+            padding-right: 4rem;
             background: var(--bg-secondary, #1c1c1e);
             border: 1px solid var(--border-color, rgba(255,255,255,0.08));
             border-radius: 6px;
             font-family: 'SF Mono', Monaco, monospace;
-            font-size: 0.6875rem;
+            font-size: 0.75rem;
             color: var(--text-primary, #f5f5f7);
             word-break: break-all;
         }}
@@ -493,12 +560,12 @@ def create_subscriptions_html(subscriptions):
             position: absolute;
             top: 0.5rem;
             right: 0.5rem;
-            padding: 0.25rem 0.5rem;
+            padding: 0.375rem 0.625rem;
             background: var(--bg-tertiary, #2c2c2e);
             color: var(--text-secondary, #a1a1a6);
             border: 1px solid var(--border-color, rgba(255,255,255,0.08));
             border-radius: 4px;
-            font-size: 0.625rem;
+            font-size: 0.6875rem;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.15s;
@@ -517,18 +584,18 @@ def create_subscriptions_html(subscriptions):
             display: flex;
             align-items: center;
             gap: 0.375rem;
-            padding: 0.625rem 0.75rem;
+            padding: 0.75rem 1rem;
             background: rgba(0, 122, 255, 0.08);
             border-radius: 6px;
-            font-size: 0.6875rem;
+            font-size: 0.75rem;
             color: var(--text-secondary, #a1a1a6);
-            margin-top: 0.25rem;
+            margin-top: 0.5rem;
         }}
         .config-tip code {{
             background: var(--bg-secondary, #1c1c1e);
-            padding: 0.0625rem 0.25rem;
+            padding: 0.125rem 0.375rem;
             border-radius: 3px;
-            font-size: 0.625rem;
+            font-size: 0.6875rem;
             color: var(--text-primary, #f5f5f7);
         }}
 
@@ -540,9 +607,8 @@ def create_subscriptions_html(subscriptions):
             .subscription-actions {{
                 justify-content: flex-start;
             }}
-            .modal-content {{
-                margin: 0.5rem;
-                max-width: none;
+            .drawer-panel {{
+                max-width: 100%;
             }}
         }}
     </style>