Added topics field to FE

backend/app/main.py

@@ -90,7 +90,7 @@ async def get_feedback(request: FeedbackRequest):
         raise HTTPException(status_code=500, detail=str(e))
 
 
-@app.post("/api/topics", response_model=TopicsResponse)
+@app.get("/api/topics", response_model=TopicsResponse)
 async def get_topics():
     sources = get_all_unique_source_of_docs_in_collection_DUMB()
     return {"sources": sources}

frontend/src/App.tsx

@@ -1,8 +1,9 @@
-import { Container, CssBaseline, ThemeProvider, createTheme, Button, Box, Typography, Alert } from '@mui/material';
+import { Container, CssBaseline, ThemeProvider, createTheme, Button, Box, Typography, Alert, CircularProgress } from '@mui/material';
 import Header from './components/Header';
 import DocumentInput from './components/DocumentInput';
 import QuizGenerator from './components/QuizGenerator';
 import ProblemAnswer from './components/ProblemAnswer';
+import Topics from './components/Topics';
 import { useState } from 'react';
 import { Problem } from './types/Problem';
 
@@ -25,6 +26,8 @@ function App() {
   const [problems, setProblems] = useState<ProblemWithFeedback[]>([]);
   const [quizTopic, setQuizTopic] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedTopic, setSelectedTopic] = useState<string>('');
 
   const handleProblemsGenerated = (newProblems: string[], query: string) => {
     const problemObjects = newProblems.map(question => ({ question }));
@@ -40,9 +43,14 @@ function App() {
     });
   };
 
+  const handleTopicChange = (topic: string) => {
+    setSelectedTopic(topic);
+  };
+
   const handleSubmit = async () => {
     try {
       setError(null);
+      setIsSubmitting(true);
       
       // Validate that all problems have answers
       const unansweredProblems = problems.some(p => !p.userAnswer);
@@ -58,8 +66,9 @@ function App() {
         },
         body: JSON.stringify({
           user_query: quizTopic,
+          selected_topic: selectedTopic,
           problems: problems.map(p => p.question),
-          user_answers: problems.map(p => p.userAnswer as string) // We can safely cast since we validated above
+          user_answers: problems.map(p => p.userAnswer as string)
         })
       });
 
@@ -78,6 +87,8 @@ function App() {
       );
     } catch (error) {
       setError(error instanceof Error ? error.message : 'An error occurred');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -87,6 +98,7 @@ function App() {
       <Container maxWidth="md" sx={{ py: 4 }}>
         <Header />
         <DocumentInput />
+        <Topics onTopicChange={handleTopicChange} />
         <QuizGenerator onProblemsGenerated={handleProblemsGenerated} />
         
         {error && (
@@ -116,15 +128,17 @@ function App() {
         ))}
 
         {problems.length > 0 && (
-          <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center' }}>
+          <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 2 }}>
             <Button
               variant="contained"
               color="primary"
               size="large"
               onClick={handleSubmit}
+              disabled={isSubmitting}
             >
-              Submit for Feedback
+              {isSubmitting ? 'Submitting...' : 'Submit for Feedback'}
             </Button>
+            {isSubmitting && <CircularProgress size={24} />}
           </Box>
         )}
       </Container>

frontend/src/components/QuizGenerator.tsx

@@ -38,7 +38,7 @@ function QuizGenerator({ onProblemsGenerated }: QuizGeneratorProps) {
     <Box sx={{ mb: 4, display: 'flex', gap: 2 }}>
       <TextField
         fullWidth
-        label="Quiz topic?"
+        label="Quiz focus?"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         disabled={isLoading}

frontend/src/components/Topics.tsx

@@ -0,0 +1,65 @@
+import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent } from '@mui/material';
+import { useEffect, useState } from 'react';
+
+interface TopicsProps {
+  onTopicChange: (topic: string) => void;
+}
+
+interface TopicsResponse {
+  sources: string[];
+}
+
+export default function Topics({ onTopicChange }: TopicsProps) {
+  const [topics, setTopics] = useState<string[]>([]);
+  const [selectedTopic, setSelectedTopic] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchTopics = async () => {
+      try {
+        const response = await fetch('/api/topics');
+        if (!response.ok) {
+          throw new Error('Failed to fetch topics');
+        }
+        const data: TopicsResponse = await response.json();
+        
+        // Validate that we received an array of sources
+        if (!data.sources || !Array.isArray(data.sources)) {
+          throw new Error('Invalid topics data received');
+        }
+        
+        setTopics(data.sources);
+      } catch (error) {
+        console.error('Error fetching topics:', error);
+        setError('Failed to load topics');
+        setTopics([]); // Ensure topics is at least an empty array
+      }
+    };
+
+    fetchTopics();
+  }, []);
+
+  const handleChange = (event: SelectChangeEvent) => {
+    const topic = event.target.value;
+    setSelectedTopic(topic);
+    onTopicChange(topic);
+  };
+
+  return (
+    <FormControl fullWidth sx={{ mb: 2 }}>
+      <InputLabel>Topics</InputLabel>
+      <Select
+        value={selectedTopic}
+        label="Topics"
+        onChange={handleChange}
+        error={!!error}
+      >
+        {Array.isArray(topics) && topics.map((topic) => (
+          <MenuItem key={topic} value={topic}>
+            {topic}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}