Fretux/KrisHD_AI
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Add user personas and move persona controls to popover

Browse Source
This commit is contained in:
Fretux
2026-01-13 15:22:44 +01:00
parent 2edda0c5f5
commit f5c205a6a3
4 changed files with 334 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+50 -19
View File
@@ -75,20 +75,6 @@
<button id="newChat" class="secondary-action">New</button>
</div>
<div id="chatList" class="chat-list"></div>
<div class="persona-panel">
<div class="sidebar-header persona-header">
<div>
<p class="eyebrow">Roleplay</p>
<h2>Personas</h2>
</div>
<div class="persona-header-actions">
<button id="newPersona" class="secondary-action" type="button">New</button>
<button id="clearPersona" class="secondary-action" type="button">Clear</button>
</div>
</div>
<p id="activePersonaStatus" class="status persona-status">No persona equipped.</p>
<div id="personaList" class="persona-list"></div>
</div>
</aside>
<section class="chat-main">
<div class="chat-header">
@@ -96,11 +82,49 @@
<h2 id="activeChatTitle">New chat</h2>
<button id="renameChat" class="icon-button" type="button">Rename</button>
</div>
<div class="model-select">
<label for="model">Model:</label>
<select id="model">
<option disabled selected>Loading models...</option>
</select>
<div class="chat-header-actions">
<div class="model-select">
<label for="model">Model:</label>
<select id="model">
<option disabled selected>Loading models...</option>
</select>
</div>
<div class="persona-menu">
<button id="personaMenuButton" class="secondary-action" type="button"
aria-expanded="false" aria-controls="personaPopover">
Personas
</button>
<div id="personaPopover" class="persona-popover hidden" role="dialog">
<div class="persona-section">
<div class="persona-section-header">
<div>
<p class="eyebrow">Roleplay</p>
<h2>AI Persona</h2>
</div>
<div class="persona-section-actions">
<button id="newPersona" class="secondary-action" type="button">New AI</button>
<button id="clearPersona" class="secondary-action" type="button">Clear</button>
</div>
</div>
<p id="activePersonaStatus" class="status persona-status">No persona equipped.</p>
<div id="personaList" class="persona-list"></div>
</div>
<div class="persona-section">
<div class="persona-section-header">
<div>
<p class="eyebrow">Roleplay</p>
<h2>Your Persona</h2>
</div>
<div class="persona-section-actions">
<button id="newUserPersona" class="secondary-action" type="button">New you</button>
<button id="clearUserPersona" class="secondary-action" type="button">Clear</button>
</div>
</div>
<p id="activeUserPersonaStatus" class="status persona-status">No user persona set.</p>
<div id="userPersonaList" class="persona-list"></div>
</div>
</div>
</div>
</div>
</div>
<div id="messages"></div>
@@ -123,6 +147,13 @@
<button id="personaClose" type="button" class="icon-button">Cancel</button>
</div>
<form id="personaForm" class="persona-form">
<label class="field">
<span>Persona for</span>
<select id="personaType">
<option value="assistant">AI persona</option>
<option value="user">Your persona</option>
</select>
</label>
<label class="field">
<span>Name</span>
<input id="personaName" placeholder="Persona name" required/>
public/script.js
+126 -32
View File
@@ -21,26 +21,36 @@ const renameChatBtn = document.getElementById("renameChat");
const deleteChatBtn = document.getElementById("deleteChat");
const activeChatTitle = document.getElementById("activeChatTitle");
const personaList = document.getElementById("personaList");
const userPersonaList = document.getElementById("userPersonaList");
const personaForm = document.getElementById("personaForm");
const personaFormTitle = document.getElementById("personaFormTitle");
const personaTypeSelect = document.getElementById("personaType");
const personaNameInput = document.getElementById("personaName");
const personaPronounsInput = document.getElementById("personaPronouns");
const personaAppearanceInput = document.getElementById("personaAppearance");
const personaBackgroundInput = document.getElementById("personaBackground");
const personaDetailsInput = document.getElementById("personaDetails");
const newPersonaBtn = document.getElementById("newPersona");
const newUserPersonaBtn = document.getElementById("newUserPersona");
const clearPersonaBtn = document.getElementById("clearPersona");
const clearUserPersonaBtn = document.getElementById("clearUserPersona");
const personaCancelBtn = document.getElementById("personaCancel");
const activePersonaStatus = document.getElementById("activePersonaStatus");
const activeUserPersonaStatus = document.getElementById("activeUserPersonaStatus");
const personaModal = document.getElementById("personaModal");
const personaCloseBtn = document.getElementById("personaClose");
const personaMenuButton = document.getElementById("personaMenuButton");
const personaPopover = document.getElementById("personaPopover");
let isProcessing = false;
let chatSessions = [];
let activeChatId = null;
let personas = [];
let assistantPersonas = [];
let userPersonas = [];
let activePersonaId = null;
let activeUserPersonaId = null;
let editingPersonaId = null;
let editingPersonaType = "assistant";
const displayModels = async () => {
const select = document.getElementById("model");
@@ -185,21 +195,43 @@ function renderChatList() {
});
}
function setActivePersonaStatus() {
const activePersona = personas.find(persona => persona.id === activePersonaId);
function updateActivePersonaStatus(personaItems, activeId, statusElement, emptyMessage, activePrefix) {
const activePersona = personaItems.find(persona => persona.id === activeId);
if (activePersona) {
activePersonaStatus.textContent = `Equipped: ${activePersona.name}`;
statusElement.textContent = `${activePrefix}: ${activePersona.name}`;
} else {
activePersonaStatus.textContent = 'No persona equipped.';
statusElement.textContent = emptyMessage;
}
clearPersonaBtn.disabled = !activePersonaId;
}
function openPersonaForm(persona = null) {
function setActivePersonaStatus() {
updateActivePersonaStatus(
assistantPersonas,
activePersonaId,
activePersonaStatus,
'No persona equipped.',
'AI equipped'
);
updateActivePersonaStatus(
userPersonas,
activeUserPersonaId,
activeUserPersonaStatus,
'No user persona set.',
'You are'
);
clearPersonaBtn.disabled = !activePersonaId;
clearUserPersonaBtn.disabled = !activeUserPersonaId;
}
function openPersonaForm(persona = null, personaType = "assistant") {
closePersonaPopover();
personaModal.classList.remove("hidden");
if (persona) {
editingPersonaId = persona.id;
personaFormTitle.textContent = "Edit persona";
editingPersonaType = persona.persona_type || "assistant";
personaFormTitle.textContent = `Edit ${editingPersonaType === "user" ? "your persona" : "AI persona"}`;
personaTypeSelect.value = editingPersonaType;
personaTypeSelect.disabled = true;
personaNameInput.value = persona.name || "";
personaPronounsInput.value = persona.pronouns || "";
personaAppearanceInput.value = persona.appearance || "";
@@ -207,7 +239,10 @@ function openPersonaForm(persona = null) {
personaDetailsInput.value = persona.details || "";
} else {
editingPersonaId = null;
personaFormTitle.textContent = "Create persona";
editingPersonaType = personaType;
personaFormTitle.textContent = `Create ${personaType === "user" ? "your persona" : "AI persona"}`;
personaTypeSelect.value = personaType;
personaTypeSelect.disabled = false;
personaNameInput.value = "";
personaPronounsInput.value = "";
personaAppearanceInput.value = "";
@@ -221,21 +256,23 @@ function openPersonaForm(persona = null) {
function closePersonaForm() {
personaModal.classList.add("hidden");
editingPersonaId = null;
editingPersonaType = "assistant";
personaTypeSelect.disabled = false;
}
function renderPersonaList() {
personaList.innerHTML = '';
if (!personas.length) {
function renderPersonaList(personaItems, activeId, listElement, personaType) {
listElement.innerHTML = '';
if (!personaItems.length) {
const empty = document.createElement('p');
empty.className = 'status persona-status';
empty.textContent = 'No personas yet. Create one to get started.';
personaList.appendChild(empty);
listElement.appendChild(empty);
setActivePersonaStatus();
return;
}
personas.forEach(persona => {
personaItems.forEach(persona => {
const item = document.createElement('div');
item.className = `persona-item${persona.id === activePersonaId ? ' active' : ''}`;
item.className = `persona-item${persona.id === activeId ? ' active' : ''}`;
const title = document.createElement('h4');
title.textContent = persona.name;
const meta = document.createElement('p');
@@ -245,9 +282,9 @@ function renderPersonaList() {
const equipBtn = document.createElement('button');
equipBtn.type = 'button';
equipBtn.textContent = persona.id === activePersonaId ? 'Equipped' : 'Equip';
equipBtn.disabled = persona.id === activePersonaId;
equipBtn.addEventListener('click', () => equipPersona(persona.id));
equipBtn.textContent = persona.id === activeId ? 'Equipped' : 'Equip';
equipBtn.disabled = persona.id === activeId;
equipBtn.addEventListener('click', () => equipPersona(persona.id, personaType));
const editBtn = document.createElement('button');
editBtn.type = 'button';
@@ -266,7 +303,7 @@ function renderPersonaList() {
item.appendChild(title);
item.appendChild(meta);
item.appendChild(actions);
personaList.appendChild(item);
listElement.appendChild(item);
});
setActivePersonaStatus();
}
@@ -274,27 +311,45 @@ function renderPersonaList() {
async function loadPersonas() {
const res = await get('/personas');
if (res.error) return;
personas = res.personas || [];
assistantPersonas = res.assistantPersonas || [];
userPersonas = res.userPersonas || [];
activePersonaId = res.activePersonaId || null;
renderPersonaList();
activeUserPersonaId = res.activeUserPersonaId || null;
renderPersonaList(assistantPersonas, activePersonaId, personaList, "assistant");
renderPersonaList(userPersonas, activeUserPersonaId, userPersonaList, "user");
}
async function equipPersona(personaId) {
const res = await post(`/personas/${personaId}/equip`, {});
async function equipPersona(personaId, personaType) {
const endpoint = personaType === "user"
? `/personas/${personaId}/equip-user`
: `/personas/${personaId}/equip`;
const res = await post(endpoint, {});
if (res.error) return;
activePersonaId = personaId;
renderPersonaList();
if (personaType === "user") {
activeUserPersonaId = personaId;
} else {
activePersonaId = personaId;
}
renderPersonaList(assistantPersonas, activePersonaId, personaList, "assistant");
renderPersonaList(userPersonas, activeUserPersonaId, userPersonaList, "user");
}
async function clearPersona() {
const res = await post('/personas/clear', {});
async function clearPersona(personaType) {
const endpoint = personaType === "user" ? '/personas/user/clear' : '/personas/clear';
const res = await post(endpoint, {});
if (res.error) return;
activePersonaId = null;
renderPersonaList();
if (personaType === "user") {
activeUserPersonaId = null;
} else {
activePersonaId = null;
}
renderPersonaList(assistantPersonas, activePersonaId, personaList, "assistant");
renderPersonaList(userPersonas, activeUserPersonaId, userPersonaList, "user");
}
async function savePersona() {
const payload = {
personaType: personaTypeSelect.value,
name: personaNameInput.value.trim(),
pronouns: personaPronounsInput.value.trim(),
appearance: personaAppearanceInput.value.trim(),
@@ -314,7 +369,8 @@ async function savePersona() {
}
async function deletePersona(personaId) {
const persona = personas.find(item => item.id === personaId);
const persona = assistantPersonas.find(item => item.id === personaId)
|| userPersonas.find(item => item.id === personaId);
if (!persona) return;
const confirmDelete = confirm(`Delete persona "${persona.name}"?`);
if (!confirmDelete) return;
@@ -553,8 +609,10 @@ document.getElementById("logout").onclick = async () => {
clearMessages();
chatSessions = [];
activeChatId = null;
personas = [];
assistantPersonas = [];
userPersonas = [];
activePersonaId = null;
activeUserPersonaId = null;
setAuthMessage("Logged out.", 'success');
showAuthScreen('login');
loginUsernameInput.value = "";
@@ -591,7 +649,11 @@ msgInput.addEventListener('input', function () {
newPersonaBtn.addEventListener('click', () => openPersonaForm());
clearPersonaBtn.addEventListener('click', () => clearPersona());
newUserPersonaBtn.addEventListener('click', () => openPersonaForm(null, "user"));
clearPersonaBtn.addEventListener('click', () => clearPersona("assistant"));
clearUserPersonaBtn.addEventListener('click', () => clearPersona("user"));
personaForm.addEventListener('submit', (event) => {
event.preventDefault();
@@ -604,6 +666,38 @@ personaModal.addEventListener("click", (e) => {
if (e.target === personaModal) closePersonaForm();
});
function closePersonaPopover() {
personaPopover.classList.add("hidden");
personaMenuButton.setAttribute("aria-expanded", "false");
}
function togglePersonaPopover(event) {
event.stopPropagation();
const isHidden = personaPopover.classList.contains("hidden");
if (isHidden) {
personaPopover.classList.remove("hidden");
personaMenuButton.setAttribute("aria-expanded", "true");
} else {
closePersonaPopover();
}
}
personaMenuButton.addEventListener("click", togglePersonaPopover);
personaPopover.addEventListener("click", (event) => {
event.stopPropagation();
});
document.addEventListener("click", () => {
closePersonaPopover();
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
closePersonaPopover();
}
});
window.addEventListener('load', () => {
checkSession();
displayModels();
public/style.css
+58 -21
View File
@@ -176,7 +176,7 @@ h1 {
letter-spacing: 0.01em;
}
input, textarea {
input, textarea, select {
width: 100%;
margin: 0;
padding: 14px 16px;
@@ -196,7 +196,7 @@ input::placeholder, textarea::placeholder {
color: var(--text-muted);
}
input:focus, textarea:focus {
input:focus, textarea:focus, select:focus {
border-color: var(--accent);
background: rgba(10, 10, 20, 1);
transform: translateY(-1px);
@@ -387,25 +387,6 @@ button:disabled {
background: rgba(255, 255, 255, 0.08);
}
.persona-panel {
display: flex;
flex-direction: column;
gap: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 16px;
min-height: 0;
}
.persona-header {
align-items: flex-start;
}
.persona-header-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.persona-status {
text-align: left;
margin: 0;
@@ -763,6 +744,14 @@ button:disabled {
gap: 12px;
}
.chat-header-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
.chat-title {
display: flex;
align-items: center;
@@ -809,6 +798,54 @@ button:disabled {
transition: all 0.2s ease;
}
.persona-menu {
position: relative;
}
.persona-popover {
position: absolute;
right: 0;
top: calc(100% + 10px);
width: min(520px, 80vw);
background: rgba(19, 19, 42, 0.98);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.55);
padding: 14px;
display: grid;
gap: 16px;
z-index: 30;
}
.persona-section {
display: grid;
gap: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 12px;
}
.persona-section:first-child {
border-top: none;
padding-top: 0;
}
.persona-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.persona-section-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.persona-popover .persona-list {
max-height: 220px;
}
.model-select select:hover, .model-select select:focus {
border-color: var(--accent);
background: rgba(15, 15, 35, 1);