Show first 10 lines of system prompt with click to expand for full content

This commit is contained in:
Mario Zechner 2026-01-03 23:04:23 +01:00
parent f5e38c4007
commit f9838bb5d4
2 changed files with 35 additions and 13 deletions

View file

@ -495,6 +495,9 @@
padding: var(--line-height);
border-radius: 4px;
margin-bottom: var(--line-height);
}
.system-prompt.expandable {
cursor: pointer;
}
@ -503,26 +506,35 @@
color: var(--customMessageLabel);
}
.system-prompt-collapsed {
.system-prompt-preview {
color: var(--customMessageText);
white-space: pre-wrap;
word-wrap: break-word;
font-size: 11px;
margin-top: var(--line-height);
}
.system-prompt-content {
.system-prompt-expand-hint {
color: var(--muted);
font-style: italic;
margin-top: 4px;
}
.system-prompt-full {
display: none;
color: var(--customMessageText);
white-space: pre-wrap;
word-wrap: break-word;
font-size: 11px;
max-height: 400px;
overflow-y: auto;
margin-top: var(--line-height);
}
.system-prompt.expanded .system-prompt-collapsed {
.system-prompt.expanded .system-prompt-preview,
.system-prompt.expanded .system-prompt-expand-hint {
display: none;
}
.system-prompt.expanded .system-prompt-content {
.system-prompt.expanded .system-prompt-full {
display: block;
}

View file

@ -964,13 +964,23 @@
</div>`;
if (systemPrompt) {
const promptLines = systemPrompt.split('\n').length;
const promptChars = systemPrompt.length;
html += `<div class="system-prompt" onclick="this.classList.toggle('expanded')">
<div class="system-prompt-header">System Prompt</div>
<div class="system-prompt-collapsed">${promptLines} lines, ${promptChars.toLocaleString()} chars (click to expand)</div>
<div class="system-prompt-content">${escapeHtml(systemPrompt)}</div>
</div>`;
const lines = systemPrompt.split('\n');
const previewLines = 10;
if (lines.length > previewLines) {
const preview = lines.slice(0, previewLines).join('\n');
const remaining = lines.length - previewLines;
html += `<div class="system-prompt expandable" onclick="this.classList.toggle('expanded')">
<div class="system-prompt-header">System Prompt</div>
<div class="system-prompt-preview">${escapeHtml(preview)}</div>
<div class="system-prompt-expand-hint">... (${remaining} more lines, click to expand)</div>
<div class="system-prompt-full">${escapeHtml(systemPrompt)}</div>
</div>`;
} else {
html += `<div class="system-prompt">
<div class="system-prompt-header">System Prompt</div>
<div class="system-prompt-full" style="display: block">${escapeHtml(systemPrompt)}</div>
</div>`;
}
}
if (tools && tools.length > 0) {