import React, { useEffect, useRef, useState } from "react"; import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Animated, Easing, SafeAreaView, } from "react-native"; import { Ionicons, Feather, MaterialCommunityIcons } from "@expo/vector-icons"; import { LinearGradient } from "expo-linear-gradient"; import { BlurView } from "expo-blur"; type Mode = "premium" | "kid"; type LangCode = "EN" | "KO" | "ES" | "AZ"; type Turn = "idle" | "listening" | "thinking" | "speaking"; type Message = { from: "ai" | "user"; text: string }; const LANGS: { code: LangCode; label: string; flag: string }[] = [ { code: "EN", label: "English", flag: "🇺🇸" }, { code: "KO", label: "한국어", flag: "🇰🇷" }, { code: "ES", label: "Español", flag: "🇪🇸" }, { code: "AZ", label: "Azərbaycan", flag: "🇦🇿" }, ]; const SCRIPTS: Record = { EN: [ { ai: "Hi! Let's practice. How was your day today?", user: "It was good, thanks! A little busy." }, { ai: "Nice. What kept you busy?", user: "I had a big meeting at work." }, { ai: "That sounds important — how did it go?", user: "It went better than I expected." }, ], KO: [ { ai: "안녕하세요! 오늘 하루 어땠어요?", user: "좋았어요, 감사해요! 조금 바빴어요." }, { ai: "그렇군요, 왜 바빴어요?", user: "회사에서 큰 회의가 있었어요." }, { ai: "중요한 회의였네요 — 잘 됐어요?", user: "생각보다 잘 됐어요." }, ], ES: [ { ai: "¡Hola! Practiquemos. ¿Qué tal tu día?", user: "¡Bien, gracias! Un poco ocupado." }, { ai: "Qué bien. ¿Por qué estuviste ocupado?", user: "Tuve una reunión importante." }, { ai: "Suena importante, ¿cómo te fue?", user: "Mejor de lo que esperaba." }, ], AZ: [ { ai: "Salam! Gəlin məşq edək. Bu gün necə keçdi?", user: "Yaxşı keçdi, sağ olun! Bir az məşğul idim." }, { ai: "Nə ilə məşğul idiniz?", user: "İşdə böyük bir görüş var idi." }, { ai: "Vacib görünür — necə keçdi?", user: "Gözlədiyimdən yaxşı keçdi." }, ], }; const THEME = { premium: { bgGradient: ["#0a0c12", "#12141d", "#181b27"] as const, panelBg: "rgba(255,255,255,0.055)", panelBorder: "rgba(255,255,255,0.10)", text: "#eef0f6", textMuted: "#8991a8", accentA: "#8b7cff", accentB: "#57d9c9", orbGlow: "rgba(139,124,255,0.35)", bubbleAI: "rgba(255,255,255,0.07)", bubbleUser: "rgba(139,124,255,0.22)", chipBg: "rgba(255,255,255,0.06)", chipBgActive: "rgba(139,124,255,0.28)", radius: 20, }, kid: { bgGradient: ["#fff2e6", "#ffe9f2", "#eef1ff"] as const, panelBg: "#ffffff", panelBorder: "#ffe1ee", text: "#3b2f52", textMuted: "#9a8bb3", accentA: "#ff8fb4", accentB: "#57cf95", orbGlow: "rgba(255,143,180,0.4)", bubbleAI: "#fff2f8", bubbleUser: "#eafcef", chipBg: "#f4effc", chipBgActive: "#ffdcea", radius: 28, }, }; // --- Animated waveform (Premium mode "AI is speaking" visual) ------------- function Waveform({ active, colors }: { active: boolean; colors: readonly [string, string] }) { const bars = useRef([0, 1, 2, 3, 4].map(() => new Animated.Value(0.35))).current; useEffect(() => { const loops = bars.map((bar, i) => Animated.loop( Animated.sequence([ Animated.delay(i * 90), Animated.timing(bar, { toValue: active ? 1 : 0.35, duration: 360, easing: Easing.inOut(Easing.quad), useNativeDriver: false, }), Animated.timing(bar, { toValue: active ? 0.3 : 0.35, duration: 360, easing: Easing.inOut(Easing.quad), useNativeDriver: false, }), ]) ) ); loops.forEach((l) => l.start()); return () => loops.forEach((l) => l.stop()); }, [active]); return ( {bars.map((bar, i) => ( ))} ); } // --- Bouncy character (Kid mode "AI is speaking" visual) ------------------ function Character({ active }: { active: boolean }) { const scale = useRef(new Animated.Value(1)).current; const rotate = useRef(new Animated.Value(0)).current; useEffect(() => { if (!active) { scale.setValue(1); rotate.setValue(0); return; } const loop = Animated.loop( Animated.sequence([ Animated.parallel([ Animated.timing(scale, { toValue: 1.12, duration: 260, useNativeDriver: true }), Animated.timing(rotate, { toValue: 1, duration: 260, useNativeDriver: true }), ]), Animated.parallel([ Animated.timing(scale, { toValue: 1, duration: 260, useNativeDriver: true }), Animated.timing(rotate, { toValue: -1, duration: 260, useNativeDriver: true }), ]), ]) ); loop.start(); return () => loop.stop(); }, [active]); const spin = rotate.interpolate({ inputRange: [-1, 0, 1], outputRange: ["-6deg", "0deg", "6deg"] }); return ( 🦊 ); } // --- Pulsing ring (mic listening indicator, both modes) -------------------- function ListeningRing({ active, color }: { active: boolean; color: string }) { const pulse = useRef(new Animated.Value(0)).current; useEffect(() => { if (!active) { pulse.setValue(0); return; } const loop = Animated.loop( Animated.timing(pulse, { toValue: 1, duration: 1100, easing: Easing.out(Easing.ease), useNativeDriver: true }) ); loop.start(); return () => loop.stop(); }, [active]); if (!active) return null; return ( ); } export default function App() { const [mode, setMode] = useState("premium"); const [lang, setLang] = useState("EN"); const [turn, setTurn] = useState("idle"); const [messages, setMessages] = useState([{ from: "ai", text: SCRIPTS.EN[0].ai }]); const scriptIndex = useRef(0); const scrollRef = useRef(null); const timers = useRef[]>([]); const t = THEME[mode]; const isKid = mode === "kid"; useEffect(() => { return () => timers.current.forEach(clearTimeout); }, []); const changeLang = (code: LangCode) => { timers.current.forEach(clearTimeout); timers.current = []; scriptIndex.current = 0; setLang(code); setTurn("idle"); setMessages([{ from: "ai", text: SCRIPTS[code][0].ai }]); }; const handleOrbPress = () => { if (turn !== "idle") { timers.current.forEach(clearTimeout); timers.current = []; setTurn("idle"); return; } setTurn("listening"); const t1 = setTimeout(() => { const line = SCRIPTS[lang][scriptIndex.current % SCRIPTS[lang].length]; setMessages((m) => [...m, { from: "user", text: line.user }]); setTurn("thinking"); const t2 = setTimeout(() => { setTurn("speaking"); const nextLine = SCRIPTS[lang][(scriptIndex.current + 1) % SCRIPTS[lang].length]; setMessages((m) => [...m, { from: "ai", text: nextLine.ai }]); scriptIndex.current = (scriptIndex.current + 1) % SCRIPTS[lang].length; const t3 = setTimeout(() => setTurn("idle"), 2200); timers.current.push(t3); }, 850); timers.current.push(t2); }, 1500); timers.current.push(t1); }; useEffect(() => { const id = setTimeout(() => scrollRef.current?.scrollToEnd({ animated: true }), 80); return () => clearTimeout(id); }, [messages]); const statusLabel = turn === "listening" ? "Listening…" : turn === "thinking" ? "Thinking…" : turn === "speaking" ? "Speaking…" : "Tap to talk"; return ( {/* Header */} Practice Voice conversation coach setMode("premium")} > Premium setMode("kid")} > Kid {/* Language pills */} {LANGS.map((l) => { const activeLang = l.code === lang; return ( changeLang(l.code)} style={[ styles.langPill, { backgroundColor: activeLang ? t.chipBgActive : t.chipBg, borderColor: activeLang ? t.accentA : t.panelBorder, }, ]} > {l.flag} {l.label} ); })} {/* Transcript */} {messages.map((msg, i) => ( {msg.from === "ai" && ( {isKid ? "🦊" : "✨"} )} {msg.text} ))} {/* Orb / character focal point */} {isKid ? ( ) : ( {turn === "speaking" ? ( ) : ( )} )} {statusLabel} Repeat Hint ); } const styles = StyleSheet.create({ fill: { flex: 1 }, header: { flexDirection: "row", justifyContent: "space-between", alignItems: "flex-start", paddingHorizontal: 20, paddingTop: 8, }, title: { fontSize: 24, fontWeight: "800", letterSpacing: -0.3 }, subtitle: { fontSize: 12.5, marginTop: 2 }, modeSwitch: { flexDirection: "row", borderRadius: 999, borderWidth: 1, padding: 3, gap: 2, }, modeBtn: { flexDirection: "row", alignItems: "center", gap: 4, paddingVertical: 6, paddingHorizontal: 10, borderRadius: 999, }, modeBtnText: { fontSize: 11.5, fontWeight: "700" }, langRow: { paddingHorizontal: 20, paddingVertical: 14, gap: 8, }, langPill: { flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 7, paddingHorizontal: 12, borderRadius: 999, borderWidth: 1, }, langPillText: { fontSize: 12.5, fontWeight: "700" }, transcript: { flex: 1, paddingHorizontal: 20, }, bubbleRow: { flexDirection: "row", alignItems: "flex-end", gap: 8, }, avatar: { width: 26, height: 26, borderRadius: 13, alignItems: "center", justifyContent: "center", }, bubble: { maxWidth: "76%", paddingVertical: 10, paddingHorizontal: 14, borderRadius: 18, borderWidth: 1, }, orbSection: { alignItems: "center", paddingBottom: 22, paddingTop: 6, gap: 12, }, orbWrap: { alignItems: "center", justifyContent: "center", width: 176, height: 176, }, pulseRing: { position: "absolute", width: 150, height: 150, borderRadius: 75, borderWidth: 2, }, orbPremium: { width: 150, height: 150, borderRadius: 75, borderWidth: 1, alignItems: "center", justifyContent: "center", overflow: "hidden", shadowOpacity: 0.9, shadowRadius: 30, shadowOffset: { width: 0, height: 0 }, elevation: 10, }, orbKid: { width: 150, height: 150, borderRadius: 75, borderWidth: 2, alignItems: "center", justifyContent: "center", shadowOpacity: 0.9, shadowRadius: 24, shadowOffset: { width: 0, height: 6 }, elevation: 8, }, waveRow: { flexDirection: "row", alignItems: "center", gap: 5, height: 46, }, waveBar: { width: 6, borderRadius: 3, }, statusLabel: { fontSize: 12.5, fontWeight: "600" }, actionsRow: { flexDirection: "row", gap: 10, marginTop: 4, }, actionBtn: { flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 9, paddingHorizontal: 16, borderRadius: 999, borderWidth: 1, }, actionBtnText: { fontSize: 12.5, fontWeight: "700" }, });

Voice Language Coach