// Page 4: AI Match Dialog — the most important page // Full-screen, warm conversational interface with typing animation and live-updating needs summary. const AI_SCRIPT = [ { role:'ai', text:'你好，我是好鄰。今天想先問你一件事──你現在最想要的是什麼樣的陪伴？不用完整描述，用一句話說說也可以。', collect: null }, { role:'user', text:'我剛生完小孩三個月，老公上班，白天都我一個人在家帶寶寶，有點快喘不過氣。想找跟我一樣的爸媽。', collect: { situation:'新手媽媽・產後三個月・白天獨自照顧寶寶', want:'想認識同樣是新手爸媽的人' } }, { role:'ai', text:'謝謝你告訴我。新生兒的前幾個月是真的很重的一段時間。我想確認一下──你住哪一帶？找附近可以實體見面的會比較好，還是你現在更希望線上就好？', collect: null }, { role:'user', text:'我住內湖，可以偶爾出門，但帶寶寶出遠門還是有點困難。最好是內湖或附近能推著推車去的地方。', collect: { region:'台北市・內湖', form:'優先實體・不超過推車可達距離' } }, { role:'ai', text:'了解，推車友善很重要。再問一個問題：你希望這個聚會是有主題的（例如親子共讀、副食品研究），還是比較像「大家一起坐著就好」的那種？', collect: null }, { role:'user', text:'一起坐著就好。有時候只是想聽到別人說寶寶也會這樣，我就鬆一口氣了。', collect: { atmosphere:'非主題式・互相陪伴取向', needs:['情緒支持','不被評價的空間'] } }, { role:'ai', text:'我聽到了。那預算呢？有些團是免費的，有些有月費。你現在比較希望哪一種？', collect: null }, { role:'user', text:'免費最好，育嬰留職停薪中。', collect: { budget:'免費優先' } }, { role:'ai', text:'好。我已經有一些方向了，讓我整理一下，幫你推薦 3 個我覺得最適合的好鄰居團。稍等我一下。', collect: null, final: true }, ]; const AIMatchPage = ({ onNav }) => { const c = useTokens(); const isMobile = useIsMobile(); const [needsOpen, setNeedsOpen] = useState(false); const D = window.HAOLIN_DATA; const [messages, setMessages] = useState([{ role:'ai', text: AI_SCRIPT[0].text }]); const [stepIdx, setStepIdx] = useState(1); // index of NEXT step in script const [collected, setCollected] = useState({}); const [typing, setTyping] = useState(false); const [input, setInput] = useState(''); const [finalState, setFinalState] = useState(null); // null | 'loading' | 'done' const scrollRef = useRef(null); useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, typing]); const nextStep = AI_SCRIPT[stepIdx]; const userSuggestion = nextStep && nextStep.role === 'user' ? nextStep.text : null; const sendUser = () => { if (!userSuggestion) return; // append user message (use suggested text) const userMsg = AI_SCRIPT[stepIdx]; setMessages(m => [...m, { role:'user', text: userMsg.text }]); if (userMsg.collect) setCollected(prev => ({ ...prev, ...userMsg.collect })); setInput(''); const nextIdx = stepIdx + 1; setStepIdx(nextIdx); // AI typing if (AI_SCRIPT[nextIdx]) { setTyping(true); setTimeout(() => { const aiMsg = AI_SCRIPT[nextIdx]; setTyping(false); setMessages(m => [...m, { role:'ai', text: aiMsg.text }]); if (aiMsg.final) { setTimeout(() => setFinalState('loading'), 700); setTimeout(() => setFinalState('done'), 2600); } setStepIdx(nextIdx + 1); }, 1400 + Math.random()*700); } }; const restart = () => { setMessages([{ role:'ai', text: AI_SCRIPT[0].text }]); setStepIdx(1); setCollected({}); setTyping(false); setFinalState(null); }; const recommendations = [D.groups.find(g=>g.id==='g7'), D.groups.find(g=>g.id==='g1'), D.groups.find(g=>g.id==='g6')]; const reasons = [ '專為新生兒爸媽設計，每週日下午內湖捷運站旁邊，推車進出友善。不需要報名，去了就是。', '戶外親子團，週六早上在新店溪，雖然在新店，但很多內湖爸媽也會開車過去（有免費停車場）。', '如果你某天需要三十分鐘完全安靜，這個桃園的靜心圈有線上場。適合不想社交但想有人的時候。', ]; return (
{/* LEFT: conversation */}
{/* Top bar */}
好鄰 AI 媒合
{!isMobile &&
會用對話幫你找到最適合的好鄰居團
}
{isMobile && ( )}
{/* Messages */}
{messages.map((m, i) => )} {typing && } {finalState && (
{finalState === 'loading' ? (
我在幫你挑選⋯⋯
) : (
我覺得這 3 個團最適合你，每個都有推薦理由：
{recommendations.map((g, i) => ( onNav('group-detail', g.id)}/> ))}
)}
)}
{/* Input */}
{userSuggestion && !typing && !finalState && (
)}