CLASSROOMIO-T-141: Reusable AI trigger all around the app

CLASSROOM-T-141: Dark mode improvements

CLASSROOMIO-T-141: Add ai widget to landing page settings

CLASSROOMIO-T-141: Enable AI button to text area in the landingpage settings

CLASSROOMIO-T-141: Complete AI flow

Merge branch 'main' into CLASSROOMIO-T-141

CLASSROOMIO-T-141: AI Button test


Co-authored-by: Rotimi Best <[email protected]>
Co-authored-by: Tunji Adeyemi <[email protected]>


Merge-request: CLASSROOMIO-MR-74
Merged-by: Best Admin <[email protected]>

src/lib/components/Courses/components/NewCourseModal/index.svelte

@@ -16,6 +16,19 @@
     description: ''
   };
 
+  let userPrompt = '';
+
+  function onClose() {
+    createCourseModal.update(() => ({
+      open: false,
+      title: '',
+      description: '',
+      emails: '',
+      tutors: '',
+      students: ''
+    }));
+  }
+
   async function createCourse(e) {
     const { hasError, fieldErrors } = validateForm($createCourseModal);
 
@@ -32,6 +45,9 @@
     console.log(`newGroup`, newGroup);
     const { id: group_id } = newGroup[0];
 
+    // Set userPrompt to the description
+    userPrompt = description;
+
     // 2. Create course with group_id
     const { data: newCourse } = await supabase
       .from('course')
@@ -55,7 +71,7 @@
       role_id: ROLE.TUTOR
     });
 
-    $createCourseModal.open = false;
+    onClose();
   }
 </script>
 
@@ -64,7 +80,7 @@
 </svelte:head>
 
 <Modal
-  onClose={() => ($createCourseModal.open = false)}
+  {onClose}
   bind:open={$createCourseModal.open}
   width="w-4/5 md:w-2/5"
   modalHeading="Create a Course"
@@ -73,13 +89,13 @@
     <TextField
       label="Course name"
       bind:value={$createCourseModal.title}
-      autoFocus={true}
       placeholder="Your course name"
       className="mb-4"
       isRequired={true}
       errorMessage={errors.title}
       autoComplete={false}
     />
+
     <TextArea
       label="Short description"
       bind:value={$createCourseModal.description}
@@ -89,6 +105,8 @@
       className="mb-4"
       isRequired={true}
       errorMessage={errors.description}
+      isAIEnabled={true}
+      initAIPrompt="Write a 30 word description for a course titled: {$createCourseModal.title}"
     />
 
     <div class="mt-5 flex items-center">