@mooncompany/uplink-chat 0.5.0

package/public/js/notifications.js

@@ -0,0 +1,367 @@
+// ============================================
+// NOTIFICATIONS MODULE
+// Push Notifications when bot responds
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+const STORAGE_KEY = 'uplink-notifications';
+
+// State
+let enabled = false;
+let permission = 'default';
+let pushSubscription = null;
+let vapidPublicKey = null;
+
+// Helper function to convert VAPID key
+function urlBase64ToUint8Array(base64String) {
+  const padding = '='.repeat((4 - base64String.length % 4) % 4);
+  const base64 = (base64String + padding)
+    .replace(/\-/g, '+')
+    .replace(/_/g, '/');
+
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}
+
+async function init() {
+  // Check browser support
+  if (!('Notification' in window)) {
+    console.log('Notifications: Not supported in this browser');
+    return;
+  }
+
+  // Load saved preference
+  const saved = localStorage.getItem(STORAGE_KEY);
+  if (saved !== null) {
+    enabled = saved === 'true';
+  }
+
+  // Check current permission
+  permission = Notification.permission;
+
+  // Add toggle to settings
+  addNotificationToggle();
+
+  // Listen for assistant messages to trigger notifications
+  listenForMessages();
+
+  // If enabled but not subscribed, subscribe now
+  if (enabled && permission === 'granted') {
+    console.log('Notifications: Re-subscribing on init...');
+    const success = await subscribeToPush();
+    if (!success) {
+      console.warn('Notifications: Failed to re-subscribe, disabling');
+      enabled = false;
+      savePreference();
+    }
+  }
+
+  console.log('Notifications: Initialized');
+}
+
+function addNotificationToggle() {
+  // Look for the dedicated slot first, then fall back to settingsPanel
+  const slot = document.getElementById('notificationSettingsSlot');
+  const settingsPanel = document.getElementById('settingsPanel');
+  const container = slot || settingsPanel;
+  
+  if (!container) {
+    setTimeout(addNotificationToggle, 100);
+    return;
+  }
+
+  // Check if already added
+  if (document.getElementById('notificationRow')) return;
+  
+  const row = document.createElement('div');
+  row.className = 'panel-row setting-row';
+  row.id = 'notificationRow';
+  row.innerHTML = `
+    <div>
+      <div class="setting-label">Push Notifications</div>
+      <div class="setting-desc">Get notified when ${getAgentName()} responds</div>
+    </div>
+    <div class="toggle ${enabled ? 'on' : ''}" id="notificationToggle" tabindex="0" role="switch" aria-checked="${enabled}" aria-label="Toggle push notifications"></div>
+  `;
+
+  if (slot) {
+    slot.appendChild(row);
+  } else {
+    // Legacy fallback: insert after voice row
+    const voiceRow = settingsPanel.querySelector('.setting-row:nth-child(3)');
+    if (voiceRow) {
+      voiceRow.after(row);
+    } else {
+      settingsPanel.appendChild(row);
+    }
+  }
+
+  // Toggle handler
+  const toggle = document.getElementById('notificationToggle');
+  toggle.addEventListener('click', async () => {
+    if (!enabled) {
+      // Trying to enable - need to request permission and set up push
+      const granted = await requestPermission();
+      if (granted) {
+        enabled = true;
+        toggle.classList.add('on');
+        toggle.setAttribute('aria-checked', 'true');
+        savePreference();
+        showTestNotification();
+      }
+    } else {
+      // Disabling - unsubscribe from push
+      await unsubscribeFromPush();
+      enabled = false;
+      toggle.classList.remove('on');
+      toggle.setAttribute('aria-checked', 'false');
+      savePreference();
+    }
+  });
+
+  // Keyboard handler for accessibility
+  toggle.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggle.click();
+    }
+  });
+
+  // Update toggle state based on permission
+  if (permission === 'denied') {
+    toggle.classList.add('disabled');
+    toggle.title = 'Notifications blocked. Enable in browser settings.';
+  }
+}
+
+// Get VAPID public key from server
+async function getVapidPublicKey() {
+  if (vapidPublicKey) return vapidPublicKey;
+  
+  try {
+    const response = await fetch('/api/push/vapid-public');
+    const data = await response.json();
+    vapidPublicKey = data.publicKey;
+    return vapidPublicKey;
+  } catch (e) {
+    console.error('Notifications: Failed to get VAPID public key', e);
+    return null;
+  }
+}
+
+// Subscribe to push notifications
+async function subscribeToPush() {
+  console.log('Notifications: Starting push subscription...');
+  
+  if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+    console.warn('Notifications: Push notifications not supported');
+    return false;
+  }
+
+  try {
+    // Get service worker registration
+    console.log('Notifications: Waiting for service worker...');
+    const registration = await navigator.serviceWorker.ready;
+    console.log('Notifications: Service worker ready', registration);
+    
+    // Check if already subscribed
+    let subscription = await registration.pushManager.getSubscription();
+    console.log('Notifications: Existing subscription?', !!subscription);
+    
+    if (!subscription) {
+      // Get VAPID public key
+      console.log('Notifications: Fetching VAPID key...');
+      const publicKey = await getVapidPublicKey();
+      if (!publicKey) {
+        console.error('Notifications: No VAPID public key available');
+        return false;
+      }
+      console.log('Notifications: Got VAPID key, subscribing to push manager...');
+
+      // Subscribe to push manager
+      subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(publicKey)
+      });
+      console.log('Notifications: Push manager subscription created');
+    }
+
+    // Send subscription to server
+    console.log('Notifications: Sending subscription to server...');
+    const response = await fetch('/api/push/subscribe', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ 
+        subscription,
+        userId: 'default' // TODO: Get actual user ID when multi-user support is added
+      })
+    });
+
+    if (response.ok) {
+      pushSubscription = subscription;
+      console.log('Notifications: Push subscription successful!');
+      return true;
+    } else {
+      const err = await response.text();
+      console.error('Notifications: Failed to store push subscription', response.status, err);
+      return false;
+    }
+  } catch (e) {
+    console.error('Notifications: Push subscription failed', e);
+    return false;
+  }
+}
+
+// Unsubscribe from push notifications
+async function unsubscribeFromPush() {
+  try {
+    if (pushSubscription) {
+      await pushSubscription.unsubscribe();
+      pushSubscription = null;
+    }
+
+    // Remove from server
+    await fetch('/api/push/unsubscribe', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ userId: 'default' })
+    });
+
+    console.log('Notifications: Push unsubscription successful');
+  } catch (e) {
+    console.error('Notifications: Push unsubscription failed', e);
+  }
+}
+
+async function requestPermission() {
+  if (permission === 'granted') {
+    // Already have permission, just set up push
+    await subscribeToPush();
+    return true;
+  }
+  
+  if (permission === 'denied') {
+    alert('Notifications are blocked. Please enable them in your browser settings.');
+    return false;
+  }
+
+  try {
+    const result = await Notification.requestPermission();
+    permission = result;
+    
+    if (result === 'granted') {
+      // Permission granted, set up push subscription
+      await subscribeToPush();
+      return true;
+    }
+    
+    return false;
+  } catch (e) {
+    console.error('Notifications: Permission request failed', e);
+    return false;
+  }
+}
+
+function showTestNotification() {
+  if (!enabled || permission !== 'granted') return;
+
+  const notification = new Notification(`${getAgentName()} says hi! 🛰️`, {
+    body: 'Push Notifications are now enabled.',
+    icon: '/favicon.svg',
+    tag: 'uplink-test'
+  });
+
+  notification.onclick = () => {
+    window.focus();
+    notification.close();
+  };
+
+  // Auto-close after 5 seconds
+  setTimeout(() => notification.close(), 5000);
+}
+
+function showNotification(title, body) {
+  if (!enabled || permission !== 'granted') return;
+  
+  // Don't show if window is focused
+  if (document.hasFocus()) return;
+
+  const notification = new Notification(title, {
+    body: truncate(body, 100),
+    icon: '/favicon.svg',
+    tag: 'uplink-message',
+    renotify: true
+  });
+
+  notification.onclick = () => {
+    window.focus();
+    notification.close();
+  };
+
+  // Auto-close after 10 seconds
+  setTimeout(() => notification.close(), 10000);
+}
+
+// Module-level unsubscribe function for message hook
+let messageHookUnsubscribe = null;
+
+function listenForMessages() {
+  // Use the new hook system instead of patching window.addMessage
+  if (window.UplinkChat?.onMessage) {
+    messageHookUnsubscribe = window.UplinkChat.onMessage((msg) => {
+      // Show notification for assistant messages
+      if (msg.type === 'assistant' && msg.text) {
+        showNotification(getAgentName(), msg.text);
+      }
+    });
+    console.log('Notifications: Using onMessage hook');
+  } else {
+    // Fallback: retry after a delay if chat module not ready
+    setTimeout(listenForMessages, 100);
+  }
+}
+
+function getAgentName() {
+  return UplinkCore.agentName || 'Assistant';
+}
+
+function truncate(str, len) {
+  if (!str || str.length <= len) return str;
+  return str.slice(0, len - 3) + '...';
+}
+
+function savePreference() {
+  localStorage.setItem(STORAGE_KEY, String(enabled));
+}
+
+// Export API
+export const UplinkNotifications = {
+  show: showNotification,
+  isEnabled: () => enabled,
+  enable: async () => {
+    const granted = await requestPermission();
+    if (granted) {
+      enabled = true;
+      savePreference();
+    }
+    return granted;
+  },
+  disable: () => {
+    enabled = false;
+    savePreference();
+  }
+};
+
+export { showNotification };
+
+// Backward compat: assign to window
+window.UplinkNotifications = UplinkNotifications;
+
+// Register and init
+UplinkCore.registerModule('notifications', init);

