add custom logic handling for comprehensive questions ( no need sub categories )

src/app/page.tsx

@@ -10,19 +10,37 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { ChevronRight, ChevronLeft } from 'lucide-react';
 
-const QUESTION_TYPES: QuestionType[] = [
+// Translation map for comprehensive question categories (Chinese → English)
+const COMPREHENSIVE_CATEGORY_MAP: Record<string, { name: string; icon: string; description: string }> = {
+  '單字與片語': { name: 'Vocabulary & Phrases', icon: '📚', description: 'Word meanings, phrases, and vocabulary in context' },
+  '文法與句型': { name: 'Grammar & Sentence Patterns', icon: '📐', description: 'Grammar rules, verb tenses, and sentence structures' },
+  '文意理解與應用': { name: 'Text Comprehension & Application', icon: '💡', description: 'Understanding meaning and applying context clues' },
+};
+
+const COMPREHENSIVE_TYPES: QuestionType[] = Object.entries(COMPREHENSIVE_CATEGORY_MAP).map(
+  ([chineseKey, { name, icon, description }]) => ({
+    id: `comprehensive-${chineseKey}`,
+    name,
+    icon,
+    description,
+  })
+);
+
+const READING_COMPREHENSION_TYPES: QuestionType[] = [
   { id: 'paragraph-summary', name: 'Paragraph Summary', icon: '📄', description: 'Create summaries of text passages' },
   { id: 'paragraph-details', name: 'Paragraph Details', icon: '🔍', description: 'Identify key details in paragraphs' },
-  // { id: 'cloze', name: 'Cloze (Fill-in-the-blank)', icon: '🔤', description: 'Fill in missing words or phrases' },
   { id: 'word-comprehension', name: 'Word Comprehension', icon: '📚', description: 'Test vocabulary understanding in context' },
   { id: 'grammatical-structure', name: 'Grammar Structure', icon: '📝', description: 'Identify grammatical patterns and structures' },
   { id: 'paragraph-structure', name: 'Paragraph Structure', icon: '📋', description: 'Analyze paragraph organization and flow' },
   { id: 'textual-inference', name: 'Textual Inference', icon: '🧠', description: 'Make inferences from text passages' },
 ];
 
+const QUESTION_TYPES: QuestionType[] = [...COMPREHENSIVE_TYPES, ...READING_COMPREHENSION_TYPES];
+
 export default function QuestionBuilder() {
   // Chat builder state
-  const [currentStep, setCurrentStep] = useState<'type-selection' | 'parameters' | 'generation' | 'editing'>('type-selection');
+  const [currentStep, setCurrentStep] = useState<'category-selection' | 'type-selection' | 'parameters' | 'generation' | 'editing'>('category-selection');
+  const [selectedCategory, setSelectedCategory] = useState<'comprehensive' | 'reading-comprehension' | null>(null);
   const [selectedQuestionType, setSelectedQuestionType] = useState<QuestionType | null>(null);
   const [questionParameters, setQuestionParameters] = useState<QuestionParameters>({});
   const [isGenerating, setIsGenerating] = useState(false);
@@ -46,6 +64,11 @@ export default function QuestionBuilder() {
   // Collapse state for question builder panel
   const [isQuestionBuilderCollapsed, setIsQuestionBuilderCollapsed] = useState(false);
 
+  const handleCategorySelect = (category: 'comprehensive' | 'reading-comprehension') => {
+    setSelectedCategory(category);
+    setCurrentStep('type-selection');
+  };
+
   const handleQuestionTypeSelect = (questionType: QuestionType) => {
     setSelectedQuestionType(questionType);
     setCurrentStep('parameters');
@@ -62,6 +85,7 @@ export default function QuestionBuilder() {
 
       const { k: _omitK, ...payloadParameters } = questionParameters as Record<string, unknown>;
 
+      const isComprehensive = selectedQuestionType.id.startsWith('comprehensive-');
       const requests = Array.from({ length: k }, () =>
         fetch('/api/generate-question', {
           method: 'POST',
@@ -69,7 +93,7 @@ export default function QuestionBuilder() {
           body: JSON.stringify({
             type: selectedQuestionType.id,
             parameters: payloadParameters,
-            sourceArticle,
+            ...(isComprehensive ? {} : { sourceArticle }),
           }),
         })
       );
@@ -92,7 +116,8 @@ export default function QuestionBuilder() {
             createdAt: new Date(),
           })),
         ]);
-        setCurrentStep('type-selection');
+        setCurrentStep('category-selection');
+        setSelectedCategory(null);
         setSelectedQuestionType(null);
         setQuestionParameters({});
       }
@@ -235,16 +260,55 @@ export default function QuestionBuilder() {
           
           {!isQuestionBuilderCollapsed && (
             <div className="flex-1 overflow-y-auto p-4">
+              {currentStep === 'category-selection' && (
+                <div className="space-y-4">
+                  <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg p-4">
+                    <p className="text-blue-800 dark:text-blue-200">
+                      🤖 Hi! What category of question would you like to create?
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Button
+                      onClick={() => handleCategorySelect('comprehensive')}
+                      variant="outline"
+                      className="w-full justify-start p-4 h-auto"
+                    >
+                      <div className="flex items-center space-x-3">
+                        <span className="text-lg">📝</span>
+                        <div className="text-left">
+                          <div className="font-medium">Comprehensive Questions</div>
+                          <div className="text-sm text-muted-foreground">Standalone vocabulary, grammar, and sentence-level questions</div>
+                        </div>
+                      </div>
+                    </Button>
+                    <Button
+                      onClick={() => handleCategorySelect('reading-comprehension')}
+                      variant="outline"
+                      className="w-full justify-start p-4 h-auto"
+                    >
+                      <div className="flex items-center space-x-3">
+                        <span className="text-lg">📖</span>
+                        <div className="text-left">
+                          <div className="font-medium">Reading Comprehension</div>
+                          <div className="text-sm text-muted-foreground">Passage-based questions requiring a source article</div>
+                        </div>
+                      </div>
+                    </Button>
+                  </div>
+                </div>
+              )}
+
               {currentStep === 'type-selection' && (
                 <div className="space-y-4">
                   <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg p-4">
                     <p className="text-blue-800 dark:text-blue-200">
-                      🤖 Hi! What type of question would you like to create?
+                      🤖 Select a question type:
                     </p>
                   </div>
-                  
+
                   <div className="space-y-2">
-                    {QUESTION_TYPES.map((type) => (
+                    {(selectedCategory === 'comprehensive' ? COMPREHENSIVE_TYPES : READING_COMPREHENSION_TYPES).map((type) => (
                       <Button
                         key={type.id}
                         onClick={() => handleQuestionTypeSelect(type)}
@@ -261,6 +325,16 @@ export default function QuestionBuilder() {
                       </Button>
                     ))}
                   </div>
+
+                  <Button
+                    onClick={() => {
+                      setSelectedCategory(null);
+                      setCurrentStep('category-selection');
+                    }}
+                    variant="outline"
+                  >
+                    Back
+                  </Button>
                 </div>
               )}
 
@@ -274,7 +348,11 @@ export default function QuestionBuilder() {
                   
                   <div className="flex space-x-2">
                     <Button
-                      onClick={() => setCurrentStep('type-selection')}
+                      onClick={() => {
+                        setCurrentStep('type-selection');
+                        setSelectedQuestionType(null);
+                        setQuestionParameters({});
+                      }}
                       variant="outline"
                     >
                       Back