Add tab instructions modal for permission prompts
This commit is contained in:
parent
acd75b0303
commit
af8fc5ca88
GPG key ID:
22B5C6D66A38B06C
1 changed files with 177 additions and 1 deletions
|
|
@ -307,6 +307,76 @@
|
|||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #2a2a2a;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal-textarea {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
padding: 12px;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 6px;
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.modal-textarea:focus {
|
||||
outline: none;
|
||||
border-color: #ff9800;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #3a3a3a;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
|
|
@ -357,6 +427,21 @@
|
|||
.prompt-tool-input {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-actions {
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.modal-textarea {
|
||||
background: #f5f5f5;
|
||||
border-color: #e0e0e0;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -385,17 +470,39 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="instructionsModal" onclick="handleModalOverlayClick(event)">
|
||||
<div class="modal" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">Add Instructions</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-description">
|
||||
Your instructions will be sent with the approval.
|
||||
</div>
|
||||
<textarea
|
||||
class="modal-textarea"
|
||||
id="instructionsTextarea"
|
||||
placeholder="Enter your instructions..."></textarea>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" onclick="closeInstructionsModal()">Cancel</button>
|
||||
<button class="btn btn-submit" onclick="submitInstructions()">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const state = {
|
||||
sessions: new Map(),
|
||||
prompts: new Map(),
|
||||
eventSource: null,
|
||||
reconnectTimeout: null,
|
||||
instructionsModalPromptId: null,
|
||||
};
|
||||
|
||||
const $status = document.getElementById('status');
|
||||
const $sessions = document.getElementById('sessions');
|
||||
const $prompts = document.getElementById('prompts');
|
||||
const $instructionsModal = document.getElementById('instructionsModal');
|
||||
const $instructionsTextarea = document.getElementById('instructionsTextarea');
|
||||
|
||||
function setStatus(connected) {
|
||||
if (connected) {
|
||||
|
|
@ -613,7 +720,7 @@
|
|||
</div>
|
||||
<div class="prompt-actions">
|
||||
<button class="btn btn-submit" onclick="submitRichPrompt('${p.id}')">Submit</button>
|
||||
${allowsTabInstructions ? '<button class="btn btn-secondary" disabled data-tooltip="Coming soon">Add instructions</button>' : ''}
|
||||
${allowsTabInstructions ? `<button class="btn btn-secondary" onclick="openInstructionsModal('${p.id}')">Add instructions</button>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -813,6 +920,75 @@
|
|||
}
|
||||
};
|
||||
|
||||
window.openInstructionsModal = (promptId) => {
|
||||
state.instructionsModalPromptId = Number(promptId);
|
||||
$instructionsTextarea.value = '';
|
||||
$instructionsModal.classList.add('active');
|
||||
$instructionsTextarea.focus();
|
||||
};
|
||||
|
||||
window.closeInstructionsModal = () => {
|
||||
$instructionsModal.classList.remove('active');
|
||||
state.instructionsModalPromptId = null;
|
||||
$instructionsTextarea.value = '';
|
||||
};
|
||||
|
||||
window.handleModalOverlayClick = (event) => {
|
||||
if (event.target === $instructionsModal) {
|
||||
closeInstructionsModal();
|
||||
}
|
||||
};
|
||||
|
||||
window.submitInstructions = async () => {
|
||||
const promptId = state.instructionsModalPromptId;
|
||||
if (!promptId) {
|
||||
console.error('No prompt ID for instructions');
|
||||
return;
|
||||
}
|
||||
|
||||
const instruction = $instructionsTextarea.value.trim();
|
||||
if (!instruction) {
|
||||
console.error('Please enter instructions');
|
||||
return;
|
||||
}
|
||||
|
||||
const prompt = state.prompts.get(promptId);
|
||||
if (!prompt || !prompt.json) {
|
||||
console.error('Invalid prompt');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get selected option
|
||||
const selected = document.querySelector(`input[name="prompt-${promptId}"]:checked`);
|
||||
if (!selected) {
|
||||
console.error('No option selected');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = {
|
||||
type: 'tab_instructions',
|
||||
selected_option: parseInt(selected.value, 10),
|
||||
instruction: instruction,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/prompts/${promptId}/answer`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(response),
|
||||
});
|
||||
if (!res.ok) {
|
||||
console.error('Failed to submit instructions:', await res.text());
|
||||
} else {
|
||||
closeInstructionsModal();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error submitting instructions:', error);
|
||||
}
|
||||
};
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
|
|
|
|||
Loading…
Reference in a new issue