wip

src/components/AIQuiz/AIQuizGenerator.tsx

@@ -2,6 +2,7 @@ import {
   BookOpenIcon,
   FileTextIcon,
   ListCheckIcon,
+  ListIcon,
   ListTodoIcon,
   MapIcon,
   SparklesIcon,
@@ -25,6 +26,7 @@ import { cn } from '../../lib/classname';
 import { getUrlParams } from '../../lib/browser';
 import { useParams } from '../../hooks/use-params';
 import { FormatItem } from '../ContentGenerator/FormatItem';
+import { AIQuizLayout } from './AIQuizLayout';
 
 const allowedFormats = ['mcq', 'open-ended', 'mixed'] as const;
 export type AllowedFormat = (typeof allowedFormats)[number];
@@ -56,22 +58,26 @@ export function AIQuizGenerator() {
 
   const allowedFormats: {
     label: string;
+    formatTitle: string;
     icon: LucideIcon;
     value: AllowedFormat;
   }[] = [
     {
       label: 'MCQ',
+      formatTitle: 'Multiple Choice Question',
       icon: ListTodoIcon,
       value: 'mcq',
     },
     {
       label: 'Open-Ended',
+      formatTitle: 'Open-Ended Question',
       icon: FileTextIcon,
       value: 'open-ended',
     },
     {
       label: 'Mixed',
-      icon: MapIcon,
+      formatTitle: 'Mixed Question (MCQ + Open-Ended)',
+      icon: ListIcon,
       value: 'mixed',
     },
   ];
@@ -99,6 +105,9 @@ export function AIQuizGenerator() {
 
   const trimmedTitle = title.trim();
   const canGenerate = trimmedTitle && trimmedTitle.length >= 3;
+  const selectedFormatTitle = allowedFormats.find(
+    (f) => f.value === selectedFormat,
+  )?.formatTitle;
 
   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">
@@ -118,10 +127,10 @@ export function AIQuizGenerator() {
           </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?
+          Test your Knowledge
         </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
+          Create a personalized quiz to test your understanding of any topic
         </p>
       </div>
 
@@ -134,12 +143,12 @@ export function AIQuizGenerator() {
       >
         <div className="flex flex-col gap-2">
           <label htmlFor={titleFieldId} className="inline-block text-gray-500">
-            What can I help you learn?
+            What topic would you like to quiz yourself on?
           </label>
           <input
             type="text"
             id={titleFieldId}
-            placeholder="Enter a topic"
+            placeholder="e.g., JavaScript fundamentals, Machine Learning basics"
             value={title}
             onChange={(e) => {
               setTitle(e.target.value);
@@ -196,22 +205,22 @@ export function AIQuizGenerator() {
             }}
           />
           <span className="max-sm:hidden">
-            Answer the following questions for a better {selectedFormat}
+            Answer the following questions for a better result
           </span>
-          <span className="sm:hidden">Customize your {selectedFormat}</span>
+          <span className="sm:hidden">Customize your quiz</span>
         </label>
 
-        {/* {showFineTuneOptions && (
+        {showFineTuneOptions && (
           <QuestionAnswerChat
             term={title}
-            format={selectedFormat}
+            format={selectedFormatTitle || selectedFormat}
             questionAnswerChatMessages={questionAnswerChatMessages}
             setQuestionAnswerChatMessages={setQuestionAnswerChatMessages}
             onGenerateNow={() => {
               handleSubmit();
             }}
           />
-        )} */}
+        )}
 
         <button
           type="submit"
@@ -219,7 +228,7 @@ export function AIQuizGenerator() {
           disabled={!canGenerate}
         >
           <SparklesIcon className="size-4" />
-          Generate
+          Generate Quiz
         </button>
       </form>
     </div>

src/components/AIQuiz/AIQuizLayout.tsx

@@ -0,0 +1,17 @@
+import { AITutorLayout } from '../AITutor/AITutorLayout';
+
+type AIQuizLayoutProps = {
+  children: React.ReactNode;
+};
+
+export function AIQuizLayout(props: AIQuizLayoutProps) {
+  const { children } = props;
+  return (
+    <AITutorLayout
+      wrapperClassName="flex-row p-0 lg:p-0 relative overflow-hidden bg-white"
+      containerClassName="h-[calc(100vh-49px)] overflow-hidden relative"
+    >
+      {children}
+    </AITutorLayout>
+  );
+}

src/components/AITutor/AITutorSidebar.tsx

@@ -1,6 +1,7 @@
 import {
   BookOpen,
   Compass,
+  ListTodoIcon,
   MessageCircle,
   Plus,
   Star,
@@ -39,6 +40,12 @@ const sidebarItems = [
     href: '/ai/chat',
     icon: MessageCircle,
   },
+  {
+    key: 'quiz',
+    label: 'Test my Knowledge',
+    href: '/ai/quiz',
+    icon: ListTodoIcon,
+  },
   {
     key: 'library',
     label: 'My Learning',

src/components/ContentGenerator/QuestionAnswerChat.tsx

@@ -5,11 +5,7 @@ import {
   type AIQuestionSuggestionsResponse,
 } from '../../queries/user-ai-session';
 import type { AllowedFormat } from './ContentGenerator';
-import {
+import { Loader2Icon, RefreshCcwIcon, SendIcon, Trash2 } from 'lucide-react';
-  Loader2Icon,
-  RefreshCcwIcon,
-  SendIcon, Trash2
-} from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../lib/classname';
 import { flushSync } from 'react-dom';
@@ -26,7 +22,7 @@ export type QuestionAnswerChatMessage =
 
 type QuestionAnswerChatProps = {
   term: string;
-  format: AllowedFormat;
+  format: AllowedFormat | (string & {});
   questionAnswerChatMessages: QuestionAnswerChatMessage[];
   setQuestionAnswerChatMessages: (
     messages: QuestionAnswerChatMessage[],
@@ -259,7 +255,11 @@ export function QuestionAnswerChat(props: QuestionAnswerChatProps) {
                         value={message}
                         onChange={(e) => setMessage(e.target.value)}
                         className="w-full bg-transparent text-sm focus:outline-none"
-                        placeholder={activeMessage.possibleAnswers ? "Type your answer..." : "Or type your own answer..."}
+                        placeholder={
+                          activeMessage.possibleAnswers
+                            ? 'Type your answer...'
+                            : 'Or type your own answer...'
+                        }
                         autoFocus
                         onKeyDown={(e) => {
                           if (e.key === 'Enter' && !e.shiftKey) {
@@ -346,7 +346,7 @@ function QuestionAnswerChatMessage(props: QuestionAnswerChatMessageProps) {
             <div className="group relative">
               <button
                 type="button"
-                className="flex size-6 shrink-0 items-center justify-center rounded-md opacity-70 hover:bg-gray-100 hover:opacity-100 focus:outline-none text-gray-500"
+                className="flex size-6 shrink-0 items-center justify-center rounded-md text-gray-500 opacity-70 hover:bg-gray-100 hover:opacity-100 focus:outline-none"
                 onClick={onEdit}
               >
                 <Trash2 className="size-4" />

src/pages/ai/quiz/index.astro

@@ -1,5 +1,6 @@
 ---
-import { AIQuiz } from '../../../components/AIQuiz/AIQuiz';
+import { AIQuizGenerator } from '../../../components/AIQuiz/AIQuizGenerator';
+import { AITutorLayout } from '../../../components/AITutor/AITutorLayout';
 import SkeletonLayout from '../../../layouts/SkeletonLayout.astro';
 ---
 
@@ -11,5 +12,7 @@ import SkeletonLayout from '../../../layouts/SkeletonLayout.astro';
   canonicalUrl='/ai/quiz'
   noIndex={true}
 >
-  <AIQuiz client:load />
+  <AITutorLayout activeTab='quiz' client:load>
+    <AIQuizGenerator client:load />
+  </AITutorLayout>
 </SkeletonLayout>