Add initial implementation of Matrix chat widget with Flask blueprint
- Create .gitignore to exclude Python-related files - Implement chat blueprint in __init__.py - Add chat HTML template with input and message display - Create CSS for chat styling - Develop JavaScript for chat functionality and Matrix API integration - Configure pyproject.toml for project metadata and dependencies
This commit is contained in:
ryan
@@ -0,0 +1,144 @@
|
||||
#matrix-chat-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 120px);
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.matrix-status {
|
||||
font-size: 0.875rem;
|
||||
color: #aaa;
|
||||
min-height: 1.25rem;
|
||||
}
|
||||
|
||||
.matrix-status-error {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
/* ── Message list ───────────────────────────────────────────────────────── */
|
||||
|
||||
.matrix-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.matrix-message {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: nowrap;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.matrix-sender {
|
||||
font-weight: 600;
|
||||
color: #7ecfff;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.matrix-sender::after {
|
||||
content: ':';
|
||||
}
|
||||
|
||||
.matrix-body {
|
||||
color: #ddd;
|
||||
word-break: break-word;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.matrix-time {
|
||||
font-size: 0.72rem;
|
||||
color: #555;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-end;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
/* ── Input bar ──────────────────────────────────────────────────────────── */
|
||||
|
||||
.matrix-input-bar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.matrix-input {
|
||||
flex: 1;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 6px;
|
||||
color: #ddd;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.matrix-input:focus {
|
||||
border-color: rgba(126, 207, 255, 0.4);
|
||||
}
|
||||
|
||||
.matrix-input::placeholder {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.matrix-send-btn {
|
||||
background: rgba(126, 207, 255, 0.12);
|
||||
border: 1px solid rgba(126, 207, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
color: #7ecfff;
|
||||
padding: 0.5rem 1.25rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.matrix-send-btn:hover {
|
||||
background: rgba(126, 207, 255, 0.22);
|
||||
border-color: rgba(126, 207, 255, 0.5);
|
||||
}
|
||||
|
||||
.matrix-send-btn:active {
|
||||
background: rgba(126, 207, 255, 0.3);
|
||||
}
|
||||
|
||||
/* ── Light theme fallback (when host app uses a light base) ─────────────── */
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.matrix-messages {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.matrix-sender { color: #1a6fa8; }
|
||||
.matrix-body { color: #222; }
|
||||
.matrix-time { color: #aaa; }
|
||||
.matrix-input {
|
||||
background: #fff;
|
||||
border-color: #ccc;
|
||||
color: #222;
|
||||
}
|
||||
.matrix-input:focus { border-color: #1a6fa8; }
|
||||
.matrix-input::placeholder { color: #aaa; }
|
||||
.matrix-send-btn {
|
||||
background: rgba(26, 111, 168, 0.1);
|
||||
border-color: rgba(26, 111, 168, 0.4);
|
||||
color: #1a6fa8;
|
||||
}
|
||||
.matrix-send-btn:hover {
|
||||
background: rgba(26, 111, 168, 0.18);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,311 @@
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const root = document.getElementById('matrix-chat-root');
|
||||
const SERVER = (root.dataset.matrixServer || '').replace(/\/$/, '');
|
||||
const ROOM_ALIAS = root.dataset.matrixRoom || '';
|
||||
const CREDS_KEY = 'matrix_chat_creds_' + SERVER;
|
||||
|
||||
let accessToken = null;
|
||||
let userId = null;
|
||||
let roomId = null;
|
||||
let syncToken = null;
|
||||
let syncActive = false;
|
||||
let txnCounter = 0;
|
||||
|
||||
const messagesEl = document.getElementById('matrix-messages');
|
||||
const statusEl = document.getElementById('matrix-chat-status');
|
||||
const inputEl = document.getElementById('matrix-input');
|
||||
const sendBtn = document.getElementById('matrix-send');
|
||||
|
||||
// ── Utilities ────────────────────────────────────────────────────────────
|
||||
|
||||
function escapeHtml(str) {
|
||||
return String(str)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
function setStatus(msg, isError) {
|
||||
statusEl.textContent = msg;
|
||||
statusEl.className = 'matrix-status' + (isError ? ' matrix-status-error' : '');
|
||||
}
|
||||
|
||||
function clearStatus() {
|
||||
statusEl.textContent = '';
|
||||
statusEl.className = 'matrix-status';
|
||||
}
|
||||
|
||||
function senderLocalpart(mxid) {
|
||||
const m = String(mxid).match(/^@([^:]+):/);
|
||||
return m ? m[1] : mxid;
|
||||
}
|
||||
|
||||
function formatTime(ts) {
|
||||
if (!ts) return '';
|
||||
return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
// ── Credentials ──────────────────────────────────────────────────────────
|
||||
|
||||
function loadCreds() {
|
||||
try {
|
||||
const stored = JSON.parse(localStorage.getItem(CREDS_KEY) || 'null');
|
||||
if (stored && stored.access_token) {
|
||||
accessToken = stored.access_token;
|
||||
userId = stored.user_id;
|
||||
return true;
|
||||
}
|
||||
} catch (_) {}
|
||||
return false;
|
||||
}
|
||||
|
||||
function saveCreds() {
|
||||
localStorage.setItem(CREDS_KEY, JSON.stringify({
|
||||
access_token: accessToken,
|
||||
user_id: userId,
|
||||
}));
|
||||
}
|
||||
|
||||
function clearCreds() {
|
||||
localStorage.removeItem(CREDS_KEY);
|
||||
accessToken = null;
|
||||
userId = null;
|
||||
}
|
||||
|
||||
// ── Matrix API ───────────────────────────────────────────────────────────
|
||||
|
||||
async function matrixFetch(method, path, body, params) {
|
||||
const url = new URL(SERVER + path);
|
||||
if (params) {
|
||||
for (const [k, v] of Object.entries(params)) url.searchParams.set(k, String(v));
|
||||
}
|
||||
const opts = {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
};
|
||||
if (accessToken) opts.headers['Authorization'] = 'Bearer ' + accessToken;
|
||||
if (body !== null && body !== undefined) opts.body = JSON.stringify(body);
|
||||
|
||||
const resp = await fetch(url.toString(), opts);
|
||||
|
||||
if (resp.status === 401) {
|
||||
clearCreds();
|
||||
beginSSO();
|
||||
throw new Error('Session expired — redirecting to login');
|
||||
}
|
||||
|
||||
const data = await resp.json();
|
||||
if (!resp.ok) throw new Error(data.error || 'HTTP ' + resp.status);
|
||||
return data;
|
||||
}
|
||||
|
||||
// ── Auth ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function beginSSO() {
|
||||
// Strip any existing query string so we get a clean callback URL
|
||||
const redirectUrl = window.location.origin + window.location.pathname;
|
||||
window.location.href =
|
||||
SERVER + '/_matrix/client/v3/login/sso/redirect?redirectUrl=' +
|
||||
encodeURIComponent(redirectUrl);
|
||||
}
|
||||
|
||||
async function exchangeLoginToken(token) {
|
||||
setStatus('Authenticating…');
|
||||
const data = await matrixFetch('POST', '/_matrix/client/v3/login', {
|
||||
type: 'm.login.token',
|
||||
token,
|
||||
initial_device_display_name: 'Sticknife Library Chat',
|
||||
});
|
||||
accessToken = data.access_token;
|
||||
userId = data.user_id;
|
||||
saveCreds();
|
||||
// Remove loginToken from the URL without triggering a reload
|
||||
window.history.replaceState({}, '', window.location.pathname);
|
||||
}
|
||||
|
||||
// ── Room ─────────────────────────────────────────────────────────────────
|
||||
|
||||
async function resolveRoom() {
|
||||
const data = await matrixFetch(
|
||||
'GET',
|
||||
'/_matrix/client/v3/directory/room/' + encodeURIComponent(ROOM_ALIAS),
|
||||
);
|
||||
roomId = data.room_id;
|
||||
}
|
||||
|
||||
async function joinRoom() {
|
||||
try {
|
||||
await matrixFetch('POST', '/_matrix/client/v3/join/' + encodeURIComponent(roomId), {});
|
||||
} catch (_) {
|
||||
// Already joined is fine; any real error surfaces during sync
|
||||
}
|
||||
}
|
||||
|
||||
// ── Rendering ────────────────────────────────────────────────────────────
|
||||
|
||||
function renderEvent(event) {
|
||||
if (event.type !== 'm.room.message') return;
|
||||
if (!event.content || event.content.msgtype !== 'm.text') return;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'matrix-message';
|
||||
el.innerHTML =
|
||||
'<span class="matrix-sender">' + escapeHtml(senderLocalpart(event.sender)) + '</span>' +
|
||||
'<span class="matrix-body">' + escapeHtml(event.content.body) + '</span>' +
|
||||
'<span class="matrix-time">' + escapeHtml(formatTime(event.origin_server_ts)) + '</span>';
|
||||
messagesEl.appendChild(el);
|
||||
}
|
||||
|
||||
function isScrolledToBottom() {
|
||||
return messagesEl.scrollHeight - messagesEl.scrollTop <= messagesEl.clientHeight + 60;
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
}
|
||||
|
||||
async function loadHistory() {
|
||||
const data = await matrixFetch(
|
||||
'GET',
|
||||
'/_matrix/client/v3/rooms/' + encodeURIComponent(roomId) + '/messages',
|
||||
null,
|
||||
{ dir: 'b', limit: '50' },
|
||||
);
|
||||
// /messages?dir=b returns newest-first; reverse for chronological display
|
||||
const events = (data.chunk || []).reverse();
|
||||
for (const ev of events) renderEvent(ev);
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
// ── Send ─────────────────────────────────────────────────────────────────
|
||||
|
||||
async function sendMessage() {
|
||||
const text = inputEl.value.trim();
|
||||
if (!text || !roomId) return;
|
||||
inputEl.value = '';
|
||||
|
||||
const txnId = Date.now() + '_' + (txnCounter++);
|
||||
try {
|
||||
await matrixFetch(
|
||||
'PUT',
|
||||
'/_matrix/client/v3/rooms/' + encodeURIComponent(roomId) +
|
||||
'/send/m.room.message/' + txnId,
|
||||
{ msgtype: 'm.text', body: text },
|
||||
);
|
||||
} catch (e) {
|
||||
setStatus('Send failed: ' + e.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Sync loop ────────────────────────────────────────────────────────────
|
||||
|
||||
// Minimal filter: only timeline events from our room, no state/presence/account noise
|
||||
const SYNC_FILTER = JSON.stringify({
|
||||
room: {
|
||||
rooms: [], // filled in after room resolution
|
||||
timeline: { limit: 20 },
|
||||
state: { not_types: ['*'] },
|
||||
ephemeral: { not_types: ['*'] },
|
||||
},
|
||||
presence: { not_types: ['*'] },
|
||||
account_data: { not_types: ['*'] },
|
||||
});
|
||||
|
||||
async function syncLoop() {
|
||||
syncActive = true;
|
||||
|
||||
// Build a filter scoped to our single room
|
||||
const filter = JSON.stringify({
|
||||
room: {
|
||||
rooms: [roomId],
|
||||
timeline: { limit: 20 },
|
||||
state: { not_types: ['*'] },
|
||||
ephemeral: { not_types: ['*'] },
|
||||
},
|
||||
presence: { not_types: ['*'] },
|
||||
account_data: { not_types: ['*'] },
|
||||
});
|
||||
|
||||
while (syncActive) {
|
||||
try {
|
||||
const params = { filter, timeout: '30000' };
|
||||
if (syncToken) params.since = syncToken;
|
||||
|
||||
const data = await matrixFetch('GET', '/_matrix/client/v3/sync', null, params);
|
||||
if (!syncActive) break;
|
||||
|
||||
syncToken = data.next_batch;
|
||||
|
||||
const roomTimeline =
|
||||
data.rooms &&
|
||||
data.rooms.join &&
|
||||
data.rooms.join[roomId] &&
|
||||
data.rooms.join[roomId].timeline;
|
||||
|
||||
if (roomTimeline && roomTimeline.events && roomTimeline.events.length) {
|
||||
const atBottom = isScrolledToBottom();
|
||||
for (const ev of roomTimeline.events) renderEvent(ev);
|
||||
if (atBottom) scrollToBottom();
|
||||
}
|
||||
} catch (e) {
|
||||
if (!syncActive) break;
|
||||
// Back off before retrying to avoid hammering on persistent errors
|
||||
await new Promise(r => setTimeout(r, 5000));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Entry point ──────────────────────────────────────────────────────────
|
||||
|
||||
async function init() {
|
||||
if (!SERVER) { setStatus('MATRIX_SERVER_URL is not configured.', true); return; }
|
||||
if (!ROOM_ALIAS) { setStatus('MATRIX_ROOM_ALIAS is not configured.', true); return; }
|
||||
|
||||
// Handle SSO callback: Matrix redirects back here with ?loginToken=<token>
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const loginToken = urlParams.get('loginToken');
|
||||
|
||||
if (loginToken) {
|
||||
try {
|
||||
await exchangeLoginToken(loginToken);
|
||||
} catch (e) {
|
||||
setStatus('Login failed: ' + e.message, true);
|
||||
return;
|
||||
}
|
||||
} else if (!loadCreds()) {
|
||||
beginSSO();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setStatus('Connecting…');
|
||||
await resolveRoom();
|
||||
await joinRoom();
|
||||
await loadHistory();
|
||||
clearStatus();
|
||||
} catch (e) {
|
||||
setStatus('Connection error: ' + e.message, true);
|
||||
return;
|
||||
}
|
||||
|
||||
syncLoop();
|
||||
}
|
||||
|
||||
// ── Event listeners ──────────────────────────────────────────────────────
|
||||
|
||||
sendBtn.addEventListener('click', sendMessage);
|
||||
inputEl.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
window.addEventListener('beforeunload', function () {
|
||||
syncActive = false;
|
||||
});
|
||||
|
||||
init();
|
||||
})();
|
||||
Reference in New Issue
Block a user