// ===== AI相談ログ ページ ===== function AIConsultsPage({ pendingSelectId, onConsumePending, bookings = [], onOpenBooking }) { const D = window.AdminData; const KEY = 'seitai_ai_logs_v1'; const READ_KEY = 'seitai_ai_logs_read_v1'; const [logs, setLogs] = React.useState([]); const [readSet, setReadSet] = React.useState(() => new Set(D.loadJSON(READ_KEY, []))); const [filter, setFilter] = React.useState('all'); // all | unread | urgent | line | booked | dropped const [selectedId, setSelectedId] = React.useState(null); const [search, setSearch] = React.useState(''); // 外部（予約モーダルの「会話を見る」）からの選択指示 React.useEffect(() => { if (pendingSelectId) { setFilter('all'); setSearch(''); setSelectedId(pendingSelectId); setReadSet(prev => { const n = new Set(prev); n.add(pendingSelectId); return n; }); onConsumePending && onConsumePending(); } }, [pendingSelectId]); // 読み込み + クロスタブ同期 React.useEffect(() => { const load = () => setLogs(D.loadJSON(KEY, [])); load(); const onStorage = (e) => { if (e.key === KEY) load(); if (e.key === READ_KEY) setReadSet(new Set(D.loadJSON(READ_KEY, []))); }; window.addEventListener('storage', onStorage); // 同タブ更新も拾う const interval = setInterval(load, 3000); return () => { window.removeEventListener('storage', onStorage); clearInterval(interval); }; }, []); React.useEffect(() => { D.saveJSON(READ_KEY, [...readSet]); }, [readSet]); const markRead = (id) => setReadSet(prev => { const n = new Set(prev); n.add(id); return n; }); const markAllRead = () => setReadSet(new Set(logs.map(l => l.id))); const deleteLog = (id) => { if (!confirm('このログを削除しますか？')) return; const next = logs.filter(l => l.id !== id); D.saveJSON(KEY, next); setLogs(next); if (selectedId === id) setSelectedId(null); }; const clearAll = () => { if (!confirm('全てのAI相談ログを削除します。よろしいですか？')) return; D.saveJSON(KEY, []); setLogs([]); setSelectedId(null); }; // フィルタ＆ソート const filtered = React.useMemo(() => { let arr = logs.slice(); if (filter === 'unread') arr = arr.filter(l => !readSet.has(l.id)); if (filter === 'urgent') arr = arr.filter(l => (l.triggers || []).includes('urgent')); if (filter === 'line') arr = arr.filter(l => l.lineCtaClicked); if (filter === 'booked') arr = arr.filter(l => l.reachedBooking); if (filter === 'dropped') arr = arr.filter(l => !l.reachedBooking && !l.lineCtaClicked); if (search.trim()) { const s = search.toLowerCase(); arr = arr.filter(l => (l.summary || '').toLowerCase().includes(s) || (l.topics || []).some(t => t.toLowerCase().includes(s)) ); } arr.sort((a,b) => (b.updatedAt || b.startedAt || '').localeCompare(a.updatedAt || a.startedAt || '')); return arr; }, [logs, filter, readSet, search]); const selected = filtered.find(l => l.id === selectedId) || logs.find(l => l.id === selectedId); // 集計 const stats = React.useMemo(() => { const total = logs.length; const unread = logs.filter(l => !readSet.has(l.id)).length; const urgent = logs.filter(l => (l.triggers || []).includes('urgent')).length; const lineClick = logs.filter(l => l.lineCtaClicked).length; const booked = logs.filter(l => l.reachedBooking).length; const cvr = total > 0 ? Math.round((booked / total) * 100) : 0; // トピックランキング const topicCount = {}; logs.forEach(l => (l.topics || []).forEach(t => { topicCount[t] = (topicCount[t]||0) + 1; })); const topTopics = Object.entries(topicCount).sort((a,b) => b[1]-a[1]).slice(0, 5); return { total, unread, urgent, lineClick, booked, cvr, topTopics }; }, [logs, readSet]); const fmtDateTime = (iso) => { if (!iso) return '―'; const d = new Date(iso); return `${d.getMonth()+1}/${d.getDate()} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; }; const fmtRelative = (iso) => { if (!iso) return '―'; const t = new Date(iso); const diff = (new Date() - t) / 1000; if (diff < 60) return 'たった今'; if (diff < 3600) return Math.floor(diff/60) + '分前'; if (diff < 86400) return Math.floor(diff/3600) + '時間前'; if (diff < 86400*7) return Math.floor(diff/86400) + '日前'; return fmtDateTime(iso); }; return (
{/* KPI */}
相談件数（全期間）
{stats.total}
未読
0 ? 'var(--orange)' : 'var(--ink)'}}>{stats.unread}
緊急/専門判断
0 ? '#d6651e' : 'var(--ink)'}}>{stats.urgent}
LINE誘導クリック
{stats.lineClick}
予約到達
{stats.booked} ({stats.cvr}%)
{/* トピックランキング */} {stats.topTopics.length > 0 && (
よく相談されるトピック TOP5
{stats.topTopics.map(([t, c], i) => (
{i+1} {t} {c}件
))}
)} {/* フィルタバー */}
{[ { v:'all', label:'すべて' }, { v:'unread', label:`未読 (${stats.unread})` }, { v:'urgent', label:'緊急/専門判断' }, { v:'line', label:'LINEクリック' }, { v:'booked', label:'予約到達' }, { v:'dropped', label:'離脱' } ].map(f => ( ))}
setSearch(e.target.value)} />
{logs.length > 0 && ( )}
{/* リスト + 詳細 */} {logs.length === 0 ? (
) : (
{/* リスト */}
{filtered.length === 0 ? (
該当する相談はありません
) : filtered.map(l => { const unread = !readSet.has(l.id); const isUrgent = (l.triggers || []).includes('urgent'); const isSelected = l.id === selectedId; return (
{ setSelectedId(l.id); markRead(l.id); }}>
{fmtRelative(l.startedAt)} {l.rounds || 0}往復 {unread && }
{l.summary || '（記録なし）'}
{(l.topics || []).slice(0, 3).map(t => {t})} {isUrgent && 緊急} {l.lineCtaClicked && LINE} {l.reachedBooking && 予約} {!l.reachedBooking && !l.lineCtaClicked && 離脱}
); })}
{/* 詳細 */}
{!selected ? (

左のリストから相談を選択してください

) : (
{fmtDateTime(selected.startedAt)} · {selected.rounds || 0}往復 {selected.reachedBooking && 予約到達} {selected.lineCtaClicked && LINEクリック} {(selected.triggers || []).includes('urgent') && 緊急}
{(selected.topics || []).map(t => {t})} {(selected.topics || []).length === 0 && トピック未抽出}
{(() => { // 紐付く予約を検索 const linkedBooking = bookings.find(b => b.aiConsultId === selected.id); if (!linkedBooking) return null; return ( ); })()}
{(selected.messages || []).map((m, i) => (
{m.role === 'user' ? 'ユーザー' : 'AI院長'}
{m.content}
))}
)}
)} {/* スタイル */}
); } window.AIConsultsPage = AIConsultsPage;