Thư của Mơ

Bản đồ hành trình

- +

+ + +

Bản đồ hành trình

+ +

+ setAuthModalOpen(true)} + /> + +

); @@ -694,6 +715,11 @@ export default function App() { setView('form'); }} /> + setNotebookOpen(false)} + /> setAuthModalOpen(false)} /> {/* Toast Notification */} diff --git a/components/MoNotebookModal.tsx b/components/MoNotebookModal.tsx new file mode 100644 index 0000000..116bf7b --- /dev/null +++ b/components/MoNotebookModal.tsx @@ -0,0 +1,136 @@ +import { useEffect, useState } from 'react'; +import { motion, AnimatePresence } from 'motion/react'; +import { IconX } from './icons'; +import type { ItineraryPlan } from '../types'; +import { buildDoodleSvg, composeMoLetter, type MoLetter } from '../services/moNotebook'; + +interface MoNotebookModalProps { + open: boolean; + trip: ItineraryPlan | null; + onClose: () => void; +} + +export function MoNotebookModal({ open, trip, onClose }: MoNotebookModalProps) { + const [letter, setLetter] = useState(null); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + useEffect(() => { + if (!open || !trip) return; + setLoading(true); + setError(null); + setLetter(null); + composeMoLetter(trip) + .then(setLetter) + .catch((err: Error) => { + if (err.message === 'RATE_LIMIT_EXCEEDED') { + setError('Hôm nay Mơ hết hạn ngạch viết thư rồi. Quay lại ngày mai nhé.'); + } else if (err.message === 'BUDGET_EXCEEDED') { + setError('Mơ đang nghỉ. Quay lại ngày mai nhé.'); + } else { + setError('Mơ chưa viết được thư lần này. Thử lại sau.'); + } + }) + .finally(() => setLoading(false)); + }, [open, trip]); + + if (!open) return null; + + return ( + + + e.stopPropagation()} + > + + +

+ {loading && ( +

+ Mơ đang viết thư cho bạn… +

+ )} + {error && ( +

+ {error} +

+ )} + {letter && ( + <> +

{letter.greeting}

+ {letter.body.map((para, idx) => ( +

+ {para} +

+ ))} +

{letter.signoff}

— Mơ

+ + )} +

+ + {letter && ( +

+ + +

+ )} + + + + ); +} + +function printLetter(): void { + const node = document.getElementById('mo-letter-content'); + if (!node) return; + const win = window.open('', 'mo-letter', 'width=600,height=800'); + if (!win) return; + win.document.write(` + + Thư của Mơ + ${node.innerHTML} + `); + win.document.close(); + win.focus(); + win.print(); +} diff --git a/components/PersonalWorldBadge.tsx b/components/PersonalWorldBadge.tsx new file mode 100644 index 0000000..200b20a --- /dev/null +++ b/components/PersonalWorldBadge.tsx @@ -0,0 +1,87 @@ +import { useEffect, useState } from 'react'; +import { motion } from 'motion/react'; +import { listOwnedTrips } from '../services/tripsApi'; +import { + buildWorldStats, + currentMilestone, + nextMilestone, + type PersonalWorldStats, +} from '../services/personalWorld'; +import { useAuth } from '../services/useAuth'; + +export function PersonalWorldBadge() { + const { user } = useAuth(); + const [stats, setStats] = useState(null); + + useEffect(() => { + if (!user) { + setStats(null); + return; + } + let cancelled = false; + listOwnedTrips(user.id, 100).then((trips) => { + if (cancelled) return; + setStats(buildWorldStats(trips)); + }); + return () => { + cancelled = true; + }; + }, [user]); + + if (!user || !stats) return null; + + const current = currentMilestone(stats.tripCount); + const next = nextMilestone(stats.tripCount); + const progressTowardsNext = next + ? Math.min(1, stats.tripCount / next.threshold) + : 1; + + return ( + +

Thế giới MoodTrip của bạn

{current ? '🌳' : '🌱'}

+ {current?.label ?? 'Chưa có chuyến nào'} +

{current?.description ?? 'Hãy tạo chuyến đầu tiên'}

+ +

+ + + +

+ + {next && ( + <> +

+ +

+ {next.threshold - stats.tripCount} chuyến nữa đến {next.label} +

+ + )} + + ); +} + +function Stat({ label, value }: { label: string; value: number }) { + return ( +

{value}

{label}

+ ); +} diff --git a/components/PublicShareButton.tsx b/components/PublicShareButton.tsx new file mode 100644 index 0000000..0e91204 --- /dev/null +++ b/components/PublicShareButton.tsx @@ -0,0 +1,88 @@ +import { useState } from 'react'; +import { motion, AnimatePresence } from 'motion/react'; +import type { ItineraryPlan, FormData } from '../types'; +import { ensurePublicTrip } from '../services/publicShare'; +import { useAuth } from '../services/useAuth'; + +interface PublicShareButtonProps { + itinerary: ItineraryPlan; + formInput?: Partial; + onRequestSignIn: () => void; +} + +type State = 'idle' | 'sharing' | 'shared' | 'error'; + +export function PublicShareButton({ itinerary, formInput, onRequestSignIn }: PublicShareButtonProps) { + const { user } = useAuth(); + const [state, setState] = useState('idle'); + const [shareUrl, setShareUrl] = useState(null); + const [errorMsg, setErrorMsg] = useState(null); + + async function handleShare() { + if (!user) { + onRequestSignIn(); + return; + } + setState('sharing'); + setErrorMsg(null); + try { + const existingId = typeof itinerary.id === 'string' ? itinerary.id : undefined; + const result = await ensurePublicTrip(user.id, itinerary, formInput ?? {}, existingId); + setShareUrl(result.url); + setState('shared'); + } catch (err) { + setErrorMsg(err instanceof Error ? err.message : 'Không thể chia sẻ'); + setState('error'); + } + } + + async function handleCopy() { + if (!shareUrl) return; + try { + await navigator.clipboard.writeText(shareUrl); + } catch { + void 0; + } + } + + return ( +

+ + + + {state === 'shared' && shareUrl && ( + +

Lịch trình đã được công khai. Ai có link đều xem được:

+ (e.target as HTMLInputElement).select()} + className="flex-1 px-2 py-1.5 bg-slate-900 rounded text-teal-200 text-xs" + /> + +

+ + )} + {state === 'error' && errorMsg && ( + + {errorMsg} + + )} + +

+ ); +} diff --git a/components/RegionDialectSelector.tsx b/components/RegionDialectSelector.tsx new file mode 100644 index 0000000..910eb33 --- /dev/null +++ b/components/RegionDialectSelector.tsx @@ -0,0 +1,63 @@ +import { useEffect, useState } from 'react'; +import { useAuth } from '../services/useAuth'; +import { loadPreferences, setRegionDialect } from '../services/preferencesApi'; + +const OPTIONS: Array<{ id: string; label: string; sample: string }> = [ + { id: 'auto', label: 'Tự động theo điểm đến', sample: 'Mơ chọn giọng phù hợp với mỗi chuyến' }, + { id: 'north', label: 'Miền Bắc', sample: 'ạ, nhé, đấy' }, + { id: 'central', label: 'Miền Trung', sample: 'mệ, tê, ni, rứa' }, + { id: 'south', label: 'Miền Nam', sample: 'nhe, dữ chưa, trời ơi' }, + { id: 'mekong', label: 'Miền Tây', sample: 'mèn đét, hông, nghen' }, +]; + +export function RegionDialectSelector() { + const { user } = useAuth(); + const [current, setCurrent] = useState('auto'); + const [saving, setSaving] = useState(false); + const [savedAt, setSavedAt] = useState(null); + + useEffect(() => { + if (!user) return; + loadPreferences(user.id).then((p) => { + if (p?.regionDialect) setCurrent(p.regionDialect); + }); + }, [user]); + + if (!user) return null; + + async function handlePick(id: string) { + setCurrent(id); + setSaving(true); + await setRegionDialect(user!.id, id === 'auto' ? null : id); + setSaving(false); + setSavedAt(Date.now()); + setTimeout(() => setSavedAt(null), 1500); + } + + return ( +

🗣️ Tiếng vùng của Mơ

+ Chọn giọng địa phương bạn muốn nghe khi Mơ kể chuyện. +

+ {OPTIONS.map((opt) => ( + + ))} +

+ {savedAt &&

✓ Đã lưu

} +

+ ); +} diff --git a/components/SongDiRecorder.tsx b/components/SongDiRecorder.tsx new file mode 100644 index 0000000..804e4c9 --- /dev/null +++ b/components/SongDiRecorder.tsx @@ -0,0 +1,129 @@ +import { useEffect, useRef, useState } from 'react'; +import { motion } from 'motion/react'; +import { + computeWaveform, + isSongDiSupported, + startSoundRecorder, + type SoundClip, + type WaveformSummary, +} from '../services/songDi'; + +interface SongDiRecorderProps { + destination: string; + onClipReady?: (clip: SoundClip, waveform: WaveformSummary) => void; +} + +type State = 'idle' | 'requesting' | 'recording' | 'processing' | 'ready' | 'unsupported' | 'error'; + +export function SongDiRecorder({ destination, onClipReady }: SongDiRecorderProps) { + const [state, setState] = useState(isSongDiSupported() ? 'idle' : 'unsupported'); + const [clip, setClip] = useState(null); + const [waveform, setWaveform] = useState(null); + const [errorMsg, setErrorMsg] = useState(null); + const recorderRef = useRef> | null>(null); + + useEffect(() => { + return () => { + recorderRef.current?.cancel(); + }; + }, []); + + async function handleStart() { + setState('requesting'); + setErrorMsg(null); + try { + const rec = await startSoundRecorder({ maxDurationMs: 5000, label: destination }); + recorderRef.current = rec; + setState('recording'); + setTimeout(() => { + if (recorderRef.current === rec) void handleStop(); + }, 5050); + } catch (err) { + setState('error'); + setErrorMsg(err instanceof Error ? err.message : 'Không truy cập được micro'); + } + } + + async function handleStop() { + if (!recorderRef.current) return; + setState('processing'); + try { + const newClip = await recorderRef.current.stop(); + recorderRef.current = null; + setClip(newClip); + const wf = await computeWaveform(newClip.blob); + setWaveform(wf); + setState('ready'); + onClipReady?.(newClip, wf); + } catch (err) { + setState('error'); + setErrorMsg(err instanceof Error ? err.message : 'Lỗi khi xử lý âm thanh'); + } + } + + if (state === 'unsupported') { + return ( +

+ Thiết bị này chưa hỗ trợ ghi âm trong trình duyệt. +

+ ); + } + + return ( +

🎙️ Sóng đi · {destination}

+ Ghi 5 giây âm thanh ở nơi bạn đang đứng — Mơ sẽ ghép thành một tấm bưu thiếp âm thanh sau chuyến đi. +

+ + {waveform && ( +

+ {waveform.peaks.map((p, idx) => ( +

+ ))} +

+ )} + + {state === 'recording' && ( + + 🔴 Đang ghi… + + )} + + {state === 'processing' &&

Đang xử lý…

} + + {clip && state === 'ready' && ( +

+ ); +} diff --git a/services/__tests__/moNotebook.test.ts b/services/__tests__/moNotebook.test.ts new file mode 100644 index 0000000..2676777 --- /dev/null +++ b/services/__tests__/moNotebook.test.ts @@ -0,0 +1,30 @@ +import { describe, expect, it } from 'vitest'; +import { buildDoodleSvg } from '../moNotebook'; + +describe('buildDoodleSvg', () => { + it('returns an SVG document', () => { + const svg = buildDoodleSvg('cafe'); + expect(svg).toMatch(/^