|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { useState } from "react"; |
| 4 | +import personalitiesData from "@/data/personalities.json"; |
| 5 | + |
| 6 | +type Personality = { |
| 7 | + name: string; |
| 8 | + traits_vector: number[]; |
| 9 | + bio: string; |
| 10 | + interests: string[]; |
| 11 | + communication_style: string; |
| 12 | +}; |
| 13 | + |
| 14 | +const PERSONALITIES: Personality[] = personalitiesData.personalities; |
| 15 | + |
| 16 | +// One question per trait dimension: strategy, detail, opportunity, technical, creativity |
| 17 | +const QUIZ_QUESTIONS: { question: string; options: { label: string; vector: number[] }[] }[] = [ |
| 18 | + { |
| 19 | + question: "When tackling a problem, you prefer to:", |
| 20 | + options: [ |
| 21 | + { label: "Define the big picture and long-term plan first", vector: [0.9, 0.2, 0.3, 0.2, 0.3] }, |
| 22 | + { label: "Break it into steps and check each one carefully", vector: [0.2, 0.9, 0.2, 0.3, 0.2] }, |
| 23 | + { label: "Look for the best opportunity to make an impact", vector: [0.3, 0.2, 0.9, 0.2, 0.3] }, |
| 24 | + { label: "Build or fix something technical first", vector: [0.2, 0.3, 0.2, 0.9, 0.3] }, |
| 25 | + { label: "Experiment with creative or unusual ideas", vector: [0.3, 0.2, 0.3, 0.2, 0.9] }, |
| 26 | + ], |
| 27 | + }, |
| 28 | + { |
| 29 | + question: "In meetings, you're most valuable when:", |
| 30 | + options: [ |
| 31 | + { label: "Setting direction and making decisive calls", vector: [0.9, 0.3, 0.4, 0.2, 0.3] }, |
| 32 | + { label: "Ensuring nothing is missed and details are correct", vector: [0.2, 0.9, 0.2, 0.4, 0.2] }, |
| 33 | + { label: "Spotting growth or partnership opportunities", vector: [0.4, 0.2, 0.9, 0.2, 0.3] }, |
| 34 | + { label: "Explaining how things work or proposing technical solutions", vector: [0.2, 0.4, 0.2, 0.9, 0.3] }, |
| 35 | + { label: "Brainstorming and inspiring new approaches", vector: [0.3, 0.2, 0.3, 0.2, 0.9] }, |
| 36 | + ], |
| 37 | + }, |
| 38 | + { |
| 39 | + question: "Your ideal weekend project is:", |
| 40 | + options: [ |
| 41 | + { label: "Reviewing and refining your strategy or roadmap", vector: [0.9, 0.4, 0.3, 0.2, 0.3] }, |
| 42 | + { label: "Organizing data, processes, or checklists", vector: [0.2, 0.9, 0.2, 0.4, 0.2] }, |
| 43 | + { label: "Networking or exploring a new business idea", vector: [0.3, 0.2, 0.9, 0.2, 0.3] }, |
| 44 | + { label: "Coding, scripting, or tinkering with tech", vector: [0.2, 0.3, 0.2, 0.9, 0.3] }, |
| 45 | + { label: "Creating something—art, writing, or a prototype", vector: [0.3, 0.2, 0.3, 0.3, 0.9] }, |
| 46 | + ], |
| 47 | + }, |
| 48 | + { |
| 49 | + question: "When someone asks for help, you usually:", |
| 50 | + options: [ |
| 51 | + { label: "Give clear direction and next steps", vector: [0.9, 0.3, 0.3, 0.2, 0.2] }, |
| 52 | + { label: "Walk through the details and double-check with them", vector: [0.2, 0.9, 0.2, 0.3, 0.2] }, |
| 53 | + { label: "Connect them with an opportunity or person", vector: [0.3, 0.2, 0.9, 0.2, 0.2] }, |
| 54 | + { label: "Explain the how/why and share resources or code", vector: [0.2, 0.3, 0.2, 0.9, 0.2] }, |
| 55 | + { label: "Suggest creative alternatives and reframes", vector: [0.2, 0.2, 0.2, 0.2, 0.9] }, |
| 56 | + ], |
| 57 | + }, |
| 58 | + { |
| 59 | + question: "You feel most in flow when:", |
| 60 | + options: [ |
| 61 | + { label: "Leading a plan to completion", vector: [0.9, 0.4, 0.4, 0.2, 0.3] }, |
| 62 | + { label: "Making sure everything is accurate and consistent", vector: [0.2, 0.9, 0.2, 0.3, 0.2] }, |
| 63 | + { label: "Closing a deal or finding the next big opportunity", vector: [0.3, 0.2, 0.9, 0.2, 0.3] }, |
| 64 | + { label: "Solving a hard technical or logical puzzle", vector: [0.2, 0.3, 0.2, 0.9, 0.3] }, |
| 65 | + { label: "Creating something new that didn't exist before", vector: [0.3, 0.2, 0.3, 0.2, 0.9] }, |
| 66 | + ], |
| 67 | + }, |
| 68 | +]; |
| 69 | + |
| 70 | +function cosineSimilarity(a: number[], b: number[]): number { |
| 71 | + if (a.length !== b.length) return 0; |
| 72 | + let dot = 0, na = 0, nb = 0; |
| 73 | + for (let i = 0; i < a.length; i++) { |
| 74 | + dot += a[i] * b[i]; |
| 75 | + na += a[i] * a[i]; |
| 76 | + nb += b[i] * b[i]; |
| 77 | + } |
| 78 | + const denom = Math.sqrt(na) * Math.sqrt(nb); |
| 79 | + return denom === 0 ? 0 : dot / denom; |
| 80 | +} |
| 81 | + |
| 82 | +function matchPersonality(userVector: number[]): { personality: Personality; score: number } { |
| 83 | + let best: { personality: Personality; score: number } = { personality: PERSONALITIES[0], score: 0 }; |
| 84 | + for (const p of PERSONALITIES) { |
| 85 | + const score = cosineSimilarity(userVector, p.traits_vector); |
| 86 | + if (score > best.score) best = { personality: p, score }; |
| 87 | + } |
| 88 | + return best; |
| 89 | +} |
| 90 | + |
| 91 | +export default function QuizPage() { |
| 92 | + const [step, setStep] = useState(0); |
| 93 | + const [userVector, setUserVector] = useState<number[]>(() => Array(5).fill(0)); |
| 94 | + const [result, setResult] = useState<{ personality: Personality; score: number } | null>(null); |
| 95 | + |
| 96 | + const currentQuestion = QUIZ_QUESTIONS[step]; |
| 97 | + const isLastStep = step === QUIZ_QUESTIONS.length - 1; |
| 98 | + |
| 99 | + const handleAnswer = (optionVector: number[]) => { |
| 100 | + const next = userVector.map((v, i) => v + optionVector[i]); |
| 101 | + setUserVector(next); |
| 102 | + if (isLastStep) { |
| 103 | + const normalized = next.map((v) => v / QUIZ_QUESTIONS.length); |
| 104 | + setResult(matchPersonality(normalized)); |
| 105 | + } else { |
| 106 | + setStep((s) => s + 1); |
| 107 | + } |
| 108 | + }; |
| 109 | + |
| 110 | + const handleRestart = () => { |
| 111 | + setStep(0); |
| 112 | + setUserVector(Array(5).fill(0)); |
| 113 | + setResult(null); |
| 114 | + }; |
| 115 | + |
| 116 | + if (result) { |
| 117 | + const { personality, score } = result; |
| 118 | + const compatibility = Math.round(score * 100); |
| 119 | + return ( |
| 120 | + <div className="max-w-2xl mx-auto text-center"> |
| 121 | + <h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-pink-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent"> |
| 122 | + Your AI Agent Match |
| 123 | + </h1> |
| 124 | + <div className="bg-gradient-to-r from-pink-500/10 via-purple-500/10 to-cyan-500/10 rounded-2xl p-8 border border-white/10 text-left"> |
| 125 | + <div className="flex items-center justify-between mb-6"> |
| 126 | + <h2 className="text-3xl font-bold text-white">{personality.name}</h2> |
| 127 | + <span className="text-primary font-bold text-xl">{compatibility}% match</span> |
| 128 | + </div> |
| 129 | + <p className="text-white/80 mb-4">{personality.bio}</p> |
| 130 | + <p className="text-white/60 text-sm mb-4"> |
| 131 | + <span className="font-medium text-white/80">Style: </span> |
| 132 | + {personality.communication_style} |
| 133 | + </p> |
| 134 | + <div> |
| 135 | + <span className="font-medium text-white/80 text-sm">Interests: </span> |
| 136 | + <span className="text-white/60 text-sm">{personality.interests.join(", ")}</span> |
| 137 | + </div> |
| 138 | + </div> |
| 139 | + <button |
| 140 | + onClick={handleRestart} |
| 141 | + className="mt-8 px-6 py-3 rounded-xl bg-white/10 border border-white/20 text-white hover:bg-white/20 transition-colors" |
| 142 | + > |
| 143 | + Retake quiz |
| 144 | + </button> |
| 145 | + </div> |
| 146 | + ); |
| 147 | + } |
| 148 | + |
| 149 | + return ( |
| 150 | + <div className="max-w-2xl mx-auto"> |
| 151 | + <div className="text-center mb-10"> |
| 152 | + <h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-pink-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent"> |
| 153 | + Find Your AI Agent |
| 154 | + </h1> |
| 155 | + <p className="text-white/60"> |
| 156 | + Answer a few questions to match with the AI personality that fits you best. |
| 157 | + </p> |
| 158 | + <div className="mt-4 flex justify-center gap-1"> |
| 159 | + {QUIZ_QUESTIONS.map((_, i) => ( |
| 160 | + <div |
| 161 | + key={i} |
| 162 | + className={`h-1.5 w-8 rounded-full transition-colors ${i <= step ? "bg-primary" : "bg-white/20"}`} |
| 163 | + /> |
| 164 | + ))} |
| 165 | + </div> |
| 166 | + </div> |
| 167 | + |
| 168 | + <div className="bg-white/5 border border-white/10 rounded-2xl p-6 md:p-8"> |
| 169 | + <p className="text-lg font-medium text-white mb-6">{currentQuestion.question}</p> |
| 170 | + <ul className="space-y-3"> |
| 171 | + {currentQuestion.options.map((opt, i) => ( |
| 172 | + <li key={i}> |
| 173 | + <button |
| 174 | + type="button" |
| 175 | + onClick={() => handleAnswer(opt.vector)} |
| 176 | + className="w-full text-left px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white hover:bg-white/10 hover:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors" |
| 177 | + > |
| 178 | + {opt.label} |
| 179 | + </button> |
| 180 | + </li> |
| 181 | + ))} |
| 182 | + </ul> |
| 183 | + </div> |
| 184 | + </div> |
| 185 | + ); |
| 186 | +} |
0 commit comments