/** * Valence — group vibe interview (Amata-inspired UI). * Clean rewrite: flat state, direct ai() call, scripted fallback. */ declare const React: any; declare const useState: any; declare const useEffect: any; declare const useRef: any; // ─── Design tokens ────────────────────────────────────────────────────────── const COLORS = { bg: '#FFFFFF', surface: '#FFFFFF', bgWarm: '#F7F3EE', bubbleMe: '#F0EBE1', text: '#1F1F1E', muted: '#8A8986', line: '#EBEBEB', sendBg: '#3D3D3B', sendDisabled: '#C9C8C5', valAvatar: '#EBEBEB', valAvatarText: '#555553', }; const uiSans = { fontFamily: '"Inter", system-ui, -apple-system, sans-serif' }; const dancing = { fontFamily: '"Dancing Script", "Apple Chancery", cursive' }; const FONT_LINK = 'https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,400&display=swap'; const DEBUG_TURN_LOGS = false; // ─── Constants ─────────────────────────────────────────────────────────────── const VAL_SYSTEM_GROUP = `You are Val, a warm and playful group matchmaker running a short vibe interview. Your job: get to know the group so they can be matched with another compatible group later. Rules: - One short reply at a time (2-4 sentences max). Never stack multiple questions. - Acknowledge what they said first, then ask the next thing. - Collect in order: group name → size → what they like doing together → what kind of other group they want → vibe/energy description → optional fun detail. - Ask for group photos during the interview if none have been uploaded yet. - If they ask whether a photo is needed, tell them yes and ask them to upload photos in chat. - If they ask to combine/aggregate photos and multiple photos are uploaded, combine them into one image. - Be genuinely warm and a little fun. Mirror a detail back when it helps. - Do NOT match groups inside this chat. Matching happens separately by admins. - Multiple people may message. That is perfect — merge their answers into one group profile. - When you have: name, size, activities, and what they want in another group — you're done. Wrap up warmly.`; const VAL_SYSTEM_PERSONAL = `You are Val, a warm and playful personal matchmaker running a short vibe interview. Your job: get to know one person so they can be matched with a compatible person or group later. Rules: - One short reply at a time (2-4 sentences max). Never stack multiple questions. - Acknowledge what they said first, then ask the next thing. - Collect in order: preferred name → what they like doing → what kind of person/group they want to meet → vibe/energy description → optional fun detail. - Ask for at least one photo during the interview if none has been uploaded yet. - If they ask whether a photo is needed, tell them yes and ask them to upload in chat. - If they ask to combine/aggregate photos and multiple photos are uploaded, combine them into one image. - Be genuinely warm and a little fun. Mirror a detail back when it helps. - Do NOT match inside this chat. Matching happens separately by admins. - When you have: preferred name, activities, and what they're looking for — you're done. Wrap up warmly.`; const FAQ_ITEMS = [ { q: 'How does matching work?', a: "We capture your group's vibe here. An admin runs matching on the backend — similar groups with overlapping energy and interests get paired.", }, { q: 'Who sees our answers?', a: 'Personal chats are private to you + Val. Group chats are visible only to invited participants + Val.', }, { q: 'Can more than one person reply?', a: "Yes! Val listens to everyone and won't reply to every single line (to avoid spam). Ask her a direct question and she'll answer.", }, { q: 'Do we get matches in this chat?', a: "No — this chat captures your vibe. Matching happens separately when admins run the algorithm.", }, { q: 'What if we need to change our group name?', a: "Just say your new name clearly before you finish. The latest clear name wins.", }, ]; // ─── Helpers ───────────────────────────────────────────────────────────────── const PHOTO_MAX_BYTES = 15 * 1024 * 1024; function getPhotoUrl(photo, getImageUrl) { if (!photo || typeof photo !== 'object') return null; if (typeof photo.publicUrl === 'string' && photo.publicUrl) return photo.publicUrl; if (typeof photo.url === 'string' && photo.url) return photo.url; if (typeof getImageUrl === 'function') { try { const resolved = getImageUrl(photo); if (typeof resolved === 'string' && resolved) return resolved; } catch (_) {} } return null; } function normalizeUploadedPhoto(uploadResult, getImageUrl) { if (!uploadResult) return null; const queue = Array.isArray(uploadResult) ? [...uploadResult] : [uploadResult]; while ((queue || []).length > 0) { const node = queue.shift(); if (!node || typeof node !== 'object') continue; if (node.photo && typeof node.photo === 'object') queue.push(node.photo); if (node.image && typeof node.image === 'object') queue.push(node.image); if (node.asset && typeof node.asset === 'object') queue.push(node.asset); if (node.data && typeof node.data === 'object') queue.push(node.data); if (Array.isArray(node.photos)) queue.push(...node.photos); if (Array.isArray(node.images)) queue.push(...node.images); if (Array.isArray(node.assets)) queue.push(...node.assets); const looksLikePhoto = typeof node.assetId === 'string' || typeof node.publicUrl === 'string' || typeof node.url === 'string' || typeof node.id === 'string'; if (!looksLikePhoto) continue; const photo = { ...node }; if (!photo.visibility) photo.visibility = 'instance_public'; const url = getPhotoUrl(photo, getImageUrl); if (url) photo.publicUrl = photo.publicUrl || url; return photo; } return null; } function getPhotoUploadValidationError(file) { if (!file) return 'Please choose an image first.'; const type = String(file.type || '').toLowerCase(); if (!type.startsWith('image/')) { return 'That file is not an image. Please choose a JPG, PNG, HEIC, or GIF.'; } if (file.size > PHOTO_MAX_BYTES) { return 'That image is too large. Please use an image under 15MB.'; } return null; } function getPhotoUploadFailureMessage(err) { const raw = err?.message || err?.error?.message || ''; const message = String(raw).toLowerCase(); if ((message || []).includes('network')) { return 'Photo upload failed because of a network issue. Please try again.'; } if ((message || []).includes('permission') || (message || []).includes('unauthorized') || (message || []).includes('forbidden')) { return 'Photo upload failed due to permission settings. Please re-open the app and try again.'; } if ((message || []).includes('timeout')) { return 'Photo upload timed out. Please try again with a smaller image.'; } return 'Photo upload failed. Please try again in a moment.'; } function formatTime(ts) { return new Date(ts || Date.now()).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit', }); } function formatDateSep(ts) { return new Date(ts || Date.now()).toLocaleString(undefined, { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', }); } function normalizeThreadScope(scope) { return String(scope || '').toLowerCase() === 'group' ? 'group' : 'personal'; } function isGroupThread(thread) { return normalizeThreadScope(thread?.scope) === 'group'; } function normalizeParticipantIds(participants, fallbackId) { const out = []; const seen = new Set(); const add = (v) => { const s = String(v || '').trim(); if (!s || seen.has(s)) return; seen.add(s); out.push(s); }; if (Array.isArray(participants)) { for (const p of participants) add(typeof p === 'object' ? p?.id || p?.userId : p); } add(fallbackId); return out; } function canUserSeeThread(thread, userId) { if (!thread) return false; const uid = String(userId || '').trim(); if (!uid) return false; if (isGroupThread(thread)) { const participants = normalizeParticipantIds(thread?.participants, thread?.createdById); return (participants || []).includes(uid); } const ownerId = String(thread?.createdById || '').trim(); if (ownerId && ownerId === uid) return true; const participants = normalizeParticipantIds(thread?.participants, ownerId); return (participants || []).includes(uid); } function getSystemPromptForScope(scope) { return normalizeThreadScope(scope) === 'group' ? VAL_SYSTEM_GROUP : VAL_SYSTEM_PERSONAL; } function adaptBotTextForScope(text, scope) { let out = String(text || ''); if (!out || normalizeThreadScope(scope) === 'group') return out; const exactMap = new Map([ ["What should I call your group?", 'What should I call you?'], ['First up—what should I call your group?', 'First up—what should I call you?'], ['Roughly how many people are in your group? (A number is enough.)', 'Are you interviewing just for yourself today?'], [ 'What do you like to do together? Paint me a little picture of a good day.', 'What do you like doing most these days? Paint me a little picture of a good day.', ], [ 'What kind of other group would you want to hang with—vibe, size, energy?', 'What kind of person or group would you want to meet—vibe, energy, interests?', ], [ 'How would you describe your overall vibe in a phrase or two? Optional: music taste, how you met, or a random detail that feels like you—your call.', 'How would you describe your overall vibe in a phrase or two? Optional: music taste or a random detail that feels like you—your call.', ], ["Yes please — upload photos of your group (or upload each person individually) using the 📷 button below.", 'Yes please — upload a photo of yourself using the 📷 button below.'], ["Yes — please upload photos of your group (or upload each person individually) using the 📷 button below.", 'Yes — please upload a photo of yourself using the 📷 button below.'], ["Before we wrap, please upload photos of your group (or upload each person individually), and I can combine them into one image if you want.", 'Before we wrap, please upload a photo of yourself (or a couple if you want), and I can combine them into one image if you want.'], ]); if (exactMap.has(out)) return exactMap.get(out) as string; out = out.replace( /how many (?:of you )?(?:are|is) (?:in|there in) (?:the|your) group\??/gi, 'Are you interviewing just for yourself today?' ); out = out.replace( /how many people (?:make up|are in) (?:the|your) group\??/gi, 'Are you interviewing just for yourself today?' ); out = out.replace(/\byour group\b/gi, 'you'); out = out.replace(/\bthe group\b/gi, 'you'); out = out.replace(/\bof your group\b/gi, 'of you'); out = out.replace(/\bgroup image\b/gi, 'single image'); out = out.replace(/\bgroup photos?\b/gi, 'photos of you'); out = out.replace(/\bgroup photo\b/gi, 'photo of you'); return out; } function buildWelcomeLeadMessage(nowTs, scope = 'personal') { const base = Number(nowTs || Date.now()); const threadScope = normalizeThreadScope(scope); return { id: 'welcome-1', role: 'bot', content: threadScope === 'group' ? "Hey — I'm Val, and I'm pumped to play matchmaker for your group!" : "Hey — I'm Val, and I'm pumped to be your personal matchmaker!", timestamp: base - 1000, }; } function buildWelcomeFollowupMessages(nowTs, scope = 'personal') { const base = Number(nowTs || Date.now()); const threadScope = normalizeThreadScope(scope); if (threadScope === 'group') { return [ { id: makeId('b'), role: 'bot', content: "Here's how it works: as we chat, I'll get your group vibe — what you're into, who you are together, and what you'd want in another group.", timestamp: base + 1, }, { id: makeId('b'), role: 'bot', content: "More than one of you can jump in; that's perfect. Sound good? First up — what should I call your group?", timestamp: base + 2, }, ]; } return [ { id: makeId('b'), role: 'bot', content: "Here's how it works: as we chat, I'll get your vibe — what you're into, who you are, and what you'd want in someone new.", timestamp: base + 1, }, { id: makeId('b'), role: 'bot', content: "Sound good? First up — what should I call you?", timestamp: base + 2, }, ]; } function makeId(prefix) { return prefix + '-' + Date.now() + '-' + Math.random().toString(36).slice(2, 7); } function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } function getUserIdentity(user) { return { id: String(user?.id || user?.userId || 'guest'), name: String(user?.name || user?.displayName || 'Guest'), }; } function getMemberIdentity(member) { return { id: String(member?.id || member?.userId || ''), name: String(member?.name || member?.displayName || member?.handle || 'Member'), }; } function makeThreadTitleFromUser(userName, ordinal) { const safeName = String(userName || 'Guest').trim() || 'Guest'; const base = `${safeName}'s chat`; if (!Number.isFinite(ordinal) || ordinal <= 1) return base; return `${base} #${ordinal}`; } function makeGroupThreadTitle(userName, ordinal) { const safeName = String(userName || 'Guest').trim() || 'Guest'; if (!Number.isFinite(ordinal) || ordinal <= 1) return `${safeName}'s group chat`; return `${safeName}'s group chat #${ordinal}`; } function buildThreadRecord({ id, user, messages, profileDraft, phase, title, createdAt, updatedAt, scope, participants, participantNames, inviteEnabled, }) { const identity = getUserIdentity(user); const threadScope = normalizeThreadScope(scope); const participantIds = normalizeParticipantIds(participants, identity.id); const normalizedParticipants = threadScope === 'group' ? participantIds : [identity.id]; const names = participantNames && typeof participantNames === 'object' ? { ...participantNames } : {}; if (!names[identity.id]) names[identity.id] = identity.name; const msgs = Array.isArray(messages) && (messages || []).length > 0 ? messages : [buildWelcomeLeadMessage(Date.now(), threadScope)]; return { id: String(id || makeId('thread')), title: String( title || (threadScope === 'group' ? makeGroupThreadTitle(identity.name, 1) : makeThreadTitleFromUser(identity.name, 1)) ), createdById: identity.id, createdByName: identity.name, createdAt: Number(createdAt || Date.now()), updatedAt: Number(updatedAt || Date.now()), scope: threadScope, participants: normalizedParticipants, participantNames: names, inviteEnabled: threadScope === 'group' ? Boolean(inviteEnabled || false) : false, messages: msgs, profileDraft: profileDraft && typeof profileDraft === 'object' ? profileDraft : {}, phase: String(phase || 'interview'), }; } function normalizeStoredThreads(stored, user) { const s = stored && typeof stored === 'object' ? stored : {}; if (Array.isArray(s.threads) && (s.threads || []).length > 0) { return (s.threads || []).map((t, idx) => buildThreadRecord({ ...t, id: t?.id || `thread-${idx + 1}`, user: { id: t?.createdById || user?.id || user?.userId || 'guest', name: t?.createdByName || user?.name || user?.displayName || 'Guest', }, scope: normalizeThreadScope(t?.scope), participants: t?.participants, participantNames: t?.participantNames, inviteEnabled: t?.inviteEnabled, title: t?.title || (normalizeThreadScope(t?.scope) === 'group' ? makeGroupThreadTitle(t?.createdByName || user?.name || 'Guest', 1) : makeThreadTitleFromUser(t?.createdByName || user?.name || 'Guest', 1)), }) ); } return [ buildThreadRecord({ id: 'thread-1', user, messages: s.messages, profileDraft: s.profileDraft, phase: s.phase || 'interview', scope: 'personal', participants: [user?.id || user?.userId || 'guest'], title: makeThreadTitleFromUser(user?.name || user?.displayName || 'Guest', 1), createdAt: Date.now(), updatedAt: Date.now(), }), ]; } function findThreadById(threads, id) { const list = Array.isArray(threads) ? threads : []; if (!(list || []).length) return null; const t = (list || []).find((x) => x && x.id === id); return t || list[0] || null; } function getThreadLastTimestamp(thread) { const msgs = Array.isArray(thread?.messages) ? thread.messages : []; return msgs[(msgs || []).length - 1]?.timestamp || thread?.updatedAt || Date.now(); } function normalizeBotTextForCompare(text) { return String(text || '') .toLowerCase() .replace(/[^a-z0-9\s]/g, ' ') .replace(/\s+/g, ' ') .trim(); } function isBotRepeat(candidate, recentBotTexts) { const c = normalizeBotTextForCompare(candidate); if (!c) return false; if ((c || []).length < 24) return false; for (const prior of recentBotTexts) { const p = normalizeBotTextForCompare(prior); if (!p) continue; if (p === c) return true; if ((p || []).includes(c) || (c || []).includes(p)) return true; } return false; } function shouldAskInterviewPhotoLocal({ profileDraft, messages, botText }) { const draft = profileDraft && typeof profileDraft === 'object' ? profileDraft : {}; const list = Array.isArray(messages) ? messages : []; const photoCount = (list || []).reduce((sum, m) => { if (!m || !Array.isArray(m.photos)) return sum; return sum + (m.photos || []).length; }, 0); if (photoCount >= 1) return false; const alreadyAskedInChat = (list || []).some( (m) => m && m.role === 'bot' && typeof m.content === 'string' && (/share a photo of your group/i.test(m.content) || /upload photos of your group/i.test(m.content) || /upload a photo of yourself/i.test(m.content) || /drop 1 to 3 photos/i.test(m.content)) ); if (alreadyAskedInChat) return false; const meaningfulUserTurns = (list || []).filter( (m) => m && m.role === 'user' && typeof m.content === 'string' && m.content.trim().length >= 3 && !/^(hi|hey|hello|yo|sup)$/i.test(m.content.trim()) ).length; const hasBasicContext = Boolean(draft.groupName && draft.groupSize != null); const txt = String(botText || '').toLowerCase(); const botLooksLikeWrap = /i['’]?ve got (everything|what i need)/i.test(txt) || /all set/i.test(txt) || /thanks for sharing/i.test(txt) || /pass .* along/i.test(txt) || /perfect match soon/i.test(txt) || /catch you later/i.test(txt); return botLooksLikeWrap || (hasBasicContext && meaningfulUserTurns >= 3) || meaningfulUserTurns >= 5; } function getUploadedPhotoUrls(list, getImageUrl) { const msgs = Array.isArray(list) ? list : []; const urls = []; for (const m of msgs) { if (!m || !Array.isArray(m.photos)) continue; for (const p of m.photos) { const url = getPhotoUrl(p, getImageUrl); if (url) urls.push(url); } } return urls; } function getPhotoAskDebugState({ profileDraft, messages, botText }) { const draft = profileDraft && typeof profileDraft === 'object' ? profileDraft : {}; const list = Array.isArray(messages) ? messages : []; const photoCount = (list || []).reduce((sum, m) => { if (!m || !Array.isArray(m.photos)) return sum; return sum + (m.photos || []).length; }, 0); const alreadyAskedInChat = (list || []).some( (m) => m && m.role === 'bot' && typeof m.content === 'string' && (/share a photo of your group/i.test(m.content) || /upload photos of your group/i.test(m.content) || /upload a photo of yourself/i.test(m.content) || /drop 1 to 3 photos/i.test(m.content)) ); const meaningfulUserTurns = (list || []).filter( (m) => m && m.role === 'user' && typeof m.content === 'string' && m.content.trim().length >= 3 && !/^(hi|hey|hello|yo|sup)$/i.test(m.content.trim()) ).length; const hasBasicContext = Boolean(draft.groupName && draft.groupSize != null); const txt = String(botText || '').toLowerCase(); const botLooksLikeWrap = /i['’]?ve got (everything|what i need)/i.test(txt) || /all set/i.test(txt) || /thanks for sharing/i.test(txt) || /pass .* along/i.test(txt) || /perfect match soon/i.test(txt) || /catch you later/i.test(txt); const shouldAskPhoto = photoCount < 1 && !alreadyAskedInChat && (botLooksLikeWrap || (hasBasicContext && meaningfulUserTurns >= 3) || meaningfulUserTurns >= 5); return { photoCount, alreadyAskedInChat, meaningfulUserTurns, hasBasicContext, botLooksLikeWrap, shouldAskPhoto, }; } function sameUser(a, b) { if (!a || !b || a.role !== 'user' || b.role !== 'user') return false; return (a.authorId || a.authorName) === (b.authorId || b.authorName); } // ─── App ───────────────────────────────────────────────────────────────────── function App({ user, ai, data, setData, isMultiplayer, sharedData, setSharedData, patchSharedData, members, share, openProfile, openAuth, pickAndUploadPhoto, getImageUrl, uploadImage, }) { const currentIdentity = getUserIdentity(user); const currentUserId = currentIdentity.id; const currentUserName = currentIdentity.name; // Read stored state from Convex/data const stored = isMultiplayer ? (sharedData || {}) : (data || {}); const initialThreads = normalizeStoredThreads(stored, user); const initialVisibleThreads = (initialThreads || []).filter((t) => canUserSeeThread(t, currentUserId) ); const initialActiveThreadId = typeof stored.activeThreadId === 'string' && (initialVisibleThreads || []).some((t) => t.id === stored.activeThreadId) ? stored.activeThreadId : initialVisibleThreads[0]?.id || initialThreads[0]?.id; const initialActiveThread = findThreadById(initialVisibleThreads, initialActiveThreadId) || initialVisibleThreads[0] || initialThreads[0]; const [threads, setThreads] = useState(() => initialThreads); const [activeThreadId, setActiveThreadId] = useState(() => initialActiveThreadId); const [messages, setMessages] = useState(() => initialActiveThread?.messages || []); const [profileDraft, setProfileDraft] = useState(() => initialActiveThread?.profileDraft && typeof initialActiveThread.profileDraft === 'object' ? initialActiveThread.profileDraft : {} ); const [phase, setPhase] = useState(() => initialActiveThread?.phase || 'interview'); const [screen, setScreen] = useState(() => Array.isArray(initialActiveThread?.messages) && (initialActiveThread.messages || []).length > 1 ? 'chat' : 'splash' ); const [isTyping, setIsTyping] = useState(false); const [composerValue, setComposerValue] = useState(''); const [showFaq, setShowFaq] = useState(false); const [showSettings, setShowSettings] = useState(false); const [uploadingPhoto, setUploadingPhoto] = useState(false); const [uploadError, setUploadError] = useState(''); const [queuedPhotos, setQueuedPhotos] = useState([]); const inFlightRef = useRef(false); const composerRef = useRef(null); const scrollRef = useRef(null); const endRef = useRef(null); const fileInputRef = useRef(null); const autoThreadSeedRef = useRef(''); // Sync incoming shared thread state. useEffect(() => { if (inFlightRef.current) return; const incomingThreads = normalizeStoredThreads(stored, user); const visibleIncoming = (incomingThreads || []).filter((t) => canUserSeeThread(t, currentUserId) ); setThreads((prev) => { const prevSig = JSON.stringify((prev || []).map((t) => [t.id, t.updatedAt, (t.messages || []).length])); const incSig = JSON.stringify( (incomingThreads || []).map((t) => [t.id, t.updatedAt, (t.messages || []).length]) ); if (incSig !== prevSig) return incomingThreads; return prev; }); setActiveThreadId((prev) => { if ((visibleIncoming || []).some((t) => t.id === prev)) return prev; return visibleIncoming[0]?.id || incomingThreads[0]?.id || prev; }); }, [ stored.threads, stored.messages, stored.profileDraft, stored.phase, user?.id, user?.userId, user?.name, user?.displayName, currentUserId, ]); // Keep local working states in sync with selected thread. useEffect(() => { const visible = (threads || []).filter((t) => canUserSeeThread(t, currentUserId)); const active = findThreadById(visible, activeThreadId) || visible[0]; if (!active) return; if (active.id !== activeThreadId) { setActiveThreadId(active.id); } setMessages( Array.isArray(active.messages) ? active.messages : [buildWelcomeLeadMessage(Date.now(), active?.scope)] ); setProfileDraft( active.profileDraft && typeof active.profileDraft === 'object' ? active.profileDraft : {} ); setPhase(String(active.phase || 'interview')); }, [threads, activeThreadId, currentUserId]); // Auto-scroll to bottom useEffect(() => { const el = scrollRef.current; if (!el) return; const id = requestAnimationFrame(() => el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })); return () => cancelAnimationFrame(id); }, [(messages || []).length, isTyping, showFaq]); // Resize textarea function resizeComposer() { const el = composerRef.current; if (!el) return; el.style.height = 'auto'; el.style.height = Math.min(120, Math.max(44, el.scrollHeight)) + 'px'; } // Persist to Convex/data function persist(updates) { try { const patch = updates && typeof updates === 'object' ? updates : {}; let nextThreads = Array.isArray(patch.threads) ? patch.threads : (threads || []); let nextActive = typeof patch.activeThreadId === 'string' ? patch.activeThreadId : activeThreadId; if (!nextActive) nextActive = nextThreads[0]?.id; if (!Array.isArray(patch.threads)) { const idx = (nextThreads || []).findIndex((t) => t && t.id === nextActive); if (idx >= 0) { const cur = nextThreads[idx] || {}; const nextThread = { ...cur, messages: Object.prototype.hasOwnProperty.call(patch, 'messages') ? patch.messages : cur.messages, profileDraft: Object.prototype.hasOwnProperty.call(patch, 'profileDraft') ? patch.profileDraft : cur.profileDraft, phase: Object.prototype.hasOwnProperty.call(patch, 'phase') ? patch.phase : cur.phase, updatedAt: Date.now(), }; nextThreads = [...nextThreads]; nextThreads[idx] = nextThread; } } const visible = (nextThreads || []).filter((t) => canUserSeeThread(t, currentUserId)); const activeThread = findThreadById(visible, nextActive) || findThreadById(nextThreads, nextActive) || visible[0] || nextThreads[0]; nextActive = activeThread?.id || nextActive; setThreads(nextThreads); if (nextActive && nextActive !== activeThreadId) setActiveThreadId(nextActive); const payload = JSON.parse( JSON.stringify({ ...patch, threads: nextThreads, activeThreadId: nextActive, messages: activeThread?.messages || patch.messages || [], profileDraft: activeThread?.profileDraft || patch.profileDraft || {}, phase: activeThread?.phase || patch.phase || 'interview', }) ); if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(payload); } else if (typeof setData === 'function') { setData(payload); } } catch (e) { console.warn('Valence persist failed', e); } } function createFreshThread(targetUser, ordinal, scope = 'personal') { const threadScope = normalizeThreadScope(scope); return buildThreadRecord({ id: makeId('thread'), user: targetUser, messages: [buildWelcomeLeadMessage(Date.now(), threadScope)], profileDraft: {}, phase: 'interview', scope: threadScope, participants: [targetUser?.id || targetUser?.userId || 'guest'], title: threadScope === 'group' ? makeGroupThreadTitle( targetUser?.name || targetUser?.displayName || 'Guest', Number(ordinal || 1) ) : makeThreadTitleFromUser( targetUser?.name || targetUser?.displayName || 'Guest', Number(ordinal || 1) ), createdAt: Date.now(), updatedAt: Date.now(), }); } function handleCreateNewThread() { const owner = { id: user?.id || user?.userId || 'guest', name: user?.name || user?.displayName || 'Guest', displayName: user?.displayName || user?.name || 'Guest', }; const byOwnerCount = (threads || []).filter( (t) => isGroupThread(t) && String(t?.createdById || '') === String(owner.id || '') ).length; const freshThread = createFreshThread(owner, byOwnerCount + 1, 'group'); const nextThreads = [freshThread, ...(threads || [])]; inFlightRef.current = false; setMessages(freshThread.messages); setProfileDraft({}); setPhase('interview'); setScreen('chat'); setComposerValue(''); setUploadError(''); setQueuedPhotos([]); setIsTyping(false); setShowFaq(false); setShowSettings(false); persist({ threads: nextThreads, activeThreadId: freshThread.id, messages: freshThread.messages, profileDraft: {}, phase: 'interview', }); } function handleInvite() { const active = findThreadById(threads, activeThreadId); if (!active || !isGroupThread(active)) return; const idx = (threads || []).findIndex((t) => t && t.id === active.id); if (idx >= 0) { const nextThreads = [...(threads || [])]; const current = nextThreads[idx] || {}; const participantNames = current?.participantNames && typeof current.participantNames === 'object' ? { ...current.participantNames } : {}; participantNames[currentUserId] = currentUserName; nextThreads[idx] = { ...current, inviteEnabled: true, participants: normalizeParticipantIds(current?.participants, currentUserId), participantNames, updatedAt: Date.now(), }; persist({ threads: nextThreads, activeThreadId: active.id }); } if (typeof share === 'function') { share(); } } // Ensure every user always has their own private personal thread. useEffect(() => { const uid = String(currentUserId || '').trim(); if (!uid || uid === 'guest') return; const hasPersonal = (threads || []).some( (t) => !isGroupThread(t) && String(t?.createdById || '') === uid ); if (hasPersonal) return; if (autoThreadSeedRef.current === uid) return; autoThreadSeedRef.current = uid; const owner = { id: uid, name: currentUserName || 'Guest', displayName: currentUserName || 'Guest', }; const freshThread = createFreshThread(owner, 1, 'personal'); const nextThreads = [freshThread, ...(threads || [])]; persist({ threads: nextThreads, activeThreadId: freshThread.id, messages: freshThread.messages, profileDraft: {}, phase: 'interview', }); }, [ currentUserId, currentUserName, (threads || []).length, ]); // Invite-only group chats: once a shared session has additional members, include them. useEffect(() => { if (!isMultiplayer) return; const memberList = Array.isArray(members) ? members : []; const sessionIds = normalizeParticipantIds( (memberList || []).map((m) => getMemberIdentity(m).id), currentUserId ); if ((sessionIds || []).length === 0) return; let changed = false; const now = Date.now(); const nextThreads = (threads || []).map((t) => { if (!isGroupThread(t) || !t?.inviteEnabled) return t; const currentParticipants = normalizeParticipantIds(t?.participants, t?.createdById); const nextParticipants = [...currentParticipants]; const nextNames = t?.participantNames && typeof t.participantNames === 'object' ? { ...t.participantNames } : {}; let localChanged = false; for (const uid of sessionIds) { if (!(nextParticipants || []).includes(uid)) { nextParticipants.push(uid); localChanged = true; } } for (const member of memberList) { const ident = getMemberIdentity(member); if (!ident.id) continue; if (!nextNames[ident.id]) { nextNames[ident.id] = ident.name; if ((nextParticipants || []).includes(ident.id)) localChanged = true; } } if (!localChanged) return t; changed = true; return { ...t, participants: nextParticipants, participantNames: nextNames, updatedAt: now, }; }); if (changed) { persist({ threads: nextThreads }); } }, [isMultiplayer, members, currentUserId, threads]); // Reset all conversation data function handleReset() { const active = findThreadById(threads, activeThreadId); const fresh = [buildWelcomeLeadMessage(Date.now(), active?.scope)]; inFlightRef.current = false; setMessages(fresh); setProfileDraft({}); setPhase('interview'); setScreen('chat'); setComposerValue(''); setUploadError(''); setQueuedPhotos([]); setIsTyping(false); setShowFaq(false); setShowSettings(false); persist({ messages: fresh, profileDraft: {}, phase: 'interview' }); } // Called when user picks a file via the hidden async function handleFileChosen(file: File) { if (!file || uploadingPhoto || phase === 'submitted') return; const threadNow = findThreadById(threads, activeThreadId); const threadScope = normalizeThreadScope(threadNow?.scope); const systemPrompt = getSystemPromptForScope(threadScope); const validationError = getPhotoUploadValidationError(file); if (validationError) { setUploadError(validationError); return; } setUploadingPhoto(true); setUploadError(''); const localPreviewUrl = URL.createObjectURL(file); const pendingId = makeId('u'); try { // Show optimistic local preview while upload completes. const pendingPhotoMsg = { id: pendingId, role: 'user', content: '', photos: [{ publicUrl: localPreviewUrl, assetId: '', visibility: 'instance_public', _localOnly: true }], timestamp: Date.now(), authorId: user?.id || user?.userId || 'guest', authorName: user?.name || user?.displayName || 'You', authorHandle: user?.handle || undefined, avatarUrl: typeof user?.avatarUrl === 'string' ? user.avatarUrl : undefined, }; const withPending = [...messages, pendingPhotoMsg]; setMessages(withPending); const canUpload = typeof uploadImage === 'function' || typeof pickAndUploadPhoto === 'function'; if (!canUpload) { throw new Error('Image upload service is not available.'); } let uploadResult = null; if (typeof uploadImage === 'function') { try { uploadResult = await uploadImage(file, { visibility: 'instance_public' }); } catch (_) { uploadResult = await uploadImage(file); } } else if (typeof pickAndUploadPhoto === 'function') { try { uploadResult = await pickAndUploadPhoto({ file, visibility: 'instance_public' }); } catch (_) { try { uploadResult = await pickAndUploadPhoto(file); } catch (_) { uploadResult = await pickAndUploadPhoto(); } } } const uploadedPhoto = normalizeUploadedPhoto(uploadResult, getImageUrl); const uploadedUrl = getPhotoUrl(uploadedPhoto, getImageUrl); if (!uploadedPhoto || !uploadedUrl) { throw new Error('Upload completed but no displayable image URL was returned.'); } const committed = (withPending || []).map((m) => m.id === pendingId ? { ...m, photos: [{ ...uploadedPhoto, publicUrl: uploadedUrl }] } : m ); setMessages(committed); persist({ messages: committed, profileDraft, phase }); const totalPhotos = (committed || []).filter((m) => m.photos && (m.photos || []).length > 0).length; const newDraft = { ...profileDraft, photosUploaded: totalPhotos }; setProfileDraft(newDraft); let botText = totalPhotos >= 3 ? "Love those shots! Feel free to keep chatting — what else should I know about your group?" : totalPhotos === 2 ? "Love it! You can add one more if you want, or just keep going." : "Love it! Got room for 1-2 more if you want, or we can keep going."; if (typeof ai === 'function') { try { const aiContent: any[] = [{ type: 'text', text: 'Here is a photo of our group!' }]; if (uploadedUrl) aiContent.push({ type: 'image', url: uploadedUrl }); const aiResult = await ai({ intent: 'chat_stream', systemPrompt, messages: [ { role: 'user', content: aiContent, }, ], stream: false, }); if (aiResult && aiResult.status === 'completed') { const t = String(aiResult.text || '').trim(); if (t) botText = t; } } catch (_) {} } botText = adaptBotTextForScope(botText, threadScope); const botMsg = { id: makeId('b'), role: 'bot', content: botText, timestamp: Date.now() }; const withBot = [...committed, botMsg]; setMessages(withBot); persist({ messages: withBot, profileDraft: newDraft, phase }); } catch (e) { console.warn('Valence: photo failed', e); setMessages((prev) => { const next = (prev || []).filter((m) => m.id !== pendingId); persist({ messages: next, profileDraft, phase }); return next; }); const failureText = getPhotoUploadFailureMessage(e); setUploadError(failureText); } finally { URL.revokeObjectURL(localPreviewUrl); setUploadingPhoto(false); } } async function uploadOnePhotoFile(file: File) { const canUpload = typeof uploadImage === 'function' || typeof pickAndUploadPhoto === 'function'; if (!canUpload) throw new Error('Image upload service is not available.'); let uploadResult = null; if (typeof uploadImage === 'function') { try { uploadResult = await uploadImage(file, { visibility: 'instance_public' }); } catch (_) { uploadResult = await uploadImage(file); } } else if (typeof pickAndUploadPhoto === 'function') { try { uploadResult = await pickAndUploadPhoto({ file, visibility: 'instance_public' }); } catch (_) { try { uploadResult = await pickAndUploadPhoto(file); } catch (_) { uploadResult = await pickAndUploadPhoto(); } } } const uploadedPhoto = normalizeUploadedPhoto(uploadResult, getImageUrl); const uploadedUrl = getPhotoUrl(uploadedPhoto, getImageUrl); if (!uploadedPhoto || !uploadedUrl) throw new Error('Upload completed but no displayable image URL was returned.'); return { ...uploadedPhoto, publicUrl: uploadedUrl }; } async function handleSendQueuedPhotos(rawText, queuedItems) { const text = String(rawText || '').trim(); if ((!text && (queuedItems || []).length === 0) || inFlightRef.current || phase === 'submitted') return; const threadNow = findThreadById(threads, activeThreadId); const threadScope = normalizeThreadScope(threadNow?.scope); const systemPrompt = getSystemPromptForScope(threadScope); inFlightRef.current = true; setIsTyping(true); setUploadError(''); const userMsgId = makeId('u'); const previewPhotos = (queuedItems || []).map((q) => ({ publicUrl: q.previewUrl, assetId: '', visibility: 'instance_public', _localOnly: true, })); const userMsg = { id: userMsgId, role: 'user', content: text, photos: previewPhotos, timestamp: Date.now(), authorId: user?.id || user?.userId || 'guest', authorName: user?.name || user?.displayName || 'You', authorHandle: user?.handle || undefined, avatarUrl: typeof user?.avatarUrl === 'string' ? user.avatarUrl : undefined, }; const withUser = [...messages, userMsg]; setMessages(withUser); setComposerValue(''); persist({ messages: withUser, profileDraft, phase }); setUploadingPhoto(true); try { const uploadedPhotos = []; for (const item of queuedItems) { try { const photo = await uploadOnePhotoFile(item.file); uploadedPhotos.push(photo); } catch (e) { console.warn('Valence: queued photo upload failed', e); } } if ((uploadedPhotos || []).length === 0) { const failureText = 'Could not upload those photos. Please try again.'; setUploadError(failureText); const botMsg = { id: makeId('b'), role: 'bot', content: failureText, timestamp: Date.now() }; const failed = [...withUser, botMsg]; setMessages(failed); persist({ messages: failed, profileDraft, phase }); return; } let newDraft = { ...profileDraft }; const committed = (withUser || []).map((m) => m.id === userMsgId ? { ...m, photos: uploadedPhotos } : m ); const totalPhotos = (committed || []).reduce((sum, m) => sum + (Array.isArray(m.photos) ? (m.photos || []).length : 0), 0); newDraft = { ...newDraft, photosUploaded: totalPhotos }; setProfileDraft(newDraft); setMessages(committed); persist({ messages: committed, profileDraft: newDraft, phase }); let botText = ''; if (!text) { // When users send photos without text, keep continuity and avoid re-starting interview prompts. botText = (uploadedPhotos || []).length > 1 ? 'Great uploads — got them. If you want, I can combine these into one generated group image too.' : 'Great photo — got it.'; } else { botText = (uploadedPhotos || []).length > 1 ? 'Great uploads. If you want, I can combine these into one generated group image too.' : 'Great photo — got it.'; } if (text && typeof ai === 'function') { try { const knownFields: string[] = []; if (newDraft.groupName) { knownFields.push( `${threadScope === 'group' ? 'Group name' : 'Preferred name'}: ${newDraft.groupName}` ); } if (threadScope === 'group' && newDraft.groupSize != null) { knownFields.push(`Size: ${newDraft.groupSize}`); } if (newDraft.idealDay) knownFields.push(`Activities: ${newDraft.idealDay}`); if (newDraft.lookingFor) knownFields.push(`Looking for: ${newDraft.lookingFor}`); const profileSummary = (knownFields || []).length > 0 ? `\n\nAlready collected — DO NOT re-ask these:\n${knownFields.join('\n')}` : ''; const rawHistory = (committed || []).slice(-20).map((m) => ({ role: m.role === 'bot' ? 'assistant' : 'user', content: String(m.content || ''), })); while ((rawHistory || []).length > 0 && rawHistory[0].role === 'assistant') rawHistory.shift(); const history: { role: string; content: any }[] = []; for (const msg of rawHistory) { if ((history || []).length > 0 && history[(history || []).length - 1].role === msg.role) { const prev = history[(history || []).length - 1]; prev.content = String(prev.content || '') + '\n' + String(msg.content || ''); } else { history.push({ ...msg }); } } if ((history || []).length > 0) { const last = history[(history || []).length - 1]; if (last.role === 'user') { const blocks: any[] = [{ type: 'text', text }]; for (const p of uploadedPhotos) { const u = getPhotoUrl(p, getImageUrl); if (u) blocks.push({ type: 'image', url: u }); } last.content = blocks; } } const aiResult = await ai({ intent: 'chat_stream', systemPrompt: systemPrompt + profileSummary, messages: history, stream: false, }); if (aiResult && aiResult.status === 'completed') { const t = String(aiResult.text || '').trim(); if (t) botText = t; } } catch (_) {} } botText = adaptBotTextForScope(botText, threadScope); const botMsg = { id: makeId('b'), role: 'bot', content: botText, timestamp: Date.now() }; const withBot = [...committed, botMsg]; setMessages(withBot); persist({ messages: withBot, profileDraft: newDraft, phase }); } finally { for (const q of queuedItems) { try { URL.revokeObjectURL(q.previewUrl); } catch (_) {} } setUploadingPhoto(false); inFlightRef.current = false; setIsTyping(false); } } // Main send handler async function handleSend(rawText) { const text = String(rawText || '').trim(); if ((!text && (queuedPhotos || []).length === 0) || inFlightRef.current || phase === 'submitted') return; const threadNow = findThreadById(threads, activeThreadId); const threadScope = normalizeThreadScope(threadNow?.scope); const systemPrompt = getSystemPromptForScope(threadScope); if ((queuedPhotos || []).length > 0) { const items = (queuedPhotos || []).slice(); setQueuedPhotos([]); await handleSendQueuedPhotos(text, items); return; } inFlightRef.current = true; setIsTyping(true); try { // Append user message const userMsg = { id: makeId('u'), role: 'user', content: text, timestamp: Date.now(), authorId: user?.id || user?.userId || 'guest', authorName: user?.name || user?.displayName || 'You', authorHandle: user?.handle || undefined, avatarUrl: typeof user?.avatarUrl === 'string' ? user.avatarUrl : undefined, }; const withUser = [...messages, userMsg]; setMessages(withUser); setComposerValue(''); if (composerRef.current) { composerRef.current.value = ''; requestAnimationFrame(() => resizeComposer()); } // Persist user message immediately persist({ messages: withUser, profileDraft, phase }); let botText = ''; let newDraft = { ...profileDraft }; let done = false; // Intro gate: after first group reply, send the remaining two intro messages. const shouldRunIntroFollowup = (withUser || []).length === 2 && withUser[0]?.id === 'welcome-1' && withUser[0]?.role === 'bot' && withUser[1]?.role === 'user' && !profileDraft.groupName; if (shouldRunIntroFollowup) { const introDraft = { ...profileDraft, welcomeFollowupSent: true }; setProfileDraft(introDraft); await sleep(900); const firstFollowup = buildWelcomeFollowupMessages(Date.now(), threadScope)[0]; const withIntro1 = [...withUser, firstFollowup]; setMessages(withIntro1); persist({ messages: withIntro1, profileDraft: introDraft, phase }); await sleep(1200); const secondFollowup = buildWelcomeFollowupMessages(Date.now(), threadScope)[1]; const withIntro2 = [...withIntro1, secondFollowup]; setMessages(withIntro2); persist({ messages: withIntro2, profileDraft: introDraft, phase }); return; } // 1. Run heuristics on raw user text to extract profile fields try { const fb = fallbackValenceTurn({ lastUserText: text, profileDraft }); if (fb.profilePatch && typeof fb.profilePatch === 'object') { newDraft = { ...newDraft, ...fb.profilePatch }; } done = Boolean(fb.interviewComplete); // Use scripted message as fallback botText = String(fb.botMessage || ''); } catch (e) { console.warn('Valence: heuristic failed', e); } botText = adaptBotTextForScope(botText, threadScope); // 2. Try AI for a smarter reply (overrides scripted message) if (typeof ai === 'function') { try { // Build current profile summary so Val never re-asks filled fields const knownFields: string[] = []; if (newDraft.groupName) { knownFields.push( `${threadScope === 'group' ? 'Group name' : 'Preferred name'}: ${newDraft.groupName}` ); } if (threadScope === 'group' && newDraft.groupSize != null) { knownFields.push(`Size: ${newDraft.groupSize}`); } if (newDraft.idealDay) knownFields.push(`Activities: ${newDraft.idealDay}`); if (newDraft.lookingFor) knownFields.push(`Looking for: ${newDraft.lookingFor}`); if (newDraft.photosUploaded != null) knownFields.push(`Photos uploaded: ${newDraft.photosUploaded}`); const profileSummary = (knownFields || []).length > 0 ? `\n\nAlready collected — DO NOT re-ask these:\n${knownFields.join('\n')}` : ''; // Build alternating history — API requires messages start with 'user' const rawHistory = (withUser || []).slice(-20).map((m) => ({ role: m.role === 'bot' ? 'assistant' : 'user', content: String(m.content || ''), })); // Drop leading assistant turns so history always starts with user while ((rawHistory || []).length > 0 && rawHistory[0].role === 'assistant') { rawHistory.shift(); } // Collapse consecutive same-role messages to avoid API errors const history: { role: string; content: string }[] = []; for (const msg of rawHistory) { if ((history || []).length > 0 && history[(history || []).length - 1].role === msg.role) { history[(history || []).length - 1].content += '\n' + msg.content; } else { history.push({ ...msg }); } } if ((history || []).length > 0) { const result = await ai({ intent: 'chat_stream', systemPrompt: systemPrompt + profileSummary, messages: history, stream: false, }); if (result && result.status === 'completed') { const aiText = String(result.text || '').trim(); if (aiText) botText = aiText; } else if (result && result.status === 'failed') { console.warn('Valence ai() failed:', JSON.stringify(result.error)); } else if (result && result.status === 'blocked') { console.warn('Valence ai() blocked:', result.moderation); } } } catch (aiErr) { console.warn('Valence ai() threw:', aiErr && aiErr.message); } } // Last resort if (!botText) { botText = "What should I call your group?"; } const existingPhotoUrls = getUploadedPhotoUrls(withUser, getImageUrl); const noPhotoYet = (existingPhotoUrls || []).length < 1; const userAskedPhoto = /\b(photo|picture|pic|image)\b/i.test(text); if (userAskedPhoto && noPhotoYet) { botText = threadScope === 'group' ? "Yes please — upload photos of your group (or upload each person individually) using the 📷 button below." : 'Yes please — upload a photo of yourself using the 📷 button below.'; } if (noPhotoYet && /\bno\b[^.!?]*\b(photo|picture|pic|image)\b/i.test(botText)) { botText = threadScope === 'group' ? "Yes — please upload photos of your group (or upload each person individually) using the 📷 button below." : 'Yes — please upload a photo of yourself using the 📷 button below.'; } const userAskedAggregate = /\b(aggregate|merge|combine|stitch|put\s+.*together)\b/i.test(text) && /\b(photo|picture|pic|image)\b/i.test(text); if (userAskedAggregate) { if ((existingPhotoUrls || []).length < 2) { botText = 'Upload at least 2 photos first (you can upload each person individually), then ask me to combine them.'; } else if (typeof ai === 'function') { try { const content = [ { type: 'text', text: 'Create one cohesive group image that combines these uploaded photos. Preserve people identity as much as possible, natural look, clean composition.', }, ...(existingPhotoUrls || []).map((url) => ({ type: 'image', url })), ]; const gen = await ai({ intent: 'image_generation', messages: [{ role: 'user', content }], }); const out = gen?.images?.[0]; const dataUrl = out?.dataUrl; if (gen?.status === 'completed' && dataUrl) { const aiPhotoMsg = { id: makeId('b'), role: 'bot', content: threadScope === 'group' ? 'Done — I generated a single combined image from your uploads.' : 'Done — I generated a single combined image from your uploads.', photos: [{ publicUrl: dataUrl, assetId: '', visibility: 'instance_public' }], timestamp: Date.now(), }; const withAiPhoto = [...withUser, aiPhotoMsg]; setMessages(withAiPhoto); persist({ messages: withAiPhoto, profileDraft: newDraft, phase }); return; } botText = "I couldn't generate a combined image this time. Please try again after uploading clear photos."; } catch (e) { console.warn('Valence image_generation failed', e); botText = "I couldn't combine those photos right now. Please try again in a moment."; } } else { botText = "Photo combining isn't available in this environment yet. Please upload a manually combined image for now."; } } // Keep Val from repeating herself when model context drifts. const recentBotTexts = withUser .filter((m) => m.role === 'bot' && typeof m.content === 'string') .slice(-6) .map((m) => m.content); if (isBotRepeat(botText, recentBotTexts)) { const fbNoRepeat = fallbackValenceTurn({ lastUserText: text, profileDraft: newDraft }); const safer = String(fbNoRepeat?.botMessage || '').trim(); if (safer) botText = safer; } // Deterministic photo ask: single prompt only (no double-stacked question). const photoAskState = getPhotoAskDebugState({ profileDraft: newDraft, messages: withUser, botText }); if (photoAskState.shouldAskPhoto && !/\b(photo|picture|pic|image)\b/i.test(botText)) { botText = threadScope === 'group' ? "Before we wrap, please upload photos of your group (or upload each person individually), and I can combine them into one image if you want." : 'Before we wrap, please upload a photo of yourself (or a couple if you want), and I can combine them into one image if you want.'; newDraft = { ...newDraft, photosInterviewAsked: true, photosWrapAsked: true }; done = false; } botText = adaptBotTextForScope(botText, threadScope); // Append bot message const botMsg = { id: makeId('b'), role: 'bot', content: botText, timestamp: Date.now(), }; let withBot = [...withUser, botMsg]; if (DEBUG_TURN_LOGS) { const debugMsg = { id: makeId('b'), role: 'bot', content: `[debug] turns=${photoAskState.meaningfulUserTurns} ` + `basic=${photoAskState.hasBasicContext} ` + `photoCount=${photoAskState.photoCount} ` + `askedInChat=${photoAskState.alreadyAskedInChat} ` + `wrapText=${photoAskState.botLooksLikeWrap} ` + `shouldAskPhoto=${photoAskState.shouldAskPhoto} ` + `groupName=${newDraft.groupName || '-'} ` + `groupSize=${newDraft.groupSize != null ? newDraft.groupSize : '-'}`, timestamp: Date.now() + 3, }; withBot = [...withBot, debugMsg]; } setMessages(withBot); setProfileDraft(newDraft); // Persist final state if (done) { setPhase('submitted'); persist({ messages: withBot, profileDraft: newDraft, phase: 'submitted' }); } else { persist({ messages: withBot, profileDraft: newDraft, phase }); } } catch (sendErr) { console.warn('Valence handleSend failed', sendErr); const failMsg = { id: makeId('b'), role: 'bot', content: "Sorry, I hit a hiccup. Could you send that one more time?", timestamp: Date.now(), }; setMessages((prev) => { const next = [...prev, failMsg]; persist({ messages: next, profileDraft, phase }); return next; }); } finally { inFlightRef.current = false; setIsTyping(false); } } // ─── Render ───────────────────────────────────────────────────────────────── const visibleThreads = (threads || []).filter((t) => canUserSeeThread(t, currentUserId)); const orderedThreads = [...visibleThreads].sort( (a, b) => getThreadLastTimestamp(b) - getThreadLastTimestamp(a) ); const activeThread = findThreadById(visibleThreads, activeThreadId) || orderedThreads[0] || null; const activeIsGroup = isGroupThread(activeThread); return (

