@devchitchat/chat 0.0.0

package/pages/public/client/shared/messages.js

@@ -0,0 +1,147 @@
+/**
+ * shared/messages.js — shared message rendering utilities.
+ *
+ * Used by: islands/chat.js, islands/call.js
+ */
+
+export function escHtml(str) {
+  return String(str ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+}
+
+export function utcDateKey(tsMs) {
+  const d = new Date(tsMs)
+  return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}-${String(d.getUTCDate()).padStart(2, '0')}`
+}
+
+export function formatDateLabel(dateKey) {
+  const [y, mo, d] = dateKey.split('-').map(Number)
+  const date = new Date(Date.UTC(y, mo - 1, d))
+  const todayKey = utcDateKey(Date.now())
+  const yestKey  = utcDateKey(Date.now() - 86_400_000)
+  if (dateKey === todayKey) return 'Today'
+  if (dateKey === yestKey)  return 'Yesterday'
+  return date.toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric' })
+}
+
+export function makeDateSeparator(dateKey) {
+  const el = document.createElement('div')
+  el.className = 'date-separator'
+  el.dataset.date = dateKey
+  el.innerHTML = `<span class="date-separator-label">${formatDateLabel(dateKey)}</span>`
+  return el
+}
+
+/**
+ * Escape HTML then wrap @handles in <span class="mention"> (or mention-self for current user).
+ * @param {string} text
+ * @param {{ userHandle?: string }} [opts]
+ */
+// Combined regex (operates on raw text before HTML-escaping):
+//   group 1 (+ inner 2, 3) — markdown link: [text](url)
+//   group 4                — bare https?:// URL (excludes []() so it can't swallow a markdown link)
+//   group 5                — @mention
+const INLINE_RE = /(\[([^\]]*)\]\((https?:\/\/[^)]+)\))|(https?:\/\/[^\s<>"'[\]()]+)|(@[a-zA-Z0-9_.-]+)/g
+
+export function renderText(text, { userHandle } = {}) {
+  let result = ''
+  let lastIndex = 0
+  INLINE_RE.lastIndex = 0
+  let m
+  while ((m = INLINE_RE.exec(text)) !== null) {
+    result += escHtml(text.slice(lastIndex, m.index))
+    const [full, , mdText, mdUrl, bareUrl, mention] = m
+    if (mdUrl) {
+      // [link text](https://url)
+      result += `<a href="${escHtml(mdUrl)}" target="_blank" rel="noopener noreferrer">${escHtml(mdText)}</a>`
+    } else if (bareUrl) {
+      const trimmed = bareUrl.replace(/[.,!?;:)]+$/, '')
+      const trailing = bareUrl.slice(trimmed.length)
+      result += `<a href="${escHtml(trimmed)}" target="_blank" rel="noopener noreferrer">${escHtml(trimmed)}</a>${escHtml(trailing)}`
+    } else if (mention) {
+      const handle = mention.slice(1)
+      const isSelf = userHandle && handle.toLowerCase() === userHandle.toLowerCase()
+      result += `<span class="mention${isSelf ? ' mention-self' : ''}">${escHtml(mention)}</span>`
+    }
+    lastIndex = m.index + full.length
+  }
+  result += escHtml(text.slice(lastIndex))
+  return result
+}
+
+/**
+ * Apply inline rendering (URLs, @mentions) to text nodes inside an element,
+ * leaving existing HTML structure (e.g. server-rendered <a> tags) intact.
+ * Used by hydrateSeedMessages so markdown-rendered links are preserved.
+ * @param {Element} el
+ * @param {{ userHandle?: string }} [opts]
+ */
+export function applyInlineRenderingToTextNodes(el, { userHandle } = {}) {
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
+  const nodes = []
+  let n
+  while ((n = walker.nextNode())) {
+    // Skip text nodes already inside an <a> — they are already linked.
+    if (!n.parentElement?.closest('a')) nodes.push(n)
+  }
+  for (const textNode of nodes) {
+    const raw = textNode.textContent
+    if (!raw.trim()) continue
+    const rendered = renderText(raw, { userHandle })
+    if (rendered === escHtml(raw)) continue  // nothing changed
+    const span = document.createElement('span')
+    span.innerHTML = rendered
+    textNode.replaceWith(...span.childNodes)
+  }
+}
+
+export function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1048576).toFixed(1)} MB`
+}
+
+export function renderAttachment(a) {
+  const name = escHtml(a.filename ?? a.original_name ?? 'file')
+  const url  = escHtml(a.url)
+  const mime = a.mime_type ?? ''
+  if (mime.startsWith('image/')) {
+    return `<a class="attachment-image-link" href="${url}" target="_blank" rel="noopener noreferrer">
+        <img class="attachment-image" src="${url}" alt="${name}" loading="lazy">
+      </a>`
+  }
+  const size = a.size_bytes ? ` (${formatBytes(a.size_bytes)})` : ''
+  return `<a class="attachment-file" href="${url}" target="_blank" rel="noopener noreferrer" download>
+      <span class="attachment-file-icon">📎</span>
+      <span class="attachment-file-name">${name}</span>
+      <span class="attachment-file-size">${size}</span>
+    </a>`
+}
+
+/**
+ * Build a <article class="message"> element.
+ * @param {{ msg_id, seq, user_id, user_display_name, ts, text, attachments }} msg
+ * @param {{ userId?: string, userHandle?: string }} [ctx]  — caller's identity, used for self-styling and @mention highlighting
+ */
+export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, text, rendered_text, edited_at, attachments }, { userId, userHandle } = {}) {
+  const article = document.createElement('article')
+  article.className = 'message'
+  article.dataset.seq = seq
+  article.dataset.msgId = msg_id
+  article.dataset.userId = user_id
+  article.dataset.rawText = text ?? ''
+  article.dataset.editedAt = edited_at ?? ''
+  const time = new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  const isSelf = userId != null && user_id === userId
+  const attachmentHtml = (attachments ?? []).map(a => renderAttachment(a)).join('')
+  const editedHtml = edited_at ? '<span class="message-edited">(edited)</span>' : ''
+  const actionsHtml = isSelf ? '<button class="btn-msg-actions btn-icon" type="button" title="Message actions">…</button>' : ''
+  const textHtml = rendered_text ?? (text ? renderText(text, { userHandle }) : '')
+  article.innerHTML = `
+      <span class="message-handle${isSelf ? '' : ' dm-trigger'}" data-user-id="${escHtml(user_id)}" title="${isSelf ? '' : 'Send a direct message'}">${escHtml(user_display_name ?? user_id)}</span>
+      <time class="message-time" datetime="${ts}">${time}${editedHtml}</time>
+      ${textHtml ? `<p class="message-text">${textHtml}</p>` : ''}
+      ${attachmentHtml}
+      ${actionsHtml}
+    `
+  return article
+}

