From 399ce726501dba32e18d75ed0f8357e77b5c4476 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Tue, 1 Jul 2025 04:58:59 +0600
Subject: [PATCH] wip

---
 src/components/AIQuiz/AIQuiz.tsx              |  12 +
 src/components/AIQuiz/AIQuizGenerator.tsx     | 227 ++++++++++++++++++
 .../ContentGenerator/ContentGenerator.tsx     |   2 +-
 src/pages/ai/quiz/index.astro                 |  15 ++
 4 files changed, 255 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AIQuiz/AIQuiz.tsx
 create mode 100644 src/components/AIQuiz/AIQuizGenerator.tsx
 create mode 100644 src/pages/ai/quiz/index.astro

diff --git a/src/components/AIQuiz/AIQuiz.tsx b/src/components/AIQuiz/AIQuiz.tsx
new file mode 100644
index 000000000..c137cc8ff
--- /dev/null
+++ b/src/components/AIQuiz/AIQuiz.tsx
@@ -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>
+  );
+}
diff --git a/src/components/AIQuiz/AIQuizGenerator.tsx b/src/components/AIQuiz/AIQuizGenerator.tsx
new file mode 100644
index 000000000..de87ab051
--- /dev/null
+++ b/src/components/AIQuiz/AIQuizGenerator.tsx
@@ -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>
+  );
+}
diff --git a/src/components/ContentGenerator/ContentGenerator.tsx b/src/components/ContentGenerator/ContentGenerator.tsx
index 85da2d70d..1abde5c5e 100644
--- a/src/components/ContentGenerator/ContentGenerator.tsx
+++ b/src/components/ContentGenerator/ContentGenerator.tsx
@@ -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);
     }
   }, []);
diff --git a/src/pages/ai/quiz/index.astro b/src/pages/ai/quiz/index.astro
new file mode 100644
index 000000000..6cab838d6
--- /dev/null
+++ b/src/pages/ai/quiz/index.astro
@@ -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>