solid-chat 0.0.1 → 0.0.4

package/README.md

@@ -2,59 +2,137 @@
 
 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
-# Clone the repo
+# Run instantly (no clone needed)
+npx solid-chat
+
+# Or clone and run
 git clone https://github.com/solid-chat/app.git
 cd app
+npm install
+npm start
+```
+
+## Usage
+
+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!
 
-# Serve locally
-npx serve .
+### Default Global Chats
+- `https://solid-chat.solidweb.org/public/global/chat.ttl` (faster)
+- `https://solid-chat.solidcommunity.net/public/global/chat.ttl`
 
-# Open in browser
-open http://localhost:3000
+### Deep Links
+
+Share chats with a URL:
+```
+https://solid-chat.com/app?chat=https://you.solidweb.org/public/chats/my-room.ttl
 ```
 
-## Usage
+**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
 
-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
+**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 +141,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/bin/cli.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+
+import { createServer } from 'http'
+import { readFileSync, existsSync, statSync } from 'fs'
+import { join, extname } from 'path'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+import open from 'open'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const ROOT = join(__dirname, '..')
+
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.mjs': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf'
+}
+
+const port = parseInt(process.argv[2]) || 3000
+
+const server = createServer((req, res) => {
+  let filePath = join(ROOT, req.url === '/' ? 'index.html' : req.url)
+
+  // Security: prevent directory traversal
+  if (!filePath.startsWith(ROOT)) {
+    res.writeHead(403)
+    res.end('Forbidden')
+    return
+  }
+
+  // Handle directory requests
+  if (existsSync(filePath) && statSync(filePath).isDirectory()) {
+    filePath = join(filePath, 'index.html')
+  }
+
+  const ext = extname(filePath).toLowerCase()
+  const contentType = MIME_TYPES[ext] || 'application/octet-stream'
+
+  try {
+    const content = readFileSync(filePath)
+    res.writeHead(200, { 'Content-Type': contentType })
+    res.end(content)
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      res.writeHead(404)
+      res.end('Not Found')
+    } else {
+      res.writeHead(500)
+      res.end('Server Error')
+    }
+  }
+})
+
+server.listen(port, () => {
+  const url = `http://localhost:${port}`
+  console.log(`
+  ╭─────────────────────────────────────╮
+  │                                     │
+  │   Solid Chat running at:            │
+  │   ${url.padEnd(30)}│
+  │                                     │
+  │   Press Ctrl+C to stop              │
+  │                                     │
+  ╰─────────────────────────────────────╯
+`)
+  open(url)
+})

package/icons/icon.svg

@@ -0,0 +1,22 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea"/>
+      <stop offset="100%" style="stop-color:#9f7aea"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="512" height="512" rx="96" fill="url(#bg)"/>
+
+  <!-- Chat bubble -->
+  <g transform="translate(96, 116)">
+    <rect x="0" y="0" width="320" height="220" rx="40" fill="rgba(255,255,255,0.95)"/>
+    <polygon points="40,220 40,280 100,220" fill="rgba(255,255,255,0.95)"/>
+
+    <!-- Three dots -->
+    <circle cx="100" cy="110" r="24" fill="#667eea"/>
+    <circle cx="160" cy="110" r="24" fill="#7c8fef"/>
+    <circle cx="220" cy="110" r="24" fill="#9f7aea"/>
+  </g>
+</svg>