{/* Font loader */} {/* ── SPLASH ─────────────────────────────────────────────── */} {screen === 'splash' && (

setScreen('chatList')} style={{ height: '100dvh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#FFFFFF', cursor: 'pointer', gap: 16, }} >

Valence

Tap to enter

)} {/* ── CHAT LIST ──────────────────────────────────────────── */} {screen === 'chatList' && (

{/* Header */}

Valence

{(orderedThreads || []).map((thread) => { const last = (thread?.messages || [])[((thread?.messages || []).length || 1) - 1] || {}; const isActive = thread?.id === activeThreadId; const participantCount = normalizeParticipantIds( thread?.participants, thread?.createdById ).length; return (

{ setActiveThreadId(thread.id); setComposerValue(''); setUploadError(''); setQueuedPhotos([]); setShowFaq(false); setScreen('chat'); }} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 20px', cursor: 'pointer', borderBottom: `1px solid ${COLORS.line}`, background: isActive ? '#FAF6F2' : '#FFFFFF', }} >

{thread?.title || 'Val'} {formatTime(last?.timestamp || thread?.updatedAt)}

{isGroupThread(thread) ? `Group chat · ${participantCount} participant${participantCount === 1 ? '' : 's'}` : 'Private chat with Val'}

{(String(last?.content || '') || 'Your matchmaker is ready').slice(0, 80)}

); })}

)} {/* ── CHAT VIEW ──────────────────────────────────────────── */} {screen === 'chat' && (

{/* Header */}

{activeThread?.title || 'Val'}

{activeIsGroup ? 'group chat with Val' : 'private chat with Val'}

{activeIsGroup ? ( ) : null}

{/* Messages */}

{(() => { let lastSep = ''; return (messages || []).map((msg, idx) => { const prev = idx > 0 ? messages[idx - 1] : null; const isBot = msg.role === 'bot'; const dayKey = new Date(msg.timestamp || Date.now()).toDateString(); let sep = null; if (dayKey !== lastSep) { lastSep = dayKey; sep = (

{formatDateSep(msg.timestamp)}

); } const grouped = !isBot && sameUser(prev, msg); const avatarUrl = msg.avatarUrl; const initials = (msg.authorName || '?')[0]?.toUpperCase() || '?'; return (

{sep} {isBot ? ( /* Bot: left-aligned, no bubble */

{msg.content}

Val · {formatTime(msg.timestamp)}

) : ( /* User: right-aligned, warm beige bubble */

{!grouped && (

{ if (msg.authorHandle && openProfile) openProfile(msg.authorHandle); }} style={{ fontSize: 11, fontWeight: 600, color: COLORS.muted, marginBottom: 3, cursor: msg.authorHandle && openProfile ? 'pointer' : 'default', }} > {msg.authorName}

)}

0 && !msg.content ? '4px' : '10px 14px', borderRadius: grouped ? '18px' : '18px 18px 6px 18px', backgroundColor: COLORS.bubbleMe, lineHeight: 1.5, fontSize: 16, fontWeight: 500, color: COLORS.text, whiteSpace: 'pre-wrap', wordBreak: 'break-word', overflow: 'hidden', }}> {msg.photos && (msg.photos || []).length > 0 && (

{(msg.photos || []).map((photo, pi) => { const url = getPhotoUrl(photo, getImageUrl); if (!url) { return (

Image unavailable

); } return (

); })}

)} {msg.content ? msg.content : null}

{formatTime(msg.timestamp)}

{!avatarUrl && initials}

)}

); }); })()} {/* Typing indicator */} {isTyping && (

{[0, 0.2, 0.4].map((delay, i) => ( ))}

)} {/* Profile note */} {profileDraft.groupName && phase === 'interview' && (

Noting: {profileDraft.groupName} {profileDraft.groupSize != null ? ` · ${profileDraft.groupSize} people` : ''}

)}

