Add test-chat.html for testing customer chat initiation
Simple web page for testing the chat flow as a customer. Enter BusinessID and start a chat that appears on the HUD. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
John Mizerek
parent
8108924dcd
commit
4cfcb728cc
1 changed files with 306 additions and 0 deletions
306
test-chat.html
Normal file
306
test-chat.html
Normal file
|
|
@ -0,0 +1,306 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Test Chat - Customer</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #fff;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
h1 { margin-bottom: 20px; }
|
||||||
|
.form-group { margin-bottom: 16px; }
|
||||||
|
label { display: block; margin-bottom: 4px; color: #888; font-size: 14px; }
|
||||||
|
input, select, textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #222;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.btn-primary { background: #2196f3; color: #fff; }
|
||||||
|
.btn-secondary { background: #333; color: #fff; }
|
||||||
|
.btn-success { background: #22c55e; color: #fff; }
|
||||||
|
.result {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #222;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.chat-container {
|
||||||
|
display: none;
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-container.visible { display: block; }
|
||||||
|
.chat-messages {
|
||||||
|
height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 16px;
|
||||||
|
background: #111;
|
||||||
|
}
|
||||||
|
.chat-message {
|
||||||
|
max-width: 80%;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.chat-message.customer {
|
||||||
|
background: #2196f3;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.chat-message.staff {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
.chat-input-area {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
background: #1a1a1a;
|
||||||
|
}
|
||||||
|
.chat-input-area input { flex: 1; }
|
||||||
|
.chat-input-area button { flex-shrink: 0; }
|
||||||
|
.info { color: #888; font-size: 14px; margin-bottom: 20px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Test Chat (Customer View)</h1>
|
||||||
|
<p class="info">Use this page to test initiating a chat as a customer. The chat will appear on the HUD.</p>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Business ID</label>
|
||||||
|
<input type="number" id="businessId" value="" placeholder="Enter business ID (e.g., 17 for Quick Bites)">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Service Point ID (optional - for dine-in)</label>
|
||||||
|
<input type="number" id="servicePointId" value="0" placeholder="0 for remote chat">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>User ID (optional - for remote chat)</label>
|
||||||
|
<input type="number" id="userId" value="0" placeholder="Your user ID">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Initial Message (optional)</label>
|
||||||
|
<textarea id="initialMessage" rows="2" placeholder="Hello, I need help..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn-primary" onclick="startChat()">Start Chat</button>
|
||||||
|
<button class="btn-secondary" onclick="checkActiveChat()">Check Active Chat</button>
|
||||||
|
|
||||||
|
<div class="result" id="result" style="display:none;"></div>
|
||||||
|
|
||||||
|
<div class="chat-container" id="chatContainer">
|
||||||
|
<div class="chat-messages" id="chatMessages"></div>
|
||||||
|
<div class="chat-input-area">
|
||||||
|
<input type="text" id="chatInput" placeholder="Type a message..." onkeypress="if(event.key==='Enter')sendMessage()">
|
||||||
|
<button class="btn-success" onclick="sendMessage()">Send</button>
|
||||||
|
<button class="btn-secondary" onclick="closeChat()">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let currentTaskId = null;
|
||||||
|
let pollInterval = null;
|
||||||
|
let lastMessageId = 0;
|
||||||
|
|
||||||
|
// Load saved business ID
|
||||||
|
document.getElementById('businessId').value = localStorage.getItem('test_chat_business_id') || '';
|
||||||
|
|
||||||
|
async function startChat() {
|
||||||
|
const businessId = parseInt(document.getElementById('businessId').value) || 0;
|
||||||
|
const servicePointId = parseInt(document.getElementById('servicePointId').value) || 0;
|
||||||
|
const userId = parseInt(document.getElementById('userId').value) || 0;
|
||||||
|
const message = document.getElementById('initialMessage').value.trim();
|
||||||
|
|
||||||
|
if (!businessId) {
|
||||||
|
showResult('Error: BusinessID is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save for next time
|
||||||
|
localStorage.setItem('test_chat_business_id', businessId);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/tasks/createChat.cfm', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
BusinessID: businessId,
|
||||||
|
ServicePointID: servicePointId,
|
||||||
|
UserID: userId,
|
||||||
|
Message: message
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
showResult(JSON.stringify(data, null, 2));
|
||||||
|
|
||||||
|
if (data.OK && data.TaskID) {
|
||||||
|
currentTaskId = data.TaskID;
|
||||||
|
openChatUI();
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
showResult('Error: ' + err.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function checkActiveChat() {
|
||||||
|
const businessId = parseInt(document.getElementById('businessId').value) || 0;
|
||||||
|
const servicePointId = parseInt(document.getElementById('servicePointId').value) || 0;
|
||||||
|
|
||||||
|
if (!businessId) {
|
||||||
|
showResult('Error: BusinessID is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/chat/getActiveChat.cfm', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
BusinessID: businessId,
|
||||||
|
ServicePointID: servicePointId
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
showResult(JSON.stringify(data, null, 2));
|
||||||
|
|
||||||
|
if (data.OK && data.HAS_ACTIVE_CHAT && data.TASK_ID) {
|
||||||
|
currentTaskId = data.TASK_ID;
|
||||||
|
openChatUI();
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
showResult('Error: ' + err.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openChatUI() {
|
||||||
|
document.getElementById('chatContainer').classList.add('visible');
|
||||||
|
lastMessageId = 0;
|
||||||
|
loadMessages();
|
||||||
|
pollInterval = setInterval(loadMessages, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeChat() {
|
||||||
|
document.getElementById('chatContainer').classList.remove('visible');
|
||||||
|
if (pollInterval) {
|
||||||
|
clearInterval(pollInterval);
|
||||||
|
pollInterval = null;
|
||||||
|
}
|
||||||
|
currentTaskId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadMessages() {
|
||||||
|
if (!currentTaskId) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/chat/getMessages.cfm', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
TaskID: currentTaskId,
|
||||||
|
AfterMessageID: lastMessageId
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.OK) {
|
||||||
|
const messages = data.MESSAGES || [];
|
||||||
|
const container = document.getElementById('chatMessages');
|
||||||
|
|
||||||
|
if (lastMessageId === 0) {
|
||||||
|
container.innerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
messages.forEach(msg => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
const isCustomer = msg.SenderType === 'customer';
|
||||||
|
div.className = 'chat-message ' + (isCustomer ? 'customer' : 'staff');
|
||||||
|
div.textContent = msg.MessageBody;
|
||||||
|
container.appendChild(div);
|
||||||
|
lastMessageId = Math.max(lastMessageId, msg.MessageID);
|
||||||
|
});
|
||||||
|
|
||||||
|
container.scrollTop = container.scrollHeight;
|
||||||
|
|
||||||
|
if (data.CHAT_CLOSED) {
|
||||||
|
showResult('Chat has been closed by staff');
|
||||||
|
closeChat();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Load messages error:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function sendMessage() {
|
||||||
|
const input = document.getElementById('chatInput');
|
||||||
|
const message = input.value.trim();
|
||||||
|
|
||||||
|
if (!message || !currentTaskId) return;
|
||||||
|
|
||||||
|
input.value = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/chat/sendMessage.cfm', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
TaskID: currentTaskId,
|
||||||
|
Message: message,
|
||||||
|
SenderType: 'customer'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.OK) {
|
||||||
|
// Add locally for immediate feedback
|
||||||
|
const container = document.getElementById('chatMessages');
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = 'chat-message customer';
|
||||||
|
div.textContent = message;
|
||||||
|
container.appendChild(div);
|
||||||
|
container.scrollTop = container.scrollHeight;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Send message error:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showResult(text) {
|
||||||
|
const el = document.getElementById('result');
|
||||||
|
el.textContent = text;
|
||||||
|
el.style.display = 'block';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in a new issue