add async checkbox, per question ability to set LLM for PI questions

Author: sethbern

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx

@@ -1,14 +1,25 @@
 import { EditableCellFactory } from "@components/ui/EditableTable/EditableCellFactory";
 import { TableSelectionOverlay } from "@components/ui/EditableTable/TableOverlay";
 import { ExerciseTypeTag } from "@components/ui/ExerciseTypeTag";
-import { useReorderAssignmentExercisesMutation } from "@store/assignmentExercise/assignmentExercise.logic.api";
+import { useToastContext } from "@components/ui/ToastContext";
+import {
+  useHasApiKeyQuery,
+  useReorderAssignmentExercisesMutation,
+  useUpdateAssignmentQuestionsMutation
+} from "@store/assignmentExercise/assignmentExercise.logic.api";
+import { Button } from "primereact/button";
 import { Column } from "primereact/column";
 import { DataTable, DataTableSelectionMultipleChangeEvent } from "primereact/datatable";
+import { Dropdown } from "primereact/dropdown";
+import { OverlayPanel } from "primereact/overlaypanel";
 import { Tooltip } from "primereact/tooltip";
 import { useRef, useState } from "react";
 
+import { useExercisesSelector } from "@/hooks/useExercisesSelector";
+
 import { difficultyOptions } from "@/config/exerciseTypes";
 import { useJwtUser } from "@/hooks/useJwtUser";
+import { useSelectedAssignment } from "@/hooks/useSelectedAssignment";
 import { DraggingExerciseColumns } from "@/types/components/editableTableCell";
 import { Exercise, supportedExerciseTypesToEdit } from "@/types/exercises";
 
@@ -19,6 +30,68 @@ import { ExercisePreviewModal } from "../components/ExercisePreview/ExercisePrev
 
 import { SetCurrentEditExercise, ViewModeSetter, MouseUpHandler } from "./types";
 
+const AsyncModeHeader = ({ hasApiKey }: { hasApiKey: boolean }) => {
+  const { showToast } = useToastContext();
+  const [updateExercises] = useUpdateAssignmentQuestionsMutation();
+  const { assignmentExercises = [] } = useExercisesSelector();
+  const overlayRef = useRef<OverlayPanel>(null);
+  const [value, setValue] = useState("Standard");
+
+  const handleSubmit = async () => {
+    const exercises = assignmentExercises.map((ex) => ({
+      ...ex,
+      question_json: JSON.stringify(ex.question_json),
+      use_llm: value === "LLM"
+    }));
+    const { error } = await updateExercises(exercises);
+    if (!error) {
+      overlayRef.current?.hide();
+      showToast({ severity: "success", summary: "Success", detail: "Exercises updated successfully" });
+    } else {
+      showToast({ severity: "error", summary: "Error", detail: "Failed to update exercises" });
+    }
+  };
+
+  return (
+    <div className="flex align-items-center gap-2">
+      <span>Async Mode</span>
+      <Button
+        className="icon-button-sm"
+        tooltip='Edit "Async Mode" for all exercises'
+        rounded
+        text
+        severity="secondary"
+        size="small"
+        icon="pi pi-pencil"
+        onClick={(e) => overlayRef.current?.toggle(e)}
+      />
+      <OverlayPanel closeIcon ref={overlayRef} style={{ width: "17rem" }}>
+        <div className="p-1 flex gap-2 flex-column align-items-center justify-content-around">
+          <div><span>Edit "Async Mode" for all exercises</span></div>
+          <div style={{ width: "100%" }}>
+            <Dropdown
+              style={{ width: "100%" }}
+              value={value}
+              onChange={(e) => setValue(e.value)}
+              options={[
+                { label: "Standard", value: "Standard" },
+                { label: "LLM", value: "LLM", disabled: !hasApiKey }
+              ]}
+              optionLabel="label"
+              optionDisabled="disabled"
+              scrollHeight="auto"
+            />
+          </div>
+          <div className="flex flex-row justify-content-around align-items-center w-full">
+            <Button size="small" severity="danger" onClick={() => overlayRef.current?.hide()}>Cancel</Button>
+            <Button size="small" onClick={handleSubmit}>Submit</Button>
+          </div>
+        </div>
+      </OverlayPanel>
+    </div>
+  );
+};
+
 interface AssignmentExercisesTableProps {
   assignmentExercises: Exercise[];
   selectedExercises: Exercise[];
@@ -48,6 +121,11 @@ export const AssignmentExercisesTable = ({
 }: AssignmentExercisesTableProps) => {
   const { username } = useJwtUser();
   const [reorderExercises] = useReorderAssignmentExercisesMutation();
+  const [updateAssignmentQuestions] = useUpdateAssignmentQuestionsMutation();
+  const { selectedAssignment } = useSelectedAssignment();
+  const { data: hasApiKey = false } = useHasApiKeyQuery();
+  const isPeerAsync =
+    selectedAssignment?.kind === "Peer" && selectedAssignment?.peer_async_visible === true;
   const dataTableRef = useRef<DataTable<Exercise[]>>(null);
   const [copyModalVisible, setCopyModalVisible] = useState(false);
   const [selectedExerciseForCopy, setSelectedExerciseForCopy] = useState<Exercise | null>(null);
@@ -276,6 +354,32 @@ export const AssignmentExercisesTable = ({
             />
           )}
         />
+        {isPeerAsync && (
+          <Column
+            resizeable={false}
+            style={{ width: "12rem" }}
+            header={() => <AsyncModeHeader hasApiKey={hasApiKey} />}
+            bodyStyle={{ padding: 0 }}
+            body={(data: Exercise) => (
+              <div className="editable-table-cell" style={{ position: "relative" }}>
+                <Dropdown
+                  className="editable-table-dropdown"
+                  value={data.use_llm && hasApiKey ? "LLM" : "Standard"}
+                  onChange={(e) => updateAssignmentQuestions([{ ...data, use_llm: e.value === "LLM" }])}
+                  options={[
+                    { label: "Standard", value: "Standard" },
+                    { label: "LLM", value: "LLM", disabled: !hasApiKey }
+                  ]}
+                  optionLabel="label"
+                  optionDisabled="disabled"
+                  scrollHeight="auto"
+                  tooltip={!hasApiKey ? "Add an API key to enable LLM mode" : undefined}
+                  tooltipOptions={{ showOnDisabled: true }}
+                />
+              </div>
+            )}
+          />
+        )}
         <Column resizeable={false} rowReorder style={{ width: "3rem" }} />
       </DataTable>
       <TableSelectionOverlay

bases/rsptx/assignment_server_api/assignment_builder/src/store/assignmentExercise/assignmentExercise.logic.api.ts

@@ -167,6 +167,14 @@ export const assignmentExerciseApi = createApi({
         body
       })
     }),
