feat(dashboard): add markdown preview for AskUserQuestion options
Implement side-by-side preview layout when AskUserQuestion options include markdown content, matching the Claude Code tool spec. Hook changes (bin/amc-hook): - Extract optional 'markdown' field from question options - Only include when present (maintains backward compatibility) QuestionBlock layout: - Detect hasMarkdownPreviews via options.some(opt => opt.markdown) - Standard layout: vertical option list (unchanged) - Preview layout: 40% options left, 60% preview pane right - Fixed 400px preview height prevents layout thrashing on hover - Track previewIndex state, update on mouseEnter/focus Content rendering (smart detection): - Code fences (starts with ```): renderContent() for syntax highlighting - Everything else: raw <pre> to preserve ASCII diagrams exactly - "No preview for this option" when hovered option lacks markdown OptionButton enhancements: - Accept selected, onMouseEnter, onFocus props - Visual selected state: brighter border/bg with subtle shadow - Compact padding (py-2 vs py-3.5) for preview layout density - Graceful undefined handling for standard layout usage Bug fixes during development: - Layout thrashing: Fixed height (not max-height) on preview pane - ASCII corruption: Detect code fences vs plain text for render path - Horizontal overflow: Use overflow-auto (not just overflow-y-auto) - Data pipeline: Hook was stripping markdown field (root cause) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
teernisse
@@ -1,12 +1,15 @@
|
||||
import { html, useState } from '../lib/preact.js';
|
||||
import { html, useState, useRef } from '../lib/preact.js';
|
||||
import { getStatusMeta } from '../utils/status.js';
|
||||
import { OptionButton } from './OptionButton.js';
|
||||
import { renderContent } from '../lib/markdown.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 [previewIndex, setPreviewIndex] = useState(0);
|
||||
const textareaRef = useRef(null);
|
||||
const meta = getStatusMeta(status);
|
||||
|
||||
if (!questions || questions.length === 0) return null;
|
||||
@@ -15,6 +18,9 @@ export function QuestionBlock({ questions, sessionId, status, onRespond }) {
|
||||
const question = questions[0];
|
||||
const remainingCount = questions.length - 1;
|
||||
const options = question.options || [];
|
||||
|
||||
// Check if any option has markdown preview content
|
||||
const hasMarkdownPreviews = options.some(opt => opt.markdown);
|
||||
|
||||
const handleOptionClick = async (optionLabel) => {
|
||||
if (sending) return;
|
||||
@@ -44,12 +50,111 @@ export function QuestionBlock({ questions, sessionId, status, onRespond }) {
|
||||
console.error('QuestionBlock freeform error:', err);
|
||||
} finally {
|
||||
setSending(false);
|
||||
// Refocus the textarea after submission
|
||||
// Use setTimeout to ensure React has re-rendered with disabled=false
|
||||
setTimeout(() => {
|
||||
textareaRef.current?.focus();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Side-by-side layout when options have markdown previews
|
||||
if (hasMarkdownPreviews) {
|
||||
const currentMarkdown = options[previewIndex]?.markdown || '';
|
||||
|
||||
return html`
|
||||
<div class="space-y-2.5" 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>
|
||||
|
||||
<!-- Side-by-side: Options | Preview -->
|
||||
<div class="flex gap-3">
|
||||
<!-- Options List (left side) -->
|
||||
<div class="w-2/5 space-y-1.5 shrink-0">
|
||||
${options.map((opt, i) => html`
|
||||
<${OptionButton}
|
||||
key=${i}
|
||||
number=${i + 1}
|
||||
label=${opt.label || opt}
|
||||
description=${opt.description}
|
||||
selected=${previewIndex === i}
|
||||
onMouseEnter=${() => setPreviewIndex(i)}
|
||||
onFocus=${() => setPreviewIndex(i)}
|
||||
onClick=${() => handleOptionClick(opt.label || opt)}
|
||||
/>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
<!-- Preview Pane (right side) — fixed height prevents layout thrashing on hover -->
|
||||
<div class="flex-1 rounded-lg border border-selection/50 bg-bg/60 p-3 h-[400px] overflow-auto">
|
||||
${currentMarkdown
|
||||
? (currentMarkdown.trimStart().startsWith('```')
|
||||
? renderContent(currentMarkdown)
|
||||
: html`<pre class="font-mono text-sm text-fg/90 whitespace-pre leading-relaxed">${currentMarkdown}</pre>`)
|
||||
: html`<p class="text-dim text-sm italic">No preview for this option</p>`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Freeform Input -->
|
||||
<form onSubmit=${handleFreeformSubmit} class="flex items-end gap-2.5">
|
||||
<textarea
|
||||
ref=${textareaRef}
|
||||
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>
|
||||
`;
|
||||
}
|
||||
|
||||
// Standard layout (no markdown previews)
|
||||
return html`
|
||||
<div class="space-y-3" onClick=${(e) => e.stopPropagation()}>
|
||||
<div class="space-y-2.5" 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}
|
||||
@@ -67,7 +172,7 @@ export function QuestionBlock({ questions, sessionId, status, onRespond }) {
|
||||
|
||||
<!-- Options -->
|
||||
${options.length > 0 && html`
|
||||
<div class="space-y-2">
|
||||
<div class="space-y-1.5">
|
||||
${options.map((opt, i) => html`
|
||||
<${OptionButton}
|
||||
key=${i}
|
||||
@@ -83,6 +188,7 @@ export function QuestionBlock({ questions, sessionId, status, onRespond }) {
|
||||
<!-- Freeform Input -->
|
||||
<form onSubmit=${handleFreeformSubmit} class="flex items-end gap-2.5">
|
||||
<textarea
|
||||
ref=${textareaRef}
|
||||
value=${freeformText}
|
||||
onInput=${(e) => {
|
||||
setFreeformText(e.target.value);
|
||||
|
||||
Reference in New Issue
Block a user