export function agentRating(form: FormTs) {
// Agent Performance Rating Form
// Demonstrates: StarRating, MatrixQuestion, EmojiRating, ThumbRating, RatingScale (CES), SuggestionChips
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Rate Your Support Experience',
computedValue: () => 'Help us recognize great service and improve where needed.',
customStyles: {
backgroundColor: '#0891b2',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Overall Rating
// ============================================
const overallSection = form.addSubform('overall', {
title: 'Overall Experience',
customStyles: () => {
const rating = overallSection.starRating('overallRating')?.value();
if (rating !== null && rating !== undefined && rating >= 4) {
return { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' };
}
if (rating !== null && rating !== undefined && rating <= 2) {
return { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' };
}
return {};
}
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'How would you rate your overall experience with our agent?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addEmojiRating('quickMood', {
label: 'How do you feel after this interaction?',
preset: 'satisfaction',
size: 'md',
alignment: 'center'
});
});
// ============================================
// SECTION 2: Resolution
// ============================================
const resolutionSection = form.addSubform('resolution', {
title: 'Problem Resolution'
});
resolutionSection.addRow(row => {
row.addThumbRating('issueResolved', {
label: 'Was your issue resolved?',
showLabels: true,
upLabel: 'Yes, resolved',
downLabel: 'No, not resolved',
size: 'lg',
alignment: 'center'
});
});
resolutionSection.addRow(row => {
row.addRadioButton('resolutionQuality', {
label: 'How well was your issue resolved?',
options: [
{ id: 'exceeded', name: 'Exceeded my expectations' },
{ id: 'fully', name: 'Fully resolved as expected' },
{ id: 'partially', name: 'Partially resolved' },
{ id: 'not', name: 'Not resolved at all' }
],
orientation: 'vertical',
isVisible: () => resolutionSection.thumbRating('issueResolved')?.value() === 'up'
});
});
resolutionSection.addRow(row => {
row.addDropdown('unresolvedReason', {
label: 'Why was your issue not resolved?',
options: [
{ id: 'complexity', name: 'Issue too complex' },
{ id: 'knowledge', name: 'Agent lacked knowledge' },
{ id: 'policy', name: 'Policy limitations' },
{ id: 'escalation', name: 'Needs escalation' },
{ id: 'time', name: 'Ran out of time' },
{ id: 'technical', name: 'Technical issues' },
{ id: 'other', name: 'Other reason' }
],
placeholder: 'Select reason...',
isVisible: () => resolutionSection.thumbRating('issueResolved')?.value() === 'down',
isRequired: () => resolutionSection.thumbRating('issueResolved')?.value() === 'down'
});
});
resolutionSection.addRow(row => {
row.addRatingScale('effortScore', {
label: 'How easy was it to get your issue handled?',
preset: 'ces',
alignment: 'center'
});
});
// ============================================
// SECTION 3: Agent Attributes
// ============================================
const attributesSection = form.addSubform('attributes', {
title: 'Agent Performance'
});
attributesSection.addRow(row => {
row.addMatrixQuestion('agentAttributes', {
label: 'Please rate the agent on the following:',
rows: [
{ id: 'communication', label: 'Clear communication' },
{ id: 'knowledge', label: 'Product/service knowledge' },
{ id: 'listening', label: 'Listened to my needs' },
{ id: 'empathy', label: 'Showed empathy and understanding' },
{ id: 'professionalism', label: 'Professionalism and courtesy' },
{ id: 'responsiveness', label: 'Responsiveness and speed' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
fullWidth: true
});
});
// ============================================
// SECTION 4: Highlights & Lowlights
// ============================================
const highlightsSection = form.addSubform('highlights', {
title: 'What Stood Out',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
highlightsSection.addRow(row => {
row.addSuggestionChips('positives', {
label: 'What did the agent do well? (select all that apply)',
suggestions: [
{ id: 'patient', name: 'Patient' },
{ id: 'knowledgeable', name: 'Knowledgeable' },
{ id: 'friendly', name: 'Friendly' },
{ id: 'thorough', name: 'Thorough' },
{ id: 'quick', name: 'Quick resolution' },
{ id: 'proactive', name: 'Proactive' },
{ id: 'clear', name: 'Clear explanations' },
{ id: 'followed-up', name: 'Good follow-up' }
],
alignment: 'left',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating >= 3;
}
});
});
highlightsSection.addRow(row => {
row.addSuggestionChips('improvements', {
label: 'What could be improved?',
suggestions: [
{ id: 'wait-time', name: 'Long wait time' },
{ id: 'knowledge', name: 'Product knowledge' },
{ id: 'communication', name: 'Communication' },
{ id: 'empathy', name: 'More empathy needed' },
{ id: 'follow-through', name: 'Follow-through' },
{ id: 'speed', name: 'Faster resolution' },
{ id: 'listening', name: 'Active listening' },
{ id: 'attitude', name: 'Attitude' }
],
alignment: 'left',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating <= 3;
}
});
});
// ============================================
// SECTION 5: Comments
// ============================================
const commentsSection = form.addSubform('comments', {
title: 'Additional Feedback',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
commentsSection.addSpacer({ height: '8px' });
commentsSection.addRow(row => {
row.addTextarea('feedback', {
label: () => {
const rating = overallSection.starRating('overallRating')?.value();
if (rating !== null && rating !== undefined && rating >= 4) {
return 'Would you like to share what made this a great experience?';
}
if (rating !== null && rating !== undefined && rating <= 2) {
return 'We are sorry about your experience. Please tell us what happened:';
}
return 'Any additional comments about your experience?';
},
placeholder: 'Your feedback helps us improve...',
rows: 3
});
});
commentsSection.addRow(row => {
row.addCheckbox('useForTraining', {
label: 'You may use my feedback for agent training purposes'
});
});
// ============================================
// SECTION 6: Recognition (for excellent ratings)
// ============================================
const recognitionSection = form.addSubform('recognition', {
title: 'Agent Recognition',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating === 5;
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
recognitionSection.addRow(row => {
row.addTextPanel('recognitionNote', {
computedValue: () => 'This was an excellent experience! Would you like to recognize this agent?',
customStyles: { textAlign: 'center', marginBottom: '12px' }
});
});
recognitionSection.addRow(row => {
row.addCheckbox('nominateForRecognition', {
label: 'Yes, please recognize this agent for outstanding service'
});
});
recognitionSection.addRow(row => {
row.addTextarea('recognitionMessage', {
label: 'Message for the agent (optional):',
placeholder: 'A personal note of appreciation...',
rows: 2,
isVisible: () => recognitionSection.checkbox('nominateForRecognition')?.value() === true
});
});
// ============================================
// SECTION 7: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Feedback Summary',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
const resolved = resolutionSection.thumbRating('issueResolved')?.value();
return rating !== null && resolved !== null;
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const rating = overallSection.starRating('overallRating')?.value();
const mood = overallSection.emojiRating('quickMood')?.value();
const resolved = resolutionSection.thumbRating('issueResolved')?.value();
const effort = resolutionSection.ratingScale('effortScore')?.value();
const positives = highlightsSection.suggestionChips('positives')?.value() || [];
const improvements = highlightsSection.suggestionChips('improvements')?.value() || [];
const nominated = recognitionSection.checkbox('nominateForRecognition')?.value();
const moodLabels: Record<string, string> = {
'very-bad': 'Very Unsatisfied',
'bad': 'Unsatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
const effortLabels: Record<number, string> = {
1: 'Very Difficult',
2: 'Difficult',
3: 'Neutral',
4: 'Easy',
5: 'Very Easy',
6: 'Extremely Easy',
7: 'Effortless'
};
let summary = 'Agent Rating Summary\n';
summary += '═'.repeat(25) + '\n\n';
if (rating) {
summary += `Overall Rating: ${'★'.repeat(rating)}${'☆'.repeat(5 - rating)} (${rating}/5)\n`;
}
if (mood) {
summary += `Feeling: ${moodLabels[mood] || mood}\n`;
}
summary += `Issue Resolved: ${resolved === 'up' ? 'Yes' : 'No'}\n`;
if (effort) {
summary += `Effort Level: ${effortLabels[effort] || effort}\n`;
}
if (positives.length > 0) {
summary += `\n+ Positives: ${positives.length} items\n`;
}
if (improvements.length > 0) {
summary += `! Improvements: ${improvements.length} items\n`;
}
if (nominated) {
summary += '\n⭐ Nominated for recognition';
}
return summary;
},
customStyles: () => {
const rating = overallSection.starRating('overallRating')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (rating !== null && rating !== undefined && rating >= 4) {
return { ...baseStyles, backgroundColor: '#ecfdf5', borderLeft: '4px solid #10b981' };
} else if (rating !== null && rating !== undefined && rating <= 2) {
return { ...baseStyles, backgroundColor: '#fef2f2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f0f9ff', borderLeft: '4px solid #0891b2' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const rating = overallSection.starRating('overallRating')?.value();
if (rating !== null && rating !== undefined && rating === 5) return 'Submit & Recognize';
return 'Submit Rating';
},
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your feedback!',
message: 'Your rating helps us recognize great agents and improve our service. We appreciate you taking the time to share your experience.'
});
}