Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Marimo Zero - Toggle Sandbox</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: #1a1a2e; | |
| color: #eee; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .container { | |
| display: flex; | |
| height: 100vh; | |
| } | |
| /* Agent Zero Chat Panel */ | |
| .chat-panel { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| border-right: 1px solid #333; | |
| transition: all 0.3s ease; | |
| } | |
| .chat-panel.collapsed { | |
| flex: 0; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .chat-header { | |
| padding: 1rem; | |
| background: #16213e; | |
| border-bottom: 1px solid #333; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .chat-header h1 { | |
| font-size: 1.2rem; | |
| color: #00d9ff; | |
| } | |
| .chat-body { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| } | |
| .chat-input { | |
| padding: 1rem; | |
| background: #16213e; | |
| border-top: 1px solid #333; | |
| } | |
| .chat-input textarea { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid #333; | |
| border-radius: 8px; | |
| background: #0f0f23; | |
| color: #eee; | |
| resize: none; | |
| font-family: inherit; | |
| } | |
| .chat-input button { | |
| margin-top: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| background: #00d9ff; | |
| color: #000; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| } | |
| .chat-input button:hover { | |
| background: #00b8d9; | |
| } | |
| /* Marimo Sandbox Panel */ | |
| .marimo-panel { | |
| width: 50%; | |
| display: flex; | |
| flex-direction: column; | |
| transition: all 0.3s ease; | |
| } | |
| .marimo-panel.hidden { | |
| width: 0; | |
| opacity: 0; | |
| overflow: hidden; | |
| } | |
| .marimo-header { | |
| padding: 1rem; | |
| background: #16213e; | |
| border-bottom: 1px solid #333; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .marimo-header h2 { | |
| font-size: 1.2rem; | |
| color: #ff6b6b; | |
| } | |
| .marimo-frame { | |
| flex: 1; | |
| border: none; | |
| background: #fff; | |
| } | |
| /* Toggle Button */ | |
| .toggle-btn { | |
| padding: 0.5rem 1rem; | |
| background: #ff6b6b; | |
| color: #fff; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: background 0.2s; | |
| } | |
| .toggle-btn:hover { | |
| background: #ff5252; | |
| } | |
| .toggle-btn.active { | |
| background: #4ecdc4; | |
| } | |
| /* Resize Handle */ | |
| .resize-handle { | |
| width: 4px; | |
| background: #333; | |
| cursor: col-resize; | |
| transition: background 0.2s; | |
| } | |
| .resize-handle:hover { | |
| background: #00d9ff; | |
| } | |
| /* Message Styles */ | |
| .message { | |
| margin-bottom: 1rem; | |
| padding: 0.75rem; | |
| border-radius: 8px; | |
| max-width: 80%; | |
| } | |
| .message.user { | |
| background: #00d9ff; | |
| color: #000; | |
| margin-left: auto; | |
| } | |
| .message.assistant { | |
| background: #2a2a4a; | |
| color: #eee; | |
| } | |
| .message pre { | |
| background: #0f0f23; | |
| padding: 0.5rem; | |
| border-radius: 4px; | |
| overflow-x: auto; | |
| margin-top: 0.5rem; | |
| } | |
| .message code { | |
| font-family: 'Consolas', 'Monaco', monospace; | |
| font-size: 0.9rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Agent Zero Chat Panel --> | |
| <div class="chat-panel" id="chatPanel"> | |
| <div class="chat-header"> | |
| <h1>🤖 Agent Zero</h1> | |
| <button class="toggle-btn" id="toggleChatBtn" onclick="toggleChat()">Hide Chat</button> | |
| </div> | |
| <div class="chat-body" id="chatBody"> | |
| <div class="message assistant"> | |
| <strong>Agent Zero:</strong> | |
| <p>Welcome to Marimo Zero! I'm your AI assistant. Use the toggle button to show/hide the Marimo sandbox for code execution.</p> | |
| </div> | |
| </div> | |
| <div class="chat-input"> | |
| <textarea id="chatInput" rows="3" placeholder="Type your message..."></textarea> | |
| <button onclick="sendMessage()">Send</button> | |
| </div> | |
| </div> | |
| <!-- Resize Handle --> | |
| <div class="resize-handle" id="resizeHandle"></div> | |
| <!-- Marimo Sandbox Panel --> | |
| <div class="marimo-panel hidden" id="marimoPanel"> | |
| <div class="marimo-header"> | |
| <h2>📓 Marimo Sandbox</h2> | |
| <button class="toggle-btn active" id="toggleMarimoBtn" onclick="toggleMarimo()">Hide Sandbox</button> | |
| </div> | |
| <iframe | |
| class="marimo-frame" | |
| id="marimoFrame" | |
| src="http://localhost:8080" | |
| sandbox="allow-scripts allow-same-origin allow-downloads" | |
| ></iframe> | |
| </div> | |
| </div> | |
| <script> | |
| const chatPanel = document.getElementById('chatPanel'); | |
| const marimoPanel = document.getElementById('marimoPanel'); | |
| const chatBody = document.getElementById('chatBody'); | |
| const chatInput = document.getElementById('chatInput'); | |
| const resizeHandle = document.getElementById('resizeHandle'); | |
| // Toggle Marimo Sandbox | |
| function toggleMarimo() { | |
| marimoPanel.classList.toggle('hidden'); | |
| const btn = document.getElementById('toggleMarimoBtn'); | |
| btn.textContent = marimoPanel.classList.contains('hidden') ? 'Show Sandbox' : 'Hide Sandbox'; | |
| btn.classList.toggle('active'); | |
| } | |
| // Toggle Chat Panel | |
| function toggleChat() { | |
| chatPanel.classList.toggle('collapsed'); | |
| const btn = document.getElementById('toggleChatBtn'); | |
| btn.textContent = chatPanel.classList.contains('collapsed') ? 'Show Chat' : 'Hide Chat'; | |
| } | |
| // Send Message (simulated - replace with actual Agent Zero API call) | |
| async function sendMessage() { | |
| const message = chatInput.value.trim(); | |
| if (!message) return; | |
| // Add user message | |
| chatBody.innerHTML += ` | |
| <div class="message user"> | |
| <strong>You:</strong> | |
| <p>${escapeHtml(message)}</p> | |
| </div> | |
| `; | |
| chatInput.value = ''; | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| // Call Agent Zero API (replace with actual endpoint) | |
| try { | |
| const response = await fetch('http://localhost:80/chat', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ message }) | |
| }); | |
| const data = await response.json(); | |
| chatBody.innerHTML += ` | |
| <div class="message assistant"> | |
| <strong>Agent Zero:</strong> | |
| <p>${escapeHtml(data.response || 'No response')}</p> | |
| </div> | |
| `; | |
| } catch (err) { | |
| chatBody.innerHTML += ` | |
| <div class="message assistant"> | |
| <strong>Agent Zero:</strong> | |
| <p>⚠️ Could not connect to Agent Zero. Make sure it's running on port 80.</p> | |
| </div> | |
| `; | |
| } | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| } | |
| // Escape HTML | |
| function escapeHtml(text) { | |
| const div = document.createElement('div'); | |
| div.textContent = text; | |
| return div.innerHTML; | |
| } | |
| // Resize functionality | |
| let isResizing = false; | |
| resizeHandle.addEventListener('mousedown', (e) => { | |
| isResizing = true; | |
| document.body.style.cursor = 'col-resize'; | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isResizing) return; | |
| const containerWidth = document.querySelector('.container').offsetWidth; | |
| const newMarimoWidth = ((containerWidth - e.clientX) / containerWidth) * 100; | |
| if (newMarimoWidth > 20 && newMarimoWidth < 80) { | |
| marimoPanel.style.width = `${newMarimoWidth}%`; | |
| chatPanel.style.flex = `0 0 ${100 - newMarimoWidth}%`; | |
| } | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| isResizing = false; | |
| document.body.style.cursor = 'default'; | |
| }); | |
| // Enter to send | |
| chatInput.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |