@spectrumsense/spectrum-chat-dev
Version:
Embeddable AI Widget - Add trusted, evidence-based answers directly to your website. Simple installation, enterprise-grade security.
249 lines (220 loc) • 8.56 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spectrum Chat - One-Line Installation Demo</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin: 0;
padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: white;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.demo-section {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 1rem;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.demo-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.code-block {
background: rgba(0, 0, 0, 0.3);
border-radius: 0.5rem;
padding: 1rem;
margin: 1rem 0;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.9rem;
overflow-x: auto;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
padding: 1.5rem;
border-radius: 0.75rem;
margin: 1.5rem 0;
text-align: center;
}
.button {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
margin: 0.25rem;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.button:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
padding: 0.5rem 0;
padding-left: 2rem;
position: relative;
}
.feature-list li:before {
content: '✓';
position: absolute;
left: 0;
font-weight: bold;
color: #10b981;
}
</style>
</head>
<body>
<div class="container">
<h1>🚀 Spectrum Chat - One-Line Installation Demo</h1>
<div class="success">
<h3>✅ One-Line Installation Active!</h3>
<p>This page uses the new one-line installation method with data-* attributes.</p>
</div>
<div class="demo-section">
<h2 class="demo-title">✨ Key Features</h2>
<ul class="feature-list">
<li><strong>One-Line Installation</strong> - Just one script tag with data-* attributes</li>
<li><strong>Fixed Positioning</strong> - Completely isolated from customer CSS (z-index: 999999)</li>
<li><strong>Mobile Responsive</strong> - Auto-centers on mobile, stays bottom-right on desktop</li>
<li><strong>No Configuration Object Needed</strong> - All config via data-* attributes</li>
<li><strong>Full Security</strong> - JWT tokens, site-key validation, origin checks</li>
<li><strong>Session Persistence</strong> - Conversations saved in sessionStorage</li>
<li><strong>Custom Branding</strong> - Colors, title, icon all configurable</li>
<li><strong>Markdown Support</strong> - Rich text formatting in responses</li>
</ul>
</div>
<div class="demo-section">
<h2 class="demo-title">📝 Installation Code</h2>
<p>This is the actual code used on this page:</p>
<div class="code-block">
<!-- One-Line Installation -->
<script src="../src/spectrum-chat.js"
data-site-key="pub_bright_spectrum_htlzbncn"
data-api-url="http://localhost:8000/api/v1/conversations"
data-title="Demo Assistant"
data-primary-color="#667eea"
data-user-color="#764ba2"
data-ai-color="#667eea"
data-intro-text="Hi! I'm your demo assistant. Try me out!"
data-enable-citations="true"
data-use-jwt="false"
data-debug="true"></script>
</div>
<div class="success">
<h4>🎉 That's It!</h4>
<p>No custom element, no separate config object. Just data-* attributes on the script tag!</p>
</div>
</div>
<div class="demo-section">
<h2 class="demo-title">🎮 Try It Out</h2>
<p>Click the floating button in the bottom-right corner to open the chat widget.</p>
<div style="margin: 1.5rem 0;">
<button class="button" onclick="window.SpectrumChatGlobal.open()">Open Chat</button>
<button class="button" onclick="window.SpectrumChatGlobal.close()">Close Chat</button>
<button class="button" onclick="alert('Chat is ' + (window.SpectrumChatGlobal.isOpen() ? 'open' : 'closed'))">Check Status</button>
<button class="button" onclick="window.SpectrumChatGlobal.clearSession(); alert('Session cleared!')">Clear Session</button>
</div>
</div>
<div class="demo-section">
<h2 class="demo-title">📱 Mobile Test</h2>
<p>Resize your browser window to less than 768px width to see the mobile layout.</p>
<p>On mobile:</p>
<ul class="feature-list">
<li>Widget centers horizontally at bottom</li>
<li>Panel expands to full width (minus 20px margins)</li>
<li>Height adjusts to 70vh for better UX</li>
<li>FAB button also centers</li>
</ul>
</div>
<div class="demo-section">
<h2 class="demo-title">🔧 Alternative Installation Methods</h2>
<h3 style="margin-top: 1.5rem;">Method 1: One-Line Installation (Recommended)</h3>
<div class="code-block">
<script src="https://unpkg.com/@spectrumsense/spectrum-chat/dist/spectrum-chat.js"
data-site-key="pub_yourcompany_abc123xyz"
data-title="Help Center"
data-primary-color="#007bff"></script>
</div>
<h3 style="margin-top: 1.5rem;">Method 2: Config Object</h3>
<div class="code-block">
<script>
window.SpectrumChatConfig = {
siteKey: 'pub_yourcompany_abc123xyz',
title: 'Help Center',
primaryColor: '#007bff'
};
</script>
<script src="https://unpkg.com/@spectrumsense/spectrum-chat/dist/spectrum-chat.js"></script>
</div>
</div>
<div class="demo-section">
<h2 class="demo-title">🔒 Security Features</h2>
<p>All v1 security features are preserved in v2:</p>
<ul class="feature-list">
<li><strong>Phase 0</strong>: Site-key + Origin validation</li>
<li><strong>Phase 1</strong>: JWT session tokens (optional)</li>
<li><strong>Auto-refresh</strong>: Tokens refresh 5 minutes before expiry</li>
<li><strong>Conversation binding</strong>: Conversations tied to domain</li>
<li><strong>Page URL hashing</strong>: SHA256 for telemetry</li>
<li><strong>Request nonces</strong>: UUID v4 for tracking</li>
</ul>
</div>
</div>
<!-- ONE-LINE INSTALLATION - ACTUAL WORKING CODE -->
<script src="../src/spectrum-chat.js"
data-site-key="pub_bright_spectrum_htlzbncn"
data-api-url="http://localhost:8000/api/v1/conversations"
data-title="Demo Assistant"
data-primary-color="#667eea"
data-user-color="#764ba2"
data-ai-color="#667eea"
data-intro-text="Hi! I'm your demo assistant. Try me out!"
data-enable-citations="true"
data-use-jwt="false"
data-debug="true"></script>
<script>
// Log when chat opens/closes
document.addEventListener('spectrum-chat-opened', () => {
console.log('✅ Chat opened!');
});
document.addEventListener('spectrum-chat-closed', () => {
console.log('❌ Chat closed!');
});
// Log widget state
setTimeout(() => {
console.log('=== SPECTRUM CHAT STATUS ===');
console.log('Initialized:', window.SpectrumChatGlobal ? 'Yes' : 'No');
console.log('Config:', window.SpectrumChatGlobal?.getConfig());
console.log('Conversation ID:', window.SpectrumChatGlobal?.getConversationId());
console.log('Session ID:', window.SpectrumChatGlobal?.getSessionId());
console.log('================================');
}, 2000);
</script>
</body>
</html>