// SocialListening.jsx — Admin Portal "Social Listening" page. // // Surfaces social_mentions rows found + AI-scored by the `social-search` // Edge Function (Reddit live; Facebook deferred to a future provider). // The function runs every 4h via pg_cron and on demand from the // "Search now" button here. Each mention carries an AI relevance score // (0-100), a reason, and a suggested engagement angle so the owner can // jump into the right local conversations for SEO / GEO. // // Realtime: useSupaList keeps the list live, so new hits stream in during // a search and ai_* fields fill in as analysis completes. Review actions // (Save / Engaged / Dismiss) write back through the same hook. // // All top-level identifiers carry an "sl"/"Sl" suffix: in the Babel-in- // browser portal every top-level const leaks to the global scope, so // names must be unique across all component files (HANDBOOK §9). const { useState: useStateSl, useEffect: useEffectSl, useMemo: useMemoSl } = React; // ---- row <-> object mappers for useSupaList ----------------------------- const slMentionFromRow = (r) => ({ id: r.id, source: r.source, externalId: r.external_id, keywordId: r.keyword_id, matchedTerm: r.matched_term, url: r.url, title: r.title, body: r.body, author: r.author, subreddit: r.subreddit, score: r.score, numComments: r.num_comments, postedAt: r.posted_at, fetchedAt: r.fetched_at, aiStatus: r.ai_status, aiRelevant: r.ai_relevant, aiScore: r.ai_score, aiReason: r.ai_reason, aiAngle: r.ai_angle, aiTopics: r.ai_topics, reviewStatus: r.review_status, reviewedAt: r.reviewed_at, }); // Only the columns the portal is allowed to change on a review action. // Everything else is owned by the Edge Function; omitting it means an // UPDATE never clobbers AI state. const slMentionToRow = (o) => ({ id: o.id, review_status: o.reviewStatus, reviewed_at: o.reviewedAt, }); const slKeywordFromRow = (r) => ({ id: r.id, term: r.term, sources: r.sources || ['reddit'], active: r.active, lastSearchedAt: r.last_searched_at, createdAt: r.created_at, }); const slKeywordToRow = (o) => ({ id: o.id, term: o.term, sources: o.sources, active: o.active, }); // ---- small helpers ------------------------------------------------------ const SL_SOURCE_META = { reddit: { label: 'Reddit', bg: '#FFF0E8', fg: '#D93A00' }, facebook: { label: 'Facebook', bg: '#E7F0FF', fg: '#1877F2' }, }; const slFmtRel = (iso) => { if (!iso) return ''; const then = new Date(iso).getTime(); if (isNaN(then)) return ''; const s = Math.max(0, Math.floor((Date.now() - then) / 1000)); if (s < 60) return 'just now'; const m = Math.floor(s / 60); if (m < 60) return `${m}m ago`; const h = Math.floor(m / 60); if (h < 24) return `${h}h ago`; const d = Math.floor(h / 24); if (d < 30) return `${d}d ago`; const mo = Math.floor(d / 30); return `${mo}mo ago`; }; // Relevance-score → swatch. Tuned to the ink-first palette. const slScoreSwatch = (score) => { if (score >= 80) return { bg: '#DCFCE7', fg: '#15803D' }; if (score >= 60) return { bg: '#CCFBF1', fg: '#0F766E' }; if (score >= 40) return { bg: '#FEF3C7', fg: '#B45309' }; return { bg: '#F3F4F6', fg: '#6B7280' }; }; // ---- main page ---------------------------------------------------------- const SocialListening = () => { const [mentions, setMentions] = window.useSupaList('social_mentions', { fromRow: slMentionFromRow, toRow: slMentionToRow, initial: [], }); const [keywords, setKeywords] = window.useSupaList('social_keywords', { fromRow: slKeywordFromRow, toRow: slKeywordToRow, initial: [], }); const [tab, setTab] = useStateSl('relevant'); // relevant | all | saved | engaged | dismissed const [sourceFilter, setSourceFilter] = useStateSl('all'); // all | reddit | facebook const [searching, setSearching] = useStateSl(false); const [settingsOpen, setSettingsOpen] = useStateSl(false); const [toast, setToast] = useStateSl(''); // Relevance context (business blurb + areas + threshold). Lives on the // restaurants row; drives the default "Relevant" filter and the AI prompt. const [cfg, setCfg] = useStateSl({ business_blurb: '', areas: [], min_score: 60 }); useEffectSl(() => { if (!window.supa) return; let cancelled = false; window.supa.from('restaurants') .select('social_listening_config') .eq('id', window.RESTAURANT_ID) .maybeSingle() .then(({ data }) => { if (cancelled || !data?.social_listening_config) return; const c = data.social_listening_config; setCfg({ business_blurb: c.business_blurb || '', areas: Array.isArray(c.areas) ? c.areas : [], min_score: typeof c.min_score === 'number' ? c.min_score : 60, }); }); return () => { cancelled = true; }; }, []); const minScore = cfg.min_score || 0; const lastSearched = useMemoSl(() => { const stamps = keywords.map(k => k.lastSearchedAt).filter(Boolean).map(s => new Date(s).getTime()); if (!stamps.length) return null; return new Date(Math.max(...stamps)).toISOString(); }, [keywords]); // Counts per tab (for the segment labels). const counts = useMemoSl(() => { const c = { relevant: 0, all: mentions.length, saved: 0, engaged: 0, dismissed: 0 }; mentions.forEach(m => { if (m.reviewStatus === 'saved') c.saved++; else if (m.reviewStatus === 'engaged') c.engaged++; else if (m.reviewStatus === 'dismissed') c.dismissed++; if (m.reviewStatus === 'new' && m.aiRelevant && (m.aiScore || 0) >= minScore) c.relevant++; }); return c; }, [mentions, minScore]); const visible = useMemoSl(() => { let list = mentions.slice(); if (sourceFilter !== 'all') list = list.filter(m => m.source === sourceFilter); if (tab === 'relevant') { list = list.filter(m => m.reviewStatus === 'new' && m.aiRelevant && (m.aiScore || 0) >= minScore); } else if (tab === 'saved') { list = list.filter(m => m.reviewStatus === 'saved'); } else if (tab === 'engaged') { list = list.filter(m => m.reviewStatus === 'engaged'); } else if (tab === 'dismissed') { list = list.filter(m => m.reviewStatus === 'dismissed'); } // 'all' shows everything (including pending + dismissed). list.sort((a, b) => { const sa = a.aiScore == null ? -1 : a.aiScore; const sb = b.aiScore == null ? -1 : b.aiScore; if (sb !== sa) return sb - sa; return new Date(b.postedAt || b.fetchedAt || 0) - new Date(a.postedAt || a.fetchedAt || 0); }); return list; }, [mentions, tab, sourceFilter, minScore]); const pendingCount = useMemoSl(() => mentions.filter(m => m.aiStatus === 'pending').length, [mentions]); const setReview = (id, status) => { setMentions(ms => ms.map(m => ( m.id === id ? { ...m, reviewStatus: status, reviewedAt: new Date().toISOString() } : m ))); }; const runSearch = async () => { if (!window.supa || searching) return; setSearching(true); try { const { data, error } = await window.supa.functions.invoke('social-search', { body: { mode: 'both' } }); if (error) throw error; if (data && data.ok === false && data.errors && data.errors.length) { setToast('Search issue: ' + data.errors[0]); } else { const n = data?.inserted || 0; setToast(n > 0 ? `Found ${n} new · ${data?.relevant || 0} relevant` : 'No new mentions this run'); } } catch (e) { setToast('Search failed: ' + (e?.message || 'error')); } finally { setSearching(false); } }; const activeKeywords = keywords.filter(k => k.active).length; return (

