| 13 | } |
| 14 | |
| 15 | export const AskUserBranch = ({ block, availableWidth }: AskUserBranchProps) => { |
| 16 | const theme = useTheme() |
| 17 | |
| 18 | return ( |
| 19 | <box |
| 20 | style={{ |
| 21 | flexDirection: 'column', |
| 22 | gap: 0, |
| 23 | width: Math.max(10, availableWidth - 2), |
| 24 | borderStyle: 'single', |
| 25 | borderColor: theme.secondary, |
| 26 | customBorderChars: BORDER_CHARS, |
| 27 | padding: 1, |
| 28 | marginTop: 1, |
| 29 | marginBottom: 1, |
| 30 | }} |
| 31 | > |
| 32 | {block.skipped ? ( |
| 33 | <text style={{ fg: theme.muted, attributes: TextAttributes.ITALIC }}> |
| 34 | You skipped the {pluralize(block.questions.length, 'question', { includeCount: false })}. |
| 35 | </text> |
| 36 | ) : ( |
| 37 | <box style={{ flexDirection: 'column', gap: 1 }}> |
| 38 | <text style={{ fg: theme.secondary, attributes: TextAttributes.BOLD }}> |
| 39 | Your {pluralize(block.questions.length, 'answer', { includeCount: false })}: |
| 40 | </text> |
| 41 | {block.questions.map((q, idx) => { |
| 42 | const answer = block.answers?.find((a) => a.questionIndex === idx) |
| 43 | |
| 44 | // Determine display answer based on answer type |
| 45 | let displayAnswer: string |
| 46 | let isCustomAnswer = false |
| 47 | |
| 48 | if (answer?.otherText) { |
| 49 | // Custom text input |
| 50 | displayAnswer = `"${answer.otherText}"` |
| 51 | isCustomAnswer = true |
| 52 | } else if (answer?.selectedOptions) { |
| 53 | // Multi-select: join options with commas |
| 54 | displayAnswer = answer.selectedOptions.join(', ') |
| 55 | } else if (answer?.selectedOption) { |
| 56 | // Single-select |
| 57 | displayAnswer = answer.selectedOption |
| 58 | } else { |
| 59 | displayAnswer = 'No answer' |
| 60 | } |
| 61 | |
| 62 | return ( |
| 63 | <box key={idx} style={{ flexDirection: 'column', gap: 0 }}> |
| 64 | <text style={{ fg: theme.foreground }}> |
| 65 | {idx + 1}. {q.question} |
| 66 | </text> |
| 67 | <text style={{ |
| 68 | fg: theme.primary, |
| 69 | marginLeft: 2, |
| 70 | attributes: isCustomAnswer ? TextAttributes.ITALIC : undefined, |
| 71 | }}> |
| 72 | ↳ {displayAnswer} |