fix: preserve collapsible subsection state across polling re-renders
- Use stable section IDs (without Date.now()) so collapse state can be tracked across re-renders - Snapshot collapsed state before innerHTML replacement, restore after - Prevents the 10s polling from expanding all subsections every time
This commit is contained in:
@@ -162,6 +162,14 @@ function renderPromptEntry(entry) {
|
|||||||
// Parse full_prompt into sections
|
// Parse full_prompt into sections
|
||||||
const sections = parsePromptSections(entry.full_prompt || '');
|
const sections = parsePromptSections(entry.full_prompt || '');
|
||||||
|
|
||||||
|
// Snapshot which subsections are currently collapsed (before re-render)
|
||||||
|
const sectionIds = ['system', 'context', 'conversation', 'response'];
|
||||||
|
const collapsedState = {};
|
||||||
|
sectionIds.forEach(id => {
|
||||||
|
const el = document.getElementById(`prompt-section-${id}`);
|
||||||
|
collapsedState[id] = el && el.classList.contains('collapsed');
|
||||||
|
});
|
||||||
|
|
||||||
// Build display HTML with collapsible subsections
|
// Build display HTML with collapsible subsections
|
||||||
let displayHtml = '';
|
let displayHtml = '';
|
||||||
|
|
||||||
@@ -192,6 +200,16 @@ function renderPromptEntry(entry) {
|
|||||||
const displayEl = document.getElementById('prompt-display');
|
const displayEl = document.getElementById('prompt-display');
|
||||||
displayEl.innerHTML = displayHtml;
|
displayEl.innerHTML = displayHtml;
|
||||||
|
|
||||||
|
// Restore collapsed state from snapshot
|
||||||
|
sectionIds.forEach(id => {
|
||||||
|
const el = document.getElementById(`prompt-section-${id}`);
|
||||||
|
if (el && collapsedState[id]) {
|
||||||
|
el.classList.add('collapsed');
|
||||||
|
const header = el.previousElementSibling;
|
||||||
|
if (header) header.innerHTML = header.innerHTML.replace('▼', '▶');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Also set the raw text into the <pre> for copy functionality
|
// Also set the raw text into the <pre> for copy functionality
|
||||||
let rawText = entry.full_prompt || '';
|
let rawText = entry.full_prompt || '';
|
||||||
if (entry.response) {
|
if (entry.response) {
|
||||||
@@ -244,12 +262,12 @@ function parsePromptSections(fullPrompt) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function buildCollapsibleSection(title, content, sectionId) {
|
function buildCollapsibleSection(title, content, sectionId) {
|
||||||
const uniqueId = `prompt-section-${sectionId}-${Date.now()}`;
|
const id = `prompt-section-${sectionId}`;
|
||||||
return `
|
return `
|
||||||
<div class="prompt-subsection-header" onclick="togglePromptSubsection('${uniqueId}')">
|
<div class="prompt-subsection-header" onclick="togglePromptSubsection('${id}')">
|
||||||
▼ ${escapeHtml(title)}
|
▼ ${escapeHtml(title)}
|
||||||
</div>
|
</div>
|
||||||
<div class="prompt-subsection-body" id="${uniqueId}">
|
<div class="prompt-subsection-body" id="${id}">
|
||||||
<pre style="white-space: pre-wrap; word-break: break-word; background: #1a1a1a; padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; line-height: 1.4; margin: 0.25rem 0;">${escapeHtml(content)}</pre>
|
<pre style="white-space: pre-wrap; word-break: break-word; background: #1a1a1a; padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; line-height: 1.4; margin: 0.25rem 0;">${escapeHtml(content)}</pre>
|
||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user