solid-chat 0.0.1 → 0.0.4

package/manifest.json

@@ -0,0 +1,57 @@
+{
+  "name": "Solid Chat",
+  "short_name": "Solid Chat",
+  "description": "Decentralized messaging for the web",
+  "start_url": "/app/",
+  "display": "standalone",
+  "background_color": "#f7f8fc",
+  "theme_color": "#667eea",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "icons/icon-72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["social", "communication"],
+  "lang": "en",
+  "dir": "ltr"
+}

package/package.json

@@ -1,21 +1,30 @@
 {
   "name": "solid-chat",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "Modern chat panes for Solid pods - longChatPane and chatListPane",
   "type": "module",
   "main": "src/index.js",
   "module": "src/index.js",
+  "bin": {
+    "solid-chat": "./bin/cli.js"
+  },
   "exports": {
     ".": "./src/index.js",
     "./longChatPane": "./src/longChatPane.js",
     "./chatListPane": "./src/chatListPane.js"
   },
   "files": [
-    "src/"
+    "src/",
+    "bin/",
+    "index.html",
+    "icons/",
+    "manifest.json"
   ],
   "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 +47,12 @@
   },
   "homepage": "https://solid-chat.com",
   "author": "Solid Chat Contributors",
-  "license": "AGPL-3.0"
+  "license": "AGPL-3.0",
+  "dependencies": {
+    "open": "^10.1.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')
+  })
+})