+    hasApiKey: build.query<boolean, void>({
+      query: () => ({
+        method: "GET",
+        url: "/assignment/instructor/has_api_key"
+      }),
+      transformResponse: (response: DetailResponse<{ has_api_key: boolean }>) =>
+        response.detail.has_api_key
+    }),
     copyQuestion: build.mutation<
       DetailResponse<{ status: string; question_id: number; message: string }>,
       {
@@ -218,5 +226,6 @@ export const {
   useReorderAssignmentExercisesMutation,
   useUpdateAssignmentExercisesMutation,
   useValidateQuestionNameMutation,
-  useCopyQuestionMutation
+  useCopyQuestionMutation,
+  useHasApiKeyQuery
 } = assignmentExerciseApi;

bases/rsptx/assignment_server_api/assignment_builder/src/types/exercises.ts

@@ -56,6 +56,7 @@ export type Exercise = {
   reading_assignment: boolean;
   sorting_priority: number;
   activities_required: number;
+  use_llm: boolean;
   qnumber: string;
   name: string;
   subchapter: string;

bases/rsptx/assignment_server_api/routers/instructor.py

@@ -1387,6 +1387,17 @@ async def add_api_token(
         )
 
 
+@router.get("/has_api_key")
+@instructor_role_required()
+@with_course()
+async def has_api_key(request: Request, user=Depends(auth_manager), course=None):
+    """Return whether the course has at least one API token configured."""
+    tokens = await fetch_all_api_tokens(course.id)
+    return make_json_response(
+        status=status.HTTP_200_OK, detail={"has_api_key": len(tokens) > 0}
+    )
+
+
 @router.get("/add_token")
 @instructor_role_required()
 @with_course()

bases/rsptx/web2py_server/applications/runestone/controllers/peer.py

@@ -742,7 +742,14 @@ def peer_async():
     if "latex_macros" not in course_attrs:
         course_attrs["latex_macros"] = ""
 
-    llm_enabled = _llm_enabled()
+    aq = None
+    if current_question:
+        aq = db(
+            (db.assignment_questions.assignment_id == assignment_id)
+            & (db.assignment_questions.question_id == current_question.id)
+        ).select().first()
+    question_use_llm = bool(aq.use_llm) if aq else False
+    llm_enabled = _llm_enabled() and question_use_llm
     try:
         db.useinfo.insert(
             course_id=auth.user.course_name,

bases/rsptx/web2py_server/applications/runestone/models/questions.py

@@ -73,5 +73,6 @@
     Field(
         "activities_required", type="integer"
     ),  # specifies how many activities in a sub chapter a student must perform in order to receive credit
+    Field("use_llm", type="boolean", default=False),
     migrate=bookserver_owned("assignment_questions"),
 )

bases/rsptx/web2py_server/applications/runestone/views/peer/peer_async.html

@@ -100,6 +100,9 @@ <h3>Congratulations, you have completed this assignment!</h3>
                 </button>
               </div>
 
+              <p id="llmDisclaimer" style="display:none; font-size:0.8em; color:#888; margin-top:4px; margin-bottom:0;">
+                You are chatting with an AI, not a real peer.
+              </p>
               <p id="nextStep" style="margin-top:8px; font-style:italic;"></p>
             </div>
         </div>
@@ -298,9 +301,13 @@ <h3>Congratulations, you have completed this assignment!</h3>
   lockVote1AndReflection();
 
   discussion.style.display = "block";
+  if (window.PI_LLM_MODE === true) {
+    const disclaimer = document.getElementById("llmDisclaimer");
+    if (disclaimer) disclaimer.style.display = "block";
+  }
   chat.innerHTML = "<p><em>Thinking about your explanation…</em></p>";
 
-  if (window.PI_LLM_MODE !== true) {
+  async function showStandardDiscussion(chat, nextStep, showInstructorNote) {
     const resp = await fetch("/runestone/peer/get_async_explainer", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -323,6 +330,11 @@ <h3>Congratulations, you have completed this assignment!</h3>
       )} <br />`;
     }
     chat.innerHTML = "";
+    if (showInstructorNote) {
+      chat.innerHTML += `<div style="background:#fff3cd; border:1px solid #ffc107; border-radius:4px; padding:8px; margin-bottom:8px;">
+        <strong>Note:</strong> The AI peer is currently unavailable. Please contact your instructor.
+      </div>`;
+    }
     chat.innerHTML += `<p><strong>Other students said:</strong></p>`;
     if (res) {
       chat.innerHTML += `<p>${res}</p>`;
@@ -343,6 +355,10 @@ <h3>Congratulations, you have completed this assignment!</h3>
       readyBtn.title = "";
     }
     studentSubmittedVote2 = false;
+  }
+
+  if (window.PI_LLM_MODE !== true) {
+    await showStandardDiscussion(chat, nextStep, false);
     return;
   } else {
     const mcq = document.querySelector('.mchoice');
@@ -369,15 +385,15 @@ <h3>Congratulations, you have completed this assignment!</h3>
         })
       });
     } catch (e) {
-      chat.innerHTML = "<p><em>LLM error. Please try again.</em></p>";
+      await showStandardDiscussion(chat, nextStep, true);
       return;
     }
 
     const data = await resp.json();
     chat.innerHTML = "";
 
     if (!data.ok) {
-      chat.innerHTML = "<p><em>LLM error. Please try again.</em></p>";
+      await showStandardDiscussion(chat, nextStep, true);
       return;
     }
 
@@ -487,15 +503,15 @@ <h3>Congratulations, you have completed this assignment!</h3>
         })
       });
     } catch (e) {
-      appendMsg("assistant", "LLM error. Please try again.");
+      appendMsg("assistant", "The AI peer is currently unavailable. Please contact your instructor.");
       btn.disabled = false;
       input.disabled = false;
       return;
     }
 
     const data = await resp.json();
     if (!data.ok) {
-      appendMsg("assistant", "LLM error. Please try again.");
+      appendMsg("assistant", "The AI peer is currently unavailable. Please contact your instructor.");
       btn.disabled = false;
       input.disabled = false;
       return;

components/rsptx/db/models.py

@@ -678,6 +678,7 @@ class AssignmentQuestion(Base, IdMixin):
     activities_required = Column(
         Integer
     )  # only reading assignments will have this populated
+    use_llm = Column(Web2PyBoolean, default=False)
 
 
 AssignmentQuestionValidator: TypeAlias = sqlalchemy_to_pydantic(AssignmentQuestion)  # type: ignore

components/rsptx/validation/schemas.py

@@ -341,6 +341,7 @@ class AssignmentQuestionUpdateDict(TypedDict, total=False):
     reading_assignment: Optional[bool]
     sorting_priority: int
     activities_required: Optional[int]
+    use_llm: Optional[bool]
 
     # Question fields
     name: Optional[str]