package/public/js/offline-queue.js

@@ -0,0 +1,178 @@
+// ============================================
+// OFFLINE QUEUE MODULE
+// Queues messages when offline, processes when reconnected
+// ============================================
+
+import { UplinkLogger } from './logger.js';
+
+// Offline message queue - persisted to localStorage
+const OFFLINE_QUEUE_KEY = 'uplink-offline-queue';
+const MAX_OFFLINE_QUEUE_SIZE = 50;
+const MAX_OFFLINE_MESSAGE_AGE_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
+
+let offlineQueue = [];
+
+// ============================================
+// PERSISTENCE
+// ============================================
+
+export function load() {
+  try {
+    const saved = localStorage.getItem(OFFLINE_QUEUE_KEY);
+    if (saved) {
+      offlineQueue = JSON.parse(saved);
+
+      const now = Date.now();
+      const initialLength = offlineQueue.length;
+      offlineQueue = offlineQueue.filter(msg => {
+        const age = now - (msg.timestamp || 0);
+        return age < MAX_OFFLINE_MESSAGE_AGE_MS;
+      });
+
+      if (offlineQueue.length < initialLength) {
+        UplinkLogger.debug(`OfflineQueue: Removed ${initialLength - offlineQueue.length} expired messages`);
+        save();
+      }
+
+      UplinkLogger.debug('OfflineQueue: Loaded', offlineQueue.length, 'messages');
+    }
+  } catch (parseError) {
+    UplinkLogger.error('OfflineQueue: Failed to load', parseError);
+    offlineQueue = [];
+  }
+}
+
+function save() {
+  try {
+    localStorage.setItem(OFFLINE_QUEUE_KEY, JSON.stringify(offlineQueue));
+  } catch (storageError) {
+    UplinkLogger.error('OfflineQueue: Failed to save', storageError);
+  }
+}
+
+// ============================================
+// QUEUE OPERATIONS
+// ============================================
+
+export function queueMessage(text, imageUrl) {
+  if (offlineQueue.length >= MAX_OFFLINE_QUEUE_SIZE) {
+    const removed = offlineQueue.shift();
+    UplinkLogger.warn(`OfflineQueue: Queue full (${MAX_OFFLINE_QUEUE_SIZE}), removed oldest message ${removed.id}`);
+  }
+
+  const queuedMsg = {
+    id: `offline-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    text,
+    imageUrl: imageUrl || null,
+    timestamp: Date.now()
+  };
+  offlineQueue.push(queuedMsg);
+  save();
+
+  UplinkLogger.debug('OfflineQueue: Queued message', queuedMsg.id);
+  return queuedMsg;
+}
+
+export async function processQueue() {
+  if (offlineQueue.length === 0) return;
+  if (!navigator.onLine) return;
+
+  const core = window.UplinkCore;
+  if (core && core.chatState !== 'idle') {
+    setTimeout(() => processQueue().catch(err => {
+      UplinkLogger.error('OfflineQueue: Processing failed', err);
+    }), 1000);
+    return;
+  }
+
+  UplinkLogger.debug('OfflineQueue: Processing', offlineQueue.length, 'messages');
+
+  while (offlineQueue.length > 0) {
+    const msg = offlineQueue.shift();
+    save();
+
+    const queuedMsgEl = document.querySelector(`[data-offline-id="${msg.id}"]`);
+    if (queuedMsgEl) {
+      const indicator = queuedMsgEl.querySelector('.queued-indicator');
+      if (indicator) indicator.remove();
+      queuedMsgEl.classList.remove('queued');
+    }
+
+    const chat = window.UplinkChat;
+    if (msg.imageUrl && chat?.sendImageMessage) {
+      await chat.sendImageMessage(msg.imageUrl, msg.text);
+    } else if (chat?.sendTextMessage) {
+      await chat.sendTextMessage(msg.text);
+    }
+  }
+
+  UplinkLogger.debug('OfflineQueue: Processed');
+}
+
+export function clear() {
+  offlineQueue = [];
+  save();
+}
+
+// ============================================
+// QUEUED MESSAGE DISPLAY
+// ============================================
+
+export function addMessageWithQueuedIndicator(container, text, type, imageUrl, offlineId, formatMessage, isNearBottom) {
+  if (!container) return;
+
+  const div = document.createElement('div');
+  div.className = `message ${type} queued`;
+  div.dataset.time = Date.now();
+  div.dataset.originalText = text;
+  if (offlineId) {
+    div.dataset.offlineId = offlineId;
+  }
+
+  if (imageUrl) {
+    const img = document.createElement('img');
+    img.src = imageUrl;
+    img.alt = 'Image queued for sending';
+    div.appendChild(img);
+  }
+
+  if (text) {
+    const textSpan = document.createElement('span');
+    textSpan.className = 'message-text';
+    textSpan.innerHTML = formatMessage ? formatMessage(text) : text;
+    div.appendChild(textSpan);
+  }
+
+  const indicator = document.createElement('span');
+  indicator.className = 'queued-indicator';
+  indicator.innerHTML = '⏳ Queued - will send when online';
+  indicator.style.cssText = `
+    display: block;
+    font-size: 0.75rem;
+    color: #f59e0b;
+    margin-top: 4px;
+    font-style: italic;
+  `;
+  div.appendChild(indicator);
+
+  container.appendChild(div);
+  if (isNearBottom) container.scrollTop = container.scrollHeight;
+}
+
+// ============================================
+// PUBLIC API
+// ============================================
+
+export const UplinkOfflineQueue = {
+  load,
+  queueMessage,
+  processQueue,
+  clear,
+  addMessageWithQueuedIndicator,
+  getLength: () => offlineQueue.length
+};
+
+// Backward compat: assign to window
+window.UplinkOfflineQueue = UplinkOfflineQueue;
+
+UplinkLogger.debug('OfflineQueue: Module loaded');