123 lines
4.3 KiB
JavaScript
123 lines
4.3 KiB
JavaScript
import { html, useState } from '../lib/preact.js';
|
|
import { getStatusMeta } from '../utils/status.js';
|
|
import { OptionButton } from './OptionButton.js';
|
|
|
|
export function QuestionBlock({ questions, sessionId, status, onRespond }) {
|
|
const [freeformText, setFreeformText] = useState('');
|
|
const [focused, setFocused] = useState(false);
|
|
const [sending, setSending] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
const meta = getStatusMeta(status);
|
|
|
|
if (!questions || questions.length === 0) return null;
|
|
|
|
// Only show the first question (sequential, not parallel)
|
|
const question = questions[0];
|
|
const remainingCount = questions.length - 1;
|
|
const options = question.options || [];
|
|
|
|
const handleOptionClick = async (optionLabel) => {
|
|
if (sending) return;
|
|
setSending(true);
|
|
setError(null);
|
|
try {
|
|
await onRespond(sessionId, optionLabel, false, options.length);
|
|
} catch (err) {
|
|
setError('Failed to send response');
|
|
console.error('QuestionBlock option error:', err);
|
|
} finally {
|
|
setSending(false);
|
|
}
|
|
};
|
|
|
|
const handleFreeformSubmit = async (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (freeformText.trim() && !sending) {
|
|
setSending(true);
|
|
setError(null);
|
|
try {
|
|
await onRespond(sessionId, freeformText.trim(), true, options.length);
|
|
setFreeformText('');
|
|
} catch (err) {
|
|
setError('Failed to send response');
|
|
console.error('QuestionBlock freeform error:', err);
|
|
} finally {
|
|
setSending(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
return html`
|
|
<div class="space-y-3" onClick=${(e) => e.stopPropagation()}>
|
|
${error && html`
|
|
<div class="rounded-lg border border-attention/40 bg-attention/12 px-3 py-1.5 text-sm text-attention">
|
|
${error}
|
|
</div>
|
|
`}
|
|
<!-- Question Header Badge -->
|
|
${question.header && html`
|
|
<span class="inline-flex rounded-full border px-2 py-1 font-mono text-micro uppercase tracking-[0.15em] ${meta.badge}">
|
|
${question.header}
|
|
</span>
|
|
`}
|
|
|
|
<!-- Question Text -->
|
|
<p class="font-medium text-bright">${question.question || question.text}</p>
|
|
|
|
<!-- Options -->
|
|
${options.length > 0 && html`
|
|
<div class="space-y-2">
|
|
${options.map((opt, i) => html`
|
|
<${OptionButton}
|
|
key=${i}
|
|
number=${i + 1}
|
|
label=${opt.label || opt}
|
|
description=${opt.description}
|
|
onClick=${() => handleOptionClick(opt.label || opt)}
|
|
/>
|
|
`)}
|
|
</div>
|
|
`}
|
|
|
|
<!-- Freeform Input -->
|
|
<form onSubmit=${handleFreeformSubmit} class="flex items-end gap-2.5">
|
|
<textarea
|
|
value=${freeformText}
|
|
onInput=${(e) => {
|
|
setFreeformText(e.target.value);
|
|
e.target.style.height = 'auto';
|
|
e.target.style.height = e.target.scrollHeight + 'px';
|
|
}}
|
|
onKeyDown=${(e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleFreeformSubmit(e);
|
|
}
|
|
}}
|
|
onFocus=${() => setFocused(true)}
|
|
onBlur=${() => setFocused(false)}
|
|
placeholder="Type a response..."
|
|
rows="1"
|
|
class="flex-1 resize-none overflow-hidden rounded-xl border border-selection/75 bg-bg/70 px-3 py-2 text-sm text-fg transition-colors duration-150 placeholder:text-dim focus:outline-none"
|
|
style=${{ minHeight: '38px', maxHeight: '150px', borderColor: focused ? meta.borderColor : undefined }}
|
|
disabled=${sending}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="shrink-0 rounded-xl px-3 py-2 text-sm font-medium transition-[transform,filter] duration-150 hover:-translate-y-0.5 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
|
|
style=${{ backgroundColor: meta.borderColor, color: '#0a0f18' }}
|
|
disabled=${sending || !freeformText.trim()}
|
|
>
|
|
${sending ? 'Sending...' : 'Send'}
|
|
</button>
|
|
</form>
|
|
|
|
<!-- More Questions Indicator -->
|
|
${remainingCount > 0 && html`
|
|
<p class="font-mono text-label text-dim">+ ${remainingCount} more question${remainingCount > 1 ? 's' : ''} after this</p>
|
|
`}
|
|
</div>
|
|
`;
|
|
}
|