import { Component, Input, Output, EventEmitter, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MultipleChoiceQuestion, MultipleChoiceOption } from '@ask-me-mcp/askme-shared';
/**
* Component for responding to multiple choice questions
*
* @remarks
* This component displays multiple choice questions where users can
* select options as true/false and add comments to each option.
*
* @example
* ```html
* <app-multiple-choice-response
* [requestId]="request.id"
* [questions]="multipleChoiceQuestions"
* (responseSubmitted)="handleResponse($event)">
* </app-multiple-choice-response>
* ```
*/
@Component({
selector: 'app-multiple-choice-response',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<div class="multiple-choice-response" role="region" aria-label="Multiple Choice Response Form">
<!-- Bail-out buttons at the top as big buttons -->
<div class="top-bail-out-buttons" role="group" aria-label="Alternative Tool Options">
<button
type="button"
class="big-bail-out-btn"
(click)="bailOutToTool('ask-one-question')"
[disabled]="isSubmitting()"
aria-label="Switch to open-ended question format instead of multiple choice"
title="Redirect to open-ended question instead">
🤔 Use Open Question Instead
</button>
<button
type="button"
class="big-bail-out-btn"
(click)="bailOutToTool('challenge-hypothesis')"
[disabled]="isSubmitting()"
aria-label="Switch to hypothesis challenge format instead of multiple choice"
title="Redirect to validate assumptions instead">
🔍 Use Hypothesis Challenge Instead
</button>
</div>
<div class="questions-container" role="group" aria-label="Multiple Choice Questions">
@for (question of questions(); track question.id; let questionIndex = $index) {
<div class="question-card"
[class.grayed-out]="hasWontAnswer(question.id)"
role="group"
[attr.aria-labelledby]="'question-' + questionIndex + '-text'"
[attr.aria-describedby]="'question-' + questionIndex + '-status'">
<h3 id="question-{{questionIndex}}-text" class="question-text">{{ question.text }}</h3>
<div id="question-{{questionIndex}}-status" class="sr-only">
@if (hasWontAnswer(question.id)) {
Question marked as won't answer
} @else {
Question has {{ getSelectedOptionsForQuestion(question.id).length }} options selected
}
</div>
<!-- Won't Answer Option -->
<div class="wont-answer-section">
<label class="wont-answer-label">
<input
type="checkbox"
[checked]="hasWontAnswer(question.id)"
(change)="toggleWontAnswer(question.id)"
[disabled]="isSubmitting()"
class="wont-answer-checkbox"
[attr.aria-describedby]="'question-' + questionIndex + '-wont-answer-desc'"
tabindex="0">
<span class="wont-answer-text">Won't answer this question</span>
</label>
<div id="question-{{questionIndex}}-wont-answer-desc" class="sr-only">
Check this option if you prefer not to answer this question
</div>
</div>
<!-- Why field (only show when won't answer is selected) -->
@if (hasWontAnswer(question.id)) {
<div class="why-section">
<label class="why-label" [attr.for]="'why-input-' + questionIndex">
<span class="why-label-text">Why won't you answer this question?</span>
<textarea
[attr.id]="'why-input-' + questionIndex"
class="why-input"
[ngModel]="getQuestionWhy(question.id)"
(ngModelChange)="setQuestionWhy(question.id, $event)"
placeholder="Please explain why you prefer not to answer this question..."
[disabled]="isSubmitting()"
rows="4"
maxlength="1000"
[attr.aria-describedby]="'why-counter-' + questionIndex"
aria-label="Explanation for not answering this question"
tabindex="0">
</textarea>
<div [attr.id]="'why-counter-' + questionIndex" class="why-counter" role="status" aria-live="polite">
{{ (getQuestionWhy(question.id) || '').length }}/1000 characters
</div>
</label>
</div>
}
<!-- Options grid (only show when not won't answer) -->
@if (!hasWontAnswer(question.id)) {
<div class="options-grid" role="group" [attr.aria-labelledby]="'question-' + questionIndex + '-text'">
@for (option of question.options; track option.id; let optionIndex = $index) {
<div class="option-item"
[class.selected]="option.selected"
role="group"
[attr.aria-labelledby]="'option-' + questionIndex + '-' + optionIndex + '-text'">
<div class="option-header">
<label class="option-label" [attr.for]="'option-' + questionIndex + '-' + optionIndex + '-checkbox'">
<input
[attr.id]="'option-' + questionIndex + '-' + optionIndex + '-checkbox'"
type="checkbox"
[checked]="option.selected"
(change)="toggleOption(question.id, option.id)"
[disabled]="isSubmitting()"
[attr.aria-describedby]="'option-' + questionIndex + '-' + optionIndex + '-desc'"
tabindex="0">
<span id="option-{{questionIndex}}-{{optionIndex}}-text" class="option-text">{{ option.text }}</span>
</label>
<div id="option-{{questionIndex}}-{{optionIndex}}-desc" class="sr-only">
@if (option.selected) {
Option selected with priority {{ getPriorityText(option.priority ?? 0) }}
} @else {
Option not selected
}
</div>
</div>
<!-- Priority Arrows (only show when option is selected) -->
@if (option.selected) {
<div class="priority-section">
<span class="priority-label">Priority:</span>
<div class="priority-arrows">
@for (level of [-3,-2,-1,0,1,2,3]; track level) {
<button
type="button"
class="priority-button"
[class.selected]="(option.priority ?? 0) === level"
(click)="setPriority(question.id, option.id, level)"
[disabled]="isSubmitting()"
[title]="getPriorityTooltip(level)">
{{ getPriorityArrow(level) }}
</button>
}
<span class="priority-text">{{ getPriorityText(option.priority ?? 0) }}</span>
</div>
</div>
}
<details class="comment-section" [open]="option.comment && option.comment.length > 0">
<summary class="comment-toggle">
@if (option.comment && option.comment.length > 0) {
<span class="comment-indicator">💬</span>
} @else {
<span class="comment-indicator">💭</span>
}
Add comment
</summary>
<div class="comment-input-wrapper">
<textarea
class="comment-input"
[(ngModel)]="option.comment"
placeholder="Add your comment here..."
[disabled]="isSubmitting()"
rows="3"
maxlength="500">
</textarea>
<div class="comment-counter">
{{ (option.comment || '').length }}/500
</div>
</div>
</details>
</div>
}
</div>
}
</div>
}
</div>
<div class="response-actions">
<div class="selection-summary">
Selected: {{ selectedCount() }} / {{ totalOptions() }}
</div>
<div class="action-buttons">
<div class="main-action-buttons">
<button
type="button"
class="btn-secondary"
(click)="clearAll()"
[disabled]="isSubmitting() || selectedCount() === 0">
Clear All
</button>
<button
type="button"
class="btn-icon btn-done"
(click)="submitResponse('done')"
[disabled]="isSubmitting()"
title="Submit and I am done with Answering">
✅
</button>
<button
type="button"
class="btn-icon btn-drill-deeper"
(click)="submitResponse('drill-deeper')"
[disabled]="isSubmitting()"
title="Submit, drill deeper with more multiple choice questions">
🔍
</button>
<button
type="button"
class="btn-primary"
(click)="submitResponse('normal')"
[disabled]="isSubmitting()">
@if (isSubmitting()) {
<span class="spinner"></span>
Submitting...
} @else {
Submit Response
}
</button>
</div>
</div>
</div>
</div>
`,
styles: [`
.multiple-choice-response {
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: 800px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.top-bail-out-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 1rem;
}
.big-bail-out-btn {
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: 600;
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
color: #856404;
border: 2px solid #ffc107;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 280px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.big-bail-out-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
border-color: #f57c00;
color: #f57c00;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.big-bail-out-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.questions-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.question-card {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.question-text {
margin: 0 0 1rem 0;
font-size: 1.1rem;
font-weight: 600;
color: #333;
}
.question-card.grayed-out {
opacity: 0.6;
background: #f0f0f0;
}
.question-card.grayed-out .question-text {
color: #666;
}
.wont-answer-section {
margin-bottom: 1rem;
padding: 0.75rem;
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 6px;
}
.wont-answer-label {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
font-weight: 500;
color: #856404;
}
.wont-answer-checkbox {
width: 1.2rem;
height: 1.2rem;
margin: 0;
accent-color: #ffc107;
}
.wont-answer-text {
flex: 1;
}
.options-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.options-grid.disabled {
pointer-events: none;
opacity: 0.5;
}
.option-item {
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 1rem;
background: #fafafa;
transition: background-color 0.2s ease;
}
.option-item:has(input:checked) {
background: #e8f5e8;
border-color: #4caf50;
}
.option-item.selected {
background: #e8f5e8;
border-color: #4caf50;
}
.option-header {
margin-bottom: 0.5rem;
}
.why-section {
margin: 1rem 0;
padding: 1rem;
background: #fff8e1;
border: 1px solid #ffcc02;
border-radius: 6px;
}
.why-label {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.why-label-text {
font-weight: 500;
color: #f57c00;
font-size: 0.95rem;
}
.why-input {
width: 100%;
border: 1px solid #ffcc02;
border-radius: 4px;
padding: 0.75rem;
font-family: inherit;
font-size: 0.9rem;
resize: vertical;
background: #ffffff;
}
.why-input:focus {
outline: none;
border-color: #f57c00;
box-shadow: 0 0 0 2px rgba(245, 124, 0, 0.2);
}
.why-counter {
font-size: 0.75rem;
color: #f57c00;
text-align: right;
margin-top: 0.25rem;
}
.priority-section {
margin: 0.75rem 0;
padding: 0.5rem;
background: #f8f9fa;
border-radius: 4px;
border-left: 3px solid #4caf50;
}
.priority-label {
display: block;
font-size: 0.9rem;
font-weight: 500;
color: #555;
margin-bottom: 0.5rem;
}
.priority-arrows {
display: flex;
align-items: center;
gap: 0.25rem;
flex-wrap: wrap;
}
.priority-button {
background: none;
border: 2px solid #ddd;
font-size: 1.2rem;
cursor: pointer;
color: #666;
transition: all 0.2s ease;
padding: 0.375rem 0.5rem;
border-radius: 6px;
min-width: 2.5rem;
font-weight: 500;
}
.priority-button:hover {
border-color: #2196f3;
background: rgba(33, 150, 243, 0.1);
color: #2196f3;
}
.priority-button.selected {
background: #2196f3;
border-color: #2196f3;
color: white;
}
.priority-button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.priority-text {
margin-left: 0.75rem;
font-size: 0.9rem;
color: #666;
font-weight: 500;
}
.option-label {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
font-weight: 500;
}
.option-label input[type="checkbox"] {
width: 1.2rem;
height: 1.2rem;
margin: 0;
}
.option-text {
flex: 1;
}
.comment-section {
margin-top: 0.75rem;
}
.comment-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
color: #666;
list-style: none;
}
.comment-toggle::-webkit-details-marker {
display: none;
}
.comment-indicator {
font-size: 1rem;
}
.comment-input-wrapper {
margin-top: 0.5rem;
position: relative;
}
.comment-input {
width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.5rem;
font-family: inherit;
font-size: 0.9rem;
resize: vertical;
min-height: 60px;
}
.comment-input:focus {
outline: none;
border-color: #2196f3;
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}
.comment-counter {
position: absolute;
bottom: 0.25rem;
right: 0.5rem;
font-size: 0.75rem;
color: #999;
background: rgba(255, 255, 255, 0.9);
padding: 0.125rem 0.25rem;
border-radius: 2px;
}
.response-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e0e0e0;
}
.selection-summary {
font-weight: 500;
color: #555;
}
.action-buttons {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
}
.main-action-buttons {
display: flex;
gap: 1rem;
}
.btn-primary, .btn-secondary, .btn-done, .btn-drill-deeper {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.btn-primary {
background: #2196f3;
color: white;
}
.btn-primary:hover:not(:disabled) {
background: #1976d2;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover:not(:disabled) {
background: #5a6268;
}
.btn-done {
background: #28a745;
color: white;
}
.btn-done:hover:not(:disabled) {
background: #218838;
}
.btn-drill-deeper {
background: #6f42c1;
color: white;
}
.btn-drill-deeper:hover:not(:disabled) {
background: #5a32a3;
}
.btn-primary:disabled, .btn-secondary:disabled, .btn-done:disabled, .btn-drill-deeper:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-icon {
padding: 0.5rem;
width: 2.5rem;
height: 2.5rem;
border: none;
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.btn-icon:hover:not(:disabled) {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn-icon.btn-done {
background: #28a745;
color: white;
}
.btn-icon.btn-done:hover:not(:disabled) {
background: #218838;
}
.btn-icon.btn-drill-deeper {
background: #6f42c1;
color: white;
}
.btn-icon.btn-drill-deeper:hover:not(:disabled) {
background: #5a32a3;
}
.btn-icon:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.spinner {
width: 1rem;
height: 1rem;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (max-width: 600px) {
.multiple-choice-response {
gap: 1rem;
}
.question-card {
padding: 1rem;
}
.response-actions {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.action-buttons {
justify-content: center;
}
.top-bail-out-buttons {
flex-direction: column;
gap: 0.75rem;
}
.big-bail-out-btn {
min-width: auto;
font-size: 1rem;
padding: 0.875rem 1.5rem;
}
}
`]
})
export class MultipleChoiceResponseComponent {
@Input({ required: true }) requestId!: string;
@Input({ required: true }) set questionsInput(value: MultipleChoiceQuestion[]) {
// Deep clone to avoid mutating input - use structuredClone if available, fallback to JSON
if (typeof structuredClone !== 'undefined') {
this.questions.set(structuredClone(value));
} else {
this.questions.set(JSON.parse(JSON.stringify(value)));
}
}
@Output() responseSubmitted = new EventEmitter<{
requestId: string;
type: 'multiple-choice';
questions: MultipleChoiceQuestion[];
completionStatus?: 'done' | 'drill-deeper';
}>();
@Output() toolRedirect = new EventEmitter<{ requestId: string; toolName: string; message: string }>();
questions = signal<MultipleChoiceQuestion[]>([]);
isSubmitting = signal(false);
selectedCount = computed(() => {
return this.questions().reduce((count, question) =>
count + question.options.filter(option => option.selected).length, 0
);
});
totalOptions = computed(() => {
return this.questions().reduce((count, question) => count + question.options.length, 0);
});
toggleOption(questionId: string, optionId: string): void {
this.questions.update(questions =>
questions.map(question => {
if (question.id === questionId) {
return {
...question,
options: question.options.map(option =>
option.id === optionId
? { ...option, selected: !option.selected }
: option
)
};
}
return question;
})
);
}
clearAll(): void {
this.questions.update(questions =>
questions.map(question => ({
...question,
options: question.options.map(option => ({
...option,
selected: false,
comment: '',
priority: undefined,
wontAnswer: false
})),
whyNotAnswering: undefined
}))
);
}
/**
* Get selected options for a specific question (accessibility helper)
*/
getSelectedOptionsForQuestion(questionId: string): MultipleChoiceOption[] {
const question = this.questions().find(q => q.id === questionId);
return question ? question.options.filter(opt => opt.selected) : [];
}
bailOutToTool(toolName: 'ask-one-question' | 'challenge-hypothesis') {
if (this.isSubmitting()) return;
const messages = {
'ask-one-question': 'STOP! The human REFUSES to answer this multiple choice format and DEMANDS you use the ask-one-question tool instead. Do NOT continue with structured questions. IMMEDIATELY reformulate as an open-ended question and call ask-one-question.',
'challenge-hypothesis': 'STOP! The human REFUSES to answer this multiple choice format and DEMANDS you use the challenge-hypothesis tool instead. Do NOT continue with structured questions. IMMEDIATELY reformulate as hypothesis statements to evaluate and call challenge-hypothesis.'
};
this.toolRedirect.emit({
requestId: this.requestId,
toolName,
message: messages[toolName]
});
}
hasWontAnswer(questionId: string): boolean {
const question = this.questions().find(q => q.id === questionId);
return question?.options.some(option => option.wontAnswer) || false;
}
toggleWontAnswer(questionId: string): void {
this.questions.update(questions =>
questions.map(question => {
if (question.id === questionId) {
const hasWontAnswer = question.options.some(option => option.wontAnswer);
return {
...question,
options: question.options.map(option => ({
...option,
wontAnswer: !hasWontAnswer,
// Clear selection and priority when setting won't answer
selected: hasWontAnswer ? option.selected : false,
priority: hasWontAnswer ? option.priority : undefined
}))
};
}
return question;
})
);
}
setPriority(questionId: string, optionId: string, priority: number): void {
this.questions.update(questions =>
questions.map(question => {
if (question.id === questionId) {
return {
...question,
options: question.options.map(option =>
option.id === optionId
? { ...option, priority: priority }
: option
)
};
}
return question;
})
);
}
getQuestionWhy(questionId: string): string {
const question = this.questions().find(q => q.id === questionId);
return question?.whyNotAnswering || '';
}
setQuestionWhy(questionId: string, why: string): void {
this.questions.update(questions =>
questions.map(question =>
question.id === questionId
? { ...question, whyNotAnswering: why }
: question
)
);
}
getPriorityArrow(level: number): string {
switch (level) {
case -3: return '↓↓↓';
case -2: return '↓↓';
case -1: return '↓';
case 0: return '→';
case 1: return '↑';
case 2: return '↑↑';
case 3: return '↑↑↑';
default: return '→';
}
}
getPriorityText(level: number): string {
switch (level) {
case -3: return 'Lowest';
case -2: return 'Lower';
case -1: return 'Low';
case 0: return 'Neutral';
case 1: return 'High';
case 2: return 'Higher';
case 3: return 'Highest';
default: return 'Neutral';
}
}
getPriorityTooltip(level: number): string {
switch (level) {
case -3: return 'Lowest priority - least important';
case -2: return 'Lower priority - less important';
case -1: return 'Low priority - somewhat less important';
case 0: return 'Neutral priority - standard importance';
case 1: return 'High priority - somewhat more important';
case 2: return 'Higher priority - more important';
case 3: return 'Highest priority - most important';
default: return 'Neutral priority';
}
}
submitResponse(completionType: 'normal' | 'done' | 'drill-deeper' = 'normal'): void {
if (this.isSubmitting()) return;
console.log('MultipleChoice: Submitting response for request:', this.requestId);
console.log('MultipleChoice: Questions data:', this.questions());
console.log('MultipleChoice: Completion type:', completionType);
this.isSubmitting.set(true);
try {
const response: {
requestId: string;
type: 'multiple-choice';
questions: MultipleChoiceQuestion[];
completionStatus?: 'done' | 'drill-deeper';
} = {
requestId: this.requestId,
type: 'multiple-choice',
questions: this.questions()
};
if (completionType !== 'normal') {
response.completionStatus = completionType;
}
this.responseSubmitted.emit(response);
// Reset submitting state after a short delay to allow for resubmission if needed
setTimeout(() => {
this.isSubmitting.set(false);
}, 2000);
} catch (error) {
console.error('MultipleChoice: Error submitting response:', error);
this.isSubmitting.set(false);
}
}
}
