Initial commit: Nostr chat widget
This commit is contained in:
36
.gitignore
vendored
Normal file
36
.gitignore
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.production
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Logs
|
||||
logs/
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Build
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Testing
|
||||
coverage/
|
||||
|
||||
# Temporary files
|
||||
tmp/
|
||||
temp/
|
||||
226
chat.css
Normal file
226
chat.css
Normal file
@@ -0,0 +1,226 @@
|
||||
/* Nostr Chat Widget Styles */
|
||||
|
||||
/* Widget positioning and z-index management */
|
||||
#chat-widget-root > div {
|
||||
pointer-events: auto !important;
|
||||
position: fixed !important;
|
||||
bottom: 1.5rem !important;
|
||||
right: 1.5rem !important;
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
/* Chat bubble button */
|
||||
#chat-bubble {
|
||||
position: fixed !important;
|
||||
bottom: 24px !important;
|
||||
right: 24px !important;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #fdad01;
|
||||
border: 2px solid #fdad01;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.2s;
|
||||
z-index: 999999 !important;
|
||||
}
|
||||
|
||||
#chat-bubble:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#chat-bubble.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Chat window container */
|
||||
#chat-window {
|
||||
position: fixed !important;
|
||||
bottom: 24px !important;
|
||||
right: 24px !important;
|
||||
width: 380px;
|
||||
height: 600px;
|
||||
background: white;
|
||||
border: 2px solid #fdad01;
|
||||
border-radius: 12px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
z-index: 999999 !important;
|
||||
}
|
||||
|
||||
#chat-window.open {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* Chat header */
|
||||
#chat-header {
|
||||
background: linear-gradient(to right, #fdad01, #ff9500);
|
||||
color: white;
|
||||
padding: 16px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#status {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#close-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Messages container */
|
||||
#messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
/* Message bubbles */
|
||||
.message {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.message.cs,
|
||||
.message.system {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
max-width: 75%;
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message.user .message-bubble {
|
||||
background: #fdad01;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message.cs .message-bubble {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.message.system .message-bubble {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Input area */
|
||||
#chat-input {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
background: white;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
#input-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#message-input {
|
||||
flex: 1;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#message-input:focus {
|
||||
border-color: #fdad01;
|
||||
}
|
||||
|
||||
#send-btn {
|
||||
background: #fdad01;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#send-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Connecting animation */
|
||||
.connecting {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsive styles */
|
||||
@media (max-width: 600px) {
|
||||
#chat-window {
|
||||
bottom: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
border-radius: 0 !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
#chat-header {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
#chat-input {
|
||||
border-radius: 0 0 0 0 !important;
|
||||
}
|
||||
|
||||
#chat-bubble {
|
||||
bottom: 16px !important;
|
||||
right: 16px !important;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Safe area for mobile devices with notches */
|
||||
.safe-area-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
343
config_docs.md
Normal file
343
config_docs.md
Normal file
@@ -0,0 +1,343 @@
|
||||
# Configuration Guide
|
||||
|
||||
This guide walks you through configuring the Nostr Chat Widget for your website.
|
||||
|
||||
## Table of Contents
|
||||
- [Basic Setup](#basic-setup)
|
||||
- [Getting Your Nostr Keys](#getting-your-nostr-keys)
|
||||
- [Relay Configuration](#relay-configuration)
|
||||
- [Customization](#customization)
|
||||
- [Receiving Messages](#receiving-messages)
|
||||
|
||||
## Basic Setup
|
||||
|
||||
### Step 1: Include Dependencies
|
||||
|
||||
Add these to your HTML `<head>`:
|
||||
|
||||
```html
|
||||
<!-- Tailwind CSS for styling -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Import map for nostr-tools -->
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"nostr-tools": "https://esm.sh/nostr-tools@1.17.0"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Step 2: Add the Widget
|
||||
|
||||
Before your closing `</body>` tag:
|
||||
|
||||
```html
|
||||
<!-- Chat widget script -->
|
||||
<script type="module" src="path/to/chat.js"></script>
|
||||
|
||||
<!-- Chat widget container -->
|
||||
<div id="chat-widget-root"></div>
|
||||
```
|
||||
|
||||
### Step 3: Configure Your Public Key
|
||||
|
||||
Open `chat.js` and locate the `CONFIG` object:
|
||||
|
||||
```javascript
|
||||
const CONFIG = {
|
||||
relays: [
|
||||
'wss://relay.damus.io',
|
||||
'wss://relay.primal.net',
|
||||
'wss://nos.lol',
|
||||
'wss://relay.btcforplebs.com',
|
||||
'wss://relay.logemedia.com'
|
||||
],
|
||||
csPubkey: 'YOUR_PUBLIC_KEY_HERE' // Replace with your hex public key
|
||||
};
|
||||
```
|
||||
|
||||
## Getting Your Nostr Keys
|
||||
|
||||
### Option 1: Using an Existing Nostr Client
|
||||
|
||||
If you already use Nostr:
|
||||
|
||||
1. Open your Nostr client (Damus, Amethyst, Snort, etc.)
|
||||
2. Go to Settings → Keys/Security
|
||||
3. Copy your **public key** (NOT your private key)
|
||||
4. If it starts with `npub1`, convert it to hex format (see below)
|
||||
|
||||
### Option 2: Generate New Keys
|
||||
|
||||
For a fresh customer support identity:
|
||||
|
||||
1. Install a Nostr client:
|
||||
- Desktop: [Nostr.band](https://nostr.band), [Nostrudel](https://nostrudel.ninja)
|
||||
- Mobile: [Damus (iOS)](https://damus.io), [Amethyst (Android)](https://github.com/vitorpamplona/amethyst)
|
||||
|
||||
2. Create a new account
|
||||
3. **IMPORTANT**: Securely save your private key (nsec)
|
||||
4. Copy your public key for the config
|
||||
|
||||
### Converting npub to Hex
|
||||
|
||||
If your public key starts with `npub1`:
|
||||
|
||||
**Online Tool:**
|
||||
- Visit [nostr.band/tools](https://nostr.band/tools)
|
||||
- Paste your npub
|
||||
- Copy the hex version
|
||||
|
||||
**Using JavaScript:**
|
||||
```javascript
|
||||
import { nip19 } from 'nostr-tools';
|
||||
const hex = nip19.decode('npub1...').data;
|
||||
console.log(hex);
|
||||
```
|
||||
|
||||
## Relay Configuration
|
||||
|
||||
### Default Relays
|
||||
|
||||
The widget connects to multiple relays for reliability:
|
||||
|
||||
```javascript
|
||||
relays: [
|
||||
'wss://relay.damus.io', // General purpose, reliable
|
||||
'wss://relay.primal.net', // Popular, good uptime
|
||||
'wss://nos.lol', // Community favorite
|
||||
'wss://relay.btcforplebs.com', // Bitcoin-focused
|
||||
'wss://relay.logemedia.com' // Custom relay
|
||||
]
|
||||
```
|
||||
|
||||
### Choosing Relays
|
||||
|
||||
**Good relays have:**
|
||||
- High uptime (99%+)
|
||||
- Good geographic distribution
|
||||
- Support for kind 4 events (DMs)
|
||||
- Read/write permissions
|
||||
|
||||
**Popular Relay Lists:**
|
||||
- [nostr.watch](https://nostr.watch) - Relay monitoring
|
||||
- [relay.tools](https://relay.tools) - Relay explorer
|
||||
|
||||
### Running Your Own Relay
|
||||
|
||||
For maximum control, run your own Nostr relay:
|
||||
|
||||
**Quick Setup:**
|
||||
```bash
|
||||
# Using nostr-rs-relay (Rust)
|
||||
docker run -d -p 8080:8080 scsibug/nostr-rs-relay
|
||||
|
||||
# Using strfry (C++)
|
||||
# See: https://github.com/hoytech/strfry
|
||||
```
|
||||
|
||||
Then add to your config:
|
||||
```javascript
|
||||
relays: [
|
||||
'wss://your-relay.example.com',
|
||||
// ... plus backup public relays
|
||||
]
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
### Colors
|
||||
|
||||
The widget uses Tailwind classes. Change colors by replacing:
|
||||
|
||||
**Primary gradient** (orange):
|
||||
```javascript
|
||||
// Find in chat.js:
|
||||
from-[#fdad01] to-[#ff8c00]
|
||||
|
||||
// Replace with your brand colors:
|
||||
from-[#4F46E5] to-[#7C3AED] // Purple
|
||||
from-[#10B981] to-[#059669] // Green
|
||||
from-[#EF4444] to-[#DC2626] // Red
|
||||
```
|
||||
|
||||
**Connection indicator**:
|
||||
```javascript
|
||||
// Green dot when connected:
|
||||
bg-green-400
|
||||
|
||||
// Change to match your theme:
|
||||
bg-blue-400
|
||||
bg-purple-400
|
||||
```
|
||||
|
||||
### Position
|
||||
|
||||
Change the widget position in `chat.js`:
|
||||
|
||||
```javascript
|
||||
// Bottom-right (default)
|
||||
className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6"
|
||||
|
||||
// Bottom-left
|
||||
className="fixed bottom-4 left-4 sm:bottom-6 sm:left-6"
|
||||
|
||||
// Top-right
|
||||
className="fixed top-4 right-4 sm:top-6 sm:right-6"
|
||||
```
|
||||
|
||||
### Branding
|
||||
|
||||
**Team Name:**
|
||||
```javascript
|
||||
// Find in chat.js render function:
|
||||
<div class="text-xs font-semibold text-[#fdad01] mb-1">Loge Media Team</div>
|
||||
|
||||
// Replace with:
|
||||
<div class="text-xs font-semibold text-[#fdad01] mb-1">Your Team Name</div>
|
||||
```
|
||||
|
||||
**Header Title:**
|
||||
```javascript
|
||||
<h3 class="font-bold text-base sm:text-lg">Instant Chat</h3>
|
||||
|
||||
// Change to:
|
||||
<h3 class="font-bold text-base sm:text-lg">Need Help?</h3>
|
||||
```
|
||||
|
||||
## Receiving Messages
|
||||
|
||||
### Setting Up Your Client
|
||||
|
||||
1. **Import Your Private Key**
|
||||
- Open your Nostr client
|
||||
- Go to Settings → Import Key
|
||||
- Paste your private key (nsec or hex)
|
||||
- **NEVER share your private key**
|
||||
|
||||
2. **Enable DM Notifications**
|
||||
- Settings → Notifications
|
||||
- Enable "Direct Messages"
|
||||
- Enable push notifications (mobile)
|
||||
|
||||
3. **Monitor for Messages**
|
||||
- New chat sessions will appear as DMs
|
||||
- Each session has a unique temporary public key
|
||||
- Reply directly - users see responses instantly
|
||||
|
||||
### Recommended Clients
|
||||
|
||||
**Desktop/Web:**
|
||||
- [Nostr.band](https://nostr.band) - Comprehensive web client
|
||||
- [Nostrudel](https://nostrudel.ninja) - Feature-rich
|
||||
- [Snort.social](https://snort.social) - Clean interface
|
||||
|
||||
**Mobile:**
|
||||
- [Damus (iOS)](https://damus.io) - Native iOS app
|
||||
- [Amethyst (Android)](https://github.com/vitorpamplona/amethyst) - Powerful Android client
|
||||
|
||||
**Multi-device Tips:**
|
||||
- Use the same private key across devices
|
||||
- Messages sync automatically via relays
|
||||
- Consider a dedicated device/account for support
|
||||
|
||||
## Advanced Configuration
|
||||
|
||||
### Session Duration
|
||||
|
||||
Change the 24-hour session expiry:
|
||||
|
||||
```javascript
|
||||
// In getSessionKey() function:
|
||||
if (Date.now() - session.created < 24 * 60 * 60 * 1000) {
|
||||
// Change to 48 hours:
|
||||
if (Date.now() - session.created < 48 * 60 * 60 * 1000) {
|
||||
// Change to 12 hours:
|
||||
if (Date.now() - session.created < 12 * 60 * 60 * 1000) {
|
||||
```
|
||||
|
||||
### Multiple Support Accounts
|
||||
|
||||
Support multiple team members:
|
||||
|
||||
```javascript
|
||||
const CONFIG = {
|
||||
relays: [...],
|
||||
csPubkeys: [
|
||||
'team-member-1-hex-pubkey',
|
||||
'team-member-2-hex-pubkey',
|
||||
'team-member-3-hex-pubkey'
|
||||
]
|
||||
};
|
||||
|
||||
// Then update subscribeToReplies():
|
||||
authors: CONFIG.csPubkeys
|
||||
```
|
||||
|
||||
### Custom Welcome Message
|
||||
|
||||
Add an automatic welcome message:
|
||||
|
||||
```javascript
|
||||
// In init() function, after subscribeToReplies():
|
||||
setTimeout(() => {
|
||||
addMessage('cs', 'Hi! How can we help you today?');
|
||||
}, 500);
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Widget Not Appearing
|
||||
- Check browser console for errors
|
||||
- Verify Tailwind CSS is loaded
|
||||
- Ensure import map is correct
|
||||
- Check `#chat-widget-root` div exists
|
||||
|
||||
### Messages Not Sending
|
||||
- Verify relay connections in console
|
||||
- Check public key is in hex format
|
||||
- Ensure relays support kind 4 (DMs)
|
||||
- Try different relays
|
||||
|
||||
### Not Receiving Replies
|
||||
- Confirm correct private key in client
|
||||
- Check relay overlap (client and widget)
|
||||
- Verify DM notifications enabled
|
||||
- Check client is connected to relays
|
||||
|
||||
### Mobile Issues
|
||||
- Clear browser cache
|
||||
- Check responsive CSS is applied
|
||||
- Test on actual device, not just emulator
|
||||
- Verify safe-area-inset for notched devices
|
||||
|
||||
## Security Best Practices
|
||||
|
||||
1. **Never expose private keys**
|
||||
- Only use public keys in client code
|
||||
- Store private keys securely (password manager)
|
||||
- Never commit keys to version control
|
||||
|
||||
2. **Use HTTPS**
|
||||
- Serve widget over secure connection
|
||||
- Some relays require wss:// (secure websockets)
|
||||
|
||||
3. **Rate limiting**
|
||||
- Consider implementing rate limits
|
||||
- Monitor for spam/abuse
|
||||
- Block abusive session keys if needed
|
||||
|
||||
4. **Session management**
|
||||
- Sessions expire automatically
|
||||
- No persistent user tracking
|
||||
- Messages stored only in localStorage
|
||||
|
||||
## Support
|
||||
|
||||
Need help? Issues? Contributions?
|
||||
|
||||
- **GitHub Issues**: [Report a bug](https://github.com/yourusername/nostr-chat-widget/issues)
|
||||
- **Documentation**: [Full docs](https://github.com/yourusername/nostr-chat-widget)
|
||||
- **Nostr**: DM us on Nostr for support
|
||||
146
demo/index.html
Normal file
146
demo/index.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nostr Chat Widget Demo</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"nostr-tools": "https://esm.sh/nostr-tools@1.17.0"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
.feature-card {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- Header -->
|
||||
<header class="gradient-bg text-white py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-5xl font-bold mb-4">Nostr Chat Widget</h1>
|
||||
<p class="text-xl opacity-90">Privacy-first customer support powered by Nostr</p>
|
||||
<div class="mt-8 flex gap-4 justify-center">
|
||||
<span class="bg-white/20 px-4 py-2 rounded-full text-sm">🔐 E2E Encrypted</span>
|
||||
<span class="bg-white/20 px-4 py-2 rounded-full text-sm">🌐 Decentralized</span>
|
||||
<span class="bg-white/20 px-4 py-2 rounded-full text-sm">🚫 No Backend</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container mx-auto px-4 py-16">
|
||||
<!-- Demo Section -->
|
||||
<section class="max-w-4xl mx-auto mb-20">
|
||||
<div class="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-8 rounded-2xl shadow-xl text-center">
|
||||
<h2 class="text-3xl font-bold mb-4">Try it now!</h2>
|
||||
<p class="text-lg mb-6">Click the orange chat button in the bottom-right corner to start a conversation</p>
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 px-6 py-3 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
<span>Look for the chat widget →</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Grid -->
|
||||
<section class="max-w-6xl mx-auto mb-20">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Key Features</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="feature-card bg-white p-6 rounded-xl shadow-lg">
|
||||
<div class="text-4xl mb-4">🔐</div>
|
||||
<h3 class="text-xl font-bold mb-2">End-to-End Encrypted</h3>
|
||||
<p class="text-gray-600">All messages are encrypted using NIP-04 before transmission. Your conversations stay private.</p>
|
||||
</div>
|
||||
<div class="feature-card bg-white p-6 rounded-xl shadow-lg">
|
||||
<div class="text-4xl mb-4">🌐</div>
|
||||
<h3 class="text-xl font-bold mb-2">Decentralized</h3>
|
||||
<p class="text-gray-600">Powered by Nostr relays. No single point of failure or control.</p>
|
||||
</div>
|
||||
<div class="feature-card bg-white p-6 rounded-xl shadow-lg">
|
||||
<div class="text-4xl mb-4">🚫</div>
|
||||
<h3 class="text-xl font-bold mb-2">No Backend Required</h3>
|
||||
<p class="text-gray-600">Entirely client-side. Just drop in the code and you're ready to go.</p>
|
||||
</div>
|
||||
<div class="feature-card bg-white p-6 rounded-xl shadow-lg">
|
||||
<div class="text-4xl mb-4">📱</div>
|
||||
<h3 class="text-xl font-bold mb-2">Mobile Responsive</h3>
|
||||
<p class="text-gray-600">Works seamlessly on desktop, tablet, and mobile devices.</p>
|
||||
</div>
|
||||
<div class="feature-card bg-white p-6 rounded-xl shadow-lg">
|
||||
<div class="text-4xl mb-4">⚡</div>
|
||||
<h3 class="text-xl font-bold mb-2">Lightweight</h3>
|
||||
<p class="text-gray-600">Minimal dependencies. Fast loading and smooth performance.</p>
|
||||
</div>
|
||||
<div class="feature-card bg-white p-6 rounded-xl shadow-lg">
|
||||
<div class="text-4xl mb-4">🔑</div>
|
||||
<h3 class="text-xl font-bold mb-2">Ephemeral Sessions</h3>
|
||||
<p class="text-gray-600">Auto-generated session keys with 24-hour expiry for enhanced privacy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Installation -->
|
||||
<section class="max-w-4xl mx-auto mb-20">
|
||||
<h2 class="text-3xl font-bold text-center mb-8 text-gray-800">Quick Installation</h2>
|
||||
<div class="bg-gray-900 text-gray-100 p-6 rounded-xl overflow-x-auto">
|
||||
<pre class="text-sm"><code><!-- Add Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Add import map for nostr-tools -->
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"nostr-tools": "https://esm.sh/nostr-tools@1.17.0"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add the chat widget -->
|
||||
<script type="module" src="path/to/chat.js"></script>
|
||||
|
||||
<!-- Add chat widget container -->
|
||||
<div id="chat-widget-root"></div></code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- GitHub Link -->
|
||||
<section class="text-center">
|
||||
<h2 class="text-2xl font-bold mb-4 text-gray-800">Ready to get started?</h2>
|
||||
<a href="https://github.com/yourusername/nostr-chat-widget"
|
||||
class="inline-flex items-center gap-2 bg-gray-900 text-white px-8 py-4 rounded-xl font-semibold hover:bg-gray-800 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
View on GitHub
|
||||
</a>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-white py-8 mt-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<p class="text-gray-400">Built with ⚡ by Loge Media</p>
|
||||
<p class="text-sm text-gray-500 mt-2">Powered by the Nostr protocol</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Chat Widget -->
|
||||
<script type="module" src="../src/chat.js"></script>
|
||||
<div id="chat-widget-root"></div>
|
||||
</body>
|
||||
</html>
|
||||
21
license
Normal file
21
license
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2025 Loge Media
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
169
nostr_chat_readme.md
Normal file
169
nostr_chat_readme.md
Normal file
@@ -0,0 +1,169 @@
|
||||
# Nostr Chat Widget
|
||||
|
||||
A lightweight, privacy-focused chat widget powered by the Nostr protocol. Features end-to-end encryption, decentralized relay connections, and zero server dependencies.
|
||||
|
||||
|
||||
|
||||
|
||||
## ✨ Features
|
||||
|
||||
- 🔐 **End-to-End Encrypted** - Messages encrypted using NIP-04
|
||||
- 🌐 **Decentralized** - Connects to multiple Nostr relays
|
||||
- 🚫 **No Backend Required** - Entirely client-side
|
||||
- 📱 **Mobile Responsive** - Works seamlessly on all devices
|
||||
- ⚡ **Lightweight** - Minimal dependencies
|
||||
- 🔑 **Ephemeral Keys** - Auto-generated session keys (24hr expiry)
|
||||
- 💾 **Session Persistence** - Messages saved locally per session
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### 1. Add Required Files
|
||||
|
||||
Include the chat widget files in your HTML:
|
||||
|
||||
```html
|
||||
<!-- Add Tailwind CSS for styling -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Add import map for nostr-tools -->
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"nostr-tools": "https://esm.sh/nostr-tools@1.17.0"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add the chat widget -->
|
||||
<script type="module" src="path/to/chat.js"></script>
|
||||
|
||||
<!-- Add chat widget container -->
|
||||
<div id="chat-widget-root"></div>
|
||||
```
|
||||
|
||||
### 2. Configure Your Public Key
|
||||
|
||||
Edit the `CONFIG` object in `chat.js`:
|
||||
|
||||
```javascript
|
||||
const CONFIG = {
|
||||
relays: [
|
||||
'wss://relay.damus.io',
|
||||
'wss://relay.primal.net',
|
||||
'wss://nos.lol'
|
||||
],
|
||||
csPubkey: 'YOUR_PUBLIC_KEY_HERE' // Your team's Nostr public key (hex format)
|
||||
};
|
||||
```
|
||||
|
||||
### 3. Done!
|
||||
|
||||
The chat widget will appear as a floating button in the bottom-right corner of your page.
|
||||
|
||||
## 📋 Configuration Options
|
||||
|
||||
| Option | Type | Description |
|
||||
|--------|------|-------------|
|
||||
| `relays` | Array | List of Nostr relay URLs to connect to |
|
||||
| `csPubkey` | String | Your customer support team's public key (hex format) |
|
||||
|
||||
### Getting Your Public Key
|
||||
|
||||
1. Create a Nostr identity using any Nostr client
|
||||
2. Export your public key in hex format (not npub)
|
||||
3. Add it to the `csPubkey` field
|
||||
|
||||
**Tip:** You can convert npub to hex at [nostr.band/tools](https://nostr.band/tools)
|
||||
|
||||
## 🎨 Customization
|
||||
|
||||
### Styling
|
||||
|
||||
The widget uses Tailwind CSS utility classes. To customize colors, search for these classes in `chat.js`:
|
||||
|
||||
- Primary color: `from-[#fdad01] to-[#ff8c00]` (orange gradient)
|
||||
- Change to your brand colors
|
||||
|
||||
### Mobile Behavior
|
||||
|
||||
On mobile devices, the chat expands to fullscreen automatically. Customize this in the CSS:
|
||||
|
||||
```css
|
||||
@media (max-width: 600px) {
|
||||
/* Adjust mobile styles here */
|
||||
}
|
||||
```
|
||||
|
||||
## 🔒 How It Works
|
||||
|
||||
1. **Session Creation**: When a user opens the chat, an ephemeral keypair is generated and stored locally
|
||||
2. **Message Encryption**: All messages are encrypted using NIP-04 (end-to-end encryption)
|
||||
3. **Relay Publishing**: Encrypted messages are published to multiple Nostr relays
|
||||
4. **Real-time Updates**: The widget subscribes to replies from your team's public key
|
||||
5. **Local Storage**: Messages persist locally for 24 hours per session
|
||||
|
||||
## 📦 Dependencies
|
||||
|
||||
- [nostr-tools](https://github.com/nbd-wtf/nostr-tools) - Nostr protocol implementation
|
||||
- [Tailwind CSS](https://tailwindcss.com/) - Styling framework
|
||||
|
||||
## 🛠️ Development
|
||||
|
||||
### Local Testing
|
||||
|
||||
1. Clone the repository
|
||||
2. Open `demo/index.html` in a browser
|
||||
3. Configure your public key in `chat.js`
|
||||
|
||||
### Browser Compatibility
|
||||
|
||||
- Chrome/Edge: ✅
|
||||
- Firefox: ✅
|
||||
- Safari: ✅
|
||||
- Mobile browsers: ✅
|
||||
|
||||
**Note:** Requires ES6 module support
|
||||
|
||||
## 📱 Receiving Messages
|
||||
|
||||
To receive and respond to chat messages, you'll need a Nostr client:
|
||||
|
||||
### Recommended Clients
|
||||
|
||||
- **Desktop**: [Nostr.band](https://nostr.band), [Nostrudel](https://nostrudel.ninja)
|
||||
- **Mobile**: [Damus (iOS)](https://damus.io), [Amethyst (Android)](https://github.com/vitorpamplona/amethyst)
|
||||
- **Web**: [Snort.social](https://snort.social), [Iris.to](https://iris.to)
|
||||
|
||||
### Setup Instructions
|
||||
|
||||
1. Import your private key into a Nostr client
|
||||
2. Watch for DM notifications from new chat sessions
|
||||
3. Reply directly from the client - messages appear instantly in the widget
|
||||
|
||||
## 🔐 Security Considerations
|
||||
|
||||
- **Ephemeral Keys**: Each session generates a new keypair (24hr expiry)
|
||||
- **No User Data**: No tracking, cookies, or personal data collection
|
||||
- **E2E Encryption**: All messages encrypted before transmission
|
||||
- **Relay Privacy**: Messages distributed across multiple relays
|
||||
|
||||
## 📄 License
|
||||
|
||||
MIT License - See LICENSE file for details
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
Contributions welcome! Please feel free to submit a Pull Request.
|
||||
|
||||
## 💬 Support
|
||||
|
||||
- **Issues**: [GitHub Issues](https://github.com/yourusername/nostr-chat-widget/issues)
|
||||
- **Nostr**: Contact via Nostr DM
|
||||
|
||||
## 🙏 Credits
|
||||
|
||||
Built with [Nostr](https://nostr.com) protocol and [nostr-tools](https://github.com/nbd-wtf/nostr-tools)
|
||||
|
||||
---
|
||||
|
||||
**Made with ⚡ by Loge Media**
|
||||
40
package_json.json
Normal file
40
package_json.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "nostr-chat-widget",
|
||||
"version": "1.0.0",
|
||||
"description": "A lightweight, privacy-focused chat widget powered by the Nostr protocol with end-to-end encryption",
|
||||
"main": "src/chat.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "npx live-server demo --port=8080",
|
||||
"test": "echo \"No tests specified yet\" && exit 0"
|
||||
},
|
||||
"keywords": [
|
||||
"nostr",
|
||||
"chat",
|
||||
"widget",
|
||||
"e2ee",
|
||||
"encrypted",
|
||||
"decentralized",
|
||||
"p2p",
|
||||
"privacy"
|
||||
],
|
||||
"author": "Loge Media",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/btcforplebs/nostr-chat-widget.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/btcforplebs/nostr-chat-widget/issues"
|
||||
},
|
||||
"homepage": "https://github.com/btcforplebs/nostr-chat-widget#readme",
|
||||
"dependencies": {
|
||||
"nostr-tools": "^1.17.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"live-server": "^1.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
}
|
||||
466
src/chat.js
Normal file
466
src/chat.js
Normal file
@@ -0,0 +1,466 @@
|
||||
|
||||
import {
|
||||
relayInit,
|
||||
generatePrivateKey,
|
||||
getPublicKey,
|
||||
getEventHash,
|
||||
signEvent,
|
||||
nip19,
|
||||
nip04
|
||||
} from 'nostr-tools';
|
||||
|
||||
// CONFIGURATION - Only need CS team's pubkey!
|
||||
const CONFIG = {
|
||||
relays: [
|
||||
'wss://relay.damus.io',
|
||||
'wss://relay.primal.net',
|
||||
'wss://nos.lol',
|
||||
'wss://relay.btcforplebs.com',
|
||||
'wss://relay.logemedia.com'
|
||||
],
|
||||
csPubkey: 'PUBKEY_TO_RECEICE_MESSAGES' // Replace with actual pubkey
|
||||
};
|
||||
|
||||
// State
|
||||
let state = {
|
||||
isOpen: false,
|
||||
messages: [],
|
||||
inputMessage: '',
|
||||
myPrivKey: null,
|
||||
myPubKey: null,
|
||||
relays: [],
|
||||
connected: false,
|
||||
sessionId: null
|
||||
};
|
||||
|
||||
// Generate or retrieve session key from localStorage
|
||||
function getSessionKey() {
|
||||
const stored = localStorage.getItem('nostr_chat_session');
|
||||
if (stored) {
|
||||
try {
|
||||
const session = JSON.parse(stored);
|
||||
// Reuse if less than 24 hours old
|
||||
if (Date.now() - session.created < 24 * 60 * 60 * 1000) {
|
||||
return session.privKey;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
// Generate new ephemeral key
|
||||
const privKey = generatePrivateKey();
|
||||
localStorage.setItem('nostr_chat_session', JSON.stringify({
|
||||
privKey,
|
||||
created: Date.now()
|
||||
}));
|
||||
return privKey;
|
||||
}
|
||||
|
||||
// Initialize
|
||||
async function init() {
|
||||
// Get or create session key
|
||||
state.myPrivKey = getSessionKey();
|
||||
state.myPubKey = getPublicKey(state.myPrivKey);
|
||||
state.sessionId = state.myPubKey.substring(0, 8);
|
||||
|
||||
console.log('🔑 Session Identity:', nip19.npubEncode(state.myPubKey));
|
||||
|
||||
// Connect to relays
|
||||
const relayPromises = CONFIG.relays.map(async (url) => {
|
||||
try {
|
||||
const relay = relayInit(url);
|
||||
|
||||
relay.on('connect', () => {
|
||||
console.log(`✓ Connected to ${url}`);
|
||||
checkConnection();
|
||||
});
|
||||
|
||||
relay.on('disconnect', () => {
|
||||
console.log(`✗ Disconnected from ${url}`);
|
||||
});
|
||||
|
||||
await relay.connect();
|
||||
return relay;
|
||||
} catch (error) {
|
||||
console.error(`Failed: ${url}:`, error);
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
state.relays = (await Promise.all(relayPromises)).filter(r => r !== null);
|
||||
|
||||
if (state.relays.length === 0) {
|
||||
addMessage('system', '⚠️ Failed to connect to any relays');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`✓ Connected to ${state.relays.length}/${CONFIG.relays.length} relays`);
|
||||
|
||||
// Subscribe to replies from CS team
|
||||
subscribeToReplies();
|
||||
|
||||
// Load any previous messages from this session
|
||||
loadPreviousMessages();
|
||||
|
||||
state.connected = true;
|
||||
render();
|
||||
}
|
||||
|
||||
function checkConnection() {
|
||||
const connected = state.relays.some(r => r.status === 1); // 1 = connected
|
||||
state.connected = connected;
|
||||
render();
|
||||
}
|
||||
|
||||
// Subscribe to DMs from CS team
|
||||
function subscribeToReplies() {
|
||||
const filters = [{
|
||||
kinds: [4],
|
||||
'#p': [state.myPubKey],
|
||||
authors: [CONFIG.csPubkey],
|
||||
since: Math.floor(Date.now() / 1000) - 86400 // Last 24 hours
|
||||
}];
|
||||
|
||||
console.log('🔔 Subscribing to CS team replies...');
|
||||
|
||||
state.relays.forEach(relay => {
|
||||
const sub = relay.sub(filters);
|
||||
|
||||
sub.on('event', (event) => {
|
||||
handleIncomingMessage(event);
|
||||
});
|
||||
|
||||
sub.on('eose', () => {
|
||||
console.log(`✓ Subscribed: ${relay.url}`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Load previous messages from localStorage
|
||||
function loadPreviousMessages() {
|
||||
const stored = localStorage.getItem(`nostr_chat_messages_${state.sessionId}`);
|
||||
if (stored) {
|
||||
try {
|
||||
const messages = JSON.parse(stored);
|
||||
messages.forEach(msg => state.messages.push(msg));
|
||||
render();
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
// Save messages to localStorage
|
||||
function saveMessages() {
|
||||
localStorage.setItem(`nostr_chat_messages_${state.sessionId}`, JSON.stringify(state.messages));
|
||||
}
|
||||
|
||||
// Handle incoming DM from CS team
|
||||
async function handleIncomingMessage(event) {
|
||||
try {
|
||||
// Check for duplicates
|
||||
if (state.messages.find(m => m.id === event.id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('📨 Received message from CS team');
|
||||
|
||||
// Decrypt
|
||||
const decryptedText = await nip04.decrypt(
|
||||
state.myPrivKey,
|
||||
event.pubkey,
|
||||
event.content
|
||||
);
|
||||
|
||||
const message = {
|
||||
id: event.id,
|
||||
text: decryptedText,
|
||||
sender: 'cs',
|
||||
timestamp: new Date(event.created_at * 1000).toISOString()
|
||||
};
|
||||
|
||||
addMessage('cs', decryptedText, message);
|
||||
|
||||
// Notification
|
||||
if (!document.hasFocus()) {
|
||||
document.title = '💬 New message!';
|
||||
setTimeout(() => {
|
||||
document.title = 'Nostr Support Chat';
|
||||
}, 3000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error decrypting message:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Send message to CS team
|
||||
async function sendMessage() {
|
||||
if (!state.inputMessage.trim()) return;
|
||||
|
||||
const messageText = state.inputMessage;
|
||||
|
||||
try {
|
||||
console.log('🔐 Encrypting and sending...');
|
||||
|
||||
// Encrypt
|
||||
const encrypted = await nip04.encrypt(
|
||||
state.myPrivKey,
|
||||
CONFIG.csPubkey,
|
||||
messageText
|
||||
);
|
||||
|
||||
// Create event
|
||||
let event = {
|
||||
kind: 4,
|
||||
created_at: Math.floor(Date.now() / 1000),
|
||||
tags: [['p', CONFIG.csPubkey]],
|
||||
content: encrypted,
|
||||
pubkey: state.myPubKey
|
||||
};
|
||||
|
||||
event.id = getEventHash(event);
|
||||
event.sig = signEvent(event, state.myPrivKey);
|
||||
|
||||
// Publish to all relays
|
||||
let published = 0;
|
||||
for (const relay of state.relays) {
|
||||
try {
|
||||
await relay.publish(event);
|
||||
published++;
|
||||
console.log(`✓ Published to ${relay.url}`);
|
||||
} catch (err) {
|
||||
console.error(`✗ Failed: ${relay.url}:`, err);
|
||||
}
|
||||
}
|
||||
|
||||
if (published === 0) {
|
||||
addMessage('system', '⚠️ Failed to send - no relay connections');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`✓ Published to ${published}/${state.relays.length} relays`);
|
||||
|
||||
// Add to local messages
|
||||
const message = {
|
||||
id: event.id,
|
||||
text: messageText,
|
||||
sender: 'user',
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
addMessage('user', messageText, message);
|
||||
state.inputMessage = '';
|
||||
render();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error sending:', error);
|
||||
addMessage('system', '⚠️ Failed to send message');
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(sender, text, fullMessage = null) {
|
||||
const msg = fullMessage || {
|
||||
id: Date.now().toString(),
|
||||
text,
|
||||
sender,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
state.messages.push(msg);
|
||||
saveMessages();
|
||||
render();
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
setTimeout(() => {
|
||||
const container = document.getElementById('messages');
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function formatTime(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true
|
||||
});
|
||||
}
|
||||
|
||||
// Render function with mobile responsiveness
|
||||
function render() {
|
||||
const container = document.getElementById('chat-widget-root');
|
||||
|
||||
if (!container) return;
|
||||
|
||||
if (!state.isOpen) {
|
||||
container.innerHTML = `
|
||||
<div class="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-[99999]">
|
||||
<button onclick="window.openChat()"
|
||||
class="bg-gradient-to-br from-[#fdad01] to-[#ff8c00] hover:from-[#ff8c00] hover:to-[#fdad01] text-white rounded-full p-4 sm:p-5 shadow-2xl transition-all transform hover:scale-110 active:scale-95"
|
||||
aria-label="Open chat"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="sm:w-7 sm:h-7">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Full chat box rendering with mobile responsiveness
|
||||
container.innerHTML = `
|
||||
<div class="fixed inset-4 sm:inset-auto sm:bottom-6 sm:right-6 z-[99999]">
|
||||
<div class="bg-white rounded-2xl shadow-2xl w-full h-full sm:w-96 sm:h-[600px] max-w-full flex flex-col overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="bg-gradient-to-br from-[#fdad01] to-[#ff8c00] text-white p-4 sm:p-5">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-bold text-base sm:text-lg">Instant Chat</h3>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<div class="w-2 h-2 rounded-full flex-shrink-0 ${state.connected ? 'bg-green-400 animate-pulse' : 'bg-red-400'}"></div>
|
||||
<span class="text-xs text-orange-100 truncate">
|
||||
${state.connected ? `P2P E2EE • ${state.relays.length} relays` : 'Connecting...'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onclick="window.closeChat()"
|
||||
class="hover:bg-white/20 p-2 rounded-lg transition-colors ml-2 flex-shrink-0"
|
||||
aria-label="Close chat"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
<div id="messages" class="flex-1 overflow-y-auto p-3 sm:p-4 space-y-3 bg-gradient-to-b from-gray-50 to-white">
|
||||
${state.messages.length === 0 ? `
|
||||
<div class="text-center text-gray-400 mt-8">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="mx-auto mb-3 opacity-50">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
<p class="text-sm">Start a conversation</p>
|
||||
</div>
|
||||
` : state.messages.map(msg => {
|
||||
if (msg.sender === 'system') {
|
||||
return `
|
||||
<div class="flex justify-center">
|
||||
<div class="bg-orange-50 text-orange-700 text-xs px-3 py-2 rounded-full border border-orange-200">
|
||||
${escapeHtml(msg.text)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (msg.sender === 'user') {
|
||||
return `
|
||||
<div class="flex justify-end">
|
||||
<div class="max-w-[85%] sm:max-w-xs">
|
||||
<div class="bg-gradient-to-br from-[#fdad01] to-[#ff8c00] text-white rounded-2xl rounded-tr-sm px-3 py-2 sm:px-4 sm:py-3 shadow-md text-sm sm:text-base">
|
||||
${escapeHtml(msg.text)}
|
||||
</div>
|
||||
<div class="text-xs text-gray-400 mt-1 text-right">${formatTime(msg.timestamp)}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (msg.sender === 'cs') {
|
||||
return `
|
||||
<div class="flex justify-start">
|
||||
<div class="max-w-[85%] sm:max-w-xs">
|
||||
<div class="bg-white border border-gray-200 text-gray-800 rounded-2xl rounded-tl-sm px-3 py-2 sm:px-4 sm:py-3 shadow-md text-sm sm:text-base">
|
||||
<div class="text-xs font-semibold text-[#fdad01] mb-1">Loge Media Team</div>
|
||||
${escapeHtml(msg.text)}
|
||||
</div>
|
||||
<div class="text-xs text-gray-400 mt-1">${formatTime(msg.timestamp)}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return '';
|
||||
}).join('')}
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<div class="border-t bg-white p-3 sm:p-4 safe-area-bottom">
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
id="message-input"
|
||||
type="text"
|
||||
value="${escapeHtml(state.inputMessage)}"
|
||||
placeholder="Type your message..."
|
||||
class="flex-1 px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#fdad01] text-sm sm:text-base"
|
||||
${!state.connected ? 'disabled' : ''}
|
||||
>
|
||||
<button
|
||||
onclick="window.sendMessage()"
|
||||
${!state.connected || !state.inputMessage.trim() ? 'disabled' : ''}
|
||||
class="bg-gradient-to-br from-[#fdad01] to-[#ff8c00] hover:from-[#ff8c00] hover:to-[#fdad01] disabled:from-gray-400 disabled:to-gray-400 text-white px-4 py-2 sm:px-5 sm:py-3 rounded-xl transition-all disabled:cursor-not-allowed active:scale-95 flex-shrink-0"
|
||||
aria-label="Send message"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="22" y1="2" x2="11" y2="13"></line>
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const messageInput = document.getElementById('message-input');
|
||||
if (messageInput) {
|
||||
messageInput.addEventListener('input', (e) => {
|
||||
state.inputMessage = e.target.value;
|
||||
const sendButton = document.querySelector('button[onclick="window.sendMessage()"]');
|
||||
if (sendButton) {
|
||||
sendButton.disabled = !state.connected || !e.target.value.trim();
|
||||
}
|
||||
});
|
||||
messageInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-scroll to bottom on mobile
|
||||
const messagesContainer = document.getElementById('messages');
|
||||
if (messagesContainer && state.messages.length > 0) {
|
||||
setTimeout(() => {
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
messageInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Global functions
|
||||
window.openChat = async () => {
|
||||
state.isOpen = true;
|
||||
render();
|
||||
if (state.relays.length === 0) {
|
||||
await init();
|
||||
}
|
||||
};
|
||||
|
||||
window.closeChat = () => {
|
||||
state.isOpen = false;
|
||||
render();
|
||||
};
|
||||
|
||||
window.sendMessage = sendMessage;
|
||||
|
||||
// Initial render
|
||||
render();
|
||||
Reference in New Issue
Block a user