Koko210/miku-discord
1
0
Fork 0
Code Issues 34 Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: new Prompt History section HTML + CSS

Browse Source 
- Replace single <pre> Last Prompt with rich Prompt History viewer
- Add source filter buttons (All/Cat/Fallback), history dropdown selector
- Add metadata bar, copy-to-clipboard button, middle-truncation toggle
- Add collapsible section CSS classes for expandable subsections
This commit is contained in:
koko210Serve
2026-05-02 15:19:10 +03:00
parent 87de8f8b3a
commit f33e2afdf7
2 changed files with 90 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
bot/static/css/style.css
View File

@@ -441,6 +441,51 @@ h1, h3 {
color: #ddd;
}
/* Prompt History Section */
#prompt-history-section.collapsed #prompt-history-body {
display: none;
}
#prompt-history-toggle {
user-select: none;
transition: color 0.2s;
}
#prompt-history-toggle:hover {
color: #4CAF50;
}
#prompt-metadata span {
white-space: nowrap;
}
#prompt-metadata .prompt-meta-label {
color: #666;
}
#prompt-metadata .prompt-meta-value {
color: #ccc;
}
#prompt-display pre {
margin: 0;
}
.prompt-subsection-header {
cursor: pointer;
user-select: none;
padding: 0.3rem 0.5rem;
border-radius: 4px;
background: #2a2a2a;
margin: 0.5rem 0 0.25rem 0;
font-size: 0.82rem;
color: #aaa;
transition: background 0.15s;
}
.prompt-subsection-header:hover {
background: #333;
color: #ddd;
}
.prompt-subsection-body.collapsed {
display: none;
}
#prompt-truncate-toggle {
accent-color: #4CAF50;
}
/* Mood Activities Editor */
.act-mood-row {
margin-bottom: 0.5rem;

60
bot/static/index.html
View File

@@ -543,23 +543,53 @@
</div>
</div>
<div class="section">
<h3>Last Prompt</h3>
<div style="margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem;">
<label style="font-size: 0.9rem; color: #aaa;">Source:</label>
<div style="display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid #444;">
<button id="prompt-src-cat" class="prompt-source-btn active" onclick="switchPromptSource('cat')"
style="padding: 0.4rem 1rem; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;">
🐱 Cheshire Cat
</button>
<button id="prompt-src-fallback" class="prompt-source-btn" onclick="switchPromptSource('fallback')"
style="padding: 0.4rem 1rem; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;">
🤖 Bot Fallback
</button>
<div class="section" id="prompt-history-section">
<div class="prompt-history-header" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
<h3 style="margin: 0; cursor: pointer;" onclick="togglePromptHistoryCollapse()" id="prompt-history-toggle">
▼ Prompt History
</h3>
<button onclick="loadPromptHistory()" title="Refresh" style="background: none; border: 1px solid #444; color: #aaa; cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.85rem;">🔄</button>
</div>
<div id="prompt-history-body">
<!-- Source filter + history selector row -->
<div style="margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
<label style="font-size: 0.9rem; color: #aaa;">Source:</label>
<div style="display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid #444;">
<button id="prompt-src-all" class="prompt-source-btn active" onclick="switchPromptSource('all')"
style="padding: 0.4rem 0.8rem; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;">
All
</button>
<button id="prompt-src-cat" class="prompt-source-btn" onclick="switchPromptSource('cat')"
style="padding: 0.4rem 0.8rem; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;">
🐱 Cat
</button>
<button id="prompt-src-fallback" class="prompt-source-btn" onclick="switchPromptSource('fallback')"
style="padding: 0.4rem 0.8rem; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;">
🤖 Fallback
</button>
</div>
<select id="prompt-history-select" onchange="selectPromptEntry(this.value)" style="background: #2a2a2a; color: #ddd; border: 1px solid #444; padding: 0.35rem 0.5rem; border-radius: 4px; font-size: 0.85rem; min-width: 280px;">
<option value="">-- No prompts yet --</option>
</select>
</div>
<!-- Metadata bar -->
<div id="prompt-metadata" style="margin-bottom: 0.5rem; font-size: 0.82rem; color: #888; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem;"></div>
<!-- Toolbar: copy + truncate toggle -->
<div style="margin-bottom: 0.5rem; display: flex; align-items: center; gap: 1rem;">
<button onclick="copyPromptToClipboard()" title="Copy full prompt to clipboard" style="background: #333; border: 1px solid #555; color: #aaa; cursor: pointer; padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.8rem;">📋 Copy</button>
<label style="font-size: 0.82rem; color: #aaa; cursor: pointer; display: flex; align-items: center; gap: 0.3rem;">
<input type="checkbox" id="prompt-truncate-toggle" onchange="toggleMiddleTruncation()">
Truncate from middle
</label>
</div>
<!-- Prompt display subsections -->
<div id="prompt-display" style="max-height: 60vh; overflow-y: auto;">
<pre id="last-prompt" style="white-space: pre-wrap; word-break: break-word; background: #1a1a1a; padding: 0.75rem; border-radius: 4px; font-size: 0.8rem; line-height: 1.4; margin: 0;"></pre>
</div>
</div>
<div id="prompt-cat-info" style="margin-bottom: 0.5rem; font-size: 0.85rem; color: #aaa;"></div>
<pre id="last-prompt" style="white-space: pre-wrap; word-break: break-word;"></pre>
</div>
</div>