Spaces:
Sleeping
Sleeping
| import { useState, useEffect } from "react" | |
| import api from "../lib/api" | |
| import Reveal from "./Reveal" | |
| const CONTEXT_LABELS = { | |
| social: "Casual & Low-Stakes", collaborative: "Collaborative", | |
| evaluative: "Interview & Review · High Stakes", influential: "Persuading & Pitching", | |
| negotiation: "Negotiation", adversarial: "Conflict & Friction", | |
| developmental: "Coaching & Feedback", support: "Supportive Listening", | |
| intimate: "Deep Personal", casual: "Casual & Low-Stakes", meeting: "Meeting", | |
| job_interview: "Interview & Review · High Stakes", disagreement: "Conflict & Friction", | |
| presentation: "Interview & Review · High Stakes", sales_call: "Persuading & Pitching", | |
| feedback_conversation: "Coaching & Feedback", coaching_call: "Coaching & Feedback", | |
| first_date: "Deep Personal", | |
| } | |
| // Grouped by display label, not raw key — "social" and "casual" both render | |
| // as "Casual & Low-Stakes" and must share a color, same for every other | |
| // multi-key group above. | |
| const CONTEXT_COLORS = { | |
| social: "#5b9cf6", casual: "#5b9cf6", | |
| collaborative: "#2dd4bf", | |
| evaluative: "#f87171", job_interview: "#f87171", presentation: "#f87171", | |
| influential: "#fb923c", sales_call: "#fb923c", | |
| negotiation: "#f59e0b", | |
| adversarial: "#fb7185", disagreement: "#fb7185", | |
| developmental: "#a78bfa", feedback_conversation: "#a78bfa", coaching_call: "#a78bfa", | |
| support: "#34d399", | |
| intimate: "#e879f9", first_date: "#e879f9", | |
| meeting: "#94a3b8", | |
| } | |
| function contextColor(key) { | |
| return CONTEXT_COLORS[key] || "#5b9cf6" | |
| } | |
| function hexToRgba(hex, alpha) { | |
| const num = parseInt(hex.slice(1), 16) | |
| return `rgba(${(num >> 16) & 0xff}, ${(num >> 8) & 0xff}, ${num & 0xff}, ${alpha})` | |
| } | |
| function SessionCard({ s, index, onSelect, confirmDeleteId, setConfirmDeleteId, handleDelete, deleting }) { | |
| const sessionTypes = (s.insights?.conversation_types || [s.context]) | |
| // Talk split percentages | |
| const dur = s.signals.session_duration_s || 1 | |
| const userPct = Math.round((s.signals.talk_ratio.user_speaking_time_s / dur) * 100) | |
| const otherPct = Math.round((s.signals.talk_ratio.other_speaking_time_s / dur) * 100) | |
| const silPct = Math.max(0, 100 - userPct - otherPct) | |
| return ( | |
| <Reveal delay={Math.min(index * 80, 280)}> | |
| <div className="card" | |
| style={{ border: "1px solid #1e2438", borderRadius: 12, padding: 16, | |
| background: "#151922", boxShadow: "0 2px 16px rgba(0,0,0,0.3)" }}> | |
| <div onClick={() => onSelect({ | |
| signals: s.signals, insights: s.insights, | |
| dimensions: s.dimensions || {}, | |
| filename: s.filename || "recording", | |
| detected_speaker: s.detected_speaker || "SPEAKER_00", | |
| session_id: s.session_id, | |
| fingerprint: s.fingerprint || null, | |
| })} style={{ cursor: "pointer" }}> | |
| {/* Top row */} | |
| <div style={{ display: "flex", justifyContent: "space-between", | |
| alignItems: "center", marginBottom: 8 }}> | |
| <div style={{ display: "flex", gap: 5, flexWrap: "wrap" }}> | |
| {sessionTypes.map((t, i) => { | |
| const color = i === 0 ? contextColor(t) : "#8b89aa" | |
| return ( | |
| <span key={t} style={{ | |
| fontSize: 11, fontWeight: i === 0 ? 700 : 500, | |
| color, | |
| textTransform: "uppercase", letterSpacing: 0.4, | |
| background: i === 0 ? hexToRgba(color, 0.12) : "#131827", | |
| border: `1px solid ${i === 0 ? hexToRgba(color, 0.3) : "#1e2438"}`, | |
| padding: "2px 8px", borderRadius: 4, | |
| }}> | |
| {CONTEXT_LABELS[t] || t} | |
| </span> | |
| ) | |
| })} | |
| </div> | |
| <span style={{ fontSize: 11, color: "#4a4865" }}> | |
| {new Date(s.created_at).toLocaleDateString("en-IN", { | |
| day: "numeric", month: "short", year: "numeric" | |
| })} | |
| </span> | |
| </div> | |
| {/* Summary */} | |
| <p style={{ margin: "0 0 12px", fontSize: 13, color: "#8b89aa", lineHeight: 1.5 }}> | |
| {s.insights.summary_sentence} | |
| </p> | |
| {/* Signal stats */} | |
| <div style={{ display: "flex", gap: 16, flexWrap: "wrap", | |
| marginBottom: s.highlight ? 12 : 0 }}> | |
| {[ | |
| { label: "You", value: `${userPct}%` }, | |
| { label: "Others", value: `${otherPct}%` }, | |
| { label: "Silence", value: `${silPct}%` }, | |
| { label: "WPM", value: `${s.signals.speech_rate.overall_wpm}` }, | |
| { label: "Fillers", value: `${s.signals.filler_words.rate_per_100_words}/100w` }, | |
| { label: "Duration", value: `${Math.round(dur / 60)}m` }, | |
| ].map(({ label, value }) => ( | |
| <div key={label}> | |
| <div style={{ fontSize: 10, color: "#4a4865" }}>{label}</div> | |
| <div style={{ fontSize: 12, fontWeight: 600, color: "#f0eeff" }}>{value}</div> | |
| </div> | |
| ))} | |
| </div> | |
| {/* Self-relative highlight — one steady composite, "more/less than your | |
| usual", never a number, never a grade. None shown if nothing is | |
| steady yet for this user+context (honest, not padded). */} | |
| {s.highlight && ( | |
| <div style={{ display: "flex", alignItems: "baseline", gap: 6, paddingTop: 10, | |
| borderTop: "1px solid #1e2438" }}> | |
| <span style={{ fontSize: 11, fontWeight: 600, color: "#818cf8" }}> | |
| {s.highlight.label} | |
| </span> | |
| <span style={{ fontSize: 12, color: "#8b89aa" }}> | |
| {s.highlight.position} | |
| </span> | |
| </div> | |
| )} | |
| </div> | |
| {/* Delete controls */} | |
| <div style={{ marginTop: 10, paddingTop: 8, borderTop: "1px solid #1e2438", | |
| display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 8 }}> | |
| {confirmDeleteId === s.session_id ? ( | |
| <> | |
| <span style={{ fontSize: 12, color: "#8b89aa" }}>Delete this session?</span> | |
| <button onClick={() => setConfirmDeleteId(null)} | |
| style={{ fontSize: 12, color: "#8b89aa", background: "none", | |
| border: "none", cursor: "pointer", padding: "2px 8px" }}> | |
| Cancel | |
| </button> | |
| <button onClick={() => handleDelete(s.session_id)} disabled={deleting} | |
| style={{ fontSize: 12, color: "white", background: "#f87171", | |
| border: "none", borderRadius: 5, padding: "3px 10px", fontWeight: 600, | |
| cursor: deleting ? "not-allowed" : "pointer", | |
| opacity: deleting ? 0.6 : 1 }}> | |
| {deleting ? "Deleting…" : "Yes, delete"} | |
| </button> | |
| </> | |
| ) : ( | |
| <button onClick={e => { e.stopPropagation(); setConfirmDeleteId(s.session_id) }} | |
| style={{ fontSize: 12, color: "#4a4865", background: "none", | |
| border: "none", cursor: "pointer", padding: "2px 4px" }}> | |
| Delete | |
| </button> | |
| )} | |
| </div> | |
| </div> | |
| </Reveal> | |
| ) | |
| } | |
| const PAGE_SIZE = 10 | |
| export default function HistoryView({ onSelect, active = false }) { | |
| const [sessions, setSessions] = useState([]) | |
| const [loading, setLoading] = useState(true) | |
| const [loadError, setLoadError] = useState(false) | |
| const [confirmDeleteId, setConfirmDeleteId] = useState(null) | |
| const [deleting, setDeleting] = useState(false) | |
| const [contextFilter, setContextFilter] = useState("all") | |
| const [page, setPage] = useState(0) | |
| const [total, setTotal] = useState(0) | |
| const [loadingMore, setLoadingMore] = useState(false) | |
| const handleDelete = async (sessionId) => { | |
| setDeleting(true) | |
| try { | |
| await api.delete(`/api/sessions/${sessionId}`) | |
| setSessions(prev => prev.filter(s => s.session_id !== sessionId)) | |
| setTotal(prev => prev - 1) | |
| } catch (e) { | |
| console.error("Delete failed:", e) | |
| } finally { | |
| setDeleting(false) | |
| setConfirmDeleteId(null) | |
| } | |
| } | |
| const loadSessions = (pageNum = 0) => { | |
| if (pageNum === 0) { | |
| setLoading(true) | |
| setLoadError(false) | |
| setSessions([]) | |
| setPage(0) | |
| } else { | |
| setLoadingMore(true) | |
| } | |
| api.get(`/api/sessions?page=${pageNum}&page_size=${PAGE_SIZE}`) | |
| .then(res => { | |
| const data = res.data | |
| const newSessions = Array.isArray(data) ? data : (data.sessions ?? []) | |
| const t = Array.isArray(data) ? data.length : (data.total ?? 0) | |
| setSessions(prev => pageNum === 0 ? newSessions : [...prev, ...newSessions]) | |
| setTotal(t) | |
| setPage(pageNum) | |
| }) | |
| .catch(err => { | |
| console.error(err) | |
| if (pageNum === 0) setLoadError(true) | |
| }) | |
| .finally(() => { setLoading(false); setLoadingMore(false) }) | |
| } | |
| useEffect(() => { | |
| if (!active) return | |
| loadSessions(0) | |
| }, [active]) | |
| if (loading) return ( | |
| <div style={{ textAlign: "center", padding: 48, color: "#4a4865" }}> | |
| Loading sessions… | |
| </div> | |
| ) | |
| if (loadError) return ( | |
| <div style={{ textAlign: "center", padding: 48 }}> | |
| <div style={{ fontSize: 32, marginBottom: 12 }}>⚠️</div> | |
| <p style={{ color: "#f87171", fontSize: 14, marginBottom: 12 }}> | |
| Could not load sessions — the server may be starting up. | |
| </p> | |
| <button onClick={() => loadSessions()} style={{ | |
| background: "rgba(29,78,216,0.1)", border: "1px solid rgba(29,78,216,0.3)", | |
| borderRadius: 8, padding: "8px 20px", color: "#5b9cf6", | |
| fontSize: 13, fontWeight: 500, cursor: "pointer", | |
| }}> | |
| Retry | |
| </button> | |
| </div> | |
| ) | |
| if (sessions.length === 0) return ( | |
| <div style={{ textAlign: "center", padding: 48 }}> | |
| <div style={{ fontSize: 36, marginBottom: 12 }}>📭</div> | |
| <p style={{ color: "#8b89aa", fontSize: 14 }}>No sessions yet.</p> | |
| <p style={{ color: "#4a4865", fontSize: 13, marginTop: 4 }}> | |
| Record your first meeting to get started. | |
| </p> | |
| </div> | |
| ) | |
| const getTypes = (s) => s.insights?.conversation_types || [s.context] | |
| const contexts = ["all", ...new Set(sessions.flatMap(s => getTypes(s)))] | |
| const filtered = contextFilter === "all" | |
| ? sessions | |
| : sessions.filter(s => getTypes(s).includes(contextFilter)) | |
| return ( | |
| <div> | |
| {/* Header + filter */} | |
| <div style={{ display: "flex", justifyContent: "space-between", | |
| alignItems: "center", marginBottom: 16 }}> | |
| <p style={{ fontSize: 13, color: "#4a4865", margin: 0 }}> | |
| {sessions.length < total | |
| ? `${sessions.length} of ${total} sessions loaded` | |
| : `${filtered.length} of ${total} session${total !== 1 ? "s" : ""}`} | |
| </p> | |
| <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}> | |
| {contexts.map(ctx => { | |
| const isActive = contextFilter === ctx | |
| const color = ctx === "all" ? "#5b9cf6" : contextColor(ctx) | |
| return ( | |
| <button key={ctx} onClick={() => setContextFilter(ctx)} | |
| style={{ padding: "4px 12px", borderRadius: 20, fontSize: 11, | |
| cursor: "pointer", fontWeight: isActive ? 600 : 400, | |
| background: isActive ? hexToRgba(color, 0.12) : "#151922", | |
| color: isActive ? color : "#8b89aa", | |
| border: isActive ? `1px solid ${hexToRgba(color, 0.3)}` : "1px solid #1e2438", | |
| transition: "all 0.15s" }}> | |
| {ctx === "all" ? "All" : (CONTEXT_LABELS[ctx] || ctx)} | |
| </button> | |
| ) | |
| })} | |
| </div> | |
| </div> | |
| <div style={{ display: "flex", flexDirection: "column", gap: 8 }}> | |
| {filtered.map((s, i) => ( | |
| <SessionCard | |
| key={s.session_id} | |
| s={s} | |
| index={i} | |
| onSelect={onSelect} | |
| confirmDeleteId={confirmDeleteId} | |
| setConfirmDeleteId={setConfirmDeleteId} | |
| handleDelete={handleDelete} | |
| deleting={deleting} | |
| /> | |
| ))} | |
| </div> | |
| {/* Load more */} | |
| {sessions.length < total && ( | |
| <div style={{ marginTop: 16, textAlign: "center" }}> | |
| <button | |
| onClick={() => loadSessions(page + 1)} | |
| disabled={loadingMore} | |
| style={{ | |
| background: "none", | |
| border: "1px solid #1e2438", | |
| borderRadius: 8, | |
| padding: "9px 24px", | |
| fontSize: 13, | |
| color: loadingMore ? "#4a4865" : "#8b89aa", | |
| cursor: loadingMore ? "not-allowed" : "pointer", | |
| fontFamily: "inherit", | |
| transition: "border-color 0.15s, color 0.15s", | |
| }} | |
| onMouseEnter={e => { if (!loadingMore) { e.currentTarget.style.borderColor = "#2e3464"; e.currentTarget.style.color = "#f0eeff" } }} | |
| onMouseLeave={e => { e.currentTarget.style.borderColor = "#1e2438"; e.currentTarget.style.color = loadingMore ? "#4a4865" : "#8b89aa" }} | |
| > | |
| {loadingMore | |
| ? "Loading…" | |
| : `Load ${Math.min(PAGE_SIZE, total - sessions.length)} more`} | |
| </button> | |
| <p style={{ fontSize: 11, color: "#4a4865", marginTop: 8 }}> | |
| {total - sessions.length} more session{total - sessions.length !== 1 ? "s" : ""} not shown | |
| </p> | |
| </div> | |
| )} | |
| {sessions.length >= 3 && sessions.length >= total && ( | |
| <Reveal> | |
| <div style={{ marginTop: 20, padding: 14, | |
| background: "rgba(52,211,153,0.06)", | |
| border: "1px solid rgba(52,211,153,0.2)", | |
| borderRadius: 10, fontSize: 13, color: "#34d399" }}> | |
| ✨ {total} sessions recorded — your behavioral profile is active. | |
| Check the You tab. | |
| </div> | |
| </Reveal> | |
| )} | |
| </div> | |
| ) | |
| } | |