diff --git a/public/index.html b/public/index.html index 6e55927..bcb7a80 100644 --- a/public/index.html +++ b/public/index.html @@ -77,11 +77,11 @@ - + * EMBED IT WITH: + * */ (function() { @@ -18,35 +16,79 @@ // Get configuration from script tag const scriptTag = document.currentScript; const csPubkey = scriptTag.getAttribute('data-nostr-pubkey') || 'PUBKEY_TO_RECEICE_MESSAGES'; - const brandName = scriptTag.getAttribute('data-brand-name') || 'Support Team'; - const primaryColor = scriptTag.getAttribute('data-color-primary') || '#fdad01'; - const secondaryColor = scriptTag.getAttribute('data-color-secondary') || '#ff8c00'; + const brandName = scriptTag.getAttribute('data-brand-name') || 'Support Team Messaging'; + const primaryColor = scriptTag.getAttribute('data-color') || '#fdad01'; + const secondaryColor = scriptTag.getAttribute('data-color-secondary') || '#000000'; // Default relay configuration const DEFAULT_RELAYS = [ 'wss://relay.damus.io', 'wss://relay.primal.net', 'wss://nos.lol', - 'wss://relay.btcforplebs.com', - 'wss://relay.logemedia.com' + 'wss://relay.btcforplebs.com' ]; - // Inject Tailwind CSS - const tailwindLink = document.createElement('link'); - tailwindLink.href = 'https://cdn.tailwindcss.com'; - tailwindLink.rel = 'stylesheet'; - document.head.appendChild(tailwindLink); + // Add viewport meta tag for mobile optimization + let viewportMeta = document.querySelector('meta[name="viewport"]'); + if (!viewportMeta) { + viewportMeta = document.createElement('meta'); + viewportMeta.name = 'viewport'; + viewportMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; + document.head.appendChild(viewportMeta); + } - // Inject custom styles + // Inject Tailwind CSS + const tailwindScript = document.createElement('script'); + tailwindScript.src = 'https://cdn.tailwindcss.com'; + document.head.appendChild(tailwindScript); + + // Inject custom styles with glassmorphism const style = document.createElement('style'); style.textContent = ` .safe-area-bottom { - padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important; + padding-bottom: env(safe-area-inset-bottom); } #nostr-chat-widget-root > div { pointer-events: auto !important; z-index: 99999 !important; } + .glass-morphism { + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); + } + .glass-morphism-light { + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + } + .glass-input { + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.3); + } + .glass-input:focus { + background: rgba(255, 255, 255, 0.25); + border: 1px solid rgba(255, 255, 255, 0.4); + } + .glass-input::placeholder { + color: rgba(255, 255, 255, 0.6); + } + @media (max-width: 640px) { + #nostr-chat-widget-root .chat-window-mobile { + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: 100% !important; + height: 100% !important; + max-height: 100vh !important; + border-radius: 0 !important; + } + } `; document.head.appendChild(style); @@ -83,7 +125,8 @@ relays: ${JSON.stringify(DEFAULT_RELAYS)}, csPubkey: '${csPubkey}', brandName: '${brandName}', - primaryColor: '${primaryColor}' + primaryColor: '${primaryColor}', + secondaryColor: '${secondaryColor}' }; let state = { @@ -243,6 +286,18 @@ if (!state.inputMessage.trim()) return; const messageText = state.inputMessage; + state.inputMessage = ''; + + // Show message immediately (optimistic UI) + const tempMessage = { + id: 'temp_' + Date.now(), + text: messageText, + sender: 'user', + timestamp: new Date().toISOString() + }; + state.messages.push(tempMessage); + render(); + scrollToBottom(); try { console.log('🔐 Encrypting and sending...'); @@ -282,16 +337,12 @@ console.log(\`✓ Published to \${published}/\${state.relays.length} relays\`); - const message = { - id: event.id, - text: messageText, - sender: 'user', - timestamp: new Date().toISOString() - }; - - addMessage('user', messageText, message); - state.inputMessage = ''; - render(); + // Update temp message with real ID + const msgIndex = state.messages.findIndex(m => m.id === tempMessage.id); + if (msgIndex !== -1) { + state.messages[msgIndex].id = event.id; + } + saveMessages(); } catch (error) { console.error('Error sending:', error); @@ -346,7 +397,8 @@ container.innerHTML = \`