xK/xP/public/xP.js

// Copyright (c) 2022, Přemysl Eric Janouch <p@janouch.name>
// SPDX-License-Identifier: 0BSD
'use strict'

// ---- RPC --------------------------------------------------------------------

class RelayRpc extends EventTarget {
	constructor(url) {
		super()
		this.url = url
		this.commandSeq = 0
	}

	connect() {
		// We can't close the connection immediately, as that queues a task.
		if (this.ws !== undefined)
			throw "Already connecting or connected"

		return new Promise((resolve, reject) => {
			let ws = this.ws = new WebSocket(this.url)
			ws.onopen = event => {
				this._initialize()
				resolve()
			}
			// It's going to be code 1006 with no further info.
			ws.onclose = event => {
				this.ws = undefined
				reject()
			}
		})
	}

	_initialize() {
		this.ws.onopen = undefined
		this.ws.onmessage = event => {
			this._process(event.data)
		}
		this.ws.onerror = event => {
			this.dispatchEvent(new CustomEvent('error'))
		}
		this.ws.onclose = event => {
			let message = "Connection closed: " +
				event.code + " (" + event.reason + ")"
			for (const seq in this.promised)
				this.promised[seq].reject(message)

			this.ws = undefined
			this.dispatchEvent(new CustomEvent('close', {
				detail: {message, code: event.code, reason: event.reason},
			}))

			// Now connect() can be called again.
		}

		this.promised = {}
	}

	_process(data) {
		console.log(data)

		if (typeof data !== 'string')
			throw "Binary messages not supported"

		let message = JSON.parse(data)
		if (typeof message !== 'object')
			throw "Invalid message"
		let e = message.data
		if (typeof e !== 'object')
			throw "Invalid message"

		switch (e.event) {
		case 'Error':
			if (this.promised[e.commandSeq] !== undefined)
				this.promised[e.commandSeq].reject(e.error)
			else
				console.error("Unawaited error")
			break
		case 'Response':
			if (this.promised[e.commandSeq] !== undefined)
				this.promised[e.commandSeq].resolve(e.data)
			else
				console.error("Unawaited response")
			break
		default:
			if (typeof e.event !== 'string')
				throw "Invalid event tag"

			this.dispatchEvent(new CustomEvent(
				e.event, {detail: {eventSeq: message.eventSeq, ...e}}))

			// Minor abstraction layering violation.
			m.redraw()
			return
		}

		delete this.promised[e.commandSeq]
		for (const seq in this.promised) {
			// We don't particularly care about wraparound issues.
			if (seq >= e.commandSeq)
				continue

			this.promised[seq].reject("No response")
			delete this.promised[seq]
		}
	}

	send(params) {
		if (this.ws === undefined)
			throw "Not connected"
		if (typeof params !== 'object')
			throw "Method parameters must be an object"

		let seq = ++this.commandSeq
		if (seq >= 1 << 32)
			seq = this.commandSeq = 0

		this.ws.send(JSON.stringify({commandSeq: seq, data: params}))
		return new Promise((resolve, reject) => {
			this.promised[seq] = {resolve, reject}
		})
	}

