solid-chat 0.0.1 → 0.0.3

package/README.md

@@ -2,17 +2,61 @@
 
 Modern, decentralized chat app built on the [Solid](https://solidproject.org) protocol.
 
-🌐 **Live App:** [solid-chat.com/app](https://solid-chat.com/app)
+**Live App:** [solid-chat.com/app](https://solid-chat.com/app)
 
 ## Features
 
-- Clean, modern messenger-style UI
-- Decentralized - messages stored in your Solid pod
+### Core
+- Clean, WhatsApp-style messenger UI
+- Decentralized - messages stored in Solid pods
 - Implements the [Solid Chat specification](https://solid.github.io/chat/)
-- Works with any Solid pod provider
-- Clickable WebID links on author names
+- Works with any Solid pod provider (solidweb.org, solidcommunity.net, inrupt.net, etc.)
 - No React/heavy frameworks - vanilla JS
 
+### Authentication
+- Solid OIDC authentication
+- Multi-provider support (enter any IDP)
+- Persistent sessions
+
+### Real-time
+- WebSocket updates (NSS `Updates-Via` header)
+- WebSocketChannel2023 support (CSS/solidcommunity.net)
+- Notification sounds when tab is hidden (toggleable)
+
+### Messaging
+- Send and receive messages
+- Edit your own messages (requires Write permission)
+- Delete your own messages (requires Write permission)
+- Simple markdown: `*bold*`, `_italic_`, `~strike~`, `` `code` ``, ` ```code blocks``` `
+- Emoji picker
+- Emoji reactions: 👍 ❤️ 😂 😮 😢 🎉
+
+### Media
+- File upload to your pod (📎 button)
+- Paste images directly (Ctrl+V)
+- Auto-expand images, video, and audio inline
+- Clickable URLs
+
+### Sidebar
+- Chat list with recent chats
+- Type Index auto-discovery of your chats
+- Create new chats on your pod
+- Manual chat URL addition
+- Persistent storage (localStorage)
+
+### Sharing & Deep Links
+- Share button (📋) copies shareable link
+- Deep link support: `?chat=<url>` loads or creates chat
+- Auto-create: links to your pod create rooms on demand
+- Type Index registration for discoverability
+
+### UI/UX
+- Avatar display from WebID profiles
+- Clickable author names (links to WebID)
+- Clickable timestamps (permalinks to message URI)
+- "(edited)" indicator for edited messages
+- Message count in header
+
 ## Quick Start
 
 ```bash
@@ -20,8 +64,10 @@ Modern, decentralized chat app built on the [Solid](https://solidproject.org) pr
 git clone https://github.com/solid-chat/app.git
 cd app
 
-# Serve locally
+# Serve locally (choose one)
 npx serve .
+# or
+npx vite
 
 # Open in browser
 open http://localhost:3000
@@ -29,32 +75,67 @@ open http://localhost:3000
 
 ## Usage
 
-1. Enter a Solid chat URI in the input field
-2. Click "Load Chat" or press Enter
-3. Messages from the chat will be displayed
+1. Enter your Solid IDP (e.g., `solidweb.org`) and click Login
+2. Select a chat from the sidebar or add a new one
+3. Start chatting!
+
+### Default Global Chats
+- `https://solid-chat.solidweb.org/public/global/chat.ttl` (faster)
+- `https://solid-chat.solidcommunity.net/public/global/chat.ttl`
+
+### Deep Links
+
+Share chats with a URL:
+```
+https://solid-chat.com/app?chat=https://you.solidweb.org/public/chats/my-room.ttl
+```
+
+**Behavior:**
+- If chat exists → loads it
+- If chat doesn't exist AND it's your pod → creates it automatically
+- Change one character → instant new room
+
+**Create rooms on demand:**
+```
+https://solid-chat.com/app?chat=https://you.pod/public/chats/meeting-monday.ttl
+https://solid-chat.com/app?chat=https://you.pod/public/chats/meeting-tuesday.ttl
+```
 
-Example chat URIs:
-- `https://solidos.solidcommunity.net/Team/SolidOs%20team%20chat/2022/02/09/chat.ttl`
+Click the share button (📋) in any chat to copy the shareable link.
 
 ## Chat Data Format
 
-The app expects Turtle/RDF data using standard Solid chat vocabularies:
+Messages use standard Solid chat vocabularies (RDF/Turtle):
 
 ```turtle
-@prefix flow: <http://www.w3.org/2005/01/wf/flow#>.
 @prefix sioc: <http://rdfs.org/sioc/ns#>.
 @prefix dct: <http://purl.org/dc/terms/>.
 @prefix foaf: <http://xmlns.com/foaf/0.1/>.
 
-<#this>
-    a <http://www.w3.org/ns/pim/meeting#LongChat> ;
-    flow:message :msg1 .
-
-:msg1
-    a flow:Message ;
+<#msg-1234567890>
+    a <http://www.w3.org/2005/01/wf/flow#Message> ;
     sioc:content "Hello world!" ;
     dct:created "2024-12-30T10:00:00Z"^^xsd:dateTime ;
-    foaf:maker <https://example.com/profile#me> .
+    foaf:maker <https://you.solidweb.org/profile/card#me> .
+```
+
+Reactions use Schema.org:
+
+```turtle
+@prefix schema: <http://schema.org/>.
+
+<#reaction-1234567890>
+    a schema:ReactAction ;
+    schema:about <#msg-123> ;
+    schema:agent <https://you.solidweb.org/profile/card#me> ;
+    schema:name "👍" .
+```
+
+## Testing
+
+```bash
+npm install
+npm test
 ```
 
 ## Specification
@@ -63,11 +144,24 @@ This app implements the [Solid Chat specification](https://solid.github.io/chat/
 
 ## Roadmap
 
-- [ ] Solid OIDC authentication
-- [ ] Chat list sidebar
-- [ ] Create new chats
-- [ ] Real-time updates
-- [ ] Nostr DID integration
+- [x] Solid OIDC authentication
+- [x] Chat list sidebar
+- [x] Real-time updates (WebSocket + WebSocketChannel2023)
+- [x] Notification sounds
+- [x] File upload
+- [x] Image paste
+- [x] Media auto-expand
+- [x] Simple markdown
+- [x] Edit/delete messages
+- [x] Emoji reactions
+- [x] Create new chats
+- [x] Deep link sharing (`?chat=<url>`)
+- [x] Type Index registration
+- [ ] @mentions with notifications
+- [ ] End-to-end encryption
+- [ ] Mobile responsive sidebar
+- [ ] Unread message badges
+- [ ] Message search
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-chat",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Modern chat panes for Solid pods - longChatPane and chatListPane",
   "type": "module",
   "main": "src/index.js",
@@ -15,7 +15,9 @@
   ],
   "scripts": {
     "start": "npx serve .",
-    "dev": "npx serve . -p 8080"
+    "dev": "npx serve . -p 8080",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "rdflib": ">=2.2.0"
@@ -38,5 +40,9 @@
   },
   "homepage": "https://solid-chat.com",
   "author": "Solid Chat Contributors",
-  "license": "AGPL-3.0"
+  "license": "AGPL-3.0",
+  "devDependencies": {
+    "jsdom": "^27.4.0",
+    "vitest": "^4.0.16"
+  }
 }

package/src/chatListPane.js

@@ -20,13 +20,21 @@ const MEETING = {
 // Storage key for localStorage
 const STORAGE_KEY = 'solidchat-chats'
 
-// Default global chat
-const DEFAULT_CHAT = {
-  uri: 'https://solid-chat.solidcommunity.net/public/global/chat.ttl',
-  title: 'Solid Chat Global',
-  lastMessage: 'Welcome to the global chat!',
-  timestamp: '2025-12-31T09:00:00Z'
-}
+// Default global chats
+const DEFAULT_CHATS = [
+  {
+    uri: 'https://solid-chat.solidweb.org/public/global/chat.ttl',
+    title: 'Solid Chat Global (solidweb.org)',
+    lastMessage: 'Welcome! Faster server.',
+    timestamp: '2025-12-31T12:00:00Z'
+  },
+  {
+    uri: 'https://solid-chat.solidcommunity.net/public/global/chat.ttl',
+    title: 'Solid Chat Global (solidcommunity.net)',
+    lastMessage: 'Welcome to the global chat!',
+    timestamp: '2025-12-31T09:00:00Z'
+  }
+]
 
 // CSS styles
 const styles = `
@@ -308,6 +316,47 @@ const styles = `
   box-shadow: none;
 }
 
+/* Modal tabs */
+.modal-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.modal-tab {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.modal-tab:hover {
+  background: var(--bg-hover);
+}
+
+.modal-tab.active {
+  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+  color: white;
+  border-color: transparent;
+}
+
+.modal-url-preview {
+  font-size: 11px;
+  color: var(--text-muted);
+  word-break: break-all;
+  padding: 8px 12px;
+  background: var(--bg-hover);
+  border-radius: 6px;
+  margin-bottom: 16px;
+  display: none;
+}
+
 /* Delete button on chat item */
 .chat-item-delete {
   width: 24px;
@@ -364,18 +413,21 @@ function loadChatList() {
     chatList = []
   }
 
-  // Add default global chat if list is empty
+  // Add default global chats if list is empty
   if (chatList.length === 0) {
-    chatList.push({ ...DEFAULT_CHAT })
+    chatList.push(...DEFAULT_CHATS.map(c => ({ ...c })))
     saveChatList()
   }
 
-  // Ensure default chat exists in list
-  const hasDefault = chatList.some(c => c.uri === DEFAULT_CHAT.uri)
-  if (!hasDefault) {
-    chatList.unshift({ ...DEFAULT_CHAT })
-    saveChatList()
+  // Ensure all default chats exist in list
+  let added = false
+  for (const defaultChat of DEFAULT_CHATS) {
+    if (!chatList.some(c => c.uri === defaultChat.uri)) {
+      chatList.unshift({ ...defaultChat })
+      added = true
+    }
   }
+  if (added) saveChatList()
 
   return chatList
 }
@@ -535,31 +587,108 @@ function renderChatList() {
   })
 }
 
-// Show add chat modal
-function showAddModal(dom) {
+// Show add/create chat modal
+function showAddModal(dom, webId) {
   const overlay = dom.createElement('div')
   overlay.className = 'modal-overlay'
 
   const modal = dom.createElement('div')
   modal.className = 'modal'
 
-  modal.innerHTML = `
-    <div class="modal-title">Add Chat</div>
-    <input type="url" class="modal-input" placeholder="Enter chat URL..." />
-    <div class="modal-buttons">
-      <button class="modal-btn modal-btn-cancel">Cancel</button>
-      <button class="modal-btn modal-btn-add">Add</button>
-    </div>
-  `
+  // Check if user is logged in (can create chats)
+  const canCreate = !!webId
+
+  if (canCreate) {
+    modal.innerHTML = `
+      <div class="modal-title">Add or Create Chat</div>
+      <div class="modal-tabs">
+        <button class="modal-tab active" data-tab="add">Add Existing</button>
+        <button class="modal-tab" data-tab="create">Create New</button>
+      </div>
+      <div class="modal-tab-content" data-content="add">
+        <input type="url" class="modal-input" id="addUrlInput" placeholder="Enter chat URL..." />
+      </div>
+      <div class="modal-tab-content" data-content="create" style="display: none;">
+        <input type="text" class="modal-input" id="createTitleInput" placeholder="Chat title (e.g. Team Standup)" />
+        <select class="modal-input" id="createLocationSelect">
+          <option value="/public/chats/">Public (anyone with link)</option>
+          <option value="/private/chats/">Private (only you)</option>
+        </select>
+        <div class="modal-url-preview" id="urlPreview"></div>
+      </div>
+      <div class="modal-buttons">
+        <button class="modal-btn modal-btn-cancel">Cancel</button>
+        <button class="modal-btn modal-btn-add" id="actionBtn">Add</button>
+      </div>
+    `
+  } else {
+    modal.innerHTML = `
+      <div class="modal-title">Add Chat</div>
+      <input type="url" class="modal-input" id="addUrlInput" placeholder="Enter chat URL..." />
+      <p style="font-size: 12px; color: #a0aec0; margin-bottom: 16px;">Login to create new chats on your pod.</p>
+      <div class="modal-buttons">
+        <button class="modal-btn modal-btn-cancel">Cancel</button>
+        <button class="modal-btn modal-btn-add" id="actionBtn">Add</button>
+      </div>
+    `
+  }
 
   overlay.appendChild(modal)
   dom.body.appendChild(overlay)
 
-  const input = modal.querySelector('.modal-input')
   const cancelBtn = modal.querySelector('.modal-btn-cancel')
-  const addBtn = modal.querySelector('.modal-btn-add')
+  const actionBtn = modal.querySelector('#actionBtn')
+  const addUrlInput = modal.querySelector('#addUrlInput')
+
+  let currentTab = 'add'
+
+  // Tab switching
+  if (canCreate) {
+    const tabs = modal.querySelectorAll('.modal-tab')
+    const createTitleInput = modal.querySelector('#createTitleInput')
+    const createLocationSelect = modal.querySelector('#createLocationSelect')
+    const urlPreview = modal.querySelector('#urlPreview')
+
+    // Update URL preview
+    const updatePreview = () => {
+      const title = createTitleInput.value.trim()
+      const location = createLocationSelect.value
+      if (title && webId) {
+        const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
+        const podRoot = getPodRootFromWebId(webId)
+        const fullUrl = `${podRoot}${location.slice(1)}${slug}.ttl`
+        urlPreview.textContent = fullUrl
+        urlPreview.style.display = 'block'
+      } else {
+        urlPreview.style.display = 'none'
+      }
+    }
+
+    createTitleInput.addEventListener('input', updatePreview)
+    createLocationSelect.addEventListener('change', updatePreview)
+
+    tabs.forEach(tab => {
+      tab.onclick = () => {
+        tabs.forEach(t => t.classList.remove('active'))
+        tab.classList.add('active')
+        currentTab = tab.dataset.tab
+
+        modal.querySelectorAll('.modal-tab-content').forEach(c => {
+          c.style.display = c.dataset.content === currentTab ? 'block' : 'none'
+        })
+
+        actionBtn.textContent = currentTab === 'add' ? 'Add' : 'Create'
 
-  input.focus()
+        if (currentTab === 'add') {
+          addUrlInput.focus()
+        } else {
+          createTitleInput.focus()
+        }
+      }
+    })
+  }
+
+  addUrlInput?.focus()
 
   const close = () => {
     overlay.remove()
@@ -571,26 +700,89 @@ function showAddModal(dom) {
 
   cancelBtn.onclick = close
 
-  addBtn.onclick = () => {
-    const uri = input.value.trim()
-    if (uri) {
-      addChat(uri)
-      activeUri = uri
-      renderChatList()
-      if (onSelectCallback) {
-        onSelectCallback(uri)
+  actionBtn.onclick = async () => {
+    if (currentTab === 'add') {
+      const uri = addUrlInput.value.trim()
+      if (uri) {
+        addChat(uri)
+        activeUri = uri
+        renderChatList()
+        if (onSelectCallback) {
+          onSelectCallback(uri)
+        }
+        close()
+      }
+    } else {
+      // Create new chat
+      const createTitleInput = modal.querySelector('#createTitleInput')
+      const createLocationSelect = modal.querySelector('#createLocationSelect')
+
+      const title = createTitleInput.value.trim()
+      const location = createLocationSelect.value
+
+      if (!title) {
+        createTitleInput.focus()
+        return
+      }
+
+      const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
+      const podRoot = getPodRootFromWebId(webId)
+      const chatUrl = `${podRoot}${location.slice(1)}${slug}.ttl`
+
+      actionBtn.disabled = true
+      actionBtn.textContent = 'Creating...'
+
+      try {
+        // Use the createChat from index.html
+        if (window.solidChat?.createChat) {
+          await window.solidChat.createChat(chatUrl, title)
+        } else {
+          throw new Error('createChat not available')
+        }
+
+        addChat(chatUrl, title)
+        activeUri = chatUrl
+        renderChatList()
+
+        // Copy share link
+        if (window.solidChat?.copyShareLink) {
+          window.solidChat.copyShareLink(chatUrl)
+        }
+
+        if (onSelectCallback) {
+          onSelectCallback(chatUrl)
+        }
+        close()
+      } catch (e) {
+        console.error('Failed to create chat:', e)
+        alert('Failed to create chat: ' + e.message)
+        actionBtn.disabled = false
+        actionBtn.textContent = 'Create'
       }
-      close()
     }
   }
 
-  input.onkeydown = (e) => {
+  // Handle Enter key
+  const handleKeydown = (e) => {
     if (e.key === 'Enter') {
-      addBtn.click()
+      actionBtn.click()
     } else if (e.key === 'Escape') {
       close()
     }
   }
+
+  addUrlInput?.addEventListener('keydown', handleKeydown)
+  modal.querySelector('#createTitleInput')?.addEventListener('keydown', handleKeydown)
+}
+
+// Get pod root from WebID (simple extraction)
+function getPodRootFromWebId(webId) {
+  try {
+    const url = new URL(webId)
+    return `${url.protocol}//${url.host}/`
+  } catch {
+    return ''
+  }
 }
 
 // Discover chats from Type Index
@@ -670,8 +862,8 @@ export const chatListPane = {
     const addBtn = dom.createElement('button')
     addBtn.className = 'add-chat-btn'
     addBtn.textContent = '+'
-    addBtn.title = 'Add chat'
-    addBtn.onclick = () => showAddModal(dom)
+    addBtn.title = 'Add or create chat'
+    addBtn.onclick = () => showAddModal(dom, options.webId)
 
     header.appendChild(title)
     header.appendChild(addBtn)
@@ -739,4 +931,4 @@ export const chatListPane = {
 }
 
 // Export for use in index.html
-export { addChat, updateChatPreview }
+export { addChat, removeChat, updateChatPreview }

package/src/index.test.js

@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { longChatPane, chatListPane, addChat, removeChat } from './index.js'
+
+describe('solid-chat exports', () => {
+  it('exports longChatPane', () => {
+    expect(longChatPane).toBeDefined()
+    expect(longChatPane.name).toBe('long-chat')
+    expect(typeof longChatPane.render).toBe('function')
+  })
+
+  it('exports chatListPane', () => {
+    expect(chatListPane).toBeDefined()
+    expect(chatListPane.name).toBe('chat-list')
+    expect(typeof chatListPane.render).toBe('function')
+  })
+
+  it('exports addChat and removeChat', () => {
+    expect(typeof addChat).toBe('function')
+    expect(typeof removeChat).toBe('function')
+  })
+})
+
+describe('chatListPane', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('renders a container element', () => {
+    const context = { dom: document, session: { store: {} } }
+    const options = { onSelectChat: () => {} }
+    const element = chatListPane.render(context, options)
+
+    expect(element).toBeInstanceOf(HTMLElement)
+    expect(element.className).toBe('chat-list-pane')
+  })
+
+  it('includes default global chat', () => {
+    const context = { dom: document, session: { store: {} } }
+    const options = { onSelectChat: () => {} }
+    const element = chatListPane.render(context, options)
+
+    expect(element.textContent).toContain('Solid Chat Global')
+  })
+
+  it('addChat persists to localStorage', () => {
+    const context = { dom: document, session: { store: {} } }
+    chatListPane.render(context, { onSelectChat: () => {} })
+
+    addChat('https://example.com/chat.ttl', 'Test Chat')
+
+    const stored = JSON.parse(localStorage.getItem('solidchat-chats'))
+    expect(stored.some(c => c.uri === 'https://example.com/chat.ttl')).toBe(true)
+  })
+
+  it('removeChat removes from localStorage', () => {
+    const context = { dom: document, session: { store: {} } }
+    chatListPane.render(context, { onSelectChat: () => {} })
+
+    addChat('https://example.com/chat.ttl', 'Test Chat')
+    removeChat('https://example.com/chat.ttl')
+
+    const stored = JSON.parse(localStorage.getItem('solidchat-chats'))
+    expect(stored.some(c => c.uri === 'https://example.com/chat.ttl')).toBe(false)
+  })
+})
+
+describe('longChatPane', () => {
+  it('has label function', () => {
+    expect(typeof longChatPane.label).toBe('function')
+  })
+})