solid-chat 0.0.1 → 0.0.3

package/src/longChatPane.js

@@ -97,6 +97,26 @@ const styles = `
   opacity: 0.8;
 }
 
+.share-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255,255,255,0.2);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+
+.share-btn:hover {
+  background: rgba(255,255,255,0.3);
+}
+
 .messages-container {
   flex: 1;
   overflow-y: auto;
@@ -189,6 +209,11 @@ const styles = `
 .message-time {
   font-size: 11px;
   color: var(--text-muted);
+  text-decoration: none;
+}
+
+.message-time:hover {
+  text-decoration: underline;
 }
 
 .message-author {
@@ -298,6 +323,32 @@ const styles = `
   color: var(--text);
 }
 
+.upload-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  transition: background 0.2s, color 0.2s;
+  flex-shrink: 0;
+}
+
+.upload-btn:hover {
+  background: #f0f2f8;
+  color: var(--text);
+}
+
+.upload-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .emoji-picker {
   position: absolute;
   bottom: 100%;
@@ -366,6 +417,205 @@ const styles = `
   padding: 20px;
   color: var(--text-muted);
 }
+
+.message-text a {
+  color: var(--accent);
+  text-decoration: underline;
+  word-break: break-all;
+}
+
+.message-text a:hover {
+  opacity: 0.8;
+}
+
+.media-wrapper {
+  margin: 8px 0;
+  max-width: 100%;
+}
+
+.media-wrapper img {
+  max-width: 300px;
+  max-height: 300px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.media-wrapper img:hover {
+  transform: scale(1.02);
+}
+
+.media-wrapper video,
+.media-wrapper audio {
+  max-width: 300px;
+  border-radius: 8px;
+}
+
+.media-wrapper audio {
+  width: 250px;
+}
+
+.message-text code {
+  background: rgba(128, 90, 213, 0.1);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  font-size: 13px;
+}
+
+.message-text pre {
+  background: #f4f4f5;
+  color: #1e1e2e;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid #e4e4e7;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin: 8px 0;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.4;
+  max-width: 100%;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.message-text pre code {
+  background: none;
+  padding: 0;
+  color: inherit;
+}
+
+.message-actions {
+  display: none;
+  gap: 4px;
+  margin-left: 8px;
+}
+
+.message-row:hover .message-actions {
+  display: flex;
+}
+
+.message-actions button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 4px;
+  border-radius: 4px;
+  opacity: 0.6;
+  transition: opacity 0.2s, background 0.2s;
+}
+
+.message-actions button:hover {
+  opacity: 1;
+  background: rgba(0,0,0,0.05);
+}
+
+.message-edited {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-style: italic;
+  margin-left: 6px;
+}
+
+.edit-textarea {
+  width: 100%;
+  border: 1px solid var(--accent);
+  border-radius: 8px;
+  padding: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  resize: none;
+  min-height: 40px;
+}
+
+.edit-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.edit-actions button {
+  padding: 4px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+}
+
+.edit-actions .save-btn {
+  background: var(--accent);
+  color: white;
+}
+
+.edit-actions .cancel-btn {
+  background: #e2e8f0;
+  color: var(--text);
+}
+
+.reaction-bar {
+  display: none;
+  gap: 2px;
+  margin-top: 6px;
+  padding: 4px 6px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  position: absolute;
+  bottom: -8px;
+  left: 8px;
+}
+
+.message-row:hover .reaction-bar {
+  display: flex;
+}
+
+.reaction-bar button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 2px 4px;
+  border-radius: 4px;
+  transition: transform 0.15s, background 0.15s;
+}
+
+.reaction-bar button:hover {
+  transform: scale(1.2);
+  background: #f0f2f8;
+}
+
+.reactions-display {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.reaction-chip {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  background: #f0f2f8;
+  border-radius: 12px;
+  padding: 2px 8px;
+  font-size: 13px;
+  border: 1px solid #e2e8f0;
+}
+
+.reaction-chip .emoji {
+  font-size: 14px;
+}
+
+.reaction-chip .count {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.message-bubble {
+  position: relative;
+}
 `
 
 // Inject styles once
@@ -385,6 +635,108 @@ function formatTime(date) {
   return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })
 }
 
+// URL regex
+const URL_REGEX = /(https?:\/\/[^\s<>"{}|\\^`[\]]+)/gi
+
+// Media extensions
+const IMAGE_EXT = /\.(jpg|jpeg|png|gif|webp|svg)(\?.*)?$/i
+const VIDEO_EXT = /\.(mp4|webm|ogg|mov)(\?.*)?$/i
+const AUDIO_EXT = /\.(mp3|wav|ogg|m4a|aac)(\?.*)?$/i
+
+// Preset reactions
+const REACTIONS = ['👍', '❤️', '😂', '😮', '😢', '🎉']
+
+// Escape HTML to prevent XSS
+function escapeHtml(text) {
+  const div = document.createElement('div')
+  div.textContent = text
+  return div.innerHTML
+}
+
+// Parse simple markdown: *bold*, _italic_, ~strike~, `code`, ```code blocks```
+function parseMarkdown(text) {
+  // Escape HTML first to prevent XSS
+  let html = escapeHtml(text)
+
+  // Code fences (must be first, before inline code)
+  html = html.replace(/```\n?([\s\S]*?)\n?```/g, (_, code) => {
+    return '<pre><code>' + code.trim() + '</code></pre>'
+  })
+  // Inline code
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>')
+  // Bold
+  html = html.replace(/\*([^*]+)\*/g, '<strong>$1</strong>')
+  // Italic
+  html = html.replace(/_([^_]+)_/g, '<em>$1</em>')
+  // Strikethrough
+  html = html.replace(/~([^~]+)~/g, '<s>$1</s>')
+
+  return html
+}
+
+// Render message content with links and media
+function renderMessageContent(dom, content) {
+  const container = dom.createElement('div')
+
+  // Split by URLs
+  const parts = content.split(URL_REGEX)
+
+  for (const part of parts) {
+    if (URL_REGEX.test(part)) {
+      URL_REGEX.lastIndex = 0 // Reset regex state
+
+      // Check if it's media
+      if (IMAGE_EXT.test(part)) {
+        // Image
+        const wrapper = dom.createElement('div')
+        wrapper.className = 'media-wrapper'
+        const img = dom.createElement('img')
+        img.src = part
+        img.alt = 'Image'
+        img.loading = 'lazy'
+        img.onclick = () => window.open(part, '_blank')
+        wrapper.appendChild(img)
+        container.appendChild(wrapper)
+      } else if (VIDEO_EXT.test(part)) {
+        // Video
+        const wrapper = dom.createElement('div')
+        wrapper.className = 'media-wrapper'
+        const video = dom.createElement('video')
+        video.src = part
+        video.controls = true
+        video.preload = 'metadata'
+        wrapper.appendChild(video)
+        container.appendChild(wrapper)
+      } else if (AUDIO_EXT.test(part)) {
+        // Audio
+        const wrapper = dom.createElement('div')
+        wrapper.className = 'media-wrapper'
+        const audio = dom.createElement('audio')
+        audio.src = part
+        audio.controls = true
+        audio.preload = 'metadata'
+        wrapper.appendChild(audio)
+        container.appendChild(wrapper)
+      } else {
+        // Regular link
+        const link = dom.createElement('a')
+        link.href = part
+        link.textContent = part.length > 50 ? part.slice(0, 50) + '...' : part
+        link.target = '_blank'
+        link.rel = 'noopener noreferrer'
+        container.appendChild(link)
+      }
+    } else if (part) {
+      // Regular text with markdown
+      const span = dom.createElement('span')
+      span.innerHTML = parseMarkdown(part)
+      container.appendChild(span)
+    }
+  }
+
+  return container
+}
+
 // Get initials from name
 function getInitials(name) {
   if (!name) return '?'
@@ -420,9 +772,10 @@ async function fetchAvatar(webId, store, $rdf) {
 }
 
 // Create message element
-function createMessageElement(dom, message, isOwn) {
+function createMessageElement(dom, message, isOwn, callbacks) {
   const row = dom.createElement('div')
   row.className = `message-row ${isOwn ? 'sent' : 'received'}`
+  row.dataset.uri = message.uri
 
   // Avatar
   const avatar = dom.createElement('div')
@@ -449,18 +802,89 @@ function createMessageElement(dom, message, isOwn) {
 
   const text = dom.createElement('div')
   text.className = 'message-text'
-  text.textContent = message.content || ''
+  const contentEl = renderMessageContent(dom, message.content || '')
+  text.appendChild(contentEl)
   bubble.appendChild(text)
 
   const meta = dom.createElement('div')
   meta.className = 'message-meta'
 
-  const time = dom.createElement('span')
+  const time = dom.createElement('a')
   time.className = 'message-time'
   time.textContent = formatTime(message.date)
+  time.href = message.uri
+  time.target = '_blank'
+  time.rel = 'noopener'
+  time.title = message.uri
   meta.appendChild(time)
 
+  // Edited indicator
+  if (message.edited) {
+    const edited = dom.createElement('span')
+    edited.className = 'message-edited'
+    edited.textContent = '(edited)'
+    meta.appendChild(edited)
+  }
+
+  // Action buttons for own messages
+  if (isOwn && callbacks) {
+    const actions = dom.createElement('div')
+    actions.className = 'message-actions'
+
+    const editBtn = dom.createElement('button')
+    editBtn.textContent = '✏️'
+    editBtn.title = 'Edit'
+    editBtn.onclick = (e) => {
+      e.stopPropagation()
+      callbacks.onEdit(message, row, text)
+    }
+    actions.appendChild(editBtn)
+
+    const deleteBtn = dom.createElement('button')
+    deleteBtn.textContent = '🗑️'
+    deleteBtn.title = 'Delete'
+    deleteBtn.onclick = (e) => {
+      e.stopPropagation()
+      callbacks.onDelete(message, row)
+    }
+    actions.appendChild(deleteBtn)
+
+    meta.appendChild(actions)
+  }
+
   bubble.appendChild(meta)
+
+  // Reactions display (existing reactions)
+  const reactionsDisplay = dom.createElement('div')
+  reactionsDisplay.className = 'reactions-display'
+  reactionsDisplay.dataset.msgUri = message.uri
+  if (message.reactions) {
+    for (const [emoji, users] of Object.entries(message.reactions)) {
+      const chip = dom.createElement('div')
+      chip.className = 'reaction-chip'
+      chip.innerHTML = `<span class="emoji">${emoji}</span><span class="count">${users.length}</span>`
+      chip.title = users.map(u => u.split('/').pop().split('#')[0]).join(', ')
+      reactionsDisplay.appendChild(chip)
+    }
+  }
+  bubble.appendChild(reactionsDisplay)
+
+  // Reaction bar (hover to show)
+  if (callbacks?.onReact) {
+    const reactionBar = dom.createElement('div')
+    reactionBar.className = 'reaction-bar'
+    for (const emoji of REACTIONS) {
+      const btn = dom.createElement('button')
+      btn.textContent = emoji
+      btn.onclick = (e) => {
+        e.stopPropagation()
+        callbacks.onReact(message, emoji, reactionsDisplay)
+      }
+      reactionBar.appendChild(btn)
+    }
+    bubble.appendChild(reactionBar)
+  }
+
   row.appendChild(bubble)
 
   return row
@@ -556,6 +980,25 @@ export const longChatPane = {
     titleDiv.appendChild(statusEl)
 
     header.appendChild(titleDiv)
+
+    // Share button
+    const shareBtn = dom.createElement('button')
+    shareBtn.className = 'share-btn'
+    shareBtn.textContent = '📋'
+    shareBtn.title = 'Copy share link'
+    shareBtn.onclick = () => {
+      if (window.solidChat?.copyShareLink) {
+        window.solidChat.copyShareLink(subject.uri)
+      } else {
+        // Fallback
+        const shareUrl = `${window.location.origin}${window.location.pathname}?chat=${encodeURIComponent(subject.uri)}`
+        navigator.clipboard.writeText(shareUrl).catch(() => {
+          prompt('Copy this link:', shareUrl)
+        })
+      }
+    }
+    header.appendChild(shareBtn)
+
     container.appendChild(header)
 
     // Messages container
@@ -597,6 +1040,107 @@ export const longChatPane = {
     }
     inputArea.appendChild(emojiBtn)
 
+    // Upload button
+    const uploadBtn = dom.createElement('button')
+    uploadBtn.className = 'upload-btn'
+    uploadBtn.textContent = '📎'
+    uploadBtn.type = 'button'
+    uploadBtn.title = 'Upload image/file'
+    inputArea.appendChild(uploadBtn)
+
+    // Hidden file input
+    const fileInput = dom.createElement('input')
+    fileInput.type = 'file'
+    fileInput.accept = 'image/*,video/*,audio/*'
+    fileInput.style.display = 'none'
+    inputArea.appendChild(fileInput)
+
+    uploadBtn.onclick = () => fileInput.click()
+
+    // Shared upload function for file input and paste
+    async function uploadFile(file) {
+      // Re-check current user (may have logged in after pane loaded)
+      const authnCheck = context.session?.logic?.authn || globalThis.SolidLogic?.authn
+      const uploadUser = authnCheck?.currentUser()?.value || currentUser
+
+      // Check if logged in
+      if (!uploadUser) {
+        alert('Please log in to upload files')
+        return
+      }
+
+      // Disable button during upload
+      uploadBtn.disabled = true
+      uploadBtn.textContent = '⏳'
+
+      try {
+        // Get authenticated fetch from context
+        const authFetch = context.authFetch ? context.authFetch() : fetch
+
+        // Extract pod root from WebID
+        const webIdUrl = new URL(uploadUser)
+        const podRoot = `${webIdUrl.protocol}//${webIdUrl.host}/`
+
+        // Create unique filename with timestamp
+        const timestamp = Date.now()
+        const safeName = (file.name || 'pasted-image.png').replace(/[^a-zA-Z0-9.-]/g, '_')
+        const uploadPath = `${podRoot}public/chat-uploads/${timestamp}-${safeName}`
+
+        // Upload file using authenticated fetch
+        const response = await authFetch(uploadPath, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': file.type || 'application/octet-stream'
+          },
+          body: file
+        })
+
+        if (!response.ok) {
+          // Try to create container first
+          if (response.status === 404 || response.status === 409) {
+            const containerPath = `${podRoot}public/chat-uploads/`
+            await authFetch(containerPath, {
+              method: 'PUT',
+              headers: { 'Content-Type': 'text/turtle' },
+              body: ''
+            })
+            // Retry upload
+            const retry = await authFetch(uploadPath, {
+              method: 'PUT',
+              headers: { 'Content-Type': file.type || 'application/octet-stream' },
+              body: file
+            })
+            if (!retry.ok) {
+              throw new Error(`Upload failed: ${retry.status} ${retry.statusText}`)
+            }
+          } else {
+            throw new Error(`Upload failed: ${response.status} ${response.statusText}`)
+          }
+        }
+
+        // Insert URL into message input
+        const currentText = input.value
+        input.value = currentText + (currentText ? ' ' : '') + uploadPath
+        input.dispatchEvent(new Event('input'))
+        input.focus()
+
+      } catch (err) {
+        console.error('Upload error:', err)
+        alert('Failed to upload file: ' + err.message)
+      }
+
+      // Reset
+      uploadBtn.disabled = false
+      uploadBtn.textContent = '📎'
+    }
+
+    // File input handler
+    fileInput.onchange = async () => {
+      const file = fileInput.files[0]
+      if (file) await uploadFile(file)
+      fileInput.value = ''
+    }
+
     const inputWrapper = dom.createElement('div')
     inputWrapper.className = 'input-wrapper'
 
@@ -624,7 +1168,9 @@ export const longChatPane = {
 
     // State
     let messages = []
+    let renderedUris = new Set()
     let currentUser = null
+    let isFirstLoad = true
 
     // Get current user
     const authn = context.session?.logic?.authn || globalThis.SolidLogic?.authn
@@ -632,11 +1178,213 @@ export const longChatPane = {
       currentUser = authn.currentUser()?.value
     }
 
+    // Delete message handler
+    async function handleDelete(message, rowEl) {
+      if (!confirm('Delete this message?')) return
+
+      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 . }`
+
+        const response = await authFetch(doc.value || doc.uri, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/sparql-update' },
+          body: deleteQuery
+        })
+
+        if (!response.ok) {
+          throw new Error(`Delete failed: ${response.status}`)
+        }
+
+        // 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)
+        alert('Failed to delete: ' + err.message)
+      }
+    }
+
+    // Edit message handler
+    async function handleEdit(message, rowEl, textEl) {
+      // Replace text content with textarea
+      const originalContent = message.content
+      textEl.innerHTML = ''
+
+      const textarea = dom.createElement('textarea')
+      textarea.className = 'edit-textarea'
+      textarea.value = originalContent
+      textEl.appendChild(textarea)
+
+      const actions = dom.createElement('div')
+      actions.className = 'edit-actions'
+
+      const saveBtn = dom.createElement('button')
+      saveBtn.className = 'save-btn'
+      saveBtn.textContent = 'Save'
+
+      const cancelBtn = dom.createElement('button')
+      cancelBtn.className = 'cancel-btn'
+      cancelBtn.textContent = 'Cancel'
+
+      actions.appendChild(saveBtn)
+      actions.appendChild(cancelBtn)
+      textEl.appendChild(actions)
+
+      textarea.focus()
+      textarea.setSelectionRange(textarea.value.length, textarea.value.length)
+
+      // Cancel handler
+      cancelBtn.onclick = () => {
+        textEl.innerHTML = ''
+        textEl.appendChild(renderMessageContent(dom, originalContent))
+      }
+
+      // Save handler
+      saveBtn.onclick = async () => {
+        const newContent = textarea.value.trim()
+        if (!newContent || newContent === originalContent) {
+          cancelBtn.onclick()
+          return
+        }
+
+        saveBtn.disabled = true
+        saveBtn.textContent = 'Saving...'
+
+        try {
+          const authFetch = context.authFetch ? context.authFetch() : fetch
+          const doc = subject.doc ? subject.doc() : subject
+          const msgUri = message.uri
+
+          // SPARQL DELETE old content + INSERT new content
+          const ns = $rdf.Namespace
+          const SIOC = ns('http://rdfs.org/sioc/ns#')
+
+          const updateQuery = `
+            DELETE { <${msgUri}> <${SIOC('content').value}> ?content }
+            INSERT { <${msgUri}> <${SIOC('content').value}> ${JSON.stringify(newContent)} }
+            WHERE { <${msgUri}> <${SIOC('content').value}> ?content }
+          `
+
+          const response = await authFetch(doc.value || doc.uri, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/sparql-update' },
+            body: updateQuery
+          })
+
+          if (!response.ok) {
+            throw new Error(`Edit failed: ${response.status}`)
+          }
+
+          // Update UI
+          message.content = newContent
+          message.edited = true
+          textEl.innerHTML = ''
+          textEl.appendChild(renderMessageContent(dom, newContent))
+
+          // Add edited indicator if not present
+          const meta = rowEl.querySelector('.message-meta')
+          if (meta && !meta.querySelector('.message-edited')) {
+            const edited = dom.createElement('span')
+            edited.className = 'message-edited'
+            edited.textContent = '(edited)'
+            meta.insertBefore(edited, meta.querySelector('.message-actions'))
+          }
+
+        } catch (err) {
+          console.error('Edit error:', err)
+          alert('Failed to edit: ' + err.message)
+          saveBtn.disabled = false
+          saveBtn.textContent = 'Save'
+        }
+      }
+    }
+
+    // React to message handler
+    async function handleReact(message, emoji, reactionsDisplay) {
+      // Check if logged in
+      const authnCheck = context.session?.logic?.authn || globalThis.SolidLogic?.authn
+      const reactUser = authnCheck?.currentUser()?.value || currentUser
+
+      if (!reactUser) {
+        alert('Please log in to react')
+        return
+      }
+
+      try {
+        const authFetch = context.authFetch ? context.authFetch() : fetch
+        const doc = subject.doc ? subject.doc() : subject
+
+        // Create reaction URI
+        const reactionId = `#reaction-${Date.now()}`
+        const reactionUri = subject.uri + reactionId
+
+        // RDF namespace
+        const SCHEMA = 'http://schema.org/'
+
+        // SPARQL INSERT for reaction
+        const insertQuery = `
+          INSERT DATA {
+            <${reactionUri}> a <${SCHEMA}ReactAction> ;
+              <${SCHEMA}about> <${message.uri}> ;
+              <${SCHEMA}agent> <${reactUser}> ;
+              <${SCHEMA}name> "${emoji}" .
+          }
+        `
+
+        const response = await authFetch(doc.value || doc.uri, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/sparql-update' },
+          body: insertQuery
+        })
+
+        if (!response.ok) {
+          throw new Error(`React failed: ${response.status}`)
+        }
+
+        // Update UI - add or increment reaction
+        if (!message.reactions) message.reactions = {}
+        if (!message.reactions[emoji]) message.reactions[emoji] = []
+        if (!message.reactions[emoji].includes(reactUser)) {
+          message.reactions[emoji].push(reactUser)
+        }
+
+        // Re-render reactions display
+        reactionsDisplay.innerHTML = ''
+        for (const [e, users] of Object.entries(message.reactions)) {
+          const chip = dom.createElement('div')
+          chip.className = 'reaction-chip'
+          chip.innerHTML = `<span class="emoji">${e}</span><span class="count">${users.length}</span>`
+          chip.title = users.map(u => u.split('/').pop().split('#')[0]).join(', ')
+          reactionsDisplay.appendChild(chip)
+        }
+
+      } catch (err) {
+        console.error('React error:', err)
+        alert('Failed to react: ' + err.message)
+      }
+    }
+
+    // Callbacks for message actions
+    const messageCallbacks = {
+      onEdit: handleEdit,
+      onDelete: handleDelete,
+      onReact: handleReact
+    }
+
     // Load messages from store
     async function loadMessages() {
-      statusEl.textContent = 'Loading messages...'
-      messagesContainer.innerHTML = ''
-      messages = []
+      if (isFirstLoad) {
+        statusEl.textContent = 'Loading messages...'
+        messagesContainer.innerHTML = ''
+      }
 
       try {
         // Define namespaces
@@ -665,6 +1413,7 @@ export const longChatPane = {
 
         // Extract all messages with sioc:content from this document
         const contentStatements = store.statementsMatching(null, SIOC('content'), null, doc)
+        const newMessages = []
 
         for (const st of contentStatements) {
           const msgNode = st.subject
@@ -688,7 +1437,7 @@ export const longChatPane = {
                         'Unknown'
           }
 
-          messages.push({
+          newMessages.push({
             uri: msgNode.value,
             content,
             date: date ? new Date(date) : new Date(),
@@ -698,45 +1447,114 @@ export const longChatPane = {
         }
 
         // Sort by date
-        messages.sort((a, b) => (a.date || 0) - (b.date || 0))
+        newMessages.sort((a, b) => (a.date || 0) - (b.date || 0))
 
         // Keep only last 100 messages for performance
-        if (messages.length > 100) {
-          messages = messages.slice(-100)
+        const allMessages = newMessages.slice(-100)
+
+        // Load reactions for messages
+        const SCHEMA = ns('http://schema.org/')
+        const reactionStatements = store.statementsMatching(null, SCHEMA('about'), null, doc)
+        for (const st of reactionStatements) {
+          const reactionNode = st.subject
+          const aboutMsg = st.object.value
+          const emoji = store.any(reactionNode, SCHEMA('name'), null, doc)?.value
+          const agent = store.any(reactionNode, SCHEMA('agent'), null, doc)?.value
+
+          if (emoji && agent) {
+            const msg = allMessages.find(m => m.uri === aboutMsg)
+            if (msg) {
+              if (!msg.reactions) msg.reactions = {}
+              if (!msg.reactions[emoji]) msg.reactions[emoji] = []
+              if (!msg.reactions[emoji].includes(agent)) {
+                msg.reactions[emoji].push(agent)
+              }
+            }
+          }
         }
 
-        // Render messages
-        if (messages.length === 0) {
-          const empty = dom.createElement('div')
-          empty.className = 'empty-chat'
-          empty.innerHTML = '<div class="empty-chat-icon">💬</div><div>No messages yet</div><div>Be the first to say hello!</div>'
-          messagesContainer.appendChild(empty)
-        } else {
-          for (const msg of messages) {
+        // Find messages that haven't been rendered yet
+        const unrenderedMessages = allMessages.filter(m => !renderedUris.has(m.uri))
+
+        // Render only new messages (or all on first load)
+        if (isFirstLoad) {
+          if (allMessages.length === 0) {
+            const empty = dom.createElement('div')
+            empty.className = 'empty-chat'
+            empty.innerHTML = '<div class="empty-chat-icon">💬</div><div>No messages yet</div><div>Be the first to say hello!</div>'
+            messagesContainer.appendChild(empty)
+          } else {
+            for (const msg of allMessages) {
+              const isOwn = currentUser && msg.authorUri === currentUser
+              const el = createMessageElement(dom, msg, isOwn, messageCallbacks)
+              messagesContainer.appendChild(el)
+              renderedUris.add(msg.uri)
+            }
+          }
+          isFirstLoad = false
+        } else if (unrenderedMessages.length > 0) {
+          // Remove empty state if present
+          const empty = messagesContainer.querySelector('.empty-chat')
+          if (empty) empty.remove()
+
+          // Append only new messages
+          for (const msg of unrenderedMessages) {
             const isOwn = currentUser && msg.authorUri === currentUser
-            const el = createMessageElement(dom, msg, isOwn)
+            const el = createMessageElement(dom, msg, isOwn, messageCallbacks)
             messagesContainer.appendChild(el)
+            renderedUris.add(msg.uri)
           }
         }
 
+        messages = allMessages
         statusEl.textContent = `${messages.length} messages`
 
-        // Scroll to bottom
-        messagesContainer.scrollTop = messagesContainer.scrollHeight
+        // Update reactions for already-rendered messages
+        for (const msg of allMessages) {
+          if (msg.reactions) {
+            const reactionsDisplay = messagesContainer.querySelector(`.reactions-display[data-msg-uri="${msg.uri}"]`)
+            if (reactionsDisplay) {
+              const currentHtml = reactionsDisplay.innerHTML
+              let newHtml = ''
+              for (const [emoji, users] of Object.entries(msg.reactions)) {
+                const title = users.map(u => u.split('/').pop().split('#')[0]).join(', ')
+                newHtml += `<div class="reaction-chip"><span class="emoji">${emoji}</span><span class="count">${users.length}</span></div>`
+              }
+              // Only update if changed (avoid flicker)
+              if (reactionsDisplay.innerHTML !== newHtml) {
+                reactionsDisplay.innerHTML = newHtml
+                // Re-add titles
+                const chips = reactionsDisplay.querySelectorAll('.reaction-chip')
+                let i = 0
+                for (const [emoji, users] of Object.entries(msg.reactions)) {
+                  if (chips[i]) chips[i].title = users.map(u => u.split('/').pop().split('#')[0]).join(', ')
+                  i++
+                }
+              }
+            }
+          }
+        }
 
-        // Load avatars asynchronously
-        const uniqueWebIds = [...new Set(messages.map(m => m.authorUri).filter(Boolean))]
-        for (const webId of uniqueWebIds) {
-          fetchAvatar(webId, store, $rdf).then(avatarUrl => {
+        // Scroll to bottom only if there are new messages
+        if (isFirstLoad || unrenderedMessages.length > 0) {
+          messagesContainer.scrollTop = messagesContainer.scrollHeight
+        }
+
+        // Load avatars in parallel (only for new messages)
+        const newWebIds = [...new Set(unrenderedMessages.map(m => m.authorUri).filter(Boolean))]
+        const uniqueWebIds = isFirstLoad ? [...new Set(messages.map(m => m.authorUri).filter(Boolean))] : newWebIds
+        Promise.all(uniqueWebIds.map(webId =>
+          fetchAvatar(webId, store, $rdf).then(avatarUrl => ({ webId, avatarUrl }))
+        )).then(results => {
+          results.forEach(({ webId, avatarUrl }) => {
             if (avatarUrl) {
-              // Update all avatars for this WebID
               const avatars = messagesContainer.querySelectorAll(`.message-avatar[data-webid="${webId}"]`)
               avatars.forEach(el => {
                 el.innerHTML = `<img src="${avatarUrl}" alt="" />`
               })
             }
           })
-        }
+        })
 
       } catch (err) {
         console.error('Error loading chat:', err)
@@ -791,10 +1609,12 @@ export const longChatPane = {
         const empty = messagesContainer.querySelector('.empty-chat')
         if (empty) empty.remove()
 
-        const el = createMessageElement(dom, msg, true)
+        const el = createMessageElement(dom, msg, true, messageCallbacks)
         messagesContainer.appendChild(el)
         messagesContainer.scrollTop = messagesContainer.scrollHeight
 
+        // Track as rendered to prevent duplicate on refresh
+        renderedUris.add(msg.uri)
         messages.push(msg)
         statusEl.textContent = `${messages.length} messages`
 
@@ -825,8 +1645,30 @@ export const longChatPane = {
       }
     })
 
+    // Paste image handler
+    input.addEventListener('paste', (e) => {
+      const items = e.clipboardData?.items
+      if (!items) return
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          e.preventDefault()
+          const file = item.getAsFile()
+          if (file) uploadFile(file)
+          break
+        }
+      }
+    })
+
     sendBtn.addEventListener('click', sendMessage)
 
+    // Expose refresh method for incremental updates
+    container.refresh = async function() {
+      // Re-fetch the document
+      const doc = subject.doc ? subject.doc() : subject
+      await store.fetcher.load(doc, { force: true })
+      await loadMessages()
+    }
+
     // Initial load
     loadMessages()