diff options
| author | Agando <roduccomm@gmail.com> | 2026-06-07 06:00:44 +0200 |
|---|---|---|
| committer | Agando <roduccomm@gmail.com> | 2026-06-07 06:00:44 +0200 |
| commit | ab235396568a7e61f02eed436e2400975c752d01 (patch) | |
| tree | 203e3796b4d9b77b604b848aaa40fd9377c48b92 /downloads/chatstudio_test.html | |
| parent | 021aa37d540353553bc60c28d78e35c828c58458 (diff) | |
auto: 2026-06-07_06:00 changes
Diffstat (limited to 'downloads/chatstudio_test.html')
| -rw-r--r-- | downloads/chatstudio_test.html | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/downloads/chatstudio_test.html b/downloads/chatstudio_test.html new file mode 100644 index 0000000..58b1f30 --- /dev/null +++ b/downloads/chatstudio_test.html @@ -0,0 +1,172 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>ChatStudio | Integration Sandbox</title> + <style> + :root { + --bg-dark: #0a0a0c; + --term-bg: #121214; + --accent-green: #00ff9d; + --text-main: #e0e0e6; + --text-dim: #888899; + } + body { + background: var(--bg-dark); + color: var(--text-main); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; + } + header { + padding: 1rem; + background: #1a1a1e; + border-bottom: 1px solid #333; + display: flex; + justify-content: space-between; + align-items: center; + } + .badge { + background: var(--accent-green); + color: black; + padding: 2px 8px; + border-radius: 4px; + font-size: 12px; + font-weight: bold; + } + #terminal-mock { + flex: 1; + background: var(--term-bg); + margin: 20px; + border-radius: 8px; + border: 1px solid #333; + padding: 20px; + font-family: 'Consolas', 'Courier New', monospace; + display: flex; + flex-direction: column; + box-shadow: 0 10px 30px rgba(0,0,0,0.5); + } + .term-line { margin-bottom: 8px; } + .term-prompt { color: var(--accent-green); margin-right: 8px; } + .term-input-area { + display: flex; + margin-top: auto; + background: #1a1a1e; + padding: 10px; + border-radius: 4px; + } + #mock-input { + background: transparent; + border: none; + color: white; + font-family: inherit; + flex: 1; + outline: none; + } + .hint { + color: var(--text-dim); + font-size: 0.9rem; + text-align: center; + margin-bottom: 10px; + } + </style> +</head> +<body> + +<header> + <div><strong>ChatStudio</strong> <span class="badge">SANDBOX v1.0</span></div> + <div style="font-size: 12px; color: var(--text-dim);">Simulating newOS4 Environment</div> +</header> + +<div id="terminal-mock"> + <div class="term-line"><span class="term-prompt">root@webx11:~$</span> welcome to the ChatStudio testing environment.</div> + <div class="term-line"><span class="term-prompt">root@webx11:~$</span> Type <span style="color:var(--accent-green)">'chat'</span> below to launch the overlay.</div> + + <div id="term-output" style="flex: 1; overflow-y: auto;"></div> + + <div class="term-input-area"> + <span class="term-prompt">❯</span> + <input type="text" id="mock-input" placeholder="Enter command..." autofocus> + </div> +</div> + +<script> + // 1. Mock the Terminal Object that ChatStudioModule expects + window.webx11 = { + ollamaManager: { + endpoint: '/ollama' + } + }; + + // 2. Load the ChatStudioModule (assuming it's globally available or we load the script) + // In this sandbox, we manually instantiate the module since we aren't booting the full OS. + async function initSandbox() { + try { + // Since the module is a class, we need it to be defined. + // In a real environment, this is handled by the ModuleManager. + // We will load the script from the server. + await loadScript('/spaces/newos4/modules/core/module-chatstudio.js'); + + const csModule = new ChatStudioModule(); + + // Mock the terminal reference for the module + csModule.terminal = { + print: (msg, type) => { + const out = document.getElementById('term-output'); + const div = document.createElement('div'); + div.className = 'term-line'; + div.innerHTML = `<span class="term-prompt">system:</span> <span style="color:${type==='error'?'#ff5555':'#aaa'}">${msg}</span>`; + out.appendChild(div); + out.scrollTop = out.scrollHeight; + }, + ollamaManager: window.webx11.ollamaManager, + inputField: document.getElementById('mock-input') + }; + + csModule.registerCommands(); + + const input = document.getElementById('mock-input'); + input.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + const cmd = input.value.trim(); + const line = document.createElement('div'); + line.className = 'term-line'; + line.innerHTML = `<span class="term-prompt">❯</span> ${cmd}`; + document.getElementById('term-output').appendChild(line); + + if (cmd === 'chat') { + csModule.toggleChatOverlay(); + } else { + csModule.terminal.print(`Command not found: ${cmd}`, 'error'); + } + + input.value = ''; + document.getElementById('term-output').scrollTop = document.getElementById('term-output').scrollHeight; + } + }); + + } catch (err) { + console.error('Sandbox Init Failed:', err); + alert('Failed to load ChatStudioModule. Ensure the path is correct.'); + } + } + + function loadScript(src) { + return new Promise((resolve, reject) => { + const s = document.createElement('script'); + s.src = src; + s.onload = resolve; + s.onerror = reject; + document.body.appendChild(s); + }); + } + + initSandbox(); +</script> + +</body> +</html> |