Please enter a customer comment first.

`; replyOutput.className = 'p-4 rounded-lg reply-default'; pdfButtonContainer.style.display = 'none'; return; } const type = detectCommentType(comment); const tone = replyToneSelect.value; let baseReply = state.templates[type]; // Simple tone modification logic if (tone === 'Friendly') { if (type === 'positive') baseReply = `Wow, thanks so much for the awesome feedback! We're so happy you're happy. Cheers!`; if (type === 'negative') baseReply = `Oh no, we're really sorry to hear that. That's definitely not the experience we want for you. Drop our support team a line at support@example.com, and they'll get it sorted out.`; } else if (tone === 'Empathetic') { if (type === 'negative') baseReply = `We are genuinely sorry to hear about your experience, and we understand how frustrating this must be. Your feedback is important, and we want to resolve this for you. Please contact us at support@example.com at your convenience.`; } replyOutput.innerHTML = `

${baseReply.replace(/\n/g, '
')}

`; replyOutput.className = `p-4 rounded-lg reply-${type}`; pdfButtonContainer.style.display = 'block'; }; // --- Rendering Functions --- const renderConfig = () => { templatePositiveInput.value = state.templates.positive; templateNegativeInput.value = state.templates.negative; templateInquiryInput.value = state.templates.inquiry; templateDefaultInput.value = state.templates.default; }; // --- Tab & Navigation Logic --- function switchTab(targetTabId) { if (currentTab === 'config') { saveConfig(); } currentTab = targetTabId; tabs.forEach(tab => tab.classList.toggle('active', tab.dataset.tab === currentTab)); tabContents.forEach(content => content.classList.toggle('active', content.id === currentTab)); updateNavButtons(); } function updateNavButtons() { if (currentTab === 'dashboard') { nextBtn.textContent = 'Manage Templates'; prevBtn.style.display = 'none'; } else { nextBtn.textContent = 'Go to Generator'; prevBtn.style.display = 'inline-flex'; } } // --- Event Handlers --- generateReplyBtn.addEventListener('click', generateReply); tabs.forEach(tab => tab.addEventListener('click', () => switchTab(tab.dataset.tab))); nextBtn.addEventListener('click', () => currentTab === 'dashboard' ? switchTab('config') : switchTab('dashboard')); prevBtn.addEventListener('click', () => currentTab === 'config' ? switchTab('dashboard') : switchTab('dashboard')); // --- PDF Download --- downloadPdfBtn.addEventListener('click', async () => { const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const originalComment = customerCommentInput.value; const generatedReply = replyOutput.innerText; doc.setFontSize(16); doc.setFont('helvetica', 'bold'); doc.text('Customer Comment & Generated Reply', 14, 22); doc.setFontSize(11); doc.setFont('helvetica', 'bold'); doc.text('Original Comment:', 14, 40); doc.setFont('helvetica', 'normal'); const commentLines = doc.splitTextToSize(originalComment, 180); doc.text(commentLines, 14, 46); const replyY = 46 + (commentLines.length * 5) + 10; doc.setFont('helvetica', 'bold'); doc.text('Generated Reply:', 14, replyY); doc.setFont('helvetica', 'normal'); const replyLines = doc.splitTextToSize(generatedReply, 180); doc.text(replyLines, 14, replyY + 6); doc.save(`Customer-Reply-${new Date().toISOString().slice(0,10)}.pdf`); }); // --- Initial Load --- renderConfig(); updateNavButtons(); });