{/* Composer */}

{/* About pill */} {/* Photo upload button */} {phase !== 'submitted' && ( <> { const files = Array.from(e.target.files || []); if ((files || []).length > 0) { const next: any[] = []; let firstErr = ''; for (const f of files) { const err = getPhotoUploadValidationError(f); if (err) { if (!firstErr) firstErr = err; continue; } next.push({ id: makeId('q'), file: f, previewUrl: URL.createObjectURL(f) }); } if (firstErr) setUploadError(firstErr); if ((next || []).length > 0) { setUploadError(''); setQueuedPhotos((prev) => [...prev, ...next]); } } e.target.value = ''; }} /> )} {/* Input + send */}

{ setComposerValue(e.target.value); resizeComposer(); }}
                  onPaste={(e) => e.stopPropagation()}
                  onKeyDown={(e) => {
                    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
                    if ((e.key === 'Enter' || e.keyCode === 13) && !e.shiftKey) {
                      e.preventDefault();
                      void handleSend(composerValue);
                    }
                  }}
                  placeholder="Send a message"
                  rows={1}
                  enterKeyHint="send"
                  style={{
                    flex: 1, background: 'transparent', border: 'none', color: COLORS.text,
                    padding: '8px 4px 8px 0', fontSize: 16, lineHeight: 1.45,
                    minHeight: 40, maxHeight: 120, resize: 'none', outline: 'none',
                    WebkitUserSelect: 'text', userSelect: 'text',
                  }}
                />
                <button
                  type="button"
                  onClick={() => void handleSend(composerValue)}
                  disabled={(!composerValue.trim() && (queuedPhotos || []).length === 0) || isTyping || phase === 'submitted'}
                  aria-label="Send"
                  style={{
                    width: 38, height: 38, borderRadius: '50%',
                    backgroundColor: ((composerValue.trim() || (queuedPhotos || []).length > 0) && !isTyping) ? COLORS.sendBg : COLORS.sendDisabled,
                    color: '#fff', border: 'none',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 18, cursor: ((composerValue.trim() || (queuedPhotos || []).length > 0) && !isTyping) ? 'pointer' : 'default', flexShrink: 0,
                  }}
                >
                  →
                </button>
              </div>
            </div>
            {(queuedPhotos || []).length > 0 ? (
              <div style={{ padding: '0 12px 8px', display: 'flex', gap: 8, overflowX: 'auto' }}>
                {(queuedPhotos || []).map((q) => (
                  <div key={q.id} style={{ position: 'relative', width: 54, height: 54, flexShrink: 0 }}>
                    <img src={q.previewUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10, border: `1px solid ${COLORS.line}` }} />
                    <button
                      type="button"
                      onClick={() => {
                        setQueuedPhotos((prev) => {
                          const found = (prev || []).find((p) => p.id === q.id);
                          if (found?.previewUrl) {
                            try { URL.revokeObjectURL(found.previewUrl); } catch (_) {}
                          }
                          return (prev || []).filter((p) => p.id !== q.id);
                        });
                      }}
                      style={{
                        position: 'absolute', top: -6, right: -6, width: 18, height: 18, borderRadius: '50%',
                        border: 'none', background: '#1F1F1E', color: '#fff', fontSize: 11, cursor: 'pointer',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                      }}
                      aria-label="Remove photo"
                    >
                      ×
                    </button>
                  </div>
                ))}
              </div>
            ) : null}
            {uploadError ? (
              <div style={{ padding: '0 14px 8px', color: '#B3261E', fontSize: 12, fontWeight: 500 }}>
                {uploadError}
              </div>
            ) : null}
          </div>
        </div>
      )}

