Working chat: auth, connections, streaming, folders
LLeMbas now runs end to end. Register, add an OpenAI-compatible connection, and hold a real streaming conversation organised into folders. Verified against the local llama-swap instance. Streaming is the one genuinely tricky part. Sending a message returns two HTML fragments -- the user bubble and an empty assistant bubble carrying an sse-connect -- and that attribute is the ONLY thing that starts a generation. Rendering an incomplete assistant message as a streaming shell falls out of the same template, which means loading a page whose last reply never finished simply picks it up again. Details worth knowing about, each commented where it matters: - SSE payloads are split across several data: lines. A raw newline in one data: line truncates the event, which shows up the first time a model emits a code block. - Markdown is rendered server-side by the same helper for both the page and the final streamed frame, so the two cannot disagree. The fence renderer is replaced outright rather than using markdown-it's highlight option, which re-wraps output in a second <pre>. - escape_text is html.escape, not nh3.clean_text: it escapes character by character, so escaping stream chunks separately equals escaping the whole string. - The stream opens its own session via session_scope(); it outlives the request handler and the dependency-scoped session may be closed. - Deleting a folder keeps the chats inside it (FK is SET NULL). Losing a conversation to a mis-clicked folder delete is unforgivable. - Login failures use one message for "no such account" and "wrong password" so the form cannot enumerate registered addresses. Also adds deploy/ for the gamebox install at https://chat.lan: system unit, nginx vhost with buffering off (buffering on turns streaming into one lump at the end), and install/update scripts following the same service-user and /srv bind-mount conventions as llama-swap and comfyui. 70 tests, ruff clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaroslav Beneš
@@ -0,0 +1,98 @@
|
||||
{% from "_macros.html" import icon %}
|
||||
{#
|
||||
One connection: an editable form plus its current status.
|
||||
|
||||
Swapped in place by the "Test & refresh" button, so this fragment has to be
|
||||
able to render on its own as well as inside the list.
|
||||
#}
|
||||
<section class="card connection" id="connection-{{ connection.id }}">
|
||||
<form method="post" action="/admin/connections/{{ connection.id }}" class="form-grid">
|
||||
<div class="connection__head">
|
||||
<div class="row" style="gap: var(--sp-2); min-width: 0">
|
||||
<span class="status-dot {{ 'is-ok' if connection.enabled and not connection.last_error
|
||||
else 'is-bad' if connection.last_error else 'is-off' }}"
|
||||
aria-hidden="true"></span>
|
||||
<strong class="truncate">{{ connection.name }}</strong>
|
||||
{% if model_count is defined %}
|
||||
<span class="badge">{{ model_count }} model{{ '' if model_count == 1 else 's' }}</span>
|
||||
{% endif %}
|
||||
{% if not connection.enabled %}
|
||||
<span class="badge">disabled</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="row" style="gap: var(--sp-2)">
|
||||
<button class="btn btn--sm" type="submit"
|
||||
hx-post="/admin/connections/{{ connection.id }}/test"
|
||||
hx-target="#connection-{{ connection.id }}" hx-swap="outerHTML"
|
||||
formnovalidate>
|
||||
{{ icon("refresh", "icon--sm") }} Test & refresh
|
||||
</button>
|
||||
<button class="btn btn--sm btn--primary" type="submit">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if message %}
|
||||
<div class="alert alert--{{ message_kind|default('success') }}">
|
||||
{% if message_kind == "error" %}{{ icon("warning", "alert__icon") }}{% endif %}
|
||||
<span>{{ message }}</span>
|
||||
</div>
|
||||
{% elif connection.last_error %}
|
||||
<div class="alert alert--error">
|
||||
{{ icon("warning", "alert__icon") }}
|
||||
<span>{{ connection.last_error }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label" for="name-{{ connection.id }}">Name</label>
|
||||
<input class="input" id="name-{{ connection.id }}" name="name"
|
||||
value="{{ connection.name }}" required>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label" for="url-{{ connection.id }}">Base URL</label>
|
||||
<input class="input input--mono" id="url-{{ connection.id }}" name="base_url"
|
||||
value="{{ connection.base_url }}" required>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label" for="key-{{ connection.id }}">API key</label>
|
||||
<input class="input input--mono" id="key-{{ connection.id }}" name="api_key"
|
||||
type="password" autocomplete="off"
|
||||
value="{{ unchanged if connection.api_key_encrypted else '' }}"
|
||||
placeholder="No key set">
|
||||
<p class="field__hint">
|
||||
{% if connection.api_key_encrypted %}
|
||||
Currently <code>{{ masked }}</code>. Leave the dots alone to keep it,
|
||||
or clear the field to remove the key entirely.
|
||||
{% else %}
|
||||
No key is stored for this endpoint.
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="enabled" value="true"
|
||||
{{ 'checked' if connection.enabled }}>
|
||||
<span>Enabled — its models are offered in chats</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="connection__footer">
|
||||
<span class="text-xs faint">
|
||||
{% if connection.last_checked_at %}
|
||||
Last checked {{ connection.last_checked_at.strftime("%Y-%m-%d %H:%M") }} UTC
|
||||
{% else %}
|
||||
Never checked
|
||||
{% endif %}
|
||||
</span>
|
||||
<button class="btn btn--sm btn--danger" type="submit"
|
||||
formaction="/admin/connections/{{ connection.id }}/delete" formnovalidate
|
||||
onclick="return confirm('Delete the connection “{{ connection.name }}”? Existing chats keep their history.')">
|
||||
{{ icon("trash", "icon--sm") }} Delete
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
@@ -0,0 +1,73 @@
|
||||
{% extends "base.html" %}
|
||||
{% from "_macros.html" import icon, brand %}
|
||||
{#
|
||||
Shared chrome for the admin area: its own narrow nav rather than the chat
|
||||
sidebar, so administration is visibly a different place from chatting.
|
||||
#}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block body_attrs %} data-authenticated="true"{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="shell">
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar__header">
|
||||
{{ brand(uid="admin") }}
|
||||
</div>
|
||||
|
||||
<nav class="sidebar__scroll" aria-label="Administration">
|
||||
<div class="nav-group">
|
||||
<div class="nav-group__label">Administration</div>
|
||||
<a class="nav-item {{ 'is-active' if section == 'connections' }}"
|
||||
href="/admin/connections">
|
||||
{{ icon("server", "icon--sm") }}
|
||||
<span class="nav-item__label">Connections</span>
|
||||
</a>
|
||||
<a class="nav-item {{ 'is-active' if section == 'models' }}" href="/admin/models">
|
||||
{{ icon("sliders", "icon--sm") }}
|
||||
<span class="nav-item__label">Models</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-group">
|
||||
<div class="nav-group__label">Not yet built</div>
|
||||
<span class="nav-item is-disabled">
|
||||
{{ icon("users", "icon--sm") }}
|
||||
<span class="nav-item__label">Users & groups</span>
|
||||
</span>
|
||||
<span class="nav-item is-disabled">
|
||||
{{ icon("gear", "icon--sm") }}
|
||||
<span class="nav-item__label">Tools</span>
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar__footer">
|
||||
<a class="nav-item" href="/chat">
|
||||
{{ icon("chat", "icon--sm") }}
|
||||
<span class="nav-item__label">Back to chats</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
<h1 class="topbar__title">{% block heading %}Administration{% endblock %}</h1>
|
||||
<button class="btn btn--icon" type="button" data-theme-toggle aria-label="Switch theme">
|
||||
<span class="theme-icon theme-icon--dark">{{ icon("moon") }}</span>
|
||||
<span class="theme-icon theme-icon--light">{{ icon("sun") }}</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="admin-scroll">
|
||||
<div class="admin-page">
|
||||
{% block admin_content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,76 @@
|
||||
{% extends "admin/_layout.html" %}
|
||||
{% from "_macros.html" import icon %}
|
||||
{% set section = "connections" %}
|
||||
|
||||
{% block title %}Connections - LLeMbas{% endblock %}
|
||||
{% block heading %}Connections{% endblock %}
|
||||
|
||||
{% block admin_content %}
|
||||
<p class="admin-lede">
|
||||
Any endpoint that speaks the OpenAI HTTP API: OpenAI itself, or a local
|
||||
runner such as LM Studio, vLLM, llama.cpp or Ollama. LLeMbas asks each one
|
||||
for its model list and offers those models in the chat picker.
|
||||
</p>
|
||||
|
||||
{% if message %}
|
||||
<div class="alert alert--success">{{ message }}</div>
|
||||
{% endif %}
|
||||
|
||||
<section class="card">
|
||||
<h2 class="card__title">Add a connection</h2>
|
||||
<form method="post" action="/admin/connections" class="form-grid">
|
||||
<div class="field">
|
||||
<label class="field__label" for="new-name">Name</label>
|
||||
<input class="input" id="new-name" name="name" required placeholder="Local LM Studio">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label" for="new-url">Base URL</label>
|
||||
<input class="input input--mono" id="new-url" name="base_url" required
|
||||
placeholder="http://localhost:1234/v1">
|
||||
<p class="field__hint">
|
||||
With or without the trailing <code>/v1</code> — both are accepted.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label" for="new-key">API key</label>
|
||||
<input class="input input--mono" id="new-key" name="api_key" type="password"
|
||||
autocomplete="off" placeholder="sk-…">
|
||||
<p class="field__hint">
|
||||
Encrypted before it is stored, and never sent back to the browser.
|
||||
Leave empty for endpoints that need no key.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field field--actions">
|
||||
<button class="btn btn--primary" type="submit">
|
||||
{{ icon("plus", "icon--sm") }} Add and load models
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<h2 class="admin-section-title">
|
||||
Configured connections
|
||||
<span class="badge">{{ connections|length }}</span>
|
||||
</h2>
|
||||
|
||||
{% if not connections %}
|
||||
<div class="empty" style="padding: var(--sp-10) 0">
|
||||
{{ icon("server", "empty__mark") }}
|
||||
<p class="empty__text">
|
||||
Nothing configured yet. Add a connection above and its models appear here.
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="connection-list">
|
||||
{% for connection in connections %}
|
||||
{% with masked = masked[connection.id],
|
||||
model_count = model_counts[connection.id] %}
|
||||
{% include "admin/_connection_row.html" %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,51 @@
|
||||
{% extends "admin/_layout.html" %}
|
||||
{% from "_macros.html" import icon %}
|
||||
{% set section = "models" %}
|
||||
|
||||
{% block title %}Models - LLeMbas{% endblock %}
|
||||
{% block heading %}Models{% endblock %}
|
||||
|
||||
{% block admin_content %}
|
||||
<p class="admin-lede">
|
||||
Every model discovered on each connection. Disable the ones you do not want
|
||||
cluttering the chat picker — nothing is deleted, and re-running
|
||||
“Test & refresh” will not bring a disabled model back on.
|
||||
</p>
|
||||
|
||||
{% for connection in connections %}
|
||||
<section class="card">
|
||||
<h2 class="card__title">
|
||||
{{ connection.name }}
|
||||
<span class="badge">{{ connection.models|length }}</span>
|
||||
{% if not connection.enabled %}<span class="badge">connection disabled</span>{% endif %}
|
||||
</h2>
|
||||
|
||||
{% if not connection.models %}
|
||||
<p class="muted text-sm">
|
||||
No models loaded. Run “Test & refresh” on
|
||||
<a href="/admin/connections">the connections page</a>.
|
||||
</p>
|
||||
{% else %}
|
||||
<ul class="model-list">
|
||||
{% for model in connection.models %}
|
||||
<li class="model-list__item">
|
||||
<code class="model-list__id">{{ model.model_id }}</code>
|
||||
<form method="post" action="/admin/models/{{ model.id }}/toggle">
|
||||
<button class="btn btn--sm {{ 'btn--primary' if model.enabled }}" type="submit">
|
||||
{% if model.enabled %}{{ icon("check", "icon--sm") }} Enabled{% else %}Disabled{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% else %}
|
||||
<div class="empty" style="padding: var(--sp-10) 0">
|
||||
{{ icon("server", "empty__mark") }}
|
||||
<p class="empty__text">
|
||||
No connections yet. <a href="/admin/connections">Add one</a> to load models.
|
||||
</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user