1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
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>
|