package/pages/public/client/swipe-nav.js

@@ -0,0 +1,98 @@
+/**
+ * swipe-nav.js — horizontal swipe to switch between sidebar and message panel.
+ *
+ * Swipe right on the message panel  → sidebar slides in, message panel slides out.
+ * Swipe left  on the sidebar        → message panel slides in, sidebar slides out.
+ *
+ * Direction is locked after LOCK_PX of movement so vertical scrolling inside
+ * either panel is never interrupted.
+ */
+
+const SWIPE_PX = 50   // minimum horizontal distance to commit a swipe
+const LOCK_PX  = 20   // travel before we decide horizontal vs vertical
+
+function attachSwipe(el, { onLeft, onRight }) {
+  let startX, startY, dir
+  let suppressSwipe = false
+
+  // Set suppressSwipe = true if selection changes during a touch gesture.
+  // This catches long-press → extend-selection-by-dragging in one gesture.
+  function onSelectionChange() {
+    suppressSwipe = true
+  }
+
+  el.addEventListener('touchstart', e => {
+    startX = e.touches[0].clientX
+    startY = e.touches[0].clientY
+    dir = null
+    // Case 1: a Range selection already exists — user is likely dragging a handle.
+    // (Vertical scroll within .messages is guarded by touch-action: pan-y on the element
+    // and direction locking via LOCK_PX, so we no longer suppress swipes from there.)
+    suppressSwipe = window.getSelection()?.type === 'Range'
+    // Case 3: selection might be created during this touch (long-press → drag).
+    if (!suppressSwipe) {
+      document.addEventListener('selectionchange', onSelectionChange)
+    }
+    el.style.transition = 'none'
+  }, { passive: true })
+
+  el.addEventListener('touchmove', e => {
+    if (suppressSwipe) return
+
+    const dx = e.touches[0].clientX - startX
+    const dy = e.touches[0].clientY - startY
+
+    // Lock direction once we know which way the user is moving
+    if (!dir) {
+      if (Math.abs(dx) < LOCK_PX && Math.abs(dy) < LOCK_PX) return
+      dir = Math.abs(dx) > Math.abs(dy) ? 'h' : 'v'
+    }
+
+    if (dir !== 'h') return
+
+    // Only follow the finger in the valid direction for this panel
+    const valid = (dx > 0 && onRight) || (dx < 0 && onLeft)
+    if (!valid) return
+
+    e.preventDefault()
+    el.style.transform = `translateX(${dx}px)`
+  }, { passive: false })
+
+  el.addEventListener('touchend', e => {
+    document.removeEventListener('selectionchange', onSelectionChange)
+
+    // Reset inline styles — CSS transition takes over from here
+    el.style.transition = ''
+    el.style.transform = ''
+
+    if (suppressSwipe || dir !== 'h') { dir = null; return }
+    const dx = e.changedTouches[0].clientX - startX
+    dir = null
+
+    if (dx >= SWIPE_PX && onRight) onRight()
+    else if (dx <= -SWIPE_PX && onLeft) onLeft()
+  }, { passive: true })
+}
+
+export function initSwipeNav() {
+  const mainContent = document.querySelector('.main-content')
+  const sidebar     = document.querySelector('.sidebar')
+  if (!mainContent || !sidebar) return
+
+  import('./settings-sync.js').then(({ patchSettings }) => {
+    const showSidebar = () => {
+      document.body.classList.add('sidebar-open')
+      patchSettings({ mobile_chat_open: false })
+    }
+    const showMessages = () => {
+      document.body.classList.remove('sidebar-open')
+      patchSettings({ mobile_chat_open: true })
+    }
+
+    // Message panel: swipe right → show sidebar
+    attachSwipe(mainContent, { onRight: showSidebar })
+
+    // Sidebar: swipe left → show message panel
+    attachSwipe(sidebar, { onLeft: showMessages })
+  })
+}

