Refactor persona creation UI: replace inline form with modal implementation and improve styling.
This commit is contained in:
+1
-37
@@ -88,34 +88,6 @@
|
||||
</div>
|
||||
<p id="activePersonaStatus" class="status persona-status">No persona equipped.</p>
|
||||
<div id="personaList" class="persona-list"></div>
|
||||
<form id="personaForm" class="persona-form hidden">
|
||||
<h3 id="personaFormTitle">Create persona</h3>
|
||||
<label class="field">
|
||||
<span>Name</span>
|
||||
<input id="personaName" placeholder="Persona name" required/>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Pronouns</span>
|
||||
<input id="personaPronouns" placeholder="e.g. she/her, they/them"/>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Appearance</span>
|
||||
<textarea id="personaAppearance" rows="2" placeholder="Describe their look"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Background</span>
|
||||
<textarea id="personaBackground" rows="2" placeholder="Backstory or origins"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Details</span>
|
||||
<textarea id="personaDetails" rows="3"
|
||||
placeholder="Personality traits, voice, or quirks"></textarea>
|
||||
</label>
|
||||
<div class="persona-actions">
|
||||
<button id="personaSave" type="submit" class="primary-action">Save persona</button>
|
||||
<button id="personaCancel" type="button" class="secondary-action">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
<section class="chat-main">
|
||||
@@ -148,7 +120,7 @@
|
||||
<div class="modal-card">
|
||||
<div class="modal-header">
|
||||
<h3 id="personaFormTitle">Create persona</h3>
|
||||
<button id="personaClose" type="button" class="icon-button">Close</button>
|
||||
<button id="personaClose" type="button" class="icon-button">Cancel</button>
|
||||
</div>
|
||||
<form id="personaForm" class="persona-form">
|
||||
<label class="field">
|
||||
@@ -172,16 +144,8 @@
|
||||
<textarea id="personaDetails" rows="3"
|
||||
placeholder="Personality traits, voice, or quirks"></textarea>
|
||||
</label>
|
||||
<div class="custom-fields">
|
||||
<div class="custom-fields-header">
|
||||
<span>Custom traits</span>
|
||||
<button id="addCustomField" type="button" class="secondary-action">Add</button>
|
||||
</div>
|
||||
<div id="customFieldsList" class="custom-fields-list"></div>
|
||||
</div>
|
||||
<div class="persona-actions">
|
||||
<button id="personaSave" type="submit" class="primary-action">Save persona</button>
|
||||
<button id="personaCancel" type="button" class="secondary-action">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
+23
-16
@@ -32,6 +32,8 @@ const newPersonaBtn = document.getElementById("newPersona");
|
||||
const clearPersonaBtn = document.getElementById("clearPersona");
|
||||
const personaCancelBtn = document.getElementById("personaCancel");
|
||||
const activePersonaStatus = document.getElementById("activePersonaStatus");
|
||||
const personaModal = document.getElementById("personaModal");
|
||||
const personaCloseBtn = document.getElementById("personaClose");
|
||||
|
||||
let isProcessing = false;
|
||||
let chatSessions = [];
|
||||
@@ -194,29 +196,30 @@ function setActivePersonaStatus() {
|
||||
}
|
||||
|
||||
function openPersonaForm(persona = null) {
|
||||
personaForm.classList.remove('hidden');
|
||||
personaModal.classList.remove("hidden");
|
||||
if (persona) {
|
||||
editingPersonaId = persona.id;
|
||||
personaFormTitle.textContent = 'Edit persona';
|
||||
personaNameInput.value = persona.name || '';
|
||||
personaPronounsInput.value = persona.pronouns || '';
|
||||
personaAppearanceInput.value = persona.appearance || '';
|
||||
personaBackgroundInput.value = persona.background || '';
|
||||
personaDetailsInput.value = persona.details || '';
|
||||
personaFormTitle.textContent = "Edit persona";
|
||||
personaNameInput.value = persona.name || "";
|
||||
personaPronounsInput.value = persona.pronouns || "";
|
||||
personaAppearanceInput.value = persona.appearance || "";
|
||||
personaBackgroundInput.value = persona.background || "";
|
||||
personaDetailsInput.value = persona.details || "";
|
||||
} else {
|
||||
editingPersonaId = null;
|
||||
personaFormTitle.textContent = 'Create persona';
|
||||
personaNameInput.value = '';
|
||||
personaPronounsInput.value = '';
|
||||
personaAppearanceInput.value = '';
|
||||
personaBackgroundInput.value = '';
|
||||
personaDetailsInput.value = '';
|
||||
personaFormTitle.textContent = "Create persona";
|
||||
personaNameInput.value = "";
|
||||
personaPronounsInput.value = "";
|
||||
personaAppearanceInput.value = "";
|
||||
personaBackgroundInput.value = "";
|
||||
personaDetailsInput.value = "";
|
||||
}
|
||||
|
||||
personaNameInput.focus();
|
||||
}
|
||||
|
||||
function closePersonaForm() {
|
||||
personaForm.classList.add('hidden');
|
||||
personaModal.classList.add("hidden");
|
||||
editingPersonaId = null;
|
||||
}
|
||||
|
||||
@@ -588,8 +591,6 @@ msgInput.addEventListener('input', function () {
|
||||
|
||||
newPersonaBtn.addEventListener('click', () => openPersonaForm());
|
||||
|
||||
personaCancelBtn.addEventListener('click', () => closePersonaForm());
|
||||
|
||||
clearPersonaBtn.addEventListener('click', () => clearPersona());
|
||||
|
||||
personaForm.addEventListener('submit', (event) => {
|
||||
@@ -597,6 +598,12 @@ personaForm.addEventListener('submit', (event) => {
|
||||
savePersona();
|
||||
});
|
||||
|
||||
personaCloseBtn.addEventListener("click", closePersonaForm);
|
||||
|
||||
personaModal.addEventListener("click", (e) => {
|
||||
if (e.target === personaModal) closePersonaForm();
|
||||
});
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
checkSession();
|
||||
displayModels();
|
||||
|
||||
+30
-4
@@ -906,15 +906,12 @@ button:disabled {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ===== Legal / Static Pages Fix ===== */
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Force text to stay inside viewport */
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@@ -922,8 +919,37 @@ html, body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent long words / links from breaking layout */
|
||||
.content * {
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.55);
|
||||
backdrop-filter: blur(8px);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
z-index: 9999;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
width: min(520px, 95vw);
|
||||
background: rgba(19, 19, 42, 0.96);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 60px -12px rgba(0,0,0,0.45);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -389,7 +389,7 @@ const normalizePersonaField = (value) => {
|
||||
|
||||
const buildPersonaPrompt = (persona) => {
|
||||
const lines = [
|
||||
"You are roleplaying with the following persona. Stay in character, be engaging, and align with these details."
|
||||
"You are roleplaying as the following persona. Stay in character, be engaging, and align with these details."
|
||||
];
|
||||
if (persona.name) lines.push(`Name: ${persona.name}`);
|
||||
if (persona.pronouns) lines.push(`Pronouns: ${persona.pronouns}`);
|
||||
|
||||
Reference in New Issue
Block a user