aboutsummaryrefslogtreecommitdiff
path: root/downloads/chatstudio_test.html
diff options
context:
space:
mode:
authorAgando <roduccomm@gmail.com>2026-06-07 06:00:44 +0200
committerAgando <roduccomm@gmail.com>2026-06-07 06:00:44 +0200
commitab235396568a7e61f02eed436e2400975c752d01 (patch)
tree203e3796b4d9b77b604b848aaa40fd9377c48b92 /downloads/chatstudio_test.html
parent021aa37d540353553bc60c28d78e35c828c58458 (diff)
auto: 2026-06-07_06:00 changes
Diffstat (limited to 'downloads/chatstudio_test.html')
-rw-r--r--downloads/chatstudio_test.html172
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>