npm - solid-chat - Versions diffs - 0.0.17 → 0.0.19 - Mend

solid-chat 0.0.17 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -21,7 +21,7 @@ Modern, decentralized chat app built on the [Solid](https://solidproject.org) pr
 ### Real-time
 - WebSocket updates (NSS `Updates-Via` header)
 - WebSocketChannel2023 support (CSS/solidcommunity.net)
-- Notification sounds when tab is hidden (toggleable)
+- Notification sounds (toggleable)
 ### Messaging
 - Send and receive messages
@@ -56,6 +56,19 @@ Modern, decentralized chat app built on the [Solid](https://solidproject.org) pr
 - Clickable timestamps (permalinks to message URI)
 - "(edited)" indicator for edited messages
 - Message count in header
+- Unread message badges
+- Remember current room across refreshes
+### Themes
+- Wave (WhatsApp-style green)
+- Signal (clean blue)
+- Telegram (blue with patterns)
+- Solid (purple/gradient)
+### Saved Messages
+- Telegram-style "notes to self"
+- Auto-created on your pod
+- Private by default
 ## Quick Start
@@ -154,11 +167,15 @@ This app implements the [Solid Chat specification](https://solid.github.io/chat/
 - [x] Create new chats
 - [x] Deep link sharing (`?chat=<url>`)
 - [x] Type Index registration
+- [x] Mobile responsive sidebar
+- [x] Unread message badges
+- [x] Theme support
+- [x] Saved Messages
 - [ ] @mentions with notifications
 - [ ] End-to-end encryption
-- [ ] Mobile responsive sidebar
-- [ ] Unread message badges
 - [ ] Message search
+- [ ] Push notifications
+- [ ] Offline support
 ## License

package/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   <title>Solid Chat</title>
   <meta name="description" content="Modern, decentralized chat app for Solid pods. Your messages, your control.">
@@ -216,18 +216,18 @@ async function handleAuthRedirect() {
     if (currentSession.info.isLoggedIn) {
       currentWebId = currentSession.info.webId
-      updateAuthUI(true)
+      await updateAuthUI(true)
     } else {
-      updateAuthUI(false)
+      await updateAuthUI(false)
     }
   } catch (err) {
     console.error('Auth redirect error:', err)
-    updateAuthUI(false)
+    await updateAuthUI(false)
   }
 }
 // Update UI based on auth state
-function updateAuthUI(isLoggedIn) {
+async function updateAuthUI(isLoggedIn) {
   if (isLoggedIn && currentWebId) {
     const shortId = currentWebId.split('//')[1]?.split('/')[0] || currentWebId
     userStatus.innerHTML = `Logged in as <a href="${currentWebId}" target="_blank">${shortId}</a>`
@@ -237,6 +237,12 @@ function updateAuthUI(isLoggedIn) {
     // Update avatar with user initial
     const initial = shortId.charAt(0).toUpperCase()
     document.getElementById('userAvatar').textContent = initial
+    // Add Saved Messages to chat list (pinned at top)
+    const savedMessagesUrl = await ensureSavedMessagesChat()
+    if (savedMessagesUrl) {
+      addChat(savedMessagesUrl, '📌 Saved Messages', 'Private notes to yourself')
+    }
   } else {
     userStatus.textContent = 'Not logged in'
     loginArea.innerHTML = `
@@ -280,7 +286,7 @@ async function handleLogout() {
     await logout()
     currentSession = null
     currentWebId = null
-    updateAuthUI(false)
+    await updateAuthUI(false)
   } catch (err) {
     console.error('Logout error:', err)
   }
@@ -375,7 +381,7 @@ let reconnectTimeout = null
 let soundEnabled = localStorage.getItem('solidchat-sound') !== 'false'
 function playNotificationSound() {
-  if (!soundEnabled || !document.hidden) return
+  if (!soundEnabled) return
   const ctx = new AudioContext()
@@ -492,7 +498,7 @@ async function subscribeWebSocketChannel2023(uri, authFetch) {
       if (document.hidden) {
         incrementUnread(uri)
       }
-      setTimeout(() => refreshChat(), 500)
+      setTimeout(() => refreshChat(), 1500)
     }
     currentWebSocket.onclose = () => {
@@ -532,7 +538,7 @@ function connectLegacyWebSocket(updatesVia, uri) {
         if (document.hidden) {
           incrementUnread(uri)
         }
-        setTimeout(() => refreshChat(), 500)
+        setTimeout(() => refreshChat(), 1500)
       }
     }
   }
@@ -645,6 +651,9 @@ async function loadChat(uri) {
     currentChatUri = uri
     subscribeToUpdates(uri)
+    // Remember current chat for page refresh
+    localStorage.setItem('solidchat-current-room', uri)
   } catch (err) {
     console.error('Error loading chat:', err)
     chatContainer.innerHTML = `
@@ -764,6 +773,88 @@ async function setPublicReadACL(resourceUrl) {
   }
 }
+// Set private ACL (owner-only) for Saved Messages
+async function setPrivateACL(resourceUrl) {
+  const aclUrl = resourceUrl + '.acl'
+  const authFetch = getAuthFetch()
+  const acl = `@prefix acl: <http://www.w3.org/ns/auth/acl#>.
+<#owner>
+    a acl:Authorization ;
+    acl:agent <${currentWebId}> ;
+    acl:accessTo <${resourceUrl}> ;
+    acl:mode acl:Read, acl:Write, acl:Control .
+`
+  try {
+    await authFetch(aclUrl, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'text/turtle' },
+      body: acl
+    })
+  } catch (e) {
+    console.warn('Failed to set private ACL:', e)
+  }
+}
+// Get URI for Saved Messages chat
+function getSavedMessagesUri(podRoot) {
+  return podRoot + 'private/saved-messages/chat.ttl'
+}
+// Ensure Saved Messages chat exists, create if not
+async function ensureSavedMessagesChat() {
+  if (!currentWebId) return null
+  const podRoot = await getMyPodRoot()
+  if (!podRoot) return null
+  const chatUrl = getSavedMessagesUri(podRoot)
+  const authFetch = getAuthFetch()
+  // Check if chat already exists
+  try {
+    const response = await authFetch(chatUrl, { method: 'HEAD' })
+    if (response.ok) {
+      return chatUrl // Already exists
+    }
+  } catch (e) {
+    // Doesn't exist, create it
+  }
+  // Create the chat
+  const now = new Date().toISOString()
+  const turtle = `@prefix dct: <http://purl.org/dc/terms/>.
+@prefix meeting: <http://www.w3.org/ns/pim/meeting#>.
+@prefix xsd: <http://www.w3.org/2001/XMLSchema#>.
+<>
+    a meeting:LongChat ;
+    dct:title "Saved Messages" ;
+    dct:created "${now}"^^xsd:dateTime .
+`
+  try {
+    const response = await authFetch(chatUrl, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'text/turtle' },
+      body: turtle
+    })
+    if (response.ok) {
+      // Set private ACL
+      await setPrivateACL(chatUrl)
+      console.log('Created Saved Messages chat:', chatUrl)
+      return chatUrl
+    }
+  } catch (e) {
+    console.warn('Failed to create Saved Messages chat:', e)
+  }
+  return null
+}
 // Register chat in user's Type Index
 async function registerInTypeIndex(chatUrl, isPublic = true) {
   if (!currentWebId) return
@@ -905,11 +996,26 @@ function showToast(message) {
 window.solidChat = { createChat, copyShareLink, getMyPodRoot }
 window.toggleSound = toggleSound
+// Detect bottom nav bar overlay and set CSS variable
+function updateBottomOffset() {
+  if (window.visualViewport) {
+    const offset = window.innerHeight - window.visualViewport.height;
+    document.documentElement.style.setProperty('--bottom-offset', `${Math.max(0, offset)}px`);
+  }
+}
 // Initialize: handle auth redirect first, then render sidebar
 async function init() {
   // Initialize theme
   initTheme()
+  // Set up viewport detection for Android nav bar
+  updateBottomOffset()
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', updateBottomOffset)
+  }
+  window.addEventListener('resize', updateBottomOffset)
   // Sound button is now created in chatListPane with onclick handler
   // Clear unread count when user returns to tab
@@ -946,13 +1052,14 @@ async function init() {
     discoverBtn.parentNode.insertBefore(themeSelect.parentNode, discoverBtn)
   }
-  // Check for ?chat= deep link first, then ?uri= (legacy), then default
+  // Check for ?chat= deep link first, then ?uri= (legacy), then saved room, then default
   const deepLinkedChat = await handleDeepLink()
   if (deepLinkedChat) {
     loadChat(deepLinkedChat)
   } else {
     const params = new URLSearchParams(window.location.search)
-    const initialUri = params.get('uri') || DEFAULT_CHAT_URI
+    const savedRoom = localStorage.getItem('solidchat-current-room')
+    const initialUri = params.get('uri') || savedRoom || DEFAULT_CHAT_URI
     loadChat(initialUri)
   }
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "solid-chat",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "Modern chat panes for Solid pods - longChatPane and chatListPane",
   "type": "module",
   "main": "src/index.js",

package/src/chatListPane.js CHANGED Viewed

@@ -104,6 +104,7 @@ const styles = `
   background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
   color: white;
   padding: 16px 16px;
+  min-height: 76px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -156,7 +157,7 @@ const styles = `
 .chat-list {
   flex: 1;
   overflow-y: auto;
-  padding: 8px 0;
+  padding: 0 0 8px 0;
 }
 .chat-item {

package/src/longChatPane.js CHANGED Viewed

@@ -235,6 +235,7 @@ const styles = `
 .input-area {
   background: white;
   padding: 12px 20px;
+  padding-bottom: calc(12px + var(--bottom-offset, 0px));
   display: flex;
   align-items: flex-end;
   gap: 12px;
@@ -1189,10 +1190,44 @@ export const longChatPane = {
       try {
         const authFetch = context.authFetch ? context.authFetch() : fetch
         const doc = subject.doc ? subject.doc() : subject
-        // Build SPARQL DELETE for all statements about this message
         const msgUri = message.uri
-        const deleteQuery = `DELETE WHERE { <${msgUri}> ?p ?o . }`
+        // Get all triples about this message from the store
+        const msgNode = store.sym(msgUri)
+        const statements = store.statementsMatching(msgNode, null, null, doc)
+        if (statements.length === 0) {
+          throw new Error('No statements found for this message')
+        }
+        // Build DELETE DATA with explicit triples (more compatible than DELETE WHERE with variables)
+        const triples = statements.map(st => {
+          const obj = st.object
+          let objStr
+          if (obj.termType === 'NamedNode') {
+            objStr = `<${obj.value}>`
+          } else if (obj.termType === 'Literal') {
+            // Escape special characters in literal value (Turtle escaping)
+            const escaped = obj.value
+              .replace(/\\/g, '\\\\')
+              .replace(/"/g, '\\"')
+              .replace(/\n/g, '\\n')
+              .replace(/\r/g, '\\r')
+              .replace(/\t/g, '\\t')
+            if (obj.datatype && obj.datatype.value !== 'http://www.w3.org/2001/XMLSchema#string') {
+              objStr = `"${escaped}"^^<${obj.datatype.value}>`
+            } else if (obj.language) {
+              objStr = `"${escaped}"@${obj.language}`
+            } else {
+              objStr = `"${escaped}"`
+            }
+          } else {
+            objStr = `"${obj.value}"`
+          }
+          return `<${st.subject.value}> <${st.predicate.value}> ${objStr} .`
+        }).join('\n')
+        const deleteQuery = `DELETE DATA {\n${triples}\n}`
         const response = await authFetch(doc.value || doc.uri, {
           method: 'PATCH',
@@ -1204,14 +1239,22 @@ export const longChatPane = {
           throw new Error(`Delete failed: ${response.status}`)
         }
+        // Show brief success indicator
+        statusEl.textContent = '✓ Deleted'
+        setTimeout(() => { statusEl.textContent = `${messages.length - 1} messages` }, 1000)
+        // Remove from local store (prevents ghost re-render on WebSocket refresh)
+        statements.forEach(st => store.remove(st))
         // Remove from UI
         rowEl.remove()
         renderedUris.delete(message.uri)
         messages = messages.filter(m => m.uri !== message.uri)
-        statusEl.textContent = `${messages.length} messages`
       } catch (err) {
         console.error('Delete error:', err)
+        statusEl.textContent = '✗ Delete failed'
+        setTimeout(() => { statusEl.textContent = `${messages.length} messages` }, 2000)
         alert('Failed to delete: ' + err.message)
       }
     }
@@ -1384,7 +1427,7 @@ export const longChatPane = {
     }
     // Load messages from store
-    async function loadMessages() {
+    async function loadMessages(skipFetch = false) {
       if (isFirstLoad) {
         statusEl.textContent = 'Loading messages...'
         messagesContainer.innerHTML = ''
@@ -1399,9 +1442,11 @@ export const longChatPane = {
         const DCT = ns('http://purl.org/dc/terms/')
         const FOAF = ns('http://xmlns.com/foaf/0.1/')
-        // Fetch the document
+        // Fetch the document (skip if refresh already loaded fresh data)
         const doc = subject.doc ? subject.doc() : subject
-        await store.fetcher.load(doc)
+        if (!skipFetch) {
+          await store.fetcher.load(doc)
+        }
         // Get chat title from the subject or document
         const chatNode = subject.uri.includes('#') ? subject : $rdf.sym(subject.uri + '#this')
@@ -1480,6 +1525,17 @@ export const longChatPane = {
         // Find messages that haven't been rendered yet
         const unrenderedMessages = allMessages.filter(m => !renderedUris.has(m.uri))
+        // Find messages that were rendered but no longer exist (deleted)
+        const currentUris = new Set(allMessages.map(m => m.uri))
+        const deletedUris = [...renderedUris].filter(uri => !currentUris.has(uri))
+        // Remove deleted messages from UI
+        for (const uri of deletedUris) {
+          const el = messagesContainer.querySelector(`[data-uri="${uri}"]`)
+          if (el) el.remove()
+          renderedUris.delete(uri)
+        }
         // Render only new messages (or all on first load)
         if (isFirstLoad) {
           if (allMessages.length === 0) {
@@ -1669,8 +1725,29 @@ export const longChatPane = {
     container.refresh = async function() {
       // Re-fetch the document
       const doc = subject.doc ? subject.doc() : subject
-      await store.fetcher.load(doc, { force: true })
-      await loadMessages()
+      const docUri = doc.uri || doc.value
+      // Clear existing statements for this document before reloading
+      const existingStatements = store.statementsMatching(null, null, null, doc)
+      existingStatements.forEach(st => store.remove(st))
+      // Fetch with cache-busting to bypass browser cache
+      const authFetch = context.authFetch ? context.authFetch() : fetch
+      const cacheBustUrl = docUri + (docUri.includes('?') ? '&' : '?') + '_t=' + Date.now()
+      const response = await authFetch(cacheBustUrl, {
+        headers: { 'Accept': 'text/turtle, application/ld+json, application/rdf+xml' },
+        cache: 'no-store'
+      })
+      if (response.ok) {
+        const text = await response.text()
+        const contentType = response.headers.get('content-type') || 'text/turtle'
+        $rdf.parse(text, store, docUri, contentType)
+      }
+      // skipFetch=true because we already loaded fresh data above
+      await loadMessages(true)
     }
     // Initial load