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

improve usability

Browse Source
This commit is contained in:
fretuks
2026-04-10 12:23:33 +02:00
parent 550fd587f4
commit f26d02d880
5 changed files with 138 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+13 -9
View File
@@ -306,18 +306,18 @@
<div class="modal-header">
<div class="persona-modal-heading">
<p class="eyebrow">Start roleplay</p>
<h3>Choose your scene</h3>
<h3 id="roleplayStarterTitle">Choose your roleplay</h3>
</div>
<button id="roleplayStarterClose" type="button" class="icon-button">Close</button>
</div>
<div class="roleplay-starter-intro">
<p class="persona-helper">Pick a character, choose who you are in the scene, and generate an opening message in one step.</p>
<p id="roleplayStarterIntroCopy" class="persona-helper">Pick a character and choose who you are before moving on to the opening scene.</p>
</div>
<p id="roleplayStarterNotice" class="status hidden"></p>
<div class="roleplay-starter-actions">
<button id="roleplayNewPersona" class="secondary-action" type="button">Create AI Character</button>
</div>
<div class="persona-form-grid">
<div id="roleplayStarterStepOne" class="persona-form-grid">
<label class="field field-wide">
<span>1. Character</span>
<select id="roleplayCharacterSelect"></select>
@@ -326,15 +326,19 @@
<span>2. You in the scene</span>
<select id="roleplayUserPersonaSelect"></select>
</label>
<label class="field field-wide">
<span>3. Optional opening direction</span>
<textarea id="roleplayScenarioInput" rows="3" placeholder="Optional. Describe the kind of opening scene you want, such as a setting, conflict, relationship dynamic, or mood."></textarea>
</label>
</div>
<div id="roleplayStarterSuggestions" class="quick-prompts" aria-label="Scenario suggestions"></div>
<div id="roleplayStarterStepTwo" class="roleplay-starter-page hidden">
<label class="field field-wide">
<span>Optional opening direction</span>
<textarea id="roleplayScenarioInput" rows="4" placeholder="Describe the kind of opening scene you want, such as a setting, conflict, relationship dynamic, or mood. Leave it empty and the AI will invent its own scenario."></textarea>
</label>
<p class="subtitle">Leave this empty if you want the AI Character to invent the scenario on its own.</p>
<div id="roleplayStarterSuggestions" class="quick-prompts" aria-label="Scenario suggestions"></div>
</div>
<div class="popup-actions">
<button id="roleplayStarterCancel" type="button" class="secondary-action">Cancel</button>
<button id="roleplayStarterConfirm" type="button">Create opening scene</button>
<button id="roleplayStarterBack" type="button" class="secondary-action hidden">Back</button>
<button id="roleplayStarterConfirm" type="button">Continue</button>
</div>
</div>
</div>
public/market.html
+15 -8
View File
@@ -75,6 +75,7 @@
<div>
<p class="eyebrow">Persona preview</p>
<h3 id="marketPreviewName">Persona details</h3>
<p id="marketPreviewIntro" class="subtitle">Review this persona and choose how you want to use it.</p>
</div>
<button id="marketPreviewClose" type="button" class="icon-button">Close</button>
</div>
@@ -104,14 +105,20 @@
</div>
</div>
<div class="market-preview-actions">
<label id="marketPreviewUserPersonaField" class="field market-preview-user-field hidden">
<span>You in this roleplay</span>
<select id="marketPreviewUserPersonaSelect"></select>
</label>
<label id="marketPreviewScenarioField" class="field market-preview-scenario-field hidden">
<span>Scenario (optional)</span>
<textarea id="marketPreviewScenario" rows="3" maxlength="240" placeholder="Set the opening scene you want the AI character to start with."></textarea>
</label>
<div id="marketPreviewStepOne" class="roleplay-starter-page hidden">
<label id="marketPreviewUserPersonaField" class="field market-preview-user-field hidden">
<span>You in this roleplay</span>
<select id="marketPreviewUserPersonaSelect"></select>
</label>
</div>
<div id="marketPreviewStepTwo" class="roleplay-starter-page hidden">
<label id="marketPreviewScenarioField" class="field market-preview-scenario-field">
<span>Scenario (optional)</span>
<textarea id="marketPreviewScenario" rows="4" maxlength="240" placeholder="Describe the opening scene you want. Leave it empty and the AI Character will invent its own scenario."></textarea>
</label>
<p class="subtitle">Leave this empty if you want the AI Character to invent the scenario on its own.</p>
</div>
<button id="marketPreviewBack" type="button" class="secondary-action hidden">Back</button>
<button id="marketPreviewConfirm" type="button" class="primary-action">Take persona</button>
</div>
</div>
public/market.js
+46 -2
View File
@@ -16,10 +16,14 @@ const marketPreviewAppearance = $("marketPreviewAppearance");
const marketPreviewBackground = $("marketPreviewBackground");
const marketPreviewDetails = $("marketPreviewDetails");
const marketPreviewExampleDialogues = $("marketPreviewExampleDialogues");
const marketPreviewIntro = $("marketPreviewIntro");
const marketPreviewUserPersonaField = $("marketPreviewUserPersonaField");
const marketPreviewUserPersonaSelect = $("marketPreviewUserPersonaSelect");
const marketPreviewScenarioField = $("marketPreviewScenarioField");
const marketPreviewScenario = $("marketPreviewScenario");
const marketPreviewStepOne = $("marketPreviewStepOne");
const marketPreviewStepTwo = $("marketPreviewStepTwo");
const marketPreviewBack = $("marketPreviewBack");
const marketPreviewConfirm = $("marketPreviewConfirm");
const marketPreviewClose = $("marketPreviewClose");
const marketPersonaModal = $("marketPersonaModal");
@@ -56,6 +60,7 @@ let editingPersonaId = null;
let activeUserPersonaId = null;
let activeMarketView = "ai-characters";
let marketActivityDepth = 0;
let marketPreviewStep = 1;
async function request(url, data, method = "POST") {
try {
@@ -179,10 +184,32 @@ function setCollapsiblePreviewText(element, value, maxLength = 220) {
function closeMarketPreview() {
marketPreviewModal.classList.add("hidden");
pendingMarketPersona = null;
marketPreviewStep = 1;
marketPreviewUserPersonaSelect.innerHTML = "";
marketPreviewScenario.value = "";
}
function renderMarketPreviewStep() {
const isScenarioStep = marketPreviewStep === 2;
if (marketPreviewStepOne) marketPreviewStepOne.classList.toggle("hidden", isScenarioStep || pendingMarketPersona?.persona_type !== "assistant");
if (marketPreviewStepTwo) marketPreviewStepTwo.classList.toggle("hidden", !isScenarioStep || pendingMarketPersona?.persona_type !== "assistant");
if (marketPreviewBack) marketPreviewBack.classList.toggle("hidden", !isScenarioStep || pendingMarketPersona?.persona_type !== "assistant");
if (marketPreviewIntro) {
marketPreviewIntro.textContent = pendingMarketPersona?.persona_type === "assistant"
? (isScenarioStep
? "Add an optional custom scenario. If left empty, the AI Character will invent its own opening scene."
: "Choose who you are in this roleplay before moving on to the opening scene.")
: "Review this persona and choose how you want to use it.";
}
if (marketPreviewConfirm) {
if (pendingMarketPersona?.persona_type !== "assistant") {
marketPreviewConfirm.textContent = "Collect persona";
} else {
marketPreviewConfirm.textContent = isScenarioStep ? "Start roleplay" : "Continue";
}
}
}
function populateUserPersonaChoices() {
marketPreviewUserPersonaSelect.innerHTML = "";
@@ -214,6 +241,7 @@ function populateUserPersonaChoices() {
function openMarketPreview(persona) {
pendingMarketPersona = persona;
marketPreviewStep = 1;
marketPreviewName.textContent = persona.name;
marketPreviewMeta.textContent = buildPersonaMeta(persona);
setCollapsiblePreviewText(marketPreviewPronouns, persona.pronouns, 80);
@@ -224,14 +252,13 @@ function openMarketPreview(persona) {
const isAssistant = persona.persona_type === "assistant";
marketPreviewUserPersonaField.classList.toggle("hidden", !isAssistant);
marketPreviewScenarioField.classList.toggle("hidden", !isAssistant);
marketPreviewConfirm.textContent = isAssistant ? "Start roleplay" : "Collect persona";
if (isAssistant) {
populateUserPersonaChoices();
marketPreviewConfirm.classList.add("hidden");
} else {
marketPreviewConfirm.classList.remove("hidden");
}
renderMarketPreviewStep();
marketPreviewModal.classList.remove("hidden");
}
@@ -460,6 +487,16 @@ marketPreviewConfirm.addEventListener("click", async () => {
if (!pendingMarketPersona) return;
const marketId = pendingMarketPersona.id;
if (pendingMarketPersona.persona_type === "assistant") {
if (marketPreviewStep === 1) {
if (!marketPreviewUserPersonaSelect.value) {
setMarketStatus("Choose who you are before continuing.", "error");
return;
}
marketPreviewStep = 2;
renderMarketPreviewStep();
marketPreviewScenario.focus();
return;
}
await startMarketPersonaChat(
marketId,
marketPreviewUserPersonaSelect.value || "self",
@@ -471,6 +508,13 @@ marketPreviewConfirm.addEventListener("click", async () => {
closeMarketPreview();
await collectMarketPersona(marketId);
});
if (marketPreviewBack) {
marketPreviewBack.addEventListener("click", () => {
marketPreviewStep = 1;
renderMarketPreviewStep();
marketPreviewUserPersonaSelect.focus();
});
}
marketPersonaClose.addEventListener("click", closePersonaForm);
marketPersonaModal.addEventListener("click", (event) => {
if (event.target === marketPersonaModal) closePersonaForm();
public/script.js
+59 -1
View File
@@ -28,6 +28,8 @@ const activePersonaStatus = $("activePersonaStatus"), activeUserPersonaStatus =
const personaModal = $("personaModal"), personaCloseBtn = $("personaClose"), personaMenuButton = $("personaMenuButton"), personaPopover = $("personaPopover");
const roleplayStarterModal = $("roleplayStarterModal"), roleplayStarterClose = $("roleplayStarterClose"), roleplayStarterCancel = $("roleplayStarterCancel"), roleplayStarterConfirm = $("roleplayStarterConfirm");
const roleplayStarterNotice = $("roleplayStarterNotice"), roleplayCharacterSelect = $("roleplayCharacterSelect"), roleplayUserPersonaSelect = $("roleplayUserPersonaSelect");
const roleplayStarterTitle = $("roleplayStarterTitle"), roleplayStarterIntroCopy = $("roleplayStarterIntroCopy"), roleplayStarterBack = $("roleplayStarterBack");
const roleplayStarterStepOne = $("roleplayStarterStepOne"), roleplayStarterStepTwo = $("roleplayStarterStepTwo");
const roleplayScenarioInput = $("roleplayScenarioInput"), roleplayStarterSuggestions = $("roleplayStarterSuggestions");
const popupModal = $("popupModal"), popupCloseBtn = $("popupClose"), popupCancelBtn = $("popupCancel"), popupConfirmBtn = $("popupConfirm");
const popupTitle = $("popupTitle"), popupEyebrow = $("popupEyebrow"), popupDescription = $("popupDescription"), popupField = $("popupField");
@@ -45,6 +47,7 @@ let chatSessions = [], currentMessages = [], assistantPersonas = [], userPersona
let activeUserPersonaId = null, currentSummary = null, publishedPersonaIds = new Set();
let popupResolver = null, popupMode = null, popupLastFocus = null;
let roleplayPresetCharacterId = null;
let roleplayStarterStep = 1;
let noticeTimer = null;
let workspaceMode = localStorage.getItem("krishd-workspace-mode") || "basic";
let onboardingStep = 1, onboardingIntent = "ask";
@@ -721,6 +724,27 @@ function setRoleplayStarterNotice(message = "", state = "") {
roleplayStarterNotice.className = state ? `status ${state}` : "status";
}
function renderRoleplayStarterStep() {
const isSceneStep = roleplayStarterStep === 2;
if (roleplayStarterStepOne) roleplayStarterStepOne.classList.toggle("hidden", isSceneStep);
if (roleplayStarterStepTwo) roleplayStarterStepTwo.classList.toggle("hidden", !isSceneStep);
if (roleplayStarterBack) roleplayStarterBack.classList.toggle("hidden", !isSceneStep);
if (roleplayStarterTitle) {
roleplayStarterTitle.textContent = isSceneStep ? "Shape the opening scene" : "Choose your roleplay";
}
if (roleplayStarterIntroCopy) {
roleplayStarterIntroCopy.textContent = isSceneStep
? "Add an optional custom scenario. If you leave it empty, the AI Character will invent its own opening scene."
: "Pick a character and choose who you are before moving on to the opening scene.";
}
if (roleplayStarterCancel) {
roleplayStarterCancel.textContent = isSceneStep ? "Close" : "Cancel";
}
if (roleplayStarterConfirm) {
roleplayStarterConfirm.textContent = isSceneStep ? "Start roleplay" : "Continue";
}
}
function updateChatParticipants() {
const chat = getChatById(activeChatId);
if (!chatModePill || !chatCharacterPill || !chatUserPersonaPill || !chatScenePill) return;
@@ -977,10 +1001,12 @@ function populateRoleplayStarter() {
roleplayStarterConfirm.disabled = false;
}
updateRoleplaySuggestions();
renderRoleplayStarterStep();
}
function openRoleplayStarter(characterId = null) {
closeAuxiliaryPopovers();
roleplayPresetCharacterId = characterId;
roleplayStarterStep = 1;
populateRoleplayStarter();
if (roleplayScenarioInput) roleplayScenarioInput.value = "";
setRoleplayStarterNotice("");
@@ -991,9 +1017,24 @@ function closeRoleplayStarter() {
if (!roleplayStarterModal) return;
roleplayStarterModal.classList.add("hidden");
roleplayPresetCharacterId = null;
roleplayStarterStep = 1;
roleplayStarterConfirm.disabled = false;
if (roleplayScenarioInput) roleplayScenarioInput.value = "";
setRoleplayStarterNotice("");
renderRoleplayStarterStep();
}
function goToRoleplayStarterSceneStep() {
if (!assistantPersonas.length) {
return setRoleplayStarterNotice("Create an AI Character first, then start roleplay.", "error");
}
if (!roleplayCharacterSelect.value) {
return setRoleplayStarterNotice("Choose a character to continue.", "error");
}
roleplayStarterStep = 2;
setRoleplayStarterNotice("");
renderRoleplayStarterStep();
if (roleplayScenarioInput) roleplayScenarioInput.focus();
}
function closeModelPopover() {
if (!modelPopover || !modelMenuButton) return;
@@ -1255,6 +1296,10 @@ async function createNewChat() {
}
async function startRoleplay() {
if (roleplayStarterStep === 1) {
goToRoleplayStarterSceneStep();
return;
}
setChatLoading(true, "Starting roleplay...");
setChatActivity(true, {
eyebrow: "Starting roleplay",
@@ -1378,9 +1423,14 @@ async function displayModels() {
return setNotice("Models could not be loaded.", "error");
}
modelSelect.innerHTML = "";
const preferredModelId = "mistral:latest";
const preferredIndex = models.findIndex((model) => model.model === preferredModelId);
models.forEach((model, index) => {
const option = document.createElement("option");
option.value = model.model; option.textContent = model.name; option.selected = index === 0; modelSelect.appendChild(option);
option.value = model.model;
option.textContent = model.name;
option.selected = preferredIndex >= 0 ? index === preferredIndex : index === 0;
modelSelect.appendChild(option);
});
updateModelHelp();
updateContextRail();
@@ -1531,6 +1581,14 @@ personaTypeSelect.addEventListener("change", () => {
personaModal.addEventListener("click", (event) => { if (event.target === personaModal) closePersonaForm(); });
roleplayStarterClose.addEventListener("click", closeRoleplayStarter);
roleplayStarterCancel.addEventListener("click", closeRoleplayStarter);
if (roleplayStarterBack) {
roleplayStarterBack.addEventListener("click", () => {
roleplayStarterStep = 1;
setRoleplayStarterNotice("");
renderRoleplayStarterStep();
roleplayCharacterSelect.focus();
});
}
roleplayStarterConfirm.addEventListener("click", () => { void startRoleplay(); });
roleplayCharacterSelect.addEventListener("change", updateRoleplaySuggestions);
roleplayUserPersonaSelect.addEventListener("change", updateRoleplaySuggestions);
public/style.css
+5
View File
@@ -1559,6 +1559,11 @@ select:focus {
border: 1px solid rgba(24, 32, 31, 0.08);
}
.roleplay-starter-page {
display: grid;
gap: 14px;
}
.persona-status {
text-align: left;
}