[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","fame144","name","aivoice","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/fame144/aivoice/code/frontend/components/App.tsx","extension","id","8cb7925a-af87-4237-b427-0ba3c97b50cf","App.tsx","fileId","01a03ad3-c356-71dc-85a7-bafd7ff2637c","parentId","01a03ad3-c356-71dc-85a7-c2f5eb3ad2ba","branchId","0ceb3d21-355e-41d6-9f73-906865528d07","branchVersion",20,"latest",true,"createdAt",["D",1787694703787],"version",8,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ReactNode } from \"https://esm.sh/react@18.2.0\";\nimport {\n listen,\n recognitionSupported,\n speak,\n speechSupported,\n} from \"../speech.ts\";\n\n// ---- Client-side types (mirror of the server contract) ----------------/\ninterface Profile {\n name: string;\n age: number;\n closeness: string;\n personality: string;\n likes: string;\n about: string;\n provider: string;\n model: string;\n directions: string[];\n}\ninterface Message {\n role: \"verbal\" | \"nonverbal\" | \"system\";\n content: string;\n direction?: string;\n created_at: string;\n}\ninterface Option {\n text: string;\n direction: string;\n}\ninterface Provider {\n id: string;\n name: string;\n configured: boolean;\n model: string;\n}\ninterface State {\n profile: Profile;\n messages: Message[];\n options: Option[];\n providers: Provider[];\n}\n\nconst DIRECTIONS = [\n { id: \"agreeable\", label: \"Agree\", emoji: \"😊\" },\n { id: \"neutral\", label: \"Neutral\", emoji: \"😐\" },\n { id: \"disagree\", label: \"Honest\", emoji: \"🗣️\" },\n { id: \"interest\", label: \"Curious\", emoji: \"🧐\" },\n { id: \"smalltalk\", label: \"Keep it light\", emoji: \"💬\" },\n { id: \"influential\", label: \"Opinion\", emoji: \"🎯\" },\n];\nconst dirEmoji = (id: string) => DIRECTIONS.find((d) => d.id === id)?.emoji ?? \"💬\";\nconst dirLabel = (id: string) => DIRECTIONS.find((d) => d.id === id)?.label ?? id;\n\nconst CLOSENESS = [\n { id: \"basic\", label: \"Basic — plain, short responses\" },\n { id: \"moderate\", label: \"Moderate — a bit of personality\" },\n { id: \"deep\", label: \"Deep — richly personal, detailed\" },\n];\n\nasync function post(url: string, body: unknown) {\n const r = await fetch(url, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body),\n });\n return r.json();\n}\n\n// ---- Small presentational bits ----------------------------------------/\n\nfunction Bubble({ m }: { m: Message }) {\n const mine = m.role === \"nonverbal\";\n return (\n

\n \n {mine && m.direction && (\n

\n {dirEmoji(m.direction)} spoken via “{dirLabel(m.direction)}”\n

\n )}\n {m.content}\n {speechSupported() && (\n speak(m.content)}\n title=\"Read this aloud\"\n className=\"absolute top-1.5 right-2 text-xs opacity-40 hover:opacity-100 transition-opacity cursor-pointer\"\n >\n 🔊\n \n )}\n

\n \n );\n}\n\n// ---- Main app ---------------------------------------------------------/\n\nexport function App() {\n const [state, setState] = useState(null);\n const [tab, setTab] = useState<\"chat\" | \"profile\">(\"chat\");\n const [verbalText, setVerbalText] = useState(\"\");\n const [typedText, setTypedText] = useState(\"\");\n const [busy, setBusy] = useState(false);\n const [savedMsg, setSavedMsg] = useState(\"\");\n const [listening, setListening] = useState(false);\n const scrollRef = useRef(null);\n\n async function load() {\n const r = await fetch(\"/api/state\");\n setState(await r.json());\n }\n useEffect(() => {\n load().catch(console.error);\n }, []);\n useEffect(() => {\n scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n }, [state?.messages.length, state?.options.length]);\n\n async function respond() {\n if (!verbalText.trim() || busy) return;\n setBusy(true);\n try {\n const res = await post(\"/api/respond\", { text: verbalText });\n setState((s) => (s ? { ...s, messages: res.messages, options: res.options } : s));\n setVerbalText(\"\");\n } finally {\n setBusy(false);\n }\n }\n async function choose(option: Option) {\n if (busy) return;\n setBusy(true);\n try {\n const res = await post(\"/api/choose\", { option });\n setState((s) => (s ? { ...s, messages: res.messages, options: res.options } : s));\n // Speak the chosen reply — it is the person's voice.\n speak(option.text);\n } finally {\n setBusy(false);\n }\n }\n async function startListening() {\n if (listening) return;\n setListening(true);\n try {\n const text = await listen();\n if (text) setVerbalText((prev) => (prev ? prev + \" \" + text : text));\n } finally {\n setListening(false);\n }\n }\n async function typeReply() {\n if (!typedText.trim() || busy) return;\n setBusy(true);\n try {\n const res = await post(\"/api/type\", { text: typedText });\n setState((s) => (s ? { ...s, messages: res.messages, options: res.options } : s));\n setTypedText(\"\");\n } finally {\n setBusy(false);\n }\n }\n async function reset() {\n const res = await post(\"/api/reset\", {});\n setState((s) => (s ? { ...s, messages: res.messages, options: res.options } : s));\n }\n\n async function saveProfile() {\n if (!state) return;\n const res = await post(\"/api/profile\", state.profile);\n setState((s) => (s ? { ...s, profile: res.profile, providers: res.providers } : s));\n setSavedMsg(\"Profile saved ✓\");\n setTimeout(() => setSavedMsg(\"\"), 2500);\n }\n\n if (!state) {\n return (\n

