From 54c5eb1334ff45f0f1ecb8b1813297c18b07be1f Mon Sep 17 00:00:00 2001 From: Loki Date: Sat, 15 Aug 2026 11:35:40 +0000 Subject: [PATCH] =?UTF-8?q?Identit=C3=A9=20dans=20le=20chat,=20section=20P?= =?UTF-8?q?aram=C3=A8tres,=20logo=20agrandi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Identité : prénom et avatars (emoji) affichés en tête des bulles, à la place des libellés « user » / « assistant ». Stockés dans les préférences SERVEUR, donc partagés entre appareils comme le thème. La liste d'emojis est servie par /api/prefs : pas de seconde copie côté client. Validation stricte — prénom nettoyé de ses caractères de contrôle et borné à 24 runes, avatar refusé s'il n'est pas dans la liste fermée. - Barre latérale : séparateur « Paramètres » qui regroupe Identité, Apparence, Accès OpenAI, Accès distant et Actions, sous les réglages d'IA (Machine, Presets, Mode agent, System prompt, Moteur). Un séparateur plutôt qu'un second niveau de repli, illisible dans une colonne aussi étroite. - Logo : 10 → 17 px, il était minuscule sur un écran dense. Le prénom vient de l'utilisateur : les libellés sont écrits en textContent, jamais en innerHTML. --- internal/loki/ui/index.html | 242 ++++++++++++++++------ internal/loki/ui/src/index.tmpl.html | 137 ++++++------ internal/loki/ui/src/js/06-settings.js | 2 +- internal/loki/ui/src/js/08-chat-render.js | 5 + internal/loki/ui/src/js/17-identity.js | 79 +++++++ internal/loki/ui/src/styles.css | 19 +- internal/loki/web_prefs.go | 54 ++++- 7 files changed, 417 insertions(+), 121 deletions(-) create mode 100644 internal/loki/ui/src/js/17-identity.js diff --git a/internal/loki/ui/index.html b/internal/loki/ui/index.html index 68be1ae..1cf3278 100644 --- a/internal/loki/ui/index.html +++ b/internal/loki/ui/index.html @@ -130,7 +130,9 @@ h1{margin:0;font-size:18px;color:var(--accent)} /* Logo : « Loki » dessiné en pixels (SVG 4x5 par lettre, trait d'un module). Le « A » reste un bloc à part : il apparaît en glissant quand le mode agent est actif. */ #brand{display:inline-flex;align-items:center} -#brand svg{height:10px;width:auto;display:block;shape-rendering:crispEdges;fill:currentColor} +/* 17px : le logo pixel-art était minuscule à 10px, illisible sur un écran dense. + Multiple impair volontaire — la grille du SVG (5 px de haut) reste nette. */ +#brand svg{height:17px;width:auto;display:block;shape-rendering:crispEdges;fill:currentColor} #brand-word{display:inline-flex;color:var(--accent)} #ver{font-size:10px;font-weight:400;color:var(--dim);margin-left:7px;letter-spacing:0;align-self:flex-end;line-height:1;position:relative;top:1px} .sidehead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px} @@ -146,6 +148,21 @@ h1{margin:0;font-size:18px;color:var(--accent)} .preset:hover .conv-acts,.preset:focus-within .conv-acts{opacity:1} .conv-acts .iconbtn{font-size:11px;line-height:1;padding:4px 6px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--dim);cursor:pointer} .conv-acts .iconbtn:hover{border-color:var(--border);color:var(--text)} +/* Séparateur de groupe dans la barre latérale : sépare les réglages d'IA des + réglages d'application, sans imbriquer un second niveau de repli (illisible + dans une colonne aussi étroite). */ +.side-sep{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim); + margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--border)} +/* Choix d'avatar : une grille de pastilles emoji, celle retenue encadrée. */ +.avpick{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px} +.avpick button{font-size:15px;line-height:1;padding:5px 6px;background:var(--panel); + border:1px solid var(--border);border-radius:8px;cursor:pointer} +.avpick button:hover{border-color:var(--accent)} +.avpick button.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)} +/* Avatar + nom en tête de bulle : l'emoji garde sa taille propre, le nom hérite + du style de .label (petites capitales) mais sans forcer la casse du prénom. */ +.msg .label .av{font-style:normal;font-size:13px;margin-right:5px;vertical-align:-1px} +.msg .label .who{text-transform:none;letter-spacing:.04em;font-size:11px} /* pastille d'état service, en haut à droite de la barre latérale */ .statuspill{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--dim);font-weight:600;white-space:nowrap;cursor:pointer} .statuspill.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent)} @@ -1343,6 +1360,85 @@ button:hover{border-color:var(--dim);color:var(--text)} +
System prompt +
+ +
+
+
Moteur + +
+ + + +
+
+
llama.cpp précompilé
+
binaire officiel téléchargé tel quel, prêt en ~2 min
+
+
+
+
llama.cpp compilé
+
compilé ici pour votre machine — plus rapide, plus long à installer
+
+
+
+
llama.cpp personnalisé
+
un fork de llama.cpp pour modèles spéciaux (quant ternaire…)
+
+
+
+ +
+ +
Service du moteur?Démarre, redémarre ou arrête llama-server — le processus qui charge le modèle et répond. Un redémarrage recharge le modèle du preset actif (quelques secondes à quelques minutes selon sa taille).
+
+
+ + + +
+
+
+ +
Paramètres
+
Identité +
+
+ Ton prénomaffiché sur tes messages + +
+
+ Ton avatar +
+
+
+ Avatar de Loki +
+
+
+
Apparence
-
System prompt -
- -
-
Accès OpenAI
Endpoint compatible OpenAI?Branchez n'importe quel client compatible OpenAI (OpenCode, Continue, Cursor…) sur ces adresses. Si une clé est définie, le client doit envoyer Authorization: Bearer <clé>.
-
- - - -
-
-
llama.cpp précompilé
-
binaire officiel téléchargé tel quel, prêt en ~2 min
-
-
-
-
llama.cpp compilé
-
compilé ici pour votre machine — plus rapide, plus long à installer
-
-
-
-
llama.cpp personnalisé
-
un fork de llama.cpp pour modèles spéciaux (quant ternaire…)
-
-
-
- -
- -
Service du moteur?Démarre, redémarre ou arrête llama-server — le processus qui charge le modèle et répond. Un redémarrage recharge le modèle du preset actif (quelques secondes à quelques minutes selon sa taille).
-
-
- - - -
-
-
Actions
+
+ + + +
+
+
llama.cpp précompilé
+
binaire officiel téléchargé tel quel, prêt en ~2 min
+
+
+
+
llama.cpp compilé
+
compilé ici pour votre machine — plus rapide, plus long à installer
+
+
+
+
llama.cpp personnalisé
+
un fork de llama.cpp pour modèles spéciaux (quant ternaire…)
+
+
+
+ +
+ +
Service du moteur?Démarre, redémarre ou arrête llama-server — le processus qui charge le modèle et répond. Un redémarrage recharge le modèle du preset actif (quelques secondes à quelques minutes selon sa taille).
+
+
+ + + +
+
+
+ +
Paramètres
+
Identité +
+
+ Ton prénomaffiché sur tes messages + +
+
+ Ton avatar +
+
+
+ Avatar de Loki +
+
+
+
Apparence
-
System prompt -
- -
-
Accès OpenAI
Endpoint compatible OpenAI?Branchez n'importe quel client compatible OpenAI (OpenCode, Continue, Cursor…) sur ces adresses. Si une clé est définie, le client doit envoyer Authorization: Bearer <clé>.
-
- - - -
-
-
llama.cpp précompilé
-
binaire officiel téléchargé tel quel, prêt en ~2 min
-
-
-
-
llama.cpp compilé
-
compilé ici pour votre machine — plus rapide, plus long à installer
-
-
-
-
llama.cpp personnalisé
-
un fork de llama.cpp pour modèles spéciaux (quant ternaire…)
-
-
-
- -
- -
Service du moteur?Démarre, redémarre ou arrête llama-server — le processus qui charge le modèle et répond. Un redémarrage recharge le modèle du preset actif (quelques secondes à quelques minutes selon sa taille).
-
-
- - - -
-
-
Actions