	base64decode(str) {
		return decodeURIComponent(atob(str).split('').map(c =>
			'%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''))
	}
}

// ---- Event processing -------------------------------------------------------

let rpc = new RelayRpc(proxy)

let buffers = new Map()
let bufferCurrent = undefined
let bufferLog = undefined
let bufferAutoscroll = true

let connecting = true
rpc.connect().then(result => {
	buffers.clear()
	bufferCurrent = undefined
	bufferLog = undefined
	bufferAutoscroll = true

	rpc.send({command: 'Hello', version: 1})
	connecting = false
	m.redraw()
}).catch(error => {
	connecting = false
	m.redraw()
})

rpc.addEventListener('close', event => {
	m.redraw()
})

rpc.addEventListener('Ping', event => {
	rpc.send({command: 'PingResponse', eventSeq: event.detail.eventSeq})
})

rpc.addEventListener('BufferUpdate', event => {
	let e = event.detail, b = buffers.get(e.bufferName)
	if (b === undefined) {
		buffers.set(e.bufferName, {
			lines: [],
			newMessages: e.newMessages,
			newUnimportantMessages: e.newUnimportantMessages,
			highlighted: e.highlighted,
		})
	}
})

rpc.addEventListener('BufferRename', event => {
	let e = event.detail
	buffers.set(e.new, buffers.get(e.bufferName))
	buffers.delete(e.bufferName)
})

rpc.addEventListener('BufferRemove', event => {
	let e = event.detail
	buffers.delete(e.bufferName)
})

rpc.addEventListener('BufferActivate', event => {
	let old = buffers.get(bufferCurrent)
	if (old !== undefined) {
		old.newMessages = 0
		old.newUnimportantMessages = 0
		old.highlighted = false
	}

	let e = event.detail, b = buffers.get(e.bufferName)
	bufferCurrent = e.bufferName
	bufferLog = undefined
	bufferAutoscroll = true

	let textarea = document.getElementById('input')
	if (textarea === null)
		return

	textarea.focus()
	if (old !== undefined)
		old.input = textarea.value

	if (b !== undefined)
		textarea.value = b.input || ''
	else
		textarea.value = ''
})

rpc.addEventListener('BufferLine', event => {
	let e = event.detail, b = buffers.get(e.bufferName), line = {...e}
	delete line.event
	delete line.leakToActive
	if (b === undefined)
		return

	// Initial sync: skip all other processing, let highlights be.
	if (bufferCurrent === undefined) {
		b.lines.push(line)
		return
	}

	let visible = e.bufferName == bufferCurrent || e.leakToActive
	b.lines.push({...line})
	if (!visible || b.newMessages || b.newUnimportantMessages) {
		if (line.isUnimportant)
			b.newUnimportantMessages++
		else
			b.newMessages++
	}
	if (e.leakToActive) {
		let bc = buffers.get(bufferCurrent)
		bc.lines.push({...line, leaked: true})
		if (bc.newMessages || bc.newUnimportantMessages) {
			if (line.isUnimportant)
				bc.newUnimportantMessages++
			else
				bc.newMessages++
		}
	}

	// TODO: Find some way of highlighting the tab in a browser.
	// TODO: Also highlight on unseen private messages, like xC does.
	if (!visible && line.isHighlight)
		b.highlighted = true
})

rpc.addEventListener('BufferClear', event => {
	let e = event.detail, b = buffers.get(e.bufferName)
	if (b !== undefined)
		b.lines.length = 0
})

// --- Colours -----------------------------------------------------------------

let palette = [
	'#000', '#800', '#080', '#880', '#008', '#808', '#088', '#ccc',
	'#888', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff',
]
palette.length = 256
for (let i = 0; i < 216; i++) {
	let r = i / 36 >> 0, g = (i / 6 >> 0) % 6, b = i % 6
	r = !r ? '00' : (55 + 40 * r).toString(16)
	g = !g ? '00' : (55 + 40 * g).toString(16)
	b = !b ? '00' : (55 + 40 * b).toString(16)
	palette[16 + i] = `#${r}${g}${b}`
}
for (let i = 0; i < 24; i++) {
	let g = ('0' + (8 + i * 10).toString(16)).slice(-2)
	palette[232 + i] = `#${g}${g}${g}`
}

// ---- UI ---------------------------------------------------------------------

let Toolbar = {
	toggleAutoscroll: () => {
		bufferAutoscroll = !bufferAutoscroll
	},

	toggleLog: () => {
		if (bufferLog) {
			bufferLog = undefined
			return
		}

		rpc.send({
			command: 'BufferLog',
			bufferName: bufferCurrent,
		}).then(resp => {
			bufferLog = rpc.base64decode(resp.log)
			m.redraw()
		})
	},

	view: vnode => {
		return m('.toolbar', {}, [
			m('button', {onclick: Toolbar.toggleAutoscroll},
				bufferAutoscroll ? 'Scroll lock' : 'Scroll unlock'),
			m('button', {onclick: Toolbar.toggleLog},
				bufferLog === undefined ? 'Show log' : 'Hide log'),
		])
	},
}

let BufferList = {
	activate: name => {
		rpc.send({command: 'BufferActivate', bufferName: name})
	},

	view: vnode => {
		let items = Array.from(buffers, ([name, b]) => {
			let classes = [], displayName = name
			if (name == bufferCurrent) {
				classes.push('current')
			} else {
				if (b.highlighted)
					classes.push('highlighted')
				if (b.newMessages) {
					classes.push('activity')
					displayName += ` (${b.newMessages})`
				}
			}
			return m('.item', {
				onclick: event => BufferList.activate(name),
				class: classes.join(' '),
			}, displayName)
		})
		return m('.list', {}, items)
	},
}

let Content = {
	applyColor: (fg, bg, inverse) => {
		if (inverse)
			[fg, bg] = [bg >= 0 ? bg : 15, fg >= 0 ? fg : 0]

		let style = {}
		if (fg >= 0)
			style.color = palette[fg]
		if (bg >= 0)
			style.backgroundColor = palette[bg]
		if (style)
			return style
	},

	linkify: (text, attrs) => {
		let re = new RegExp([
			/https?:\/\//,
			/([^\[\](){}<>"'\s]|\([^\[\](){}<>"'\s]*\))+/,
			/[^\[\](){}<>"'\s,.:]/,
		].map(r => r.source).join(''), 'g')

		let a = [], end = 0, match
		while ((match = re.exec(text)) !== null) {
			if (end < match.index)
				a.push(m('span', attrs, text.substring(end, match.index)))
			a.push(m('a', {href: match[0], ...attrs}, match[0]))
			end = re.lastIndex
		}
		if (end < text.length)
			a.push(m('span', attrs, text.substring(end)))
		return a
	},

	view: vnode => {
		let line = vnode.children[0]
		let mark = undefined
		switch (line.rendition) {
		case 'Indent': mark = m('span.mark',        {}, '');  break
		case 'Status': mark = m('span.mark',        {}, '–'); break
		case 'Error':  mark = m('span.mark.error',  {}, '⚠'); break
		case 'Join':   mark = m('span.mark.join',   {}, '→'); break
		case 'Part':   mark = m('span.mark.part',   {}, '←'); break
		case 'Action': mark = m('span.mark.action', {}, '✶'); break
		}

		let classes = new Set()
		let flip = c => {
			if (classes.has(c))
				classes.delete(c)
			else
				classes.add(c)
		}
		let fg = -1, bg = -1, inverse = false
		return m('.content', vnode.attrs, [mark, line.items.flatMap(item => {
			switch (item.kind) {
			case 'Text':
				return Content.linkify(item.text, {
					class: Array.from(classes.keys()).join(' '),
					style: Content.applyColor(fg, bg, inverse),
				})
			case 'Reset':
				classes.clear()
				fg = bg = -1
				inverse = false
				break
			case 'FgColor':
				fg = item.color
				break
			case 'BgColor':
				bg = item.color
				break
			case 'FlipInverse':
				inverse = !inverse
				break
			case 'FlipBold':
				flip('b')
				break
			case 'FlipItalic':
				flip('i')
				break
			case 'FlipUnderline':
				flip('u')
				break
			case 'FlipCrossedOut':
				flip('s')
				break
			case 'FlipMonospace':
				flip('m')
				break
			}
		})])
	},
}

let Buffer = {
	oncreate: vnode => {
		if (vnode.dom !== undefined && bufferAutoscroll)
			vnode.dom.scrollTop = vnode.dom.scrollHeight
	},

	onupdate: vnode => {
		Buffer.oncreate(vnode)
	},

	view: vnode => {
		let lines = []
		let b = buffers.get(bufferCurrent)
		if (b === undefined)
			return

		let lastDateMark = undefined
		let markBefore = b.lines.length
			- b.newMessages - b.newUnimportantMessages
		b.lines.forEach((line, i) => {
			let date = new Date(line.when)
			let dateMark = date.toLocaleDateString()
			if (dateMark !== lastDateMark) {
				lines.push(m('.date', {}, dateMark))
				lastDateMark = dateMark
			}

			if (i == markBefore)
				lines.push(m('.unread'))

			let attrs = {}
			if (line.leaked)
				attrs.class = 'leaked'

			// TODO: Make use of isUnimportant.
			lines.push(m('.time', {...attrs}, date.toLocaleTimeString()))
			lines.push(m(Content, {...attrs}, line))
		})

		let dateMark = new Date().toLocaleDateString()
		if (dateMark !== lastDateMark && lastDateMark !== undefined)
			lines.push(m('.date', {}, dateMark))
		return m('.buffer', {}, lines)
	},
}

let Log = {
	oncreate: vnode => {
		if (vnode.dom !== undefined)
			vnode.dom.scrollTop = vnode.dom.scrollHeight
	},

	view: vnode => {
		return m(".log", {}, bufferLog)
	},
}

let BufferContainer = {
	view: vnode => {
		return m('.buffer-container', {}, [
			m('.filler'),
			bufferLog !== undefined ? m(Log) : m(Buffer),
		])
	},
}

let Input = {
	counter: 0,
	stamp: textarea => {
		return [Input.counter,
			textarea.selectionStart, textarea.selectionEnd, textarea.value]
	},

	complete: textarea => {
		if (textarea.selectionStart !== textarea.selectionEnd)
			return false

		// Cancel any previous autocomplete, and ensure applicability.
		Input.counter++
		let state = Input.stamp(textarea)
		rpc.send({
			command: 'BufferComplete',
			bufferName: bufferCurrent,
			text: textarea.value,
			position: textarea.selectionEnd,
		}).then(resp => {
			if (!Input.stamp(textarea).every((v, k) => v === state[k]))
				return

			// TODO: Somehow display remaining options, or cycle through.
			if (resp.completions.length)
				textarea.setRangeText(resp.completions[0],
					resp.start, textarea.selectionEnd, 'end')
			if (resp.completions.length === 1)
				textarea.setRangeText(' ',
					textarea.selectionStart, textarea.selectionEnd, 'end')
		})
		return true
	},

	submit: textarea => {
		rpc.send({
			command: 'BufferInput',
			bufferName: bufferCurrent,
			text: textarea.value,
		})
		textarea.value = ''
		return true
	},

	onKeyDown: event => {
		// TODO: And perhaps on other actions, too.
		rpc.send({command: 'Active'})

		let textarea = event.currentTarget
		let handled = false
		switch (event.keyCode) {
		case 9:
			if (!event.shiftKey)
				handled = Input.complete(textarea)
			break
		case 13:
			if (!event.shiftKey)
				handled = Input.submit(textarea)
			break
		}
		if (handled)
			event.preventDefault()
	},

	view: vnode => {
		return m('textarea#input', {rows: 1, onkeydown: Input.onKeyDown})
	},
}

let Main = {
	view: vnode => {
		let state = "Connected"
		if (connecting)
			state = "Connecting..."
		else if (rpc.ws === undefined)
			state = "Disconnected"

		return m('.xP', {}, [
			m('.title', {}, [`xP (${state})`, m(Toolbar)]),
			m('.middle', {}, [m(BufferList), m(BufferContainer)]),
			m('.status', {}, bufferCurrent),
			m(Input),
		])
	},
}

window.addEventListener('load', () => m.mount(document.body, Main))