\n Loading…\n

\n );\n }\n const p = state.profile;\n const activeProvider = state.providers.find((x) => x.id === p.provider);\n\n return (\n

\n {/* Header */}\n

🗣️ AIVoice

an assistive conversation voice

\n \n {p.name || \"Profile\"} · age {p.age}\n \n \n {activeProvider?.name ?? p.provider}\n \n

\n\n {/* Tabs */}\n

\n {([\"chat\", \"profile\"] as const).map((t) => (\n setTab(t)}\n className={`px-4 py-2 rounded-t-lg text-sm font-medium cursor-pointer ${\n tab === t ? \"bg-indigo-600 text-white\" : \"text-gray-600 hover:bg-gray-100\"\n }`}\n >\n {t === \"chat\" ? \"💬 Conversation\" : \"🪪 Profile & Setup\"}\n \n ))}\n

\n\n {tab === \"chat\" ? (\n <>\n {/* Messages */}\n

\n {state.messages.length === 0 && (\n

\n Say something as the verbal partner, and the person picks how to answer.\n

\n )}\n {state.messages.map((m, i) => (\n \n ))}\n

\n\n {/* Response options */}\n {state.options.length > 0 && (\n

\n How would you like to answer? (tap one)\n

\n {state.options.map((o, i) => (\n choose(o)}\n disabled={busy}\n className=\"text-left rounded-xl border-2 border-emerald-200 bg-emerald-50 hover:border-emerald-500 hover:bg-emerald-100 px-4 py-3 disabled:opacity-50 transition-colors cursor-pointer\"\n >\n

\n {dirEmoji(o.direction)} {dirLabel(o.direction)}\n

\n {speechSupported() && (\n {\n e.stopPropagation();\n speak(o.text);\n }}\n title=\"Hear this option\"\n className=\"text-sm text-emerald-600 hover:text-emerald-800 cursor-pointer\"\n >\n 🔊\n \n )}\n

{o.text}

\n \n ))}\n

\n )}\n\n {/* Verbal partner input */}\n

\n \n The verbal partner says…\n \n

\n setVerbalText(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && respond()}\n placeholder=\"Type what the other person just said\"\n className=\"flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400\"\n />\n {recognitionSupported() && (\n \n {listening ? \"🎙️\" : \"🎤\"}\n \n )}\n \n {busy ? \"Listening…\" : \"🎧 Listen → choices\"}\n \n

\n\n {/* Custom typed reply + reset */}\n

\n \n Or type a reply for the person (trusted person)\n \n

\n setTypedText(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && typeReply()}\n placeholder=\"e.g. Tell them I'm excited to see that movie\"\n className=\"flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400\"\n />\n \n Send\n \n

\n \n Clear conversation\n \n

\n \n ) : (\n <>\n {/* Profile editor */}\n

\n \n set(\"name\", e.target.value)} />\n \n \n set(\"age\", Number(e.target.value) || 1)}\n />\n \n

\n\n \n \n \n\n \n set(\"personality\", e.target.value)} />\n \n\n \n set(\"likes\", e.target.value)} />\n \n\n \n set(\"about\", e.target.value)}\n />\n \n\n \n \n

\n {activeProvider?.model && `Default model: ${activeProvider.model}`} The built-in demo needs no key;\n a real provider makes responses specific to your profile.\n

\n \n\n \n

\n {DIRECTIONS.map((d) => {\n const on = p.directions.includes(d.id);\n return (\n {\n const next = on ? p.directions.filter((x) => x !== d.id) : [...p.directions, d.id];\n set(\"directions\", next);\n }}\n className={`px-3 py-1.5 rounded-full text-xs border-2 cursor-pointer transition-colors ${\n on\n ? \"border-indigo-500 bg-indigo-50 text-indigo-700\"\n : \"border-gray-300 bg-white text-gray-400\"\n }`}\n >\n {d.emoji} {d.label}\n \n );\n })}\n

\n \n\n

\n \n Save profile\n \n {savedMsg && {savedMsg}}\n

\n \n )}\n\n \n

\n );\n\n // local helper needs to be defined inside component scope\n function set(key: keyof Profile, value: unknown) {\n setState((s) =>\n s\n ? {\n ...s,\n profile: { ...s.profile, [key]: value },\n }\n : s\n );\n }\n}\n\nconst inputCls =\n \"w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400\";\n\nfunction Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {\n return (\n

\n {label}\n {children}\n {hint &&

{hint}

}\n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","4cd30b09-d38e-41cd-b789-c1f169cbe601",["D",1787693351550],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AI assistive conversation helper for nonverbal people","imageUrl","userId","81651da5-a1fb-4f69-b30b-fee2e4ecff8a","pinnedFileId","01a03ad3-c356-71dc-85a7-dc2115d28764","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","fa84786a-b3f0-4ac8-8017-55421c1fdcb4","tursoName","4cd30b09d38e41cdb789c1f169cbe601","tursoHostname","4cd30b09d38e41cdb789c1f169cbe601-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789525843977],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_103":-5,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":93,"_11":94,"_22":30,"_95":49,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":12,"_102":10},"isOwned",21,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJyMEVwbjZpZFM0QTE4UW1EWFJuTmhRM1o1VyJ9","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":94,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]