File size: 5,399 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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | "use client";
import { BookOpen, FileQuestion, Languages, Layers3, MessageSquareText, PenLine, Upload, Video } from "lucide-react";
import type { ApiDocument } from "@/lib/api/types";
import type { StudyIntent } from "@/lib/study-intents";
type ContextAction = {
label: string;
intent: StudyIntent;
prompt: string;
icon: typeof BookOpen;
};
const contextActions: ContextAction[] = [
{ label: "Explain in Malayalam", intent: "teach_topic", prompt: "Explain this in Malayalam + English: ", icon: Languages },
{ label: "Make it simpler", intent: "teach_topic", prompt: "Make this simpler: ", icon: BookOpen },
{ label: "Give exam answer", intent: "generate_exam_answer", prompt: "Give a mark-wise exam answer for: ", icon: PenLine },
{ label: "Generate flashcards", intent: "generate_flashcards", prompt: "Generate flashcards for: ", icon: Layers3 },
{ label: "Give PYQ questions", intent: "analyze_pyq", prompt: "Give exam-relevant PYQ questions for: ", icon: FileQuestion },
{ label: "Correct my answer", intent: "generate_exam_answer", prompt: "Correct this answer and show missing keywords: ", icon: PenLine },
{ label: "Create video plan", intent: "create_video_plan", prompt: "Create a video plan for: ", icon: Video },
];
export function StudyChatContextPanel({
selectedDocuments,
onAction,
onUpload,
}: {
selectedDocuments: ApiDocument[];
onAction: (intent: StudyIntent, prompt: string) => void;
onUpload: () => void;
}) {
const currentSubject = selectedDocuments[0]?.subject ?? "Not fixed";
const currentClass = selectedDocuments[0]?.syllabus ?? "Student-controlled chat";
return (
<div className="space-y-3">
<div className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-3">
<p className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/34">Current context</p>
<dl className="mt-3 space-y-2 text-xs">
<div className="flex justify-between gap-3">
<dt className="text-white/38">Class</dt>
<dd className="text-right font-semibold text-white/74">{currentClass}</dd>
</div>
<div className="flex justify-between gap-3">
<dt className="text-white/38">Subject</dt>
<dd className="text-right font-semibold text-white/74">{currentSubject}</dd>
</div>
</dl>
<p className="mt-3 text-[11px] leading-4 text-white/42">
Study Chat answers what you ask. It does not replace the official Tuition class.
</p>
</div>
<div className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-3">
<div className="flex items-center justify-between gap-2">
<p className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/34">Materials</p>
<button
type="button"
onClick={onUpload}
className="inline-flex items-center gap-1 rounded-lg border border-white/[0.1] bg-white/[0.04] px-2 py-1 text-[10px] font-semibold text-white/55 transition hover:text-white"
>
<Upload className="size-3" />
Upload
</button>
</div>
<div className="mt-3 space-y-2">
{selectedDocuments.length > 0 ? (
selectedDocuments.slice(0, 4).map((document) => (
<div key={document.id} className="rounded-xl border border-white/[0.06] bg-black/30 p-2">
<p className="truncate text-xs font-semibold text-white/76">{document.title || document.file_name}</p>
<p className="mt-1 truncate text-[11px] text-white/34">{document.subject ?? "Study material"}</p>
</div>
))
) : (
<p className="rounded-xl border border-dashed border-white/[0.08] bg-black/25 p-3 text-xs leading-5 text-white/42">
No material selected. You can still ask general academic questions.
</p>
)}
</div>
</div>
<div className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-3">
<p className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/34">Quick prompts</p>
<div className="mt-3 grid gap-2">
{contextActions.map((action) => {
const Icon = action.icon;
return (
<button
key={action.label}
type="button"
onClick={() => onAction(action.intent, action.prompt)}
className="flex min-h-9 items-center gap-2 rounded-xl border border-white/[0.075] bg-black/25 px-2.5 text-left text-xs font-semibold text-white/62 transition hover:border-white/[0.16] hover:bg-white/[0.04] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/22"
>
<Icon className="size-3.5 shrink-0" />
<span>{action.label}</span>
</button>
);
})}
</div>
</div>
<div className="rounded-2xl border border-white/[0.07] bg-white/[0.02] p-3">
<div className="flex items-start gap-2">
<MessageSquareText className="mt-0.5 size-4 shrink-0 text-white/48" />
<p className="text-xs leading-5 text-white/46">
For a different chapter, ask here. Tuition Mode keeps DocDoe's official class unchanged.
</p>
</div>
</div>
</div>
);
}
|