Social Listening

Reddit threads mentioning Snap-a-Box or our areas, scored by AI for how worth engaging they are. {' '} {activeKeywords > 0 ? Watching {activeKeywords} keyword{activeKeywords === 1 ? '' : 's'}. : No active keywords — add some in Settings.} {lastSearched && · Last searched {slFmtRel(lastSearched)}.}
setSettingsOpen(true)}>Settings {searching ? 'Searching…' : 'Search now'}
{/* Filters */}
{pendingCount > 0 && (
Analyzing {pendingCount} new mention{pendingCount === 1 ? '' : 's'}…
)} {/* List */} {visible.length === 0 ? (
{mentions.length === 0 ? 'No mentions yet.' : tab === 'relevant' ? 'Nothing relevant right now.' : 'Nothing here.'}
{mentions.length === 0 ? 'Click “Search now” to scan Reddit for your keywords.' : 'Try the “All” tab or run a fresh search.'}
) : (
{visible.map(m => )}
)} {settingsOpen && ( setSettingsOpen(false)} onToast={setToast} /> )} setToast('')} />
); }; // ---- mention card ------------------------------------------------------- const SlMentionCard = ({ m, onReview }) => { const src = SL_SOURCE_META[m.source] || { label: m.source, bg: '#F3F4F6', fg: '#6B7280' }; const analyzing = m.aiStatus === 'pending'; const failed = m.aiStatus === 'error'; const sw = slScoreSwatch(m.aiScore || 0); return (
{/* meta row */}
{src.label} {m.subreddit && {m.subreddit}} {m.postedAt && · {slFmtRel(m.postedAt)}} {typeof m.score === 'number' && ( · ▲ {m.score} )} {typeof m.numComments === 'number' && m.numComments > 0 && ( · {m.numComments} comment{m.numComments === 1 ? '' : 's'} )}
{analyzing ? ( Analyzing… ) : failed ? ( Analysis failed ) : ( {m.aiScore} / 100 )}
{/* title */} {m.title || '(untitled post)'} {/* snippet */} {m.body && (
{m.body}
)} {/* AI reason + angle */} {!analyzing && !failed && (m.aiReason || m.aiAngle) && (
{m.aiReason && (
Why: {m.aiReason}
)} {m.aiAngle && (
Angle: {m.aiAngle}
)}
)} {/* topics + matched term */}
{(m.aiTopics || []).map((t, i) => ( {t} ))} {m.matchedTerm && ( {m.matchedTerm} )}
{/* actions */}
window.open(m.url, '_blank', 'noopener')}>Open
onReview(m.id, m.reviewStatus === 'saved' ? 'new' : 'saved')} /> onReview(m.id, m.reviewStatus === 'engaged' ? 'new' : 'engaged')} /> onReview(m.id, m.reviewStatus === 'dismissed' ? 'new' : 'dismissed')} />
); }; const SlReviewBtn = ({ icon, label, active, onClick }) => ( ); // ---- settings modal ----------------------------------------------------- const SlSettingsModal = ({ keywords, setKeywords, cfg, setCfg, onClose, onToast }) => { const [newTerm, setNewTerm] = useStateSl(''); const [blurb, setBlurb] = useStateSl(cfg.business_blurb || ''); const [areasText, setAreasText] = useStateSl((cfg.areas || []).join(', ')); const [minScore, setMinScore] = useStateSl(cfg.min_score || 60); const [savingCfg, setSavingCfg] = useStateSl(false); const addKeyword = () => { const term = newTerm.trim(); if (!term) return; if (keywords.some(k => k.term.toLowerCase() === term.toLowerCase())) { onToast('Keyword already exists'); setNewTerm(''); return; } const id = (window.crypto && window.crypto.randomUUID) ? window.crypto.randomUUID() : ('kw-' + Date.now()); setKeywords(ks => [...ks, { id, term, sources: ['reddit'], active: true, lastSearchedAt: null, createdAt: new Date().toISOString() }]); setNewTerm(''); }; const toggleKeyword = (id) => setKeywords(ks => ks.map(k => k.id === id ? { ...k, active: !k.active } : k)); const removeKeyword = (id) => setKeywords(ks => ks.filter(k => k.id !== id)); const saveCfg = async () => { setSavingCfg(true); const areas = areasText.split(',').map(s => s.trim()).filter(Boolean); const next = { business_blurb: blurb.trim(), areas, min_score: Math.max(0, Math.min(100, parseInt(minScore, 10) || 0)), }; try { if (window.supa) { const { error } = await window.supa.from('restaurants') .update({ social_listening_config: next }) .eq('id', window.RESTAURANT_ID); if (error) throw error; } setCfg(next); onToast('Settings saved'); } catch (e) { onToast('Save failed: ' + (e?.message || 'error')); } finally { setSavingCfg(false); } }; return ( Close {savingCfg ? 'Saving…' : 'Save context'} }>
{/* Keyword manager */}
setNewTerm(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); addKeyword(); } }} placeholder="e.g. bento Katy, meal prep Houston…" style={{ flex: 1, height: 34 }} /> Add
{keywords.length === 0 && (
No keywords yet — add one above.
)} {keywords.map(k => (
{k.term} reddit
))}
Facebook search is coming once a provider is connected.
{/* Relevance context */}