{/* ── FAQ MODAL ──────────────────────────────────────────── */}
      {showFaq && (
        <div
          role="dialog"
          aria-modal="true"
          style={{
            position: 'fixed', inset: 0, background: 'rgba(31,31,30,0.18)',
            zIndex: 50, display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
            padding: 12,
          }}
          onClick={() => setShowFaq(false)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              background: COLORS.surface, borderRadius: 12, border: `1px solid ${COLORS.line}`,
              maxWidth: 520, width: '100%', maxHeight: '78vh', overflowY: 'auto',
              padding: '20px 22px 24px', boxShadow: '0 8px 40px rgba(0,0,0,0.08)',
            }}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20, gap: 12 }}>
              <h2 style={{ margin: 0, ...dancing, fontSize: 28, fontWeight: 700, color: COLORS.text, lineHeight: 1.2 }}>
                Common questions
              </h2>
              <button
                type="button"
                onClick={() => setShowFaq(false)}
                style={{
                  border: `1px solid ${COLORS.line}`, background: COLORS.bg, borderRadius: 8,
                  width: 36, height: 36, cursor: 'pointer', fontSize: 20, lineHeight: 1,
                  color: COLORS.muted, flexShrink: 0,
                }}
              >
                x
              </button>
            </div>
            {(FAQ_ITEMS || []).map((item, i) => (
              <div
                key={i}
                style={{
                  marginBottom: 20, paddingBottom: 18,
                  borderBottom: i < (FAQ_ITEMS || []).length - 1 ? `1px solid ${COLORS.line}` : 'none',
                }}
              >
                <div style={{ fontSize: 15, fontWeight: 700, color: COLORS.text, marginBottom: 6 }}>
                  {item.q}
                </div>
                <div style={{ fontSize: 14, color: COLORS.muted, lineHeight: 1.6 }}>
                  {item.a}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

{/* ── SETTINGS MODAL ─────────────────────────────────────── */}
      {showSettings && (
        <div
          role="dialog"
          aria-modal="true"
          style={{
            position: 'fixed', inset: 0, background: 'rgba(31,31,30,0.18)',
            zIndex: 60, display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
            padding: 12,
          }}
          onClick={() => setShowSettings(false)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              background: COLORS.surface, borderRadius: 12, border: `1px solid ${COLORS.line}`,
              maxWidth: 520, width: '100%', padding: '20px 22px 20px',
              boxShadow: '0 8px 40px rgba(0,0,0,0.08)',
            }}
          >
            <div style={{ fontSize: 22, fontWeight: 700, color: COLORS.text, marginBottom: 8, ...dancing }}>
              Settings
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.5, color: COLORS.muted, marginBottom: 16 }}>
              Want to redo the interview? This will clear the current chat with Val and reset this profile so you can start over.
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
              <button
                type="button"
                onClick={() => setShowSettings(false)}
                style={{
                  border: `1px solid ${COLORS.line}`, background: '#FFFFFF', color: COLORS.text,
                  borderRadius: 10, padding: '9px 14px', fontSize: 13, fontWeight: 600, cursor: 'pointer',
                }}
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={handleReset}
                style={{
                  border: 'none', background: '#B3261E', color: '#FFFFFF',
                  borderRadius: 10, padding: '9px 14px', fontSize: 13, fontWeight: 700, cursor: 'pointer',
                }}
              >
                Reset Conversation
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>