feat: ai course lesson questions (#8396)

* feat: ai course lesson questions

* Several fixes

* Improve test my knowledge

* Improve UI for questions

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
pull/8419/head
Arik Chakma 1 week ago committed by GitHub
parent 6c6c9ea85d
commit bd1a19da3d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 13
      src/components/GenerateCourse/AICourseLesson.tsx
  2. 473
      src/components/GenerateCourse/TestMyKnowledgeAction.tsx
  3. 56
      src/lib/ai.ts

@ -27,6 +27,7 @@ import { queryClient } from '../../stores/query-client';
import { AICourseFollowUp } from './AICourseFollowUp';
import './AICourseFollowUp.css';
import { RegenerateLesson } from './RegenerateLesson';
import { TestMyKnowledgeAction } from './TestMyKnowledgeAction';
type AICourseLessonProps = {
courseSlug: string;
@ -203,7 +204,9 @@ export function AICourseLesson(props: AICourseLessonProps) {
isLoading;
const cantGoBack =
(activeModuleIndex === 0 && activeLessonIndex === 0) || isGenerating || isLoading;
(activeModuleIndex === 0 && activeLessonIndex === 0) ||
isGenerating ||
isLoading;
return (
<div className="mx-auto max-w-4xl">
@ -319,6 +322,14 @@ export function AICourseLesson(props: AICourseLessonProps) {
</div>
)}
{!isLoading && !isGenerating && !error && (
<TestMyKnowledgeAction
courseSlug={courseSlug}
activeModuleIndex={activeModuleIndex}
activeLessonIndex={activeLessonIndex}
/>
)}
<div className="mt-8 flex items-center justify-between">
<button
onClick={onGoToPrevLesson}

@ -0,0 +1,473 @@
import {
ChevronLeftIcon,
ChevronRightIcon,
CircleCheckIcon,
CircleIcon,
CircleXIcon,
FlaskConicalIcon,
FrownIcon,
Loader2Icon,
} from 'lucide-react';
import { cn } from '../../lib/classname';
import {
generateAiCourseLessonQuestions,
readStream,
type Question,
} from '../../lib/ai';
import { useCallback, useMemo, useState } from 'react';
import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
type TestMyKnowledgeActionProps = {
courseSlug: string;
activeModuleIndex: number;
activeLessonIndex: number;
};
export function TestMyKnowledgeAction(props: TestMyKnowledgeActionProps) {
const { courseSlug, activeModuleIndex, activeLessonIndex } = props;
const [questions, setQuestions] = useState<Question[]>([]);
const [isKnowledgeTestOpen, setIsKnowledgeTestOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isGenerating, setIsGenerating] = useState(false);
const [error, setError] = useState('');
const abortController = useMemo(
() => new AbortController(),
[activeModuleIndex, activeLessonIndex],
);
const generateAiLessonQuestions = async () => {
setIsLoading(true);
setError('');
if (!isLoggedIn()) {
setIsLoading(false);
setError('Please login to generate course content');
return;
}
const response = await fetch(
`${import.meta.env.PUBLIC_API_URL}/v1-generate-ai-course-lesson-question/${courseSlug}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
signal: abortController.signal,
credentials: 'include',
body: JSON.stringify({
moduleIndex: activeModuleIndex,
lessonIndex: activeLessonIndex,
}),
},
);
if (!response.ok) {
const data = await response.json();
setError(data?.message || 'Something went wrong');
setIsLoading(false);
// Logout user if token is invalid
if (data.status === 401) {
removeAuthToken();
window.location.reload();
}
return;
}
if (!response.body) {
setIsLoading(false);
setError('No response body received');
return;
}
try {
const reader = response.body.getReader();
setIsLoading(false);
setIsGenerating(true);
await readStream(reader, {
onStream: async (result) => {
if (abortController.signal.aborted) {
return;
}
const questions = generateAiCourseLessonQuestions(result);
setQuestions(questions);
},
onStreamEnd: async (result) => {
if (abortController.signal.aborted) {
return;
}
const questions = generateAiCourseLessonQuestions(result);
setQuestions(questions);
setIsGenerating(false);
},
});
} catch (e) {
setError(e instanceof Error ? e.message : 'Something went wrong');
setIsLoading(false);
setIsGenerating(false);
}
};
return (
<div className="mt-10 flex flex-col gap-4">
{!isKnowledgeTestOpen && (
<div className="flex items-center gap-2">
<button
className={cn(
'group flex flex-shrink-0 items-center gap-2 rounded-xl border border-gray-200 bg-white px-6 py-3 text-sm font-medium text-gray-700 transition-all hover:border-black hover:bg-gray-50 hover:text-gray-900',
{
'bg-gray-100 text-gray-900': isKnowledgeTestOpen,
},
)}
onClick={() => {
if (isGenerating || isLoading) {
return;
}
if (!isKnowledgeTestOpen) {
setIsKnowledgeTestOpen(true);
generateAiLessonQuestions();
} else {
setIsKnowledgeTestOpen(false);
}
}}
>
<FlaskConicalIcon className="size-5 shrink-0 transition-transform group-hover:scale-110" />
<span>Test My Knowledge</span>
</button>
</div>
)}
{error && (
<div className="flex min-h-[200px] flex-col items-center justify-center gap-3 rounded-xl bg-red-50/80 p-6 text-red-500">
<FrownIcon className="size-12 shrink-0" />
<span className="text-center font-semibold">{error}</span>
</div>
)}
{!error && isKnowledgeTestOpen && (
<ListQuestions
isLoading={isLoading}
isGenerating={isGenerating}
questions={questions}
/>
)}
</div>
);
}
type ListQuestionsProps = {
isLoading: boolean;
isGenerating: boolean;
questions: Question[];
};
export function ListQuestions(props: ListQuestionsProps) {
const { isLoading, isGenerating, questions } = props;
const [selectedAnswers, setSelectedAnswers] = useState<
Record<string, string[]>
>({});
const [submitted, setSubmitted] = useState(false);
const [activeQuestionIndex, setActiveQuestionIndex] = useState(0);
const activeQuestion = questions[activeQuestionIndex];
const handleOptionSelectChange = function (
questionId: string,
optionId: string,
) {
setSelectedAnswers((prev) => {
const newAnswers = { ...prev };
const canMultiSelect =
activeQuestion.options.filter((option) => option.isCorrect).length > 1;
const isAlreadySelected = selectedAnswers[questionId]?.includes(optionId);
if (isAlreadySelected) {
newAnswers[questionId] = newAnswers[questionId].filter(
(id) => id !== optionId,
);
} else {
if (canMultiSelect) {
newAnswers[questionId] = [
...(newAnswers[questionId] || []),
optionId,
];
} else {
newAnswers[questionId] = [optionId];
}
}
return newAnswers;
});
};
const handleNext = useCallback(() => {
const isLastQuestion = activeQuestionIndex === questions.length - 1;
if (isLastQuestion) {
setSubmitted(true);
setActiveQuestionIndex(0);
return;
}
setActiveQuestionIndex(activeQuestionIndex + 1);
}, [activeQuestionIndex, questions, submitted]);
const handlePrevious = useCallback(() => {
setActiveQuestionIndex((prev) => Math.max(prev - 1, 0));
}, [questions]);
const handleTryAgain = useCallback(() => {
setSelectedAnswers({});
setSubmitted(false);
setActiveQuestionIndex(0);
}, []);
const correctAnswerCount = useMemo(() => {
if (!submitted) {
return 0;
}
return questions.filter((question) => {
const selectedOptionIds = selectedAnswers[question.id];
const correctAnswerIds = question.options
.filter((option) => option.isCorrect)
.map((option) => option.id);
return (
correctAnswerIds.length === selectedOptionIds?.length &&
correctAnswerIds.every((correctAnswerId) =>
selectedOptionIds?.includes(correctAnswerId),
)
);
}).length;
}, [questions, selectedAnswers, submitted]);
if (isLoading || !questions.length) {
return (
<div className="flex h-[306px] w-full items-center justify-center rounded-lg border p-5 text-black">
<Loader2Icon className="size-8 animate-spin stroke-[2.5] text-gray-400" />
</div>
);
}
return (
<QuizItem
counter={activeQuestionIndex + 1}
totalQuestions={questions.length}
correctAnswerCount={correctAnswerCount}
isLoading={isGenerating}
question={activeQuestion}
onOptionSelectChange={handleOptionSelectChange}
selectedOptionIds={selectedAnswers[activeQuestion.id]}
submitted={submitted}
onNext={handleNext}
onPrevious={handlePrevious}
onTryAgain={handleTryAgain}
/>
);
}
type QuizItemProps = {
totalQuestions: number;
correctAnswerCount: number;
counter: number;
question: Question;
onOptionSelectChange?: (id: string, optionId: string) => void;
selectedOptionIds?: string[];
submitted?: boolean;
isLoading: boolean;
onNext?: () => void;
onPrevious?: () => void;
onTryAgain?: () => void;
};
export function QuizItem(props: QuizItemProps) {
const {
totalQuestions,
correctAnswerCount,
counter,
isLoading,
question,
onOptionSelectChange,
selectedOptionIds,
submitted = false,
onNext,
onPrevious,
onTryAgain,
} = props;
const { id: questionId, title, options } = question;
const canMultiSelect =
options.filter((option) => option.isCorrect).length > 1;
const correctAnswerIds = options
.filter((option) => option.isCorrect)
.map((option) => option.id);
const isAllCorrectAnswer =
correctAnswerIds.length === selectedOptionIds?.length &&
correctAnswerIds.every((correctAnswerId) =>
selectedOptionIds?.includes(correctAnswerId),
);
const hasWrongAnswer = submitted && !isAllCorrectAnswer;
const hasCorrectAnswer = submitted && isAllCorrectAnswer;
return (
<div
className={cn(
'relative w-full overflow-hidden rounded-xl border text-black transition-all',
{
'border-red-400': hasWrongAnswer,
'border-green-500': hasCorrectAnswer,
},
)}
>
<div className="flex items-center gap-4 rounded-t-xl border-b bg-gradient-to-r from-gray-50 to-white p-5">
<span className="text-sm font-medium text-gray-700">
Question {counter} of {totalQuestions}
</span>
<div className="h-2 flex-1 rounded-full bg-gray-100">
<div
className="h-full rounded-full bg-black transition-all duration-300"
style={{ width: `${(counter / totalQuestions) * 100}%` }}
/>
</div>
{submitted && (
<span
className={cn('rounded-full px-3 py-1 text-xs font-medium', {
'bg-red-500 text-white': hasWrongAnswer,
'bg-green-500 text-white': hasCorrectAnswer,
})}
>
{hasWrongAnswer ? 'Wrong' : 'Correct'}
</span>
)}
</div>
<div className="p-6">
<h3 className="mx-2 text-balance text-xl font-medium">
{title} {canMultiSelect ? '(Select Multiple)' : ''}
</h3>
<div className="mt-6 flex flex-col gap-0.5">
{options.map((option, index) => {
let status: QuizOptionStatus = 'default';
if (submitted) {
if (option.isCorrect) {
status = 'correct';
} else if (selectedOptionIds?.includes(option.id)) {
status = 'wrong';
}
} else {
if (selectedOptionIds?.includes(option.id)) {
status = 'selected';
}
}
return (
<QuizOption
key={index}
title={option.title}
status={status}
onSelect={() => onOptionSelectChange?.(questionId, option.id)}
submitted={submitted}
/>
);
})}
</div>
<div className="mt-6 flex w-full items-center justify-between px-2">
<div className="text-gray-600">
{submitted ? (
<span className="flex items-center gap-2">
You got {correctAnswerCount} out of {totalQuestions} correct.
<button
className="relative rounded-md bg-black px-3 py-1 text-xs font-medium uppercase tracking-wider text-white transition-colors hover:bg-black/80"
onClick={onTryAgain}
>
Try again
</button>
</span>
) : (
<span>Answer all questions to submit</span>
)}
</div>
<div className="flex gap-2">
<button
className="group flex h-10 items-center justify-center gap-1 rounded-lg border border-gray-200 p-2 pr-4 text-sm text-black transition-all hover:border-black hover:bg-black hover:text-white focus:outline-none max-sm:pr-2"
onClick={onPrevious}
>
<ChevronLeftIcon className="size-5 shrink-0 transition-transform group-hover:-translate-x-0.5" />
<span className="max-sm:hidden">Previous</span>
</button>
<button
className="group flex h-10 items-center justify-center gap-1 rounded-lg border border-gray-200 p-2 pl-4 text-sm text-black transition-all hover:border-black hover:bg-black hover:text-white focus:outline-none max-sm:pl-2"
onClick={onNext}
>
<span className="max-sm:hidden">Next</span>
<ChevronRightIcon className="size-5 shrink-0 transition-transform group-hover:translate-x-0.5" />
</button>
</div>
</div>
</div>
{isLoading && (
<div className="absolute right-2 top-2 flex h-8 items-center justify-center gap-1 rounded-lg border border-gray-200 p-2 text-sm text-black hover:bg-black hover:text-white focus:outline-none">
<Loader2Icon className="size-5 animate-spin text-gray-400" />
</div>
)}
</div>
);
}
type QuizOptionStatus = 'default' | 'selected' | 'wrong' | 'correct';
type QuizOptionProps = {
title: string;
status?: QuizOptionStatus;
onSelect: () => void;
submitted?: boolean;
};
export function QuizOption(props: QuizOptionProps) {
const { title, status = 'default', onSelect, submitted = false } = props;
return (
<button
onClick={onSelect}
className={cn(
'group flex items-start gap-3 rounded-xl p-4 text-base transition-all disabled:cursor-not-allowed',
status === 'selected' && 'bg-black text-white',
status === 'wrong' && submitted && 'bg-red-100 text-red-800',
status === 'correct' && submitted && 'bg-green-100 text-green-800',
status === 'default' && 'bg-white hover:bg-gray-50',
submitted && status !== 'correct' && 'opacity-40',
)}
disabled={submitted}
>
<span className="mt-[2px]">
{status === 'wrong' && submitted && <CircleXIcon className="size-5" />}
{status === 'correct' && submitted && (
<CircleCheckIcon className="size-5" />
)}
{(status === 'selected' || status === 'default') && (
<CircleIcon className="size-5" />
)}
</span>
<p className="text-left">{title}</p>
</button>
);
}

@ -211,6 +211,62 @@ export async function readStream(
reader.releaseLock();
}
export type Question = {
id: string;
title: string;
options: {
id: string;
title: string;
isCorrect: boolean;
}[];
};
export function generateAiCourseLessonQuestions(
questionData: string,
): Question[] {
const questions: Question[] = [];
const lines = questionData.split('\n');
let currentQuestion: Question | null = null;
for (let i = 0; i < lines.length; i++) {
const line = lines[i].trim();
if (line.startsWith('#')) {
if (currentQuestion) {
questions.push(currentQuestion);
currentQuestion = null;
}
const title = line.replace('#', '').trim();
currentQuestion = {
id: nanoid(),
title,
options: [],
};
} else if (line.startsWith('-')) {
if (!currentQuestion) {
continue;
}
let title = line.replace('-', '').trim();
const isCorrect = title.startsWith('*');
title = title.replace('*', '').trim();
currentQuestion.options.push({
id: nanoid(),
title,
isCorrect,
});
}
}
if (currentQuestion) {
questions.push(currentQuestion);
}
return questions;
}
export type SubTopic = {
id: string;
type: 'subtopic';

Loading…
Cancel
Save