Grey screen after captcha auth for first login popup #2237
Description
So,
When i wanted to test, and the captcha is completed,I see a white/grayish screen in the popup. Then if i close it and message again,the same grayish window pops up.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Puter Chat</title>
<script src="https://js.puter.com/v2/"></script>
<style>
body {
margin: 0;
font-family: system-ui;
background: #0f0f0f;
color: #eee;
display: flex;
flex-direction: column;
height: 100vh;
}
#chat { flex: 1; padding: 16px; overflow-y: auto; }
.msg {
max-width: 70%;
padding: 10px 14px;
margin-bottom: 12px;
border-radius: 12px;
white-space: pre-wrap;
}
.user { background: #2563eb; margin-left: auto; }
.ai { background: #1f2933; margin-right: auto; }
#bar { display: flex; gap: 8px; padding: 12px; }
input { flex: 1; padding: 10px; border-radius: 8px; border: none; }
button { padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; }
</style>
</head>
<body>
<div id="chat"></div>
<div id="bar">
<input id="input" placeholder="Ask something…" />
<button id="send">Send</button>
</div>
<script>
const chat = document.getElementById('chat');
const input = document.getElementById('input');
const sendBtn = document.getElementById('send');
const history = [];
function add(role, text = '') {
const div = document.createElement('div');
div.className = `msg ${role}`;
div.textContent = text;
chat.appendChild(div);
chat.scrollTop = chat.scrollHeight;
return div;
}
// 🔥 PRE-WARM PUTER (critical)
(async () => {
try {
await puter.ai.chat(' ', { model: 'claude-sonnet-4.5' });
} catch {}
})();
sendBtn.onclick = async () => {
const text = input.value.trim();
if (!text) return;
input.value = '';
history.push({ role: 'user', content: text });
add('user', text);
const aiEl = add('ai', '');
let full = '';
const stream = await puter.ai.chat(
history.map(m => m.content).join('\n'),
{ model: 'claude-sonnet-4.5', stream: true }
);
for await (const part of stream) {
if (typeof part?.text === 'string') {
full += part.text;
aiEl.textContent = full;
chat.scrollTop = chat.scrollHeight;
}
}
history.push({ role: 'assistant', content: full });
};
input.addEventListener('keydown', e => {
if (e.key === 'Enter') sendBtn.click();
});
</script>
</body>
</html>