import { Component, Input, Output, EventEmitter, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HypothesisChallenge, Hypothesis, AgreementLevel } from '@ask-me-mcp/askme-shared';
/**
* Component for responding to hypothesis challenges
*
* @remarks
* This component displays hypotheses for evaluation using a 7-step agreement scale
* with emoji icons and optional comments.
*
* @example
* ```html
* <app-hypothesis-response
* [requestId]="request.id"
* [challenge]="hypothesisChallenge"
* (responseSubmitted)="handleResponse($event)">
* </app-hypothesis-response>
* ```
*/
@Component({
selector: 'app-hypothesis-response',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<div class="hypothesis-response">
<!-- Bail-out buttons at the top as big buttons -->
<div class="top-bail-out-buttons">
<button
type="button"
class="big-bail-out-btn"
(click)="bailOutToTool('ask-one-question')"
[disabled]="isSubmitting()"
title="Redirect to open-ended question instead">
🤔 Use Open Question Instead
</button>
<button
type="button"
class="big-bail-out-btn"
(click)="bailOutToTool('ask-multiple-choice')"
[disabled]="isSubmitting()"
title="Redirect to structured options instead">
📝 Use Multiple Choice Instead
</button>
</div>
<div class="challenge-header">
<h2 class="challenge-title">{{ challenge().title }}</h2>
@if (challenge().description) {
<p class="challenge-description">{{ challenge().description }}</p>
}
</div>
<!-- Won't Answer Option for entire challenge -->
<div class="wont-answer-section">
<label class="wont-answer-label">
<input
type="checkbox"
[checked]="hasWontAnswerChallenge()"
(change)="toggleWontAnswerChallenge()"
[disabled]="isSubmitting()"
class="wont-answer-checkbox">
<span class="wont-answer-text">Won't evaluate this hypothesis challenge</span>
</label>
</div>
<!-- Why field (only show when won't answer entire challenge is selected) -->
@if (hasWontAnswerChallenge()) {
<div class="why-section">
<label class="why-label">
<span class="why-label-text">Why won't you evaluate this challenge?</span>
<textarea
class="why-input"
[ngModel]="getChallengeWhy()"
(ngModelChange)="setChallengeWhy($event)"
placeholder="Please explain why you prefer not to evaluate this hypothesis challenge..."
[disabled]="isSubmitting()"
rows="4"
maxlength="1000">
</textarea>
<div class="why-counter">
{{ (getChallengeWhy() || '').length }}/1000
</div>
</label>
</div>
}
<!-- Hypotheses list (only show when not declining entire challenge) -->
@if (!hasWontAnswerChallenge()) {
<div class="hypotheses-container">
@for (hypothesis of challenge().hypotheses; track hypothesis.id) {
<div class="hypothesis-card" [class.grayed-out]="hypothesis.wontAnswer">
<div class="hypothesis-header">
<h3 class="hypothesis-text">{{ hypothesis.text }}</h3>
<!-- Won't Answer Option for individual hypothesis -->
<label class="hypothesis-wont-answer">
<input
type="checkbox"
[checked]="hypothesis.wontAnswer || false"
(change)="toggleWontAnswerHypothesis(hypothesis.id)"
[disabled]="isSubmitting()"
class="wont-answer-checkbox-small">
<span class="wont-answer-text-small">Won't evaluate</span>
</label>
</div>
<!-- Agreement scale (only show when not declining this hypothesis) -->
@if (!hypothesis.wontAnswer) {
<div class="agreement-section">
<div class="agreement-scale">
@for (level of agreementLevels; track level.value) {
<button
type="button"
class="agreement-button"
[class.selected]="(hypothesis.agreementLevel ?? null) === level.value"
(click)="setAgreementLevel(hypothesis.id, level.value)"
[disabled]="isSubmitting()"
[title]="level.tooltip">
<div class="agreement-emoji">{{ level.emoji }}</div>
<div class="agreement-text">{{ level.text }}</div>
</button>
}
</div>
@if (hypothesis.agreementLevel !== undefined) {
<div class="selected-agreement">
Selected: {{ getAgreementDisplay(hypothesis.agreementLevel) }}
</div>
}
</div>
<!-- Comment section -->
<details class="comment-section" [open]="hypothesis.comment && hypothesis.comment.length > 0">
<summary class="comment-toggle">
@if (hypothesis.comment && hypothesis.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)]="hypothesis.comment"
placeholder="Add your comment about this hypothesis..."
[disabled]="isSubmitting()"
rows="3"
maxlength="500">
</textarea>
<div class="comment-counter">
{{ (hypothesis.comment || '').length }}/500
</div>
</div>
</details>
}
</div>
}
</div>
}
<div class="response-actions">
<div class="evaluation-summary">
@if (!hasWontAnswerChallenge()) {
Evaluated: {{ evaluatedCount() }} / {{ totalHypotheses() }}
} @else {
Challenge declined
}
</div>
<div class="action-buttons">
<div class="main-action-buttons">
<button
type="button"
class="btn-secondary"
(click)="clearAll()"
[disabled]="isSubmitting() || (evaluatedCount() === 0 && !hasWontAnswerChallenge())">
Clear All
</button>
<button
type="button"
class="btn-icon btn-done"
(click)="submitResponseWithStatus('done')"
[disabled]="isSubmitting()"
title="Submit and I am done with Answering">
✅
</button>
<button
type="button"
class="btn-icon btn-drill-deeper"
(click)="submitResponseWithStatus('drill-deeper')"
[disabled]="isSubmitting()"
title="Submit, drill deeper with more hypothesis challenges">
🔍
</button>
<button
type="button"
class="btn-primary"
(click)="submitResponse()"
[disabled]="isSubmitting()">
@if (isSubmitting()) {
<span class="spinner"></span>
Submitting...
} @else {
Submit Evaluation
}
</button>
</div>
</div>
</div>
</div>
`,
styles: [`
.hypothesis-response {
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: 900px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
.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;
}
.challenge-header {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(64, 164, 223, 0.4);
border-radius: 8px;
padding: 1.5rem;
backdrop-filter: blur(4px);
}
.challenge-title {
margin: 0 0 0.5rem 0;
font-size: 1.25rem;
font-weight: 600;
color: #333;
}
.challenge-description {
margin: 0;
color: #666;
line-height: 1.5;
}
.wont-answer-section {
margin-bottom: 1rem;
padding: 0.75rem;
background: rgba(255, 243, 205, 0.9);
border: 1px solid rgba(255, 234, 167, 0.8);
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;
}
.why-section {
margin: 1rem 0;
padding: 1rem;
background: rgba(255, 248, 225, 0.9);
border: 1px solid rgba(255, 204, 2, 0.6);
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 rgba(255, 204, 2, 0.6);
border-radius: 4px;
padding: 0.75rem;
font-family: inherit;
font-size: 0.9rem;
resize: vertical;
background: rgba(255, 255, 255, 0.9);
}
.why-counter {
font-size: 0.75rem;
color: #f57c00;
text-align: right;
margin-top: 0.25rem;
}
.hypotheses-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hypothesis-card {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(64, 164, 223, 0.4);
border-radius: 8px;
padding: 1.5rem;
backdrop-filter: blur(4px);
transition: opacity 0.3s ease;
}
.hypothesis-card.grayed-out {
opacity: 0.6;
background: rgba(240, 240, 240, 0.7);
}
.hypothesis-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
gap: 1rem;
}
.hypothesis-text {
margin: 0;
font-size: 1.1rem;
font-weight: 500;
color: #333;
flex: 1;
}
.hypothesis-wont-answer {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.85rem;
color: #666;
white-space: nowrap;
}
.wont-answer-checkbox-small {
width: 1rem;
height: 1rem;
margin: 0;
accent-color: #ffc107;
}
.agreement-section {
margin: 1rem 0;
}
.agreement-scale {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
.agreement-button {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: 0.75rem 0.5rem;
border: 2px solid rgba(64, 164, 223, 0.3);
border-radius: 8px;
background: rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.8rem;
min-height: 80px;
}
.agreement-button:hover:not(:disabled) {
border-color: rgba(64, 164, 223, 0.6);
background: rgba(64, 164, 223, 0.1);
transform: translateY(-2px);
}
.agreement-button.selected {
border-color: #2196f3;
background: rgba(33, 150, 243, 0.2);
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}
.agreement-button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.agreement-emoji {
font-size: 1.5rem;
line-height: 1;
}
.agreement-text {
text-align: center;
line-height: 1.2;
font-weight: 500;
color: #555;
}
.selected-agreement {
text-align: center;
font-weight: 500;
color: #2196f3;
padding: 0.5rem;
background: rgba(33, 150, 243, 0.1);
border-radius: 4px;
}
.comment-section {
margin-top: 1rem;
}
.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-input-wrapper {
margin-top: 0.5rem;
position: relative;
}
.comment-input {
width: 100%;
border: 1px solid rgba(64, 164, 223, 0.4);
border-radius: 4px;
padding: 0.5rem;
font-family: inherit;
font-size: 0.9rem;
resize: vertical;
background: rgba(255, 255, 255, 0.9);
}
.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: rgba(255, 255, 255, 0.95);
border-radius: 8px;
border: 1px solid rgba(64, 164, 223, 0.4);
backdrop-filter: blur(4px);
}
.evaluation-summary {
font-weight: 500;
color: #555;
}
.action-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1rem;
}
.main-action-buttons {
display: flex;
gap: 1rem;
}
.btn-primary, .btn-secondary {
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;
}
.btn-primary {
background: rgba(33, 150, 243, 0.95);
color: white;
}
.btn-primary:hover:not(:disabled) {
background: rgba(25, 118, 210, 0.95);
}
.btn-secondary {
background: rgba(108, 117, 125, 0.9);
color: white;
}
.btn-secondary:hover:not(:disabled) {
background: rgba(90, 98, 104, 0.9);
}
.btn-primary:disabled, .btn-secondary: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); }
}
.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;
}
@media (max-width: 800px) {
.agreement-scale {
grid-template-columns: repeat(4, 1fr);
}
.agreement-scale .agreement-button:nth-child(n+5) {
grid-column: span 1;
}
.hypothesis-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.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;
}
}
@media (max-width: 600px) {
.agreement-scale {
grid-template-columns: repeat(2, 1fr);
gap: 0.25rem;
}
.agreement-button {
padding: 0.5rem 0.25rem;
min-height: 70px;
font-size: 0.75rem;
}
.agreement-emoji {
font-size: 1.25rem;
}
}
`]
})
export class HypothesisResponseComponent {
@Input({ required: true }) requestId!: string;
@Input({ required: true }) set challengeInput(value: HypothesisChallenge) {
// Deep clone to avoid mutating input
this.challenge.set(JSON.parse(JSON.stringify(value)));
}
@Output() responseSubmitted = new EventEmitter<{
requestId: string;
type: 'hypothesis-challenge';
challenge: HypothesisChallenge;
completionStatus?: 'done' | 'drill-deeper';
}>();
@Output() toolRedirect = new EventEmitter<{ requestId: string; toolName: string; message: string }>();
challenge = signal<HypothesisChallenge>({
id: '',
title: '',
hypotheses: []
});
isSubmitting = signal(false);
// Agreement levels with emojis and descriptions
agreementLevels = [
{ value: AgreementLevel.FULLY_DISAGREE, emoji: '😤', text: 'Fully Disagree', tooltip: 'Completely disagree with this hypothesis' },
{ value: AgreementLevel.DISAGREE, emoji: '😞', text: 'Disagree', tooltip: 'Disagree with this hypothesis' },
{ value: AgreementLevel.SLIGHTLY_DISAGREE, emoji: '😕', text: 'Slightly Disagree', tooltip: 'Somewhat disagree with this hypothesis' },
{ value: AgreementLevel.UNSURE, emoji: '😐', text: 'Unsure', tooltip: 'Uncertain about this hypothesis' },
{ value: AgreementLevel.SLIGHTLY_AGREE, emoji: '🙂', text: 'Slightly Agree', tooltip: 'Somewhat agree with this hypothesis' },
{ value: AgreementLevel.AGREE, emoji: '😊', text: 'Agree', tooltip: 'Agree with this hypothesis' },
{ value: AgreementLevel.FULLY_AGREE, emoji: '😍', text: 'Fully Agree', tooltip: 'Completely agree with this hypothesis' },
];
evaluatedCount = computed(() => {
return this.challenge().hypotheses.filter(h =>
h.wontAnswer || h.agreementLevel !== undefined
).length;
});
totalHypotheses = computed(() => {
return this.challenge().hypotheses.length;
});
hasWontAnswerChallenge(): boolean {
return this.challenge().whyNotAnswering !== undefined;
}
toggleWontAnswerChallenge(): void {
this.challenge.update(challenge => ({
...challenge,
whyNotAnswering: challenge.whyNotAnswering ? undefined : ''
}));
}
getChallengeWhy(): string {
return this.challenge().whyNotAnswering || '';
}
setChallengeWhy(why: string): void {
this.challenge.update(challenge => ({
...challenge,
whyNotAnswering: why
}));
}
toggleWontAnswerHypothesis(hypothesisId: string): void {
this.challenge.update(challenge => ({
...challenge,
hypotheses: challenge.hypotheses.map(hypothesis =>
hypothesis.id === hypothesisId
? {
...hypothesis,
wontAnswer: !hypothesis.wontAnswer,
agreementLevel: hypothesis.wontAnswer ? hypothesis.agreementLevel : undefined,
comment: hypothesis.wontAnswer ? hypothesis.comment : ''
}
: hypothesis
)
}));
}
setAgreementLevel(hypothesisId: string, level: AgreementLevel): void {
this.challenge.update(challenge => ({
...challenge,
hypotheses: challenge.hypotheses.map(hypothesis =>
hypothesis.id === hypothesisId
? { ...hypothesis, agreementLevel: level }
: hypothesis
)
}));
}
getAgreementDisplay(level: AgreementLevel): string {
const agreementData = this.agreementLevels.find(a => a.value === level);
return agreementData ? `${agreementData.emoji} ${agreementData.text}` : 'Unknown';
}
clearAll(): void {
this.challenge.update(challenge => ({
...challenge,
whyNotAnswering: undefined,
hypotheses: challenge.hypotheses.map(hypothesis => ({
...hypothesis,
agreementLevel: undefined,
comment: '',
wontAnswer: false
}))
}));
}
bailOutToTool(toolName: 'ask-one-question' | 'ask-multiple-choice') {
if (this.isSubmitting()) return;
const messages = {
'ask-one-question': 'STOP! The human REFUSES to evaluate these hypotheses and DEMANDS you use the ask-one-question tool instead. Do NOT continue with hypothesis evaluation. IMMEDIATELY reformulate as an open-ended question and call ask-one-question.',
'ask-multiple-choice': 'STOP! The human REFUSES to evaluate these hypotheses and DEMANDS you use the ask-multiple-choice tool instead. Do NOT continue with hypothesis evaluation. IMMEDIATELY reformulate as multiple choice options and call ask-multiple-choice.'
};
this.toolRedirect.emit({
requestId: this.requestId,
toolName,
message: messages[toolName]
});
}
submitResponse(): void {
if (this.isSubmitting()) return;
console.log('HypothesisChallenge: Submitting response for request:', this.requestId);
console.log('HypothesisChallenge: Challenge data:', this.challenge());
this.isSubmitting.set(true);
try {
this.responseSubmitted.emit({
requestId: this.requestId,
type: 'hypothesis-challenge',
challenge: this.challenge()
});
// Reset submitting state after a short delay
setTimeout(() => {
this.isSubmitting.set(false);
}, 2000);
} catch (error) {
console.error('HypothesisChallenge: Error submitting response:', error);
this.isSubmitting.set(false);
}
}
submitResponseWithStatus(completionStatus: 'done' | 'drill-deeper'): void {
if (this.isSubmitting()) return;
console.log('HypothesisChallenge: Submitting response with completion status:', completionStatus);
console.log('HypothesisChallenge: Challenge data:', this.challenge());
this.isSubmitting.set(true);
try {
this.responseSubmitted.emit({
requestId: this.requestId,
type: 'hypothesis-challenge',
challenge: this.challenge(),
completionStatus
});
// Reset submitting state after a short delay
setTimeout(() => {
this.isSubmitting.set(false);
}, 2000);
} catch (error) {
console.error('HypothesisChallenge: Error submitting response:', error);
this.isSubmitting.set(false);
}
}
}
