Dev mode active. Talk to test your app.
`;
// Insert into DOM
const container = document.createElement('div');
container.id = 'gb-dev-chat-container';
container.innerHTML = html;
document.body.appendChild(container);
// Elements
const btn = document.getElementById('gb-dev-chat-btn');
const panel = document.getElementById('gb-dev-panel');
const closeBtn = document.getElementById('gb-dev-close');
const messages = document.getElementById('gb-dev-messages');
const input = document.getElementById('gb-dev-input');
const sendBtn = document.getElementById('gb-dev-send');
const actions = document.querySelectorAll('.gb-dev-action');
// Toggle panel
function toggle() {
isOpen = !isOpen;
panel.classList.toggle('open', isOpen);
if (isOpen) {
input.focus();
connectWS();
}
}
btn.addEventListener('click', toggle);
closeBtn.addEventListener('click', toggle);
// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
toggle();
}
if (e.key === 'Escape' && isOpen) {
toggle();
}
});
// Input handling
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
send();
}
});
sendBtn.addEventListener('click', send);
// Quick actions
actions.forEach(btn => {
btn.addEventListener('click', () => {
const cmd = btn.dataset.cmd;
if (cmd === 'clear') {
clearChat();
} else {
input.value = cmd;
send();
}
});
});
// Get app context
function getContext() {
const match = location.pathname.match(/\/apps\/([^\/]+)/);
return {
app: match ? match[1] : 'default',
url: location.href,
path: location.pathname
};
}
// Add message
function addMsg(text, type = 'bot') {
const msg = document.createElement('div');
msg.className = `gb-dev-msg ${type}`;
if (type === 'bot' && text.includes('```')) {
msg.innerHTML = text.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => {
return `Chat cleared.
';
clearUserData();
}
// user_data virtual table storage (one table for all)
function saveToUserData() {
const history = Array.from(messages.children).map(m => ({
type: m.classList[1],
html: m.innerHTML
})).slice(-CONFIG.maxHistory);
fetch(CONFIG.userDataEndpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
namespace: 'dev_chat',
key: getContext().app + '_history',
value: JSON.stringify(history)
})
}).catch(() => {});
}
function loadFromUserData() {
fetch(`${CONFIG.userDataEndpoint}?namespace=dev_chat&key=${getContext().app}_history`)
.then(r => r.json())
.then(data => {
if (data && data.value) {
const history = JSON.parse(data.value);
history.forEach(m => {
const el = document.createElement('div');
el.className = `gb-dev-msg ${m.type}`;
el.innerHTML = m.html;
messages.appendChild(el);
});
}
})
.catch(() => {});
}
function clearUserData() {
fetch(`${CONFIG.userDataEndpoint}?namespace=dev_chat&key=${getContext().app}_history`, {
method: 'DELETE'
}).catch(() => {});
}
// Load history on init
loadFromUserData();
// Expose API for external use
window.gbDevChat = {
open: () => { if (!isOpen) toggle(); },
close: () => { if (isOpen) toggle(); },
send: (msg) => { input.value = msg; send(); },
addMessage: addMsg,
showFileChange
};
})();