Add AI comment selection, LLM feedback, and usage stats dashboard

src/commons/assessment/AssessmentTypes.ts

@@ -69,6 +69,7 @@ export type AssessmentOverview = {
   hasVotingFeatures: boolean;
   hasTokenCounter?: boolean;
   isVotingPublished?: boolean;
+  isLlmGraded?: boolean;
   maxXp: number;
   earlySubmissionXp: number;
   number?: string; // For mission control

src/commons/sagas/RequestsSaga.ts

@@ -714,7 +714,7 @@
     q.library.globals = Object.entries(q.library.globals as object).map(entry => {
       try {
         entry[1] = (window as any).eval(entry[1]);
       } catch (e) {}
       return entry;
     });
 
@@ -1572,16 +1572,99 @@
   return await resp.json();
 };
 
-export const saveFinalComment = async (
+export const saveChosenComments = async (
   tokens: Tokens,
-  answer_id: number,
-  comment: string
+  answerId: number,
+  selectedIndices: number[],
+  edits: Record<number, string>
 ): Promise<Response | null> => {
-  const resp = await request(`${courseId()}/admin/save-final-comment/${answer_id}`, 'POST', {
-    body: { comment: comment },
+  const resp = await request(`${courseId()}/admin/save-chosen-comments/${answerId}`, 'POST', {
+    body: {
+      selected_indices: selectedIndices,
+      edits: edits
+    },
+    ...tokens
+  });
+
+  return resp;
+};
+
+/**
+ * GET /courses/{courseId}/admin/llm-stats/{assessmentId}
+ * Fetches assessment-level LLM usage statistics with per-question breakdown.
+ */
+export const getLLMAssessmentStats = async (
+  tokens: Tokens,
+  assessmentId: number
+): Promise<any | null> => {
+  const resp = await request(`${courseId()}/admin/llm-stats/${assessmentId}`, 'GET', {
+    ...tokens
+  });
+  if (!resp || !resp.ok) {
+    return null;
+  }
+  return await resp.json();
+};
+
+/**
+ * GET /courses/{courseId}/admin/llm-stats/{assessmentId}/{questionId}
+ * Fetches question-level LLM usage statistics.
+ */
+export const getLLMQuestionStats = async (
+  tokens: Tokens,
+  assessmentId: number,
+  questionId: number
+): Promise<any | null> => {
+  const resp = await request(`${courseId()}/admin/llm-stats/${assessmentId}/${questionId}`, 'GET', {
+    ...tokens
+  });
+  if (!resp || !resp.ok) {
+    return null;
+  }
+  return await resp.json();
+};
+
+/**
+ * GET /courses/{courseId}/admin/llm-stats/{assessmentId}/feedback?question_id={questionId}
+ * Fetches LLM feedback for an assessment, optionally filtered by question.
+ */
+export const getLLMFeedback = async (
+  tokens: Tokens,
+  assessmentId: number,
+  questionId?: number
+): Promise<any[] | null> => {
+  let url = `${courseId()}/admin/llm-stats/${assessmentId}/feedback`;
+  if (questionId) {
+    url += `?question_id=${questionId}`;
+  }
+  const resp = await request(url, 'GET', {
     ...tokens
   });
+  if (!resp || !resp.ok) {
+    return null;
+  }
+  return await resp.json();
+};
 
+/**
+ * POST /courses/{courseId}/admin/llm-stats/{assessmentId}/feedback
+ * Submits feedback for the LLM feature on an assessment (optionally for a specific question).
+ */
+export const submitLLMFeedback = async (
+  tokens: Tokens,
+  assessmentId: number,
+  body: string,
+  rating?: number,
+  questionId?: number
+): Promise<Response | null> => {
+  const resp = await request(`${courseId()}/admin/llm-stats/${assessmentId}/feedback`, 'POST', {
+    body: {
+      body,
+      rating,
+      question_id: questionId
+    },
+    ...tokens
+  });
   return resp;
 };
 

src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx

@@ -1,11 +1,12 @@
-import { H5, NonIdealState, Spinner } from '@blueprintjs/core';
+import { Checkbox, H5, NonIdealState, Spinner } from '@blueprintjs/core';
 import React from 'react';
 import styles from 'src/styles/GradingCommentSelector.module.scss';
 
 type Props = {
   comments: string[];
   isLoading: boolean;
-  onSelect: (comment: string) => void;
+  selectedIndices: number[];
+  onToggle: (index: number) => void;
 };
 
 const GradingCommentSelector: React.FC<Props> = props => {
@@ -17,24 +18,31 @@ const GradingCommentSelector: React.FC<Props> = props => {
         <NonIdealState icon={<Spinner />} />
       ) : (
         <div>
-          {' '}
           {props.comments.length > 0 ? (
-            props.comments.map((el, index) => {
+            props.comments.map((comment, index) => {
+              const isSelected = props.selectedIndices.includes(index);
+
               return (
-                <button
+                <div
                   key={index}
-                  className={styles['grading-comment-selector-item']}
-                  onClick={() => {
-                    props.onSelect(el);
-                  }}
+                  className={`${styles['grading-comment-selector-item']} ${isSelected ? styles['selected'] : ''}`}
                 >
-                  {el}
-                </button>
+                  <div className={styles['comment-header']}>
+                    <Checkbox
+                      checked={isSelected}
+                      onChange={() => props.onToggle(index)}
+                      className={styles['comment-checkbox']}
+                    />
+                    <div className={styles['comment-text']} onClick={() => props.onToggle(index)}>
+                      {comment}
+                    </div>
+                  </div>
+                </div>
               );
             })
           ) : (
             <span>No Comments Generated</span>
-          )}{' '}
+          )}
         </div>
       )}
     </div>