package/pages/public/client/theme.js

@@ -0,0 +1,27 @@
+/**
+ * theme.js — applies the saved theme on load and wires the <select> picker.
+ *
+ * Each theme is a separate CSS file in /themes/<name>.css.
+ * The <html data-theme> attribute is set so themes can also use attribute selectors.
+ */
+const THEMES = ['dark', 'light', 'ocean', 'forest', 'rose']
+const STORAGE_KEY = 'devchitchat_theme'
+const BASE_PATH = window.__BASE_PATH__ ?? ''
+const stylesheet = document.getElementById('theme-stylesheet')
+const picker = document.getElementById('theme-picker')
+
+function applyTheme(name) {
+  const theme = THEMES.includes(name) ? name : 'dark'
+  document.documentElement.dataset.theme = theme
+  if (stylesheet) stylesheet.href = `${BASE_PATH}/themes/${theme}.css`
+  if (picker) picker.value = theme
+  localStorage.setItem(STORAGE_KEY, theme)
+}
+
+// Restore saved theme immediately (before paint)
+applyTheme(localStorage.getItem(STORAGE_KEY) ?? 'dark')
+
+// Wire picker
+if (picker) {
+  picker.addEventListener('change', (e) => applyTheme(e.target.value))
+}

package/pages/public/client/ws.js

