908d16bfc3
New rss bot type: on start it creates a broadcast channel (observer group with recent history on) and polls a configured feed URL; new posts are broadcast to the channel. Subscribers join the channel link (seen on the bot's profile); direct contacts get a welcome + the latest items and can send /new for the latest. Stdlib-only feed parsing (urllib + ElementTree), seeds existing items on startup so it doesn't replay the whole feed. Config: feed_url, poll_seconds. Adds rss_test.py (mock feed) — passes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
391 lines
18 KiB
HTML
391 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ 'Business Groups' if tab == 'businesses' else tab | title }} — SimpleX Manager{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.empty-state { text-align: center; padding: 56px 24px; color: var(--muted); }
|
|
.empty-state p { margin-top: 8px; font-size: 13px; }
|
|
|
|
.profile-card { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
|
|
border: 1px solid transparent; }
|
|
.profile-card:hover { border-color: var(--accent); }
|
|
.profile-card:active { transform: translateY(1px); }
|
|
|
|
.addr-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
|
|
.addr-link { flex: 1; min-width: 0; color: var(--muted); font-family: monospace; font-size: 12px;
|
|
text-decoration: none; word-break: break-all; }
|
|
.addr-link:hover { color: var(--accent); text-decoration: underline; }
|
|
.copy-btn { flex-shrink: 0; padding: 4px 9px; font-size: 13px; line-height: 1; }
|
|
|
|
.bot-types-card table td { vertical-align: top; }
|
|
.bot-types-card .tag { white-space: nowrap; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{% set new_label = 'User' if tab == 'users' else ('Business Group' if tab == 'businesses' else 'Bot') %}
|
|
{% set page_title = 'Business Groups' if tab == 'businesses' else tab | title %}
|
|
<div class="flex-between" style="margin-bottom: 24px;">
|
|
<h1 style="margin:0;">{{ page_title }}</h1>
|
|
<button class="btn btn-primary" onclick="openCreate()">
|
|
+ New {{ new_label }}
|
|
</button>
|
|
</div>
|
|
|
|
{% if tab == 'businesses' %}
|
|
<div class="card bot-types-card" style="margin-bottom:24px;">
|
|
<h2 style="font-size:15px;margin-bottom:8px;">Business Groups</h2>
|
|
<p class="muted" style="font-size:13px;">
|
|
A business group uses a <strong>business address</strong>: each customer who connects gets
|
|
their own group chat (so teammates can be added). You handle those conversations here, the same
|
|
way you chat in a group. Set an optional welcome message to auto-greet new customers.
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if tab == 'bots' %}
|
|
<div class="card bot-types-card" style="margin-bottom:24px;">
|
|
<h2 style="font-size:15px;margin-bottom:12px;">Available bot types</h2>
|
|
<table>
|
|
<tr><td><span class="tag">echo</span></td><td class="muted">Repeats every message back to the sender — handy for testing a connection end to end.</td></tr>
|
|
<tr><td><span class="tag">llm</span></td><td class="muted">Chat with a local or remote LLM (OpenAI-compatible, e.g. Ollama). Give it context, it replies to your messages.</td></tr>
|
|
<tr><td><span class="tag">rss</span></td><td class="muted">Watches an RSS/Atom feed and broadcasts new posts to a channel it creates. Subscribers join the channel; send /new for the latest.</td></tr>
|
|
<tr><td><span class="tag">broadcast</span></td><td class="muted">Relays messages from authorized publishers out to all of the bot's contacts.</td></tr>
|
|
<tr><td><span class="tag">support</span></td><td class="muted">Business inbox — auto-replies with a welcome message and collects incoming inquiries.</td></tr>
|
|
<tr><td><span class="tag">directory</span></td><td class="muted">Directory service for discovering and listing groups or contacts.</td></tr>
|
|
<tr><td><span class="tag">deadmans</span></td><td class="muted">Dead man's switch — triggers an action if expected check-ins stop arriving.</td></tr>
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if items %}
|
|
{% for p in items %}
|
|
<div class="card profile-card" id="profile-{{ p.id }}"
|
|
onclick="location.href='/profile/{{ p.id }}'">
|
|
<div class="flex-between">
|
|
<div class="flex gap-8">
|
|
{% if p.config.avatar %}
|
|
<img src="{{ p.config.avatar }}" alt=""
|
|
style="width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex-shrink:0;">
|
|
{% endif %}
|
|
<strong>{{ p.name }}</strong>
|
|
<span class="tag {% if p.bot_type == 'user' %}tag-user{% endif %}">{{ p.bot_type }}</span>
|
|
<span class="badge {% if p.running %}badge-green{% else %}badge-red{% endif %}"
|
|
id="status-{{ p.id }}"
|
|
hx-get="/api/profiles/{{ p.id }}/status"
|
|
hx-trigger="every 5s"
|
|
hx-swap="none"
|
|
hx-on::after-request="updateStatus({{ p.id }}, event)">
|
|
{% if p.running %}running{% else %}stopped{% endif %}
|
|
</span>
|
|
</div>
|
|
<div class="flex gap-8" onclick="event.stopPropagation()">
|
|
<button class="btn btn-success" style="padding:6px 14px;font-size:13px;"
|
|
hx-post="/api/profiles/{{ p.id }}/start" hx-swap="none"
|
|
onclick="this.textContent='Starting…'">Start</button>
|
|
<button class="btn btn-danger" style="padding:6px 14px;font-size:13px;"
|
|
hx-post="/api/profiles/{{ p.id }}/stop" hx-swap="none"
|
|
onclick="this.textContent='Stopping…'">Stop</button>
|
|
</div>
|
|
</div>
|
|
{% if p.address %}
|
|
<div class="addr-row" onclick="event.stopPropagation()">
|
|
<button class="btn btn-ghost copy-btn" title="Copy address"
|
|
onclick="copyAddr(event, this, '{{ p.address | e }}')"><i class="fa-solid fa-copy"></i></button>
|
|
<a class="addr-link" href="{{ p.address }}" target="_blank" rel="noopener">{{ p.address }}</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="empty-state card">
|
|
{% if tab == 'users' %}
|
|
<strong>No users yet</strong>
|
|
<p>Create a SimpleX user account to manage contacts and channels.</p>
|
|
{% elif tab == 'businesses' %}
|
|
<strong>No business groups yet</strong>
|
|
<p>Create a business group; each customer who connects gets their own group chat.</p>
|
|
{% else %}
|
|
<strong>No bots yet</strong>
|
|
<p>Bots can echo messages, broadcast to subscribers, or run automated tasks.</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Create dialog -->
|
|
<dialog id="create-dialog">
|
|
<h2 style="margin-bottom:20px;">New {{ new_label }}</h2>
|
|
<form id="create-form">
|
|
<div class="field">
|
|
<label>Name</label>
|
|
<input type="text" name="name" placeholder="{{ 'Alice' if tab == 'users' else ('Acme Inc' if tab == 'businesses' else 'My Bot') }}" required>
|
|
</div>
|
|
<div class="field">
|
|
<label>Bio / Description <span class="muted" style="font-weight:400;">(optional)</span></label>
|
|
<textarea name="bio" rows="2" placeholder="A short description shown on the profile"></textarea>
|
|
</div>
|
|
<div class="field">
|
|
<label>Avatar <span class="muted" style="font-weight:400;">(optional image)</span></label>
|
|
<div class="flex gap-8">
|
|
<img id="avatar-preview" alt="" style="display:none;width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid var(--border);">
|
|
<input type="file" name="avatar_file" accept="image/*" onchange="onAvatarChange(this)" style="flex:1;">
|
|
</div>
|
|
</div>
|
|
{% if tab == 'businesses' %}
|
|
<div class="field">
|
|
<label>Welcome Message <span class="muted" style="font-weight:400;">(optional auto-reply to new customers)</span></label>
|
|
<input type="text" name="welcome_message" placeholder="Thanks for reaching out! How can we help?">
|
|
</div>
|
|
{% endif %}
|
|
{% if tab == 'bots' %}
|
|
<div class="field">
|
|
<label>Bot Type</label>
|
|
<select name="profile_type" id="type-select" onchange="onTypeChange()">
|
|
{% for t in create_types %}
|
|
<option value="{{ t }}">{{ t }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="field" id="welcome-field">
|
|
<label>Welcome Message</label>
|
|
<input type="text" name="welcome_message" placeholder="Welcome! How can I help?">
|
|
</div>
|
|
<div id="support-fields" style="display:none;">
|
|
<div style="border-top:1px solid var(--border);margin:4px 0 14px;padding-top:14px;">
|
|
<p class="muted" style="margin-bottom:12px;">
|
|
LLM backend (OpenAI-compatible — works with a local Ollama via <code>ollama serve</code>,
|
|
OpenAI, Grok…). The LLM bot needs the URL; support bots may leave it blank for a
|
|
welcome-only inbox.
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<label>API Base URL</label>
|
|
<input type="text" name="api_base" placeholder="http://localhost:11434/v1 (Ollama) · https://api.x.ai/v1">
|
|
</div>
|
|
<div class="field">
|
|
<label>API Key <span class="muted" style="font-weight:400;">(any value for Ollama)</span></label>
|
|
<input type="password" name="api_key" placeholder="ollama · xai-…">
|
|
</div>
|
|
<div class="field">
|
|
<label>Model</label>
|
|
<input type="text" name="model" placeholder="llama3.2 (Ollama) · grok-2">
|
|
</div>
|
|
<div class="field">
|
|
<label>Context <span class="muted" style="font-weight:400;">(system prompt given on start-up)</span></label>
|
|
<textarea name="system_prompt" rows="3" placeholder="You are a helpful assistant…"></textarea>
|
|
</div>
|
|
</div>
|
|
<div id="deadmans-fields" style="display:none;">
|
|
<div style="border-top:1px solid var(--border);margin:4px 0 14px;padding-top:14px;">
|
|
<p class="muted" style="margin-bottom:12px;">
|
|
Fires a message to recipients if no check-in arrives in time. Check in by messaging the bot.
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<label>Check-in window (hours)</label>
|
|
<input type="number" name="checkin_hours" min="0.1" step="0.1" value="24">
|
|
</div>
|
|
<div class="field">
|
|
<label>Trigger message</label>
|
|
<textarea name="dms_message" rows="2" placeholder="If you receive this, I haven't checked in…"></textarea>
|
|
</div>
|
|
<div class="field">
|
|
<label>Recipients <span class="muted" style="font-weight:400;">(comma-separated names; blank = all contacts)</span></label>
|
|
<input type="text" name="recipients" placeholder="Alice, Bob">
|
|
</div>
|
|
<div class="field">
|
|
<label>Owner <span class="muted" style="font-weight:400;">(only this contact's messages count as check-in; blank = anyone)</span></label>
|
|
<input type="text" name="owner" placeholder="Alice">
|
|
</div>
|
|
</div>
|
|
<div id="directory-fields" style="display:none;">
|
|
<div style="border-top:1px solid var(--border);margin:4px 0 14px;padding-top:14px;">
|
|
<p class="muted" style="margin-bottom:12px;">
|
|
Group owners register by adding this bot to their group. Listings stay pending until a super-user approves.
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<label>Super-users <span class="muted" style="font-weight:400;">(comma-separated contact names who can /approve)</span></label>
|
|
<input type="text" name="superusers" placeholder="Alice, Bob">
|
|
</div>
|
|
</div>
|
|
<div id="broadcast-fields" style="display:none;">
|
|
<div style="border-top:1px solid var(--border);margin:4px 0 14px;padding-top:14px;">
|
|
<p class="muted" style="margin-bottom:12px;">
|
|
Only listed publishers can broadcast; their text/links are relayed to every contact.
|
|
Anyone else gets the prohibited reply and their message is deleted.
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<label>Publishers <span class="muted" style="font-weight:400;">(comma-separated; "Name" or "ID:Name")</span></label>
|
|
<input type="text" name="publishers" placeholder="Alice, 2:Bob">
|
|
</div>
|
|
<div class="field">
|
|
<label>Prohibited reply <span class="muted" style="font-weight:400;">(blank = default listing publishers)</span></label>
|
|
<input type="text" name="prohibited_message" placeholder="Only publishers can broadcast. Your message is deleted.">
|
|
</div>
|
|
</div>
|
|
<div id="rss-fields" style="display:none;">
|
|
<div style="border-top:1px solid var(--border);margin:4px 0 14px;padding-top:14px;">
|
|
<p class="muted" style="margin-bottom:12px;">
|
|
The bot watches this feed and broadcasts new posts to a channel it creates.
|
|
Share the channel link (from the bot's profile) with subscribers; anyone messaging
|
|
the bot can send <code>/new</code> for the latest.
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<label>Feed URL</label>
|
|
<input type="text" name="feed_url" placeholder="https://example.com/feed.xml">
|
|
</div>
|
|
<div class="field">
|
|
<label>Poll interval <span class="muted" style="font-weight:400;">(seconds)</span></label>
|
|
<input type="number" name="poll_seconds" min="30" value="300">
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="flex gap-8 mt-16" style="justify-content:flex-end;">
|
|
<button type="button" class="btn btn-ghost"
|
|
onclick="document.getElementById('create-dialog').close()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Create</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<script>
|
|
function updateStatus(id, event) {
|
|
try {
|
|
const data = JSON.parse(event.detail.xhr.responseText);
|
|
const badge = document.getElementById('status-' + id);
|
|
if (!badge) return;
|
|
badge.textContent = data.running ? 'running' : 'stopped';
|
|
badge.className = 'badge ' + (data.running ? 'badge-green' : 'badge-red');
|
|
} catch(e) {}
|
|
}
|
|
|
|
let avatarDataUri = '';
|
|
|
|
function openCreate() {
|
|
document.getElementById('create-form').reset();
|
|
avatarDataUri = '';
|
|
const prev = document.getElementById('avatar-preview');
|
|
prev.style.display = 'none'; prev.src = '';
|
|
{% if tab == 'bots' %}onTypeChange();{% endif %}
|
|
document.getElementById('create-dialog').showModal();
|
|
}
|
|
|
|
// Read an image file, downscale it to a small square data URI (avatars are sent
|
|
// over the wire to every contact, so keep them tiny). Stores result in avatarDataUri.
|
|
function onAvatarChange(input) {
|
|
const file = input.files && input.files[0];
|
|
if (!file) { avatarDataUri = ''; return; }
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
const size = 256;
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = size; canvas.height = size;
|
|
const ctx = canvas.getContext('2d');
|
|
// center-crop to square
|
|
const m = Math.min(img.width, img.height);
|
|
const sx = (img.width - m) / 2, sy = (img.height - m) / 2;
|
|
ctx.drawImage(img, sx, sy, m, m, 0, 0, size, size);
|
|
avatarDataUri = canvas.toDataURL('image/jpeg', 0.85);
|
|
const prev = document.getElementById('avatar-preview');
|
|
prev.src = avatarDataUri; prev.style.display = 'block';
|
|
};
|
|
img.src = e.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
function copyAddr(ev, btn, addr) {
|
|
ev.stopPropagation();
|
|
navigator.clipboard.writeText(addr).then(() => {
|
|
btn.innerHTML = '<i class="fa-solid fa-check"></i>';
|
|
setTimeout(() => btn.innerHTML = '<i class="fa-solid fa-copy"></i>', 1500);
|
|
});
|
|
}
|
|
|
|
{% if tab == 'bots' %}
|
|
function onTypeChange() {
|
|
const val = document.getElementById('type-select').value;
|
|
document.getElementById('welcome-field').style.display = (val === 'echo') ? 'none' : '';
|
|
document.getElementById('support-fields').style.display = (val === 'support' || val === 'llm') ? 'block' : 'none';
|
|
document.getElementById('deadmans-fields').style.display = (val === 'deadmans') ? 'block' : 'none';
|
|
document.getElementById('directory-fields').style.display = (val === 'directory') ? 'block' : 'none';
|
|
document.getElementById('broadcast-fields').style.display = (val === 'broadcast') ? 'block' : 'none';
|
|
document.getElementById('rss-fields').style.display = (val === 'rss') ? 'block' : 'none';
|
|
}
|
|
{% endif %}
|
|
|
|
document.getElementById('create-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const fd = new FormData(e.target);
|
|
{% if tab == 'users' %}
|
|
const botType = 'user';
|
|
const config = {};
|
|
{% else %}
|
|
const botType = fd.get('profile_type') || '{{ create_types[0] }}';
|
|
const config = {};
|
|
const welcome = fd.get('welcome_message');
|
|
if (welcome) config.welcome_message = welcome;
|
|
if (botType === 'support' || botType === 'llm') {
|
|
const apiBase = (fd.get('api_base') || '').trim();
|
|
if (apiBase) config.api_base = apiBase;
|
|
const apiKey = (fd.get('api_key') || '').trim();
|
|
if (apiKey) config.api_key = apiKey;
|
|
const model = (fd.get('model') || '').trim();
|
|
if (model) config.model = model;
|
|
const sysPrompt = (fd.get('system_prompt') || '').trim();
|
|
if (sysPrompt) config.system_prompt = sysPrompt;
|
|
}
|
|
if (botType === 'deadmans') {
|
|
const hrs = parseFloat(fd.get('checkin_hours'));
|
|
if (!isNaN(hrs) && hrs > 0) config.checkin_hours = hrs;
|
|
const dmsMsg = (fd.get('dms_message') || '').trim();
|
|
if (dmsMsg) config.message = dmsMsg;
|
|
const recips = (fd.get('recipients') || '').split(',').map(s => s.trim()).filter(Boolean);
|
|
if (recips.length) config.recipients = recips;
|
|
const owner = (fd.get('owner') || '').trim();
|
|
if (owner) config.owner = owner;
|
|
}
|
|
if (botType === 'directory') {
|
|
const su = (fd.get('superusers') || '').split(',').map(s => s.trim()).filter(Boolean);
|
|
if (su.length) config.superusers = su;
|
|
}
|
|
if (botType === 'broadcast') {
|
|
const pubs = (fd.get('publishers') || '').split(',').map(s => s.trim()).filter(Boolean);
|
|
if (pubs.length) config.publishers = pubs;
|
|
const prohibited = (fd.get('prohibited_message') || '').trim();
|
|
if (prohibited) config.prohibited_message = prohibited;
|
|
}
|
|
if (botType === 'rss') {
|
|
const url = (fd.get('feed_url') || '').trim();
|
|
if (!url) { alert('Feed URL is required for an RSS bot'); return; }
|
|
config.feed_url = url;
|
|
const ps = parseInt(fd.get('poll_seconds'), 10);
|
|
if (!isNaN(ps) && ps >= 30) config.poll_seconds = ps;
|
|
}
|
|
{% endif %}
|
|
// Shared profile fields (users and bots)
|
|
const bio = (fd.get('bio') || '').trim();
|
|
if (bio) config.bio = bio;
|
|
if (avatarDataUri) config.avatar = avatarDataUri;
|
|
const token = document.cookie.match(/(?:^|;\s*)token=([^;]+)/)?.[1] || '';
|
|
const resp = await fetch('/api/profiles', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json', 'X-Token': token},
|
|
body: JSON.stringify({name: fd.get('name'), bot_type: botType, config}),
|
|
});
|
|
if (resp.ok) {
|
|
document.getElementById('create-dialog').close();
|
|
location.reload();
|
|
} else {
|
|
const err = await resp.json();
|
|
alert('Error: ' + (err.detail || 'unknown'));
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|