248 lines
8.4 KiB
HTML
248 lines
8.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Chat E2E Test Demo</title>
|
||
|
|
<style>
|
||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||
|
|
color: #fff;
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.chat-layout {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100vh;
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.connection-status {
|
||
|
|
padding: 8px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.connection-status.connected { background: #2ecc71; color: #fff; }
|
||
|
|
.connection-status.disconnected { background: #e74c3c; color: #fff; }
|
||
|
|
.connection-status.demo { background: #3498db; color: #fff; }
|
||
|
|
#messages {
|
||
|
|
flex: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
padding: 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 16px;
|
||
|
|
}
|
||
|
|
.message {
|
||
|
|
max-width: 80%;
|
||
|
|
padding: 12px 16px;
|
||
|
|
border-radius: 16px;
|
||
|
|
animation: fadeIn 0.3s ease;
|
||
|
|
}
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from { opacity: 0; transform: translateY(10px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
.message.user {
|
||
|
|
background: #3498db;
|
||
|
|
align-self: flex-end;
|
||
|
|
border-bottom-right-radius: 4px;
|
||
|
|
}
|
||
|
|
.message.bot {
|
||
|
|
background: #2d3748;
|
||
|
|
align-self: flex-start;
|
||
|
|
border-bottom-left-radius: 4px;
|
||
|
|
}
|
||
|
|
.message-content { line-height: 1.5; }
|
||
|
|
footer {
|
||
|
|
padding: 16px;
|
||
|
|
background: rgba(0,0,0,0.2);
|
||
|
|
border-top: 1px solid rgba(255,255,255,0.1);
|
||
|
|
}
|
||
|
|
.input-container {
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
#messageInput {
|
||
|
|
flex: 1;
|
||
|
|
padding: 12px 16px;
|
||
|
|
border: 1px solid rgba(255,255,255,0.2);
|
||
|
|
border-radius: 24px;
|
||
|
|
background: rgba(255,255,255,0.1);
|
||
|
|
color: #fff;
|
||
|
|
font-size: 16px;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
#messageInput:focus {
|
||
|
|
border-color: #3498db;
|
||
|
|
background: rgba(255,255,255,0.15);
|
||
|
|
}
|
||
|
|
#messageInput::placeholder { color: rgba(255,255,255,0.5); }
|
||
|
|
button {
|
||
|
|
width: 44px;
|
||
|
|
height: 44px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: none;
|
||
|
|
background: #3498db;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 18px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
button:hover { background: #2980b9; transform: scale(1.05); }
|
||
|
|
button:disabled { background: #555; cursor: not-allowed; transform: none; }
|
||
|
|
.typing-indicator {
|
||
|
|
display: flex;
|
||
|
|
gap: 4px;
|
||
|
|
padding: 12px 16px;
|
||
|
|
background: #2d3748;
|
||
|
|
border-radius: 16px;
|
||
|
|
border-bottom-left-radius: 4px;
|
||
|
|
align-self: flex-start;
|
||
|
|
max-width: 80px;
|
||
|
|
}
|
||
|
|
.typing-indicator span {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #888;
|
||
|
|
animation: typing 1.4s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
|
||
|
|
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
|
||
|
|
@keyframes typing {
|
||
|
|
0%, 60%, 100% { transform: translateY(0); }
|
||
|
|
30% { transform: translateY(-4px); }
|
||
|
|
}
|
||
|
|
.test-info {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 80px;
|
||
|
|
right: 16px;
|
||
|
|
background: rgba(0,0,0,0.8);
|
||
|
|
padding: 12px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 12px;
|
||
|
|
max-width: 300px;
|
||
|
|
}
|
||
|
|
.test-info h3 { color: #3498db; margin-bottom: 8px; }
|
||
|
|
.test-info ul { padding-left: 16px; }
|
||
|
|
.test-info li { margin: 4px 0; color: #aaa; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="chat-layout" id="chat-app">
|
||
|
|
<div id="connectionStatus" class="connection-status demo">🧪 E2E Test Demo Mode</div>
|
||
|
|
<main id="messages">
|
||
|
|
<div class="message bot">
|
||
|
|
<div class="message-content bot-message">
|
||
|
|
👋 Welcome to the <strong>General Bots E2E Test</strong>!<br><br>
|
||
|
|
This is a demo chat interface. Type a message below and press Enter or click Send.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<div class="input-container">
|
||
|
|
<input
|
||
|
|
name="content"
|
||
|
|
id="messageInput"
|
||
|
|
type="text"
|
||
|
|
placeholder="Type your message..."
|
||
|
|
autofocus
|
||
|
|
/>
|
||
|
|
<button type="button" id="voiceBtn" title="Voice">🎤</button>
|
||
|
|
<button type="button" id="sendBtn" title="Send">↑</button>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-info">
|
||
|
|
<h3>🔬 Test Elements</h3>
|
||
|
|
<ul>
|
||
|
|
<li>#chat-app - Chat container</li>
|
||
|
|
<li>#messageInput - Input field</li>
|
||
|
|
<li>#sendBtn - Send button</li>
|
||
|
|
<li>.message - Chat messages</li>
|
||
|
|
<li>.bot-message - Bot responses</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const messages = document.getElementById('messages');
|
||
|
|
const input = document.getElementById('messageInput');
|
||
|
|
const sendBtn = document.getElementById('sendBtn');
|
||
|
|
|
||
|
|
const demoResponses = [
|
||
|
|
"That's interesting! Tell me more about that.",
|
||
|
|
"I understand. How can I help you with that?",
|
||
|
|
"Great question! Let me think about that...",
|
||
|
|
"Thanks for sharing! Is there anything specific you'd like to know?",
|
||
|
|
"I'm here to help! What would you like to do next?",
|
||
|
|
"That makes sense. Would you like me to elaborate on anything?",
|
||
|
|
"Interesting point! Here's what I think...",
|
||
|
|
"I appreciate your message. Let me assist you with that.",
|
||
|
|
];
|
||
|
|
|
||
|
|
function addMessage(sender, content, id = null) {
|
||
|
|
const div = document.createElement('div');
|
||
|
|
div.className = `message ${sender}`;
|
||
|
|
if (id) div.id = id;
|
||
|
|
div.innerHTML = `<div class="message-content ${sender}-message">${content}</div>`;
|
||
|
|
messages.appendChild(div);
|
||
|
|
messages.scrollTop = messages.scrollHeight;
|
||
|
|
return div;
|
||
|
|
}
|
||
|
|
|
||
|
|
function showTyping() {
|
||
|
|
const typing = document.createElement('div');
|
||
|
|
typing.className = 'typing-indicator';
|
||
|
|
typing.id = 'typing';
|
||
|
|
typing.innerHTML = '<span></span><span></span><span></span>';
|
||
|
|
messages.appendChild(typing);
|
||
|
|
messages.scrollTop = messages.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideTyping() {
|
||
|
|
const typing = document.getElementById('typing');
|
||
|
|
if (typing) typing.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendMessage() {
|
||
|
|
const content = input.value.trim();
|
||
|
|
if (!content) return;
|
||
|
|
|
||
|
|
// Add user message
|
||
|
|
addMessage('user', content);
|
||
|
|
input.value = '';
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
// Show typing indicator
|
||
|
|
showTyping();
|
||
|
|
|
||
|
|
// Simulate bot response after delay
|
||
|
|
const delay = 500 + Math.random() * 1500;
|
||
|
|
setTimeout(() => {
|
||
|
|
hideTyping();
|
||
|
|
const response = demoResponses[Math.floor(Math.random() * demoResponses.length)];
|
||
|
|
addMessage('bot', response);
|
||
|
|
}, delay);
|
||
|
|
}
|
||
|
|
|
||
|
|
sendBtn.onclick = sendMessage;
|
||
|
|
input.addEventListener('keypress', (e) => {
|
||
|
|
if (e.key === 'Enter') sendMessage();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Log for E2E test verification
|
||
|
|
console.log('Demo chat initialized');
|
||
|
|
console.log('Test elements ready: #chat-app, #messageInput, #sendBtn');
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|