66 lines
2.7 KiB
JavaScript
66 lines
2.7 KiB
JavaScript
async function renderPrompts() {
|
|
const content = document.getElementById('pageContent');
|
|
content.innerHTML = `
|
|
<div class="page-header">
|
|
<div class="page-header-left">
|
|
<h1 class="page-title">Prompt Library</h1>
|
|
<p class="page-subtitle">Reusable templates for common agent tasks</p>
|
|
</div>
|
|
</div>
|
|
<div id="promptGrid" class="grid grid-3"></div>
|
|
`;
|
|
|
|
try {
|
|
const prompts = await api.getPrompts();
|
|
const entries = Object.entries(prompts);
|
|
const grid = document.getElementById('promptGrid');
|
|
|
|
if (entries.length === 0) {
|
|
grid.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><div class="empty-state-icon">📝</div><div class="empty-state-title">No prompt templates</div></div>';
|
|
return;
|
|
}
|
|
|
|
grid.innerHTML = entries.map(([name, content]) => {
|
|
const displayName = name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
|
|
const preview = content.slice(0, 180);
|
|
const lines = content.split('\n').length;
|
|
return `<div class="skill-card" onclick="viewPrompt('${name}')">
|
|
<div class="skill-card-header">
|
|
<div class="skill-card-icon">📝</div>
|
|
<div class="skill-card-name">${displayName}</div>
|
|
</div>
|
|
<div class="skill-card-desc"><pre style="background:none;border:none;padding:0;max-height:100px;overflow:hidden;font-size:11px;color:var(--text-muted)">${escapeHtml(preview)}${preview.length >= 180 ? '...' : ''}</pre></div>
|
|
<div class="skill-card-footer"><span class="badge badge-info">${lines} lines</span></div>
|
|
</div>`;
|
|
}).join('');
|
|
} catch (err) {
|
|
document.getElementById('promptGrid').innerHTML = `<div class="empty-state" style="grid-column:1/-1"><div class="empty-state-icon">⚠</div><div class="empty-state-title">${escapeHtml(err.message)}</div></div>`;
|
|
}
|
|
}
|
|
|
|
async function viewPrompt(name) {
|
|
let content = '';
|
|
try {
|
|
const prompts = await api.getPrompts();
|
|
content = prompts[name] || '';
|
|
} catch {}
|
|
|
|
const displayName = name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
|
|
|
|
showModal(`Prompt: ${displayName}`, `
|
|
<pre style="white-space:pre-wrap;font-size:12px;max-height:60vh;overflow:auto">${escapeHtml(content)}</pre>
|
|
`, `
|
|
<button class="btn btn-primary" onclick="copyPromptContent('${escapeHtml(content).replace(/'/g, "\\'")}')">📋 Copy</button>
|
|
<button class="btn btn-ghost" onclick="closeModal()">Close</button>
|
|
`);
|
|
}
|
|
|
|
function copyPromptContent(text) {
|
|
const decoded = text.replace(/\\'/g, "'");
|
|
navigator.clipboard.writeText(decoded).then(() => {
|
|
showToast('Copied to clipboard', 'success');
|
|
}).catch(() => {
|
|
showToast('Failed to copy', 'error');
|
|
});
|
|
}
|