\n \n \n \n

\n );\n }\n\n const optionKeys = currentNode?.options ? Object.keys(currentNode.options) : [];\n const isTerminal = currentNode?.terminal;\n const allBranchesExplored = answersMap.size > 0 && explorationStack.length === 0;\n\n // Helper function to traverse question trees and collect displayed answers\n function traverseAndDisplayAnswers(nodes: QuestionNode[] | undefined, depth: number = 0): React.ReactNode[] {\n if (!nodes) return [];\n \n const elements: React.ReactNode[] = [];\n \n nodes.forEach((node, idx) => {\n const answer = answersMap.get(node.id);\n if (answer) {\n const pathDepth = answer.path.length;\n const indent = pathDepth * 1.5;\n \n elements.push(\n

handleAnswerClick(node.id)}\n className=\"text-green-800 cursor-pointer p-3 rounded hover:bg-green-100 transition-colors border border-transparent hover:border-green-300\"\n style={{ marginLeft: `${indent}rem` }}\n >\n

\n {answer.question}{\" \"}\n \n {answer.answers.length === 1 ? answer.answers[0] : answer.answers.join(\", \")}\n \n

\n );\n }\n \n // Recurse into branches\n if (node.branches && answer) {\n // Only traverse branches for selected options\n const selectedOptionKeys = answer.answers\n .map(ans => Object.entries(node.options || {}).find(([_, val]) => val === ans)?.[0])\n .filter(Boolean) as string[];\n \n selectedOptionKeys.forEach(key => {\n const branchNode = node.branches![key];\n if (branchNode) {\n elements.push(...traverseAndDisplayAnswers([branchNode], depth + 1));\n }\n });\n }\n });\n \n return elements;\n }\n\n return (\n

\n {/* Header */}\n

Dish Ideation

Answer questions and discover new dish ideas

\n\n {/* Main Layout - Questions and Suggestions Side by Side */}\n

\n {/* Left Column - Questions */}\n

\n {/* Current question - only show if there are more branches to explore or still in first branch */}\n {currentNode && (\n

\n {currentNode.prompt || currentNode.question}\n

\n\n {/* Options or text input */}\n {isTerminal || optionKeys.length === 0 ? (\n // Text input for terminal nodes or questions without options\n

\n setTextInput(e.target.value)}\n variant=\"outlined\"\n />\n \n {explorationStack.length > 0 ? \"Continue to Next Branch\" : \"Submit Answer\"}\n \n

\n ) : (\n // Option selection\n

\n {optionKeys.map((key, index) => (\n

\n handleOptionToggle(key)}\n className=\"w-4 h-4 rounded border-gray-300 cursor-pointer\"\n />\n \n \n {index + 1}. {currentNode.options![key]}\n \n \n

\n ))}\n\n

\n \n Continue ({selectedOptions.size} selected)\n \n

\n )}\n

\n )}\n\n {/* Collected answers display - Traversed from question trees */}\n {answersMap.size > 0 && (\n

Collected Answers ({answersMap.size})

\n {traverseAndDisplayAnswers(questionTree || undefined)}\n

\n )}\n

\n\n {/* Right Column - Suggestions Panel */}\n

\n {isSubmitting ? (\n

\n \n

Generating ideas...

\n ) : generatedIdeas.length > 0 ? (\n

✨ Dish Ideas

Based on your answers

\n {Array.from(dishRatings.entries()).filter(([_, rating]) => rating === 'up').length > 0 && (\n

\n setLikedDishesExpanded(!likedDishesExpanded)}\n className=\"w-full p-4 flex items-center justify-between hover:bg-green-100 transition-colors\"\n >\n

\n ✓\n

\n Your Liked Dishes ({Array.from(dishRatings.entries()).filter(([_, rating]) => rating === 'up').length})\n

\n \n ▼\n \n \n {likedDishesExpanded && (\n

\n {Array.from(dishRatings.entries())\n .filter(([_, rating]) => rating === 'up')\n .map(([dishName, _]) => (\n

{dishName}

\n ))}\n

\n )}\n

\n {generatedIdeas\n .filter(idea => {\n const rating = dishRatings.get(idea.name);\n return rating !== 'down' && rating !== 'up';\n })\n .map((idea, index) => {\n const rating = dishRatings.get(idea.name);\n return (\n

{idea.name}

{idea.description}

\n handleDishRating(idea.name, 'up')}\n title=\"Like this suggestion\"\n className={`text-lg cursor-pointer transition-transform hover:scale-125 ${\n rating === 'up' ? 'opacity-100' : 'opacity-50 hover:opacity-75'\n }`}\n >\n 👍\n \n handleDishRating(idea.name, 'down')}\n title=\"Dislike this suggestion\"\n className={`text-lg cursor-pointer transition-transform hover:scale-125 ${\n rating === 'down' ? 'opacity-100' : 'opacity-50 hover:opacity-75'\n }`}\n >\n 👎\n \n

\n );\n })}\n

\n {dishRatings.size > 0 && (\n

\n \n {isSubmitting ? 'Regenerating...' : 'Regenerate Suggestions'}\n \n

\n )}\n

\n ) : allBranchesExplored ? (\n

🎉

All done!

Ready to generate ideas?

\n {isSubmitting ? \"Generating...\" : \"Generate Ideas\"}\n

\n ) : (\n

💡

Answer the questions

Your dish ideas will appear here

\n )}\n

\n );\n}\n","deleted","label",[176,177,178,158],"frontend","components","pages","permalink","https://www.val.town/x/damonb/react-hono-with-react-router/code/frontend/components/pages/Ideate.tsx","extension","actionData","errors"]