File size: 4,328 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | "use client";
import { BookOpen, ChevronRight, Layers3, ShieldCheck } from "lucide-react";
import type { StructuredStudyResponse } from "@/lib/phase3-learning";
import type { StudyIntent } from "@/lib/study-intents";
type StructuredStudyResponseCardProps = {
data: StructuredStudyResponse;
onAction: (intent: StudyIntent, prompt: string) => void;
};
export function StructuredStudyResponseCard({ data, onAction }: StructuredStudyResponseCardProps) {
return (
<article className="animate-msg-assistant w-full rounded-[1.25rem] border border-white/[0.085] bg-white/[0.028] p-4 shadow-[0_14px_50px_rgba(0,0,0,0.22)] sm:p-5">
<div className="flex flex-wrap items-start justify-between gap-3 border-b border-white/[0.07] pb-4">
<div className="min-w-0">
<p className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/36">Study Chat response</p>
<h2 className="mt-1 text-lg font-semibold text-white sm:text-xl">{data.topic}</h2>
<p className="mt-2 max-w-2xl text-sm leading-6 text-white/58">{data.contextNote}</p>
</div>
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.1] bg-black px-2.5 py-1 text-[11px] font-semibold text-white/62">
<ShieldCheck className="size-3.5" />
Separate practice
</span>
</div>
<div className="mt-4 grid gap-3 md:grid-cols-2">
{data.sections.map((section) => (
<section key={section.title} className="rounded-xl border border-white/[0.07] bg-[#0B0B0B] p-4">
<div className="flex items-start gap-3">
<span className="grid size-8 shrink-0 place-items-center rounded-lg border border-white/[0.08] bg-white/[0.04] text-white/66">
{section.title === "Flashcards" || section.title === "Smart Notes" ? (
<Layers3 className="size-4" />
) : (
<BookOpen className="size-4" />
)}
</span>
<div className="min-w-0">
<h3 className="text-sm font-semibold text-white">{section.title}</h3>
<p className="mt-1 text-xs leading-5 text-white/52">{section.summary}</p>
</div>
</div>
<ul className="mt-3 space-y-1.5">
{section.points.slice(0, 4).map((point, index) => (
<li key={`${section.title}-${point}-${index}`} className="flex gap-2 text-xs leading-5 text-white/68">
<span className="mt-2 size-1 shrink-0 rounded-full bg-white/38" />
<span>{point}</span>
</li>
))}
</ul>
{section.action ? (
<button
type="button"
onClick={() => onAction(section.action!.intent, section.action!.prompt)}
className="mt-3 inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-white/[0.1] bg-white/[0.04] px-2.5 text-[11px] font-semibold text-white/66 transition hover:border-white/[0.2] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/22"
>
{section.action.label}
<ChevronRight className="size-3.5" />
</button>
) : null}
</section>
))}
</div>
<div className="mt-4 flex flex-wrap gap-2 rounded-xl border border-white/[0.07] bg-black/30 p-3">
{data.footerActions.map((action) => {
const disabled = action.label === "Add to Tuition Plan";
return (
<button
key={action.label}
type="button"
disabled={disabled}
title={disabled ? "Backend tuition-plan handoff is not wired yet." : undefined}
onClick={() => onAction(action.intent, action.prompt)}
className="inline-flex min-h-9 items-center gap-1.5 rounded-lg border border-white/[0.1] bg-white/[0.04] px-3 text-xs font-semibold text-white/68 transition hover:border-white/[0.2] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/22 disabled:cursor-not-allowed disabled:opacity-45"
>
{action.label}
</button>
);
})}
</div>
</article>
);
}
|