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

solid-chat 0.0.10 → 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.">
@@ -68,7 +68,6 @@
           </div>
         </div>
         <div class="header-actions">
-          <button class="icon-btn" id="soundToggle" title="Toggle notification sound">🔔</button>
         </div>
       </div>
@@ -76,8 +75,8 @@
       <div class="sidebar-footer">
         <select id="sidebarThemeSelect" class="sidebar-theme-select" title="Switch theme">
-          <option value="wave">Wave</option>
           <option value="solid">Solid</option>
+          <option value="wave">Wave</option>
           <option value="telegram">Telegram</option>
           <option value="signal">Signal</option>
         </select>
@@ -92,14 +91,6 @@
           <span id="userStatus" class="user-status">Loading...</span>
         </div>
         <div class="header-right" id="headerLoginArea">
-          <div class="theme-switcher">
-            <select id="themeSelect" title="Switch theme">
-              <option value="wave">Wave</option>
-              <option value="solid">Solid</option>
-              <option value="telegram">Telegram</option>
-              <option value="signal">Signal</option>
-            </select>
-          </div>
           <span id="loginArea"></span>
         </div>
       </div>
@@ -128,7 +119,7 @@
 <script type="module">
 import { longChatPane } from './src/longChatPane.js'
-import { chatListPane, addChat, updateChatPreview } from './src/chatListPane.js'
+import { chatListPane, addChat, updateChatPreview, incrementUnread, resetUnread } from './src/chatListPane.js'
 // Theme management
 const THEMES = {
@@ -144,9 +135,7 @@ function loadTheme(themeName) {
   themeLink.href = theme.file
   localStorage.setItem('solidchat-theme', themeName)
-  // Update selects
-  const select = document.getElementById('themeSelect')
-  if (select) select.value = themeName
+  // Update sidebar select
   const sidebarSelect = document.getElementById('sidebarThemeSelect')
   if (sidebarSelect) sidebarSelect.value = themeName
@@ -169,10 +158,6 @@ function initTheme() {
   const saved = localStorage.getItem('solidchat-theme') || 'solid'
   loadTheme(saved)
-  document.getElementById('themeSelect').addEventListener('change', (e) => {
-    loadTheme(e.target.value)
-  })
   document.getElementById('sidebarThemeSelect').addEventListener('change', (e) => {
     loadTheme(e.target.value)
   })
@@ -231,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>`
@@ -252,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 = `
@@ -295,7 +286,7 @@ async function handleLogout() {
     await logout()
     currentSession = null
     currentWebId = null
-    updateAuthUI(false)
+    await updateAuthUI(false)
   } catch (err) {
     console.error('Logout error:', err)
   }
@@ -390,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()
@@ -425,7 +416,11 @@ function toggleSound() {
 function updateSoundButton() {
   const btn = document.getElementById('soundToggle')
-  if (btn) btn.textContent = soundEnabled ? '🔔' : '🔕'
+  if (btn) {
+    btn.innerHTML = soundEnabled
+      ? '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>'
+      : '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/><line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" stroke-width="2"/></svg>'
+  }
 }
 // Subscribe to real-time updates for a resource
@@ -500,7 +495,10 @@ async function subscribeWebSocketChannel2023(uri, authFetch) {
       console.log('WebSocketChannel2023 notification:', event.data)
       // Any message means the resource changed
       playNotificationSound()
-      setTimeout(() => refreshChat(), 500)
+      if (document.hidden) {
+        incrementUnread(uri)
+      }
+      setTimeout(() => refreshChat(), 1500)
     }
     currentWebSocket.onclose = () => {
@@ -537,7 +535,10 @@ function connectLegacyWebSocket(updatesVia, uri) {
       if (updatedUri === uri || uri.startsWith(updatedUri)) {
         console.log('Chat updated, refreshing...')
         playNotificationSound()
-        setTimeout(() => refreshChat(), 500)
+        if (document.hidden) {
+          incrementUnread(uri)
+        }
+        setTimeout(() => refreshChat(), 1500)
       }
     }
   }
@@ -650,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 = `
@@ -769,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
@@ -908,15 +994,37 @@ function showToast(message) {
 // Make createChat and copyShareLink available globally for chatListPane
 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 initial sound button state
-  updateSoundButton()
-  document.getElementById('soundToggle').addEventListener('click', toggleSound)
+  // 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
+  document.addEventListener('visibilitychange', () => {
+    if (!document.hidden && currentChatUri) {
+      resetUnread(currentChatUri)
+      chatListPane.setActiveChat(currentChatUri)
+    }
+  })
   // Handle auth redirect callback (if returning from IdP)
   await handleAuthRedirect()
@@ -944,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.10",
+  "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

@@ -19,6 +19,45 @@ const MEETING = {
 // Storage key for localStorage
 const STORAGE_KEY = 'solidchat-chats'
+const UNREAD_KEY = 'solidchat-unread'
+// Get unread count for a chat
+function getUnreadCount(uri) {
+  try {
+    const data = JSON.parse(localStorage.getItem(UNREAD_KEY) || '{}')
+    return data[uri] || 0
+  } catch {
+    return 0
+  }
+}
+// Increment unread count for a chat (call when new message arrives)
+function incrementUnread(uri) {
+  try {
+    const data = JSON.parse(localStorage.getItem(UNREAD_KEY) || '{}')
+    data[uri] = (data[uri] || 0) + 1
+    localStorage.setItem(UNREAD_KEY, JSON.stringify(data))
+    renderChatList()
+  } catch (e) {
+    console.warn('Failed to increment unread:', e)
+  }
+}
+// Reset unread count (call when chat is opened)
+function resetUnread(uri) {
+  try {
+    const data = JSON.parse(localStorage.getItem(UNREAD_KEY) || '{}')
+    data[uri] = 0
+    localStorage.setItem(UNREAD_KEY, JSON.stringify(data))
+  } catch (e) {
+    console.warn('Failed to reset unread:', e)
+  }
+}
+// Legacy alias for compatibility
+function setLastRead(uri) {
+  resetUnread(uri)
+}
 // Default global chats
 const DEFAULT_CHATS = [
@@ -65,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;
@@ -96,10 +136,28 @@ const styles = `
   background: rgba(255,255,255,0.3);
 }
+.sound-toggle-btn {
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.7);
+  cursor: pointer;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.2s;
+}
+.sound-toggle-btn:hover {
+  color: white;
+  background: rgba(255,255,255,0.15);
+}
 .chat-list {
   flex: 1;
   overflow-y: auto;
-  padding: 8px 0;
+  padding: 0 0 8px 0;
 }
 .chat-item {
@@ -164,6 +222,21 @@ const styles = `
   flex-shrink: 0;
 }
+.chat-item-badge {
+  background: #e74c3c;
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  margin-left: 8px;
+}
 .chat-item-preview {
   font-size: 13px;
   color: var(--text-muted);
@@ -555,6 +628,15 @@ function renderChatList() {
     header.appendChild(title)
     header.appendChild(time)
+    // Show unread count badge
+    const unreadCount = getUnreadCount(chat.uri)
+    if (unreadCount > 0) {
+      const badge = dom.createElement('div')
+      badge.className = 'chat-item-badge'
+      badge.textContent = unreadCount > 99 ? '99+' : unreadCount
+      header.appendChild(badge)
+    }
     const preview = dom.createElement('div')
     preview.className = 'chat-item-preview'
     preview.textContent = chat.lastMessage || 'No messages yet'
@@ -577,6 +659,7 @@ function renderChatList() {
     item.onclick = () => {
       activeUri = chat.uri
+      setLastRead(chat.uri)
       renderChatList()
       if (onSelectCallback) {
         onSelectCallback(chat.uri)
@@ -859,13 +942,33 @@ export const chatListPane = {
     title.className = 'sidebar-title'
     title.textContent = 'Chats'
+    // Sound toggle button (subtle white bell like Telegram)
+    const soundBtn = dom.createElement('button')
+    soundBtn.className = 'sound-toggle-btn'
+    soundBtn.id = 'soundToggle'
+    soundBtn.title = 'Toggle notification sound'
+    soundBtn.innerHTML = localStorage.getItem('solidchat-sound') !== 'false'
+      ? '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>'
+      : '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/><path d="M3.27 3L2 4.27l2.92 2.92C4.34 8.16 4 9.5 4 11v5l-2 2v1h14.73l2 2L20 19.73 3.27 3z"/></svg>'
+    soundBtn.onclick = () => {
+      if (window.toggleSound) {
+        window.toggleSound()
+      }
+    }
     const addBtn = dom.createElement('button')
     addBtn.className = 'add-chat-btn'
     addBtn.textContent = '+'
     addBtn.title = 'Add or create chat'
     addBtn.onclick = () => showAddModal(dom, options.webId)
-    header.appendChild(title)
+    // Group title and sound button together (flush)
+    const titleGroup = dom.createElement('div')
+    titleGroup.style.cssText = 'display: flex; align-items: center; gap: 8px;'
+    titleGroup.appendChild(title)
+    titleGroup.appendChild(soundBtn)
+    header.appendChild(titleGroup)
     header.appendChild(addBtn)
     // Chat list
@@ -931,4 +1034,4 @@ export const chatListPane = {
 }
 // Export for use in index.html
-export { addChat, removeChat, updateChatPreview }
+export { addChat, removeChat, updateChatPreview, setLastRead, incrementUnread, resetUnread }

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;
@@ -695,6 +696,10 @@ function renderMessageContent(dom, content) {
         img.alt = 'Image'
         img.loading = 'lazy'
         img.onclick = () => window.open(part, '_blank')
+        img.onload = () => {
+          const mc = img.closest('.messages-container')
+          if (mc) mc.scrollTop = mc.scrollHeight
+        }
         wrapper.appendChild(img)
         container.appendChild(wrapper)
       } else if (VIDEO_EXT.test(part)) {
@@ -1185,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',
@@ -1200,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)
       }
     }
@@ -1380,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 = ''
@@ -1395,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')
@@ -1476,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) {
@@ -1665,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