mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-31 21:11:44 +02:00
wip
This commit is contained in:
Arik Chakma
12
src/components/AIQuiz/AIQuiz.tsx
Normal file
12
src/components/AIQuiz/AIQuiz.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { AITutorLayout } from '../AITutor/AITutorLayout';
|
||||
|
||||
export function AIQuiz() {
|
||||
return (
|
||||
<AITutorLayout
|
||||
wrapperClassName="flex-row p-0 lg:p-0 relative overflow-hidden bg-white"
|
||||
containerClassName="h-[calc(100vh-49px)] overflow-hidden relative"
|
||||
>
|
||||
<h2>AI Quiz</h2>
|
||||
</AITutorLayout>
|
||||
);
|
||||
}
|
||||
227
src/components/AIQuiz/AIQuizGenerator.tsx
Normal file
227
src/components/AIQuiz/AIQuizGenerator.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import {
|
||||
BookOpenIcon,
|
||||
FileTextIcon,
|
||||
ListCheckIcon,
|
||||
ListTodoIcon,
|
||||
MapIcon,
|
||||
SparklesIcon,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import { useEffect, useId, useState } from 'react';
|
||||
import { isLoggedIn } from '../../lib/jwt';
|
||||
import { showLoginPopup } from '../../lib/popup';
|
||||
import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
|
||||
import { useIsPaidUser } from '../../queries/billing';
|
||||
import {
|
||||
clearQuestionAnswerChatMessages,
|
||||
storeQuestionAnswerChatMessages,
|
||||
} from '../../lib/ai-questions';
|
||||
import {
|
||||
QuestionAnswerChat,
|
||||
type QuestionAnswerChatMessage,
|
||||
} from '../ContentGenerator/QuestionAnswerChat';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
import { cn } from '../../lib/classname';
|
||||
import { getUrlParams } from '../../lib/browser';
|
||||
import { useParams } from '../../hooks/use-params';
|
||||
import { FormatItem } from '../ContentGenerator/FormatItem';
|
||||
|
||||
const allowedFormats = ['mcq', 'open-ended', 'mixed'] as const;
|
||||
export type AllowedFormat = (typeof allowedFormats)[number];
|
||||
|
||||
export function AIQuizGenerator() {
|
||||
const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
|
||||
const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();
|
||||
|
||||
const toast = useToast();
|
||||
const [title, setTitle] = useState('');
|
||||
const [selectedFormat, setSelectedFormat] = useState<AllowedFormat>('mcq');
|
||||
|
||||
// question answer chat options
|
||||
const [showFineTuneOptions, setShowFineTuneOptions] = useState(false);
|
||||
const [questionAnswerChatMessages, setQuestionAnswerChatMessages] = useState<
|
||||
QuestionAnswerChatMessage[]
|
||||
>([]);
|
||||
|
||||
const titleFieldId = useId();
|
||||
const fineTuneOptionsId = useId();
|
||||
|
||||
useEffect(() => {
|
||||
const params = getUrlParams();
|
||||
const format = params.format as AllowedFormat;
|
||||
if (format && allowedFormats.find((f) => f.value === format)) {
|
||||
setSelectedFormat(format);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const allowedFormats: {
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
value: AllowedFormat;
|
||||
}[] = [
|
||||
{
|
||||
label: 'MCQ',
|
||||
icon: ListTodoIcon,
|
||||
value: 'mcq',
|
||||
},
|
||||
{
|
||||
label: 'Open-Ended',
|
||||
icon: FileTextIcon,
|
||||
value: 'open-ended',
|
||||
},
|
||||
{
|
||||
label: 'Mixed',
|
||||
icon: MapIcon,
|
||||
value: 'mixed',
|
||||
},
|
||||
];
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!isLoggedIn()) {
|
||||
showLoginPopup();
|
||||
return;
|
||||
}
|
||||
|
||||
let sessionId = '';
|
||||
if (showFineTuneOptions) {
|
||||
clearQuestionAnswerChatMessages();
|
||||
sessionId = storeQuestionAnswerChatMessages(questionAnswerChatMessages);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window?.fireEvent({
|
||||
action: 'tutor_user',
|
||||
category: 'ai_tutor',
|
||||
label: 'Visited AI Quiz Generator Page',
|
||||
});
|
||||
}, []);
|
||||
|
||||
const trimmedTitle = title.trim();
|
||||
const canGenerate = trimmedTitle && trimmedTitle.length >= 3;
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex w-full max-w-2xl flex-grow flex-col pt-4 md:justify-center md:pt-10 lg:pt-28 lg:pb-24">
|
||||
<div className="relative">
|
||||
{isUpgradeModalOpen && (
|
||||
<UpgradeAccountModal onClose={() => setIsUpgradeModalOpen(false)} />
|
||||
)}
|
||||
{!isPaidUser && !isPaidUserLoading && isLoggedIn() && (
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 -translate-y-8 text-gray-500 max-md:hidden">
|
||||
You are on the free plan
|
||||
<button
|
||||
onClick={() => setIsUpgradeModalOpen(true)}
|
||||
className="ml-2 rounded-xl bg-yellow-600 px-2 py-1 text-sm text-white hover:opacity-80"
|
||||
>
|
||||
Upgrade to Pro
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<h1 className="mb-0.5 text-center text-4xl font-semibold max-md:text-left max-md:text-xl lg:mb-3">
|
||||
What can I help you learn?
|
||||
</h1>
|
||||
<p className="text-center text-lg text-balance text-gray-600 max-md:text-left max-md:text-sm">
|
||||
Enter a topic below to generate a personalized course for it
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
className="mt-10 space-y-4"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor={titleFieldId} className="inline-block text-gray-500">
|
||||
What can I help you learn?
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id={titleFieldId}
|
||||
placeholder="Enter a topic"
|
||||
value={title}
|
||||
onChange={(e) => {
|
||||
setTitle(e.target.value);
|
||||
setShowFineTuneOptions(false);
|
||||
}}
|
||||
className="block w-full rounded-xl border border-gray-200 bg-white p-4 outline-none placeholder:text-gray-500 focus:border-gray-500"
|
||||
required
|
||||
minLength={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="inline-block text-gray-500">
|
||||
Choose the format
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{allowedFormats.map((format) => {
|
||||
const isSelected = format.value === selectedFormat;
|
||||
|
||||
return (
|
||||
<FormatItem
|
||||
key={format.value}
|
||||
label={format.label}
|
||||
onClick={() => setSelectedFormat(format.value)}
|
||||
icon={format.icon}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label
|
||||
className={cn(
|
||||
'flex cursor-pointer items-center gap-2 rounded-xl border border-gray-200 bg-white p-4 transition-all',
|
||||
)}
|
||||
htmlFor={fineTuneOptionsId}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={fineTuneOptionsId}
|
||||
checked={showFineTuneOptions}
|
||||
onChange={(e) => {
|
||||
if (!trimmedTitle) {
|
||||
toast.error('Please enter a topic first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (trimmedTitle.length < 3) {
|
||||
toast.error('Topic must be at least 3 characters long');
|
||||
return;
|
||||
}
|
||||
|
||||
setShowFineTuneOptions(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
<span className="max-sm:hidden">
|
||||
Answer the following questions for a better {selectedFormat}
|
||||
</span>
|
||||
<span className="sm:hidden">Customize your {selectedFormat}</span>
|
||||
</label>
|
||||
|
||||
{/* {showFineTuneOptions && (
|
||||
<QuestionAnswerChat
|
||||
term={title}
|
||||
format={selectedFormat}
|
||||
questionAnswerChatMessages={questionAnswerChatMessages}
|
||||
setQuestionAnswerChatMessages={setQuestionAnswerChatMessages}
|
||||
onGenerateNow={() => {
|
||||
handleSubmit();
|
||||
}}
|
||||
/>
|
||||
)} */}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="flex w-full items-center justify-center gap-2 rounded-xl bg-black p-4 text-white focus:outline-none disabled:cursor-not-allowed disabled:opacity-80"
|
||||
disabled={!canGenerate}
|
||||
>
|
||||
<SparklesIcon className="size-4" />
|
||||
Generate
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -60,7 +60,7 @@ export function ContentGenerator() {
|
||||
useEffect(() => {
|
||||
const params = getUrlParams();
|
||||
const format = params.format as AllowedFormat;
|
||||
if (format && allowedFormats.includes(format)) {
|
||||
if (format && allowedFormats.find((f) => f.value === format)) {
|
||||
setSelectedFormat(format);
|
||||
}
|
||||
}, []);
|
||||
|
||||
15
src/pages/ai/quiz/index.astro
Normal file
15
src/pages/ai/quiz/index.astro
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
import { AIQuiz } from '../../../components/AIQuiz/AIQuiz';
|
||||
import SkeletonLayout from '../../../layouts/SkeletonLayout.astro';
|
||||
---
|
||||
|
||||
<SkeletonLayout
|
||||
title='AI Quiz'
|
||||
briefTitle='AI Quiz'
|
||||
description='AI Quiz'
|
||||
keywords={['ai', 'quiz', 'education', 'learning']}
|
||||
canonicalUrl='/ai/quiz'
|
||||
noIndex={true}
|
||||
>
|
||||
<AIQuiz client:load />
|
||||
</SkeletonLayout>
|
||||
Reference in New Issue
Block a user