@@ -0,0 +1,71 @@
+/**
+ * WsClient — WebSocket wrapper with auto-reconnect (exponential backoff).
+ *
+ * Usage:
+ *   const ws = new WsClient('/ws')
+ *   ws.on('msg.event', (body) => { ... })
+ *   ws.send({ t: 'hello', ... })
+ */
+export class WsClient extends EventTarget {
+  #url
+  #ws = null
+  #reconnectDelay = 1000
+  #maxDelay = 10000
+  #msgId = 0
+  #pending = []   // queued while disconnected
+
+  constructor(path = '/ws') {
+    super()
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'
+    this.#url = `${proto}//${location.host}${path}`
+    this.#connect()
+  }
+
+  #connect() {
+    this.#ws = new WebSocket(this.#url)
+
+    this.#ws.onopen = () => {
+      this.#reconnectDelay = 1000
+      this.dispatchEvent(new Event('open'))
+      for (const msg of this.#pending) this.#ws.send(JSON.stringify(msg))
+      this.#pending = []
+    }
+
+    this.#ws.onmessage = ({ data }) => {
+      let msg
+      try { msg = JSON.parse(data) } catch { return }
+      this.dispatchEvent(Object.assign(new Event(msg.t), { msg }))
+      this.dispatchEvent(Object.assign(new Event('*'), { msg }))
+    }
+
+    this.#ws.onclose = () => {
+      this.dispatchEvent(new Event('close'))
+      setTimeout(() => this.#connect(), this.#reconnectDelay)
+      this.#reconnectDelay = Math.min(this.#reconnectDelay * 2, this.#maxDelay)
+    }
+
+    this.#ws.onerror = () => { /* onclose fires after */ }
+  }
+
+  send(payload) {
+    const msg = { v: 1, id: `c_${++this.#msgId}`, ts: Date.now(), ...payload }
+    if (this.#ws?.readyState === WebSocket.OPEN) {
+      this.#ws.send(JSON.stringify(msg))
+    } else {
+      this.#pending.push(msg)
+    }
+    return msg.id
+  }
+
+  on(type, handler) {
+    this.addEventListener(type, (e) => handler(e.msg?.body ?? e.msg, e.msg))
+    return this
+  }
+
+  once(type, handler) {
+    this.addEventListener(type, (e) => handler(e.msg?.body ?? e.msg, e.msg), { once: true })
+    return this
+  }
+
+  get ready() { return this.#ws?.readyState === WebSocket.OPEN }
+}

package/pages/public/manifest.json

@@ -0,0 +1,11 @@
+{
+  "name": "devchitchat",
+  "short_name": "devchitchat",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1a1b1e",
+  "theme_color": "#141517",
+  "icons": [
+    { "src": "/icon.png", "sizes": "300x300", "type": "image/png", "purpose": "any maskable" }
+  ]
+}

package/pages/public/sw.js

@@ -0,0 +1,38 @@
+/**
+ * Service worker for Web Push notifications.
+ * Served at BASE_PATH/sw.js via a custom route in index.js.
+ * Registered with scope BASE_PATH/ so it covers all app pages.
+ */
+
+self.addEventListener('push', event => {
+  let data = {}
+  try { data = event.data?.json() ?? {} } catch { /* ignore malformed payloads */ }
+
+  // Use the registered scope as the default notification URL so it works at any BASE_PATH
+  const defaultUrl = self.registration.scope
+
+  event.waitUntil(
+    self.registration.showNotification(data.title ?? 'chat', {
+      body:  data.body  ?? '',
+      icon:  './favicon.png',
+      badge: './favicon.png',
+      tag:   data.channel_id ?? 'chat', // collapse multiple from the same channel
+      data:  { url: data.url ?? defaultUrl },
+    })
+  )
+})
+
+self.addEventListener('notificationclick', event => {
+  event.notification.close()
+  const url = event.notification.data?.url ?? self.registration.scope
+  event.waitUntil(
+    clients.matchAll({ type: 'window', includeUncontrolled: true }).then(windowClients => {
+      // Focus an existing tab if one is open at the target URL
+      for (const client of windowClients) {
+        if (client.url === url && 'focus' in client) return client.focus()
+      }
+      // Otherwise open a new tab
+      if (clients.openWindow) return clients.openWindow(url)
+    })
+  )
+})